browser-runtime-svelte

Svelte 5 compiler and renderer plugin for browser-module-runtime.

Install

npm install [email protected] [email protected] svelte@5

Usage

import {createRuntime} from 'browser-module-runtime';
import {svelte} from 'browser-runtime-svelte';

const runtime = createRuntime({plugins:[svelte({version:'5.39.0'})]});
runtime.define('/Counter.svelte', `<script>let count = $state(0);</script>
  <button onclick={() => count++}>Count: {count}</button>`, {type:'svelte'});
const handle = await runtime.mount({module:'/Counter.svelte',target:'#app'});
// Later: await handle.dispose(); await runtime.dispose();

The adapter uses svelte/compiler and svelte runtime mounting. Generated stylesheet assets are registered and cleaned up with the mount. An exact version contributes a matching svelte package root to the runtime linker so compiled svelte/internal/* imports resolve consistently. Real browser CDN operation depends on the selected provider serving that version.

For HTML declarations of complete .svelte files, prefer type="svelte" with data-src, since nested <script> text cannot safely be embedded in an outer HTML script element.

Children projection in native custom elements (0.0.13-dev.2 source)

The adapter translates authored default children into Svelte 5's children snippet. Since createRawSnippet expects one root element, the snippet owns a span[data-runtime-children] using display:contents; its setup appends clones of all supplied elements/text nodes. This preserves sibling children rather than silently keeping only the first. Components render them through {@render children()}; missing children mean the snippet is undefined. The wrapper affects DOM structure/direct-child selectors, though not the CSS layout box.