🎉 Node-RED 1.0.0-beta.2 released

News
1

We have just released the first public beta release of Node-RED 1.0.

The changes in this release are mostly focused on the editor - and there are some significant changes in there.

Editor CSS restructuring

This is probably the largest breaking change we've ever made in the history of Node-RED. It is the sort of change we could only do with a major version bump.

This will break:

  • any custom themes that people have created for Node-RED.
  • any nodes that have ignored our warnings and custom their appearance in the
    editor beyond what we have provided APIs for.

There's no easy way around that. You will want to disable your custom theme before trying this beta for the first time.

Pretty much every single CSS class and DOM ID used by the editor has been changed. The classes and ids we were using reflected 5 years of incremental development, including things dating back to the very first day I started creating Node-RED.

They have served us well this far, but were, frankly, an inconsistent mess for anyone who wanted to create a custom theme, or to try to embed the editor in their own page.

So this release brings a much more consistent naming scheme for all of these things. We avoid setting any global styles to the page, instead applying them only to things within the editor components.

We have also structured the css to make it much easier to create custom colour schemes for the editor. We also provide a script to do a lot of the work for you in generating a custom theme - more details on that in the near future, or, if you're interested, come as in #dev on slack. I hope that by the time 1.0-final is published, we'll have some 1.0-ready themes available in the community to go with it.

A pretty much complete list of these changes is available here.

If you do see anything in the editor that looks wrong, please do flag it up in this thread. I've checked pretty much every single piece of UI functionality as part of this work, but no doubt there could be some odd edge case that hasn't been hit yet.

New Import/Export dialogs

The clipboard dialogs have been combined with the library import/export dialogs to give a more consistent experience around importing and exporting flows.

Local_Node-RED
Local_Node-RED.png1402×1184 18.5 KB

The individual type libraries (for example, in the Function node) have also been updated to a matching style.

Catch/Status node

It is now easier to pick which nodes the Catch and Status nodes target. Rather than having to just pick from a long list of nodes, you can now switch back to the workspace and click on the nodes you want.

This is a new facility in the editor that we'll be making use of in other places prior to 1.0 - such as the Debug filter dialog and the Link nodes.

Editor dependencies

We've finally updated the versions of jQuery and jQuery-UI to their latest - 3.4.1 and 1.12.1 respectively. As jQuery 3.x removes a bunch of deprecated APIs that we were previously depending on, we've also included jquery-migrate that keeps things working for now. That has the added benefit of recording any usage of the deprecated APIs so we can start spotting contrib nodes that need to be updated.

Whilst we say hello to the latest version of jQuery, we also say goodbye to Bootstrap. We used the Bootstrap theme in the very early days of the editor and have been slowly weaning ourselves off it. With this release, the last remnants of bootstrap css and JavaScript have been removed.

Context Sidebar auto-refresh

The Context sidebar now has an option to toggle on or off the auto-refreshing of its contents as you switch tabs. It defaults to off.

Picking your language

There is a new option under the user settings dialog to pick what language the editor is presented in. By default it will use the browser's preferred language, but you can override that to use one of the languages we provide: English, Japanese, Chinese, Korean or German.

Node updates

There have been a small number of bugs fixes and enhancements to the core nodes. The CSV node now has an option to turn off its smart detection of number values and to leave them as strings. It turned out it was being a bit too smart for certain edge cases.

And finally, the Template node finally has an option to expand the edit box to a full screen editor, much like the Function node has had for a while. Having recently had to spend some time using the Template node, I can only apologise for it having taken so long to get this feature.

Installing the beta

If you want to try out the beta, you will need specify node-red@next when you use npm to update. Without the @next you'll still get 0.20.x.

So on a Pi you'd do:

sudo npm install -g --unsafe-perm node-red@next

Reporting problems

If you hit any problems, please report them either as a reply on this topic, or in the #dev slack channel. Please do not post new topics to the forum regarding the beta as that could confuse users who are not using the beta.

Outstanding work

Given the nature of the changes to the editor in this beta, there is likely to be some more work tidying up a few left over pieces - in particular within the node edit dialogs.

There are also some more runtime-focussed changes to come - in particular, adding a new API to allow nodes to declare when they have finished processing a message.

20 Likes
2

Upgraded a Pi3B+ - all seemed OK so updated my Win10 machine with 50 flow tabs and that seems to work OK as well :slight_smile:

3

Is it me being too excited about getting closer to 1.0.0 or it really render smoother and faster. Nice work anyway. Flawless upgrade on windows 10 here. :clap:

4

Maybe... there are a couple minor optimisations in the view drawing code, so it is possible it isn't all in your head :wink:

1 Like
5

Clean install using my usual method (not using global install of Node-RED), W10, Vivaldi browser,

