@fluixi/compiler 1.0.0-alpha.82 → 1.0.0-alpha.84

package/dist/transform/templates.d.cts

@@ -0,0 +1,69 @@
+import MagicString from 'magic-string';
+import { type CompileTemplateOptions } from '../lower/compile-template.cjs';
+import type { IRLoadStrategy } from '../ir/nodes.cjs';
+import { type PropsDiagnostic } from './props.cjs';
+import { type IntrinsicDiagnostic } from './intrinsics.cjs';
+export interface TransformOptions extends CompileTemplateOptions {
+    /**
+     * Which authoring syntaxes to compile. Both lower to the same IR, so this is
+     * about which source forms are touched, not about output.
+     * @default 'both'
+     */
+    format?: 'jsx' | 'lit' | 'both';
+    /** Tag marking a template for compilation. @default 'html' */
+    litTag?: string;
+    /** Module the emitted runtime symbols are imported from. @default '@fluixi/dom' */
+    runtimeModule?: string;
+    /** Where reactive primitives come from. @default '@fluixi/reactive/signal' */
+    reactiveModule?: string;
+    /**
+     * Rewrite a component's destructured props into property reads, so
+     * `function Card({ title })` keeps updating instead of reading `title` once.
+     * The edits go into the same string as the template edits, so the map still points
+     * at what the author wrote.
+     * @default true
+     */
+    propsDestructure?: boolean;
+    /**
+     * Record where each reactive primitive was created, so the devtools graph can say where a
+     * node comes from. Development tooling: leave it off for production, which then carries
+     * none of it.
+     * @default false
+     */
+    sourceLocations?: boolean;
+    /**
+     * Trim this prefix off the file name a source mark records, so a location reads
+     * `src/app.tsx:5:16` rather than an absolute path that means nothing to whoever opens it.
+     */
+    sourceRoot?: string;
+    /**
+     * Compile the `$` reactive intrinsics — `$signal`, `$memo`, `$effect`, `$store` — into
+     * the runtime calls they stand for, importing what they need.
+     * @default true
+     */
+    intrinsics?: boolean;
+}
+export interface UnresolvedDiagnostic {
+    /** The tag nothing supplies. */
+    name: string;
+    message: string;
+}
+export interface LoadDiagnostic {
+    /** The component the directive was written on. */
+    name: string;
+    strategy: IRLoadStrategy;
+    message: string;
+}
+export interface TransformResult {
+    code: string;
+    map: ReturnType<MagicString['generateMap']>;
+    /** Props patterns the rewrite refused, when `propsDestructure` is on. */
+    propsDiagnostics?: PropsDiagnostic[];
+    /** `$` names the module bound itself, so the intrinsic did not fire. */
+    intrinsicDiagnostics?: IntrinsicDiagnostic[];
+    /** `load:` directives that could not take effect, and why. */
+    loadDiagnostics?: LoadDiagnostic[];
+    /** Capitalised tags nothing supplies — they compile to an undefined reference. */
+    unresolvedDiagnostics?: UnresolvedDiagnostic[];
+}
+export declare function transformTemplates(code: string, id: string, options?: TransformOptions): TransformResult | null;

package/dist/transform/templates.d.ts

@@ -24,6 +24,18 @@ export interface TransformOptions extends CompileTemplateOptions {
      * @default true
      */
     propsDestructure?: boolean;
+    /**
+     * Record where each reactive primitive was created, so the devtools graph can say where a
+     * node comes from. Development tooling: leave it off for production, which then carries
+     * none of it.
+     * @default false
+     */
+    sourceLocations?: boolean;
+    /**
+     * Trim this prefix off the file name a source mark records, so a location reads
+     * `src/app.tsx:5:16` rather than an absolute path that means nothing to whoever opens it.
+     */
+    sourceRoot?: string;
     /**
      * Compile the `$` reactive intrinsics — `$signal`, `$memo`, `$effect`, `$store` — into
      * the runtime calls they stand for, importing what they need.
@@ -54,9 +66,5 @@ export interface TransformResult {
     /** Capitalised tags nothing supplies — they compile to an undefined reference. */
     unresolvedDiagnostics?: UnresolvedDiagnostic[];
 }
-/**
- * Compile every template in `code`. Returns null when the module has none, so a
- * bundler can skip the file untouched.
- */
 export declare function transformTemplates(code: string, id: string, options?: TransformOptions): TransformResult | null;
 //# sourceMappingURL=templates.d.ts.map

