browser-runtime-vue 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-runtime-vue",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "description": "Vue 3 SFC compiler and reactive renderer adapter for browser-module-runtime.",
   "exports": {
@@ -15,7 +15,7 @@
     "README.md"
   ],
   "peerDependencies": {
-    "browser-module-runtime": "0.0.8",
+    "browser-module-runtime": "0.0.10",
     "vue": "^3.5.0"
   },
   "peerDependenciesMeta": {

package/src/index.js

@@ -1,3 +1,12 @@
+
+/** Clone authored DOM into Vue VNodes (a native component default slot). */
+function vueChild(node,h){
+  if(node.nodeType===3)return node.nodeValue;
+  if(node.nodeType!==1)return null;
+  const attrs={};for(const attr of node.attributes)attrs[attr.name]=attr.value;
+  const kids=[...node.childNodes].map(n=>vueChild(n,h)).filter(x=>x!==null);
+  return h(node.localName,attrs,kids);
+}
 function snapshotProps(next){
   if(next===null||typeof next!=="object"||Array.isArray(next)||
     (Object.getPrototypeOf(next)!==Object.prototype&&Object.getPrototypeOf(next)!==null))
@@ -29,14 +38,17 @@ export function vue({compiler,renderer,version='3.5.18',provider='esm.sh',script
     }],
     renderers:[{
       name:'vue',types:['vue'],
-      async mount({component,target,props}){
+      async mount({component,target,props,children}){
         vueRuntime ||= await (ownerRuntime ? ownerRuntime.import('vue') : import('vue'));
         if(typeof vueRuntime.createApp!=='function'||typeof vueRuntime.h!=='function'||typeof vueRuntime.reactive!=='function')
           throw new TypeError('Vue renderer requires createApp(), h(), and reactive().');
         // Parent wrapper keeps the component mounted when props change.
         // Spreading state inside render tracks every property and allows additions/removals.
         const state=vueRuntime.reactive(snapshotProps(props));
-        const wrapper={name:'BrowserRuntimeVueHost',render(){return vueRuntime.h(component,{...state});}};
+        const slots=children?.count ? {
+          default:()=>children.nodes().map(n=>vueChild(n,vueRuntime.h)).filter(x=>x!==null)
+        } : undefined;
+        const wrapper={name:'BrowserRuntimeVueHost',render(){return vueRuntime.h(component,{...state},slots);}};
         const app=vueRuntime.createApp(wrapper);
         app.mount(target);
         let disposed=false;