@pyreon/styler 0.16.0 → 0.18.0

package/lib/index.d.ts

@@ -99,6 +99,14 @@ declare const filterProps: (props: Record<string, unknown>) => Record<string, un
  * Build final props for a styled component in a single pass.
  * Combines className merging, ref injection, and prop filtering into one
  * allocation and one iteration.
+ *
+ * Copies own property DESCRIPTORS rather than values for forwarded
+ * props — getter-shaped reactive props (compiler-emitted `_rp(() =>
+ * signal())` converted to getters by `makeReactiveProps`) survive the
+ * copy with their reactive subscription intact. A bare `result[key] =
+ * rawProps[key]` fires the getter at setup time and stores a static
+ * value, breaking signal-driven reactivity for any consumer that reads
+ * `props.x` in a reactive scope downstream.
  */
 declare const buildProps: (rawProps: Record<string, any>, generatedCls: string, isDOM: boolean, customFilter?: (prop: string) => boolean) => Record<string, any>;
 //#endregion

package/lib/index.js

@@ -331,24 +331,36 @@ const filterProps = (props) => {
 * Build final props for a styled component in a single pass.
 * Combines className merging, ref injection, and prop filtering into one
 * allocation and one iteration.
+*
+* Copies own property DESCRIPTORS rather than values for forwarded
+* props — getter-shaped reactive props (compiler-emitted `_rp(() =>
+* signal())` converted to getters by `makeReactiveProps`) survive the
+* copy with their reactive subscription intact. A bare `result[key] =
+* rawProps[key]` fires the getter at setup time and stores a static
+* value, breaking signal-driven reactivity for any consumer that reads
+* `props.x` in a reactive scope downstream.
 */
 const buildProps = (rawProps, generatedCls, isDOM, customFilter) => {
 	const result = {};
 	const userCls = rawProps.class || rawProps.className;
 	if (generatedCls) result.class = userCls ? `${generatedCls} ${userCls}` : generatedCls;
 	else if (userCls) result.class = userCls;
+	const copyDescriptor = (key) => {
+		const d = Object.getOwnPropertyDescriptor(rawProps, key);
+		if (d) Object.defineProperty(result, key, d);
+	};
 	if (!isDOM) {
 		for (const key in rawProps) {
 			if (key === "as" || key === "className" || key === "class") continue;
 			if (key.charCodeAt(0) === 36) continue;
-			result[key] = rawProps[key];
+			copyDescriptor(key);
 		}
 		return result;
 	}
 	if (customFilter) {
 		for (const key in rawProps) {
 			if (key === "as" || key === "className" || key === "class") continue;
-			if (customFilter(key)) result[key] = rawProps[key];
+			if (customFilter(key)) copyDescriptor(key);
 		}
 		return result;
 	}
@@ -356,10 +368,10 @@ const buildProps = (rawProps, generatedCls, isDOM, customFilter) => {
 		if (key === "as" || key === "className" || key === "class") continue;
 		if (key.charCodeAt(0) === 36) continue;
 		if (key.startsWith("data-") || key.startsWith("aria-")) {
-			result[key] = rawProps[key];
+			copyDescriptor(key);
 			continue;
 		}
-		if (HTML_PROPS.has(key)) result[key] = rawProps[key];
+		if (HTML_PROPS.has(key)) copyDescriptor(key);
 	}
 	return result;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/styler",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "Lightweight CSS-in-JS engine for Pyreon",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/test-utils": "^0.13.3",
-    "@pyreon/typescript": "^0.16.0",
+    "@pyreon/test-utils": "^0.13.5",
+    "@pyreon/typescript": "^0.18.0",
     "@vitest/browser-playwright": "^4.1.4",
     "@vitus-labs/tools-rolldown": "^2.3.0"
   },
@@ -51,7 +51,7 @@
     "node": ">= 22"
   },
   "dependencies": {
-    "@pyreon/core": "^0.16.0",
-    "@pyreon/reactivity": "^0.16.0"
+    "@pyreon/core": "^0.18.0",
+    "@pyreon/reactivity": "^0.18.0"
   }
 }

package/src/forward.ts

@@ -225,6 +225,14 @@ export const filterProps = (props: Record<string, unknown>): Record<string, unkn
  * Build final props for a styled component in a single pass.
  * Combines className merging, ref injection, and prop filtering into one
  * allocation and one iteration.
+ *
+ * Copies own property DESCRIPTORS rather than values for forwarded
+ * props — getter-shaped reactive props (compiler-emitted `_rp(() =>
+ * signal())` converted to getters by `makeReactiveProps`) survive the
+ * copy with their reactive subscription intact. A bare `result[key] =
+ * rawProps[key]` fires the getter at setup time and stores a static
+ * value, breaking signal-driven reactivity for any consumer that reads
+ * `props.x` in a reactive scope downstream.
  */
 export const buildProps = (
   rawProps: Record<string, any>,
@@ -234,7 +242,11 @@ export const buildProps = (
 ): Record<string, any> => {
   const result: Record<string, any> = {}
 
-  // Merge generated + user className
+  // Merge generated + user className. Reading `rawProps.class` /
+  // `.className` synchronously is fine — `class` is consumed at this
+  // boundary (merged with the generated class), never forwarded
+  // reactively. The string we write is consumed by the DOM at apply
+  // time, not stored as a getter.
   const userCls = rawProps.class || rawProps.className
   if (generatedCls) {
     result.class = userCls ? `${generatedCls} ${userCls}` : generatedCls
@@ -242,12 +254,19 @@ export const buildProps = (
     result.class = userCls
   }
 
+  // Helper: copy a prop's OWN descriptor (preserves getters) into result.
+  // Falls back to a no-op if the source has no own descriptor for the key.
+  const copyDescriptor = (key: string): void => {
+    const d = Object.getOwnPropertyDescriptor(rawProps, key)
+    if (d) Object.defineProperty(result, key, d)
+  }
+
   // Component target — forward all props except as/className/class and $-prefixed
   if (!isDOM) {
     for (const key in rawProps) {
       if (key === 'as' || key === 'className' || key === 'class') continue
       if (key.charCodeAt(0) === 36) continue // $-prefixed transient
-      result[key] = rawProps[key]
+      copyDescriptor(key)
     }
     return result
   }
@@ -256,7 +275,7 @@ export const buildProps = (
   if (customFilter) {
     for (const key in rawProps) {
       if (key === 'as' || key === 'className' || key === 'class') continue
-      if (customFilter(key)) result[key] = rawProps[key]
+      if (customFilter(key)) copyDescriptor(key)
     }
     return result
   }
@@ -266,10 +285,10 @@ export const buildProps = (
     if (key === 'as' || key === 'className' || key === 'class') continue
     if (key.charCodeAt(0) === 36) continue // $-prefixed transient
     if (key.startsWith('data-') || key.startsWith('aria-')) {
-      result[key] = rawProps[key]
+      copyDescriptor(key)
       continue
     }
-    if (HTML_PROPS.has(key)) result[key] = rawProps[key]
+    if (HTML_PROPS.has(key)) copyDescriptor(key)
   }
   return result
 }