@pyreon/elements 0.16.0 → 0.18.0

package/lib/index.js

@@ -1,5 +1,5 @@
 import { Provider, alignContent, extendCss, makeItResponsive, value } from "@pyreon/unistyle";
-import { Fragment, Portal, createContext, nativeCompat, onMount, onUnmount, provide, splitProps, useContext } from "@pyreon/core";
+import { Fragment, Portal, createContext, h, nativeCompat, onMount, onUnmount, provide, splitProps, useContext } from "@pyreon/core";
 import { config, isEmpty, omit, pick, render, throttle } from "@pyreon/ui-core";
 import { Fragment as Fragment$1, jsx, jsxs } from "@pyreon/core/jsx-runtime";
 import { signal } from "@pyreon/reactivity";
@@ -331,6 +331,34 @@ const isWebFixNeeded = (tag) => {
 * support `display: flex` consistently across browsers.
 */
 const DEV_PROPS = IS_DEVELOPMENT ? { "data-pyr-element": "Element" } : {};
+/**
+* Build a props object for `h(Styled, ...)` by copying own property
+* DESCRIPTORS from `rest`, then layering the additional fields. Compiler-
+* emitted reactive props (`_rp(() => signal())` converted to getters by
+* `makeReactiveProps`) survive end-to-end with their getter intact.
+*
+* Why we bypass JSX spread here: the standard JSX automatic-runtime
+* compilation lowers `<Styled {...rest} foo={x}>` to roughly
+* `jsx(Styled, { ...rest, foo: x })`. That `{...rest, foo: x}` object
+* literal is evaluated at JS level — it fires every getter on `rest` and
+* stores the resolved value before `jsx()` ever sees the object. No
+* amount of in-runtime descriptor preservation can recover the getters
+* once they've been collapsed by the surface-level spread. The fix is
+* structural: don't use JSX spread for reactive-prop forwarding. Build
+* the props object with descriptor preservation and pass it to `h()`
+* directly — `h()` stores props as-is on the vnode, no copy, getters
+* survive into mount.
+*/
+const buildStyledProps = (rest, refValue, asTag, extras) => {
+	const result = {};
+	const descriptors = Object.getOwnPropertyDescriptors(rest);
+	for (const key in descriptors) Object.defineProperty(result, key, descriptors[key]);
+	for (const key in DEV_PROPS) result[key] = DEV_PROPS[key];
+	result.ref = refValue;
+	result.as = asTag;
+	for (const key in extras) result[key] = extras[key];
+	return result;
+};
 const OWN_KEYS = [
 	"children",
 	"tag",
@@ -346,12 +374,6 @@ const OWN_KEYS = [
 ];
 const Component$8 = (props) => {
 	const [own, rest] = splitProps(props, OWN_KEYS);
-	const commonProps = {
-		...rest,
-		...DEV_PROPS,
-		ref: own.ref,
-		as: own.tag
-	};
 	const needsFix = !own.dangerouslySetInnerHTML && isWebFixNeeded(own.tag);
 	const isVoidTag = !own.dangerouslySetInnerHTML && getShouldBeEmpty(own.tag);
 	const innerHTML = own.dangerouslySetInnerHTML;
@@ -364,20 +386,15 @@ const Component$8 = (props) => {
 			equalCols: own.equalCols,
 			extraStyles: own.extendCss
 		});
-		if (isVoidTag) return /* @__PURE__ */ jsx(styled_default$1, {
-			...commonProps,
-			$element: bundle
-		});
-		if (innerHTML) return /* @__PURE__ */ jsx(styled_default$1, {
-			...commonProps,
+		if (isVoidTag) return h(styled_default$1, buildStyledProps(rest, own.ref, own.tag, { $element: bundle }));
+		if (innerHTML) return h(styled_default$1, buildStyledProps(rest, own.ref, own.tag, {
 			$element: bundle,
 			dangerouslySetInnerHTML: innerHTML
-		});
-		return /* @__PURE__ */ jsx(styled_default$1, {
-			...commonProps,
+		}));
+		return h(styled_default$1, buildStyledProps(rest, own.ref, own.tag, {
 			$element: bundle,
 			children: own.children
-		});
+		}));
 	}
 	const asTag = own.isInline ? "span" : "div";
 	const parentBundle = internElementBundle({
@@ -392,26 +409,24 @@ const Component$8 = (props) => {
 		alignY: own.alignY,
 		equalCols: own.equalCols
 	});
-	if (innerHTML) return /* @__PURE__ */ jsx(styled_default$1, {
-		...commonProps,
+	if (innerHTML) return h(styled_default$1, buildStyledProps(rest, own.ref, own.tag, {
 		$element: parentBundle,
-		children: /* @__PURE__ */ jsx(styled_default$1, {
+		children: h(styled_default$1, {
 			as: asTag,
 			$childFix: true,
 			$element: childBundle,
 			dangerouslySetInnerHTML: innerHTML
 		})
-	});
-	return /* @__PURE__ */ jsx(styled_default$1, {
-		...commonProps,
+	}));
+	return h(styled_default$1, buildStyledProps(rest, own.ref, own.tag, {
 		$element: parentBundle,
-		children: /* @__PURE__ */ jsx(styled_default$1, {
+		children: h(styled_default$1, {
 			as: asTag,
 			$childFix: true,
 			$element: childBundle,
 			children: own.children
 		})
-	});
+	}));
 };
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/elements",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "Foundational UI components for Pyreon",
   "license": "MIT",
   "repository": {
@@ -42,11 +42,11 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/core": "^0.16.0",
-    "@pyreon/reactivity": "^0.16.0",
-    "@pyreon/runtime-dom": "^0.16.0",
-    "@pyreon/test-utils": "^0.13.3",
-    "@pyreon/typescript": "^0.16.0",
+    "@pyreon/core": "^0.18.0",
+    "@pyreon/reactivity": "^0.18.0",
+    "@pyreon/runtime-dom": "^0.18.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"
   },
@@ -54,9 +54,9 @@
     "node": ">= 22"
   },
   "dependencies": {
-    "@pyreon/core": "^0.16.0",
-    "@pyreon/reactivity": "^0.16.0",
-    "@pyreon/ui-core": "^0.16.0",
-    "@pyreon/unistyle": "^0.16.0"
+    "@pyreon/core": "^0.18.0",
+    "@pyreon/reactivity": "^0.18.0",
+    "@pyreon/ui-core": "^0.18.0",
+    "@pyreon/unistyle": "^0.18.0"
   }
 }

package/src/helpers/Wrapper/component.tsx

@@ -4,7 +4,7 @@
  * fix (parent + child Styled) because these HTML elements do not natively
  * support `display: flex` consistently across browsers.
  */
-import { splitProps } from '@pyreon/core'
+import { h, splitProps } from '@pyreon/core'
 import { getShouldBeEmpty } from '../../Element/utils'
 import { IS_DEVELOPMENT } from '../../utils'
 import { internElementBundle } from '../internElementBundle'
@@ -14,6 +14,46 @@ import { isWebFixNeeded } from './utils'
 
 const DEV_PROPS: Record<string, string> = IS_DEVELOPMENT ? { 'data-pyr-element': 'Element' } : {}
 
+/**
+ * Build a props object for `h(Styled, ...)` by copying own property
+ * DESCRIPTORS from `rest`, then layering the additional fields. Compiler-
+ * emitted reactive props (`_rp(() => signal())` converted to getters by
+ * `makeReactiveProps`) survive end-to-end with their getter intact.
+ *
+ * Why we bypass JSX spread here: the standard JSX automatic-runtime
+ * compilation lowers `<Styled {...rest} foo={x}>` to roughly
+ * `jsx(Styled, { ...rest, foo: x })`. That `{...rest, foo: x}` object
+ * literal is evaluated at JS level — it fires every getter on `rest` and
+ * stores the resolved value before `jsx()` ever sees the object. No
+ * amount of in-runtime descriptor preservation can recover the getters
+ * once they've been collapsed by the surface-level spread. The fix is
+ * structural: don't use JSX spread for reactive-prop forwarding. Build
+ * the props object with descriptor preservation and pass it to `h()`
+ * directly — `h()` stores props as-is on the vnode, no copy, getters
+ * survive into mount.
+ */
+const buildStyledProps = (
+  rest: Record<string, unknown>,
+  refValue: unknown,
+  asTag: unknown,
+  extras: Record<string, unknown>,
+): Record<string, unknown> => {
+  const result: Record<string, unknown> = {}
+  const descriptors = Object.getOwnPropertyDescriptors(rest)
+  for (const key in descriptors) {
+    Object.defineProperty(result, key, descriptors[key]!)
+  }
+  for (const key in DEV_PROPS) {
+    result[key] = DEV_PROPS[key]
+  }
+  result.ref = refValue
+  result.as = asTag
+  for (const key in extras) {
+    result[key] = extras[key]
+  }
+  return result
+}
+
 // Layout / ref keys consumed by Wrapper itself. Everything else is forwarded
 // onto the underlying DOM node. Listed as a tuple so `splitProps` narrows
 // `own` correctly while preserving reactive prop tracking on both halves.
@@ -34,13 +74,6 @@ const OWN_KEYS: Array<keyof Props | 'ref'> = [
 const Component = (props: Partial<Props> & { ref?: unknown }) => {
   const [own, rest] = splitProps(props, OWN_KEYS)
 
-  const commonProps = {
-    ...rest,
-    ...DEV_PROPS,
-    ref: own.ref,
-    as: own.tag,
-  }
-
   const needsFix = !own.dangerouslySetInnerHTML && isWebFixNeeded(own.tag)
 
   // Void HTML elements (hr, input, img, br, …) cannot have children. Even
@@ -69,15 +102,28 @@ const Component = (props: Partial<Props> & { ref?: unknown }) => {
       extraStyles: own.extendCss,
     })
     if (isVoidTag) {
-      return <Styled {...commonProps} $element={bundle} />
+      return h(
+        Styled,
+        buildStyledProps(rest as unknown as Record<string, unknown>, own.ref, own.tag, {
+          $element: bundle,
+        }),
+      )
     }
     if (innerHTML) {
-      return <Styled {...commonProps} $element={bundle} dangerouslySetInnerHTML={innerHTML} />
+      return h(
+        Styled,
+        buildStyledProps(rest as unknown as Record<string, unknown>, own.ref, own.tag, {
+          $element: bundle,
+          dangerouslySetInnerHTML: innerHTML,
+        }),
+      )
     }
-    return (
-      <Styled {...commonProps} $element={bundle}>
-        {own.children}
-      </Styled>
+    return h(
+      Styled,
+      buildStyledProps(rest as unknown as Record<string, unknown>, own.ref, own.tag, {
+        $element: bundle,
+        children: own.children,
+      }),
     )
   }
 
@@ -103,24 +149,31 @@ const Component = (props: Partial<Props> & { ref?: unknown }) => {
   // the defensive forwarding so the contract is robust against future
   // refactors of the needsFix gate.
   if (innerHTML) {
-    return (
-      <Styled {...commonProps} $element={parentBundle}>
-        <Styled
-          as={asTag}
-          $childFix
-          $element={childBundle}
-          dangerouslySetInnerHTML={innerHTML}
-        />
-      </Styled>
+    return h(
+      Styled,
+      buildStyledProps(rest as unknown as Record<string, unknown>, own.ref, own.tag, {
+        $element: parentBundle,
+        children: h(Styled, {
+          as: asTag,
+          $childFix: true,
+          $element: childBundle,
+          dangerouslySetInnerHTML: innerHTML,
+        }),
+      }),
     )
   }
 
-  return (
-    <Styled {...commonProps} $element={parentBundle}>
-      <Styled as={asTag} $childFix $element={childBundle}>
-        {own.children}
-      </Styled>
-    </Styled>
+  return h(
+    Styled,
+    buildStyledProps(rest as unknown as Record<string, unknown>, own.ref, own.tag, {
+      $element: parentBundle,
+      children: h(Styled, {
+        as: asTag,
+        $childFix: true,
+        $element: childBundle,
+        children: own.children,
+      }),
+    }),
   )
 }