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

package/dist/lower/entities.js

@@ -0,0 +1,54 @@
+/**
+ * HTML character references in template text and static attributes. Templates accept the
+ * entities JSX accepts: the XHTML 1.0 set (the list Babel decodes) and numeric references,
+ * each ended by a semicolon. Anything else is left as written.
+ */
+const NAMED = {
+    quot: 0x22, amp: 0x26, apos: 0x27, lt: 0x3c, gt: 0x3e, nbsp: 0xa0, iexcl: 0xa1, cent: 0xa2,
+    pound: 0xa3, curren: 0xa4, yen: 0xa5, brvbar: 0xa6, sect: 0xa7, uml: 0xa8, copy: 0xa9,
+    ordf: 0xaa, laquo: 0xab, not: 0xac, shy: 0xad, reg: 0xae, macr: 0xaf, deg: 0xb0, plusmn: 0xb1,
+    sup2: 0xb2, sup3: 0xb3, acute: 0xb4, micro: 0xb5, para: 0xb6, middot: 0xb7, cedil: 0xb8,
+    sup1: 0xb9, ordm: 0xba, raquo: 0xbb, frac14: 0xbc, frac12: 0xbd, frac34: 0xbe, iquest: 0xbf,
+    Agrave: 0xc0, Aacute: 0xc1, Acirc: 0xc2, Atilde: 0xc3, Auml: 0xc4, Aring: 0xc5, AElig: 0xc6,
+    Ccedil: 0xc7, Egrave: 0xc8, Eacute: 0xc9, Ecirc: 0xca, Euml: 0xcb, Igrave: 0xcc, Iacute: 0xcd,
+    Icirc: 0xce, Iuml: 0xcf, ETH: 0xd0, Ntilde: 0xd1, Ograve: 0xd2, Oacute: 0xd3, Ocirc: 0xd4,
+    Otilde: 0xd5, Ouml: 0xd6, times: 0xd7, Oslash: 0xd8, Ugrave: 0xd9, Uacute: 0xda, Ucirc: 0xdb,
+    Uuml: 0xdc, Yacute: 0xdd, THORN: 0xde, szlig: 0xdf, agrave: 0xe0, aacute: 0xe1, acirc: 0xe2,
+    atilde: 0xe3, auml: 0xe4, aring: 0xe5, aelig: 0xe6, ccedil: 0xe7, egrave: 0xe8, eacute: 0xe9,
+    ecirc: 0xea, euml: 0xeb, igrave: 0xec, iacute: 0xed, icirc: 0xee, iuml: 0xef, eth: 0xf0,
+    ntilde: 0xf1, ograve: 0xf2, oacute: 0xf3, ocirc: 0xf4, otilde: 0xf5, ouml: 0xf6, divide: 0xf7,
+    oslash: 0xf8, ugrave: 0xf9, uacute: 0xfa, ucirc: 0xfb, uuml: 0xfc, yacute: 0xfd, thorn: 0xfe,
+    yuml: 0xff, OElig: 0x152, oelig: 0x153, Scaron: 0x160, scaron: 0x161, Yuml: 0x178, fnof: 0x192,
+    circ: 0x2c6, tilde: 0x2dc, Alpha: 0x391, Beta: 0x392, Gamma: 0x393, Delta: 0x394,
+    Epsilon: 0x395, Zeta: 0x396, Eta: 0x397, Theta: 0x398, Iota: 0x399, Kappa: 0x39a,
+    Lambda: 0x39b, Mu: 0x39c, Nu: 0x39d, Xi: 0x39e, Omicron: 0x39f, Pi: 0x3a0, Rho: 0x3a1,
+    Sigma: 0x3a3, Tau: 0x3a4, Upsilon: 0x3a5, Phi: 0x3a6, Chi: 0x3a7, Psi: 0x3a8, Omega: 0x3a9,
+    alpha: 0x3b1, beta: 0x3b2, gamma: 0x3b3, delta: 0x3b4, epsilon: 0x3b5, zeta: 0x3b6, eta: 0x3b7,
+    theta: 0x3b8, iota: 0x3b9, kappa: 0x3ba, lambda: 0x3bb, mu: 0x3bc, nu: 0x3bd, xi: 0x3be,
+    omicron: 0x3bf, pi: 0x3c0, rho: 0x3c1, sigmaf: 0x3c2, sigma: 0x3c3, tau: 0x3c4, upsilon: 0x3c5,
+    phi: 0x3c6, chi: 0x3c7, psi: 0x3c8, omega: 0x3c9, thetasym: 0x3d1, upsih: 0x3d2, piv: 0x3d6,
+    ensp: 0x2002, emsp: 0x2003, thinsp: 0x2009, zwnj: 0x200c, zwj: 0x200d, lrm: 0x200e,
+    rlm: 0x200f, ndash: 0x2013, mdash: 0x2014, lsquo: 0x2018, rsquo: 0x2019, sbquo: 0x201a,
+    ldquo: 0x201c, rdquo: 0x201d, bdquo: 0x201e, dagger: 0x2020, Dagger: 0x2021, bull: 0x2022,
+    hellip: 0x2026, permil: 0x2030, prime: 0x2032, Prime: 0x2033, lsaquo: 0x2039, rsaquo: 0x203a,
+    oline: 0x203e, frasl: 0x2044, euro: 0x20ac, image: 0x2111, weierp: 0x2118, real: 0x211c,
+    trade: 0x2122, alefsym: 0x2135, larr: 0x2190, uarr: 0x2191, rarr: 0x2192, darr: 0x2193,
+    harr: 0x2194, crarr: 0x21b5, lArr: 0x21d0, uArr: 0x21d1, rArr: 0x21d2, dArr: 0x21d3,
+    hArr: 0x21d4, forall: 0x2200, part: 0x2202, exist: 0x2203, empty: 0x2205, nabla: 0x2207,
+    isin: 0x2208, notin: 0x2209, ni: 0x220b, prod: 0x220f, sum: 0x2211, minus: 0x2212,
+    lowast: 0x2217, radic: 0x221a, prop: 0x221d, infin: 0x221e, ang: 0x2220, and: 0x2227,
+    or: 0x2228, cap: 0x2229, cup: 0x222a, int: 0x222b, there4: 0x2234, sim: 0x223c, cong: 0x2245,
+    asymp: 0x2248, ne: 0x2260, equiv: 0x2261, le: 0x2264, ge: 0x2265, sub: 0x2282, sup: 0x2283,
+    nsub: 0x2284, sube: 0x2286, supe: 0x2287, oplus: 0x2295, otimes: 0x2297, perp: 0x22a5,
+    sdot: 0x22c5, lceil: 0x2308, rceil: 0x2309, lfloor: 0x230a, rfloor: 0x230b, lang: 0x2329,
+    rang: 0x232a, loz: 0x25ca, spades: 0x2660, clubs: 0x2663, hearts: 0x2665, diams: 0x2666,
+};
+const REFERENCE = /&(?:#[xX]([0-9a-fA-F]{1,6})|#([0-9]{1,7})|([a-zA-Z][a-zA-Z0-9]{1,31}));/g;
+export 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] : undefined;
+        return code !== undefined && code <= 0x10ffff ? String.fromCodePoint(code) : match;
+    });
+}

