Hi all, just giving some advanced notice of uibuilder v4 which I'm hoping will be the next release and not too far away.
Jumping from v3 to v4 due to some breaking changes. Please do get in touch if you think that any of these may cause you issues or you think they are the wrong direction.
Due to several dependencies being updated, uibuilder v4 will have a minimum requirement of Node.js v12.
That also means that I am assuming I can use ECMA 2018 (AKA JavaScript v9) for any back-end code. ESLint has been adjusted accordingly. Have a look at web.js and socket.js class modules if you want to see some ECMA 2018 magic at work (private variables and functions).
One of the big dependency changes has been to Socket.IO which has rapidly jumped from v2 to v4 and is included in this release as it will be in Node-RED Dashboard when v2 is delivered. This should pave the way for more improvements and features in future releases of uibuilder.
Given the imminent demise of Internet Explorer, I am assuming that browsers are now reasonably modern and so you will now need a browser that supports ECMA 2015 (AKA JavaScript v6). This is supported by all modern browsers but may be problematic on some really old mobile devices. This applies both to the settings panel in the Editor and to the uibuilderfe library.
Template handling will change significantly in uibuilder v4. Templates are used when you add a new instance of uibuilder to Node-RED and they give you a starting set of code to work with.
Previously, you were given a VueJS/bootstrap-vue template whether you liked it or not. Then I added a couple of choices but you had to make a choice before you did your first deploy or you would need to go and delete files. This is really not very friendly and not terribly flexible.
With v4, the intention is to give you a really blank template. But the template settings in the Editor will be enhanced so that you can choose a new template at any time (though existing files/folders will be overwritten). This should be a lot easier to get your head around.
In addition, you will now have the option to use external templates. These can be loaded and updated direct from GitHub, GitLab, etc thanks to the degit library.
A template can contain all sorts of resources now including images, code, a package.json, a readme, documentation and more.
This should also mean that you can easily share uibuilder apps that you have created.
A couple of other features may make it into v4. Hopefully though, these are non-breaking and so if they have to be delayed, it shouldn't be a big change:
Ability to move the uibRoot folder from ~/.node-red/uibuilder to anywhere you like.
A tab in the Editor that picks up any npm scripts defined in a package.json in an instance's root folder. Letting you run any of the scripts easily.
Check out the uibuilder To Do Project to see what is on the cards for more releases. There is lots more to come.
**v4.0.0 is now available for beta testing. ** The big news is external templates! Create and manage your own templates or use someone else's - directly from a web repository like GitHub.
It is available on the GitHub main branch and can be installed with:
Please give it a good hammering if you have time. It should be pretty stable.
The major changes implemented so far are:
Template handling is significantly changed in this major release.
New instances of uibuilder nodes will only be given the "blank" template which uses no front-end frameworks.
You can load a different template using the "Template Settings" in the Editor.
Loading a new template WILL overwrite any files with the same name. A warning is given though so even if you press the button, you can still back out.
You can choose from the following internal templates:
VueJS & bootstrap-vue - The previous default template.
Simple VueJS - A minimal VueJS example.
Blank - The new default.
External - See below.
But, you can now also chose an EXTERNAL template! This will let you choose from any remote location supported by degit. You can use TotallyInformation/uib-template-test as an example (on GitHub).
NOTE: When using an external template, no check is currently done on dependencies, you must install these yourself. I will try to add this feature in the future.
Improved Docs
The docsify configuration has been greatly improved with a new theme and some automation for dates and document front-matter.
In the technical documentation, you can now access and search the main uibuilder README as well as the current and archive changelogs (v1 & v2) in addition to everything else.
Don't forget that you can access the tech docs on the Internet from GitHub AND locally from within Node-RED.
Other big changes
Node.js v12+ is the minimum supported environment for Node-RED.
Only "modern" browsers now supported for both the Editor and the uibuilderfe front-end library as ES6 (ECMA2015) code is used.
Let me know if this is a problem and I can build a backwards compatible version.
I assume that I am doing something wrong as I get the following when I run npm install TotallyInformation/node-red-contrib-uibuilder I am using node-red 2.0 and I already have uibuilder installed along with vue, bootstrap and bootstrap-vue
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli '/usr/bin/node',
1 verbose cli '/usr/bin/npm',
1 verbose cli 'install',
1 verbose cli 'TotallyInformation/node-red-contrib-uibuilder'
1 verbose cli ]
2 info using npm@6.14.13
3 info using node@v14.17.1
4 verbose npm-session a53a683532b5954e
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 silly fetchPackageMetaData error for github:TotallyInformation/node-red-contrib-uibuilder Error while executing:
7 silly fetchPackageMetaData undefined ls-remote -h -t ssh://git@github.com/TotallyInformation/node-red-contrib-uibuilder.git
7 silly fetchPackageMetaData
7 silly fetchPackageMetaData
7 silly fetchPackageMetaData spawn git ENOENT
8 timing stage:rollbackFailedOptional Completed in 2ms
9 timing stage:runTopLevelLifecycles Completed in 1148ms
10 verbose stack Error: spawn git ENOENT
10 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
10 verbose stack at onErrorNT (internal/child_process.js:467:16)
10 verbose stack at processTicksAndRejections (internal/process/task_queues.js:82:21)
11 verbose cwd /home/pi/.node-red
12 verbose Linux 5.10.17-v7l+
13 verbose argv "/usr/bin/node" "/usr/bin/npm" "install" "TotallyInformation/node-red-contrib-uibuilder"
14 verbose node v14.17.1
15 verbose npm v6.14.13
16 error code ENOENT
17 error syscall spawn git
18 error path git
19 error errno -2
20 error enoent Error while executing:
20 error enoent undefined ls-remote -h -t ssh://git@github.com/TotallyInformation/node-red-contrib-uibuilder.git
20 error enoent
20 error enoent
20 error enoent spawn git ENOENT
21 error enoent This is related to npm not being able to find a file.
22 verbose exit [ -2, true ]
Don't bother, it is something stupid I did. I just worked out that I did not have git installed. I have been installing a Pi from scratch and failed to realise that git is not added in the standard installation files that I used.
I just rebuilt my docker image and got a syntax error in uibuilder:
30 Jun 18:05:19 - [info] Node-RED version: v1.3.4
30 Jun 18:05:19 - [info] Node.js version: v12.22.1
30 Jun 18:05:19 - [info] Linux 5.4.0-77-generic x64 LE
30 Jun 18:05:19 - [info] Loading palette nodes
30 Jun 18:05:20 - [info] Worldmap version 2.15.4
30 Jun 18:05:20 - [info] Dashboard version 2.29.3 started at /ui
30 Jun 18:05:20 - [warn] ------------------------------------------------------
30 Jun 18:05:20 - [warn] [node-red-contrib-uibuilder/uibuilder] SyntaxError: Unexpected token '(' (line:34)
30 Jun 18:05:20 - [warn] ------------------------------------------------------
30 Jun 18:05:20 - [info] Settings file : /data/settings.js
30 Jun 18:05:20 - [info] HTTP Static : /data/static
30 Jun 18:05:20 - [info] Context store : 'default' [module=memory]
30 Jun 18:05:20 - [info] Context store : 'persistent' [module=localfilesystem]
30 Jun 18:05:20 - [info] User directory : /data
30 Jun 18:05:20 - [info] Projects directory: /data/projects
30 Jun 18:05:20 - [info] Refreshing https settings every 24 hours
30 Jun 18:05:20 - [info] Server now running at https://127.0.0.1:1880/admin/
30 Jun 18:05:20 - [info] Active project : test-flows
30 Jun 18:05:20 - [info] Flows file : /data/projects/test-flows/flow-test.json
30 Jun 18:05:20 - [info] Waiting for missing types to be registered:
30 Jun 18:05:20 - [info] - uibuilder
during the install, this is what it said:
> node-red-contrib-uibuilder@4.0.0 preinstall /usr/src/node-red/node_modules/node-red-contrib-uibuil
der
> node ./bin/uibpreinstalljs
======================================= [UIBUILDER PREINSTALL] =====================================
==
Please ignore warnings about missing peer dependencies for jquery, vue, bootstrap-vue
*** WARNING: npm is incapable of safely installing packages from within pre-/post-install scripts. *
**
So vue and bootstrap-vue are no longer installed by uibuilder.
You must install them yourself using the command:
npm install vue@"2.*" bootstrap-vue@"2.*"
==================================================================================================
Two things that you could check. First that nodes/socket.js exists. Second, try manually editing the uibuilder.js file and take the .js off the end of the require string.
I have the same issue as 'tve' on one Linux-machine (Mint) were Node-Red is installed as an adapter in IoBrocker:
SyntaxError: Unexpected token '(' (line:32)
Install path is:
/opt/iobroker/iobroker-data/node-red
/opt/iobroker/iobroker-data/node-red/node_modules/nodes/socket.js exsists
editing uibuilder.js to
const sockets = require('./socket')
made no difference.
However, no problems on the other machine were Node-Red installed from scratch on Mint-Linux.
I'm not an expert at all, so I guess I'm not going to be much of a help.
2021-07-11 20:36:40.172 - info: host.nuc "system.adapter.node-red.0" enabled
2021-07-11 20:36:40.232 - info: host.nuc instance system.adapter.node-red.0 started with pid 872651
2021-07-11 20:36:40.836 - info: node-red.0 (872651) starting. Version 2.3.0 in /opt/iobroker/node_modules/iobroker.node-red, node: v12.22.2, js-controller: 3.2.16
2021-07-11 20:36:41.218 - info: node-red.0 (872651) Starting node-red: --max-old-space-size=1024 /opt/iobroker/node_modules/node-red/red.js -v --settings /opt/iobroker/iobroker-data/node-red/settings.js
2021-07-11 20:36:44.254 - warn: node-red.0 (872651) Trace: REQUIRE SOCKET:: /opt/iobroker/iobroker-data/node-red/node_modules/node-red-contrib-uibuilder/nodes/socket.js:114 #socketIoSetup() {
^
SyntaxError: Unexpected token '('
at compileFunction ()
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (/opt/iobroker/iobroker-data/node-red/node_modules/node-red-contrib-uibuilder/nodes/uibuilder.js:37:25)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at loadNodeSet (/opt/iobroker/node_modules/@node-red/registry/lib/loader.js:361:17)
at Object. (/opt/iobroker/iobroker-data/node-red/node_modules/node-red-contrib-uibuilder/nodes/uibuilder.js:39:13)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at loadNodeSet (/opt/iobroker/node_modules/@node-red/registry/lib/loader.js:361:17)
at /opt/iobroker/node_modules/@node-red/registry/lib/loader.js:459:31
at Array.forEach ()
at loadNodeSetList (/opt/iobroker/node_modules/@node-red/registry/lib/loader.js:454:11)
at /opt/iobroker/node_modules/@node-red/registry/lib/loader.js:158:16
2021-07-11 20:36:44.256 - warn: node-red.0 (872651) Trace: REQUIRE WEB:: /opt/iobroker/iobroker-data/node-red/node_modules/node-red-contrib-uibuilder/nodes/web.js:121 #webSetup() {
^
SyntaxError: Unexpected token '('
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (/opt/iobroker/iobroker-data/node-red/node_modules/node-red-contrib-uibuilder/nodes/uibuilder.js:42:25)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at loadNodeSet (/opt/iobroker/node_modules/@node-red/registry/lib/loader.js:361:17)
at /opt/iobroker/node_modules/@node-red/registry/lib/loader.js:459:31
at Object. (/opt/iobroker/iobroker-data/node-red/node_modules/node-red-contrib-uibuilder/nodes/uibuilder.js:44:13)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at loadNodeSet (/opt/iobroker/node_modules/@node-red/registry/lib/loader.js:361:17)
at /opt/iobroker/node_modules/@node-red/registry/lib/loader.js:459:31
at Array.forEach ()
at loadNodeSetList (/opt/iobroker/node_modules/@node-red/registry/lib/loader.js:454:11)
at /opt/iobroker/node_modules/@node-red/registry/lib/loader.js:158:16
2021-07-11 20:36:44.776 - warn: node-red.0 (872651) 11 Jul 20:36:44 - [warn] ------------------------------------------------------
2021-07-11 20:36:44.777 - warn: node-red.0 (872651) 11 Jul 20:36:44 - [warn] [node-red-contrib-uibuilder/uibuilder] TypeError: Cannot read property 'setup' of undefined (line:288)
11 Jul 20:36:44 - [warn] ------------------------------------------------------
2021-07-11 20:36:44.781 - warn: node-red.0 (872651) 11 Jul 20:36:44 - [warn] Projekte deaktiviert: editorTheme.projects.enabled=false
11 Jul 20:36:44 - [info] Flow-Datei: /opt/iobroker/iobroker-data/node-red/flows.json
Argh! Right I now know what is wrong and it is because I didn't read the node.js v12 documentation carefully enough.
I started using private class fields which I thought were in v12 but actually are only in v14. So if you use node.js v14, it will work just fine.
OK, I will revert that part, I don't think it is right to force everyone onto v14 just yet.
Still, I learned something useful about the weakness in require as well - it amazes me that such an error is not properly reported. I will leave the try/catch in place so that we don't have that problem ever again. I am also reminded not to rely too much on eslint which should have spotted this as well.
Tired tonight after a busy day so I'm afraid it won't be done immediately, I don't want to rush it and cause more issues. Though you can do your own temporary fix if you want to carry on testing. In both socket.js and web.js, change all the references that start with a # to use an underscore, that should work.
Will try to get it done during the week so I can finally publish v4.
Then I added a couple of choices but you had to make a choice before you did your first deploy or you would need to go and delete files. This is really not very friendly and not terribly flexible.
The big news is external templates! Create and manage your own templates or use someone else's - directly from a web repository like GitHub.
