Tutorial request: step by step create custom weweb plugin using simple existing package [RESOLVED]

[aeynaud]

It would be great to have a step-by-step tutorial into how to use a package via CDN.

I’ll take the Day.js package for example.
If you wanted to make a custom plugin/component (which I have no idea how to do, I just somewhat comprehend the underlying principles), you could use:
npm install dayjs

Then, per their documentations you would use in your js scripts:
const dayjs = require('dayjs')
dayjs().format()

However, I know that packages like this can be used by simply inserting the following into the header of your page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>

Using a CDN has many advantages regarding caching the scripts in your user’s browsers for future use etc… However, I have no idea how to use it in WeWeb. I have tried adding the script as custom code for the app, to no avail… and for an individual page into the header as well, in vain.

How do I get it to work? Do I have to add a workflow with custom js code that initiates
const dayjs = require('dayjs') ? If using a workflow for this, is this now initiated everywhere in the app? Would packages initiated in a workflow be globally accessible if I use it in the formula for a text element somewhere else?

If I don’t initialise the CDN script inside a workflow with a “Custom JS” action, would doing it in a bound formula work? Again, would that create global variables or would they only work inside the enclosed formula attached to the element you are currently modifying?

How do the scopes of const, let and var work inside WeWeb - would const indeed make a global formula useable somewhere else?

This is what I meant regarding learning more about how JavaScript is used in WeWeb:

What would help you the most?

As @IdeaGarage said, all of the above-mentioned would be fantastic. Specifically, I would love to attend workshops on how to effectively use JavaScript with WeWeb. What I mean by that is not “How to code in JS” because there are millions of resources for that, but what functions made specifically by WeWeb we can use, or how you handle Vue components etc… For example, I am only now familiar with wwLib.getFrontDocument() and yes that is easy and straightforward to use - but the single line in t…

I can see how a tutorial for the above, i.e. for how to use a simple cdn script tag in the header and how to use it/troubleshoot it in WeWeb would go an immense way in helping users use packages they find online. That is, until WeWeb implements their own way of importing packages in the editor for their users (as per the roadmap if I recall correctly).

Edit: Also - require() doesn’t exist in plain JS, so then you would need a plugin?