@pyreon/kinetic 0.18.0 → 0.20.0

package/lib/index.js

@@ -1,4 +1,4 @@
-import { Show, createRef, h, onMount, onUnmount } from "@pyreon/core";
+import { Show, createRef, h, mergeProps, onMount, onUnmount, splitProps } from "@pyreon/core";
 import { runUntracked, signal, watch } from "@pyreon/reactivity";
 import { jsx } from "@pyreon/core/jsx-runtime";
 
@@ -172,11 +172,10 @@ const CollapseRenderer = ({ config, htmlProps, show, appear, timeout, transition
 		...stage() !== "entered" ? { overflow: "hidden" } : {},
 		...stage() === "hidden" ? { height: "0px" } : stage() === "entered" ? { height: "auto" } : {}
 	};
-	return h(config.tag, {
+	return h(config.tag, mergeProps(htmlProps, {
 		ref: wrapperRef,
-		...htmlProps,
 		style: wrapperStyle
-	}, /* @__PURE__ */ jsx(Show, {
+	}), /* @__PURE__ */ jsx(Show, {
 		when: shouldRender,
 		children: /* @__PURE__ */ jsx("div", {
 			ref: contentRef,
@@ -479,7 +478,7 @@ const GroupRenderer = ({ config, htmlProps, appear, timeout, callbacks, children
 				children: element
 			});
 		});
-		return h(config.tag, { ...htmlProps }, ...groupedChildren);
+		return h(config.tag, htmlProps, ...groupedChildren);
 	});
 };
 
@@ -526,7 +525,7 @@ const StaggerRenderer = ({ config, htmlProps, show, appear, timeout, interval, r
 			} })
 		}, child.key ?? index);
 	});
-	return h(config.tag, { ...htmlProps }, ...staggeredChildren);
+	return h(config.tag, htmlProps, ...staggeredChildren);
 };
 
 //#endregion
@@ -613,18 +612,14 @@ const TransitionRenderer = (props) => {
 	}, { immediate: true });
 	return /* @__PURE__ */ jsx(Show, {
 		when: shouldMount,
-		fallback: effectiveUnmount ? null : h(props.config.tag, {
+		fallback: effectiveUnmount ? null : h(props.config.tag, mergeProps(props.htmlProps, {
 			ref: mergedRef,
-			...props.htmlProps,
 			style: {
 				...props.htmlProps.style ?? {},
 				display: "none"
 			}
-		}, props.children),
-		children: h(props.config.tag, {
-			ref: mergedRef,
-			...props.htmlProps
-		}, props.children)
+		}), props.children),
+		children: h(props.config.tag, mergeProps(props.htmlProps, { ref: mergedRef }), props.children)
 	});
 };
 
