Fire event on DOM/Element load

[vast nymph]

What's the Astro-recommended way to fire an event after the dom has loaded? It appears window.onload, DOMContentLoaded, or the load event don't fire...

[subtle ridge]

Hi @vast nymph. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the Astro documentation (https://docs.astro.build) for more information on handling events and scripts in Astro components.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@vast nymph kapa.ai is still learning and improving, please let us how it did by reacting below

[lyric pilot]

By default <script> tags are type="module", so they load after the DOM has loaded, so you should be able to query any elements right away!
If you want to use a "vanilla" script tag, add is:inline, then you can use a query listener, but you loose things like NPM imports that come with the default <script>

[vast nymph]

Huh. I have a system that requires a <canvas> to be loaded before it can run. With or without a query listener, it doesn't fire(I have an alert() that will trigger once it finishes loading)

So I'm not sure why the script just never runs

[lyric pilot]

Could you share the code?

(at least the relevant part)

[vast nymph]

The script tag(pardon the weird indents): ```ts
import { Flux } from "flux";
const flux = new Flux({
mode: "Normal",
fluidSize: 128,
fluidFrameRate: 60,
fluidTimestep: 0.016666666666666666,
viscosity: 5,
velocityDissipation: 0,
clearPressure: "KeepPressure",
diffusionIterations: 3,
pressureIterations: 19,
colorScheme: "Peacock",
lineLength: 550,
lineWidth: 10,
lineBeginOffset: 0.4,
lineVariance: 0.45,
gridSpacing: 15,
viewScale: 1.6,
noiseChannels: [
{ scale: 2.5, multiplier: 1, offsetIncrement: 0.0015 },
{ scale: 15, multiplier: 0.7, offsetIncrement: 0.009 },
{ scale: 30, multiplier: 0.5, offsetIncrement: 0.018 },
]});

function animate(timestamp: number) {
    flux.animate(timestamp);
    window.requestAnimationFrame(animate);
}

const resizeObserver = new ResizeObserver(([entry]) => {
    if(!entry) return;
    let { width, height } = entry.contentRect;
    flux.resize(width, height);
});
resizeObserver.observe(document.getElementById("canvas") as HTMLElement);
alert("Hello, World!");
window.requestAnimationFrame(animate);

This version has the alert outside everything, so it should fire no matter what.

And the code doesn't throw any visible errors, so I'm not sure what else might be going wrong...

[lyric pilot]

Hmmm really weird
Could it be that you haven't imported or used the component this script is attached to?

[vast nymph]

The script is attached directly to the Page, not in a component(yet), and I can see it being imported in the head.

[lyric pilot]

Does the alert trigger if it's at the start of the script?

[vast nymph]

Yes

[lyric pilot]

That means that the script probably failed sometime halfway

Weird that it doesn't log an error tho

[vast nymph]

Ok, It seems it breaks around the new Flux section. But I'm not sure what the issue would be there. Maybe a WASM Import issue?

Is there a way to get around needing vite-plugin-wasm to get WASM imports to work?

[lyric pilot]

You could change the script to is:inline type=module and import flux with a URL

[vast nymph]

Doesn't that break bundling then? I don't think Flux is on a CDN rn, so I would have to bundle that script manually then...

@subtle ridge what is the best way to import a dependency that uses WASM, without using vite-plugin-wasm, or disabling bundling on a script?

[subtle ridge]

Let me check the knowledge base for you. One moment! :books:

---

Astro supports loading WASM files directly into your application using the browser's WebAssembly (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly) API. You can use the following code snippet to load and initialize the requested WASM file:

// Loads and initializes the requested WASM file
const wasm = await WebAssembly.instantiateStreaming(fetch('/example.wasm'));

You can find more information in the Astro documentation on imports (https://docs.astro.build/en/guides/imports#wasm).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@vast nymph kapa.ai is still learning and improving, please let us how it did by reacting below