Python can execute Svelte!

Show and Tell
#1

Hello,
Here’s a WIP I’m happy to share with you.
It’s a quick tutorial to execute Svelte Javascript within Anvil (client side).

Why?

To get the best of both worlds!
Anvil has native libraries to execute NodeJS libraries AND internal JS code.

Why Svelte?

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.

Result we want

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:

image
image818×374 40.9 KB

How?

  • 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
<script>

</script>
  • paste your bundle.js content within the script tags
  • apply these changes:
    • At first line: var app = function () ==> function app(props_name)
    • At the almost final line: name: 'World' ==> name: props_name
    • At the final line: }(); ==> };
  • In your Form1:
from anvil.js.window import app
...
    self.init_components(**properties)
    app('Anvil')

What happened?

  • 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_name that you can now populate from your python code in Anvil.

Next steps

  1. Have fun with Anvil + Svelte
  2. Share your discoveries!
9 Likes