@fluixi/compiler 1.0.0-alpha.93 → 1.0.0-alpha.95

package/dist/lower/jsx.js

@@ -4,6 +4,7 @@ import { shapeOf } from '../analyze/expr-shape.js';
 import { analyzeStatic } from '../optimize/analyze-static.js';
 import { cleanTemplateText } from './text.js';
 import { paren } from '../analyze/paren.js';
+import { markHole } from '../transform/source-locations.js';
 import { imperativeBackend, inlineTemplates } from '../codegen/backends/imperative.js';
 export const SVG_TAGS = new Set([
     'svg', 'path', 'circle', 'rect', 'line', 'polygon', 'polyline',
@@ -132,9 +133,18 @@ function attrExprCode(attr, ctx) {
     }
     return null;
 }
-function buildProps(attrs, ctx) {
+/**
+ * `element`: the tag is a DOM element. Only there are class:/style: and a style object taken
+ * apart; a component gets its props as written.
+ */
+function buildProps(attrs, ctx, element = false) {
     const props = [];
     const usePairs = []; // use:name directives collapse into one `use` prop
+    // class:x and style:x collapse into one classList / style object, as in templates; each
+    // value that moves is an accessor in it, so the runtime updates that one key.
+    const classEntries = [];
+    const styleEntries = [];
+    let styleAt;
     for (const a of attrs) {
         if (a.type === 'JSXSpreadAttribute') {
             props.push({ name: '', kind: 'spread', expr: ctx.code(a.argument) });
@@ -155,6 +165,33 @@ function buildProps(attrs, ctx) {
             usePairs.push(opts != null ? `[${dir}, () => ${paren(opts, 'arrowBody')}]` : `[${dir}]`);
             continue;
         }
+        if (element && (ns === 'class' || ns === 'style')) {
+            const key = JSON.stringify(a.name.name.name);
+            const v = a.value;
+            let value;
+            if (v == null)
+                value = 'true';
+            else if (isString(v))
+                value = JSON.stringify(literalOf(v));
+            else if (v.type === 'JSXExpressionContainer' && v.expression?.type !== 'JSXEmptyExpression') {
+                value = keyValue(v.expression, ctx);
+                if (ns === 'style')
+                    styleAt ??= posOf(v.expression, ctx);
+            }
+            else
+                continue;
+            (ns === 'class' ? classEntries : styleEntries).push(`${key}: ${value}`);
+            continue;
+        }
+        // style={{ … }}: one entry per property, so `--gap` moving does not rewrite `margin`.
+        if (element && a.name.type === 'JSXIdentifier' && a.name.name === 'style' && a.value?.type === 'JSXExpressionContainer') {
+            const entries = objectEntries(a.value.expression, ctx);
+            if (entries) {
+                styleEntries.unshift(...entries);
+                styleAt = posOf(a.value.expression, ctx);
+                continue;
+            }
+        }
         // oncapture:name -> native on:name with { capture: true }
         if (ns === 'oncapture') {
             const evt = a.name.name.name.toLowerCase();
@@ -164,10 +201,51 @@ function buildProps(attrs, ctx) {
         }
         props.push(buildAttr(a, ctx));
     }
+    if (classEntries.length > 0)
+        props.push({ name: 'classList', kind: 'attr', expr: `{ ${classEntries.join(', ')} }`, reactive: false });
+    if (styleEntries.length > 0) {
+        const entries = `{ ${styleEntries.join(', ')} }`;
+        // A style the object form could not take apart (a string, a variable) goes first, and
+        // the keys after it: the runtime applies an array in order.
+        const base = props.findIndex((p) => p.name === 'style' && p.kind === 'attr');
+        if (base === -1)
+            props.push({ name: 'style', kind: 'attr', expr: entries, reactive: false, ...(styleAt ? { at: styleAt } : {}) });
+        else {
+            const prop = props[base];
+            const value = prop.literal !== undefined ? JSON.stringify(prop.literal) : prop.reactive ? `() => ${paren(prop.expr, 'arrowBody')}` : prop.expr;
+            props[base] = { name: 'style', kind: 'attr', expr: `[${value}, ${entries}]`, reactive: false, ...(prop.at ? { at: prop.at } : {}) };
+        }
+    }
     if (usePairs.length > 0)
         props.push({ name: 'use', kind: 'attr', expr: `[${usePairs.join(', ')}]` });
     return props;
 }
+/** A value inside a classList / style object: an accessor when it moves. */
+function keyValue(expr, ctx) {
+    const code = ctx.code(expr);
+    if (!isReactive(expr))
+        return code;
+    const accessor = `() => ${paren(code, 'arrowBody')}`;
+    const at = posOf(expr, ctx);
+    return at ? markHole(accessor, at.line, at.column) : accessor;
+}
+/** `{ a: x, '--b': y }` as object entries; null for anything with a spread or a method. */
+function objectEntries(expr, ctx) {
+    if (expr?.type !== 'ObjectExpression')
+        return null;
+    const entries = [];
+    for (const p of expr.properties) {
+        if (p.type !== 'ObjectProperty')
+            return null;
+        const key = p.computed
+            ? `[${ctx.code(p.key)}]`
+            : p.key.type === 'Identifier'
+                ? JSON.stringify(p.key.name)
+                : JSON.stringify(String(p.key.value));
+        entries.push(`${key}: ${keyValue(p.value, ctx)}`);
+    }
+    return entries;
+}
 function buildChildren(children, ctx) {
     const out = [];
     for (let i = 0; i < children.length; i++) {
@@ -203,6 +281,9 @@ function buildChildren(children, ctx) {
             }
         }
         else if (child.type === 'JSXElement' || child.type === 'JSXFragment') {
+            // A `<style>` the compiler took out leaves no child behind, not even an empty insert.
+            if (ctx.dropStyles?.has(child.start))
+                continue;
             out.push(buildNode(child, ctx));
         }
         else if (child.type === 'JSXSpreadChild') {
@@ -295,7 +376,13 @@ function buildElement(node, ctx, handled) {
     const at = ctx.sourceFile && node.loc?.start
         ? { file: ctx.sourceFile, line: node.loc.start.line, column: node.loc.start.column }
         : undefined;
-    return { kind: 'element', tag, svg: SVG_TAGS.has(tag), props: buildProps(attributes, ctx), children, static: false, ...(at ? { at } : {}) };
+    const props = buildProps(attributes, ctx, true);
+    // A scoped style's mark: a static attribute, so it is part of the template itself and
+    // every render carries it, on the client, from the server and through hydration.
+    const scope = ctx.scopes?.find((s) => node.start >= s.start && node.end <= s.end);
+    if (scope)
+        props.unshift({ name: 'data-fx-s', kind: 'attr', literal: scope.value });
+    return { kind: 'element', tag, svg: SVG_TAGS.has(tag), props, children, static: false, ...(at ? { at } : {}) };
 }
 function buildNode(node, ctx) {
     if (node.type === 'JSXFragment') {
@@ -303,6 +390,9 @@ function buildNode(node, ctx) {
     }
     if (directive(node, 'if'))
         return buildIf(node, null, ctx);
+    // Its CSS went to the host; nothing of the element is rendered.
+    if (ctx.dropStyles?.has(node.start))
+        return { kind: 'fragment', children: [] };
     const { tag, component } = tagInfo(node.openingElement.name, ctx);
     if (!component)
         return buildElement(node, ctx, []);

package/dist/lower/jsx.mjs

@@ -305,6 +305,50 @@ function paren(code, position) {
   return topLevelComma(src) === false ? code : `(${code})`;
 }
 
+// src/analyze/intrinsics.ts
+var REACTIVE_MODULE = "@fluixi/reactive/signal";
+var INTRINSICS = {
+  $signal: { export: "signal", module: REACTIVE_MODULE, returns: "signal-handle" },
+  $memo: { export: "memo", module: REACTIVE_MODULE, returns: "memo-handle" },
+  $effect: { export: "effect", module: REACTIVE_MODULE, returns: "effect" },
+  $store: { export: "store", module: "@fluixi/reactive/store", returns: "store-handle" },
+  $resource: { export: "resource", module: REACTIVE_MODULE, returns: "resource-handle" },
+  $cachedResource: { export: "cachedResource", module: "@fluixi/reactive/cached-resource", returns: "resource-handle" },
+  // No short runtime form for these yet, so the intrinsic stands for the `create*`
+  // name. Still worth having: no import to write, and when a shorter form is
+  // designed, the change is this line rather than a compiler pass.
+  $selector: { export: "createSelector", module: REACTIVE_MODULE, returns: "memo-accessor" },
+  $deferred: { export: "createDeferred", module: REACTIVE_MODULE, returns: "memo-accessor" },
+  // Not value constructors, but the compiler has to know them: they change what a read
+  // does. `untrack` suppresses dependency collection, which is exactly the kind of thing
+  // dependency analysis must not guess at.
+  $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
+  $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" },
+  // Scopes, scheduling and lifecycle: no value to classify, but the same authoring promise,
+  // no import to write. `$cleanup` registers a callback on the current owner (`onCleanup`).
+  $batch: { export: "batch", module: REACTIVE_MODULE, returns: "plain" },
+  $cleanup: { export: "onCleanup", module: REACTIVE_MODULE, returns: "plain" },
+  $root: { export: "root", module: REACTIVE_MODULE, returns: "plain" },
+  $context: { export: "context", module: REACTIVE_MODULE, returns: "plain" },
+  $renderEffect: { export: "renderEffect", module: REACTIVE_MODULE, returns: "effect" },
+  $computed: { export: "computed", module: REACTIVE_MODULE, returns: "effect" },
+  // Storage for where the code runs, and a signal kept in it. `$persisted` is a signal
+  // handle as far as reads go: the same accessor with `set` on it.
+  $storage: { export: "useStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $asyncStorage: { export: "useAsyncStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $persisted: { export: "persisted", module: "@fluixi/core/storage", returns: "signal-handle" },
+  // An environment variable, public or server-only; the browser build refuses a secret.
+  $env: { export: "env", module: "@fluixi/start/env", returns: "plain" }
+};
+var INTRINSIC_CALL = new RegExp(`\\$(?:${Object.keys(INTRINSICS).map((n) => n.slice(1)).join("|")})\\s*\\(`);
+
+// src/transform/source-locations.ts
+var SOURCE_MARKER = "__fx_source";
+var HOLE_MARKER = "__fx_hole";
+var markHole = (accessor, line, column, name) => `(globalThis.${HOLE_MARKER} ?? ((f) => f))(${accessor},${line},${column}${name === void 0 ? "" : `,${JSON.stringify(name)}`})`;
+var PROPS_MARKER = "__fx_props";
+var markProps = (object, at) => `(globalThis.${PROPS_MARKER} ?? ((p) => p))(${object},${JSON.stringify(at)})`;
+
 // src/codegen/serialize-static.ts
 var VOID_ELEMENTS = /* @__PURE__ */ new Set([
   "area",
@@ -509,50 +553,6 @@ var RUNTIME_CONTRACT_V2 = {
   symbols: [...RUNTIME_CONTRACT_V1.symbols, "template", "cloneTemplate", "walk"]
 };
 
-// src/analyze/intrinsics.ts
-var REACTIVE_MODULE = "@fluixi/reactive/signal";
-var INTRINSICS = {
-  $signal: { export: "signal", module: REACTIVE_MODULE, returns: "signal-handle" },
-  $memo: { export: "memo", module: REACTIVE_MODULE, returns: "memo-handle" },
-  $effect: { export: "effect", module: REACTIVE_MODULE, returns: "effect" },
-  $store: { export: "store", module: "@fluixi/reactive/store", returns: "store-handle" },
-  $resource: { export: "resource", module: REACTIVE_MODULE, returns: "resource-handle" },
-  $cachedResource: { export: "cachedResource", module: "@fluixi/reactive/cached-resource", returns: "resource-handle" },
-  // No short runtime form for these yet, so the intrinsic stands for the `create*`
-  // name. Still worth having: no import to write, and when a shorter form is
-  // designed, the change is this line rather than a compiler pass.
-  $selector: { export: "createSelector", module: REACTIVE_MODULE, returns: "memo-accessor" },
-  $deferred: { export: "createDeferred", module: REACTIVE_MODULE, returns: "memo-accessor" },
-  // Not value constructors, but the compiler has to know them: they change what a read
-  // does. `untrack` suppresses dependency collection, which is exactly the kind of thing
-  // dependency analysis must not guess at.
-  $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
-  $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" },
-  // Scopes, scheduling and lifecycle: no value to classify, but the same authoring promise,
-  // no import to write. `$cleanup` registers a callback on the current owner (`onCleanup`).
-  $batch: { export: "batch", module: REACTIVE_MODULE, returns: "plain" },
-  $cleanup: { export: "onCleanup", module: REACTIVE_MODULE, returns: "plain" },
-  $root: { export: "root", module: REACTIVE_MODULE, returns: "plain" },
-  $context: { export: "context", module: REACTIVE_MODULE, returns: "plain" },
-  $renderEffect: { export: "renderEffect", module: REACTIVE_MODULE, returns: "effect" },
-  $computed: { export: "computed", module: REACTIVE_MODULE, returns: "effect" },
-  // Storage for where the code runs, and a signal kept in it. `$persisted` is a signal
-  // handle as far as reads go: the same accessor with `set` on it.
-  $storage: { export: "useStorage", module: "@fluixi/core/storage", returns: "plain" },
-  $asyncStorage: { export: "useAsyncStorage", module: "@fluixi/core/storage", returns: "plain" },
-  $persisted: { export: "persisted", module: "@fluixi/core/storage", returns: "signal-handle" },
-  // An environment variable, public or server-only; the browser build refuses a secret.
-  $env: { export: "env", module: "@fluixi/start/env", returns: "plain" }
-};
-var INTRINSIC_CALL = new RegExp(`\\$(?:${Object.keys(INTRINSICS).map((n) => n.slice(1)).join("|")})\\s*\\(`);
-
-// src/transform/source-locations.ts
-var SOURCE_MARKER = "__fx_source";
-var HOLE_MARKER = "__fx_hole";
-var markHole = (accessor, line, column, name) => `(globalThis.${HOLE_MARKER} ?? ((f) => f))(${accessor},${line},${column}${name === void 0 ? "" : `,${JSON.stringify(name)}`})`;
-var PROPS_MARKER = "__fx_props";
-var markProps = (object, at) => `(globalThis.${PROPS_MARKER} ?? ((p) => p))(${object},${JSON.stringify(at)})`;
-
 // src/codegen/backends/imperative.ts
 var CONTROL_COMPONENT = {
   show: "Show",
@@ -614,7 +614,7 @@ function emitComponent(name, props, children, used, templates, at) {
   }
   let obj = `{ ${bodies.map(([name2, body]) => `get ${propKey(name2)}() { return ${body}; }`).join(", ")} }`;
   if (bodies.some(([, body]) => /\bthis\b/.test(body))) {
-    const thunks = bodies.map(([name2, body]) => `${JSON.stringify(name2)}: () => ${body}`);
+    const thunks = bodies.map(([name2, body]) => `${JSON.stringify(name2)}: () => (${body})`);
     const getters = bodies.map(([name2]) => `get ${propKey(name2)}() { return _$t[${JSON.stringify(name2)}](); }`);
     obj = `((_$t) => ({ ${getters.join(", ")} }))({ ${thunks.join(", ")} })`;
   }
@@ -858,9 +858,12 @@ function attrExprCode(attr, ctx) {
   }
   return null;
 }
-function buildProps(attrs, ctx) {
+function buildProps(attrs, ctx, element = false) {
   const props = [];
   const usePairs = [];
+  const classEntries = [];
+  const styleEntries = [];
+  let styleAt;
   for (const a of attrs) {
     if (a.type === "JSXSpreadAttribute") {
       props.push({ name: "", kind: "spread", expr: ctx.code(a.argument) });
@@ -876,6 +879,27 @@ function buildProps(attrs, ctx) {
       usePairs.push(opts != null ? `[${dir}, () => ${paren(opts, "arrowBody")}]` : `[${dir}]`);
       continue;
     }
+    if (element && (ns === "class" || ns === "style")) {
+      const key = JSON.stringify(a.name.name.name);
+      const v = a.value;
+      let value;
+      if (v == null) value = "true";
+      else if (isString(v)) value = JSON.stringify(literalOf(v));
+      else if (v.type === "JSXExpressionContainer" && v.expression?.type !== "JSXEmptyExpression") {
+        value = keyValue(v.expression, ctx);
+        if (ns === "style") styleAt ??= posOf(v.expression, ctx);
+      } else continue;
+      (ns === "class" ? classEntries : styleEntries).push(`${key}: ${value}`);
+      continue;
+    }
+    if (element && a.name.type === "JSXIdentifier" && a.name.name === "style" && a.value?.type === "JSXExpressionContainer") {
+      const entries = objectEntries(a.value.expression, ctx);
+      if (entries) {
+        styleEntries.unshift(...entries);
+        styleAt = posOf(a.value.expression, ctx);
+        continue;
+      }
+    }
     if (ns === "oncapture") {
       const evt = a.name.name.name.toLowerCase();
       const h = attrExprCode(a, ctx) ?? "undefined";
@@ -884,9 +908,37 @@ function buildProps(attrs, ctx) {
     }
     props.push(buildAttr(a, ctx));
   }
+  if (classEntries.length > 0) props.push({ name: "classList", kind: "attr", expr: `{ ${classEntries.join(", ")} }`, reactive: false });
+  if (styleEntries.length > 0) {
+    const entries = `{ ${styleEntries.join(", ")} }`;
+    const base = props.findIndex((p) => p.name === "style" && p.kind === "attr");
+    if (base === -1) props.push({ name: "style", kind: "attr", expr: entries, reactive: false, ...styleAt ? { at: styleAt } : {} });
+    else {
+      const prop = props[base];
+      const value = prop.literal !== void 0 ? JSON.stringify(prop.literal) : prop.reactive ? `() => ${paren(prop.expr, "arrowBody")}` : prop.expr;
+      props[base] = { name: "style", kind: "attr", expr: `[${value}, ${entries}]`, reactive: false, ...prop.at ? { at: prop.at } : {} };
+    }
+  }
   if (usePairs.length > 0) props.push({ name: "use", kind: "attr", expr: `[${usePairs.join(", ")}]` });
   return props;
 }
+function keyValue(expr, ctx) {
+  const code = ctx.code(expr);
+  if (!isReactive(expr)) return code;
+  const accessor = `() => ${paren(code, "arrowBody")}`;
+  const at = posOf(expr, ctx);
+  return at ? markHole(accessor, at.line, at.column) : accessor;
+}
+function objectEntries(expr, ctx) {
+  if (expr?.type !== "ObjectExpression") return null;
+  const entries = [];
+  for (const p of expr.properties) {
+    if (p.type !== "ObjectProperty") return null;
+    const key = p.computed ? `[${ctx.code(p.key)}]` : p.key.type === "Identifier" ? JSON.stringify(p.key.name) : JSON.stringify(String(p.key.value));
+    entries.push(`${key}: ${keyValue(p.value, ctx)}`);
+  }
+  return entries;
+}
 function buildChildren(children, ctx) {
   const out = [];
   for (let i = 0; i < children.length; i++) {
@@ -914,6 +966,7 @@ function buildChildren(children, ctx) {
         });
       }
     } else if (child.type === "JSXElement" || child.type === "JSXFragment") {
+      if (ctx.dropStyles?.has(child.start)) continue;
       out.push(buildNode(child, ctx));
     } else if (child.type === "JSXSpreadChild") {
       out.push({ kind: "expr", code: ctx.code(child.expression), reactive: false });
@@ -983,13 +1036,17 @@ function buildElement(node, ctx, handled) {
   const children = each ? [each] : buildChildren(node.children, ctx);
   if (tag === CONTAINER) return children.length === 1 ? children[0] : { kind: "fragment", children };
   const at = ctx.sourceFile && node.loc?.start ? { file: ctx.sourceFile, line: node.loc.start.line, column: node.loc.start.column } : void 0;
-  return { kind: "element", tag, svg: SVG_TAGS.has(tag), props: buildProps(attributes, ctx), children, static: false, ...at ? { at } : {} };
+  const props = buildProps(attributes, ctx, true);
+  const scope = ctx.scopes?.find((s) => node.start >= s.start && node.end <= s.end);
+  if (scope) props.unshift({ name: "data-fx-s", kind: "attr", literal: scope.value });
+  return { kind: "element", tag, svg: SVG_TAGS.has(tag), props, children, static: false, ...at ? { at } : {} };
 }
 function buildNode(node, ctx) {
   if (node.type === "JSXFragment") {
     return { kind: "fragment", children: buildChildren(node.children, ctx) };
   }
   if (directive(node, "if")) return buildIf(node, null, ctx);
+  if (ctx.dropStyles?.has(node.start)) return { kind: "fragment", children: [] };
   const { tag, component } = tagInfo(node.openingElement.name, ctx);
   if (!component) return buildElement(node, ctx, []);
   const props = buildProps(node.openingElement.attributes, ctx);