node-red-contrib-unsafe-function enhancement

[hanc2006]

Hi @ozomer , I was inspired by your project and I started adding new features. What I have done so far:

UI

• Updated the code to use the new function tabs editor (node-red > 1.0)
• Added the ability to install and uninstall external NPM modules
• Added the ability to create custom JavaScript modules (stored under the component directory)

TABS
The new node interface is composed as follows:

• Function
• Packages
• Modules

FUNCTION TAB
The function tab works the same way as the original one, with the ability to format the code (using js-beautify).

PACKAGES TAB
With this tab you can install and uninstall NPM modules.

MODULES TAB
This tab lists all the JavaScript modules created by the user. You can create, edit, format code, and delete a module directly from the web interface.

main

editor

Toolbar options: back, format code, save module, delete module

What do you think about it?

[natcl]

Hello !
I'm also maintainer on this package. I think this looks very interesting !
Can you explain a bit more how the modules work ?
I'm mostly curious on where they are stored ?

[hanc2006]

Hi @natcl,
Currently the modules are stored in a sub folder relative to the node installation path. Modules are simple JavaScript files that can be requested in the main function code. Modules are loaded if required by the main function thanks to the require-from-string package. I use the "prependPaths" options to hang the absolute path automatically, so the user can request the module using just his name.

The modules tabs it's just a web interface that allows you to manage files directly from the browser. This weekend I will fork the project so you can try it :)

[natcl]

Yes would love to try this !

[hanc2006]

There would be some improvements that I have planned but haven't completed yet. For example:

• Function code validation
  Check if the required modules, created by the user or downloaded from npm, exists or have been downloaded.

• Packages
  Currently the packages installed through this node are added to the packages.json used by NODE-RED. Maybe you could change this behavior, using an isolated packages.json.

• Function code beautifier
  Currently the rules for formatting the JavaScript code are static and cannot be changed. You could make them dynamic by adding an option in NODE-RED settings.

[natcl]

One thing to note is the ability to require external modules was added to the core function node in Node-RED 1.3 that was released today:
https://nodered.org/blog/2021/04/08/version-1-3-released

What the core node lacks is the ability to execute code outside the VM module which makes code slower.
I also like the modules idea which the core node also lacks.
While I think it's worth it to update the unsafe function with these changes, would you be willing to discuss your changes with the Node-RED devs ? could be interesting to include some of that functionality in the core.

[hanc2006]

I saw the version 1.3 update. But I still use the stable version
We can talk to the team, but first look at the changes and tell me what you think :)

[natcl]

Sure thing ! :)

[hanc2006]

Project fork is online with the above changes.

[natcl]

Thanks will have a look !

[ozomer]

@natcl @hanc2006 Hi, I haven't used node-red for over a year and I'm not going to any time soon. Do you want to take over this project, including the control of the package in npmjs.com ?

[natcl]

Hi @ozomer !
I believe I already have access but I'll check to make sure !

Thanks!

[natcl]

I have access to both the repo and NPM, will be glad to help maintaining it !

[natcl]

@hanc2006 can you start a pull request for this feature ? Will be easier to test it that way.
Thanks !

[hanc2006]

I'm working on a new, more exciting upgrade. I replaced the ace editor with the monaco editor for a better user experience.
I created a separate project just to create an optimized monaco bundle to import later into the main project.

The playground project is available here: node-red-contrib-monaco
It is a simple web page that include the monaco editor preconfigured and optimized for node-red.

So why change editor?

• Code completion for node libraries (core and modules like fs, path, http, ...)
• Code completion for node-red library with globals.
• Code completion for all custom user modules (created by users under the modules tab).
• Several code snippets templates created for node-red.
• Automatic code completion for import packages (all package available in the package.json file, completion only for require or import).
• Code navigation between different files in quick preview mode.
• Better error checking in code, and for import modules.

I also added some extra validation check before installing an npm package or before create a new module.