24 May 16:50:26 - [info] Node-RED version: v1.0.0-beta.2
24 May 16:50:26 - [info] Node.js  version: v10.15.3
24 May 16:50:26 - [info] Windows_NT 10.0.17763 x64 LE
24 May 16:50:26 - [info] Loading palette nodes
24 May 16:50:27 - [warn] rpi-gpio : Raspberry Pi specific node set inactive
24 May 16:50:28 - [info] Dashboard version 2.15.2 started at /ui
24 May 16:50:28 - [info] +-----------------------------------------------------
24 May 16:50:28 - [info] | uibuilder initialised:
24 May 16:50:28 - [info] |   root folder: C:\src\nr1\data\uibuilder
24 May 16:50:28 - [info] |   version . .: 2.0.0-dev2
24 May 16:50:28 - [info] |   debug . . .: false
24 May 16:50:28 - [info] |   packages . : vue,bootstrap,bootstrap-vue,socket.io
24 May 16:50:28 - [info] +-----------------------------------------------------
24 May 16:50:28 - [info] Settings file  : C:\src\nr1\data\settings.js
24 May 16:50:28 - [info] Context store  : 'default' [module=memory]
24 May 16:50:28 - [info] User directory : C:\src\nr1\data
24 May 16:50:28 - [warn] Projects disabled : editorTheme.projects.enabled=false
24 May 16:50:28 - [info] Flows file     : C:\src\nr1\data\flows_DESKTOP-M1M6R28.json
24 May 16:50:28 - [info] Creating new flow file

uibuilder v2 is certainly working fine. No problems found as yet.

6

Does this feature applies only for flow context values? It seems the global context window still requires manual refresh.

7

When autorefresh is enabled, global is loaded when the editor loads, and flows refresh whenever you switch tabs. Nodes have to be manually refreshed.

With autorefresh off, everything has to be manually refreshed.

I can't remember what I implemented for the moment when you turn on auto refresh .. whether it does a one time refresh of flow and global. Open to feedback on what it should do.

8

It's fine and clear after the additional explanation. Might be not so clear if you look at the placement of the checkbox and first experiences. But having nothing to advise to improve the situation also.

1 Like
9

Running on my humble backup RPi Model A (256MB).

As a side note, had to stop/start Node-RED after upgrading to 1.0.0-b2, otherwise it looked weird as you can see below:

After starting it again:

image
image.png671×755 18.1 KB

Great job guys! :clap:

10

Was there a reason for the differences?

On the times I need to use that tab, I have to say that having to manually refresh things was a pain and I often forget.

11

Yes - you always need to restart Node-RED after you upgrade it.

1 Like
12

Copying here for posterity sake:

Trying out V1.0.0-beta.2 - In the change node, when changing msg.payload to search for a string and replace with a boolean, no matter if I select true or false after closing the editor and reopening, all boolean options are set to true. I can change them back to false, close and open again and they're true again.

13

Had a quick look - indeed, the TypedInput is broken for Boolean type in general. Have raised an issue for me to look at it properly later.

14

I looked into the flow file for the node in question and it looks like it leaves "tot":"", empty instead of true or false. Hopefully that's useful information.

15

One small bug: If I pin a value in the debug tab the background turns so dark that I cannot read the pinned value.
Screenshot_2019-05-27_11-16-19

16

The API for treelist has been changed

before 1.0 the API for adding children is: (https://nodered.org/docs/api/ui/treeList/)

children: function(done) {
    $.getJSON('/some/url', function(result) {
        done(result);
    })
}

now it seems to be:

children: function(item, done) {
    $.getJSON('/some/url', function(result) {
        done(result);
    })
}

How solid is the new definition now?

Will this be rotated again (so that it remains backward compatible) or does this order remain the parameter?

17

My bad. Will restore the API for the next beta. Forgot we'd published this widget with 0.20... thought I still had leeway to tinker before formalising.

18

No Problem, the idea to add the item is very good. By simply rotating done and item let it be compatible to 0.20

children: function(done, item) {
    $.getJSON('/some/url', function(result) {
        done(result);
    })
}```
19

I've just upgraded to NR v1.0.0-beta-2 and found the fill and/or shape attribute doesn't work.
Here's a snippet that used to work fine in the previous release.
Cheers from David

var fsm_state = flow.get("state_counter");

if (fsm_state === 0 || fsm_state == 1){
msg.payload = 1;
node.status({fill:"red",shape:"dot",text:"Red ON"});
}

else {
msg.payload = 0;
node.status({});
}

return msg;

20

After some testings I found that fill and shape attribute doesn't work after first occurrence. And somehow the debug node can still handle the status with shape correctly.

Works until you once set empty object to status
node.status({});