search

ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.6k stars 791 forks source link

feat: add support for loading WASM module #2543

Open ski opened 4 years ago

ski commented 4 years ago

Stencil version:

 @stencil/core@1.15.0

I'm submitting a:

[x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

In the demo below, I have the default stencip pwa app with one modification. In the tsxcomponentDidLoad() method of app-root.tsx, I connect to the Polkadot blockchain. On doing so, I get the following errors in the browser console:

TypeError: Cannot add property async, object is not extensible
ERROR: Unable to initialize @polkadot/wasm-crypto 1.2.1
TypeError: WebAssembly.instantiate(): Import #0 module="./wasm" error: module is not an object or function

I had to install rollup-plugin-node-polyfills to get things to get to the point where I can see the above errors.

Expected behavior:

I should see the output of app-root.tsx The code should connect to the blockchain and print out metadata about the blockchain to the console.

Steps to reproduce:

  1. git clone https://github.com/ski/eightyone.git
  2. cd eightyone
  3. npm install
  4. npm run start

open the developer tool in Chrome (ctrl+shift+i) and you will see the errors

Related code: The code can be found in https://github.com/ski/eightyone/blob/master/src/helpers/polka.ts

     // wasm loaded here and is where the error happens. without
    // WebAssembly, the code after will not work correctly.
    await cryptoWaitReady();

Other information:

Polkadot JS which is the client library for Polkadot/Substrate blockchains are primarily targeted at React https://polkadot.js.org/. I only need a subset of this client application https://polkadot.js.org/apps/#/explorer which I intend to build on top of Stencil. I do have a work around where if I use browserify and bundle all the polkadot libraries I need and load it into in the index.html head, I can get things to work but that route is just asking for trouble down the line. If this is something that I can fix myself, I'd be more than happy to do it. I just need some pointers to where I should start digging.

rwaskiewicz commented 1 year ago

Hey there,

I apologize that it took so long for someone on the team to respond to this issue. At the moment, Stencil doesn't have proper WASM support. I've updated this issue for folks to upvote if it's something they're interested in seeing in Stencil. Once again, I apologize for the lack of response from the team here.