Script type="module" Draw and Setup Not Working

SonnySandberg

function setup() { createCanvas(800, 400); } function draw() { background(55); }

When I add the script like normal: <script src="sketch.js" type="text/javascript"></script> it works perfectly fine. But, if I do this: <script type="module" src="sketch.js" type="text/javascript"></script> it simply stops working.

I need to import my JS as module, or I can't use ES6 as intended, so this is a problem. I have already asked around, among Daniel Shiffman himself via Twitter, who ask me to ask here. No one seem to be able to help me. I really hope, that someone has a simple solution for this, that does not involve not importing with type="module". That part is needed.

Thanks.

SonnySandberg

Just noticed the extra type declaration. Even when removed, it still does not work. <script type="module" src="sketch.js"></script>

GoToLoop

https://Forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

According to https://Developer.Mozilla.org/en-US/docs/Web/HTML/Element/script#Browser_compatibility

Safari is currently the only browser now w/ native type=module feature! =;
We shouldn't rely on a feature which only 1 browser family offers! :-@

Besides, we need to use special export syntax in order for a JS script file to be considered a module:
https://Hacks.Mozilla.org/2015/08/es6-in-depth-modules/

Wait for other main browser families to catch up before using the module feature natively. :-\"

SonnySandberg

All big brand browsers today support module and have done it for years. Chrome has full support.

This is a standard from 2015.

So, that part of your answer is of course not valid, to me.

I have looked at the source code for P5 and I was coming to the same conclusion, that the lack of export of functions and variables are the problem. This means of course, that the entire library has to be rewritten or people like me, who use new standards daily, cannot use P5 and that is a pure shame.

SonnySandberg

Sent a message to the youtuber methmethmethod last night and he gave me the answer.

At the bottom of the module, you have to expose the method using to the browser. Like this:

function setup() { createCanvas(800, 400); } function draw() { background(55); } function keyPressed() { console.log("presseed"); }

window.setup = setup; window.draw = draw; window.keyPressed = keyPressed;

For some reason you don't have to do that to all functions, like background(). Don't know why yet, but am looking into it.

SonnySandberg

P5 functions that are looked up by P5 itself are in global scope. But p5 can't see into the module. Thus they have to be exposed to the window in the module itself.

This refers to setup, draw, keyPressed/released, mouse and such. Haven't looked up all functions, that P5 looks up at the time the site is loaded.

Functions that are called don't need to be specified like this, as they are all in global scope and the module has access to this already.

blindfish

All big brand browsers today support module and have done it for years. Chrome has full support.

This is a standard from 2015.

This blog post appears to contradict you:

The compromise that was reached was to have the JavaScript specification specify the syntax of modules, but without any way to actually run them.

Don't assume that because a spec has been defined it will magically become available in the browser :P

If you want to modularise your code then why not use an appropriate - and currently supported - tool such as Browserify or Webpack? From a quick glance it looks like p5 is using the CommonJS module standard so should work with either of those (and more besides) and you can setup a build environment that supports ES6....

GoToLoop

http://CanIUse.com/#feat=es6-module

SonnySandberg

Edge, Chrome, Firefox (has to be enabled) and Safari ALL supports ES6 and modules. How do I know? I tested it.

No need to use other tools to make valid code work, as specified above. I am very happy that I got help elsewhere, from methmethmethod (brilliant youtuber btw, I certainly recommend him).

On another node: I must admit, that I am very surprised that the "help" here has been, "don't use new code" and "use other tools". I certainly hope this is not standard for how "help" is given, as it has been very unhelpful.

To others that see this thread in the future, because they had same problem, see my posts, explaining what the problem was and how to fix it :)

GoToLoop

No need to use other tools to make valid code work, as specified above.

Still, as I had already pointed out at my 1st answer, for a ".js" file to be modularizable it's gotta be written to use JS' export syntax.

Here's the article's link again: https://Hacks.Mozilla.org/2015/08/es6-in-depth-modules/

As @blindfish pointed out, p5.js' source code uses CommonJS modularization, which isn't compatible w/ JS' module! [-X

SonnySandberg

But it is, as I posted above.

GoToLoop

Although p5.js' isn't compatible w/ JS' module syntax, your own code still can! >-)
Just use p5.js' instance mode approach: *-:)

https://GitHub.com/processing/p5.js/wiki/Global-and-instance-mode

GoToLoop

But it is, as I posted above.

Yes, indeed, JS module is arriving for ALL main browsers. It's almost there! :)>-
But ".js" files aren't automatically compatible w/ modularization.
They've gotta be written to use that feature! [-(

SonnySandberg

Fine. And I have written my take on how to do that in very few lines, without any further need of writing elaborate scripts and so forth.

Is there a way to close this topic? If so, please do.

blindfish

On another node: I must admit, that I am very surprised that the "help" here has been, "don't use new code" and "use other tools". I certainly hope this is not standard for how "help" is given, as it has been very unhelpful.

Sorry to be so unhelpful in my free time - I normally get paid fairly well for offering this kind of advice :P

If you consider the suggestion to use well established tools that solve the problem you've encountered in a way that is supported by the majority of browsers to be unhelpful I'm sorry. In a professional context I'd certainly never recommend using bleeding edge technology like module (it only became available in Chrome on 5th September: that's hardly well-established) since you'll inevitably run into problems with library support... Obviously if you're just playing around you do what you like ;)

To others that see this thread in the future, because they had same problem, see my posts, explaining what the problem was and how to fix it

An ugly hack exposing methods in the global context - something modules are specifically designed to avoid - is not a solution I'd recommend... You'd do better to make a feature request to the p5 devs to get proper support for module export.