@pyreon/elements 0.24.3 → 0.24.5

package/lib/index.js

@@ -11,6 +11,49 @@ const PKG_NAME = "@pyreon/elements";
 //#region src/utils.ts
 const IS_DEVELOPMENT = process.env.NODE_ENV !== "production";
 
+//#endregion
+//#region src/helpers/isPyreonComponent.ts
+/**
+* Detect whether a function value is a framework component (created via
+* `rocketstyle()` or one of `@pyreon/elements`' component factories), as
+* opposed to a plain reactive-accessor function.
+*
+* Used by `Element` / `Content` `resolveSlot` to discriminate between
+*   `beforeContent={Header}` — component-reference shorthand, MUST mount
+*     as `h(Component, null)` so the framework HOC's
+*     `removeUndefinedProps(props)` / `splitProps(props)` get the
+*     default-filled props object, not bare `undefined`.
+*   `beforeContent={() => <Header />}` — reactive accessor, MUST be called
+*     so its body's signal reads land inside the enclosing
+*     `mountReactive` effect.
+*
+* Both are `typeof === 'function'`. The discriminator is the marker
+* attached by each factory:
+*   - `IS_ROCKETSTYLE` — set by `@pyreon/rocketstyle` (`rocketstyle.ts:527`,
+*     `542`) on every `rocketstyle(...).config(...)` chain end-point.
+*   - `PYREON__COMPONENT` — set by every `@pyreon/elements` component
+*     factory (Element, Text, List, Portal, Overlay, Util, Content,
+*     Wrapper, …).
+*   - `pkgName` — same components also carry this; checked as a fallback
+*     in case a third-party package mirrors the elements convention.
+*
+* Plain bare-function components without any marker (e.g.
+* `const MyComp = () => <div />`) intentionally take the accessor path
+* — they don't access props, so calling them with no args is safe AND
+* returns the VNode the renderer expects. The marker check ONLY rescues
+* components whose HOC pipelines REQUIRE props to be defined.
+*
+* Reference: regression report on 0.24.3 / PR #839 — `resolveSlot` called
+* any function-valued slot bare, crashing real consumers (bokisch.com
+* SSG build: `Prerendered 0 page(s) + 404.html`) that used the
+* `beforeContent={Component}` shorthand documented since the original
+* Element API.
+*/
+function isPyreonComponent(value) {
+	if (typeof value !== "function") return false;
+	return Object.hasOwn(value, "IS_ROCKETSTYLE") || Object.hasOwn(value, "PYREON__COMPONENT") || Object.hasOwn(value, "pkgName");
+}
+
 //#endregion
 //#region src/helpers/Content/styled.ts
 /**
@@ -97,7 +140,10 @@ const StyledComponent = styled$2(component$1, { layer: "elements" })`
 * (mirrors the `resolveSlot` helper in `Element/component.tsx`).
 */
 const resolveSlot = (value) => {
-	if (typeof value === "function") return value();
+	if (typeof value === "function") {
+		if (isPyreonComponent(value)) return h(value, null);
+		return value();
+	}
 	return render(value);
 };
 const Component$9 = (props) => {
@@ -516,7 +562,10 @@ const Component = (props) => {
 	const isSimpleElement = !own.beforeContent && !own.afterContent;
 	const getChildren = () => own.children ?? own.content ?? own.label;
 	const resolveSlot = (value) => {
-		if (typeof value === "function") return value();
+		if (typeof value === "function") {
+			if (isPyreonComponent(value)) return h(value, null);
+			return value();
+		}
 		return render(value);
 	};
 	const isInline = isInlineElement(own.tag);

package/package.json

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

package/src/Element/component.tsx

@@ -7,12 +7,13 @@
  * skipping children or switching sub-tags accordingly.
  */
 
-import { onMount, splitProps } from '@pyreon/core'
-import type { VNodeChildAtom } from '@pyreon/core'
+import { h, onMount, splitProps } from '@pyreon/core'
+import type { ComponentFn, VNodeChildAtom } from '@pyreon/core'
 import { render } from '@pyreon/ui-core'
 import { PKG_NAME } from '../constants'
 import { Content, Wrapper } from '../helpers'
 import { internElementBundle } from '../helpers/internElementBundle'
+import { isPyreonComponent } from '../helpers/isPyreonComponent'
 import WrapperStyled from '../helpers/Wrapper/styled'
 import { isWebFixNeeded } from '../helpers/Wrapper/utils'
 import { IS_DEVELOPMENT } from '../utils'
@@ -109,18 +110,35 @@ const Component: PyreonElement = (props) => {
   // 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).
+  // **Component vs accessor discriminator** (regression fix for the
+  // 0.24.3 → 0.24.4 follow-up — see #839 for the original reactive-slot fix):
+  // `beforeContent={Header}` (component-reference shorthand) and
+  // `content={() => <X />}` (reactive accessor) are BOTH `typeof === 'function'`.
+  // PR #839 called both bare, which crashed component shorthands the moment a
+  // rocketstyle / attrs HOC ran `removeUndefinedProps(undefined)` on the
+  // un-supplied props (`TypeError: Cannot convert undefined or null to object`).
+  //
+  // Discriminator: framework components carry one of two markers attached by
+  // their factory:
+  //   - `IS_ROCKETSTYLE` — anything `rocketstyle()` produces
+  //   - `PYREON__COMPONENT` / `pkgName` — `@pyreon/elements` components
+  //     (Element, Text, List, Portal, Overlay, Util)
+  // Marked function → mount as `h(Component, null)` (no props, defaults
+  // fill in via the HOC pipeline). Unmarked function → reactive accessor,
+  // called bare so its return value (a VNode) renders. Bare-function
+  // components without HOC wrapping (e.g. `const MyComp = () => <div />`)
+  // also work via the accessor path — they're called with no args and
+  // their VNode return goes through `render()` correctly. The marker
+  // check ONLY rescues components that REQUIRE props to be defined.
+  //
   // 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') {
+      if (isPyreonComponent(value)) {
+        return h(value as ComponentFn, null) as VNodeChildAtom
+      }
       return (value as () => VNodeChildAtom | VNodeChildAtom[])()
     }
     return render(value as Parameters<typeof render>[0]) as VNodeChildAtom | VNodeChildAtom[]

package/src/__tests__/slot-component-reference.test.tsx

@@ -0,0 +1,157 @@
+// Regression: 0.24.3 (PR #839) added `resolveSlot` to make function-valued
+// slot props reactive — `content={() => <X name={signal()} />}`. The
+// implementation calls ANY function-typed slot value with no args, which
+// crashes when the consumer passes a COMPONENT reference using the
+// shorthand `beforeContent={Header}` (Header is `typeof === 'function'`
+// too — `resolveSlot` calls it with no props, downstream
+// `removeUndefinedProps(undefined)` throws
+// `TypeError: Cannot convert undefined or null to object`).
+//
+// Reported by a real consumer (bokisch.com 0.24.3 → SSG build fails on
+// every route that uses `beforeContent={Component}` shorthand —
+// `Prerendered 0 page(s) + 404.html`).
+//
+// The discriminator: framework component functions carry a marker
+// (`IS_ROCKETSTYLE` for rocketstyle wrappers, `PYREON__COMPONENT` for
+// `@pyreon/elements` components). `resolveSlot` must mount marked
+// components via `h(Component, null)` instead of calling bare.
+import type { VNode, VNodeChild } from '@pyreon/core'
+import { h } from '@pyreon/core'
+import { describe, expect, it } from 'vitest'
+import Element from '../Element/component'
+
+// Match the bokisch.com bug shape: a rocketstyle-marked component used
+// as a slot reference (NOT wrapped in `() => <Logo />`). The body
+// requires non-undefined props — calling it with no args throws,
+// exactly mirroring the real `removeUndefinedProps(undefined)` crash.
+function makeRocketstyleStub(name: string, content: string) {
+  const Component: any = (props: { className?: string } | undefined) => {
+    Object.getOwnPropertyDescriptors(props as object)
+    return h('div', { 'data-component': name, class: props?.className }, content)
+  }
+  Component.IS_ROCKETSTYLE = true
+  Component.displayName = name
+  return Component
+}
+
+// Match the @pyreon/elements framework-component shape.
+function makeElementStub(name: string, content: string) {
+  const Component: any = (props: { className?: string } | undefined) => {
+    Object.getOwnPropertyDescriptors(props as object)
+    return h('div', { 'data-component': name, class: props?.className }, content)
+  }
+  Component.PYREON__COMPONENT = `@pyreon/elements/${name}`
+  Component.pkgName = '@pyreon/elements'
+  return Component
+}
+
+/**
+ * Walk Element's VNode tree to find ALL accessor-function children and
+ * invoke them. Element wraps slot rendering as `{() => resolveSlot(value)}`
+ * in the JSX child position — those closures are what mount the slot, and
+ * are what crashes in the broken state when `value` is a component
+ * reference. Calling the closures mirrors how runtime-dom and
+ * runtime-server invoke them during render.
+ *
+ * Returns the array of accessor results in tree order.
+ */
+function invokeAllSlotAccessors(root: VNode): unknown[] {
+  const results: unknown[] = []
+  const visit = (node: VNodeChild | unknown): void => {
+    if (typeof node === 'function') {
+      // Reactive-accessor child position
+      results.push((node as () => unknown)())
+      return
+    }
+    if (!node || typeof node !== 'object' || Array.isArray(node)) {
+      if (Array.isArray(node)) node.forEach(visit)
+      return
+    }
+    const vnode = node as VNode & { props?: { children?: unknown } }
+    // Pyreon `h()` stores JSX children in BOTH `vnode.children` (array)
+    // AND `props.children` (single value). The slot-accessor closure
+    // typically lands in `props.children` when passed explicitly.
+    if (vnode.props && 'children' in vnode.props) {
+      visit(vnode.props.children)
+    }
+    if (Array.isArray(vnode.children)) vnode.children.forEach(visit)
+    else if (vnode.children) visit(vnode.children as VNodeChild)
+  }
+  visit(root)
+  return results
+}
+
+describe('Element slot — component-reference shorthand (regression #839 follow-up)', () => {
+  it('beforeContent={RocketstyleComponent} mounts via h(Component) — does NOT crash', () => {
+    const Logo = makeRocketstyleStub('Logo', 'logo')
+    const result = Element({
+      tag: 'header',
+      beforeContent: Logo,
+      content: 'title',
+    }) as VNode
+    expect(() => invokeAllSlotAccessors(result)).not.toThrow()
+  })
+
+  it('afterContent={RocketstyleComponent} does not crash', () => {
+    const Badge = makeRocketstyleStub('Badge', 'NEW')
+    const result = Element({
+      tag: 'header',
+      content: 'title',
+      afterContent: Badge,
+    }) as VNode
+    expect(() => invokeAllSlotAccessors(result)).not.toThrow()
+  })
+
+  it('content={RocketstyleComponent} (simple-element fast path) yields h(Component) VNode', () => {
+    const Header = makeRocketstyleStub('Header', 'page header')
+    const result = Element({ tag: 'header', content: Header }) as VNode
+    const results = invokeAllSlotAccessors(result)
+    expect(results.length).toBeGreaterThan(0)
+    // First accessor result is the slot content. It must be the VNode
+    // `h(Header, null)` — NOT the result of calling Header bare (which
+    // would crash in the broken state, OR succeed in pre-PR-839 state
+    // by accident if Header doesn't access props).
+    const first = results[0] as VNode
+    expect(first.type).toBe(Header)
+  })
+
+  it('content={ElementComponent} (PYREON__COMPONENT marker) yields h(Component) VNode', () => {
+    const Inner = makeElementStub('Inner', 'inner')
+    const result = Element({ tag: 'section', content: Inner }) as VNode
+    const results = invokeAllSlotAccessors(result)
+    expect(results.length).toBeGreaterThan(0)
+    const first = results[0] as VNode
+    expect(first.type).toBe(Inner)
+  })
+
+  // Counter-cases — the discriminator must NOT break the reactive-accessor
+  // shape PR #839 fixed.
+  it('content={() => <X />} (plain accessor) still calls function bare — reactive intact', () => {
+    let called = 0
+    const accessor = () => {
+      called++
+      return h('div', { 'data-accessor': 'called' }, 'accessor-output')
+    }
+    const result = Element({ tag: 'div', content: accessor }) as VNode
+    const results = invokeAllSlotAccessors(result)
+    expect(called).toBeGreaterThan(0)
+    // Returns the VNode the accessor produced (NOT an `h(accessor, null)` wrap).
+    const first = results[0] as VNode
+    expect(first.type).toBe('div')
+  })
+
+  it('beforeContent={() => h(Component)} (accessor returning a VNode) still works', () => {
+    const Logo = makeRocketstyleStub('Logo', 'logo')
+    let called = 0
+    const result = Element({
+      tag: 'header',
+      beforeContent: () => {
+        called++
+        return h(Logo, null)
+      },
+      content: 'title',
+    }) as VNode
+    expect(() => invokeAllSlotAccessors(result)).not.toThrow()
+    expect(called).toBeGreaterThan(0)
+  })
+})

package/src/helpers/Content/component.tsx

@@ -9,18 +9,26 @@
  * 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 { h, splitProps } from '@pyreon/core'
+import type { ComponentFn, VNodeChildAtom } from '@pyreon/core'
 import { render } from '@pyreon/ui-core'
 import { IS_DEVELOPMENT } from '../../utils'
+import { isPyreonComponent } from '../isPyreonComponent'
 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).
+//
+// Component vs accessor discriminator — see `isPyreonComponent` JSDoc.
+// Without this, `beforeContent={Component}` shorthand crashes downstream
+// in rocketstyle's `removeUndefinedProps(undefined)`.
 const resolveSlot = (value: unknown): VNodeChildAtom | VNodeChildAtom[] => {
   if (typeof value === 'function') {
+    if (isPyreonComponent(value)) {
+      return h(value as ComponentFn, null) as VNodeChildAtom
+    }
     return (value as () => VNodeChildAtom | VNodeChildAtom[])()
   }
   return render(value as Parameters<typeof render>[0]) as VNodeChildAtom | VNodeChildAtom[]

package/src/helpers/isPyreonComponent.ts

@@ -0,0 +1,46 @@
+/**
+ * Detect whether a function value is a framework component (created via
+ * `rocketstyle()` or one of `@pyreon/elements`' component factories), as
+ * opposed to a plain reactive-accessor function.
+ *
+ * Used by `Element` / `Content` `resolveSlot` to discriminate between
+ *   `beforeContent={Header}` — component-reference shorthand, MUST mount
+ *     as `h(Component, null)` so the framework HOC's
+ *     `removeUndefinedProps(props)` / `splitProps(props)` get the
+ *     default-filled props object, not bare `undefined`.
+ *   `beforeContent={() => <Header />}` — reactive accessor, MUST be called
+ *     so its body's signal reads land inside the enclosing
+ *     `mountReactive` effect.
+ *
+ * Both are `typeof === 'function'`. The discriminator is the marker
+ * attached by each factory:
+ *   - `IS_ROCKETSTYLE` — set by `@pyreon/rocketstyle` (`rocketstyle.ts:527`,
+ *     `542`) on every `rocketstyle(...).config(...)` chain end-point.
+ *   - `PYREON__COMPONENT` — set by every `@pyreon/elements` component
+ *     factory (Element, Text, List, Portal, Overlay, Util, Content,
+ *     Wrapper, …).
+ *   - `pkgName` — same components also carry this; checked as a fallback
+ *     in case a third-party package mirrors the elements convention.
+ *
+ * Plain bare-function components without any marker (e.g.
+ * `const MyComp = () => <div />`) intentionally take the accessor path
+ * — they don't access props, so calling them with no args is safe AND
+ * returns the VNode the renderer expects. The marker check ONLY rescues
+ * components whose HOC pipelines REQUIRE props to be defined.
+ *
+ * Reference: regression report on 0.24.3 / PR #839 — `resolveSlot` called
+ * any function-valued slot bare, crashing real consumers (bokisch.com
+ * SSG build: `Prerendered 0 page(s) + 404.html`) that used the
+ * `beforeContent={Component}` shorthand documented since the original
+ * Element API.
+ */
+export function isPyreonComponent(value: unknown): boolean {
+  if (typeof value !== 'function') return false
+  // `Object.hasOwn` (not `in`) so a marker on a parent prototype doesn't
+  // count — the marker is always an own-property in the factories.
+  return (
+    Object.hasOwn(value, 'IS_ROCKETSTYLE') ||
+    Object.hasOwn(value, 'PYREON__COMPONENT') ||
+    Object.hasOwn(value, 'pkgName')
+  )
+}