Using Javascript libraries in editor

Ask us anything
1

I need to use the js library at https://pegjs.org/.

I have included a script tage in my custom code area to include it into the project.

<script src="https://weweb-production.s3.amazonaws.com/designs/6ed91ffe-1557-4f23-bea0-23d4804261a4/files/parser.js"></script>

But I cannot use this code when doing JS inside the editor.

Is there any way that I can make it so that I can use this code inside the WeWeb IDE when writing JS?

1 Like
2

I had a similar problem but with custom css.

From the docs it seems that for now you can load custom code at page level only in the published version.
There are a couple of dirty workarounds for loading the scripts in the editor using the global wwLib (hint: wwLib.wwUtils.addScriptToHead). Warning: this is not official and may break, also, unlike the published version, your library now will not be there until the script loads and is parsed (it should be ready when the returned promise is fulfilled).

A safer option could be to create a custom plugin. In this way you can bundle the library with the plugin and expose actions and formulas to use in the editor in a clean way. GitHub - weweb-assets/plugin-dayjs can be useful.

In my case I opted for the plugin also to test how it is the dev experience. I am planning to release the code soon.

Hope this can help

5 Likes
3

I had nothing else to add :slight_smile:

2 Likes
4

Hello, just adding the solution I implemented in case anyone wants to actually use their library in their function!

document.body.appendChild(Object.assign(document.createElement('script'), {
  type: 'text/javascript',
  src: 'https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js',
  onload: () => this.onScriptLoaded()
}));
5

Thanks @Laurendv for your solution.

Here is my contribution of an enhanced version for scripts that require additional attributes (e.g., API key).

const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js';
script.setAttribute('api-key', 'your-api-key-here');
script.setAttribute('another-attribute', '123abc');
script.onload = () => this.onScriptLoaded();
document.body.appendChild(script);

Setup Steps

  1. Go to Page > Settings > Trigger page workflows
  2. Create a new On page load workflow.
  3. Add a Custom JavaScript action.
  4. Insert the above code and modify the script.src and script.setAttribute (optional).
  5. Reload the WeWeb editor by pressing the browser’s refresh page button or CTRL+R.