Using / in HTML code for linking modules

[ejgutierrez74]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

1.11.1

Web browser and version

Firefox

Operating system

Linux

Steps to reproduce this

Steps:

Seems very strange: in the head of the index.html i write:

    <script src="/src/scriptindex.js"></script>
    <script src="/libraries/p5.min.js"></script>

Note the / at the beginning of the path…in this case.working fine…

But in the div of the canvas:

<div id="sketch-holder">
        <script src="src/sketch.js" type="module"></script>
    </div>

Works but

<div id="sketch-holder">
        <script src="/src/sketch.js" type="module"></script>
    </div>

With the / doesn’t work, also i have to write type=“module” in other tutorials don’t appear this type only:

<script src="sketch.js"></script>

Also i still think that window.setup = setup and window.draw=draw at the end of sketch.js should no be there…if you export and import a js file, just it, don’t know why window is doing here…

Would be nice if any dev could fix this-

Code
https://drive.google.com/file/d/1J_BBQANpS7U7OEIRlrfx-UCeveXPhDUG/view

Also could be an idea or enhancement for p5.js 2.0

Snippet:

// Paste your code here :)

[Deathnote45]

hi, can I contribute on this? @ejgutierrez74

[ejgutierrez74]

If you can fix this..are you a dev ??

[Deathnote45]

Yes, I'm @ejgutierrez74

[Deathnote45]

You can also check my GitHub profile

[ejgutierrez74]

The problem sorry for my bad english is the /: as the other js scripts works with / at the beginning the sketch doesnt....

But in the div of the canvas:

<div id="sketch-holder">
//Without / at the beginning of the path works
        <script src="src/sketch.js" type="module"></script>
    </div>

Works but

<div id="sketch-holder">
//with / at the beginning doesnt work, but other scripts in js do
        <script src="/src/sketch.js" type="module"></script>
    </div>

Some tutorials also are outdated, as type module is missing:

<script src="sketch.js"></script>

The other thing should be fixed is the code for importing an element from other js files

import Animal from './classes/Animal.js';
import { pointCoord } from './classes/PointCoord.js';

function setup() {
  const dog = new Animal('Dog');
  dog.sayName();
  createCanvas(400, 400).parent('sketch-holder');
}

function draw() {
  background(220);
  pointCoord();
}
**/*Why use globalThis or windows.setup or draw... in js import its not necessary....**
/*Using globalThis ensures that your code interacts with the global object consistently, regardless of the
 environment. This simplifies cross-platform development and eliminates the need to handle different global objects for different environments.

window.setup = setup;
window.draw = draw;
*/
globalThis.setup = setup;
globalThis.draw = draw;

[ksen0]

Hello @ejgutierrez74,
I am looking at the example code here:

<div id="sketch-holder">
        <script src="/src/sketch.js" type="module"></script>
    </div>

and I am wondering if you are trying to create a sketch with its canvas in the #sketch-holder div? If so it would be useful to check the usage of “parent” to attach elements to a specific div: https://p5js.org/reference/p5.Element/parent/
Alternatively, if the context here is about loading multiple sketches into multiple divs, this may be useful:https://github.com/processing/p5.js/wiki/Global-and-instance-mode

Scripts with type="module" don't have their variables automatically added in the global scope, so module sketches wanting to use global mode need window.setup=setup instead of function setup() {...} alone.

Regarding the paths (with or without “/”), if you are still experiencing this issue, could you create a minimal example, please? e.g. just an html page loading a very simple sketch? Paths are handled by the browser rather than p5 itself, so it would help to understand the issue.

For help with debugging your sketch code specifically, it may be helpful to ask in the Discourse forum: https://discourse.processing.org/

[ksen0]

Hi @Deathnote45!

If you’re interested in contributing to p5.js, the contributor guidelines are here: https://p5js.org/contribute/contributor_guidelines/#new-feature-request Please note that contributors should not file a pull request (or start working on code changes) without a corresponding issue or before an issue has been approved for implementation, that is because there is no guarantee that the proposal will be accepted. Any pull requests filed before a proposal has been approved will be closed until approval is given to the issue.

This feature request is still in discussion, but issues that could use help can be found under the Help Wanted label

[ejgutierrez74]

Hello @ejgutierrez74, I am looking at the example code here:

<div id="sketch-holder">
        <script src="/src/sketch.js" type="module"></script>
    </div>

and I am wondering if you are trying to create a sketch with its canvas in the #sketch-holder div? If so it would be useful to check the usage of “parent” to attach elements to a specific div: https://p5js.org/reference/p5.Element/parent/ Alternatively, if the context here is about loading multiple sketches into multiple divs, this may be useful:https://github.com/processing/p5.js/wiki/Global-and-instance-mode

Scripts with type="module" don't have their variables automatically added in the global scope, so module sketches wanting to use global mode need window.setup=setup instead of function setup() {...} alone.

Regarding the paths (with or without “/”), if you are still experiencing this issue, could you create a minimal example, please? e.g. just an html page loading a very simple sketch? Paths are handled by the browser rather than p5 itself, so it would help to understand the issue.

For help with debugging your sketch code specifically, it may be helpful to ask in the Discourse forum: https://discourse.processing.org/

Sorry here is quite minimal example....

Code
https://drive.google.com/file/d/1J_BBQANpS7U7OEIRlrfx-UCeveXPhDUG/view