browser-runtime-octane 0.0.8 → 0.0.10

package/README.md

@@ -5,7 +5,7 @@ Octane compiler and renderer plugin for [`browser-module-runtime`](https://www.n
 ## Install
 
 ```sh
-npm install browser-module-runtime@0.0.1 browser-runtime-octane@0.0.1 octane@0.2.3
+npm install browser-module-runtime@0.0.10 browser-runtime-octane@0.0.10 octane@0.2.3
 ```
 
 ## Usage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-runtime-octane",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "exports": {
     ".": {
@@ -22,7 +22,7 @@
     "node": ">=20"
   },
   "peerDependencies": {
-    "browser-module-runtime": "0.0.8",
+    "browser-module-runtime": "0.0.10",
     "octane": "*"
   },
   "description": "Octane JSX, TSX, and TSRX compiler and renderer adapter for browser-module-runtime.",

package/src/index.js

@@ -1,3 +1,14 @@
+
+/** Translate captured HTML into Octane element descriptors; never inject raw DOM
+ * nodes into the Octane renderer (they are not Octane child values). */
+function octaneChild(node,createElement){
+  if(node.nodeType===3)return node.nodeValue;
+  if(node.nodeType!==1)return null;
+  const props={};
+  for(const attr of node.attributes)props[attr.name]=attr.value;
+  const childNodes=[...node.childNodes].map(n=>octaneChild(n,createElement)).filter(x=>x!==null);
+  return createElement(node.localName,props,...childNodes);
+}
 function snapshotProps(next){
   if(next===null||typeof next!=="object"||Array.isArray(next)||
     (Object.getPrototypeOf(next)!==Object.prototype&&Object.getPrototypeOf(next)!==null))
@@ -29,15 +40,24 @@ export function octane({compiler,renderer,version='unverified',provider='esm.sh'
     }],
     renderers:[{
       name:'octane',types:['octane'],
-      async mount({component,target,props}) {
+      async mount({component,target,props,children}) {
         octaneRenderer ||= await (ownerRuntime ? ownerRuntime.import('octane') : import('octane'));
+        const createElement=octaneRenderer.createElement;
+        if(children?.count&&typeof createElement!=='function')
+          throw new TypeError('Octane children projection requires createElement() from octane');
+        const content=children?.nodes().map(n=>octaneChild(n,createElement)).filter(x=>x!==null);
+        const withChildren=next=>{
+          const result=snapshotProps(next);
+          if(content?.length&&!Object.hasOwn(result,'children'))result.children=content.length===1?content[0]:content;
+          return result;
+        };
         const root=octaneRenderer.createRoot(target);
-        root.render(component,snapshotProps(props));
+        root.render(component,withChildren(props));
         let closed=false;
         return {
           updateProps(next){
             if(closed)throw new Error('Octane mount has been disposed');
-            return root.render(component,snapshotProps(next));
+            return root.render(component,withChildren(next));
           },
           dispose(){if(!closed){closed=true;return root.unmount();}}
         };