Is there another solution instead using $.getScript(..) for once add external client javascript in created node html file?

Developing Nodes
1

Hi,

At first, I have follow bellow topic for add external client javascript in created node html file.

Include JS in a html custom module - General - Node-RED Forum (nodered.org)

Include JS in a html custom module - General - Node-RED Forum (nodered.org)

I use RED.httpAdmin.get(...) in created node js file.

RED.httpAdmin.get('/node-line-notify/js/*', function(req, res){
        const parentPath = path.resolve(__dirname, '..');
        const options = {
            root: parentPath + '/static/',
            dotfiles: 'deny'
        };
    
        res.sendFile(req.params[0], options);
    
        // var filename = path.join(__dirname , 'static', req.params[0]);
        // res.sendfile(filename);
    });

And I use $.getScript(..) in created node html file at event 'oneditprepare' event, see below

oneditprepare: function () {
         .......
         $.getScript('node-line-notify/js/emoji-picker-new.js')
                .done(function (data, textStatus, jqxhr) {
                    console.log("load emoji script done");
                    initEmojiPicker({
                        trigger: [
                            {
                                selector: '.btnEmoji',
                                insertInto: '.node-input-message'
                            }
                        ],
                        closeButton: false,
                    }, setButtonState);
                })
                .fail(function (jqxhr, settings, exception) {
                    console.log("fail load emoji script");
                    console.log(exception);
                    console.log(exception.stack);
                });
        .........
}

The process for load external client javascript is able to work properly.

But I have some problem after that.

My script has load and create new instantiate javasript class object every time when 'oneditprepare', Then my class object has increase everytime.

Is there another solution instead using $.getScript(..) for once add external client javascript in created node html file?

Thank you in advance.

2

Do you really need to load this on every onEditPrepare?
Couldn't it be sufficient to load it once (on module level) and then create instances when necessary?

3

Actually, I want to load my external client javascript at only once time. And if my created node module can call, if it want to use.

My external client javascript is add emoji module.

pic1
pic1539Ă—611 16.1 KB

Everytime 'oneditprepare' will do, it has load external client javascript and new instantiate my emoji module.

And then if I select emoji icon at once, number of selected emoji icon is inserted into textarea is equat to instance of external client javascript.

pic2

So, I want to find solution for load my external client javascript at only once time, and using them with my created node module.

4

If I may chip in here.
if your custom library is for the Editor, then you maybe over engineering this.

See my post here.

Just adding a resources folder to your node, will allow Node RED to use any file from this location, and your HTML file can call into this folder, and it will load only once.

just put a normal script file tag at the top of your HTML file and its loaded (and ready to use), whenever your node configuration is used.

the js file here will be loaded as the editor is loaded (not when your configuration is shown)
i.e it loads once

<script src="resources/node-red-contrib-cool-node/emoji-picker-new.js"></script>

The resources folder should be used if your Node HTML requires it's own JS files (or any other resource for that mater, i.e images etc)

You should not need to use RED.httpAdmin to fetch your own resources, the ability is baked into Node RED for you.

https://nodered.org/docs/creating-nodes/resources

1 Like
5

Thank you very much. :blush:

I follow your suggestion and Loading extra resources in the editor : Node-RED. It works correctly.

By add

<script src="resources/my-node-package/emoji-picker-new.js"></script>

and
Call instantiate outside 'oneditprepare' below.

<script type="text/javascript">
    .....
    (() => {
        new EmojiPicker({
            ...........
            ...........
        }, setButtonState);
    })();

    RED.nodes.registerType('my-node-module', {
         .............
          oneditprepare: function () {
              ............
          }
    };
</script>

Thank you for you all helps :blush:

6

You might want to wrap that round your whole script rather than just the picker. Helps ensure that there can be no accidental interactions between your code and another node's in the Editor. I do that on all my nodes.

7

You mean, I should wrap all code inside

(() => {
.........
.........
})();

right?

8

Yup, that's right.

9

Thank you very much :blush:

10

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