Linking classes between files outside of p5js web editor

[hifilo]

Hello,

in the p5js web editor I noticed you can separate classes with files, by linking the class.js inside index.html.

Is this specific to the p5js web editor or can I link classes the same way in another IDE?

[mnse]

Hi @hifilo,

Don’t see why not. Usually you have also an index.html in your vscode project. Just add your classes by adding additional script tags. Keep in mind that you eventually have to respect the order of your classes. Means if you have derived classes you need to add the parent first

Cheers
— mnse

[hifilo]

Thank you, I haven’t tried yet but I will.

Simply placing a script tag makes everything in a script available for other files? And this applies to vanilla JS as well?

I ask because I know import/export is how you connect different methods/functions/classes between files, but by placing the .js file directly in the html tag, this makes the import/export unnecessary.

[mnse]

@hifilo

And this applies to vanilla JS as well?

Yes! But you should encapsulate the several functionalities to not accidentally override stuff from a global context.

Cheers
— mnse

[GoToLoop]

Shared library for simple functions

The “index.html” file can be written as short as this: <script src=https://cdn.JsDelivr.net/npm/p5></script> <script src=https://po4599.GitHub.io/javascript/grid.js></script> <script src=sketch.js></script> Take another look at the short “index.html” above and you won’t spot any quotes or anything like it! How about instead coding your “grid.js” library in such a way that it seamlessly injects itself into the p5js library as part of its API? …