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

package/dist/lower/jsx.cjs

@@ -1 +1,529 @@
-"use strict";var d=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var X=(e,t)=>{for(var n in t)d(e,n,{get:t[n],enumerable:!0})},A=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of L(t))!C.call(e,r)&&r!==n&&d(e,r,{get:()=>t[r],enumerable:!(i=J(t,r))||i.enumerable});return e};var $=e=>A(d({},"__esModule",{value:!0}),e);var W={};X(W,{SVG_TAGS:()=>I,buildJsxIR:()=>z});module.exports=$(W);var T={kind:"eager"},D=["pointerdown","focusin","keydown"],E=new Set(["eager","idle","visible","interaction","media","never"]),c=class extends Error{};function f(e){return e.startsWith("load:")}function k(e,t){let n=e.slice(5);if(!E.has(n))throw new c(`Unknown load strategy 'load:${n}'. Expected one of ${[...E].join(", ")}.`);switch(n){case"eager":return T;case"idle":return{kind:"idle"};case"never":return{kind:"never"};case"visible":return t?{kind:"visible",rootMargin:t}:{kind:"visible"};case"interaction":return{kind:"interaction",events:t?P(t):[...D]};case"media":if(!t)throw new c(`'load:media' needs a query, e.g. load:media="(min-width: 1024px)".`);return{kind:"media",query:t};default:throw new c(`Unhandled load strategy '${n}'.`)}}function P(e){let t=e.split(/[\s,]+/).map(n=>n.trim()).filter(Boolean);if(t.length===0)throw new c("'load:interaction' was given no event names.");return t}var M="children";function m(e){switch(e.kind){case"call":return!0;case"member":return e.property!==M;case"compound":return e.parts.some(m);case"opaque":return!1}}var j=new Set(["CallExpression","OptionalCallExpression"]),q=new Set(["MemberExpression","OptionalMemberExpression"]);function y(e){if(!e)return{kind:"opaque"};if(j.has(e.type))return{kind:"call"};if(q.has(e.type)){let t=e.property;return{kind:"member",property:!(e.computed===!0)&&t?.type==="Identifier"?t.name:null}}return e.type==="ConditionalExpression"?{kind:"compound",parts:[e.test,e.consequent,e.alternate].map(l)}:e.type==="LogicalExpression"||e.type==="BinaryExpression"?{kind:"compound",parts:[e.left,e.right].map(l)}:e.type==="TemplateLiteral"?{kind:"compound",parts:e.expressions.map(l)}:e.type==="ObjectExpression"?{kind:"compound",parts:e.properties.filter(n=>(n.type==="ObjectProperty"||n.type==="Property")&&n.computed!==!0).map(n=>l(n.value))}:e.type==="ArrayExpression"?{kind:"compound",parts:e.elements.filter(n=>n!=null&&n.type!=="SpreadElement").map(l)}:{kind:"opaque"}}var l=e=>y(e);function O(e){switch(e.kind){case"event":return"event";case"ref":return"ref";case"spread":return"spread";case"class":case"style":return"class-or-style-directive";case"attr":case"prop":return e.reactive?"reactive-prop":e.expr!==void 0?"expression-prop":void 0;default:return"expression-prop"}}function v(e){let t=[],n=new Map,i=r=>{switch(r.kind){case"text":return!0;case"expr":return!1;case"component":case"control":for(let s of r.children)i(s);return!1;case"fragment":for(let s of r.children)i(s);return!1;case"element":{let s=!0;for(let a of r.children)i(a)||(s=!1);let o;for(let a of r.props)if(o=O(a),o)break;return!o&&!s&&(o=B(r)),r.static=!o,o?n.set(r,o):t.push(r),r.static}default:return!1}};for(let r of Array.isArray(e)?e:[e])i(r);return{staticElements:t,reasons:n}}function B(e){for(let t of e.children){if(t.kind==="expr")return"expression-child";if(t.kind==="component")return"component-child";if(t.kind==="control")return"control-child";if(t.kind==="element"&&!t.static||t.kind==="fragment")return"expression-child"}return"expression-child"}function S(e){let t=e.split(/\r\n|\n|\r/),n=0;for(let r=0;r<t.length;r++)/[^ \t]/.test(t[r])&&(n=r);let i="";for(let r=0;r<t.length;r++){let s=t[r].replace(/\t/g," ");r!==0&&(s=s.replace(/^ +/,"")),r!==t.length-1&&(s=s.replace(/ +$/,"")),s&&(r!==n&&(s+=" "),i+=s)}return i}var I=new Set(["svg","path","circle","rect","line","polygon","polyline","ellipse","g","defs","clipPath","text"]),G=/^on[A-Z]/,_=new Set(["click","dblclick","input","change","submit","focus","blur","keydown","keyup","keypress","mousedown","mouseup"]),b=e=>m(y(e));function u(e){if(e.type==="StringLiteral"||e.type==="NumericLiteral"||e.type==="BooleanLiteral"||e.type==="Literal"&&(typeof e.value=="string"||typeof e.value=="number"||typeof e.value=="boolean"))return e.value}var x=e=>!!e&&typeof u(e)=="string";function F(e,t){return e.type==="JSXIdentifier"?{tag:e.name,component:e.name[0]!==e.name[0].toLowerCase()}:e.type==="JSXMemberExpression"?{tag:t.code(e),component:!0}:e.type==="JSXNamespacedName"?{tag:`${e.namespace.name}:${e.name.name}`,component:!1}:{tag:"div",component:!1}}function g(e){return e.type==="JSXIdentifier"?e.name==="class"?"className":e.name:e.type==="JSXNamespacedName"?`${e.namespace.name}:${e.name.name}`:"unknown"}function K(e,t){let n=g(e.name),i=G.test(n),r=i||n.startsWith("on:")||n==="ref",o={name:n,kind:i?"event":"attr"};if(i){let p=n.slice(2).toLowerCase();o.event={name:p,delegated:_.has(p)}}let a=e.value;if(a==null)return o.literal=!0,o;if(x(a))return o.literal=u(a),o;if(a.type==="JSXExpressionContainer"&&a.expression?.type!=="JSXEmptyExpression"){let p=a.expression,h=u(p);return h!==void 0?(o.literal=h,o):(o.expr=t.code(p),o.reactive=r?!1:b(p),(p.type==="JSXElement"||p.type==="JSXFragment")&&(o.jsxElement=!0),o)}return o.literal=!0,o}function R(e,t){let n=e.value;return n==null?null:x(n)?JSON.stringify(u(n)):n.type==="JSXExpressionContainer"&&n.expression?.type!=="JSXEmptyExpression"?t.code(n.expression):null}function U(e,t){let n=[],i=[];for(let r of e){if(r.type==="JSXSpreadAttribute"){n.push({name:"",kind:"spread",expr:t.code(r.argument)});continue}if(r.type!=="JSXAttribute"||f(g(r.name)))continue;let s=r.name.type==="JSXNamespacedName"?r.name.namespace.name:null;if(s==="use"){let o=r.name.name.name;t.used.add(o);let a=R(r,t);i.push(a!=null?`[${o}, () => (${a})]`:`[${o}]`);continue}if(s==="oncapture"){let o=r.name.name.name.toLowerCase(),a=R(r,t)??"undefined";n.push({name:"on:"+o,kind:"attr",expr:`[${a}, { capture: true }]`});continue}n.push(K(r,t))}return i.length>0&&n.push({name:"use",kind:"attr",expr:`[${i.join(", ")}]`}),n}function N(e,t){let n=[];for(let i of e)if(i.type==="JSXText"){let r=S(i.value);r&&n.push({kind:"text",value:r})}else if(i.type==="JSXExpressionContainer"){if(i.expression?.type!=="JSXEmptyExpression"){let r=i.expression;n.push({kind:"expr",code:t.code(r),reactive:b(r)})}}else i.type==="JSXElement"||i.type==="JSXFragment"?n.push(w(i,t)):i.type==="JSXSpreadChild"&&n.push({kind:"expr",code:t.code(i.expression),reactive:!1});return n}function V(e){for(let t of e){if(t.type!=="JSXAttribute")continue;let n=g(t.name);if(f(n)){if(t.value&&!x(t.value))throw new c(`'${n}' needs a literal value, not an expression — the strategy is compile-time.`);return k(n,t.value?u(t.value):null)}}}function w(e,t){if(e.type==="JSXFragment")return{kind:"fragment",children:N(e.children,t)};let{tag:n,component:i}=F(e.openingElement.name,t),r=U(e.openingElement.attributes,t),s=N(e.children,t);if(i){let o=V(e.openingElement.attributes);return{kind:"component",name:n,props:r,children:s,...o?{load:o}:{}}}return{kind:"element",tag:n,svg:I.has(n),props:r,children:s,static:!1}}function z(e,t){let n=w(e,t);return v(n),n}
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/lower/jsx.ts
+var jsx_exports = {};
+__export(jsx_exports, {
+  SVG_TAGS: () => SVG_TAGS,
+  buildJsxIR: () => buildJsxIR
+});
+module.exports = __toCommonJS(jsx_exports);
+
+// src/resolve/load-directive.ts
+var EAGER = { kind: "eager" };
+var DEFAULT_INTERACTION_EVENTS = ["pointerdown", "focusin", "keydown"];
+var STRATEGIES = /* @__PURE__ */ new Set(["eager", "idle", "visible", "interaction", "media", "never"]);
+var LoadDirectiveError = class extends Error {
+};
+function isLoadDirective(name) {
+  return name.startsWith("load:");
+}
+function parseLoadDirective(name, value) {
+  const strategy = name.slice("load:".length);
+  if (!STRATEGIES.has(strategy)) {
+    throw new LoadDirectiveError(
+      `Unknown load strategy 'load:${strategy}'. Expected one of ${[...STRATEGIES].join(", ")}.`
+    );
+  }
+  switch (strategy) {
+    case "eager":
+      return EAGER;
+    case "idle":
+      return { kind: "idle" };
+    case "never":
+      return { kind: "never" };
+    case "visible":
+      return value ? { kind: "visible", rootMargin: value } : { kind: "visible" };
+    case "interaction":
+      return {
+        kind: "interaction",
+        events: value ? splitEvents(value) : [...DEFAULT_INTERACTION_EVENTS]
+      };
+    case "media":
+      if (!value) {
+        throw new LoadDirectiveError(
+          `'load:media' needs a query, e.g. load:media="(min-width: 1024px)".`
+        );
+      }
+      return { kind: "media", query: value };
+    default:
+      throw new LoadDirectiveError(`Unhandled load strategy '${strategy}'.`);
+  }
+}
+function splitEvents(value) {
+  const events = value.split(/[\s,]+/).map((e) => e.trim()).filter(Boolean);
+  if (events.length === 0) {
+    throw new LoadDirectiveError(`'load:interaction' was given no event names.`);
+  }
+  return events;
+}
+
+// src/analyze/reactive-expr.ts
+var STABLE_MEMBER = "children";
+function isReactiveShape(shape) {
+  switch (shape.kind) {
+    case "call":
+      return true;
+    case "member":
+      return shape.property !== STABLE_MEMBER;
+    case "compound":
+      return shape.parts.some(isReactiveShape);
+    case "opaque":
+      return false;
+  }
+}
+
+// src/analyze/expr-shape.ts
+var CALL = /* @__PURE__ */ new Set(["CallExpression", "OptionalCallExpression"]);
+var MEMBER = /* @__PURE__ */ new Set(["MemberExpression", "OptionalMemberExpression"]);
+function shapeOf(node) {
+  if (!node) return { kind: "opaque" };
+  if (CALL.has(node.type)) return { kind: "call" };
+  if (MEMBER.has(node.type)) {
+    const property = node.property;
+    const computed = node.computed === true;
+    return {
+      kind: "member",
+      property: !computed && property?.type === "Identifier" ? property.name : null
+    };
+  }
+  if (node.type === "ConditionalExpression") {
+    return { kind: "compound", parts: [node.test, node.consequent, node.alternate].map(part) };
+  }
+  if (node.type === "LogicalExpression" || node.type === "BinaryExpression") {
+    return { kind: "compound", parts: [node.left, node.right].map(part) };
+  }
+  if (node.type === "TemplateLiteral") {
+    return { kind: "compound", parts: node.expressions.map(part) };
+  }
+  if (node.type === "ObjectExpression") {
+    const props = node.properties.filter(
+      (p) => (p.type === "ObjectProperty" || p.type === "Property") && p.computed !== true
+    );
+    return { kind: "compound", parts: props.map((p) => part(p.value)) };
+  }
+  if (node.type === "ArrayExpression") {
+    const items = node.elements.filter(
+      (e) => e != null && e.type !== "SpreadElement"
+    );
+    return { kind: "compound", parts: items.map(part) };
+  }
+  return { kind: "opaque" };
+}
+var part = (n) => shapeOf(n);
+
+// src/optimize/analyze-static.ts
+function propReason(prop) {
+  switch (prop.kind) {
+    case "event":
+      return "event";
+    case "ref":
+      return "ref";
+    case "spread":
+      return "spread";
+    case "class":
+    case "style":
+      return "class-or-style-directive";
+    case "attr":
+    case "prop":
+      if (prop.reactive) return "reactive-prop";
+      if (prop.expr !== void 0) return "expression-prop";
+      return void 0;
+    /* c8 ignore next 2 */
+    default:
+      return "expression-prop";
+  }
+}
+function analyzeStatic(root) {
+  const staticElements = [];
+  const reasons = /* @__PURE__ */ new Map();
+  const visit = (node) => {
+    switch (node.kind) {
+      case "text":
+        return true;
+      case "expr":
+        return false;
+      case "component":
+      case "control":
+        for (const child of node.children) visit(child);
+        return false;
+      case "fragment":
+        for (const child of node.children) visit(child);
+        return false;
+      case "element": {
+        let childrenStatic = true;
+        for (const child of node.children) {
+          if (!visit(child)) childrenStatic = false;
+        }
+        let reason;
+        for (const prop of node.props) {
+          reason = propReason(prop);
+          if (reason) break;
+        }
+        if (!reason && !childrenStatic) {
+          reason = childReason(node);
+        }
+        node.static = !reason;
+        if (reason) reasons.set(node, reason);
+        else staticElements.push(node);
+        return node.static;
+      }
+      /* c8 ignore next 2 */
+      default:
+        return false;
+    }
+  };
+  for (const node of Array.isArray(root) ? root : [root]) visit(node);
+  return { staticElements, reasons };
+}
+function childReason(node) {
+  for (const child of node.children) {
+    if (child.kind === "expr") return "expression-child";
+    if (child.kind === "component") return "component-child";
+    if (child.kind === "control") return "control-child";
+    if (child.kind === "element" && !child.static) return "expression-child";
+    if (child.kind === "fragment") return "expression-child";
+  }
+  return "expression-child";
+}
+
+// src/lower/text.ts
+function cleanTemplateText(value) {
+  const lines = value.split(/\r\n|\n|\r/);
+  let lastNonEmpty = 0;
+  for (let i = 0; i < lines.length; i++) {
+    if (/[^ \t]/.test(lines[i])) lastNonEmpty = i;
+  }
+  let out = "";
+  for (let i = 0; i < lines.length; i++) {
+    let line = lines[i].replace(/\t/g, " ");
+    if (i !== 0) line = line.replace(/^ +/, "");
+    if (i !== lines.length - 1) line = line.replace(/ +$/, "");
+    if (!line) continue;
+    if (i !== lastNonEmpty) line += " ";
+    out += line;
+  }
+  return out;
+}
+
+// src/analyze/paren.ts
+function skipQuoted(src, start) {
+  const quote = src[start];
+  for (let i = start + 1; i < src.length; i++) {
+    const c = src[i];
+    if (c === "\\") i++;
+    else if (c === quote) return i + 1;
+    else if (c === "\n") return -1;
+  }
+  return -1;
+}
+function skipTemplate(src, start) {
+  let i = start + 1;
+  while (i < src.length) {
+    const c = src[i];
+    if (c === "\\") {
+      i += 2;
+    } else if (c === "`") {
+      return i + 1;
+    } else if (c === "$" && src[i + 1] === "{") {
+      let depth = 1;
+      i += 2;
+      while (i < src.length && depth > 0) {
+        const k = src[i];
+        if (k === "\\") i += 2;
+        else if (k === "`") {
+          const end = skipTemplate(src, i);
+          if (end < 0) return -1;
+          i = end;
+        } else if (k === '"' || k === "'") {
+          const end = skipQuoted(src, i);
+          if (end < 0) return -1;
+          i = end;
+        } else {
+          if (k === "{") depth++;
+          else if (k === "}") depth--;
+          i++;
+        }
+      }
+    } else {
+      i++;
+    }
+  }
+  return -1;
+}
+function skipRegex(src, start) {
+  let inClass = false;
+  for (let i = start + 1; i < src.length; i++) {
+    const c = src[i];
+    if (c === "\\") i++;
+    else if (c === "[") inClass = true;
+    else if (c === "]") inClass = false;
+    else if (c === "\n") return -1;
+    else if (c === "/" && !inClass) {
+      let end = i + 1;
+      while (end < src.length && /[a-z]/i.test(src[end])) end++;
+      return end;
+    }
+  }
+  return -1;
+}
+function divides(prev) {
+  return prev !== "" && /[A-Za-z0-9_$)\]]/.test(prev);
+}
+function topLevelComma(src) {
+  let depth = 0;
+  let prev = "";
+  let i = 0;
+  while (i < src.length) {
+    const c = src[i];
+    if (c === '"' || c === "'") {
+      const end = skipQuoted(src, i);
+      if (end < 0) return null;
+      i = end;
+      prev = c;
+    } else if (c === "`") {
+      const end = skipTemplate(src, i);
+      if (end < 0) return null;
+      i = end;
+      prev = c;
+    } else if (c === "/" && src[i + 1] === "/") {
+      return null;
+    } else if (c === "/" && src[i + 1] === "*") {
+      const end = src.indexOf("*/", i + 2);
+      if (end < 0) return null;
+      i = end + 2;
+    } else if (c === "/" && !divides(prev)) {
+      const end = skipRegex(src, i);
+      if (end < 0) return null;
+      i = end;
+      prev = "/";
+    } else {
+      if (c === "(" || c === "[" || c === "{") depth++;
+      else if (c === ")" || c === "]" || c === "}") {
+        depth--;
+        if (depth < 0) return null;
+      } else if (c === "," && depth === 0) return true;
+      if (!/\s/.test(c)) prev = c;
+      i++;
+    }
+  }
+  return depth === 0 ? false : null;
+}
+function paren(code, position) {
+  const src = code.trim();
+  if (src === "") return `(${code})`;
+  if (position === "arrowBody" && src[0] === "{") return `(${code})`;
+  return topLevelComma(src) === false ? code : `(${code})`;
+}
+
+// src/lower/jsx.ts
+var SVG_TAGS = /* @__PURE__ */ new Set([
+  "svg",
+  "path",
+  "circle",
+  "rect",
+  "line",
+  "polygon",
+  "polyline",
+  "ellipse",
+  "g",
+  "defs",
+  "clipPath",
+  "text"
+]);
+var EVENT_RE = /^on[A-Z]/;
+var DELEGATED = /* @__PURE__ */ new Set([
+  "click",
+  "dblclick",
+  "input",
+  "change",
+  "submit",
+  "focus",
+  "blur",
+  "keydown",
+  "keyup",
+  "keypress",
+  "mousedown",
+  "mouseup"
+]);
+var isReactive = (node) => isReactiveShape(shapeOf(node));
+var posOf = (node, ctx) => {
+  if (!ctx.sourceFile) return void 0;
+  const at = node.loc?.start;
+  return at ? { line: at.line, column: at.column } : void 0;
+};
+function literalOf(node) {
+  if (node.type === "StringLiteral" || node.type === "NumericLiteral" || node.type === "BooleanLiteral") {
+    return node.value;
+  }
+  if (node.type === "Literal" && (typeof node.value === "string" || typeof node.value === "number" || typeof node.value === "boolean")) {
+    return node.value;
+  }
+  return void 0;
+}
+var isString = (node) => !!node && typeof literalOf(node) === "string";
+function tagInfo(name, ctx) {
+  if (name.type === "JSXIdentifier") {
+    return { tag: name.name, component: name.name[0] !== name.name[0].toLowerCase() };
+  }
+  if (name.type === "JSXMemberExpression") return { tag: ctx.code(name), component: true };
+  if (name.type === "JSXNamespacedName") {
+    return { tag: `${name.namespace.name}:${name.name.name}`, component: false };
+  }
+  return { tag: "div", component: false };
+}
+function attrName(name) {
+  if (name.type === "JSXIdentifier") return name.name === "class" ? "className" : name.name;
+  if (name.type === "JSXNamespacedName") return `${name.namespace.name}:${name.name.name}`;
+  return "unknown";
+}
+function buildAttr(attr, ctx) {
+  const name = attrName(attr.name);
+  const isEvent = EVENT_RE.test(name);
+  const isHandler = isEvent || name.startsWith("on:") || name === "ref";
+  const kind = isEvent ? "event" : "attr";
+  const base = { name, kind };
+  if (isEvent) {
+    const evt = name.slice(2).toLowerCase();
+    base.event = { name: evt, delegated: DELEGATED.has(evt) };
+  }
+  const v = attr.value;
+  if (v == null) {
+    base.literal = true;
+    base.at = posOf(attr, ctx);
+    return base;
+  }
+  if (isString(v)) {
+    base.literal = literalOf(v);
+    base.at = posOf(v, ctx);
+    return base;
+  }
+  if (v.type === "JSXExpressionContainer" && v.expression?.type !== "JSXEmptyExpression") {
+    const expr = v.expression;
+    const literal = literalOf(expr);
+    if (literal !== void 0) {
+      base.literal = literal;
+      base.at = posOf(expr, ctx);
+      return base;
+    }
+    base.expr = ctx.code(expr);
+    base.reactive = isHandler ? false : isReactive(expr);
+    base.at = posOf(expr, ctx);
+    if (expr.type === "JSXElement" || expr.type === "JSXFragment") base.jsxElement = true;
+    return base;
+  }
+  base.literal = true;
+  return base;
+}
+function attrExprCode(attr, ctx) {
+  const v = attr.value;
+  if (v == null) return null;
+  if (isString(v)) return JSON.stringify(literalOf(v));
+  if (v.type === "JSXExpressionContainer" && v.expression?.type !== "JSXEmptyExpression") {
+    return ctx.code(v.expression);
+  }
+  return null;
+}
+function buildProps(attrs, ctx) {
+  const props = [];
+  const usePairs = [];
+  for (const a of attrs) {
+    if (a.type === "JSXSpreadAttribute") {
+      props.push({ name: "", kind: "spread", expr: ctx.code(a.argument) });
+      continue;
+    }
+    if (a.type !== "JSXAttribute") continue;
+    if (isLoadDirective(attrName(a.name))) continue;
+    const ns = a.name.type === "JSXNamespacedName" ? a.name.namespace.name : null;
+    if (ns === "use") {
+      const dir = a.name.name.name;
+      ctx.used.add(dir);
+      const opts = attrExprCode(a, ctx);
+      usePairs.push(opts != null ? `[${dir}, () => ${paren(opts, "arrowBody")}]` : `[${dir}]`);
+      continue;
+    }
+    if (ns === "oncapture") {
+      const evt = a.name.name.name.toLowerCase();
+      const h = attrExprCode(a, ctx) ?? "undefined";
+      props.push({ name: "on:" + evt, kind: "attr", expr: `[${h}, { capture: true }]` });
+      continue;
+    }
+    props.push(buildAttr(a, ctx));
+  }
+  if (usePairs.length > 0) props.push({ name: "use", kind: "attr", expr: `[${usePairs.join(", ")}]` });
+  return props;
+}
+function buildChildren(children, ctx) {
+  const out = [];
+  for (const child of children) {
+    if (child.type === "JSXText") {
+      const text = cleanTemplateText(child.value);
+      if (text) out.push({ kind: "text", value: text });
+    } else if (child.type === "JSXExpressionContainer") {
+      if (child.expression?.type !== "JSXEmptyExpression") {
+        const expr = child.expression;
+        const reactive = isReactive(expr);
+        out.push({
+          kind: "expr",
+          code: ctx.code(expr),
+          reactive,
+          ...reactive ? { at: posOf(expr, ctx) } : {}
+        });
+      }
+    } else if (child.type === "JSXElement" || child.type === "JSXFragment") {
+      out.push(buildNode(child, ctx));
+    } else if (child.type === "JSXSpreadChild") {
+      out.push({ kind: "expr", code: ctx.code(child.expression), reactive: false });
+    }
+  }
+  return out;
+}
+function readLoad(attrs) {
+  for (const a of attrs) {
+    if (a.type !== "JSXAttribute") continue;
+    const name = attrName(a.name);
+    if (!isLoadDirective(name)) continue;
+    if (a.value && !isString(a.value)) {
+      throw new LoadDirectiveError(
+        `'${name}' needs a literal value, not an expression — the strategy is compile-time.`
+      );
+    }
+    return parseLoadDirective(name, a.value ? literalOf(a.value) : null);
+  }
+  return void 0;
+}
+function buildNode(node, ctx) {
+  if (node.type === "JSXFragment") {
+    return { kind: "fragment", children: buildChildren(node.children, ctx) };
+  }
+  const { tag, component } = tagInfo(node.openingElement.name, ctx);
+  const props = buildProps(node.openingElement.attributes, ctx);
+  const children = buildChildren(node.children, ctx);
+  const at = ctx.sourceFile && node.loc?.start ? { file: ctx.sourceFile, line: node.loc.start.line, column: node.loc.start.column } : void 0;
+  if (component) {
+    const load = readLoad(node.openingElement.attributes);
+    return { kind: "component", name: tag, props, children, ...load ? { load } : {}, ...at ? { at } : {} };
+  }
+  return { kind: "element", tag, svg: SVG_TAGS.has(tag), props, children, static: false, ...at ? { at } : {} };
+}
+function buildJsxIR(node, ctx) {
+  const ir = buildNode(node, ctx);
+  analyzeStatic(ir);
+  return ir;
+}