package/dist/transform/templates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../src/transform/templates.ts"],"names":[],"mappings":"AASA,OAAO,WAAW,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAiB,KAAK,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAG1F,OAAO,KAAK,EAAqB,cAAc,EAAU,MAAM,gBAAgB,CAAC;AAWhF,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AACrE,OAAO,EAA2C,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAmBpG,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAChC,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mFAAmF;IACnF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,cAAc,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5C,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,wEAAwE;IACxE,oBAAoB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7C,8DAA8D;IAC9D,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,kFAAkF;IAClF,qBAAqB,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAChD;AAwQD;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,EACV,OAAO,GAAE,gBAAqB,GAC7B,eAAe,GAAG,IAAI,CAyLxB"}
+{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../src/transform/templates.ts"],"names":[],"mappings":"AASA,OAAO,WAAW,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAiB,KAAK,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAG1F,OAAO,KAAK,EAAqB,cAAc,EAAU,MAAM,gBAAgB,CAAC;AAWhF,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AACrE,OAAO,EAA2C,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAoBpG,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAChC,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mFAAmF;IACnF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,cAAc,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5C,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,wEAAwE;IACxE,oBAAoB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7C,8DAA8D;IAC9D,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,kFAAkF;IAClF,qBAAqB,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAChD;AAwTD,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,EACV,OAAO,GAAE,gBAAqB,GAC7B,eAAe,GAAG,IAAI,CAiNxB"}

package/dist/transform/templates.js

@@ -21,6 +21,7 @@ import { imperativeBackend } from '../codegen/backends/imperative.js';
 import { moduleBindings } from './bindings.js';
 import { collectPropsEdits } from './props.js';
 import { collectIntrinsicEdits, intrinsicImports } from './intrinsics.js';
+import { collectSourceEdits, mayHaveReactiveCall } from './source-locations.js';
 import { mayHaveIntrinsic } from '../analyze/intrinsics.js';
 import { declaredNames } from '../analyze/reactive-bindings.js';
 import { DOM_CONTROL_FLOW, CORE_CONTROL_FLOW, ROUTER_COMPONENTS } from '../resolve/builtins.js';
@@ -73,7 +74,15 @@ function isTemplateTag(node, litTag) {
 }
 /** The edits in `list` that no other edit in `list` contains. */
 function outermost(list) {
-    return list.filter((e) => !list.some((o) => o !== e && o.start <= e.start && o.end >= e.end && o.end - o.start > e.end - e.start));
+    return list.filter((e) => !list.some((o) => o !== e &&
+        o.start <= e.start &&
+        o.end >= e.end &&
+        o.end - o.start > e.end - e.start &&
+        // An insertion at either edge of the container sits beside it, not inside it, so
+        // it is not something the container's code already folded in. A statement can
+        // start where its callee starts (`$effect(…)`) and a declarator can end where its
+        // JSX ends (`const Row = () => <b/>`).
+        !(e.start === e.end && (e.start === o.start || e.start === o.end))));
 }
 /**
  * Apply edits to a slice of the source.
@@ -91,10 +100,14 @@ function slice(code, start, end, edits) {
     return out;
 }
 /** Describe one `${…}` for the lowering, substituting any template already compiled inside it. */
-function bindHole(code, expr, edits) {
+function bindHole(code, expr, edits, keepPosition = false) {
+    const at = keepPosition ? expr.loc?.start : undefined;
     const hole = {
         code: slice(code, expr.start, expr.end, edits),
         reactive: isReactiveShape(shapeOf(expr)),
+        // Where the `${…}` is, so a binding made from it can say so. The source map cannot:
+        // the whole template is one overwrite. Only when source locations were asked for.
+        ...(at ? { at: { line: at.line, column: at.column } } : {}),
     };
     if (expr.type === 'ArrowFunctionExpression' && expr.body?.type !== 'BlockStatement') {
         hole.arrow = {
@@ -232,6 +245,30 @@ function strategyLiteral(s) {
         parts.push(`query: ${JSON.stringify(s.query)}`);
     return `{ ${parts.join(', ')} }`;
 }
+/**
+ * Offset → line and column, built once per module.
+ *
+ * The parser reports offsets into this file, since the pieces it is given carry the
+ * positions Babel recorded for the quasis.
+ */
+function positionsIn(code) {
+    const starts = [0];
+    for (let i = 0; i < code.length; i++)
+        if (code.charCodeAt(i) === 10)
+            starts.push(i + 1);
+    return (offset) => {
+        let low = 0;
+        let high = starts.length - 1;
+        while (low < high) {
+            const mid = (low + high + 1) >> 1;
+            if (starts[mid] <= offset)
+                low = mid;
+            else
+                high = mid - 1;
+        }
+        return { line: low + 1, column: offset - starts[low] };
+    };
+}
 /** Quasis and holes as position-carrying parser pieces. */
 function toPieces(node) {
     const pieces = [];
@@ -248,6 +285,13 @@ function toPieces(node) {
  * Compile every template in `code`. Returns null when the module has none, so a
  * bundler can skip the file untouched.
  */
+/** No path module here: this runs in the browser as well as in a bundler. */
+function relativeToRoot(id, root) {
+    if (!root)
+        return id;
+    const base = root.endsWith('/') ? root : `${root}/`;
+    return id.startsWith(base) ? id.slice(base.length) : id;
+}
 export function transformTemplates(code, id, options = {}) {
     const litTag = options.litTag ?? 'html';
     const format = options.format ?? 'both';
@@ -257,7 +301,13 @@ export function transformTemplates(code, id, options = {}) {
     // A module can be nothing but `$signal` calls, so the skip check has to look for those
     // too or the file is never parsed.
     const wantsIntrinsics = options.intrinsics !== false && mayHaveIntrinsic(code);
-    if (!mayHaveTemplate && !(wantsJsx && code.includes('<')) && !wantsIntrinsics)
+    // A module can be nothing but reactive calls and still need marking, so the skip check
+    // has to look for those too when source locations are wanted.
+    const wantsSources = options.sourceLocations === true && mayHaveReactiveCall(code);
+    // What a mark calls this file. The declaration marks and the usage marks are read back by
+    // name, so both passes have to spell it the same way.
+    const sourceName = relativeToRoot(id, options.sourceRoot);
+    if (!mayHaveTemplate && !(wantsJsx && code.includes('<')) && !wantsIntrinsics && !wantsSources)
         return null;
     const ast = parse(code, {
         sourceType: 'module',
@@ -281,10 +331,18 @@ export function transformTemplates(code, id, options = {}) {
     const intrinsics = options.intrinsics === false
         ? { edits: [], diagnostics: [], imports: new Map() }
         : collectIntrinsicEdits(ast.program);
+    // Where each reactive primitive was created, for the devtools graph. Off unless asked
+    // for: it is development tooling, and production should carry none of it.
+    // `wantsSources` only decides whether a module with nothing else in it is worth parsing.
+    // Past that point the ast exists, and a component declaration is worth marking too.
+    const sources = options.sourceLocations === true
+        ? collectSourceEdits(ast.program, sourceName)
+        : { edits: [], marked: 0 };
     // Nothing to emit still returns a result when there's something to say — a shadowed
     // intrinsic is a diagnostic even though the code comes back untouched.
     const silent = found.length === 0 &&
         props.edits.length === 0 &&
+        sources.edits.length === 0 &&
         intrinsics.edits.length === 0 &&
         intrinsics.diagnostics.length === 0 &&
         props.diagnostics.length === 0;
@@ -302,20 +360,26 @@ export function transformTemplates(code, id, options = {}) {
         declared: declaredNames(ast.program),
     };
     const hoisted = new Map();
-    const edits = [...props.edits, ...intrinsics.edits];
+    const edits = [...props.edits, ...intrinsics.edits, ...sources.edits];
     for (const node of found) {
         // A root inside another root's hole is emitted without partial templates,
         // matching what the plugin does for nested emits. Marker layout has to agree
         // between server and client, so this is not the place to change it.
         const nested = found.some((o) => o !== node && o.start <= node.start && o.end >= node.end && o.end - o.start > node.end - node.start);
         if (isJsx(node)) {
-            edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, nested, used, needs, hoisted, options) });
+            edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceName) });
             continue;
         }
-        const holes = node.quasi.expressions.map((e) => bindHole(code, e, edits));
+        const holes = node.quasi.expressions.map((e) => bindHole(code, e, edits, options.sourceLocations === true));
         const result = compilePieces(toPieces(node), holes, {
             ...options,
             hoistTemplates: true,
+            // A tag inside a template gets the same mark a JSX tag does. Without one, the nodes it
+            // makes are the only ones in the module carrying no mark, and they take whichever was
+            // left behind by the last declaration that did.
+            ...(options.sourceLocations === true
+                ? { sourceFile: sourceName, positionAt: positionsIn(code) }
+                : {}),
             // Same defaults as the plugin, so moving a build over is not a rendering change.
             templateClone: options.templateClone ?? true,
             partialTemplates: nested ? false : options.partialTemplates ?? true,
@@ -417,10 +481,11 @@ export function transformTemplates(code, id, options = {}) {
  * with anything already compiled inside them folded in, so nested JSX and nested
  * `` html`` `` both come along for free.
  */
-function compileJsx(code, node, edits, nested, used, needs, hoisted, options) {
+function compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceFile) {
     const ir = buildJsxIR(node, {
         code: (n) => slice(code, n.start, n.end, edits),
         used,
+        ...(options.sourceLocations === true && sourceFile ? { sourceFile } : {}),
     });
     analyzeStatic(ir);
     const report = resolveComponentSources(ir, {