Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide .js build with --target web that works in simple .html file. #63

Open
MarcSkovMadsen opened this issue Jan 29, 2022 · 5 comments

Comments

@MarcSkovMadsen
Copy link

MarcSkovMadsen commented Jan 29, 2022

I believe a lot of the struggles I'm having in #62 could be avoided if I could have accessed a js file targetted for the web.

See https://stackoverflow.com/questions/64308461/failed-to-load-wasm-application

(I'm not sure because the world of rust, wasm etc. is not familiar to me. So I'm walking around like a blind here. I don't yet understand the terminologi).

@MarcSkovMadsen
Copy link
Author

MarcSkovMadsen commented Jan 29, 2022

I have now tried to build for the web on binder. But unfortunately it is not bundled (I believe) so it raises all kinds of import errors in the browser console for 'vega', 'vega-util', 'vega-tooltip' and 'loadash'.

My steps where

Binder

curl https://sh.rustup.rs -sSf | sh
source $HOME/.cargo/en
rustup update
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
git clone https://github.com/vegafusion/vegafusion.git
cd vegafusion
cd vegafusion-wasm
wasm-pack build --target web --dev # add --release if ready for it

@MarcSkovMadsen
Copy link
Author

MarcSkovMadsen commented Jan 29, 2022

I would like to get to a place something like this would work (or I can bokeh build)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simple template</title>
  </head>
  <script type="module">
      import { render_vegafusion } from "./some_file.js"
      console.log("hello world")
  </script>
  <body>
    
  </body>
</html>

Feel free to replace "./some_file.js" with a url. But I need something self contained and well described.

For now I have to give up on #62. I need help from someone who is more capable than I am in this environment.

@MarcSkovMadsen MarcSkovMadsen changed the title Provide .js build with --target web Provide .js build with --target web that works in simple .html file. Jan 29, 2022
@MarcSkovMadsen
Copy link
Author

MarcSkovMadsen commented Jan 29, 2022

I got to a place where I could manually replace import from 'xzy' with urls in the files in the pkg in scripts.zip

image

and serve the index.html file on a simple web server. It almost worked but failed on require.

image

scripts.zip

@MarcSkovMadsen
Copy link
Author

MarcSkovMadsen commented Jan 29, 2022

Ok. A starting point is this code sandbox. Here I seem to be able to import and use vegafusion-wasm.

https://codesandbox.io/s/panelvegafusion-2dqdt

image

@jonmmease
Copy link
Collaborator

Hi Marc,
I didn't quite follow whether you successfully rebuilt the vegafusion-wasm package with the --target web flag. That does look like a good approach.

In case it helps, here is the resulting directory I get when building with

wasm-pack build --release --target web -d pkg-web/ && cp package.json pkg-web/

from the vegafusion-wasm/ directory.

pkg-web.zip

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants