@pyreon/elements 0.24.2 → 0.24.3

package/lib/index.js

@@ -91,8 +91,15 @@ const StyledComponent = styled$2(component$1, { layer: "elements" })`
 * gap, and equalCols styling props to the underlying styled component.
 * Adds a `data-pyr-element` attribute in development for debugging.
 *
-* Children are rendered via core `render()`.
+* Children are rendered via core `render()`, with function-valued
+* children unwrapped inside a reactive accessor so the compound-layout
+* paths in `Element` keep `content={() => <X />}` reactivity intact
+* (mirrors the `resolveSlot` helper in `Element/component.tsx`).
 */
+const resolveSlot = (value) => {
+	if (typeof value === "function") return value();
+	return render(value);
+};
 const Component$9 = (props) => {
 	const [own, rest] = splitProps(props, [
 		"contentType",
@@ -123,7 +130,7 @@ const Component$9 = (props) => {
 		$element: stylingProps,
 		...debugProps,
 		...rest,
-		children: render(own.children)
+		children: () => resolveSlot(own.children)
 	});
 };
 
@@ -508,6 +515,10 @@ const Component = (props) => {
 	const shouldBeEmpty = !!rest.dangerouslySetInnerHTML || getShouldBeEmpty(own.tag);
 	const isSimpleElement = !own.beforeContent && !own.afterContent;
 	const getChildren = () => own.children ?? own.content ?? own.label;
+	const resolveSlot = (value) => {
+		if (typeof value === "function") return value();
+		return render(value);
+	};
 	const isInline = isInlineElement(own.tag);
 	const SUB_TAG = isInline ? "span" : void 0;
 	let wrapperDirection = own.direction;
@@ -563,13 +574,13 @@ const Component = (props) => {
 			equalCols: own.equalCols,
 			extraStyles: own.css
 		}),
-		children: render(getChildren())
+		children: () => resolveSlot(getChildren())
 	});
 	if (isSimpleElement) return /* @__PURE__ */ jsx(Wrapper_default, {
 		...rest,
 		...WRAPPER_PROPS,
 		isInline,
-		children: render(getChildren())
+		children: () => resolveSlot(getChildren())
 	});
 	return /* @__PURE__ */ jsxs(Wrapper_default, {
 		...rest,
@@ -586,7 +597,7 @@ const Component = (props) => {
 				alignY: beforeContentAlignY,
 				equalCols: own.equalCols,
 				gap: own.gap,
-				children: own.beforeContent
+				children: () => resolveSlot(own.beforeContent)
 			}),
 			/* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
@@ -597,7 +608,7 @@ const Component = (props) => {
 				alignX: contentAlignX,
 				alignY: contentAlignY,
 				equalCols: own.equalCols,
-				children: getChildren()
+				children: () => resolveSlot(getChildren())
 			}),
 			own.afterContent && /* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
@@ -609,7 +620,7 @@ const Component = (props) => {
 				alignY: afterContentAlignY,
 				equalCols: own.equalCols,
 				gap: own.gap,
-				children: own.afterContent
+				children: () => resolveSlot(own.afterContent)
 			})
 		]
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/elements",
-  "version": "0.24.2",
+  "version": "0.24.3",
   "description": "Foundational UI components for Pyreon",
   "license": "MIT",
   "repository": {
@@ -42,12 +42,12 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/core": "^0.24.2",
+    "@pyreon/core": "^0.24.3",
     "@pyreon/manifest": "0.13.1",
-    "@pyreon/reactivity": "^0.24.2",
-    "@pyreon/runtime-dom": "^0.24.2",
+    "@pyreon/reactivity": "^0.24.3",
+    "@pyreon/runtime-dom": "^0.24.3",
     "@pyreon/test-utils": "^0.13.11",
-    "@pyreon/typescript": "^0.24.2",
+    "@pyreon/typescript": "^0.24.3",
     "@vitest/browser-playwright": "^4.1.4",
     "@vitus-labs/tools-rolldown": "^2.4.0"
   },
@@ -55,9 +55,9 @@
     "node": ">= 22"
   },
   "dependencies": {
-    "@pyreon/core": "^0.24.2",
-    "@pyreon/reactivity": "^0.24.2",
-    "@pyreon/ui-core": "^0.24.2",
-    "@pyreon/unistyle": "^0.24.2"
+    "@pyreon/core": "^0.24.3",
+    "@pyreon/reactivity": "^0.24.3",
+    "@pyreon/ui-core": "^0.24.3",
+    "@pyreon/unistyle": "^0.24.3"
   }
 }

package/src/Element/component.tsx

@@ -8,6 +8,7 @@
  */
 
 import { onMount, splitProps } from '@pyreon/core'
+import type { VNodeChildAtom } from '@pyreon/core'
 import { render } from '@pyreon/ui-core'
 import { PKG_NAME } from '../constants'
 import { Content, Wrapper } from '../helpers'
@@ -102,6 +103,29 @@ const Component: PyreonElement = (props) => {
   // Reading own.content via ?? at setup would capture the value once.
   const getChildren = () => own.children ?? own.content ?? own.label
 
+  // Resolve a slot value INSIDE a reactive accessor. If the consumer passed a
+  // function-returning-VNode (e.g. `content={() => <Icon name={signal()} />}`),
+  // unwrap it by calling — its body's signal reads are then tracked by the
+  // enclosing mountReactive effect, and the slot re-renders on signal change.
+  // Static VNodes / strings / null pass through unchanged to `render()`.
+  //
+  // Pre-fix: `render(() => <X/>)` treated the function as a COMPONENT and
+  // called `h(fn, {})` — the component body ran once at mount, future signal
+  // changes inside the body were never observed. Wrapping the JSX position in
+  // `{() => resolveSlot(...)}` plus unwrapping function values here is what
+  // makes `content={() => ...}` reactive (matches the
+  // `{() => show() ? <A/> : null}` pattern documented at
+  // runtime-dom/src/nodes.ts:90-93).
+  // Return type is the RESOLVED atom (VNodeChildAtom | VNodeChildAtom[]) —
+  // never a nested accessor — so the enclosing `() => resolveSlot(...)` IS
+  // a valid VNodeChildAccessor in the JSX child position.
+  const resolveSlot = (value: unknown): VNodeChildAtom | VNodeChildAtom[] => {
+    if (typeof value === 'function') {
+      return (value as () => VNodeChildAtom | VNodeChildAtom[])()
+    }
+    return render(value as Parameters<typeof render>[0]) as VNodeChildAtom | VNodeChildAtom[]
+  }
+
   const isInline = isInlineElement(own.tag)
   const SUB_TAG = isInline ? 'span' : undefined
 
@@ -201,7 +225,7 @@ const Component: PyreonElement = (props) => {
           extraStyles: own.css,
         })}
       >
-        {render(getChildren())}
+        {() => resolveSlot(getChildren())}
       </WrapperStyled>
     )
   }
@@ -209,7 +233,7 @@ const Component: PyreonElement = (props) => {
   if (isSimpleElement) {
     return (
       <Wrapper {...rest} {...WRAPPER_PROPS} isInline={isInline}>
-        {render(getChildren())}
+        {() => resolveSlot(getChildren())}
       </Wrapper>
     )
   }
@@ -228,7 +252,7 @@ const Component: PyreonElement = (props) => {
           equalCols={own.equalCols}
           gap={own.gap}
         >
-          {own.beforeContent}
+          {() => resolveSlot(own.beforeContent)}
         </Content>
       )}
 
@@ -242,7 +266,7 @@ const Component: PyreonElement = (props) => {
         alignY={contentAlignY}
         equalCols={own.equalCols}
       >
-        {getChildren()}
+        {() => resolveSlot(getChildren())}
       </Content>
 
       {own.afterContent && (
@@ -257,7 +281,7 @@ const Component: PyreonElement = (props) => {
           equalCols={own.equalCols}
           gap={own.gap}
         >
-          {own.afterContent}
+          {() => resolveSlot(own.afterContent)}
         </Content>
       )}
     </Wrapper>

package/src/__tests__/Content.test.tsx

@@ -76,9 +76,17 @@ describe('Content component', () => {
     expect(result.props['data-pyr-element']).toBe('after')
   })
 
-  it('passes children through render()', () => {
+  it('passes children through render() when the slot accessor is invoked', () => {
+    // Content wraps its children in a reactive accessor `() => resolveSlot(...)`
+    // — render() is no longer called synchronously at component setup. The
+    // accessor is invoked by the runtime when the JSX child position mounts;
+    // here we invoke it directly to assert the wiring. The
+    // function-unwrap-then-render shape is what keeps `content={() => <X/>}`
+    // slot reactivity working (see Element-slot-reactivity.browser.test.tsx).
     const children = 'Some text'
-    Content({ children })
+    const result = asVNode(Content({ children }))
+    expect(typeof result.props.children).toBe('function')
+    ;(result.props.children as () => unknown)()
     expect(mocks.render).toHaveBeenCalledWith(children)
   })
 

package/src/__tests__/Element-slot-reactivity.browser.test.tsx

@@ -0,0 +1,152 @@
+/** @jsxImportSource @pyreon/core */
+/**
+ * Regression specs for the Element slot reactivity bug.
+ *
+ * Pre-fix: `<Element content={() => <Icon name={signal()} />}>` evaluated the
+ * function once at mount and baked in the result. Signal changes inside the
+ * function body did NOT cause the slot to re-render — even though the
+ * `getChildren` helper in Element/component.tsx had a getter shape intended
+ * to preserve reactivity.
+ *
+ * Root cause: the JSX child position read the resolved slot value at
+ * component-setup time. The runtime's `mountChild` reactive-function-child
+ * handling (`mountReactive`) was never reached because the function was
+ * passed to `render()` which treated it as a component (one-shot mount),
+ * not as a reactive accessor.
+ *
+ * Fix: wrap the JSX child position in `{() => ...}` so it becomes a
+ * reactive accessor that mountChild routes through mountReactive.
+ * Slot values that are themselves functions get unwrapped (called) inside
+ * the accessor so their body's signal reads are tracked by the effect.
+ *
+ * Bisect-verify-with-restore: revert the wrap → these tests fail with
+ * stuck slot content; restore → tests pass.
+ */
+import { describe, expect, it } from 'vitest'
+import { signal } from '@pyreon/reactivity'
+import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
+import { Element } from '../Element'
+
+describe('Element slot reactivity — function-valued slot props', () => {
+  it('content={() => <X />} re-renders when a signal inside the function body changes', async () => {
+    const dark = signal(false)
+    const { container, unmount } = mountInBrowser(
+      <Element
+        tag="div"
+        data-id="root"
+        content={() => <span data-id="icon">{dark() ? 'moon' : 'sun'}</span>}
+      />,
+    )
+
+    expect(container.querySelector('[data-id="icon"]')?.textContent).toBe('sun')
+    dark.set(true)
+    await flush()
+    expect(container.querySelector('[data-id="icon"]')?.textContent).toBe('moon')
+    dark.set(false)
+    await flush()
+    expect(container.querySelector('[data-id="icon"]')?.textContent).toBe('sun')
+    unmount()
+  })
+
+  it('beforeContent={() => <X />} re-renders when a signal inside changes', async () => {
+    const count = signal(0)
+    const { container, unmount } = mountInBrowser(
+      <Element
+        tag="div"
+        data-id="root"
+        beforeContent={() => <span data-id="badge">{`#${count()}`}</span>}
+        content={<span data-id="main">main</span>}
+      />,
+    )
+
+    expect(container.querySelector('[data-id="badge"]')?.textContent).toBe('#0')
+    count.set(5)
+    await flush()
+    expect(container.querySelector('[data-id="badge"]')?.textContent).toBe('#5')
+    unmount()
+  })
+
+  it('afterContent={() => <X />} re-renders when a signal inside changes', async () => {
+    const tag = signal('draft')
+    const { container, unmount } = mountInBrowser(
+      <Element
+        tag="div"
+        data-id="root"
+        content={<span data-id="main">main</span>}
+        afterContent={() => <span data-id="status">{tag()}</span>}
+      />,
+    )
+
+    expect(container.querySelector('[data-id="status"]')?.textContent).toBe('draft')
+    tag.set('published')
+    await flush()
+    expect(container.querySelector('[data-id="status"]')?.textContent).toBe('published')
+    unmount()
+  })
+
+  it('static VNode content (non-function) still works unchanged', () => {
+    // Regression guard for the static path — no function unwrap should
+    // happen here.
+    const { container, unmount } = mountInBrowser(
+      <Element tag="div" content={<span data-id="static">hello</span>} />,
+    )
+    expect(container.querySelector('[data-id="static"]')?.textContent).toBe('hello')
+    unmount()
+  })
+
+  it('static beforeContent + afterContent still render (compound path)', () => {
+    const { container, unmount } = mountInBrowser(
+      <Element
+        tag="div"
+        beforeContent={<span data-id="b">before</span>}
+        content={<span data-id="c">main</span>}
+        afterContent={<span data-id="a">after</span>}
+      />,
+    )
+    expect(container.querySelector('[data-id="b"]')?.textContent).toBe('before')
+    expect(container.querySelector('[data-id="c"]')?.textContent).toBe('main')
+    expect(container.querySelector('[data-id="a"]')?.textContent).toBe('after')
+    unmount()
+  })
+
+  it('null slot stays unrendered; flipping a signal can introduce it', async () => {
+    const show = signal(false)
+    const { container, unmount } = mountInBrowser(
+      <Element
+        tag="div"
+        data-id="root"
+        content={() => (show() ? <span data-id="present">shown</span> : null)}
+      />,
+    )
+    expect(container.querySelector('[data-id="present"]')).toBeNull()
+    show.set(true)
+    await flush()
+    expect(container.querySelector('[data-id="present"]')?.textContent).toBe('shown')
+    show.set(false)
+    await flush()
+    expect(container.querySelector('[data-id="present"]')).toBeNull()
+    unmount()
+  })
+
+  it('children prop (priority over content) — function form is reactive in compound layout', async () => {
+    // children takes priority over content per getChildren's `??` chain.
+    // Compound layout (when beforeContent OR afterContent exists) routes
+    // through a different render path than the simple-element fast path —
+    // both must handle function children reactively.
+    const text = signal('first')
+    const { container, unmount } = mountInBrowser(
+      <Element
+        tag="div"
+        beforeContent={<span data-id="b">b</span>}
+        afterContent={<span data-id="a">a</span>}
+      >
+        {() => <span data-id="kid">{text()}</span>}
+      </Element>,
+    )
+    expect(container.querySelector('[data-id="kid"]')?.textContent).toBe('first')
+    text.set('second')
+    await flush()
+    expect(container.querySelector('[data-id="kid"]')?.textContent).toBe('second')
+    unmount()
+  })
+})