package/dist/lower/entities.mjs

@@ -0,0 +1,267 @@
+// 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;
+  });
+}
+export {
+  decodeEntities
+};

package/dist/lower/jsx.cjs

@@ -332,6 +332,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",
@@ -536,50 +580,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",
@@ -641,7 +641,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(", ")} })`;
   }
@@ -885,9 +885,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) });
@@ -903,6 +906,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";
@@ -911,9 +935,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++) {
@@ -941,6 +993,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 });
@@ -1010,13 +1063,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);

package/dist/lower/jsx.d.cts

@@ -18,6 +18,14 @@ export interface JsxContext {
     used: Set<string>;
     /** The file being compiled, when component usage sites are to be recorded. */
     sourceFile?: string;
+    /** Scoped styles: intrinsic elements inside a range get `data-fx-s` set to its value. */
+    scopes?: {
+        start: number;
+        end: number;
+        value: string;
+    }[];
+    /** Start offsets of `<style>` elements the compiler took out of the template. */
+    dropStyles?: Set<number>;
 }
 export declare const SVG_TAGS: Set<string>;
 /** Build IR from a JSXElement or JSXFragment. */

package/dist/lower/jsx.d.ts

@@ -18,6 +18,14 @@ export interface JsxContext {
     used: Set<string>;
     /** The file being compiled, when component usage sites are to be recorded. */
     sourceFile?: string;
+    /** Scoped styles: intrinsic elements inside a range get `data-fx-s` set to its value. */
+    scopes?: {
+        start: number;
+        end: number;
+        value: string;
+    }[];
+    /** Start offsets of `<style>` elements the compiler took out of the template. */
+    dropStyles?: Set<number>;
 }
 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;AASjF,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;AAsTH,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;AAUjF,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;IACpB,yFAAyF;IACzF,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACzD,iFAAiF;IACjF,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC1B;AAED,eAAO,MAAM,QAAQ,aAGnB,CAAC;AAoYH,iDAAiD;AACjD,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,GAAG,MAAM,CAM9D"}