@fluixi/compiler 1.0.0-alpha.100

package/dist/frontend/babel/build-ir.d.cts

@@ -0,0 +1,35 @@
+/**
+ * Babel front-end: build the host-agnostic IR from a JSX AST node.
+ *
+ * This is the parsing-end half of the pipeline (AST -> IR); the imperative
+ * backend's emit() is the codegen half (IR -> code). Keeping the JSX analysis
+ * here and the code generation in the backend is what lets a future swc
+ * front-end reuse the exact same backend.
+ *
+ * JSX can appear nested inside arbitrary expressions (render-props, ternaries,
+ * `fallback={<p/>}`, `arr.map(x => <li/>)`, `() => cond && <div/>`, …). The IR
+ * models prop/child *expressions* as code strings, so any JSX inside such an
+ * expression is recursively compiled (build-ir -> emit) and spliced back in,
+ * with the runtime symbols it uses collected into `used` for import injection.
+ */
+import { types as t } from '@babel/core';
+import type { IRNode } from '../../ir/nodes.cjs';
+/** Stringify an expression, compiling any JSX nested inside it first. */
+export declare function genExpr(node: t.Expression, used: Set<string>, onNested?: NestedHook): string;
+/**
+ * Called with the IR of JSX (or a template) found inside an expression.
+ *
+ * That IR is compiled and thrown away during the walk, so anything the module
+ * needs because of it: a component import, a delegated event, has to be taken
+ * off it here or it is lost. Without this, `{(b) => <Input/>}` emitted a
+ * reference to `Input` that nothing imported.
+ */
+export type NestedHook = (ir: IRNode) => void;
+export declare const SVG_TAGS: Set<string>;
+export declare function isReactiveExpr(node: t.Expression): boolean;
+/**
+ * Build IR from a JSX node. The builder is shared (lower/jsx.ts); what this
+ * front-end supplies is how an expression becomes source, `genExpr`, which also
+ * compiles any JSX or `` html`` `` nested inside it.
+ */
+export declare function buildIR(node: t.JSXElement | t.JSXFragment, used?: Set<string>, onNested?: NestedHook): IRNode;

package/dist/frontend/babel/build-ir.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Babel front-end: build the host-agnostic IR from a JSX AST node.
+ *
+ * This is the parsing-end half of the pipeline (AST -> IR); the imperative
+ * backend's emit() is the codegen half (IR -> code). Keeping the JSX analysis
+ * here and the code generation in the backend is what lets a future swc
+ * front-end reuse the exact same backend.
+ *
+ * JSX can appear nested inside arbitrary expressions (render-props, ternaries,
+ * `fallback={<p/>}`, `arr.map(x => <li/>)`, `() => cond && <div/>`, …). The IR
+ * models prop/child *expressions* as code strings, so any JSX inside such an
+ * expression is recursively compiled (build-ir -> emit) and spliced back in,
+ * with the runtime symbols it uses collected into `used` for import injection.
+ */
+import { types as t } from '@babel/core';
+import type { IRNode } from '../../ir/nodes.js';
+/** Stringify an expression, compiling any JSX nested inside it first. */
+export declare function genExpr(node: t.Expression, used: Set<string>, onNested?: NestedHook): string;
+/**
+ * Called with the IR of JSX (or a template) found inside an expression.
+ *
+ * That IR is compiled and thrown away during the walk, so anything the module
+ * needs because of it: a component import, a delegated event, has to be taken
+ * off it here or it is lost. Without this, `{(b) => <Input/>}` emitted a
+ * reference to `Input` that nothing imported.
+ */
+export type NestedHook = (ir: IRNode) => void;
+export declare const SVG_TAGS: Set<string>;
+export declare function isReactiveExpr(node: t.Expression): boolean;
+/**
+ * Build IR from a JSX node. The builder is shared (lower/jsx.ts); what this
+ * front-end supplies is how an expression becomes source, `genExpr`, which also
+ * compiles any JSX or `` html`` `` nested inside it.
+ */
+export declare function buildIR(node: t.JSXElement | t.JSXFragment, used?: Set<string>, onNested?: NestedHook): IRNode;
+//# sourceMappingURL=build-ir.d.ts.map

package/dist/frontend/babel/build-ir.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-ir.d.ts","sourceRoot":"","sources":["../../../src/frontend/babel/build-ir.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,KAAK,IAAI,CAAC,EAAsB,MAAM,aAAa,CAAC;AAI7D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAwDhD,yEAAyE;AACzE,wBAAgB,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAE5F;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;AAE9C,eAAO,MAAM,QAAQ,aAGnB,CAAC;AA2BH,wBAAgB,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,UAAU,GAAG,OAAO,CAE1D;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CACrB,IAAI,EAAE,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,WAAW,EAClC,IAAI,GAAE,GAAG,CAAC,MAAM,CAAa,EAC7B,QAAQ,CAAC,EAAE,UAAU,GACpB,MAAM,CAWR"}

