browser-runtime-svelte 0.0.9 → 0.0.11

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.11 browser-runtime-svelte@0.0.11 svelte@5
 ```
 
 ## Usage
@@ -24,3 +24,7 @@ const handle = await runtime.mount({module:'/Counter.svelte',target:'#app'});
 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.11-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.

package/package.json

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

package/src/index.js

@@ -32,12 +32,30 @@ 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');
+        // createRawSnippet expects exactly one root element. Returning authored
+        // sibling markup directly silently discards all but its first root in
+        // Svelte's client renderer. Keep the original DOM structure inside a
+        // display:contents host and append fresh DOM clones during setup.
+        // This also handles text-only children without producing an invalid
+        // raw-snippet root. The wrapper is owned/removed by the snippet.
+        const snippet=children?.count ? runtime.createRawSnippet(()=>({
+          render:()=>'<span data-runtime-children="" style="display:contents"></span>',
+          setup:element=>element.append(...children.nodes())
+        })) : 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 +70,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?.();