package/dist/lower/jsx.d.cts

@@ -0,0 +1,25 @@
+/**
+ * Build IR from a JSX tree.
+ *
+ * Reads `node.type` rather than a parser's helpers, and asks the caller for the
+ * source of an expression through `code()` — a front-end that can slice the
+ * original text returns that, one that reprints returns the printed form. Either
+ * way the IR is the same, which is what keeps one builder for both.
+ */
+import type { IRNode } from '../ir/nodes.cjs';
+interface Node {
+    type: string;
+    [key: string]: any;
+}
+export interface JsxContext {
+    /** The source of an expression node, with anything nested already compiled. */
+    code(node: Node): string;
+    /** Runtime symbols the emitted code needs; `use:` directives register here too. */
+    used: Set<string>;
+    /** The file being compiled, when component usage sites are to be recorded. */
+    sourceFile?: string;
+}
+export declare const SVG_TAGS: Set<string>;
+/** Build IR from a JSXElement or JSXFragment. */
+export declare function buildJsxIR(node: Node, ctx: JsxContext): IRNode;
+export {};

package/dist/lower/jsx.d.ts

@@ -16,6 +16,8 @@ export interface JsxContext {
     code(node: Node): string;
     /** Runtime symbols the emitted code needs; `use:` directives register here too. */
     used: Set<string>;
+    /** The file being compiled, when component usage sites are to be recorded. */
+    sourceFile?: string;
 }
 export declare const SVG_TAGS: Set<string>;
 /** Build IR from a JSXElement or JSXFragment. */

