@opentf/web 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @opentf/web
+
+## 0.1.0
+
+### Minor Changes
+
+- Global rebranding to Web App Framework and monorepo restructuring.
+  - Renamed all packages from `@opentf/mwaf-*` to `@opentf/web-*`.
+  - Updated Custom Element prefix from `mwaf-` to `web-`.
+  - Restructured the repository into a scoped monorepo.
+  - Updated scaffolding tool `@opentf/create-web` with new templates.
+  - Aligned all package versions to 0.1.0-alpha.1.

package/compiler/babel-plugin.cjs

@@ -0,0 +1,730 @@
+const { addNamed } = require("@babel/helper-module-imports");
+const path = require("path");
+
+module.exports = function (babel) {
+  const { types: t } = babel;
+
+  return {
+    name: "web-compiler",
+    visitor: {
+      Program: {
+        enter(p, state) {
+          state.importsNeeded = new Map();
+          state.importSources = new Map();
+          state.components = new Map(); // name -> { path, isDefault, isPage }
+          
+          const filename = state.filename || "";
+          const pagePatterns = ["page.jsx", "page.tsx", "layout.jsx", "layout.tsx", "404.jsx", "404.tsx"];
+          state.isPageFile = pagePatterns.some(p => filename.endsWith(p));
+        },
+        exit(p, state) {
+          // Process all collected components
+          state.components.forEach((info, name) => {
+            const isRenderFn = state.isPageFile && info.isDefault;
+            transformComponent(info.path, name, isRenderFn, t, state);
+          });
+        }
+      },
+
+      FunctionDeclaration(path, state) {
+        if (!path.node.id) return;
+        const name = path.node.id.name;
+        if (/^[A-Z]/.test(name)) {
+          // Check if this function actually uses JSX. If not, it's just a regular function, not a component.
+          let hasJSX = false;
+          path.traverse({
+            JSXElement() { hasJSX = true; },
+            JSXFragment() { hasJSX = true; }
+          });
+
+          if (!hasJSX) return;
+
+          const propsNode = path.node.params[0];
+          const observedAttributes = new Set();
+          
+          if (t.isObjectPattern(propsNode)) {
+            propsNode.properties.forEach(prop => {
+              if (t.isObjectProperty(prop) && t.isIdentifier(prop.key)) {
+                observedAttributes.add(prop.key.name);
+              }
+            });
+          }
+          
+          if (state.components.has(name)) {
+            const info = state.components.get(name);
+            info.observedAttributes = observedAttributes;
+            info.path = path;
+          } else {
+            state.components.set(name, { path, isDefault: false, observedAttributes });
+          }
+        }
+      },
+
+      ExportDefaultDeclaration(path, state) {
+        const decl = path.node.declaration;
+        if (t.isFunctionDeclaration(decl)) {
+          let hasJSX = false;
+          path.traverse({
+            JSXElement() { hasJSX = true; },
+            JSXFragment() { hasJSX = true; }
+          });
+
+          if (!hasJSX) return;
+
+          if (decl.id) {
+            const name = decl.id.name;
+            if (state.components.has(name)) {
+              state.components.get(name).isDefault = true;
+            } else {
+              state.components.set(name, { path: path.get("declaration"), isDefault: true });
+            }
+          } else {
+            // Anonymous function
+            state.components.set("_default", { path: path.get("declaration"), isDefault: true });
+          }
+        }
+      },
+
+      ImportDeclaration(path, state) {
+        const source = path.node.source.value;
+        path.node.specifiers.forEach(spec => {
+          if (t.isImportDefaultSpecifier(spec) || t.isImportSpecifier(spec)) {
+            state.importSources.set(spec.local.name, source);
+          }
+        });
+      },
+
+      CallExpression(path, state) {
+        if (t.isIdentifier(path.node.callee)) {
+          const name = path.node.callee.name;
+          const getImport = (importName, source) => {
+            const key = `${importName}:${source}`;
+            if (!state.importsNeeded.has(key)) {
+              state.importsNeeded.set(key, addNamed(path, importName, source));
+            }
+            return state.importsNeeded.get(key);
+          };
+
+          if (name === "$state" || name === "$derived" || name === "$ref") {
+            // Track this variable as a state variable in the current scope
+            const parent = path.findParent(p => p.isVariableDeclarator());
+            if (parent && t.isIdentifier(parent.node.id)) {
+              if (!state.stateVars) state.stateVars = new Set();
+              state.stateVars.add(parent.node.id.name);
+            }
+            if (name === "$state") {
+              path.get("callee").replaceWith(getImport("signal", "@preact/signals-core"));
+            } else if (name === "$derived") {
+              path.get("callee").replaceWith(getImport("computed", "@preact/signals-core"));
+            } else if (name === "$ref") {
+              // Track this variable as a ref variable
+              const parent = path.findParent(p => p.isVariableDeclarator());
+              if (parent && t.isIdentifier(parent.node.id)) {
+                if (!state.refVars) state.refVars = new Set();
+                state.refVars.add(parent.node.id.name);
+                if (!state.stateVars) state.stateVars = new Set();
+                state.stateVars.add(parent.node.id.name);
+              }
+              path.get("callee").replaceWith(getImport("signal", "@preact/signals-core"));
+            }
+          } else if (name === "$effect") {
+            path.get("callee").replaceWith(getImport("effect", "@preact/signals-core"));
+          } else if (name === "$expose") {
+            // $expose({ a, b }) -> Object.assign(this, { a, b })
+            path.get("callee").replaceWith(t.memberExpression(t.identifier("Object"), t.identifier("assign")));
+            path.node.arguments.unshift(t.thisExpression());
+          } else if (name === "onMount") {
+            path.get("callee").replaceWith(getImport("onMount", "@opentf/web"));
+          } else if (name === "onCleanup") {
+            path.get("callee").replaceWith(getImport("onCleanup", "@opentf/web"));
+          } else if (name === "$renderDynamic") {
+            path.get("callee").replaceWith(getImport("renderDynamic", "@opentf/web"));
+          }
+        }
+      },
+
+      Identifier(path, state) {
+        if (!state.stateVars || !state.stateVars.has(path.node.name)) return;
+        if (path.node._processed) return;
+        
+        // Strictly forbid manual .value access on $state variables
+        if (path.parentPath.isMemberExpression() && !path.parentPath.node.computed) {
+          if (t.isIdentifier(path.parentPath.node.property, { name: "value" })) {
+            throw path.parentPath.buildCodeFrameError(
+              `Manual .value access is forbidden for variables declared with $state. The Web App Framework compiler handles this automatically. Remove the .value from '${path.node.name}.value'.`
+            );
+          }
+          if (path.parentPath.node.property === path.node) return;
+        }
+
+        if (path.parentPath.isVariableDeclarator() && path.parentPath.node.id === path.node) return;
+        if (path.parentPath.isObjectProperty() && path.parentPath.node.key === path.node && !path.parentPath.node.computed) return;
+        if (path.parentPath.isClassProperty() && path.parentPath.node.key === path.node) return;
+        if (path.parentPath.isClassMethod() && path.parentPath.node.key === path.node) return;
+
+        const innerId = t.identifier(path.node.name);
+        innerId._processed = true;
+        const newNode = t.memberExpression(innerId, t.identifier("value"));
+        path.replaceWith(newNode);
+      },
+
+      AssignmentExpression(path, state) {
+        if (t.isIdentifier(path.node.left) && state.stateVars?.has(path.node.left.name)) {
+          const innerId = t.identifier(path.node.left.name);
+          innerId._processed = true;
+          path.node.left = t.memberExpression(innerId, t.identifier("value"));
+        }
+      },
+
+      UpdateExpression(path, state) {
+        if (t.isIdentifier(path.node.argument) && state.stateVars?.has(path.node.argument.name)) {
+          const innerId = t.identifier(path.node.argument.name);
+          innerId._processed = true;
+          path.node.argument = t.memberExpression(innerId, t.identifier("value"));
+        }
+      },
+
+      JSXElement(path, state) {
+        handleJSXVisitor(path, state, t);
+      },
+
+      JSXFragment(path, state) {
+        handleJSXVisitor(path, state, t);
+      }
+    }
+  };
+
+  function handleJSXVisitor(path, state, t) {
+    if (path.node._processed) return;
+    const getImport = (importName, source) => {
+      const key = `${importName}:${source}`;
+      if (!state.importsNeeded.has(key)) {
+        state.importsNeeded.set(key, addNamed(path, importName, source));
+      }
+      return state.importsNeeded.get(key);
+    };
+
+    const { statements, rootId, signals } = transformJSX(path.node, t, state, getImport, path);
+
+    // Propagate signals to parent component for observedAttributes
+    const parentFunc = path.findParent(p => 
+      p.isFunctionDeclaration() && (
+        /^[A-Z]/.test(p.node.id?.name) || 
+        (p.parentPath.isExportDefaultDeclaration() && state.isPageFile)
+      )
+    );
+
+    if (parentFunc) {
+      let compName = parentFunc.node.id?.name;
+      if (!compName && parentFunc.parentPath.isExportDefaultDeclaration()) {
+        compName = "_default";
+      }
+      if (compName) {
+        const info = state.components.get(compName);
+        if (info) {
+          if (!info.observedAttributes) info.observedAttributes = new Set();
+          signals.forEach(s => info.observedAttributes.add(s));
+        }
+      }
+    }
+
+    const iife = t.callExpression(t.arrowFunctionExpression([], t.blockStatement([
+      ...statements,
+      t.returnStatement(rootId)
+    ])), []);
+    iife._processed = true;
+    path.replaceWith(iife);
+  }
+
+  function transformComponent(componentPath, name, isRenderFn, t, state) {
+    const node = componentPath.node;
+    const body = node.body;
+
+    const getImport = (importName, source) => {
+      const key = `${importName}:${source}`;
+      if (!state.importsNeeded.has(key)) {
+        state.importsNeeded.set(key, addNamed(componentPath, importName, source));
+      }
+      return state.importsNeeded.get(key);
+    };
+
+    let jsxNode = null;
+    const originalStatements = [];
+
+    body.body.forEach(stmt => {
+      if (t.isReturnStatement(stmt)) {
+        jsxNode = stmt.argument;
+      } else {
+        originalStatements.push(stmt);
+      }
+    });
+
+    if (!jsxNode) return;
+
+    const res = transformJSX(jsxNode, t, state, getImport, componentPath);
+    let statements = res.statements;
+    let rootId = res.rootId;
+    let signals = res.signals;
+
+    // Capture the root element in a variable to avoid re-evaluating the IIFE if it is one
+    const rootVar = t.identifier("rootElement");
+    statements.push(t.variableDeclaration("const", [t.variableDeclarator(rootVar, rootId)]));
+    rootId = rootVar;
+
+
+
+    const componentInfo = state.components.get(name);
+    
+    // Prop Transformation: If the component uses destructuring in params, 
+    // we convert it to use `props` and replace usages to maintain reactivity.
+    if (!isRenderFn) {
+      const propsNode = node.params[0];
+      if (t.isObjectPattern(propsNode)) {
+        const propNames = new Set();
+        propsNode.properties.forEach(prop => {
+          if (t.isObjectProperty(prop) && t.isIdentifier(prop.key)) {
+            propNames.add(prop.key.name);
+          }
+        });
+
+        node.params[0] = t.identifier("props");
+
+        const replaceProps = (node) => {
+          if (!node || typeof node !== "object") return;
+
+          if (Array.isArray(node)) {
+            for (let i = 0; i < node.length; i++) {
+              const child = node[i];
+              if (t.isIdentifier(child) && propNames.has(child.name)) {
+                node[i] = t.memberExpression(t.identifier("props"), t.identifier(child.name));
+              } else {
+                replaceProps(child);
+              }
+            }
+            return;
+          }
+
+          for (const key in node) {
+            const child = node[key];
+            if (t.isIdentifier(child) && propNames.has(child.name)) {
+              // Only replace if it's NOT a property key in an object or member expression
+              if (t.isObjectProperty(node) && key === "key" && !node.computed) continue;
+              if (t.isMemberExpression(node) && key === "property" && !node.computed) continue;
+              if (t.isClassMethod(node) && key === "key") continue;
+              if (t.isJSXAttribute(node) && key === "name") continue;
+              
+              node[key] = t.memberExpression(t.identifier("props"), t.identifier(child.name));
+            } else {
+              replaceProps(child);
+            }
+          }
+        };
+
+        replaceProps(originalStatements);
+        replaceProps(statements);
+      }
+    }
+
+
+
+    const allSignals = new Set([...signals, ...(componentInfo?.observedAttributes || [])]);
+
+
+    if (isRenderFn) {
+      // ... (rest of render logic remains same)
+      // Transform to export function render(root) { ... }
+      const renderFn = t.functionDeclaration(
+        t.identifier("render"),
+        [t.identifier("root"), t.identifier("props")],
+        t.blockStatement([
+          ...(t.isObjectPattern(node.params[0]) ? [t.variableDeclaration("const", [t.variableDeclarator(node.params[0], t.identifier("props"))])] : []),
+          ...originalStatements,
+          ...statements,
+          t.expressionStatement(
+            t.callExpression(
+              t.memberExpression(t.identifier("root"), t.identifier("appendChild")),
+              [rootId]
+            )
+          )
+        ])
+      );
+      
+      const parent = componentPath.parentPath;
+      if (parent.isExportDefaultDeclaration()) {
+        parent.replaceWith(t.exportNamedDeclaration(renderFn));
+      } else {
+        componentPath.replaceWith(renderFn);
+      }
+    } else {
+      // Transform to Web Component Class
+      const tagName = "web-" + name.toLowerCase();
+      const observedAttributes = Array.from(allSignals);
+      const signalId = getImport("signal", "@preact/signals-core");
+      const createPropsProxyId = getImport("createPropsProxy", "@opentf/web");
+      const classId = t.identifier(name + "Element");
+
+      const classDecl = t.classDeclaration(
+        classId,
+        t.identifier("HTMLElement"),
+        t.classBody([
+          t.classProperty(t.identifier("observedAttributes"), t.arrayExpression(observedAttributes.map(s => t.stringLiteral(s))), null, null, false, true),
+          // Add getters and setters for each observed attribute
+          ...observedAttributes.map(s => t.classMethod(
+            "set",
+            t.identifier(s),
+            [t.identifier("val")],
+            t.blockStatement([
+              t.expressionStatement(t.assignmentExpression(
+                "=",
+                t.memberExpression(
+                  t.memberExpression(
+                    t.memberExpression(t.thisExpression(), t.identifier("_propsSignals")),
+                    t.stringLiteral(s),
+                    true
+                  ),
+                  t.identifier("value")
+                ),
+                t.identifier("val")
+              )),
+              // Sync back to native attributes for class and style
+              ...(s === "className" ? [
+                t.expressionStatement(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier("setAttribute")), [t.stringLiteral("class"), t.identifier("val")]))
+              ] : s === "style" ? [
+                t.ifStatement(
+                  t.logicalExpression("&&", t.identifier("val"), t.binaryExpression("===", t.unaryExpression("typeof", t.identifier("val"), false), t.stringLiteral("object"))),
+                  t.expressionStatement(t.callExpression(t.memberExpression(t.identifier("Object"), t.identifier("assign")), [t.memberExpression(t.thisExpression(), t.identifier("style")), t.identifier("val")]))
+                )
+              ] : [])
+            ])
+          )),
+          ...observedAttributes.map(s => t.classMethod(
+            "get",
+            t.identifier(s),
+            [],
+            t.blockStatement([
+              t.returnStatement(t.memberExpression(
+                t.memberExpression(
+                  t.memberExpression(t.thisExpression(), t.identifier("_propsSignals")),
+                  t.stringLiteral(s),
+                  true
+                ),
+                t.identifier("value")
+              ))
+            ])
+          )),
+          t.classMethod("constructor", t.identifier("constructor"), [], t.blockStatement([
+            t.expressionStatement(t.callExpression(t.super(), [])),
+            t.expressionStatement(t.assignmentExpression("=", t.memberExpression(t.thisExpression(), t.identifier("_propsSignals")), t.objectExpression(
+              observedAttributes.map(s => t.objectProperty(t.identifier(s), t.callExpression(signalId, [t.nullLiteral()])))
+            )))
+          ])),
+          t.classMethod("method", t.identifier("attributeChangedCallback"), [t.identifier("name"), t.identifier("_"), t.identifier("value")], t.blockStatement([
+            t.expressionStatement(t.assignmentExpression("=", t.memberExpression(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier("_propsSignals")), t.identifier("name"), true), t.identifier("value")), t.identifier("value")))
+          ])),
+          t.classMethod("method", t.identifier("connectedCallback"), [], t.blockStatement([
+            t.expressionStatement(t.assignmentExpression("=", t.memberExpression(t.thisExpression(), t.identifier("_onMounts")), t.arrayExpression([]))),
+            t.expressionStatement(t.assignmentExpression("=", t.memberExpression(t.thisExpression(), t.identifier("_onCleanups")), t.arrayExpression([]))),
+            t.variableDeclaration("const", [t.variableDeclarator(t.identifier("props"), t.callExpression(createPropsProxyId, [t.thisExpression()]))]),
+            t.expressionStatement(t.assignmentExpression("=", t.memberExpression(t.thisExpression(), t.identifier("_children")), t.callExpression(t.memberExpression(t.identifier("Array"), t.identifier("from")), [t.memberExpression(t.thisExpression(), t.identifier("childNodes"))]))),
+            t.whileStatement(t.memberExpression(t.thisExpression(), t.identifier("firstChild")), t.expressionStatement(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier("removeChild")), [t.memberExpression(t.thisExpression(), t.identifier("firstChild"))]))),
+
+            // Wrap setup in withInstance(this, () => { ... })
+            t.expressionStatement(t.callExpression(getImport("withInstance", "@opentf/web"), [
+              t.thisExpression(),
+              t.arrowFunctionExpression([], t.blockStatement([
+                ...originalStatements,
+                ...statements,
+                t.expressionStatement(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier("appendChild")), [rootId]))
+              ]))
+            ])),
+            // Run onMounts
+            t.expressionStatement(t.callExpression(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier("_onMounts")), t.identifier("forEach")), [t.arrowFunctionExpression([t.identifier("fn")], t.callExpression(t.identifier("fn"), []))]))
+          ])),
+
+
+          t.classMethod("method", t.identifier("disconnectedCallback"), [], t.blockStatement([
+            t.expressionStatement(t.callExpression(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier("_onCleanups")), t.identifier("forEach")), [t.arrowFunctionExpression([t.identifier("fn")], t.callExpression(t.identifier("fn"), []))]))
+          ]))
+        ])
+      );
+      
+      const parent = componentPath.parentPath;
+      
+      if (parent.isExportDefaultDeclaration()) {
+        componentPath.parentPath.insertBefore(classDecl);
+        componentPath.parentPath.insertBefore(t.expressionStatement(
+          t.callExpression(
+            t.memberExpression(t.identifier("customElements"), t.identifier("define")),
+            [t.stringLiteral(tagName), classId]
+          )
+        ));
+        parent.replaceWith(t.exportDefaultDeclaration(classId));
+      } else if (parent.isExportNamedDeclaration()) {
+        // For named exports, we transform the function into an exported class directly
+        const exportedClass = t.classDeclaration(
+          t.identifier(name),
+          t.identifier("HTMLElement"),
+          classDecl.body
+        );
+        parent.replaceWith(t.exportNamedDeclaration(exportedClass, []));
+        parent.insertAfter(t.expressionStatement(
+          t.callExpression(
+            t.memberExpression(t.identifier("customElements"), t.identifier("define")),
+            [t.stringLiteral(tagName), t.identifier(name)]
+          )
+        ));
+      } else {
+        componentPath.insertBefore(classDecl);
+        componentPath.insertBefore(t.expressionStatement(
+          t.callExpression(
+            t.memberExpression(t.identifier("customElements"), t.identifier("define")),
+            [t.stringLiteral(tagName), classId]
+          )
+        ));
+        componentPath.remove();
+      }
+    }
+  }
+
+  function transformJSX(node, t, state, getImport, path) {
+    if (node._processed) return { statements: [], rootId: node, signals: new Set() };
+    node._processed = true;
+
+    const statements = [];
+
+    const signals = new Set();
+    let counter = 0;
+    const nextId = (prefix = "el") => t.identifier(prefix + (counter++));
+    const toKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
+    function collectSignals(exprNode) {
+      if (!exprNode || typeof exprNode !== "object") return;
+      if (Array.isArray(exprNode)) {
+        exprNode.forEach(collectSignals);
+        return;
+      }
+      if (t.isMemberExpression(exprNode) && t.isIdentifier(exprNode.object, { name: "props" }) && t.isIdentifier(exprNode.property)) {
+        signals.add(exprNode.property.name);
+      }
+      Object.keys(exprNode).forEach(key => {
+        if (key === "property" && t.isMemberExpression(exprNode) && !exprNode.computed) return;
+        collectSignals(exprNode[key]);
+      });
+    }
+
+    function processNode(n, parentElId) {
+      if (t.isJSXElement(n)) {
+        const tagName = n.openingElement.name.name;
+        const isComponent = /^[A-Z]/.test(tagName);
+        const elId = nextId();
+
+        if (isComponent) {
+          const componentTagName = "web-" + tagName.toLowerCase();
+          statements.push(t.variableDeclaration("const", [
+            t.variableDeclarator(elId, t.callExpression(t.memberExpression(t.identifier("document"), t.identifier("createElement")), [t.stringLiteral(componentTagName)]))
+          ]));
+          
+          n.openingElement.attributes.forEach(attr => {
+            if (t.isJSXSpreadAttribute(attr)) {
+              const applySpreadId = getImport("applySpread", "@opentf/web");
+              statements.push(t.expressionStatement(t.callExpression(applySpreadId, [elId, attr.argument])));
+              return;
+            }
+            const name = attr.name.name;
+            const value = attr.value;
+            const targetProp = name === "class" || name === "className" ? "className" : name;
+
+            if (t.isJSXExpressionContainer(value)) {
+              if (name === "ref" && t.isIdentifier(value.expression) && state.refVars?.has(value.expression.name)) {
+                const refName = value.expression.name;
+                const innerId = t.identifier(refName);
+                innerId._processed = true;
+                statements.push(t.expressionStatement(t.assignmentExpression(
+                  "=",
+                  t.memberExpression(innerId, t.identifier("value")),
+                  elId
+                )));
+                return;
+              }
+              collectSignals(value.expression);
+              const effectId = getImport("effect", "@preact/signals-core");
+              statements.push(t.expressionStatement(t.callExpression(effectId, [
+                t.arrowFunctionExpression([], t.assignmentExpression("=", t.memberExpression(elId, t.identifier(targetProp)), value.expression))
+              ])));
+            } else {
+              statements.push(t.expressionStatement(t.assignmentExpression("=", t.memberExpression(elId, t.identifier(targetProp)), value)));
+            }
+          });
+
+          
+          n.children.forEach(child => {
+            const childId = processNode(child, elId);
+            if (childId) statements.push(t.expressionStatement(t.callExpression(t.memberExpression(elId, t.identifier("appendChild")), [childId])));
+          });
+          return elId;
+        }
+
+        const svgTags = ['svg', 'path', 'polyline', 'line', 'circle', 'rect', 'ellipse', 'polygon', 'g', 'text', 'tspan', 'defs', 'lineargradient', 'stop'];
+        const isSvg = svgTags.includes(tagName.toLowerCase());
+
+        statements.push(t.variableDeclaration("const", [
+          t.variableDeclarator(
+            elId, 
+            isSvg 
+              ? t.callExpression(t.memberExpression(t.identifier("document"), t.identifier("createElementNS")), [t.stringLiteral("http://www.w3.org/2000/svg"), t.stringLiteral(tagName)])
+              : t.callExpression(t.memberExpression(t.identifier("document"), t.identifier("createElement")), [t.stringLiteral(tagName)])
+          )
+        ]));
+
+        n.openingElement.attributes.forEach(attr => {
+          if (t.isJSXSpreadAttribute(attr)) {
+            const applySpreadId = getImport("applySpread", "@opentf/web");
+            statements.push(t.expressionStatement(t.callExpression(applySpreadId, [elId, attr.argument])));
+            return;
+          }
+          const originalName = attr.name.name;
+          const name = originalName.toLowerCase();
+          const value = attr.value;
+
+          if (name.startsWith("on")) {
+            if (t.isJSXExpressionContainer(value) && t.isJSXEmptyExpression(value.expression)) return;
+            statements.push(t.expressionStatement(t.assignmentExpression("=", t.memberExpression(elId, t.identifier(name)), t.isJSXExpressionContainer(value) ? value.expression : value)));
+          } else if (t.isJSXExpressionContainer(value)) {
+            if (t.isJSXEmptyExpression(value.expression)) return;
+            
+            if (originalName === "ref" && t.isIdentifier(value.expression) && state.refVars?.has(value.expression.name)) {
+              const refName = value.expression.name;
+              const innerId = t.identifier(refName);
+              innerId._processed = true;
+              statements.push(t.expressionStatement(t.assignmentExpression(
+                "=",
+                t.memberExpression(innerId, t.identifier("value")),
+                elId
+              )));
+              return;
+            }
+
+            collectSignals(value.expression);
+            
+            const effectId = getImport("effect", "@preact/signals-core");
+            const attrProp = (name === "class" || name === "classname") ? "className" : name;
+            const isStyle = attrProp === "style";
+            const isProperty = ["className", "style", "value", "checked", "id", "title", "href", "src", "key"].includes(attrProp);
+            
+            if (attrProp === "key") {
+              statements.push(t.expressionStatement(t.assignmentExpression("=", t.memberExpression(elId, t.identifier("_key")), value.expression)));
+            } else {
+              statements.push(t.expressionStatement(t.callExpression(effectId, [t.arrowFunctionExpression([], 
+                isStyle ? t.callExpression(t.memberExpression(t.identifier("Object"), t.identifier("assign")), [t.memberExpression(elId, t.identifier("style")), value.expression])
+                : (isProperty && (!isSvg || attrProp !== "className")) ? t.assignmentExpression("=", t.memberExpression(elId, t.identifier(attrProp)), value.expression)
+                : t.callExpression(t.memberExpression(elId, t.identifier("setAttribute")), [t.stringLiteral(attrProp === "className" ? "class" : toKebabCase(originalName)), value.expression])
+              )])));
+            }
+          } else {
+            const attrProp = (name === "class" || name === "classname") ? "className" : name;
+            const isProperty = ["className", "style", "value", "checked", "id", "title", "href", "src", "key"].includes(attrProp);
+            
+            if (isProperty && (!isSvg || attrProp !== "className")) {
+              statements.push(t.expressionStatement(t.assignmentExpression("=", t.memberExpression(elId, t.identifier(attrProp === "key" ? "_key" : attrProp)), value)));
+            } else {
+              statements.push(t.expressionStatement(t.callExpression(t.memberExpression(elId, t.identifier("setAttribute")), [t.stringLiteral(attrProp === "className" ? "class" : toKebabCase(originalName)), value])));
+            }
+          }
+        });
+
+        n.children.forEach(child => {
+          const childId = processNode(child, elId);
+          if (childId) statements.push(t.expressionStatement(t.callExpression(t.memberExpression(elId, t.identifier("appendChild")), [childId])));
+        });
+        return elId;
+      } else if (t.isJSXText(n)) {
+        const text = n.value.replace(/\n\s*/g, "");
+        if (!text) return null;
+        const textId = nextId("text");
+        statements.push(t.variableDeclaration("const", [t.variableDeclarator(textId, t.callExpression(t.memberExpression(t.identifier("document"), t.identifier("createTextNode")), [t.stringLiteral(text)]))]));
+        return textId;
+      } else if (t.isJSXFragment(n)) {
+        const fragId = nextId("frag");
+        statements.push(t.variableDeclaration("const", [t.variableDeclarator(fragId, t.callExpression(t.memberExpression(t.identifier("document"), t.identifier("createDocumentFragment")), []))]));
+        n.children.forEach(child => {
+          const childId = processNode(child, fragId);
+          if (childId) statements.push(t.expressionStatement(t.callExpression(t.memberExpression(fragId, t.identifier("appendChild")), [childId])));
+        });
+        return fragId;
+      } else if (t.isJSXExpressionContainer(n)) {
+        if (t.isJSXEmptyExpression(n.expression)) return null;
+        
+        collectSignals(n.expression);
+
+        // Recursive helper to transform nested JSX elements and .map() calls
+        const transformExpression = (exprNode) => {
+          if (!exprNode || typeof exprNode !== "object") return;
+          if (Array.isArray(exprNode)) {
+            exprNode.forEach(transformExpression);
+            return;
+          }
+          
+          Object.keys(exprNode).forEach(key => {
+            const child = exprNode[key];
+            if (!child || typeof child !== "object") return;
+
+            // Transform nested JSX elements into imperative IIFEs
+            if (t.isJSXElement(child) || t.isJSXFragment(child)) {
+              if (child._processed) return;
+              const { statements: innerStatements, rootId: innerRootId, signals: innerSignals } = transformJSX(child, t, state, getImport, path);
+              innerSignals.forEach(s => signals.add(s));
+              exprNode[key] = t.callExpression(t.arrowFunctionExpression([], t.blockStatement([
+                ...innerStatements,
+                t.returnStatement(innerRootId)
+              ])), []);
+              exprNode[key]._processed = true;
+            } 
+            // Transform .map() into optimized keyed mapped() call
+            else if (t.isCallExpression(child) && 
+                     t.isMemberExpression(child.callee) && 
+                     t.isIdentifier(child.callee.property, { name: "map" })) {
+              
+              const mappedId = getImport("mapped", "@opentf/web");
+              const sourceArray = child.callee.object;
+              const mapFn = child.arguments[0];
+              
+              const mappedInstanceId = nextId("mapped");
+              statements.push(t.variableDeclaration("const", [
+                t.variableDeclarator(mappedInstanceId, t.callExpression(mappedId, [
+                  t.arrowFunctionExpression([], sourceArray),
+                  mapFn
+                ]))
+              ]));
+              
+              exprNode[key] = t.callExpression(mappedInstanceId, []);
+              // Recurse into the map function body if needed
+              transformExpression(mapFn);
+            }
+            else {
+              transformExpression(child);
+            }
+          });
+        };
+
+        const wrapper = { expr: n.expression };
+        transformExpression(wrapper);
+        const finalExpression = wrapper.expr;
+
+        const renderDynamicId = getImport("renderDynamic", "@opentf/web");
+        statements.push(t.expressionStatement(t.callExpression(renderDynamicId, [
+          parentElId,
+          t.arrowFunctionExpression([], finalExpression)
+        ])));
+
+        return null;
+      } else if (t.isExpression(n)) {
+        return n;
+      }
+    }
+
+
+    const rootId = processNode(node, t.identifier("root"));
+    return { statements, rootId, signals };
+  }
+
+};

