@sigil-dev/compiler 0.9.10 → 0.9.12

package/package.json

@@ -2,7 +2,7 @@
   "name": "@sigil-dev/compiler",
   "module": "index.ts",
   "type": "module",
-  "version": "0.9.10",
+  "version": "0.9.12",
   "private": false,
   "description": "Compiler for the Sigil framework",
   "peerDependencies": {
@@ -23,8 +23,10 @@
     "@babel/types": "8.0.0-rc.6"
   },
   "dependencies": {
+    "@babel/core": "8.0.0-rc.6",
     "@babel/generator": "^7.29.7",
     "@babel/parser": "^7.29.7",
+    "@babel/plugin-syntax-jsx": "8.0.0-rc.6",
     "@babel/plugin-transform-typescript": "8.0.0-rc.6",
     "@babel/preset-typescript": "8.0.0-rc.6"
   }

package/src/babel/handlers/dom/state.ts

@@ -9,7 +9,9 @@ export function handleState(
 	signals: Set<string>,
 	dev?: boolean,
 	fileKey?: string, // e.g. "src/routes/counter.tsx"
+	raw = false, // $state.raw: same rewrites, no deep proxy
 ): void {
+	const factory = raw ? MAGIC.createRawSignal : MAGIC.createSignal;
 	const { id } = declarator.node;
 	if (!t.isIdentifier(id)) throw new Error("Destructured $state not supported");
 	const name = id.name;
@@ -35,7 +37,7 @@ export function handleState(
 		const key = `${fileKey}#${name}`;
 		// createSignal(__hmrAdopt__("file#count", original))
 		init.replaceWith(
-			t.callExpression(t.identifier(MAGIC.createSignal), [
+			t.callExpression(t.identifier(factory), [
 				t.callExpression(t.identifier("__hmrAdopt__"), [
 					t.stringLiteral(key),
 					...(originalArgs as t.Expression[]),
@@ -53,10 +55,7 @@ export function handleState(
 		);
 	} else {
 		init.replaceWith(
-			t.callExpression(
-				t.identifier(MAGIC.createSignal),
-				originalArgs as t.Expression[],
-			),
+			t.callExpression(t.identifier(factory), originalArgs as t.Expression[]),
 		);
 	}
 

package/src/babel/index.ts

@@ -9,6 +9,13 @@ import { processElementSSR, processFragmentSSR } from "./jsx/ssr.ts";
 import { warnDeadReactivity } from "./util/dead-code.ts";
 import { getMacro } from "./util/helpers.ts";
 import { MAGIC } from "./util/magic.ts";
+import {
+	collectImportRoots,
+	importRoots,
+	liftDestructuredProps,
+	propObjects,
+	rewriteImportReads,
+} from "./util/props.ts";
 
 const SSR_HELPERS = template.statements.ast(`
     const __SAFE = Symbol.for('sigil.safe');
@@ -25,25 +32,53 @@ const SSR_HELPERS = template.statements.ast(`
         if (v === false || v === null || v === undefined) return '';
         return String(v).replace(new RegExp('</(' + tag + ')', 'gi'), '<\\\\/$1');
     };
-    const __b = (n, v) => {
-        if (v === true) return ' ' + n;
-        if (v === false || v === null || v === undefined) return '';
-        return ' ' + n + '="' + __e(v) + '"';
-    };
     const __e = (v) => {
         if (v?.[__SAFE]) return v.v;
         if (Array.isArray(v)) return v.map(x => x?.[__SAFE] ? x.v : __e(x)).join('');
         if (v === false || v === null || v === undefined) return '';
-        if (typeof v === 'object' && v.constructor === Object) {
-            const UNITLESS = new Set(['animationIterationCount','borderImageOutset','borderImageSlice','borderImageWidth','boxFlex','boxFlexGroup','boxSnapAfterPatch','boxSupress','columnCount','columnFlex','columnFlexGrow','columns','flexGrow','flexPositive','flexShrink','flexNegative','fontWeight','gridArea','gridRow','gridRowEnd','gridRowSpan','gridRowStart','gridColumn','gridColumnEnd','gridColumnSpan','gridColumnStart','lineClamp','lineHeight','opacity','order','orphans','tabSize','widows','zIndex','zoom','fillOpacity','floodOpacity','stopOpacity','strokeDasharray','strokeDashoffset','strokeMiterlimit','strokeOpacity','strokeWidth']);
-            return Object.entries(v).map(([k, val]) => {
-                const prop = k.replace(/([A-Z])/g, '-$1').toLowerCase();
-                if (typeof val === 'number' && !UNITLESS.has(k)) return prop + ':' + val + 'px';
-                return prop + ':' + val;
-            }).join(';');
-        }
         return String(v).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
     };
+    // Keep in sync with cssName/cssValue/UNITLESS in @sigil-dev/runtime.
+    const __UNITLESS = new Set(['animation-iteration-count','aspect-ratio','border-image-outset','border-image-slice','border-image-width','column-count','columns','fill-opacity','flex','flex-grow','flex-shrink','flood-opacity','font-weight','grid-area','grid-column','grid-column-end','grid-column-start','grid-row','grid-row-end','grid-row-start','line-clamp','line-height','opacity','order','orphans','scale','stop-opacity','stroke-dasharray','stroke-dashoffset','stroke-miterlimit','stroke-opacity','stroke-width','tab-size','widows','z-index','zoom']);
+    const __css = (v) => {
+        if (v === null || v === undefined || v === false) return '';
+        if (typeof v !== 'object') return String(v);
+        return Object.entries(v).map(([k, val]) => {
+            let name = k.startsWith('--') ? k : k.replace(/[A-Z]/g, c => '-' + c.toLowerCase());
+            if (name.startsWith('ms-')) name = '-' + name;
+            if (val === null || val === undefined || val === false || val === '') return '';
+            if (typeof val === 'number' && val !== 0 && !name.startsWith('--') && !__UNITLESS.has(name)) val = val + 'px';
+            return name + ':' + val;
+        }).filter(Boolean).join(';');
+    };
+    // One attribute. null/undefined drop it; booleans are presence for plain
+    // names (checked, hidden) and spelled out for dashed ones (aria-hidden).
+    const __a = (n, v) => {
+        if (v === null || v === undefined) return '';
+        if (n === 'style') { const c = __css(v); return c ? ' style="' + __e(c) + '"' : ''; }
+        if (typeof v === 'boolean') return n.includes('-') ? ' ' + n + '="' + v + '"' : v ? ' ' + n : '';
+        return ' ' + n + '="' + __e(v) + '"';
+    };
+    const __SPREAD_ATTR = { className: 'class', htmlFor: 'for' };
+    // <div {...props}>: what the client's spread() would set, as HTML.
+    const __s = (o) => {
+        if (!o) return '';
+        let out = '';
+        for (const [k, v] of Object.entries(o)) {
+            if (typeof v === 'function' || k === 'children' || k === 'key' || k === 'innerHTML') continue;
+            out += __a(__SPREAD_ATTR[k] ?? k, v);
+        }
+        return out;
+    };
+    // <select value={v}>: mark the matching <option>s selected.
+    const __sel = (html, v) => {
+        if (v === null || v === undefined) return html;
+        const want = new Set((Array.isArray(v) ? v : [v]).map(__e));
+        return html.replace(/<option\\b[^>]*>/g, (tag) => {
+            const m = / value="([^"]*)"/.exec(tag);
+            return m && want.has(m[1]) && !/ selected[ >=]/.test(tag) ? tag.slice(0, -1) + ' selected>' : tag;
+        });
+    };
 `);
 /**
  * Recursively convert key={expr} to data-key={expr} in JSX tree.
@@ -106,6 +141,8 @@ export default function sigilPlugin(): PluginObject {
 				enter(path, state) {
 					signals.clear();
 					storeSignals.clear();
+					propObjects.clear();
+					importRoots.clear();
 					const opts = (state.opts || {}) as SigilOptions;
 					scopedHash = opts.hash;
 					didTransform = false;
@@ -123,9 +160,17 @@ export default function sigilPlugin(): PluginObject {
 						path.unshiftContainer("body", SSR_HELPERS);
 						return;
 					}
+					liftDestructuredProps(path, signals);
+					collectImportRoots(path);
+					if (rewriteImportReads(path)) didTransform = true;
 				},
 				exit(path, state) {
-					warnDeadReactivity(path, signals, storeSignals, state.filename);
+					warnDeadReactivity(
+						path,
+						signals,
+						new Set([...storeSignals, ...propObjects]),
+						state.filename,
+					);
 
 					if (asyncDefaultPath && !isSSR) {
 						let fnNode: t.FunctionDeclaration;
@@ -207,6 +252,11 @@ export default function sigilPlugin(): PluginObject {
 						"mountTransition",
 						"removeAnimated",
 						"setProp",
+						"setStyleProp",
+						"spread",
+						"isClaimed",
+						"liveSlot",
+						"readStore",
 						...(asyncDefaultPath ? ["__asyncBoundary"] : []),
 					];
 					const runtimeImport = path.node.body.find(
@@ -260,18 +310,17 @@ export default function sigilPlugin(): PluginObject {
 						: null;
 
 					if (name === "$state" || name === "$store" || name === "$state.raw") {
-						if (name === "$state.raw") {
-							if (!isSSR) {
-								const args = init.node.arguments;
-								init.replaceWith(
-									t.callExpression(t.identifier(MAGIC.createRawSignal), args),
-								);
-							}
-							continue;
-						}
 						isSSR
 							? handleStateSSR(path, declarator, init, signals)
-							: handleState(path, declarator, init, signals, isDev, filename); // ← add
+							: handleState(
+									path,
+									declarator,
+									init,
+									signals,
+									isDev,
+									filename,
+									name === "$state.raw",
+								);
 						if (name === "$store" && varName) {
 							storeSignals.add(varName);
 						}
@@ -462,7 +511,7 @@ export default function sigilPlugin(): PluginObject {
 						convertKeyToDataKey(path.node);
 						path.replaceWith(
 							t.callExpression(t.identifier("__h"), [
-								processElementSSR(path.node, signals),
+								processElementSSR(path.node, signals, scopedHash),
 							]),
 						);
 					} catch (e) {
@@ -520,7 +569,7 @@ export default function sigilPlugin(): PluginObject {
 				if (isSSR) {
 					path.replaceWith(
 						t.callExpression(t.identifier("__h"), [
-							processFragmentSSR(path.node, signals),
+							processFragmentSSR(path.node, signals, scopedHash),
 						]),
 					);
 					return;

package/src/babel/jsx/children.ts

@@ -1,6 +1,7 @@
 import { types as t } from "@babel/core";
 import { processElement } from "./element";
 import { processFragment } from "./fragment";
+import { containsSignal, hasJSX, jsxText } from "./utils";
 
 /**
  * Collect children from a JSX element into a children expression.
@@ -29,8 +30,8 @@ export function collectChildren(
 
 	for (const child of node.children) {
 		if (t.isJSXText(child)) {
-			const text = child.value.trim();
-			if (!text) continue;
+			const text = jsxText(child);
+			if (text === null) continue;
 			childrenElements.push(t.stringLiteral(text));
 			continue;
 		}
@@ -43,6 +44,13 @@ export function collectChildren(
 			if (t.isJSXEmptyExpression(expr)) continue;
 			if (t.isJSXElement(expr) || t.isJSXFragment(expr)) {
 				jsx = expr;
+			} else if (containsSignal(expr, signals) || (hydrate && hasJSX(expr))) {
+				// <Box>{on ? <A /> : <B />}</Box>: compile it as <>{…}</> so it
+				// stays reactive (a plain value is read once, when the call is
+				// built) and, like JSX children, claims inside the component.
+				jsx = t.jsxFragment(t.jsxOpeningFragment(), t.jsxClosingFragment(), [
+					child,
+				]);
 			} else {
 				// Plain expression child — pass the value straight through.
 				hasOnlyText = false;