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

package/dist/frontend/babel/lower-template.mjs

@@ -475,7 +475,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(", ")} })`;
   }
@@ -614,6 +614,271 @@ function cleanTemplateText(value) {
   return out;
 }
 
+// src/lower/entities.ts
+var NAMED = {
+  quot: 34,
+  amp: 38,
+  apos: 39,
+  lt: 60,
+  gt: 62,
+  nbsp: 160,
+  iexcl: 161,
+  cent: 162,
+  pound: 163,
+  curren: 164,
+  yen: 165,
+  brvbar: 166,
+  sect: 167,
+  uml: 168,
+  copy: 169,
+  ordf: 170,
+  laquo: 171,
+  not: 172,
+  shy: 173,
+  reg: 174,
+  macr: 175,
+  deg: 176,
+  plusmn: 177,
+  sup2: 178,
+  sup3: 179,
+  acute: 180,
+  micro: 181,
+  para: 182,
+  middot: 183,
+  cedil: 184,
+  sup1: 185,
+  ordm: 186,
+  raquo: 187,
+  frac14: 188,
+  frac12: 189,
+  frac34: 190,
+  iquest: 191,
+  Agrave: 192,
+  Aacute: 193,
+  Acirc: 194,
+  Atilde: 195,
+  Auml: 196,
+  Aring: 197,
+  AElig: 198,
+  Ccedil: 199,
+  Egrave: 200,
+  Eacute: 201,
+  Ecirc: 202,
+  Euml: 203,
+  Igrave: 204,
+  Iacute: 205,
+  Icirc: 206,
+  Iuml: 207,
+  ETH: 208,
+  Ntilde: 209,
+  Ograve: 210,
+  Oacute: 211,
+  Ocirc: 212,
+  Otilde: 213,
+  Ouml: 214,
+  times: 215,
+  Oslash: 216,
+  Ugrave: 217,
+  Uacute: 218,
+  Ucirc: 219,
+  Uuml: 220,
+  Yacute: 221,
+  THORN: 222,
+  szlig: 223,
+  agrave: 224,
+  aacute: 225,
+  acirc: 226,
+  atilde: 227,
+  auml: 228,
+  aring: 229,
+  aelig: 230,
+  ccedil: 231,
+  egrave: 232,
+  eacute: 233,
+  ecirc: 234,
+  euml: 235,
+  igrave: 236,
+  iacute: 237,
+  icirc: 238,
+  iuml: 239,
+  eth: 240,
+  ntilde: 241,
+  ograve: 242,
+  oacute: 243,
+  ocirc: 244,
+  otilde: 245,
+  ouml: 246,
+  divide: 247,
+  oslash: 248,
+  ugrave: 249,
+  uacute: 250,
+  ucirc: 251,
+  uuml: 252,
+  yacute: 253,
+  thorn: 254,
+  yuml: 255,
+  OElig: 338,
+  oelig: 339,
+  Scaron: 352,
+  scaron: 353,
+  Yuml: 376,
+  fnof: 402,
+  circ: 710,
+  tilde: 732,
+  Alpha: 913,
+  Beta: 914,
+  Gamma: 915,
+  Delta: 916,
+  Epsilon: 917,
+  Zeta: 918,
+  Eta: 919,
+  Theta: 920,
+  Iota: 921,
+  Kappa: 922,
+  Lambda: 923,
+  Mu: 924,
+  Nu: 925,
+  Xi: 926,
+  Omicron: 927,
+  Pi: 928,
+  Rho: 929,
+  Sigma: 931,
+  Tau: 932,
+  Upsilon: 933,
+  Phi: 934,
+  Chi: 935,
+  Psi: 936,
+  Omega: 937,
+  alpha: 945,
+  beta: 946,
+  gamma: 947,
+  delta: 948,
+  epsilon: 949,
+  zeta: 950,
+  eta: 951,
+  theta: 952,
+  iota: 953,
+  kappa: 954,
+  lambda: 955,
+  mu: 956,
+  nu: 957,
+  xi: 958,
+  omicron: 959,
+  pi: 960,
+  rho: 961,
+  sigmaf: 962,
+  sigma: 963,
+  tau: 964,
+  upsilon: 965,
+  phi: 966,
+  chi: 967,
+  psi: 968,
+  omega: 969,
+  thetasym: 977,
+  upsih: 978,
+  piv: 982,
+  ensp: 8194,
+  emsp: 8195,
+  thinsp: 8201,
+  zwnj: 8204,
+  zwj: 8205,
+  lrm: 8206,
+  rlm: 8207,
+  ndash: 8211,
+  mdash: 8212,
+  lsquo: 8216,
+  rsquo: 8217,
+  sbquo: 8218,
+  ldquo: 8220,
+  rdquo: 8221,
+  bdquo: 8222,
+  dagger: 8224,
+  Dagger: 8225,
+  bull: 8226,
+  hellip: 8230,
+  permil: 8240,
+  prime: 8242,
+  Prime: 8243,
+  lsaquo: 8249,
+  rsaquo: 8250,
+  oline: 8254,
+  frasl: 8260,
+  euro: 8364,
+  image: 8465,
+  weierp: 8472,
+  real: 8476,
+  trade: 8482,
+  alefsym: 8501,
+  larr: 8592,
+  uarr: 8593,
+  rarr: 8594,
+  darr: 8595,
+  harr: 8596,
+  crarr: 8629,
+  lArr: 8656,
+  uArr: 8657,
+  rArr: 8658,
+  dArr: 8659,
+  hArr: 8660,
+  forall: 8704,
+  part: 8706,
+  exist: 8707,
+  empty: 8709,
+  nabla: 8711,
+  isin: 8712,
+  notin: 8713,
+  ni: 8715,
+  prod: 8719,
+  sum: 8721,
+  minus: 8722,
+  lowast: 8727,
+  radic: 8730,
+  prop: 8733,
+  infin: 8734,
+  ang: 8736,
+  and: 8743,
+  or: 8744,
+  cap: 8745,
+  cup: 8746,
+  int: 8747,
+  there4: 8756,
+  sim: 8764,
+  cong: 8773,
+  asymp: 8776,
+  ne: 8800,
+  equiv: 8801,
+  le: 8804,
+  ge: 8805,
+  sub: 8834,
+  sup: 8835,
+  nsub: 8836,
+  sube: 8838,
+  supe: 8839,
+  oplus: 8853,
+  otimes: 8855,
+  perp: 8869,
+  sdot: 8901,
+  lceil: 8968,
+  rceil: 8969,
+  lfloor: 8970,
+  rfloor: 8971,
+  lang: 9001,
+  rang: 9002,
+  loz: 9674,
+  spades: 9824,
+  clubs: 9827,
+  hearts: 9829,
+  diams: 9830
+};
+var REFERENCE = /&(?:#[xX]([0-9a-fA-F]{1,6})|#([0-9]{1,7})|([a-zA-Z][a-zA-Z0-9]{1,31}));/g;
+function decodeEntities(value) {
+  if (!value.includes("&")) return value;
+  return value.replace(REFERENCE, (match, hex, dec, name) => {
+    const code = hex ? parseInt(hex, 16) : dec ? parseInt(dec, 10) : Object.prototype.hasOwnProperty.call(NAMED, name) ? NAMED[name] : void 0;
+    return code !== void 0 && code <= 1114111 ? String.fromCodePoint(code) : match;
+  });
+}
+
 // src/lower/template.ts
 var DELEGATED = /* @__PURE__ */ new Set([
   "click",
@@ -700,7 +965,7 @@ var Lowerer = class {
     switch (node.kind) {
       case "Text": {
         if (node.raw) return { kind: "text", value: node.value };
-        const cleaned = cleanTemplateText(node.value);
+        const cleaned = decodeEntities(cleanTemplateText(node.value));
         return cleaned ? { kind: "text", value: cleaned } : null;
       }
       case "Comment":
@@ -736,7 +1001,7 @@ var Lowerer = class {
       kind: "element",
       tag: el.tag,
       svg: el.namespace === "svg",
-      props: this.lowerAttributes(el.attributes),
+      props: this.lowerAttributes(el.attributes, true),
       children,
       static: false,
       ...at ? { at } : {}
@@ -849,13 +1114,22 @@ var Lowerer = class {
     return clone.kind === "Element" ? this.lowerElement(clone) : this.lowerComponent(clone);
   }
   // --- attributes ---------------------------------------------------------
-  lowerAttributes(attrs) {
+  /**
+   * `element`: a DOM element, where each class:/style: value that moves is its own accessor.
+   * A component gets the object as before, rebuilt whole when any value moves.
+   */
+  lowerAttributes(attrs, element = false) {
+    let anyReactive = false;
+    const entry = (name, h) => {
+      anyReactive ||= h.reactive;
+      if (!element || !h.reactive) return `${JSON.stringify(name)}: ${h.code}`;
+      const accessor = `() => ${paren(h.code, "arrowBody")}`;
+      return `${JSON.stringify(name)}: ${h.at ? markHole(accessor, h.at.line, h.at.column) : accessor}`;
+    };
     const props = [];
     const classEntries = [];
-    let classReactive = false;
     let classAt;
     const styleEntries = [];
-    let styleReactive = false;
     let styleAt;
     const usePairs = [];
     for (const a of attrs) {
@@ -895,15 +1169,13 @@ var Lowerer = class {
           break;
         case "ClassDirective": {
           const h = this.hole(a.hole);
-          classEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
-          classReactive = classReactive || h.reactive;
+          classEntries.push(entry(a.name, h));
           classAt ??= h.at;
           break;
         }
         case "StyleDirective": {
           const h = this.hole(a.hole);
-          styleEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
-          styleReactive = styleReactive || h.reactive;
+          styleEntries.push(entry(a.name, h));
           styleAt ??= h.at;
           break;
         }
@@ -923,18 +1195,19 @@ var Lowerer = class {
         name: "classList",
         kind: "attr",
         expr: `{ ${classEntries.join(", ")} }`,
-        reactive: classReactive,
+        reactive: !element && anyReactive,
         ...classAt ? { at: classAt } : {}
       });
     }
     if (styleEntries.length > 0) {
-      props.push({
-        name: "style",
-        kind: "attr",
-        expr: `{ ${styleEntries.join(", ")} }`,
-        reactive: styleReactive,
-        ...styleAt ? { at: styleAt } : {}
-      });
+      const entries = `{ ${styleEntries.join(", ")} }`;
+      const base = props.findIndex((p) => p.name === "style");
+      if (base === -1) props.push({ name: "style", kind: "attr", expr: entries, reactive: !element && anyReactive, ...styleAt ? { at: styleAt } : {} });
+      else {
+        const prop = props[base];
+        const value = prop.expr === 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(", ")}]` });
@@ -1023,7 +1296,7 @@ var Lowerer = class {
       return base;
     }
     if (v.kind === "static") {
-      base.literal = v.value;
+      base.literal = decodeEntities(v.value);
       return base;
     }
     if (v.kind === "hole") {
@@ -1036,7 +1309,7 @@ var Lowerer = class {
     let reactive = false;
     let at;
     const body = v.parts.map((p) => {
-      if ("text" in p) return escapeTemplate(p.text);
+      if ("text" in p) return escapeTemplate(decodeEntities(p.text));
       const h = this.hole(p.hole);
       reactive = reactive || h.reactive;
       at ??= h.at;
@@ -1317,9 +1590,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) });
@@ -1335,6 +1611,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";
@@ -1343,9 +1640,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++) {
@@ -1373,6 +1698,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 });
@@ -1442,13 +1768,17 @@ function buildElement(node, ctx, handled) {
   const children = each ? [each] : buildChildren(node.children, ctx);
   if (tag === CONTAINER2) 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);