package/core/mount.js

@@ -0,0 +1,32 @@
+import { registerRoutes, navigate, router } from '../router/index'
+
+/**
+ * Bootstraps the Web App Framework Application.
+ * 
+ * @param {Object} options 
+ * @param {Object} options.pages - Result of import.meta.glob for pages/layouts
+ * @param {Function} options.guard - Optional route guard function
+ * @param {string} options.targetId - ID of the root element (default: 'app')
+ */
+export function mountApp({ pages, guard, targetId = 'app' } = {}) {
+  console.log('🚀 Web App Framework Bootstrapping...');
+  const root = document.getElementById(targetId)
+  
+  if (pages) {
+    console.log('📑 Registering routes...');
+    registerRoutes(pages)
+  }
+  
+  if (guard) {
+    console.log('🛡️ Activating route guard...');
+    router.guard = guard;
+  }
+  
+  const initialPath = window.location.pathname + window.location.search + window.location.hash;
+  console.log('📍 Navigating to:', initialPath);
+  navigate(initialPath, root)
+
+  window.onpopstate = () => {
+    navigate(window.location.pathname + window.location.search + window.location.hash, root)
+  }
+}

package/index.js

@@ -0,0 +1,6 @@
+export { mountApp } from './core/mount.js';
+export * from './runtime/dom.js';
+export * from './runtime/lifecycle.js';
+export * from './runtime/props.js';
+export * from './router/index.js';
+export { default as Link } from './router/Link.jsx';

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@opentf/web",
+  "version": "0.1.0",
+  "description": "The core engine of the Web App Framework, including the zero-VDOM compiler and signal-based runtime.",
+  "main": "index.js",
+  "module": "index.js",
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./compiler": "./compiler/babel-plugin.cjs",
+    "./runtime": "./runtime/index.js",
+    "./router": "./router/index.js"
+  },
+  "dependencies": {
+    "@preact/signals-core": "^1.14.1",
+    "@babel/core": "^7.29.0",
+    "@babel/helper-module-imports": "^7.28.6",
+    "@babel/plugin-syntax-jsx": "^7.28.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/router/Link.jsx

@@ -0,0 +1,27 @@
+import { navigate } from "./index"
+
+export default function Link(props) {
+  return (
+    <a
+      href={props.href}
+      className={props.className}
+      style={props.style}
+      onclick={(e) => {
+        if (
+          e.defaultPrevented ||
+          e.metaKey ||
+          e.ctrlKey ||
+          e.shiftKey ||
+          e.altKey ||
+          e.button !== 0
+        ) return
+
+        e.preventDefault()
+        navigate(props.href)
+        window.scrollTo(0, 0)
+      }}
+    >
+      {props.children}
+    </a>
+  )
+}

package/router/index.js

@@ -0,0 +1,234 @@
+import { withInstance } from '../runtime/lifecycle.js'
+import { signal } from '@preact/signals-core'
+
+export const routes = {
+  pages: {},
+  layouts: {},
+  notFound: null
+}
+
+const routerSignals = {
+  pathname: signal(window.location.pathname),
+  searchParams: signal(new URLSearchParams(window.location.search)),
+  hash: signal(window.location.hash),
+  isGuarding: signal(false),
+  guard: null
+};
+
+export const router = new Proxy(routerSignals, {
+  get: (target, key) => {
+    if (key === "push") return (path) => navigate(path);
+    if (key === "replace") return (path) => navigate(path, undefined, true);
+    
+    const s = target[key];
+    if (s && typeof s === 'object' && 'value' in s && typeof s.subscribe === 'function') {
+      return s.value;
+    }
+    return s;
+  },
+  set: (target, key, val) => {
+    const s = target[key];
+    if (s && typeof s === 'object' && 'value' in s && typeof s.subscribe === 'function') {
+      s.value = val;
+    } else {
+      target[key] = val;
+    }
+    return true;
+  }
+});
+
+let currentPageInstance = null;
+
+export function registerRoutes(pages) {
+  for (const path in pages) {
+    const isLayout = path.endsWith('layout.jsx') || path.endsWith('layout.tsx');
+    const isNotFound = path.endsWith('404.jsx') || path.endsWith('404.tsx');
+    
+    let route = path
+      .replace(/^.*\/app/, '') 
+      .replace(/\/(page|layout|404)\.(jsx|tsx)$/, '');
+    
+    if (route === '') route = '/';
+    
+    if (isNotFound) {
+      routes.notFound = pages[path];
+    } else if (isLayout) {
+      routes.layouts[route] = pages[path];
+    } else {
+      routes.pages[route] = pages[path];
+    }
+  }
+}
+
+function matchRoute(path) {
+  for (const route in routes.pages) {
+    const pattern = route
+      .replace(/\[\.\.\.([^\]]+)\]/g, '(?<$1>.+)')
+      .replace(/\[([^\]]+)\]/g, '(?<$1>[^/]+)');
+    
+    const regex = new RegExp(`^${pattern}$`);
+    const match = path.match(regex);
+    if (match) {
+      const params = { ...(match.groups || {}) };
+      
+      for (const key in params) {
+        if (route.includes(`[...${key}]`)) {
+          params[key] = params[key].split('/');
+        }
+      }
+
+      return { 
+        page: routes.pages[route], 
+        params,
+        route
+      };
+    }
+  }
+  return null;
+}
+
+
+function scrollToHash(hash) {
+  if (!hash) return;
+  const id = hash.replace('#', '');
+  const el = document.getElementById(id);
+  if (el) {
+    el.scrollIntoView({ behavior: 'smooth' });
+  }
+}
+
+export async function navigate(path, root = document.getElementById("app"), replace = false, isPopState = false) {
+  if (!path) return;
+  
+  const url = new URL(path, window.location.origin);
+  const pathname = url.pathname;
+  const oldPathname = window.location.pathname;
+  const oldSearch = window.location.search;
+  const oldHash = window.location.hash;
+  
+  // 1. Run Route Guard if registered
+  if (router.guard) {
+    const match = matchRoute(pathname);
+    const to = {
+      path: pathname,
+      fullPath: pathname + url.search + url.hash,
+      params: match?.params || {},
+      query: Object.fromEntries(new URLSearchParams(url.search))
+    };
+
+    routerSignals.isGuarding.value = true;
+    
+    try {
+      await new Promise((resolve, reject) => {
+        const tools = {
+          next: () => resolve(),
+          redirect: (p) => {
+            navigate(p, root, false);
+            reject('redirected');
+          },
+          replace: (p) => {
+            navigate(p, root, true);
+            reject('redirected');
+          }
+        };
+        
+        // Execute guard
+        Promise.resolve(routerSignals.guard(to, tools)).catch(reject);
+      });
+    } catch (e) {
+      routerSignals.isGuarding.value = false;
+      if (e === 'redirected') return;
+      console.error('Route Guard Error:', e);
+      return;
+    }
+    
+    routerSignals.isGuarding.value = false;
+  }
+
+  if (!isPopState) {
+    routerSignals.pathname.value = pathname;
+    routerSignals.searchParams.value = new URLSearchParams(url.search);
+    routerSignals.hash.value = url.hash;
+  }
+
+  // If only hash changed, don't re-render everything
+  if (pathname === oldPathname && url.search === oldSearch && url.hash !== oldHash) {
+    if (!isPopState) {
+      if (replace) window.history.replaceState({}, '', path);
+      else window.history.pushState({}, '', path);
+    }
+    scrollToHash(url.hash);
+    return;
+  }
+
+  const match = matchRoute(pathname) || (routes.notFound ? { page: routes.notFound, params: {}, route: null } : null);
+  
+  if (match) {
+    const { page, params, route } = match;
+    
+    if (currentPageInstance && currentPageInstance._onCleanups) {
+      currentPageInstance._onCleanups.forEach(fn => fn());
+    }
+    
+    const instance = { _onMounts: [], _onCleanups: [] };
+    currentPageInstance = instance;
+
+    const layoutChain = [];
+    if (route) {
+      let currentPath = route;
+      while (true) {
+        if (routes.layouts[currentPath]) {
+          layoutChain.unshift(routes.layouts[currentPath]);
+        }
+        if (currentPath === '/') break;
+        currentPath = currentPath.substring(0, currentPath.lastIndexOf('/')) || '/';
+      }
+    }
+
+    let content = document.createDocumentFragment();
+    withInstance(instance, () => {
+      page.render(content, { params });
+
+      for (let i = layoutChain.length - 1; i >= 0; i--) {
+        const layout = layoutChain[i];
+        const nextContent = document.createDocumentFragment();
+        layout.render(nextContent, { children: content, params });
+        content = nextContent;
+      }
+    });
+
+    if (!root) root = document.getElementById("app");
+    if (root) {
+      root.innerHTML = '';
+      root.appendChild(content);
+    }
+
+    if (instance._onMounts) {
+      instance._onMounts.forEach(fn => fn());
+    }
+
+    if (!isPopState) {
+      if (replace) window.history.replaceState({}, '', path);
+      else window.history.pushState({}, '', path);
+    }
+
+    // Scroll to hash after render
+    setTimeout(() => scrollToHash(url.hash), 100);
+  } else {
+    if (root) root.innerHTML = '<h1>404 Not Found</h1>';
+  }
+}
+
+if (typeof window !== 'undefined') {
+  window.addEventListener('popstate', () => {
+    const fullPath = window.location.pathname + window.location.search + window.location.hash;
+    routerSignals.pathname.value = window.location.pathname;
+    routerSignals.searchParams.value = new URLSearchParams(window.location.search);
+    routerSignals.hash.value = window.location.hash;
+    navigate(fullPath, undefined, false, true);
+  });
+  window.addEventListener('hashchange', () => {
+    routerSignals.hash.value = window.location.hash;
+    scrollToHash(window.location.hash);
+  });
+}

