Emscripten wasm doesn't work as in ObservableHQ site

[gganapat]

I am not able to get wasm Module available for use as could be done on the web version.

const url = "https://coolprop-gani.s3.us-west-2.amazonaws.com/coolprop.js"

const Module = fetch(url).catch(() => {
  const m = window.Module;
  if (m.onRuntimeInitialized) return m; // Already initialized.
  return new Promise(resolve => m.onRuntimeInitialized = () => resolve(m));
})

display(Module)

Not sure how to proceed. Help wanted.

Thanks,
Gani --

[mbostock]

Did you mean to call import instead of fetch?

[gganapat]

Tried that but it didn't work.

const Module = import(url).catch(() => {
  const m = window.Module;
  if (m.onRuntimeInitialized) return m; // Already initialized.
  return new Promise(resolve => m.onRuntimeInitialized = () => resolve(m));
})

display(Module)

display(Module.PropsSI('D','P',1000000.,'T',273.15-20,'Xenon'))

[mbostock]

You probably need to follow the documentation for the library you’re trying to load, which I’m guessing is this:

http://www.coolprop.org/coolprop/wrappers/Javascript/index.html

I’m converting this to a discussion since this isn’t a bug in Framework.

[gganapat]

Thanks! But it works fine in ObservableHQ - see link.

I'm hoping there is a workaround.

Thanks,
Gani --

[mbostock]

Observable Framework is just vanilla JavaScript and HTML, so you can just add a script tag as shown in the documentation:

<script src="https://coolprop-gani.s3.us-west-2.amazonaws.com/coolprop.js"></script>

If you then want to wait for the module to load, it looks like you can do something like this:

```js
if (!Module.onRuntimeInitialized) await new Promise((resolve) => (Module.onRuntimeInitialized = resolve));
const coolprop = Module;
```

Here’s a minimal example of using it:

```js
const fluid = "Xenon";
const temp = 25;
const psia_to_Pas = 6894.75729;
```

```js
Plot.plot({
  title: `Density of ${fluid} at ${temp}°C`,
  x: {label: "Pressure (psia)"},
  y: {label: "Density (kg/m³)"},
  marks: [
    Plot.ruleY([0]),
    Plot.lineY(d3.ticks(0, 1200, 100), {
      x: (p) => p,
      y: (p) => coolprop.PropsSI("Dmass", "T", temp + 273.15, "P", p * psia_to_Pas, fluid),
      tip: true
    })
  ]
})
```

The chart looks like this:

But probably you want to download coolprop.js and its WebAssembly bundle (.wasm) so that it’s self-hosted within your Framework project rather than loading it from AWS. And ideally someone would rebuild so that it’s a modern ES module that you can import rather than needing a vanilla script tag and the Module.onRuntimeInitialized business.

[gganapat]

ok, fantastic! That worked beautifully. I wonder why the code from ObservableHQ webapp was not directly transferable to Framework.

Thanks!
Gani -

[gganapat]

I followed up on your suggestion to download coolprop.js and coolprop.wasm, and tried several things to make it work. I tried your solution in here and here and other versions but none of them worked. I spent a morning trying to get it work but no success. If it's something that I missed and you won't have to spend much time trouble-shooting it, I would appreciate your help.

Thanks,
Gani --

[gganapat]

For example when I did this,

const t = (await import(await FileAttachment("coolprop.js").url())).SCRIPTS

if (!Module.onRuntimeInitialized) await new Promise((resolve) => (Module.onRuntimeInitialized = resolve));
const coolprop = Module;
display(coolprop)

I get this ...

Any insight would help!

Thanks, Gani -

[mbostock]

It won’t work in Framework the way CoolProp is currently built. You’ll have to host it elsewhere, or you’ll need to edit the CoolProp source.

The problem is that coolprop.js hard-codes the relative path to coolprop.wasm and doesn’t let you override it. That won’t work in Framework because we use content-hashed file names for all assets. (If we add support for a public folder #169 maybe we could allow this… but even then it’s not clear to me how you’d load a script from the public folder, as normally scripts are treated as assets and given content-hashed file names in _file.)

Modern libraries use import.meta.resolve instead of hard-coding a path, and Framework supports rewrites these as needed. Some WebAssembly libraries also let you pass in the path to the .wasm file, but CoolProp doesn’t appear to let you do that, so I don’t see a way of fixing it (short of editing the code manually to add such a feature).

Also, it seems like my code above has a race condition where sometimes it doesn’t receive the onRuntimeInitialized callback; like I said above, there are better ways to build this WebAssembly library using modern JavaScript and ES modules that would make this work out of the box. But I got it working like so:

<script>

var coolprop = new Promise((resolve) => {
  Module = {
    onRuntimeInitialized() {
      resolve(Module);
    }
  };
});

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

This mess is because CoolProp is packaged as a global script rather than a modern ES module; in general it’s not good to use <script src> because it is synchronous, and likewise it’s messy to use globals such as Module.

Also, there’s a bug where you can’t use <script src> in Framework for a local script. I opened #1035 to fix that. But even if we fix that, you’ll have the coolprop.wasm issue described above.

[gganapat]

Thanks so much! So, you were able to run the code as above? I was not able to - I got this...

[mbostock]

I was in the PR, but like I said, it still won’t work on build because of the aforementioned limitations.

[gganapat]

Ok, thanks for all your help! You have been amazing.

gani-