v0.0.15: Function components

packages/csx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerxes/csx",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "author": "Miel Truyen <miel.truyen@cerxes.net>",
   "description": "CSX is a minimalistic UI-framework inspired by React+JSX for usage with WebComponents.",
   "repository": {

packages/csx/src/vdom/node-meta.js

@@ -48,11 +48,16 @@ export function getNodeMeta(vnode) {
             renderer: ShadowNodeRenderer,
             normedType: ShadowDOM
         };
-    } else {
+    } else if( typeof(type) === 'string' || type?.tagName){
         return {
             ...NodeTreeRenderer.meta(),
             renderer: NodeTreeRenderer,
             normedType: window.customElements?.get(type) ?? type
         };
+    }else if( typeof(type) === 'function'){
+        // Function component! (TODO we need to refine this case)
+        return 'function';
+    }else{
+        throw new Error("No renderer for type:", type);
     }
 }

packages/csx/src/vdom/render.js

@@ -269,7 +269,14 @@ function flattenVNodeChildren(vnode){
         if (next instanceof Array) queue.splice(0, 0, ...next);
         else {
             let meta = getNodeMeta(next);
-            if (meta) {
+            if(meta === 'function'){
+                let resolved = next.type(next.props, next.children);
+                if(resolved instanceof Array){
+                    queue.splice(0,0, ...resolved)
+                }else{
+                    queue.splice(0,0,resolved);
+                }
+            } else if (meta) {
                 children.push({ vnode: next, meta });
             }else{
                 // null or undefined child, ignored

packages/csx/src/vdom/renderers/hostnode.js

@@ -16,7 +16,7 @@ export const HostNodeRenderer = {
     meta(){
         return {
             hasChildren: true,
-            isNode: true, // Host node should always
+            isNode: false, // Host node itself has no place in the hierarchy, and is of a spcial type
         };
     },