@eona-x/ui-toolkit-svelte

Svelte 5 components for the EONA-X design system. This package is generated. The source of truth is the Yew crate in this repository (src/): each component was produced by rendering the Rust component with Yew's own server renderer and splicing the props back into the resulting markup — the same tree @eona-x/ui-toolkit-react is written from.

Generated from src_hash 6b5e166285546e8f773e7e24b49871d2b541213a89ce5a23b7ce030199f90c36. 41 components exported.

Two entry points

| Import | What it is | WebAssembly | | --- | --- | --- | | @eona-x/ui-toolkit-svelte | the generated components, as .svelte | none | | @eona-x/ui-toolkit-svelte/wasm | <YewMount> and use:yew, to mount a Yew component compiled to WASM | yours, loaded on demand |

Use the first for everything it exports: it server-renders, it tree-shakes, and its markup is Yew's. Reach for the second only for a component the generator cannot reach — an interactive one, which lives outside this crate — and accept its cost: one component over a WASM bridge was measured at 74,593 B gzip against 112 B pre-rendered, it renders nothing on the server, and a CSP must allow wasm-unsafe-eval.

npm install @eona-x/ui-toolkit-svelte

<script lang="ts">
  import '@eona-x/ui-toolkit-css';
  import { Button, Pill } from '@eona-x/ui-toolkit-svelte';
</script>

<div class="eona-ui">
  <Button label="Explore" />
  <Pill>Mobility</Pill>
</div>

@eona-x/ui-toolkit-css comes with this package, at the same version. Every rule in it is scoped under .eona-ui, so render the components inside an element with that class; it then touches nothing else on the page.

A Rust Children/Html prop is a Svelte 5 Snippet: pass children as element content and any other slot (ShapeCard's demo) as a {#snippet}.

Mounting a Yew component

The crate you mount from exports one function, mount(target, component, props), built with wasm-bindgen and Yew's csr feature; examples/svelte-wasm in the toolkit repository is a working one.

<script lang="ts">
  import { YewMount } from '@eona-x/ui-toolkit-svelte/wasm';
  const load = () => import('my-yew-widgets').then(async (m) => (await m.default(), m));
</script>

<YewMount module={load} component="Counter" props={{ start: 3 }} />

Documentation

• Getting started — install, a first component, a static site, theming
• Components — every component, rendered live, with its call

Do not edit

Every file here is overwritten by cargo xtask bridgegen and checked by cargo xtask check. A bug in a component is a bug in the Rust component named in its header.