search

pyodide / pyodide

Pyodide is a Python distribution for the browser and Node.js based on WebAssembly
https://pyodide.org/en/stable/
Mozilla Public License 2.0
12.35k stars 850 forks source link

Use of vite-plugin-static-copy NPM package with exclude patterns for Vite bundling example #5120

Open castedo opened 1 month ago

castedo commented 1 month ago

https://pyodide.org/en/latest/usage/working-with-bundlers.html currently shows a Vite plugin that uses a hard-coded list of files that should be copied. Alternatively, the vite-plugin-static-copy can be used with a hard-coded list of patterns to exclude. Depending on how often the file list in the Pyodide distribute change, vs the stability of vite-plugin-static-copy this might or might not be a better approach.

An example of this alternative approach is here: https://gitlab.com/castedo/pyodide-worker-example/-/blob/d317ef431c0e742339810b619c3626b726b275ec/vite-plugin-pyodide.js to be used like this: https://gitlab.com/castedo/pyodide-worker-example/-/blob/d317ef431c0e742339810b619c3626b726b275ec/vite.config.js

I'm happy to do a PR to the docs to show this use of vite-plugin-static-copy if you think it's a better approach. So far it's working well for me.

thangtuts commented 1 month ago

how to load .whl files on your project?

castedo commented 1 month ago

To load wheel files from a module worker, there are two approaches I can think of. One is to use the Pyodide CDN, the other is include the wheel in your own website.

CDN approach

After calling loadPyodide without any parameters, you can then call loadPackage with absolute URLs to wheels anywhere, including the CDN that Pyodide suggests. For example, if you wanted to load the wheel for tomli you could use the URL "https://cdn.jsdelivr.net/pyodide/v0.26.2/full/tomli_w-1.0.0-py3-none-any.whl" as a name passed to loadPackage.

Include in website

For testing and development and possibily production, you can not use the CDN and instead include the wheels in the distribution for your own site. Here's an example where I have my own node package that stores some wheels in a directory named pydist:

https://gitlab.com/perm.pub/epijats-js/-/tree/main/pydist

Then in my Vue/Vite website application I have that node package as a dependency (I npm install it directly). I have viteStaticCopy copy all the wheels from the directory of that node package to my website distribution:

https://gitlab.com/perm.pub/snaptestsite/-/blob/a06685a4020a5ed86d6a6621a2e3f0f50bc9d1ca/vite.config.ts#L35

and then here is the code that runs in a web worker which grabs the wheels:

https://gitlab.com/perm.pub/snaptestsite/-/blob/a06685a4020a5ed86d6a6621a2e3f0f50bc9d1ca/src/webworker.ts#L4

This works in both vite build/preview and vite developement server.

castedo commented 1 month ago

Also, in the CDN approach, you can pass a list of absolute URLs to wheels in the CDN in the options.packages parameter of loadPyodide. I suspect it's doing essentially the same thing as loadPackage.

ryanking13 commented 1 month ago

I'm happy to do a PR to the docs to show this use of vite-plugin-static-copy if you think it's a better approach. So far it's working well for me.

Sure, PR welcome.