@@ -651,10 +646,7 @@ const KINETIC_KEYS = new Set([
 */
 const createKineticComponent = (config) => {
 	const Component = (props) => {
-		const htmlProps = {};
-		const kineticProps = {};
-		for (const key in props) if (KINETIC_KEYS.has(key)) kineticProps[key] = props[key];
-		else htmlProps[key] = props[key];
+		const [kineticProps, htmlPropsWithChildren] = splitProps(props, [...KINETIC_KEYS]);
 		const { show, appear, unmount, timeout, transition, interval, reverseLeave, onEnter, onAfterEnter, onLeave, onAfterLeave } = kineticProps;
 		const callbacks = {
 			onEnter: onEnter ?? config.onEnter,
@@ -662,7 +654,8 @@ const createKineticComponent = (config) => {
 			onLeave: onLeave ?? config.onLeave,
 			onAfterLeave: onAfterLeave ?? config.onAfterLeave
 		};
-		const { children, ...restHtml } = htmlProps;
+		const [childHolder, restHtml] = splitProps(htmlPropsWithChildren, ["children"]);
+		const children = childHolder.children;
 		if (config.mode === "collapse") return /* @__PURE__ */ jsx(CollapseRenderer, {
 			config,
 			htmlProps: restHtml,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/kinetic",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "CSS-transition-based animation components for Pyreon",
   "license": "MIT",
   "repository": {
@@ -42,11 +42,11 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@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",
+    "@pyreon/core": "^0.20.0",
+    "@pyreon/reactivity": "^0.20.0",
+    "@pyreon/runtime-dom": "^0.20.0",
+    "@pyreon/test-utils": "^0.13.7",
+    "@pyreon/typescript": "^0.20.0",
     "@vitest/browser-playwright": "^4.1.4",
     "@vitus-labs/tools-rolldown": "^2.3.0"
   },
@@ -54,8 +54,8 @@
     "node": ">= 22"
   },
   "dependencies": {
-    "@pyreon/core": "^0.18.0",
-    "@pyreon/reactivity": "^0.18.0",
-    "@pyreon/runtime-dom": "^0.18.0"
+    "@pyreon/core": "^0.20.0",
+    "@pyreon/reactivity": "^0.20.0",
+    "@pyreon/runtime-dom": "^0.20.0"
   }
 }

package/src/__tests__/kinetic.browser.test.tsx

@@ -1,11 +1,42 @@
 /** @jsxImportSource @pyreon/core */
 import { describe, expect, it } from 'vitest'
+import { _rp, h } from '@pyreon/core'
 import { signal } from '@pyreon/reactivity'
 import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
+import kinetic from '../kinetic'
 import { nextFrame, mergeClassNames } from '../utils'
 import Transition from '../Transition'
 
 describe('@pyreon/kinetic browser smoke', () => {
+  // Regression: createKineticComponent + the 4 renderers used to value-copy
+  // user props (`for…in` / `const { children, ...rest }` / `{ ...htmlProps }`),
+  // firing every getter at component-setup time. The compiler emits a
+  // reactive HTML attr as `_rp(() => sig())`; mount.ts's makeReactiveProps
+  // turns it into a getter on `props`. The value-copy collapsed that getter
+  // to a static snapshot, freezing the attribute forever. The fix routes
+  // every hop through descriptor-preserving splitProps / mergeProps / by-ref
+  // so runtime-dom's applyProps detects the getter descriptor and wraps the
+  // read in a renderEffect. Bisect-verified: reverting createKineticComponent's
+  // splitProps split back to `for…in` fails this with `expected 'a' to be 'b'`.
+  it('forwards a reactive HTML attr through the kinetic pipeline (descriptor-preserving)', async () => {
+    const FadeDiv = kinetic('div')
+    const show = signal(true)
+    const v = signal('a')
+    const { container, unmount } = mountInBrowser(
+      h(
+        FadeDiv,
+        { show, 'data-testid': 'fd', 'data-variant': _rp(() => v()) },
+        h('span', { 'data-id': 'kc' }, 'hi'),
+      ),
+    )
+    const el = () => container.querySelector('[data-testid="fd"]')
+    expect(el()?.getAttribute('data-variant')).toBe('a')
+    v.set('b')
+    await flush()
+    expect(el()?.getAttribute('data-variant')).toBe('b')
+    unmount()
+  })
+
   it('Transition mounts a visible child into real DOM', async () => {
     const show = signal(true)
     const { container, unmount } = mountInBrowser(
@@ -51,6 +82,61 @@ describe('@pyreon/kinetic browser smoke', () => {
     expect(mergeClassNames(undefined, undefined)).toBe(undefined)
   })
 
+  // Regression: a kinetic-wrapped component must FORWARD a compiler-shaped
+  // reactive HTML attr (`<KineticDiv class={sig()}>` → `_rp(() => sig())`,
+  // which `makeReactiveProps` turns into a getter on `props`) so the DOM
+  // patches when the signal changes. The factory's prop split + the
+  // renderers' element spread used to value-copy props, firing the getter
+  // once at setup and freezing the attribute. We build the vnode with
+  // `h()` + `_rp()` directly because this browser config has no Pyreon
+  // compiler plugin — that faithfully reproduces the exact post-
+  // makeReactiveProps shape the mount pipeline sees in a real app.
+  //
+  // Bisect-verified: revert createKineticComponent's splitProps back to
+  // `htmlProps[key] = props[key]` → this fails with the className stuck
+  // at 'one' (`expected 'one' to be 'two'`). Restored → passes.
+  it('forwards a compiler-shaped reactive HTML attr — DOM patches on signal change (transition mode)', async () => {
+    const KineticDiv = kinetic('div')
+    const cls = signal('one')
+    const { container, unmount } = mountInBrowser(
+      h(
+        KineticDiv,
+        { show: () => true, class: _rp(() => cls()) },
+        h('span', { 'data-id': 'k' }, 'x'),
+      ),
+    )
+    const el = () => container.querySelector('div')
+    expect(el()?.querySelector('[data-id="k"]')?.textContent).toBe('x')
+    expect(el()?.className).toBe('one')
+
+    cls.set('two')
+    await flush()
+    expect(el()?.className).toBe('two')
+
+    cls.set('three')
+    await flush()
+    expect(el()?.className).toBe('three')
+    unmount()
+  })
+
+  it('forwards a compiler-shaped reactive HTML attr — collapse mode (mergeProps path)', async () => {
+    const KineticDiv = kinetic('div').collapse()
+    const cls = signal('a')
+    const { container, unmount } = mountInBrowser(
+      h(
+        KineticDiv,
+        { show: () => true, class: _rp(() => cls()) },
+        h('span', { 'data-id': 'c' }, 'y'),
+      ),
+    )
+    const el = () => container.querySelector('div')
+    expect(el()?.className).toBe('a')
+    cls.set('b')
+    await flush()
+    expect(el()?.className).toBe('b')
+    unmount()
+  })
+
   it('runs in a real browser — Vitest defines `process.env.NODE_ENV !== "production"`', () => {
     // Sanity check the test env: dev gates use bundler-agnostic
     // `process.env.NODE_ENV !== 'production'`. Vitest's Vite pipeline

package/src/kinetic/CollapseRenderer.tsx

@@ -1,5 +1,5 @@
 import type { VNode } from '@pyreon/core'
-import { createRef, h, Show } from '@pyreon/core'
+import { createRef, h, mergeProps, Show } from '@pyreon/core'
 import { runUntracked, signal, watch } from '@pyreon/reactivity'
 import type { CSSProperties, TransitionCallbacks, TransitionStage } from '../types'
 import useAnimationEnd from '../useAnimationEnd'
@@ -166,9 +166,16 @@ const CollapseRenderer = ({
     ...(stage() === 'hidden' ? { height: '0px' } : stage() === 'entered' ? { height: 'auto' } : {}),
   }
 
+  // mergeProps (descriptor-preserving) instead of `{ ...htmlProps }` —
+  // every non-style HTML attr keeps its reactive getter; ref + the
+  // collapse-controlled style come last so they win (mergeProps is
+  // last-source-wins). The one-time `htmlProps.style` read above that
+  // seeds wrapperStyle is intentional: collapse OWNS the style prop
+  // (height/overflow are animation-driven), so a static merge of the
+  // user's initial style with the collapse overrides is correct here.
   return h(
     config.tag,
-    { ref: wrapperRef, ...htmlProps, style: wrapperStyle },
+    mergeProps(htmlProps, { ref: wrapperRef, style: wrapperStyle }),
     <Show when={shouldRender}>
       <div ref={contentRef}>{children}</div>
     </Show>,

package/src/kinetic/GroupRenderer.tsx

@@ -140,7 +140,9 @@ const GroupRenderer = ({
       )
     })
 
-    return h(config.tag, { ...htmlProps }, ...groupedChildren)
+    // By reference — `{ ...htmlProps }` would value-copy and freeze any
+    // reactive HTML attr the kinetic split preserved as a getter.
+    return h(config.tag, htmlProps, ...groupedChildren)
   }) as unknown as VNode
 }
 

package/src/kinetic/StaggerRenderer.tsx

@@ -82,7 +82,11 @@ const StaggerRenderer = ({
     )
   })
 
-  return h(config.tag, { ...htmlProps }, ...staggeredChildren)
+  // Pass htmlProps by reference — `{ ...htmlProps }` value-copies, firing
+  // any reactive getter the kinetic split preserved (frozen attr forever).
+  // runtime-dom's applyProps detects the getter descriptor on the live
+  // object and wraps it in renderEffect.
+  return h(config.tag, htmlProps, ...staggeredChildren)
 }
 
 export default StaggerRenderer

package/src/kinetic/TransitionRenderer.tsx

@@ -1,5 +1,5 @@
 import type { VNode } from '@pyreon/core'
-import { createRef, h, Show } from '@pyreon/core'
+import { createRef, h, mergeProps, Show } from '@pyreon/core'
 import { watch } from '@pyreon/reactivity'
 import type { CSSProperties, TransitionCallbacks } from '../types'
 import useAnimationEnd from '../useAnimationEnd'
@@ -139,19 +139,28 @@ const TransitionRenderer = (props: TransitionRendererProps): VNode | null => {
           ? null
           : h(
               props.config.tag,
-              {
+              // mergeProps keeps every reactive HTML-attr getter; ref + the
+              // hidden-state `display:none` style come last and win. The
+              // one-time `props.htmlProps.style` read seeds the hidden
+              // style — display:none must compose over the user's style.
+              mergeProps(props.htmlProps, {
                 ref: mergedRef,
-                ...props.htmlProps,
                 style: {
                   ...((props.htmlProps.style as CSSProperties) ?? {}),
                   display: 'none',
                 },
-              },
+              }),
               props.children,
             )
       }
     >
-      {h(props.config.tag, { ref: mergedRef, ...props.htmlProps }, props.children)}
+      {h(
+        props.config.tag,
+        // Descriptor-preserving merge — reactive HTML attrs keep their
+        // getters; ref wins last. `{ ...props.htmlProps }` would freeze them.
+        mergeProps(props.htmlProps, { ref: mergedRef }),
+        props.children,
+      )}
     </Show>
   )
 }

package/src/kinetic/createKineticComponent.tsx

@@ -1,4 +1,5 @@
 import type { VNode } from '@pyreon/core'
+import { splitProps } from '@pyreon/core'
 import type { CSSProperties, TransitionCallbacks } from '../types'
 import CollapseRenderer from './CollapseRenderer'
 import GroupRenderer from './GroupRenderer'
@@ -30,17 +31,25 @@ const createKineticComponent = <Tag extends string, Mode extends KineticMode = '
   config: KineticConfig,
 ): KineticComponent<Tag, Mode> => {
   const Component = (props: Record<string, unknown>): VNode | null => {
-    // Separate kinetic-specific props from HTML pass-through props
-    const htmlProps: Record<string, unknown> = {}
-    const kineticProps: Record<string, unknown> = {}
-
-    for (const key in props) {
-      if (KINETIC_KEYS.has(key)) {
-        kineticProps[key] = props[key]
-      } else {
-        htmlProps[key] = props[key]
-      }
-    }
+    // Separate kinetic-specific props from HTML pass-through props.
+    // MUST use splitProps (descriptor-preserving) — a plain
+    // `htmlProps[key] = props[key]` value-copy fires every getter at
+    // component-setup time. The compiler emits `<KineticDiv class={sig()}>`
+    // as `_rp(() => sig())`, which `makeReactiveProps` turns into a getter
+    // on `props`; reading it here (outside any tracking scope) would
+    // collapse it to a static snapshot and freeze the HTML attr forever.
+    // splitProps copies DESCRIPTORS via Object.getOwnPropertyDescriptor +
+    // Object.defineProperty, so the getter survives to the renderer's
+    // `h(config.tag, htmlProps)` where runtime-dom's applyProps detects
+    // the descriptor and wraps the read in renderEffect.
+    // `props` is `Record<string, unknown>`, so `Omit<…, string>` collapses
+    // to `{}` at the type level — the runtime split is correct (splitProps
+    // copies descriptors for every own key not in the pick set), only the
+    // inferred result types degrade. Cast back to the real shape.
+    const [kineticProps, htmlPropsWithChildren] = splitProps(props, [...KINETIC_KEYS]) as [
+      Record<string, unknown>,
+      Record<string, unknown>,
+    ]
 
     const {
       show,
@@ -71,8 +80,12 @@ const createKineticComponent = <Tag extends string, Mode extends KineticMode = '
       onAfterLeave: onAfterLeave ?? config.onAfterLeave,
     }
 
-    // Extract children from htmlProps (it's not an HTML attribute)
-    const { children, ...restHtml } = htmlProps
+    // Carve `children` out of the HTML pass-through set — also via
+    // splitProps so the remaining HTML attrs keep their getter
+    // descriptors (`const { children, ...restHtml } = …` is the same
+    // value-copy footgun as the split above).
+    const [childHolder, restHtml] = splitProps(htmlPropsWithChildren, ['children'])
+    const children = childHolder.children
 
     if (config.mode === 'collapse') {
       return (