browser-runtime-svelte 0.0.9 → 0.0.10

package/README.md

@@ -5,7 +5,7 @@ Svelte 5 compiler and renderer plugin for [`browser-module-runtime`](https://www
 ## Install
 
 ```sh
-npm install browser-module-runtime@0.0.9 browser-runtime-svelte@0.0.9 svelte@5
+npm install browser-module-runtime@0.0.10 browser-runtime-svelte@0.0.10 svelte@5
 ```
 
 ## Usage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-runtime-svelte",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
   "exports": {
     ".": {
@@ -22,7 +22,7 @@
     "node": ">=20"
   },
   "peerDependencies": {
-    "browser-module-runtime": "0.0.9",
+    "browser-module-runtime": "0.0.10",
     "svelte": "^5.0.0"
   },
   "description": "Svelte compiler and renderer adapter for browser-module-runtime.",

package/src/index.js

@@ -32,12 +32,23 @@ export function svelte({compiler,renderer,reactivity,version='5',provider='esm.s
     }],
     renderers:[{
       name:'svelte',types:['svelte','svelte-module'],
-      async mount({component,target,props}){
+      async mount({component,target,props,children}){
         runtime ||= await (ownerRuntime ? ownerRuntime.import('svelte') : import('svelte'));
         reactiveNamespace ||= await (ownerRuntime ? ownerRuntime.import('svelte/reactivity') : import('svelte/reactivity'));
         const MapType=reactiveNamespace.SvelteMap;
         if(typeof MapType!=='function')throw new TypeError('Svelte 5 renderer requires SvelteMap from svelte/reactivity');
-        const data=new MapType(Object.entries(snapshotProps(props)));
+        // Svelte 5 children must be a snippet, not DOM nodes or a plain string.
+        if(children?.count&&typeof runtime.createRawSnippet!=='function')
+          throw new TypeError('Svelte children projection requires createRawSnippet() from svelte');
+        const snippet=children?.count ? runtime.createRawSnippet(()=>({
+          render:()=>children.html()
+        })) : undefined;
+        const withChildren=next=>{
+          const result=snapshotProps(next);
+          if(snippet&&!Object.hasOwn(result,'children'))result.children=snippet;
+          return result;
+        };
+        const data=new MapType(Object.entries(withChildren(props)));
         const state=new Proxy(Object.create(null),{
           get(_target,key){return data.get(key);},
           has(_target,key){return data.has(key);},
@@ -52,7 +63,7 @@ export function svelte({compiler,renderer,reactivity,version='5',provider='esm.s
         return {
           async updateProps(next){
             if(closed)throw new Error('Svelte mount has been disposed');
-            const incoming=snapshotProps(next);
+            const incoming=withChildren(next);
             for(const key of [...data.keys()])if(!Object.hasOwn(incoming,key))data.delete(key);
             for(const [key,value] of Object.entries(incoming))data.set(key,value);
             await runtime.tick?.();