package/src/__tests__/Element.test.ts

@@ -137,7 +137,13 @@ describe('Element', () => {
       // Simple element fast path — passes children as a single value, not a
       // 3-slot array wrapping falsy beforeContent/afterContent. This avoids
       // 2 extra mountChild calls per Element in the common case.
-      expect(result.props.children).toBe('hello')
+      //
+      // Children are wrapped in a reactive accessor (`() => resolveSlot(...)`)
+      // so function-valued slot props (e.g. `content={() => <X />}`) stay
+      // reactive — see `Element-slot-reactivity.browser.test.tsx`. The
+      // accessor's RESOLVED value is the string `'hello'`.
+      expect(typeof result.props.children).toBe('function')
+      expect((result.props.children as () => unknown)()).toBe('hello')
     })
 
     it('passes block prop to Wrapper', () => {
@@ -606,8 +612,11 @@ describe('Element', () => {
     it('prefers children over content', () => {
       const result = asVNode(Element({ children: 'child', content: 'alt' }))
       // Simple-element fast path returns children directly. The fallback
-      // chain (children → content → label) is exercised inside getChildren().
-      expect(result.props.children).toBe('child')
+      // chain (children → content → label) is exercised inside getChildren(),
+      // which runs INSIDE the reactive accessor wrap — so invoking the
+      // accessor reveals the resolved value.
+      expect(typeof result.props.children).toBe('function')
+      expect((result.props.children as () => unknown)()).toBe('child')
     })
 
     it('falls back to content when no children', () => {

package/src/helpers/Content/component.tsx

@@ -4,14 +4,28 @@
  * gap, and equalCols styling props to the underlying styled component.
  * Adds a `data-pyr-element` attribute in development for debugging.
  *
- * Children are rendered via core `render()`.
+ * Children are rendered via core `render()`, with function-valued
+ * children unwrapped inside a reactive accessor so the compound-layout
+ * paths in `Element` keep `content={() => <X />}` reactivity intact
+ * (mirrors the `resolveSlot` helper in `Element/component.tsx`).
  */
 import { splitProps } from '@pyreon/core'
+import type { VNodeChildAtom } from '@pyreon/core'
 import { render } from '@pyreon/ui-core'
 import { IS_DEVELOPMENT } from '../../utils'
 import Styled from './styled'
 import type { Props } from './types'
 
+// Return type is the RESOLVED atom — see the matching helper in
+// Element/component.tsx for the rationale (keeps `() => resolveSlot(...)`
+// a valid VNodeChildAccessor at the JSX child position).
+const resolveSlot = (value: unknown): VNodeChildAtom | VNodeChildAtom[] => {
+  if (typeof value === 'function') {
+    return (value as () => VNodeChildAtom | VNodeChildAtom[])()
+  }
+  return render(value as Parameters<typeof render>[0]) as VNodeChildAtom | VNodeChildAtom[]
+}
+
 const Component = (props: Partial<Props>) => {
   const [own, rest] = splitProps(props, [
     'contentType',
@@ -45,7 +59,7 @@ const Component = (props: Partial<Props>) => {
 
   return (
     <Styled as={own.tag} $contentType={own.contentType} $element={stylingProps} {...debugProps} {...rest}>
-      {render(own.children)}
+      {() => resolveSlot(own.children)}
     </Styled>
   )
 }