Svelte and Jeasx

Svelte is a UI framework that employs a compiler, enabling you to create impressively compact components that perform minimal processing in the browser, all while using familiar languages like HTML, CSS, and JavaScript.

How to integrate Svelte with Jeasx?

To integrate Svelte into Jeasx, you must install two additional packages:

npm install svelte esbuild-svelte

Now you have to register Svelte as esbuild plugin by adding the following configurations to .env.js:

import sveltePlugin from "esbuild-svelte";

export default {
  ESBUILD_SERVER_OPTIONS: () => ({
    plugins: [
      sveltePlugin({ compilerOptions: { generate: "server", css: "injected" } })
    ]
  }),

  ESBUILD_BROWSER_OPTIONS: () => ({
    plugins: [sveltePlugin({ compilerOptions: { generate: "client", css: "injected" } })]
  })
}

View the source code of this page for an implementation of a Svelte integration with hydration support. Feel free to improve it as you like.

Svelte and Jeasx

Counter example

Crud example

Todos example

todo

done