Here’s a WIP I’m happy to share with you.
To get the best of both worlds!
Anvil has native libraries to execute NodeJS libraries AND internal JS code.
Svelte compiles once, so you can embed svelte build within Anvil.
It works without the need of a virtual DOM like in React or Vue.
We’d like to setup the basic svelte example, add it to Anvil and add the ability to pass a parameter from Anvil client code, in a free personal plan, or beyond for the lucky guys:
- On your local computer:
git clone --depth 1 https://github.com/sveltejs/svelte.git npm i npm run build
- Optional (but useful later): In your IDE, you may beautify the public/build/bundle.js code because a one liner is harder to tweak.
- copy bundle.js content
- In Anvil Native Libraries add
- paste your bundle.js content within the script tags
- apply these changes:
- At first line:
var app = function ()==>
- At the almost final line:
- At the final line:
- At first line:
- In your Form1:
from anvil.js.window import app ... self.init_components(**properties) app('Anvil')
- You built a svelte app, that became pure JS code, executable in any browser.
- The build you get contains almost all of Svelte functions compiled (it didn’t shake the tree very hard). It means that when you add more code in svelte, the bundle won’t grow crazy (but it will if you add external Svelte and NodeJS libraries).
- Once in Native libraries, you changed the app object (as a function, ES6) into a traditional function, callable by Anvil.
- You also added a parameter
props_namethat you can now populate from your python code in Anvil.
- Have fun with Anvil + Svelte
- Share your discoveries!