package/runtime/For.js

@@ -0,0 +1,17 @@
+import { mapped, renderDynamic } from "./dom.js";
+import { withInstance } from "./lifecycle.js";
+
+export function For(props) {
+  // We return a "marker" that renderDynamic will handle
+  // But wait, if we are called as a component, we need to render something.
+  return mapped(props.each, props.children[0]);
+}
+
+// Register as a Web Component to support <For> syntax
+class ForElement extends HTMLElement {
+  connectedCallback() {
+    const each = this._propsSignals?.each;
+    const renderFn = this.childNodes[0]; // Wait, this is tricky
+    // ...
+  }
+}

package/runtime/dom.js

@@ -0,0 +1,80 @@
+import { effect } from "@preact/signals-core";
+
+export function renderDynamic(parent, fn) {
+  const anchor = document.createComment("dynamic");
+  parent.appendChild(anchor);
+  
+  let currentNodes = [];
+  
+  effect(() => {
+    let value = fn();
+    // If the value is a function (e.g., from mapped), execute it to get the nodes
+    if (typeof value === "function") value = value();
+    
+    if (value === null || value === undefined || value === false) value = [];
+    if (!Array.isArray(value)) value = [value];
+
+    const nextNodes = value.map(v => {
+      if (v instanceof Node) return v;
+      return document.createTextNode(String(v));
+    });
+
+    reconcile(anchor.parentNode, anchor, currentNodes, nextNodes);
+    currentNodes = nextNodes;
+  });
+}
+
+export function mapped(source, fn) {
+  let cache = new Map(); // key -> { node }
+  
+  return () => {
+    const list = (typeof source === "function" ? source() : source.value) || [];
+    const nextNodes = [];
+    const nextCache = new Map();
+
+    list.forEach((item, index) => {
+      const key = item.key ?? item.id ?? index;
+      let cached = cache.get(key);
+      
+      // If the item exists and the reference is identical, reuse the node
+      if (cached && cached.item === item) {
+        nextNodes.push(cached.node);
+        nextCache.set(key, cached);
+      } else {
+        // If it's a new item OR the data changed (new reference), re-render
+        const node = fn(item, index);
+        node._key = key;
+        nextNodes.push(node);
+        nextCache.set(key, { node, item });
+      }
+    });
+
+    // Cleanup removed items
+    cache.forEach((cached, key) => {
+      if (!nextCache.has(key)) {
+        if (cached.node.remove) cached.node.remove();
+      }
+    });
+
+    cache = nextCache;
+    return nextNodes;
+  };
+}
+
+function reconcile(parent, anchor, oldNodes, nextNodes) {
+  // 1. Remove nodes that are no longer present
+  const nextSet = new Set(nextNodes);
+  oldNodes.forEach(n => {
+    if (!nextSet.has(n)) n.remove();
+  });
+
+  // 2. Insert or move nodes from right to left to minimize DOM operations
+  let current = anchor;
+  for (let i = nextNodes.length - 1; i >= 0; i--) {
+    const node = nextNodes[i];
+    if (node.nextSibling !== current) {
+      parent.insertBefore(node, current);
+    }
+    current = node;
+  }
+}

