WASM+js from S3 worked first time but no longer!

Community Help
1

Hi folks:

I’m hitting a wall on trying to solve this problem. I loaded a wasm file and its wrapper js file on S3 and right off the bat it worked and I was stunned! But after I closed the browser and went back, it no longer works. I purged cache, and tried again (several times) but I’m doing something wrong.

Please help. My code is as follows:

coolprop=import(‘https://coolprop-gani.s3.us-west-2.amazonaws.com/coolprop.js’)

density = Module.PropsSI(‘Dmass’, ‘T’, (temperature+273.15), ‘P’, pressure,‘Xenon’ )

where temperature and pressure are variables.

Subsequent calls to density comes back with error

density= RuntimeError: Module is not defined

This is making go crazy! Help! :slight_smile:

gani –

2

Its best to share a link to the problematic code so we can poke at it ourselves.

my initial guess is that dynamics imports work but often get executed in the wrong order unless you take additional steps to force a certain dataflow execution order.

3

Thanks, Tom!

Here is the link –

4

hi @gganapat please look at this example Waiting for Emscripten / Mike Bostock / Observable, but you can do

coolprop = require("https://coolprop-gani.s3.us-west-2.amazonaws.com/coolprop.js").catch(
  () => {
    const m = window.Module;
    if (m.onRuntimeInitialized) return m; // Already initialized.
    return new Promise(
      (resolve) => (m.onRuntimeInitialized = () => resolve(m))
    );
  }
)

then you can access the method

coolprop.PropsSI

2 Likes
5

Yes, it worked!! Thanks so much!

gani-

1 Like
6

hi @radames, your solution works great with Observablehq. I tried taking this solution to use with svelte but it didn’t work as-is. While this is strictly not a ObservableHQ question, how would one translate this to vanilla HTML/CSS/JS or more preferably under svelte.

thanks!

7

hi you could do this,

    <script type="module">
      function loadLib() {
        const script = document.createElement("script");
        script.src = "https://coolprop-gani.s3.us-west-2.amazonaws.com/coolprop.js";
        script.async = true;

        document.body.appendChild(script);

        return new Promise(resolve => {
          script.onload = async () => {
            const m = window.Module;
            if (m.onRuntimeInitialized) resolve(m); // Already initialized.
            m.onRuntimeInitialized = () => resolve(m);
          };
        });
      }
      const coolproLib = await loadLib();
      console.log(coolproLib.PropsSI)
    </script>
8

Hi @radames thanks for such a quick response! I will take a look at it and see if it works! :slight_smile:
gani-

1 Like
9

@radames sorry for the late response. I just wanted to say this worked beautifully in my Svelte app. In the process of exploring further, I found another way to achieve the same result (based on @mbostock’s link on Emscripten)

  1. in index.html file add <script src='./coolprop.js'></script>
  2. in App.svelte file, add:
function density(temp,press){
rho = Module.PropsSI('Dmass', 'T', (temp+273.15), 'P', press*6894.76,'Xenon' )
return rho
} 

//Ref: https://www.syntaxsuccess.com/viewarticle/using-webassembly-with-web-components
Module.onRuntimeInitialized = () => {
    rho = density(temper,pressure)
    console.log('rho inside Module.onRuntimeIntialized is ', rho)
};

This works very well also. The need to have another svelte component to load the loadLib module is removed.

thanks to the great people like you, @mbostock, @tomlarkworthy who make using ObservableHQ such a pleasurable experience!

gani-

1 Like