@opentf/web 0.4.0 → 0.5.0

package/dist/compiler/babel-plugin.cjs

@@ -1,798 +0,0 @@
-const { addNamed } = require("@babel/helper-module-imports");
-const path = require("path");
-
-const SVG_TAGS = ['svg', 'path', 'polyline', 'line', 'circle', 'rect', 'ellipse', 'polygon', 'g', 'text', 'tspan', 'defs', 'lineargradient', 'stop'];
-
-const SVG_CAMEL_CASE = [
-  "allowReorder", "attributeName", "attributeType", "autoReverse", "baseFrequency", "baseProfile", "calcMode", "clipPathUnits", "contentScriptType", "contentStyleType", "cursor", "cx", "cy", "d", "diffuseConstant", "direction", "display", "divisor", "dominantBaseline", "dur", "dx", "dy", "edgeMode", "elevation", "enableBackground", "externalResourcesRequired", "fill", "fillOpacity", "fillRule", "filter", "filterRes", "filterUnits", "floodColor", "floodOpacity", "focusable", "fontFamily", "fontSize", "fontSizeAdjust", "fontStretch", "fontStyle", "fontVariant", "fontWeight", "format", "from", "fx", "fy", "g1", "g2", "glyphName", "glyphOrientationHorizontal", "glyphOrientationVertical", "glyphRef", "gradientTransform", "gradientUnits", "hanging", "horizAdvX", "horizOriginX", "ideographic", "imageRendering", "in", "in2", "intercept", "k", "k1", "k2", "k3", "k4", "kernelMatrix", "kernelUnitLength", "kerning", "keyPoints", "keySplines", "keyTimes", "lengthAdjust", "letterSpacing", "lightingColor", "limitingConeAngle", "local", "markerEnd", "markerMid", "markerStart", "markerHeight", "markerUnits", "markerWidth", "mask", "maskContentUnits", "maskUnits", "mathematical", "mode", "numOctaves", "offset", "opacity", "operator", "order", "orient", "orientation", "origin", "overflow", "overlinePosition", "overlineThickness", "panose1", "paintOrder", "pathLength", "patternContentUnits", "patternTransform", "patternUnits", "pointerEvents", "points", "pointsAtX", "pointsAtY", "pointsAtZ", "preserveAlpha", "preserveAspectRatio", "primitiveUnits", "r", "radius", "refX", "refY", "renderingIntent", "repeatCount", "repeatDur", "requiredExtensions", "requiredFeatures", "restart", "result", "rotate", "rx", "ry", "scale", "seed", "shapeRendering", "slope", "spacing", "specularConstant", "specularExponent", "speed", "spreadMethod", "startOffset", "stdDeviation", "stemh", "stemv", "stitchTiles", "stopColor", "stopOpacity", "strikethroughPosition", "strikethroughThickness", "string", "stroke", "strokeDasharray", "strokeDashoffset", "strokeLinecap", "strokeLinejoin", "strokeMiterlimit", "strokeOpacity", "strokeWidth", "surfaceScale", "systemLanguage", "tableValues", "targetX", "targetY", "textAnchor", "textDecoration", "textLength", "textRendering", "to", "transform", "u1", "u2", "underlinePosition", "underlineThickness", "unicode", "unicodeBidi", "unicodeRange", "unitsPerEm", "vAlphabetic", "vHanging", "vIdeographic", "vMathematical", "values", "version", "vertAdvY", "vertOriginX", "vertOriginY", "viewBox", "viewTarget", "visibility", "widths", "wordSpacing", "writingMode", "x", "x1", "x2", "xChannelSelector", "xHeight", "xlinkActuate", "xlinkArcrole", "xlinkHref", "xlinkRole", "xlinkShow", "xlinkTitle", "xlinkType", "xmlBase", "xmlLang", "xmlSpace", "y", "y1", "y2", "yChannelSelector", "z", "zoomAndPan"
-];
-
-const IS_PROPERTY = ["className", "style", "value", "checked", "id", "title", "href", "src", "key"];
-
-const STANDARD_TAGS = ["div", "span", "p", "a", "ul", "li", "button", "input", "img", "h1", "h2", "h3", "h4", "h5", "h6", "section", "article", "nav", "header", "footer", "main", "aside", "form", "label", "select", "option", "textarea", "table", "tr", "td", "th", "thead", "tbody", "tfoot", "canvas", "video", "audio", "svg"];
-
-
-module.exports = function (babel) {
-  const { types: t } = babel;
-
-  return {
-    name: "web-compiler",
-    visitor: {
-      Program: {
-        enter(p, state) {
-          state.runtimeSource = state.opts.runtimeSource || "@opentf/web";
-          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", state.runtimeSource));
-            } else if (name === "$derived") {
-              path.get("callee").replaceWith(getImport("computed", state.runtimeSource));
-            } 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", state.runtimeSource));
-            }
-          } else if (name === "$effect") {
-            path.get("callee").replaceWith(getImport("effect", state.runtimeSource));
-          } 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", state.runtimeSource));
-          } else if (name === "onCleanup") {
-            path.get("callee").replaceWith(getImport("onCleanup", state.runtimeSource));
-          } else if (name === "$renderDynamic") {
-            path.get("callee").replaceWith(getImport("renderDynamic", state.runtimeSource));
-          }
-        }
-      },
-
-      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", state.runtimeSource);
-      const createPropsProxyId = getImport("createPropsProxy", state.runtimeSource);
-      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", state.runtimeSource), [
-              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 tagNameNode = n.openingElement.name;
-        let tagName = "";
-        let isDynamic = false;
-        
-        if (t.isJSXIdentifier(tagNameNode)) {
-          tagName = tagNameNode.name;
-          // If it's an identifier that starts with Uppercase, it might be a component.
-          // But if it's NOT a globally defined component or a local function, it might be a dynamic tag variable.
-          // For now, let's assume if it's not a standard HTML tag and it's Uppercase, it's a component.
-          // BUT, if it's in scope as a variable, it might be dynamic.
-        } else if (t.isJSXMemberExpression(tagNameNode)) {
-          const getMemberName = (node) => {
-            if (t.isJSXIdentifier(node)) return node.name;
-            if (t.isJSXMemberExpression(node)) {
-              return `${getMemberName(node.object)}.${getMemberName(node.property)}`;
-            }
-            return "";
-          };
-          tagName = getMemberName(tagNameNode);
-        }
-
-        const isComponent = /^[A-Z]/.test(tagName) || tagName.includes(".");
-        const elId = nextId();
-
-        if (isComponent) {
-          // Check if the identifier is actually in scope (not a global component)
-          // This is a heuristic: if it's Uppercase and NOT a standard tag, we treat it as a component.
-          // For dynamic tags like <Tag />, we need to check if 'Tag' is a variable.
-          const binding = path.scope.getBinding(tagName);
-          const isStandardTag = /^[a-z]/.test(tagName) && STANDARD_TAGS.includes(tagName.toLowerCase());
-          
-          let componentTagName = tagName;
-          if (tagName.includes(".")) {
-             componentTagName = "web-" + tagName.replace(/\./g, "-").toLowerCase();
-          } else if (!isStandardTag) {
-             componentTagName = "web-" + tagName.toLowerCase();
-          }
-
-          const isFunction = binding && (t.isFunctionDeclaration(binding.path.node) || t.isFunctionExpression(binding.path.node) || t.isArrowFunctionExpression(binding.path.node));
-          const isImport = binding && binding.kind === "module";
-          const isVariable = binding && t.isVariableDeclarator(binding.path.node);
-
-          if (isFunction || isImport || (!binding && !isStandardTag)) {
-             statements.push(t.variableDeclaration("const", [
-               t.variableDeclarator(elId, t.callExpression(t.memberExpression(t.identifier("document"), t.identifier("createElement")), [t.stringLiteral(componentTagName)]))
-             ]));
-          } else if (isVariable) {
-             // Truly dynamic tag from local variable
-             statements.push(t.variableDeclaration("const", [
-               t.variableDeclarator(elId, t.callExpression(t.memberExpression(t.identifier("document"), t.identifier("createElement")), [t.identifier(tagName)]))
-             ]));
-          } else {
-            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", state.runtimeSource);
-              statements.push(t.expressionStatement(t.callExpression(applySpreadId, [elId, attr.argument])));
-              return;
-            }
-            const name = attr.name.name;
-            const value = attr.value || t.booleanLiteral(true);
-            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", state.runtimeSource);
-              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 isSvg = SVG_TAGS.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", state.runtimeSource);
-            statements.push(t.expressionStatement(t.callExpression(applySpreadId, [elId, attr.argument])));
-            return;
-          }
-          const originalName = attr.name.name;
-          const name = originalName.toLowerCase();
-          const value = attr.value || t.booleanLiteral(true);
-
-          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", state.runtimeSource);
-            const attrProp = (name === "class" || name === "classname") ? "className" : name;
-            const isStyle = attrProp === "style";
-            const isProperty = IS_PROPERTY.includes(attrProp);
-            
-            const isSvgCamel = isSvg && SVG_CAMEL_CASE.includes(originalName);
-            const finalAttrName = isSvgCamel ? originalName : (attrProp === "className" ? "class" : toKebabCase(originalName));
-
-            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(finalAttrName), value.expression])
-              )])));
-            }
-
-          } else {
-            const attrProp = (name === "class" || name === "classname") ? "className" : name;
-            const isProperty = IS_PROPERTY.includes(attrProp);
-            const isSvgCamel = isSvg && SVG_CAMEL_CASE.includes(originalName);
-            const finalAttrName = isSvgCamel ? originalName : (attrProp === "className" ? "class" : toKebabCase(originalName));
-            
-            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(finalAttrName), 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)) {
-        if (n.value.includes("\n") && n.value.trim() === "") return null;
-        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", state.runtimeSource);
-              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", state.runtimeSource);
-        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 };
-  }
-
-};