package/runtime/lifecycle.js

@@ -0,0 +1,28 @@
+let currentInstance = null;
+
+export function withInstance(inst, fn) {
+  const prev = currentInstance;
+  currentInstance = inst;
+  try {
+    return fn();
+  } finally {
+    currentInstance = prev;
+  }
+}
+
+export function onMount(fn) {
+  if (currentInstance) {
+    if (!currentInstance._onMounts) currentInstance._onMounts = [];
+    currentInstance._onMounts.push(fn);
+  } else {
+    // If no instance (like in a Page render), run immediately
+    fn();
+  }
+}
+
+export function onCleanup(fn) {
+  if (currentInstance) {
+    if (!currentInstance._onCleanups) currentInstance._onCleanups = [];
+    currentInstance._onCleanups.push(fn);
+  }
+}

package/runtime/props.js

@@ -0,0 +1,114 @@
+import { effect, signal } from "@preact/signals-core";
+
+function toKebabCase(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+export function createPropsProxy(el) {
+  if (!el._propsSignals) el._propsSignals = {};
+  
+  return new Proxy(el, {
+    get: (target, key) => {
+      if (key === "__signals") return target._propsSignals;
+      if (key === "children") return target._children;
+      if (typeof key === "symbol") return target[key];
+      if (key === "then") return undefined; // Promise check
+      
+      if (!target._propsSignals[key]) {
+        const initialValue = target.getAttribute(toKebabCase(key)) || target[key];
+        target._propsSignals[key] = signal(initialValue);
+      }
+      return target._propsSignals[key].value;
+    },
+    set: (target, key, value) => {
+      const isSignal = value && typeof value === "object" && "value" in value && typeof value.subscribe === "function";
+      
+      if (!target._propsSignals[key]) {
+        target._propsSignals[key] = signal(isSignal ? value.value : value);
+      }
+      
+      if (isSignal) {
+        // Link the internal signal to the external one
+        if (target._propsSignals[key]._link) target._propsSignals[key]._link(); // Cleanup old link
+        target._propsSignals[key]._link = effect(() => {
+          target._propsSignals[key].value = value.value;
+        });
+      } else {
+        target._propsSignals[key].value = value;
+      }
+      
+      target[key] = value;
+      return true;
+    },
+    ownKeys: (target) => {
+      const keys = new Set(Object.keys(target));
+      Object.keys(target._propsSignals).forEach(k => keys.add(k));
+      keys.add("children");
+      return Array.from(keys).filter(k => !k.startsWith("_"));
+    },
+    getOwnPropertyDescriptor: (target, key) => {
+      return {
+        enumerable: true,
+        configurable: true
+      };
+    }
+  });
+}
+
+export function applySpread(el, props) {
+  if (!props) return;
+  
+  const signals = props?.__signals;
+  
+  Object.keys(props).forEach(key => {
+    let value = props[key];
+    if (signals && signals[key]) value = signals[key];
+    
+    const name = key.toLowerCase();
+    const attrProp = (name === "class" || name === "classname") ? "className" : key;
+    const isProperty = ["className", "style", "value", "checked", "id", "title", "href", "src", "key"].includes(attrProp);
+    const isEvent = name.startsWith("on");
+
+    // Simple heuristic for signal detection: object with .value and .subscribe
+    const isSignal = value && typeof value === "object" && "value" in value && typeof value.subscribe === "function";
+
+    if (isSignal) {
+      effect(() => {
+        const val = value.value;
+        if (isProperty) {
+          if (attrProp === "style" && val && typeof val === "object") {
+            Object.assign(el.style, val);
+          } else if (attrProp === "className" && el instanceof SVGElement) {
+            el.setAttribute("class", val);
+          } else {
+            el[attrProp] = val;
+          }
+        } else {
+          if (val === null || val === undefined || val === false) {
+            el.removeAttribute(key);
+          } else {
+            el.setAttribute(key, val);
+          }
+        }
+      });
+    } else {
+      if (isEvent) {
+        el[name] = value;
+      } else if (isProperty) {
+        if (attrProp === "style" && value && typeof value === "object") {
+          Object.assign(el.style, value);
+        } else if (attrProp === "className" && el instanceof SVGElement) {
+          el.setAttribute("class", value);
+        } else {
+          el[attrProp] = value;
+        }
+      } else {
+        if (value === null || value === undefined || value === false) {
+          el.removeAttribute(key);
+        } else {
+          el.setAttribute(key, value);
+        }
+      }
+    }
+  });
+}