package/dist/lower/jsx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jsx.d.ts","sourceRoot":"","sources":["../../src/lower/jsx.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAkB,MAAM,EAAsB,MAAM,gBAAgB,CAAC;AAOjF,UAAU,IAAI;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,+EAA+E;IAC/E,IAAI,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,mFAAmF;IACnF,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACnB;AAED,eAAO,MAAM,QAAQ,aAGnB,CAAC;AAsLH,iDAAiD;AACjD,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,GAAG,MAAM,CAM9D"}
+{"version":3,"file":"jsx.d.ts","sourceRoot":"","sources":["../../src/lower/jsx.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAkB,MAAM,EAAsB,MAAM,gBAAgB,CAAC;AAQjF,UAAU,IAAI;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,+EAA+E;IAC/E,IAAI,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,mFAAmF;IACnF,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,aAGnB,CAAC;AA4MH,iDAAiD;AACjD,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,GAAG,MAAM,CAM9D"}

package/dist/lower/jsx.js

@@ -3,6 +3,7 @@ import { isReactiveShape } from '../analyze/reactive-expr.js';
 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';
 export const SVG_TAGS = new Set([
     'svg', 'path', 'circle', 'rect', 'line', 'polygon', 'polyline',
     'ellipse', 'g', 'defs', 'clipPath', 'text',
@@ -13,6 +14,13 @@ const DELEGATED = new Set([
     'keydown', 'keyup', 'keypress', 'mousedown', 'mouseup',
 ]);
 const isReactive = (node) => isReactiveShape(shapeOf(node));
+/** Only when the host asked for source locations — the flag that records usage sites too. */
+const posOf = (node, ctx) => {
+    if (!ctx.sourceFile)
+        return undefined;
+    const at = node.loc?.start;
+    return at ? { line: at.line, column: at.column } : undefined;
+};
 /** A literal value, or undefined when the node is not one. */
 function literalOf(node) {
     if (node.type === 'StringLiteral' || node.type === 'NumericLiteral' || node.type === 'BooleanLiteral') {
@@ -60,10 +68,12 @@ function buildAttr(attr, ctx) {
     const v = attr.value;
     if (v == null) {
         base.literal = true; // valueless attribute
+        base.at = posOf(attr, ctx);
         return base;
     }
     if (isString(v)) {
         base.literal = literalOf(v);
+        base.at = posOf(v, ctx);
         return base;
     }
     if (v.type === 'JSXExpressionContainer' && v.expression?.type !== 'JSXEmptyExpression') {
@@ -71,10 +81,14 @@ function buildAttr(attr, ctx) {
         const literal = literalOf(expr);
         if (literal !== undefined) {
             base.literal = literal;
+            base.at = posOf(expr, ctx);
             return base;
         }
         base.expr = ctx.code(expr);
         base.reactive = isHandler ? false : isReactive(expr);
+        // Every prop, not only the ones that move: a panel names the line for each of them.
+        // Nothing treats this as a binding position — that asks for `reactive` as well.
+        base.at = posOf(expr, ctx);
         if (expr.type === 'JSXElement' || expr.type === 'JSXFragment')
             base.jsxElement = true;
         return base;
@@ -114,7 +128,7 @@ function buildProps(attrs, ctx) {
             ctx.used.add(dir); // keep the import
             const opts = attrExprCode(a, ctx);
             // parens round the body so an object literal is not read as a block
-            usePairs.push(opts != null ? `[${dir}, () => (${opts})]` : `[${dir}]`);
+            usePairs.push(opts != null ? `[${dir}, () => ${paren(opts, 'arrowBody')}]` : `[${dir}]`);
             continue;
         }
         // oncapture:name -> native on:name with { capture: true }
@@ -143,7 +157,13 @@ function buildChildren(children, ctx) {
         else if (child.type === 'JSXExpressionContainer') {
             if (child.expression?.type !== 'JSXEmptyExpression') {
                 const expr = child.expression;
-                out.push({ kind: 'expr', code: ctx.code(expr), reactive: isReactive(expr) });
+                const reactive = isReactive(expr);
+                out.push({
+                    kind: 'expr',
+                    code: ctx.code(expr),
+                    reactive,
+                    ...(reactive ? { at: posOf(expr, ctx) } : {}),
+                });
             }
         }
         else if (child.type === 'JSXElement' || child.type === 'JSXFragment') {
@@ -177,11 +197,14 @@ function buildNode(node, ctx) {
     const { tag, component } = tagInfo(node.openingElement.name, ctx);
     const props = buildProps(node.openingElement.attributes, ctx);
     const children = buildChildren(node.children, ctx);
+    const at = ctx.sourceFile && node.loc?.start
+        ? { file: ctx.sourceFile, line: node.loc.start.line, column: node.loc.start.column }
+        : undefined;
     if (component) {
         const load = readLoad(node.openingElement.attributes);
-        return { kind: 'component', name: tag, props, children, ...(load ? { load } : {}) };
+        return { kind: 'component', name: tag, props, children, ...(load ? { load } : {}), ...(at ? { at } : {}) };
     }
-    return { kind: 'element', tag, svg: SVG_TAGS.has(tag), props, children, static: false };
+    return { kind: 'element', tag, svg: SVG_TAGS.has(tag), props, children, static: false, ...(at ? { at } : {}) };
 }
 /** Build IR from a JSXElement or JSXFragment. */
 export function buildJsxIR(node, ctx) {