@dom-expressions/tagged-jsx 0.50.0-next.15

package/dist/index.mjs

@@ -0,0 +1,2 @@
+const e=e=>t(e)||e>=48&&e<=58||e===46||e===45,t=e=>e>=65&&e<=90||e>=97&&e<=122||e===95||e===36,n=e=>e>=9&&e<=13||e===32,r=(r,i)=>{let a=[],o=0,s=``,c=0;for(let l=0;l<r.length;l++){let u=r[l],d=u.length;for(c=0;c<d;)switch(o){case 0:{s=``;let e=u.indexOf(`<`,c);e===-1?(c<d&&a.push({type:6,value:u.slice(c)}),c=d):(e>c&&a.push({type:6,value:u.slice(c,e)}),u[e+1]===`!`&&u[e+2]===`-`&&u[e+3]===`-`?(o=3,c=e+4):(a.push({type:0}),o=1,c=e+1));break}case 1:{let r=u.charCodeAt(c);if(n(r))c++;else if(r===62)i.has(s)&&a[a.length-2]?.type!==2?o=2:(o=0,s=``),a.push({type:1}),c++;else if(r===61)a.push({type:4}),c++;else if(r===47){let e=u.charCodeAt(c+1),t=u.slice(c+2).search(/\S/),n=e===47&&a[a.length-1]?.type===0&&t!==-1&&u[c+2+t]===`>`;e===47&&!n?o=4:e===42?o=5:(a.push({type:2}),c++)}else if(r===34||r===39){let e=u[c],t=u.indexOf(e,c+1);if(t===-1)throw Error(`Unterminated string at ${l}:${c}`);a.push({type:5,value:u.slice(c+1,t),quote:e}),c=t+1}else if(t(r)){let t=c;for(;c<d&&e(u.charCodeAt(c));)c++;let n=u.slice(t,c);s===``&&(s=n),a.push({type:3,value:n})}else if(r===46&&u[c+1]===`.`&&u[c+2]===`.`)a.push({type:8}),c+=3;else throw Error(`Unexpected Character: ${u[c]} at ${l}:${c}`);break}case 2:{let e=RegExp(`<\\s*/\\s*${s}\\s*>`,`g`);e.lastIndex=c;let t=e.exec(u);if(t){let e=t.index;e>c&&a.push({type:6,value:u.slice(c,e)}),o=0,c=e,s=``}else a.push({type:6,value:u.slice(c)}),c=d;break}case 3:case 4:case 5:{let e=o===4?`
+`:o===5?`*/`:`-->`,t=u.indexOf(e,c);t===-1?c=d:(o=o===3?0:1,c=t+e.length);break}}l<r.length-1&&(o===0||o===1||o===2)&&a.push({type:7,value:l})}return a},i=e=>{let t=e.charCodeAt(0);return t>=65&&t<=90},a=(e,t)=>{let n={type:0,children:[]},r=[n],a=0,o=e.length;for(;a<o;){let n=e[a],s=r[r.length-1];switch(n.type){case 6:{let t=n.value;if(t.trim()===``){let t=e[a-1]?.type,n=e[a+1]?.type;if(t===1||n===0){a++;continue}}s.children.push({type:3,value:t}),a++;continue}case 7:s.children.push({type:4,value:n.value}),a++;continue;case 0:{let n=e[++a];if(n.type===2){let n=e[++a],i=e[++a],o=r[r.length-1];if(r.length>1&&i.type===1&&(n?.type===3&&o.name===n.value||(n?.type===7||n.type===2)&&typeof o.name==`number`)){let e=r.pop();e?.type===1&&t.has(e.name)&&(e.children=[]),a++;continue}throw Error(`Mismatched closing tag for <${o.name}>`)}if(n.type===3||n.type===7){let t=n.value,c={type:typeof t==`number`||i(t)?2:1,name:t,props:[],children:[]};for(s.children.push(c),a++;a<o;){let t=e[a];if(t.type===1||t.type===2)break;if(t.type===8){let t=e[a+1];if(t?.type===7)c.props.push({type:3,value:t.value}),a+=2;else throw Error(`Spread operator in <${c.name}> must be followed by an expression`)}else if(t.type===3){let n=t.value;if(e[a+1]?.type===4){a+=2;let t=e[a];if(t.type===7)c.props.push({name:n,type:2,value:t.value}),a++;else if(t.type===5){let e=t.quote;c.props.push({name:n,value:t.value,quote:e,type:1}),a++}else throw Error(`Attribute value for "${n}" in <${c.name}> must be an expression or a string`)}else c.props.push({type:0,name:n,value:!0}),a++}else throw Error(`Invalid attribute in <${c.name}>`)}let l=e[a];l.type===2?a+=2:l.type===1&&(a++,r.push(c));continue}}default:throw Error(`Unexpected token: ${JSON.stringify(n)}  after <${r[r.length-1].name}>`)}}if(r.length>1)throw Error(`Unclosed tag for <${r[r.length-1].name}>`);return n},o=e=>e.length===1?e[0]:e;function s(e){let t=new WeakMap,n=new Set(e.RawTextElements);n.delete(`template`);let i=document.createTreeWalker(document,129),s=t=>e.SVGElements.has(t)?document.createElementNS(`http://www.w3.org/2000/svg`,t):e.MathMLElements.has(t)?document.createElementNS(`http://www.w3.org/1998/Math/MathML`,t):document.createElement(t),c=e=>{let t=(t,...n)=>m(l(t),n,e);return t.components=e,t.jsx=t,t.define=t=>c({...e,...t}),t},l=i=>{let o=t.get(i);return o||(o=a(r(i,n),e.VoidElements),u(o,!1),t.set(i,o)),o},u=(e,t)=>{if(e.type===1){if(!t){let n=document.createElement(`template`);n.content.appendChild(f(e)),e.template=n,t=!0}e.children.forEach(e=>u(e,t))}else e.type===2||e.type===0?e.children.forEach(e=>u(e,!1)):e.type===3&&!t&&(d.innerHTML=e.value,e.value=d.content.textContent??``)},d=document.createElement(`template`),f=e=>{switch(e.type){case 3:return d.innerHTML=e.value,document.createTextNode(d.content.textContent??``);case 4:return document.createComment(`+`);case 2:return document.createComment(e.name);case 1:let t=!1,n=s(e.name);return e.props=e.props.filter(e=>e.type===1?e.name.startsWith(`prop:`)?!0:(n.setAttribute(e.name,e.value),t):e.type===0?(n.setAttribute(e.name,``),t):e.type===3?(t=!0,t):!0),(e.name===`template`?n.content:n).append(...e.children.map(f)),n}},p=(t,n,r)=>{switch(t.type){case 3:return t.value;case 4:return n[t.value];case 2:let i=typeof t.name==`string`?r[t.name]:n[t.name];if(i&&typeof i==`function`)return e.createComponent(i,h(t,n,r));throw Error(`Component "${t.name}" not found in registry`);case 1:let a=m(t,n,r),o=h(t,n,r);return e.spread(a,o,!0),a}},m=(t,n,r)=>{if(t.type!==1||!t.template)return o(t.children.map(e=>p(e,n,r)));let a=t.template.content.firstChild.cloneNode(!0);i.currentNode=a;let s=(t,i)=>{for(let a of t)if(a.type===1||a.type===4||a.type===2){let t=i.nextNode();if(a.type===4||a.type===2)e.insert(t.parentNode,p(a,n,r),t),i.currentNode=t;else{if(a.props.length){let i=h(a,n,r);e.spread(t,i,!0)}s(a.children,a.name===`template`?document.createTreeWalker(t.content,129):i)}}};return s(t.children,t.name===`template`?document.createTreeWalker(a.content,129):i),a},h=(t,n,r,i={})=>{for(let r of t.props)switch(r.type){case 0:i[r.name]=!0;break;case 1:i[r.name]=r.value;break;case 2:g(i,r.name,n[r.value]);break;case 3:let t=n[r.value];if(!t||typeof t!=`object`)throw Error(`Can only spread objects`);i=e.mergeProps(i,t);break}return t.type===2&&t.children.length&&Object.defineProperty(i,`children`,{get(){return m(t,n,r)}}),i},g=(e,t,n)=>{typeof n==`function`&&n.length===0&&t!==`ref`&&!t.startsWith(`on`)?Object.defineProperty(e,t,{get(){return n()},enumerable:!0}):e[t]=n};return c({})}export{s as createTaggedJSXRuntime};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@dom-expressions/tagged-jsx",
+  "description": "A Fine-Grained Rendering Runtime API using Tagged Template Literals",
+  "version": "0.50.0-next.15",
+  "author": "Daniel Kling",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ryansolid/dom-expressions.git",
+    "directory": "packages/tagged-jsx"
+  },
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.mts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "devDependencies": {
+    "jsdom": "^21.0.0",
+    "tsdown": "^0.20.3",
+    "vitest": "^4.0.18",
+    "@dom-expressions/runtime": "0.50.0-next.15"
+  },
+  "scripts": {
+    "build": "tsdown src/index.ts --format esm --minify",
+    "test": "vitest --run"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { createTaggedJSXRuntime } from "./tagged-jsx";
+export type { TaggedJSXInstance, Runtime, ComponentRegistry, FunctionComponent } from "./types";

package/src/parse.ts

@@ -0,0 +1,257 @@
+import {
+  STRING_TOKEN,
+  CLOSE_TAG_TOKEN,
+  EQUALS_TOKEN,
+  EXPRESSION_TOKEN,
+  IDENTIFIER_TOKEN,
+  OPEN_TAG_TOKEN,
+  SLASH_TOKEN,
+  SPREAD_TOKEN,
+  TEXT_TOKEN,
+  Token
+} from "./tokenize";
+
+const isComponentNode = (name: string): boolean => {
+  const char = name.charCodeAt(0);
+  return (
+    char >= 65 && char <= 90 // Uppercase A-Z
+  );
+};
+
+// Node type constants
+export const ROOT_NODE = 0;
+export const ELEMENT_NODE = 1;
+export const COMPONENT_NODE = 2;
+export const TEXT_NODE = 3;
+export const EXPRESSION_NODE = 4;
+
+// Prop type constants
+export const BOOLEAN_PROP = 0;
+export const STATIC_PROP = 1;
+export const EXPRESSION_PROP = 2;
+export const SPREAD_PROP = 3;
+
+export type NodeType =
+  | typeof ROOT_NODE
+  | typeof ELEMENT_NODE
+  | typeof COMPONENT_NODE
+  | typeof TEXT_NODE
+  | typeof EXPRESSION_NODE;
+export type PropType =
+  | typeof BOOLEAN_PROP
+  | typeof STATIC_PROP
+  | typeof EXPRESSION_PROP
+  | typeof SPREAD_PROP;
+
+export type ChildNode = ElementNode | TextNode | ExpressionNode | ComponentNode;
+
+export interface RootNode {
+  type: typeof ROOT_NODE;
+  children: ChildNode[];
+}
+
+export interface ElementNode {
+  type: typeof ELEMENT_NODE;
+  name: string;
+  props: PropNode[];
+  children: ChildNode[];
+  template?: HTMLTemplateElement;
+}
+
+export interface ComponentNode {
+  type: typeof COMPONENT_NODE;
+  name: string | number;
+  props: PropNode[];
+  children: ChildNode[];
+}
+
+export interface TextNode {
+  type: typeof TEXT_NODE;
+  value: string;
+}
+
+export interface ExpressionNode {
+  type: typeof EXPRESSION_NODE;
+  value: number;
+}
+
+export interface BooleanProp {
+  name: string;
+  type: typeof BOOLEAN_PROP;
+  value: boolean;
+}
+
+export interface StringProp {
+  name: string;
+  type: typeof STATIC_PROP;
+  value: string;
+  quote?: "'" | '"';
+}
+
+export interface ExpressionProp {
+  name: string;
+  type: typeof EXPRESSION_PROP;
+  value: number;
+}
+
+export interface SpreadProp {
+  type: typeof SPREAD_PROP;
+  value: number;
+}
+
+export type PropNode = BooleanProp | StringProp | ExpressionProp | SpreadProp;
+
+export const parse = (tokens: Token[], voidElements: Set<string>): RootNode => {
+  const root: RootNode = { type: ROOT_NODE, children: [] };
+  const stack: (RootNode | ElementNode | ComponentNode)[] = [root];
+  let pos = 0;
+  const len = tokens.length;
+
+  while (pos < len) {
+    const token = tokens[pos];
+    const parent = stack[stack.length - 1];
+
+    switch (token.type) {
+      case TEXT_TOKEN: {
+        // --- TEXT ---
+        const value = token.value;
+        if (value.trim() === "") {
+          const prevType = tokens[pos - 1]?.type;
+          const nextType = tokens[pos + 1]?.type;
+          // Filter out empty text nodes between tags
+          if (prevType === CLOSE_TAG_TOKEN || nextType === OPEN_TAG_TOKEN) {
+            pos++;
+            continue;
+          }
+        }
+        parent.children.push({ type: TEXT_NODE, value });
+        pos++;
+        continue;
+      }
+
+      case EXPRESSION_TOKEN: {
+        // --- EXPRESSION ---
+        parent.children.push({ type: EXPRESSION_NODE, value: token.value });
+        pos++;
+        continue;
+      }
+
+      case OPEN_TAG_TOKEN: {
+        // --- TAG ---
+        const nextToken = tokens[++pos];
+
+        // Handle Closing Tag: </name>
+        if (nextToken.type === SLASH_TOKEN) {
+          const nameToken = tokens[++pos];
+          const closeToken = tokens[++pos];
+          const currentParent = stack[stack.length - 1] as ElementNode | ComponentNode;
+          if (
+            stack.length > 1 &&
+            closeToken.type === CLOSE_TAG_TOKEN &&
+            ((nameToken?.type === IDENTIFIER_TOKEN && currentParent.name === nameToken.value) ||
+              ((nameToken?.type === EXPRESSION_TOKEN || nameToken.type === SLASH_TOKEN) &&
+                typeof currentParent.name === "number"))
+          ) {
+            const node = stack.pop();
+            if (node?.type === ELEMENT_NODE && voidElements.has(node.name)) {
+              node.children = [];
+            }
+            pos++;
+            continue;
+          }
+          throw new Error(`Mismatched closing tag for <${currentParent.name}>`);
+        }
+
+        // Handle Opening Tag: <name ...>
+        if (nextToken.type === IDENTIFIER_TOKEN || nextToken.type === EXPRESSION_TOKEN) {
+          const tagName = nextToken.value;
+          const node: ElementNode | ComponentNode = {
+            type:
+              typeof tagName === "number" || isComponentNode(tagName)
+                ? COMPONENT_NODE
+                : ELEMENT_NODE,
+            name: tagName,
+            props: [],
+            children: []
+          } as ElementNode | ComponentNode;
+          parent.children.push(node);
+          pos++; // Consume tag name
+
+          // --- Attribute Parsing Loop ---
+          while (pos < len) {
+            const attrToken = tokens[pos];
+            if (attrToken.type === CLOSE_TAG_TOKEN || attrToken.type === SLASH_TOKEN) {
+              break; // End of attributes
+            }
+
+            if (attrToken.type === SPREAD_TOKEN) {
+              const expr = tokens[pos + 1];
+              if (expr?.type === EXPRESSION_TOKEN) {
+                node.props.push({ type: SPREAD_PROP, value: expr.value });
+                pos += 2; // Consume '...' and expression
+              } else {
+                throw new Error(
+                  `Spread operator in <${node.name}> must be followed by an expression`
+                );
+              }
+            } else if (attrToken.type === IDENTIFIER_TOKEN) {
+              const name = attrToken.value;
+              const next = tokens[pos + 1];
+
+              if (next?.type === EQUALS_TOKEN) {
+                pos += 2; // Consume name and '='
+                const valToken = tokens[pos];
+                if (valToken.type === EXPRESSION_TOKEN) {
+                  node.props.push({ name, type: EXPRESSION_PROP, value: valToken.value });
+                  pos++;
+                } else if (valToken.type === STRING_TOKEN) {
+                  const quote = valToken.quote;
+                  node.props.push({
+                    name,
+                    value: valToken.value,
+                    quote,
+                    type: STATIC_PROP
+                  } as StringProp);
+                  pos++;
+                } else {
+                  throw new Error(
+                    `Attribute value for "${name}" in <${node.name}> must be an expression or a string`
+                  );
+                }
+              } else {
+                // Boolean prop
+                node.props.push({ type: BOOLEAN_PROP, name, value: true });
+                pos++;
+              }
+            } else {
+              throw new Error(`Invalid attribute in <${node.name}>`);
+            }
+          }
+
+          // --- Tag Closing Logic ---
+          const endToken = tokens[pos];
+          if (endToken.type === SLASH_TOKEN) {
+            // Self-closing: <div/>
+            pos += 2; // Consume '/' and '>'
+          } else if (endToken.type === CLOSE_TAG_TOKEN) {
+            // Opening: <div>
+            pos++; // Consume '>'
+            stack.push(node);
+          }
+          continue;
+        }
+      }
+
+      default:
+        throw new Error(
+          `Unexpected token: ${JSON.stringify(token)}  after <${(stack[stack.length - 1] as ElementNode | ComponentNode).name}>`
+        );
+    }
+  }
+
+  if (stack.length > 1) {
+    throw new Error(`Unclosed tag for <${(stack[stack.length - 1] as ElementNode).name}>`);
+  }
+
+  return root;
+};

package/src/tagged-jsx.ts

@@ -0,0 +1,247 @@
+import {
+  BOOLEAN_PROP,
+  COMPONENT_NODE,
+  ChildNode,
+  ComponentNode,
+  ELEMENT_NODE,
+  EXPRESSION_NODE,
+  EXPRESSION_PROP,
+  ElementNode,
+  ROOT_NODE,
+  RootNode,
+  SPREAD_PROP,
+  STATIC_PROP,
+  TEXT_NODE,
+  parse
+} from "./parse";
+import { tokenize } from "./tokenize";
+import { ComponentRegistry, TaggedJSXInstance, Runtime } from "./types";
+import { type JSX } from "../../runtime/src/jsx";
+
+const flat = (arr: any[]) => {
+  return arr.length === 1 ? arr[0] : arr;
+};
+
+export function createTaggedJSXRuntime(r: Runtime) {
+  const cache = new WeakMap<TemplateStringsArray, RootNode>();
+  const rawTextElements = new Set(r.RawTextElements);
+  rawTextElements.delete("template");
+
+  // Walk over text, comment, and element nodes.
+  const walker = document.createTreeWalker(document, 129);
+
+  const createElement = (name: string) => {
+    return r.SVGElements.has(name)
+      ? document.createElementNS("http://www.w3.org/2000/svg", name)
+      : r.MathMLElements.has(name)
+        ? document.createElementNS("http://www.w3.org/1998/Math/MathML", name)
+        : document.createElement(name);
+  };
+
+  // Internal: build a tagged JSX tag bound to a component registry.
+  const createTaggedJSX = <T extends ComponentRegistry>(components: T): TaggedJSXInstance<T> => {
+    const tag = (strings: TemplateStringsArray, ...values: any[]) => {
+      const root = getCachedRoot(strings);
+
+      return renderChildren(root, values, components);
+    };
+    tag.components = components;
+    tag.jsx = tag;
+    tag.define = <TNew extends ComponentRegistry>(newComponents: TNew) => {
+      return createTaggedJSX({ ...components, ...newComponents });
+    };
+
+    return tag as TaggedJSXInstance<T>;
+  };
+
+  const getCachedRoot = (strings: TemplateStringsArray): RootNode => {
+    let root = cache.get(strings);
+    if (!root) {
+      root = parse(tokenize(strings, rawTextElements), r.VoidElements);
+      buildTemplate(root, false);
+      cache.set(strings, root);
+    }
+    return root;
+  };
+
+  // Build template elements with the same shape as the parsed tree so both can be walked in sync.
+  const buildTemplate = (node: RootNode | ChildNode, insideTemplate: boolean): void => {
+    if (node.type === ELEMENT_NODE) {
+      if (!insideTemplate) {
+        const template = document.createElement("template");
+        template.content.appendChild(buildNodes(node));
+        node.template = template;
+        insideTemplate = true;
+      }
+      node.children.forEach(child => buildTemplate(child, insideTemplate));
+    } else if (node.type === COMPONENT_NODE || node.type === ROOT_NODE) {
+      node.children.forEach(child => buildTemplate(child, false));
+    } else if (node.type === TEXT_NODE && !insideTemplate) {
+      textTemplate.innerHTML = node.value;
+      node.value = textTemplate.content.textContent ?? "";
+    }
+  };
+
+  const textTemplate = document.createElement("template");
+
+  const buildNodes = (node: ChildNode): Node => {
+    switch (node.type) {
+      case TEXT_NODE:
+        textTemplate.innerHTML = node.value;
+        return document.createTextNode(textTemplate.content.textContent ?? "");
+      case EXPRESSION_NODE:
+        return document.createComment("+");
+      case COMPONENT_NODE:
+        return document.createComment(node.name as string);
+      case ELEMENT_NODE:
+        let hasSpread = false;
+
+        const elem = createElement(node.name);
+        // Props located after spread need to be applied after spread for possible overrides.
+        node.props = node.props.filter(prop => {
+          if (prop.type === STATIC_PROP) {
+            if (prop.name.startsWith("prop:")) return true;
+            elem.setAttribute(prop.name, prop.value);
+            return hasSpread;
+          } else if (prop.type === BOOLEAN_PROP) {
+            elem.setAttribute(prop.name, "");
+            return hasSpread;
+          } else if (prop.type === SPREAD_PROP) {
+            hasSpread = true;
+            return hasSpread;
+          }
+          return true;
+        });
+        const childRoot = node.name === "template" ? (elem as HTMLTemplateElement).content : elem;
+        childRoot.append(...node.children.map(buildNodes));
+
+        return elem;
+    }
+  };
+
+  const renderNode = (node: ChildNode, values: any[], components: ComponentRegistry): any => {
+    switch (node.type) {
+      case TEXT_NODE:
+        return node.value;
+      case EXPRESSION_NODE:
+        return values[node.value];
+      case COMPONENT_NODE:
+        const component = typeof node.name === "string" ? components[node.name] : values[node.name];
+        if (component && typeof component === "function") {
+          return r.createComponent(component, gatherProps(node, values, components));
+        } else {
+          throw new Error(`Component "${node.name}" not found in registry`);
+        }
+      case ELEMENT_NODE:
+        const element = renderChildren(node, values, components) as Element;
+        const props = gatherProps(node, values, components);
+
+        r.spread(element, props, true);
+
+        return element;
+    }
+  };
+
+  const renderChildren = (
+    node: RootNode | ComponentNode | ElementNode,
+    values: any[],
+    components: ComponentRegistry
+  ): JSX.Element => {
+    if (node.type !== ELEMENT_NODE || !node.template) {
+      return flat(node.children.map(n => renderNode(n, values, components)));
+    }
+
+    const element = node.template.content.firstChild!.cloneNode(true) as Element;
+    walker.currentNode = element;
+
+    const walkNodes = (nodes: ChildNode[], walker: TreeWalker) => {
+      for (const node of nodes) {
+        if (
+          node.type === ELEMENT_NODE ||
+          node.type === EXPRESSION_NODE ||
+          node.type === COMPONENT_NODE
+        ) {
+          const domNode = walker.nextNode()!;
+          if (node.type === EXPRESSION_NODE || node.type === COMPONENT_NODE) {
+            r.insert(domNode.parentNode!, renderNode(node, values, components), domNode);
+            walker.currentNode = domNode;
+          } else {
+            if (node.props.length) {
+              const props = gatherProps(node, values, components);
+              r.spread(domNode as Element, props, true);
+            }
+            walkNodes(
+              node.children,
+              node.name === "template"
+                ? document.createTreeWalker((domNode as HTMLTemplateElement).content, 129)
+                : walker
+            );
+          }
+        }
+      }
+    };
+    walkNodes(
+      node.children,
+      node.name === "template"
+        ? document.createTreeWalker((element as HTMLTemplateElement).content, 129)
+        : walker
+    );
+    return element;
+  };
+
+  const gatherProps = (
+    node: ElementNode | ComponentNode,
+    values: any[],
+    components: ComponentRegistry,
+    props: Record<string, any> = {}
+  ) => {
+    for (const prop of node.props) {
+      switch (prop.type) {
+        case BOOLEAN_PROP:
+          props[prop.name] = true;
+          break;
+        case STATIC_PROP:
+          props[prop.name] = prop.value;
+          break;
+        case EXPRESSION_PROP:
+          applyGetter(props, prop.name, values[prop.value]);
+          break;
+        case SPREAD_PROP:
+          const spread = values[prop.value];
+          if (!spread || typeof spread !== "object") throw new Error("Can only spread objects");
+          props = r.mergeProps(props, spread);
+          break;
+      }
+    }
+
+    // children - childNodes overwrites any props.children
+    if (node.type === COMPONENT_NODE && node.children.length) {
+      Object.defineProperty(props, "children", {
+        get() {
+          return renderChildren(node, values, components);
+        }
+      });
+    }
+    return props;
+  };
+
+  const applyGetter = (props: Record<string, any>, name: string, value: any) => {
+    if (
+      typeof value === "function" &&
+      value.length === 0 &&
+      name !== "ref" &&
+      !name.startsWith("on")
+    ) {
+      Object.defineProperty(props, name, {
+        get() {
+          return value();
+        },
+        enumerable: true
+      });
+    } else {
+      props[name] = value;
+    }
+  };
+
+  return createTaggedJSX({});
+}