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

package/dist/index.cjs

@@ -1,4 +1,4 @@
-/*! @fluixi/compiler v1.0.0-alpha.93 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.94 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -355,6 +355,11 @@ var INTRINSICS = {
   // An environment variable, public or server-only; the browser build refuses a secret.
   $env: { export: "env", module: "@fluixi/start/env", returns: "plain" }
 };
+var TAG_INTRINSICS = {
+  $html: { export: "html", module: "@fluixi/core" },
+  $svg: { export: "svg", module: "@fluixi/core" },
+  $css: { export: "css", module: "@fluixi/core" }
+};
 var INTRINSIC_CALL = new RegExp(`\\$(?:${Object.keys(INTRINSICS).map((n) => n.slice(1)).join("|")})\\s*\\(`);
 
 // src/transform/source-locations.ts
@@ -535,7 +540,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(", ")} })`;
   }
@@ -674,6 +679,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",
@@ -760,7 +1030,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":
@@ -796,7 +1066,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 } : {}
@@ -909,13 +1179,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) {
@@ -955,15 +1234,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;
         }
@@ -983,18 +1260,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(", ")}]` });
@@ -1083,7 +1361,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") {
@@ -1096,7 +1374,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;
@@ -1113,6 +1391,26 @@ function lowerTemplate(pieces, holes, used, opts = {}) {
   return new Lowerer(holes, used, opts.sourceFile, opts.positionAt).lowerRoot(root.children);
 }
 
+// src/transform/styles.ts
+var import_sourcemap_codec = require("@jridgewell/sourcemap-codec");
+var SCOPE_ATTR = "data-fx-s";
+function applyTemplateStyles(ir, t) {
+  const walk2 = (node) => {
+    const children = node.children;
+    if (children) {
+      for (let i = children.length - 1; i >= 0; i--) {
+        const child = children[i];
+        if (child.kind === "element" && child.tag === "style" && t.owner) children.splice(i, 1);
+        else walk2(child);
+      }
+    }
+    if (t.scope && node.kind === "element" && node.tag !== "style" && node.props && !node.props.some((p) => p.name === SCOPE_ATTR)) {
+      node.props.unshift({ name: SCOPE_ATTR, kind: "attr", literal: t.scope });
+    }
+  };
+  walk2(ir);
+}
+
 // src/optimize/analyze-static.ts
 function propReason(prop) {
   switch (prop.kind) {
@@ -1388,6 +1686,7 @@ function compilePieces(pieces, holes, options = {}) {
     ...options.sourceFile ? { sourceFile: options.sourceFile } : {},
     ...options.positionAt ? { positionAt: options.positionAt } : {}
   });
+  if (options.templateStyles) applyTemplateStyles(ir, options.templateStyles);
   analyzeStatic(ir);
   resolveComponentSources(ir, {
     resolver: createComponentResolver(options.resolve ?? []),
@@ -1471,7 +1770,7 @@ function componentGlobals(rules, options = {}) {
       resolved.set(name, target);
     }
   }
-  const usableIntrinsics = intrinsics ? Object.entries(INTRINSICS).filter(([, i]) => {
+  const usableIntrinsics = intrinsics ? Object.entries({ ...INTRINSICS, ...TAG_INTRINSICS }).filter(([, i]) => {
     const pkg = packageOf(i.module);
     return !available || !pkg || available.has(pkg);
   }) : [];