@fluixi/compiler 1.0.0-alpha.83 → 1.0.0-alpha.85

package/dist/babel-TGY76XJ7.mjs

@@ -0,0 +1,636 @@
+/*! @fluixi/compiler v1.0.0-alpha.85 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+import {
+  analyzeStatic,
+  buildJsxIR,
+  collapseStrategies,
+  imperativeBackend,
+  inlineTemplates,
+  isDeferred,
+  isReactiveShape,
+  lowerTemplate,
+  resolveComponentSources,
+  shapeOf
+} from "./chunk-6DB5FXS4.mjs";
+import {
+  CORE_CONTROL_FLOW,
+  ROUTER_COMPONENTS,
+  createComponentResolver
+} from "./chunk-4PLHS2FP.mjs";
+import "./chunk-G6QC2WRJ.mjs";
+
+// src/frontend/babel/plugin.ts
+import { declare } from "@babel/helper-plugin-utils";
+import { types as t3, template as template2 } from "@babel/core";
+
+// src/frontend/babel/build-ir.ts
+import { types as t2, traverse, template } from "@babel/core";
+import _generate2 from "@babel/generator";
+
+// src/frontend/babel/lower-template.ts
+import { types as t } from "@babel/core";
+import _generate from "@babel/generator";
+var generate = _generate.default ?? _generate;
+function gen(node) {
+  return generate(node, { concise: true }).code;
+}
+function bindHole(expr, used, onNested) {
+  const hole = {
+    code: genExpr(expr, used, onNested),
+    reactive: isReactiveExpr(expr)
+  };
+  if (t.isArrowFunctionExpression(expr) && !t.isBlockStatement(expr.body)) {
+    const body = expr.body;
+    hole.arrow = {
+      params: expr.params.map((p) => gen(p)),
+      body: genExpr(body, used, onNested),
+      bodyReactive: isReactiveExpr(body)
+    };
+  }
+  if (t.isObjectExpression(expr)) hole.object = true;
+  return hole;
+}
+function lowerLitTemplate(node, used, opts = {}) {
+  const quasi = node.quasi;
+  const holes = quasi.expressions.map((e) => bindHole(e, used, opts.onNested));
+  return lowerTemplate(buildPieces(quasi), holes, used, opts);
+}
+function buildPieces(quasi) {
+  const pieces = [];
+  quasi.quasis.forEach((q, i) => {
+    const text = q.value.cooked ?? q.value.raw;
+    pieces.push({ kind: "static", text, start: q.start ?? 0 });
+    if (i < quasi.expressions.length) {
+      const e = quasi.expressions[i];
+      pieces.push({ kind: "hole", index: i, start: e.start ?? 0, end: e.end ?? 0 });
+    }
+  });
+  return pieces;
+}
+
+// src/frontend/babel/build-ir-lit.ts
+function buildIRFromLit(node, used = /* @__PURE__ */ new Set(), opts = {}) {
+  const ir = lowerLitTemplate(node, used, opts);
+  analyzeStatic(ir);
+  return ir;
+}
+
+// src/frontend/babel/build-ir.ts
+var generate2 = _generate2.default ?? _generate2;
+function gen2(node) {
+  return generate2(node, { concise: true }).code;
+}
+function transformNestedJSX(node, used, onNested) {
+  const clone = t2.cloneNode(node, true);
+  const file = t2.file(t2.program([t2.expressionStatement(clone)]));
+  let changed = false;
+  const emitInto = (path, code, imports) => {
+    for (const s of imports) used.add(s);
+    path.replaceWith(template.expression(code, { placeholderPattern: false, plugins: ["typescript"] })());
+    path.skip();
+    changed = true;
+  };
+  traverse(file, {
+    "JSXElement|JSXFragment"(path) {
+      const jsx = path.node;
+      const nestedIR = buildIR(jsx, used, onNested);
+      onNested?.(nestedIR);
+      const { code, imports, templates } = imperativeBackend.emit(nestedIR, {});
+      emitInto(path, inlineTemplates(code, templates), imports);
+    },
+    // Nested lit templates compose: ${cond ? html`…` : html`…`},
+    // ${list.map(x => html`<li>${x}</li>`)}. Compile them the same way.
+    TaggedTemplateExpression(path) {
+      const tag = path.node.tag;
+      if (!t2.isIdentifier(tag) || tag.name !== "html" && tag.name !== "svg") return;
+      const ir = buildIRFromLit(path.node, used, { svg: tag.name === "svg", onNested });
+      onNested?.(ir);
+      const { code, imports, templates } = imperativeBackend.emit(ir, {});
+      emitInto(path, inlineTemplates(code, templates), imports);
+    }
+  });
+  return changed ? file.program.body[0].expression : node;
+}
+function genExpr(node, used, onNested) {
+  return gen2(transformNestedJSX(node, used, onNested));
+}
+function isReactiveExpr(node) {
+  return isReactiveShape(shapeOf(node));
+}
+function buildIR(node, used = /* @__PURE__ */ new Set(), onNested) {
+  const ir = buildJsxIR(node, {
+    code: (n) => (
+      // A member-expression tag (`<ns.Foo/>`) is not an Expression, so it cannot go
+      // through the nested-JSX compile: it only ever needs printing.
+      n.type === "JSXMemberExpression" ? gen2(n) : genExpr(n, used, onNested)
+    ),
+    used
+  });
+  return ir;
+}
+
+// src/frontend/babel/plugin.ts
+var CORE_ONLY_CONTROL_FLOW = new Set(CORE_CONTROL_FLOW);
+var ROUTER_COMPONENTS2 = new Set(ROUTER_COMPONENTS);
+var plugin_default = declare((api, options = {}) => {
+  api.assertVersion(7);
+  const {
+    delegateEvents = true,
+    signalModule = "@fluixi/dom",
+    controlFlowModule = "@fluixi/dom",
+    routerModule = "@fluixi/core/router",
+    reactiveModule = "@fluixi/reactive/signal",
+    templateClone = true,
+    partialTemplates = true,
+    // `both` by default: JSX and html`` are compiled out of the box, so
+    // `fluixi()` needs no `format` option. Injected imports are deduped, so a
+    // file mixing the two styles won't redeclare a binding.
+    format = "both",
+    litTag = "html",
+    resolve: resolveRules = []
+  } = options;
+  const componentResolver = createComponentResolver(resolveRules);
+  const compileLit = format === "lit" || format === "both";
+  const pluginState = {
+    irImports: /* @__PURE__ */ new Set(),
+    libModule: "@fluixi/core",
+    controlFlowModule,
+    routerModule,
+    templateClone,
+    partialTemplates,
+    hasJSX: false,
+    hasLitHTML: false,
+    needsControlFlowImport: false,
+    needsCreateMemo: false,
+    controlFlowComponents: /* @__PURE__ */ new Set(),
+    resolvedComponents: /* @__PURE__ */ new Map(),
+    deferredComponents: /* @__PURE__ */ new Map(),
+    componentResolver,
+    delegatedEvents: /* @__PURE__ */ new Set(),
+    staticTemplates: /* @__PURE__ */ new Map(),
+    staticCounter: 0
+  };
+  return {
+    name: "@fluixi/babel-plugin-jsx",
+    manipulateOptions(opts, parserOpts) {
+      parserOpts.plugins.push("jsx", "typescript");
+    },
+    pre(state) {
+      Object.assign(state, pluginState);
+    },
+    visitor: {
+      Program: {
+        enter(path, state) {
+          Object.assign(state, {
+            hasJSX: false,
+            hasLitHTML: false,
+            hasLitIR: false,
+            needsControlFlowImport: false,
+            needsCreateMemo: false,
+            controlFlowComponents: /* @__PURE__ */ new Set(),
+            resolvedComponents: /* @__PURE__ */ new Map(),
+            deferredComponents: /* @__PURE__ */ new Map(),
+            componentResolver,
+            delegatedEvents: /* @__PURE__ */ new Set(),
+            staticTemplates: /* @__PURE__ */ new Map(),
+            staticCounter: 0,
+            libModule: "@fluixi/core",
+            controlFlowModule,
+            routerModule,
+            templateClone,
+            partialTemplates,
+            irImports: /* @__PURE__ */ new Set(),
+            needsCreateNativeElement: false,
+            needsInsert: false,
+            needsSpread: false,
+            needsCreateComponent: false,
+            needsMergeProps: false
+          });
+        },
+        exit(path, state) {
+          const imports = [];
+          if (state.hasJSX || state.hasLitIR) {
+            if (state.irImports.size > 0) {
+              const CF = /* @__PURE__ */ new Set([
+                "Show",
+                "For",
+                "Index",
+                "Switch",
+                "Match",
+                "Dynamic",
+                "ErrorBoundary",
+                "Portal",
+                "Suspense"
+              ]);
+              const REACTIVE = /* @__PURE__ */ new Set([
+                "createMemo",
+                "createEffect",
+                "createRenderEffect",
+                "createRoot",
+                "createSignal",
+                "onCleanup",
+                "batch",
+                "untrack"
+              ]);
+              const all = Array.from(state.irImports);
+              const spec = (n) => t3.importSpecifier(t3.identifier(n), t3.identifier(n));
+              const unbound = (s) => !path.scope.hasBinding(s);
+              const reactive = all.filter((s) => REACTIVE.has(s) && unbound(s));
+              const core = all.filter((s) => !CF.has(s) && !REACTIVE.has(s) && unbound(s));
+              const cf = all.filter((s) => CF.has(s) && unbound(s));
+              if (reactive.length > 0) {
+                imports.push(
+                  t3.importDeclaration(reactive.map(spec), t3.stringLiteral(reactiveModule))
+                );
+              }
+              if (core.length > 0) {
+                imports.push(
+                  t3.importDeclaration(core.map(spec), t3.stringLiteral(signalModule))
+                );
+              }
+              if (cf.length > 0) {
+                imports.push(
+                  t3.importDeclaration(cf.map(spec), t3.stringLiteral(controlFlowModule))
+                );
+              }
+            }
+            if (state.needsCreateMemo && !path.scope.hasBinding("createMemo")) {
+              imports.push(
+                t3.importDeclaration(
+                  [t3.importSpecifier(t3.identifier("createMemo"), t3.identifier("createMemo"))],
+                  t3.stringLiteral(reactiveModule)
+                )
+              );
+            }
+            if (state.needsControlFlowImport && state.controlFlowComponents.size > 0) {
+              const unbound = Array.from(state.controlFlowComponents).filter(
+                (name) => !path.scope.hasBinding(name)
+              );
+              const coreModule = state.libModule ?? "@fluixi/core";
+              const fromRouter = unbound.filter((n) => ROUTER_COMPONENTS2.has(n));
+              const fromCore = unbound.filter((n) => CORE_ONLY_CONTROL_FLOW.has(n));
+              const fromDom = unbound.filter(
+                (n) => !CORE_ONLY_CONTROL_FLOW.has(n) && !ROUTER_COMPONENTS2.has(n)
+              );
+              const declFor = (names, mod) => t3.importDeclaration(
+                names.map((name) => t3.importSpecifier(t3.identifier(name), t3.identifier(name))),
+                t3.stringLiteral(mod)
+              );
+              if (fromDom.length > 0) imports.push(declFor(fromDom, controlFlowModule));
+              if (fromCore.length > 0) imports.push(declFor(fromCore, coreModule));
+              if (fromRouter.length > 0) imports.push(declFor(fromRouter, routerModule));
+            }
+            const deferredDecls = [];
+            if (state.deferredComponents.size > 0) {
+              for (const [local, entry] of state.deferredComponents) {
+                if (path.scope.hasBinding(local)) continue;
+                deferredDecls.push(
+                  t3.variableDeclaration("const", [
+                    t3.variableDeclarator(
+                      t3.identifier(local),
+                      t3.callExpression(t3.identifier("deferred"), [
+                        t3.arrowFunctionExpression(
+                          [],
+                          t3.callExpression(t3.import(), [t3.stringLiteral(entry.module)])
+                        ),
+                        t3.objectExpression([
+                          t3.objectProperty(
+                            t3.identifier("strategy"),
+                            strategyLiteral(entry.strategy)
+                          ),
+                          t3.objectProperty(
+                            t3.identifier("export"),
+                            t3.stringLiteral(entry.export)
+                          )
+                        ])
+                      ])
+                    )
+                  ])
+                );
+              }
+              if (deferredDecls.length > 0 && !path.scope.hasBinding("deferred")) {
+                imports.push(
+                  t3.importDeclaration(
+                    [t3.importSpecifier(t3.identifier("deferred"), t3.identifier("deferred"))],
+                    t3.stringLiteral(state.libModule ?? "@fluixi/core")
+                  )
+                );
+              }
+            }
+            if (state.resolvedComponents.size > 0) {
+              const byModule = /* @__PURE__ */ new Map();
+              for (const [local, resolved] of state.resolvedComponents) {
+                if (path.scope.hasBinding(local)) continue;
+                const list = byModule.get(resolved.module) ?? [];
+                list.push({ local, exported: resolved.export });
+                byModule.set(resolved.module, list);
+              }
+              for (const [mod, entries] of byModule) {
+                imports.push(
+                  t3.importDeclaration(
+                    entries.map(
+                      ({ local, exported }) => exported === "default" ? t3.importDefaultSpecifier(t3.identifier(local)) : t3.importSpecifier(t3.identifier(local), t3.identifier(exported))
+                    ),
+                    t3.stringLiteral(mod)
+                  )
+                );
+              }
+            }
+            if (delegateEvents && state.delegatedEvents.size > 0) {
+              imports.push(
+                t3.importDeclaration(
+                  [
+                    t3.importSpecifier(
+                      t3.identifier("delegateEvents"),
+                      t3.identifier("delegateEvents")
+                    )
+                  ],
+                  t3.stringLiteral(signalModule)
+                )
+              );
+              const eventsArray = t3.arrayExpression(
+                Array.from(state.delegatedEvents).map(
+                  (event) => t3.stringLiteral(event)
+                )
+              );
+              const delegateCall = t3.expressionStatement(
+                t3.callExpression(t3.identifier("delegateEvents"), [eventsArray])
+              );
+              path.node.body.unshift(delegateCall);
+            }
+            if (deferredDecls.length > 0) {
+              path.node.body.unshift(...deferredDecls);
+            }
+            if (state.staticTemplates.size > 0) {
+              const decls = [];
+              for (const [key, name] of state.staticTemplates) {
+                const svg = key.startsWith("svg:");
+                const html = svg ? key.slice(4) : key;
+                decls.push(
+                  t3.variableDeclaration("const", [
+                    t3.variableDeclarator(
+                      t3.identifier(name),
+                      // Just the HTML. Parsing is deferred to `templateNode`, which
+                      // knows whether this is a server render, a hydration or a fresh
+                      // client render: a module-scope `createTemplate` would touch
+                      // `document` at import time and break SSR outright.
+                      t3.stringLiteral(html)
+                    )
+                  ])
+                );
+              }
+              path.node.body.unshift(...decls);
+            }
+          }
+          if (imports.length > 0) {
+            path.node.body.unshift(...dedupeImports(imports));
+          }
+        }
+      },
+      // Both JSX forms take the one path: build IR, run the imperative backend,
+      // splice the emitted code back in. It handles the whole subtree, so nothing
+      // below this node needs its own visitor.
+      JSXElement(path, state) {
+        state.hasJSX = true;
+        path.replaceWith(emitViaIR(path.node, state));
+      },
+      JSXFragment(path, state) {
+        state.hasJSX = true;
+        path.replaceWith(emitViaIR(path.node, state));
+      },
+      TaggedTemplateExpression(path, state) {
+        if (compileLit && t3.isIdentifier(path.node.tag) && (path.node.tag.name === litTag || path.node.tag.name === "svg")) {
+          path.replaceWith(emitLitViaIR(path.node, state));
+        }
+      }
+    }
+  };
+});
+function nestedHook(state) {
+  return (ir) => {
+    resolveComponentSources(ir, {
+      resolver: state.componentResolver,
+      modules: {
+        controlFlowModule: state.controlFlowModule,
+        coreModule: state.libModule,
+        routerModule: state.routerModule
+      },
+      strategyFor: (node) => node.load
+    });
+    collapseStrategies(ir);
+    collectRuntimeNeeds(ir, state);
+  };
+}
+function strategyLiteral(strategy) {
+  const props = [
+    t3.objectProperty(t3.identifier("kind"), t3.stringLiteral(strategy.kind))
+  ];
+  if (strategy.kind === "visible" && strategy.rootMargin) {
+    props.push(t3.objectProperty(t3.identifier("rootMargin"), t3.stringLiteral(strategy.rootMargin)));
+  }
+  if (strategy.kind === "interaction") {
+    props.push(
+      t3.objectProperty(
+        t3.identifier("events"),
+        t3.arrayExpression(strategy.events.map((e) => t3.stringLiteral(e)))
+      )
+    );
+  }
+  if (strategy.kind === "media") {
+    props.push(t3.objectProperty(t3.identifier("query"), t3.stringLiteral(strategy.query)));
+  }
+  return t3.objectExpression(props);
+}
+function adoptTemplates(code, templates, state) {
+  if (!templates || templates.length === 0) return code;
+  const rename = /* @__PURE__ */ new Map();
+  for (const tpl of templates) {
+    const key = `${tpl.svg ? "svg:" : ""}${tpl.html}`;
+    let name = state.staticTemplates.get(key);
+    if (!name) {
+      name = `_tmpl$${state.staticTemplates.size}`;
+      state.staticTemplates.set(key, name);
+    }
+    rename.set(tpl.id, name);
+  }
+  return code.replace(/_tmpl\$\d+/g, (id) => rename.get(id) ?? id);
+}
+function emitViaIR(node, state) {
+  const used = /* @__PURE__ */ new Set();
+  const ir = buildIR(node, used, nestedHook(state));
+  resolveComponentSources(ir, {
+    resolver: state.componentResolver,
+    modules: {
+      controlFlowModule: state.controlFlowModule,
+      coreModule: state.libModule,
+      routerModule: state.routerModule
+    },
+    strategyFor: (n) => n.load
+  });
+  collapseStrategies(ir);
+  const { code, imports, templates } = imperativeBackend.emit(ir, { templateClone: state.templateClone, partialTemplates: state.partialTemplates });
+  for (const s of imports) used.add(s);
+  for (const s of used) state.irImports.add(s);
+  collectRuntimeNeeds(ir, state);
+  const adopted = adoptTemplates(code, templates, state);
+  return template2.expression(adopted, { placeholderPattern: false, plugins: ["typescript"] })();
+}
+function dedupeImports(imports) {
+  const byModule = /* @__PURE__ */ new Map();
+  const out = [];
+  for (const decl of imports) {
+    const source = decl.source.value;
+    const allNamed = decl.specifiers.every((s) => t3.isImportSpecifier(s));
+    if (!allNamed) {
+      out.push(decl);
+      continue;
+    }
+    const existing = byModule.get(source);
+    if (!existing) {
+      const names = new Set(
+        decl.specifiers.map((s) => s.local.name)
+      );
+      byModule.set(source, { decl, names });
+      out.push(decl);
+      continue;
+    }
+    for (const s of decl.specifiers) {
+      if (!existing.names.has(s.local.name)) {
+        existing.names.add(s.local.name);
+        existing.decl.specifiers.push(s);
+      }
+    }
+  }
+  return out;
+}
+function emitLitViaIR(node, state) {
+  const used = /* @__PURE__ */ new Set();
+  const svg = t3.isIdentifier(node.tag) && node.tag.name === "svg";
+  const ir = buildIRFromLit(node, used, { svg, onNested: nestedHook(state) });
+  resolveComponentSources(ir, {
+    resolver: state.componentResolver,
+    modules: {
+      controlFlowModule: state.controlFlowModule,
+      coreModule: state.libModule,
+      routerModule: state.routerModule
+    },
+    strategyFor: (node2) => node2.load
+  });
+  collapseStrategies(ir);
+  const { code, imports, templates } = imperativeBackend.emit(ir, { templateClone: state.templateClone, partialTemplates: state.partialTemplates });
+  for (const s of imports) used.add(s);
+  for (const s of used) state.irImports.add(s);
+  collectRuntimeNeeds(ir, state);
+  state.hasLitIR = true;
+  const expression = template2.expression(adoptTemplates(code, templates, state), {
+    placeholderPattern: false,
+    plugins: ["typescript"]
+  })();
+  inheritLocation(expression, node);
+  return expression;
+}
+function inheritLocation(target, source) {
+  if (!source.loc) return;
+  const seen = /* @__PURE__ */ new Set();
+  const walk = (node) => {
+    if (seen.has(node)) return;
+    seen.add(node);
+    if (!node.loc) {
+      node.loc = source.loc;
+      node.start = source.start;
+      node.end = source.end;
+    }
+    for (const key of t3.VISITOR_KEYS[node.type] ?? []) {
+      const child = node[key];
+      if (Array.isArray(child)) {
+        for (const c of child) if (c && typeof c === "object" && "type" in c) walk(c);
+      } else if (child && typeof child === "object" && "type" in child) {
+        walk(child);
+      }
+    }
+  };
+  walk(target);
+}
+function collectRuntimeNeeds(node, state) {
+  if (node.kind === "component" && node.source) {
+    if (node.source.origin === "builtin") {
+      state.controlFlowComponents.add(node.name);
+      state.needsControlFlowImport = true;
+    } else if (isDeferred(node.source.loading) && !state.resolvedComponents.has(node.name)) {
+      state.deferredComponents.set(node.name, {
+        module: node.source.module,
+        export: node.source.export,
+        strategy: node.source.loading
+      });
+    } else {
+      state.deferredComponents.delete(node.name);
+      state.resolvedComponents.set(node.name, {
+        module: node.source.module,
+        export: node.source.export
+      });
+    }
+  }
+  if (node.kind === "element" || node.kind === "component" || node.kind === "control") {
+    if ("props" in node) {
+      for (const p of node.props) {
+        if (p.kind === "event" && p.event?.delegated) state.delegatedEvents.add(p.event.name);
+      }
+    }
+  }
+  if ("children" in node && node.children) {
+    for (const c of node.children) collectRuntimeNeeds(c, state);
+  }
+}
+
+// src/frontend/babel/index.ts
+var babelPluginReactiveJSX = plugin_default;
+function createPlugin(options) {
+  return [plugin_default, options];
+}
+function createPreset(options = {}) {
+  return {
+    plugins: [
+      [
+        plugin_default,
+        {
+          runtime: "automatic",
+          importSource: "@fluixi/jsx",
+          development: false,
+          detectReactivity: true,
+          useLitHTML: true,
+          hoistStatics: true,
+          delegateEvents: true,
+          optimizeControlFlow: true,
+          sourceMaps: true,
+          ...options
+        }
+      ]
+    ]
+  };
+}
+var presets = {
+  production: createPreset({
+    development: false,
+    hoistStatics: true,
+    delegateEvents: true,
+    optimizeControlFlow: true
+  }),
+  development: createPreset({
+    development: true,
+    hoistStatics: false,
+    sourceMaps: true
+  }),
+  minimal: createPreset({
+    detectReactivity: false,
+    useLitHTML: false,
+    hoistStatics: false,
+    delegateEvents: false,
+    optimizeControlFlow: false
+  })
+};
+export {
+  babelPluginReactiveJSX,
+  createPlugin,
+  createPreset,
+  plugin_default as default,
+  presets
+};