Uibuilder V6 library integratin

General
1

I am using Niode-Red 3.0.2 and UIBuilder 6.4.1
how can I insert the libraries so that the standard example works?

I get the following error message in the debug window:
"[uibuilder:socket:addNs:uib-dynamic-svg-eg] Socket.IO middleware failed to load for NS - check that uibRoot/.config/sioMiddleware.js has a valid exported fn."

2

Hi, looks like you have specified a socket.io middleware file. You will find those kinds of files in your <uibRoot>/.config/ folder (where <uibRoot> would be ~/.node-red/uibuilder. on a default installation.

By default, that folder contains 3 template files that have to export functions in a specific format. If you have renamed one of the templates to *.js, it will be picked up after a node-red restart. Simply rename it to end in something else and restart node-red.

3

hello, thanks that seems to have worked, there is no error message anymore.
But now I have the next problem I installed the example: UIbuilder with MoonJS - simple, responsive UI
Unfortunately I can't get the package installed in the library:
Is there an example for installing?
Am I right that there are 2 options: npm
and once
GH:
at GH
I entered the following:
gh repo clone kbrsh/moon
Unfortunately without success
Can you please help me Thanks!!!

4

Hi, check the uibuilder version that example relates to. I think it might be quite dated. I've not looked at MoonJS in a long time so I can't say whether its requirements have changed or not I'm afraid.

If you are wanting to use a framework package like Moon with uibuilder, you should use uibuilder's library tab and install it there. The npm version is generally the one you want.

5

what is the exact input to install a package in the uibuilder library, I keep getting error messages

6

From the MoonJS npm readme, the package is called simply moon. That is what you put into the top input field when adding a library.

image

uibuilder then attempts to work out the correct link to add the library to your front-end html page (though note that this totally relies on package authors specifying something sensible which they don't always do).

image

A quick read of the Moon install guide shows that some adjustments are needed to make things work in the browser without a build step. You also need to add the moon-browser package. If you just want to test things, you can use an online version of Moon instead of having to add it to uibuilder.

This works for me - index.html

<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>Testing MoonJS v1 - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Testing MoonJS v1">

    <!-- Your own CSS (defaults to loading uibuilders css)-->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script defer src="../uibuilder/vendor/moon/dist/moon.min.js"></script>
    <script defer src="https://unpkg.com/moon-browser"></script>
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script type="text/moon" defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->

</head><body class="uib">
    
    <h1 class="with-subtitle">Testing MoonJS v1</h1>
    <div role="doc-subtitle">Using the uibuilder IIFE library.</div>

    <div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>

    <div id="root"></div><!-- Root structure for MoonJS -->

</body></html>

index.js (from one of their examples)

const button = Moon.view.m.button;

const increment = ({ data }) => {
    const dataNew = data + 1;

    return {
        data: dataNew,
        view: <view data=dataNew />
    };
};

const view = ({ data }) =>
    <button @click=increment > { data }</button >;

Moon.use({
    data: Moon.data.driver,
    view: Moon.view.driver("#root")
});

Moon.run(() => ({
    data: 0,
    view: <view data=0/>
}));
7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.