SolidJS•7mo ago

Reloading Wasm or Reloading Page

hello everyone. I am trying to host some games I made with Raylib and Zig and compiled to wasm on my website. It kinda works right now, when I first enter the Gamepage the game loads just fine and works fine, but when I route some other page on my website and back to my game page the game doesnt work anymore (using Solid Router). To get it to Work again i have to reload the page. So now I either have to find a way to reload the page when I get rerouted to it by solid router or find a way how to properly unload and reload the wasm an js code. I have a page for my game which contains the HTML Elements I need and a function createScriptLoader to add the required Js scripts to the head of the page when I enter my TestGame Page and removed if i leave it:

var OMITTED_PROPS = ["src"];
function createScriptLoader(props: any) {
  if (isServer) {
    return void 0;
  }
  const script = document.createElement("script");
  const [local, scriptProps] = splitProps(props, OMITTED_PROPS);
  setTimeout(() => spread(script, scriptProps, false, true));
  createRenderEffect(() => {
    const src = typeof local.src === "string" ? local.src : local.src();
    const prop = "src";
    if (script[prop] !== src) {
      script[prop] = src;
      document.head.appendChild(script);
    }
  });
  onCleanup(() => document.head.contains(script) && document.head.removeChild(script));
  return script;
}

var OMITTED_PROPS = ["src"];
function createScriptLoader(props: any) {
  if (isServer) {
    return void 0;
  }
  const script = document.createElement("script");
  const [local, scriptProps] = splitProps(props, OMITTED_PROPS);
  setTimeout(() => spread(script, scriptProps, false, true));
  createRenderEffect(() => {
    const src = typeof local.src === "string" ? local.src : local.src();
    const prop = "src";
    if (script[prop] !== src) {
      script[prop] = src;
      document.head.appendChild(script);
    }
  });
  onCleanup(() => document.head.contains(script) && document.head.removeChild(script));
  return script;
}

const TestGame: Component = () => {
    createScriptLoader({
        src: "/index.js",
        async: true,
    });
    createScriptLoader({
        src: "/core.js",
    });
  return (
    <>
    <Navbar />
    <div hidden class="emscripten" id="status">Downloading...</div>
    <progress hidden id="progress" max={100} value={0}></progress>
    <canvas class="emscripten" id="canvas" oncontextmenu={e => e.preventDefault()} tabindex={-1}></canvas>
    </>
  );
};

const TestGame: Component = () => {
    createScriptLoader({
        src: "/index.js",
        async: true,
    });
    createScriptLoader({
        src: "/core.js",
    });
  return (
    <>
    <Navbar />
    <div hidden class="emscripten" id="status">Downloading...</div>
    <progress hidden id="progress" max={100} value={0}></progress>
    <canvas class="emscripten" id="canvas" oncontextmenu={e => e.preventDefault()} tabindex={-1}></canvas>
    </>
  );
};

3 Replies

bigmistqke•7mo ago

mm 🤔 is TestGame like a layout? does it get mounted/unmounted between navigations?

JoeOP•7mo ago

TestGame is just a component that i route to (<Route path="/test" component={TestGame}/>) and it adds a js script to the head with createScriptLoader() and removes it from the head onCleanup

bigmistqke•7mo ago

I wouldn't directly know tbh. It reminds me a bit of a bug I had recently with injecting esm modules when working on https://github.com/bigmistqke/repl the esm module had initialisation code in the module's scope. When I added it initially it worked, but when I removed and added it again it wouldn't run the code in the module's body. The code in the module's body would only run on initial load. My trick for the repl was to re-create the object-url, so the iframe just thinks it's a completely new file. I am not well versed w wasm so don't know if that trick can be applied there too. I wonder if maybe adding some nonsense query at the end might be enough to trick the browser to re-load the file. Or is there a way to initialize the wasm file from js, that would probably be better since u don't have to re-load the wasm file then. Maybe as a sanity check could u add and remove the script without the routing and see if that works?

Gaming

Programming

Reloading Wasm or Reloading Page