Hi, I’m trying to split my UI js content into multiple files. The bundling works in theory, if I add the js files to my app.ts in my webpack configuration: entry: { app: ['./src/app.ts', './src/test.js'] // This is the entry point for our plugin code. }, The code of test.js now runs, but with strong limitations. The js in my ui.html cannot use the functions of the test.js If I try to use the DOM in my test.js, the plugin crashs I also tried to use a typescript format instead of js for my test file, so I can use the import command, but DOM related code like “document” is unknown for typescript. The main goal I want to achieve is simply having a cleaner structure and in best case, referencing my js content across files. 😃 I was also taking a look into the Libraries and Bundling documentation and tried it with the script tag and as said with the bundling as well to add more js files to my UI. Thanks for your help!

New Participant

Question

[SOLVED] Use functions from bundled js files in UI / Split UI js into multiple files

11 replies
1114 views

Hi,

I’m trying to split my UI js content into multiple files.
The bundling works in theory, if I add the js files to my app.ts in my webpack configuration:

  entry: {
    app: ['./src/app.ts', './src/test.js'] // This is the entry point for our plugin code.
  },

The code of test.js now runs, but with strong limitations.

The js in my ui.html cannot use the functions of the test.js
If I try to use the DOM in my test.js, the plugin crashs
I also tried to use a typescript format instead of js for my test file, so I can use the import command, but DOM related code like “document” is unknown for typescript.

The main goal I want to achieve is simply having a cleaner structure and in best case, referencing my js content across files. 😃
I was also taking a look into the Libraries and Bundling documentation and tried it with the script tag and as said with the bundling as well to add more js files to my UI.

Thanks for your help!

This topic has been closed for replies.

Show previous replies

Phil_815Author

New Participant

@Gleb Thank you for the long support. 🙂

@Andrei_Iancu Thank you for taking a look into my problem. I extended my inlineSource by the css tag. The svelte implementation looks interesting as well. Now I want to test it for another plugin!
Yes, my original issue was that I wasn’t sure how to load css and js files into my compiled ui.html.

After all the hours, I now found the problem. It was kind of stupid and unbelievable. 😂
I was further exploring why the dist/ui.html was not executing the compiled code and started to play around in the dist/ui.html. When I have noticed that no single change in there was affecting the plugin, even when I cleaned the whole file, I was taking a look into my manifest. Turns out, the manifest was taking the ui.html in the src folder, not the dist folder.
I changed "ui": "src/ui.html", to "ui": "dist/ui.html", and now it works:
✅ external js files for my UI
✅ external scss files for my UI

Sign up

Login with SSO

Login to the community

Login with SSO