package/dist/frontend/babel/build-ir.js

@@ -0,0 +1,124 @@
+/**
+ * Babel front-end: build the host-agnostic IR from a JSX AST node.
+ *
+ * This is the parsing-end half of the pipeline (AST -> IR); the imperative
+ * backend's emit() is the codegen half (IR -> code). Keeping the JSX analysis
+ * here and the code generation in the backend is what lets a future swc
+ * front-end reuse the exact same backend.
+ *
+ * JSX can appear nested inside arbitrary expressions (render-props, ternaries,
+ * `fallback={<p/>}`, `arr.map(x => <li/>)`, `() => cond && <div/>`, …). The IR
+ * models prop/child *expressions* as code strings, so any JSX inside such an
+ * expression is recursively compiled (build-ir -> emit) and spliced back in,
+ * with the runtime symbols it uses collected into `used` for import injection.
+ */
+import { types as t, traverse, template } from '@babel/core';
+import _generate from '@babel/generator';
+import { imperativeBackend, inlineTemplates } from '../../codegen/backends/imperative.js';
+import { buildIRFromLit } from './build-ir-lit.js';
+import { buildJsxIR } from '../../lower/jsx.js';
+import { isReactiveShape } from '../../analyze/reactive-expr.js';
+import { shapeOf } from '../../analyze/expr-shape.js';
+// @babel/generator's ESM/CJS interop default (its types aren't callable under nodenext).
+const generate = _generate.default ?? _generate;
+/** Stringify an AST node back to source. */
+function gen(node) {
+    return generate(node, { concise: true }).code;
+}
+/**
+ * Replace every JSX node nested inside `node` with the imperative code emitted
+ * for it (build-ir -> emit), so the resulting expression is plain JS. Runtime
+ * symbols used by the nested code are added to `used`.
+ */
+function transformNestedJSX(node, used, onNested) {
+    const clone = t.cloneNode(node, true);
+    const file = t.file(t.program([t.expressionStatement(clone)]));
+    let changed = false;
+    const emitInto = (path, code, imports) => {
+        for (const s of imports)
+            used.add(s);
+        // parse as TS: a hole/arrow param may carry a type annotation ((x: T) => …);
+        // preset-typescript strips it downstream, but the reparse must accept it.
+        path.replaceWith(template.expression(code, { placeholderPattern: false, plugins: ['typescript'] })());
+        path.skip(); // build-ir already handled this subtree (incl. anything nested)
+        changed = true;
+    };
+    traverse(file, {
+        'JSXElement|JSXFragment'(path) {
+            const jsx = path.node;
+            // Resolve before emitting: the emitted call refers to the component by name,
+            // and whoever injects the import has to have seen it.
+            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 (!t.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;
+}
+/** Stringify an expression, compiling any JSX nested inside it first. */
+export function genExpr(node, used, onNested) {
+    return gen(transformNestedJSX(node, used, onNested));
+}
+export const SVG_TAGS = new Set([
+    'svg', 'path', 'circle', 'rect', 'line', 'polygon', 'polyline',
+    'ellipse', 'g', 'defs', 'clipPath', 'text',
+]);
+const EVENT_RE = /^on[A-Z]/;
+const DELEGATED = new Set([
+    'click', 'dblclick', 'input', 'change', 'submit', 'focus', 'blur',
+    'keydown', 'keyup', 'keypress', 'mousedown', 'mouseup',
+]);
+/** A JSX tag is a component when its name is capitalized / a member / namespaced. */
+function tagInfo(name) {
+    if (t.isJSXIdentifier(name)) {
+        const isComponent = name.name[0] !== name.name[0].toLowerCase();
+        return { tag: name.name, component: isComponent };
+    }
+    if (t.isJSXMemberExpression(name))
+        return { tag: gen(name), component: true };
+    if (t.isJSXNamespacedName(name)) {
+        return { tag: `${name.namespace.name}:${name.name.name}`, component: false };
+    }
+    return { tag: 'div', component: false };
+}
+function attrName(name) {
+    if (t.isJSXIdentifier(name))
+        return name.name === 'class' ? 'className' : name.name;
+    if (t.isJSXNamespacedName(name))
+        return `${name.namespace.name}:${name.name.name}`;
+    return 'unknown';
+}
+export function isReactiveExpr(node) {
+    return isReactiveShape(shapeOf(node));
+}
+/**
+ * Build IR from a JSX node. The builder is shared (lower/jsx.ts); what this
+ * front-end supplies is how an expression becomes source, `genExpr`, which also
+ * compiles any JSX or `` html`` `` nested inside it.
+ */
+export function buildIR(node, used = 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'
+            ? gen(n)
+            : genExpr(n, used, onNested),
+        used,
+    });
+    return ir;
+}