@pyreon/elements 0.24.5 → 0.25.0

package/src/__tests__/responsiveProps.test.ts

@@ -1,328 +0,0 @@
-import type { VNode } from '@pyreon/core'
-import { h } from '@pyreon/core'
-import { describe, expect, it } from 'vitest'
-import { Element } from '../Element'
-import Content from '../helpers/Content/component'
-
-const asVNode = (v: unknown) => v as VNode
-
-// See Element.test.ts for context — Element's simple-element fast path moves
-// layout props from `result.props.{tag, direction, …}` to
-// `result.props.{as, $element.direction, …}`. This helper reads from
-// whichever shape the result is in.
-const getLayoutProps = (result: VNode): Record<string, unknown> => {
-  const p = result.props as Record<string, unknown>
-  if (p.$element && typeof p.$element === 'object') {
-    const el = p.$element as Record<string, unknown>
-    return {
-      tag: p.as,
-      direction: el.direction,
-      alignX: el.alignX,
-      alignY: el.alignY,
-      block: el.block,
-      equalCols: el.equalCols,
-      extendCss: el.extraStyles,
-      isInline: undefined,
-    }
-  }
-  return {
-    tag: p.tag,
-    direction: p.direction,
-    alignX: p.alignX,
-    alignY: p.alignY,
-    block: p.block,
-    equalCols: p.equalCols,
-    extendCss: p.extendCss,
-    isInline: p.isInline,
-  }
-}
-
-const getContentSlots = (result: VNode): VNode[] => {
-  const children = result.props.children
-  if (!Array.isArray(children)) return []
-  return children.filter(
-    (c: unknown) =>
-      c != null && typeof c === 'object' && 'type' in (c as VNode) && (c as VNode).type === Content,
-  ) as VNode[]
-}
-
-describe('Element responsive props', () => {
-  describe('single values', () => {
-    it('renders with alignX as string', () => {
-      const result = asVNode(Element({ alignX: 'center', children: 'content' }))
-      expect(typeof result.type).toBe("function")
-    })
-
-    it('renders with alignY as string', () => {
-      const result = asVNode(Element({ alignY: 'top', children: 'content' }))
-      expect(typeof result.type).toBe("function")
-    })
-
-    it('renders with direction as string', () => {
-      const result = asVNode(Element({ direction: 'rows', children: 'content' }))
-      expect(typeof result.type).toBe("function")
-    })
-
-    it('renders with gap as number', () => {
-      const result = asVNode(
-        Element({
-          gap: 16,
-          beforeContent: h('span', null, 'Before'),
-          afterContent: h('span', null, 'After'),
-          children: 'content',
-        }),
-      )
-      expect(typeof result.type).toBe("function")
-    })
-
-    it('renders with block as boolean', () => {
-      const result = asVNode(Element({ block: true, children: 'content' }))
-      expect(typeof result.type).toBe("function")
-      expect(getLayoutProps(result).block).toBe(true)
-    })
-
-    it('renders with equalCols as boolean', () => {
-      const result = asVNode(
-        Element({
-          equalCols: true,
-          beforeContent: h('span', null, 'Before'),
-          afterContent: h('span', null, 'After'),
-          children: 'content',
-        }),
-      )
-      expect(typeof result.type).toBe("function")
-    })
-  })
-
-  describe('array values (positional breakpoints)', () => {
-    it('renders with alignX as array', () => {
-      const result = asVNode(
-        Element({ alignX: ['left', 'center', 'right'] as any, children: 'content' }),
-      )
-      expect(typeof result.type).toBe("function")
-    })
-
-    it('renders with alignY as array', () => {
-      const result = asVNode(
-        Element({ alignY: ['top', 'center', 'bottom'] as any, children: 'content' }),
-      )
-      expect(typeof result.type).toBe("function")
-    })
-
-    it('renders with direction as array', () => {
-      const result = asVNode(Element({ direction: ['rows', 'inline'] as any, children: 'content' }))
-      expect(typeof result.type).toBe("function")
-    })
-
-    it('renders with gap as array', () => {
-      const result = asVNode(
-        Element({
-          gap: [8, 16, 24] as any,
-          beforeContent: h('span', null, 'Before'),
-          children: 'content',
-        }),
-      )
-      expect(typeof result.type).toBe("function")
-    })
-
-    it('renders with block as array', () => {
-      const result = asVNode(Element({ block: [false, true] as any, children: 'content' }))
-      expect(typeof result.type).toBe("function")
-    })
-
-    it('renders with equalCols as array', () => {
-      const result = asVNode(
-        Element({
-          equalCols: [false, true] as any,
-          beforeContent: h('span', null, 'Before'),
-          afterContent: h('span', null, 'After'),
-          children: 'content',
-        }),
-      )
-      expect(typeof result.type).toBe("function")
-    })
-  })
-
-  describe('breakpoint object values', () => {
-    it('renders with alignX as breakpoint object', () => {
-      const result = asVNode(
-        Element({
-          alignX: { xs: 'left', md: 'center', xl: 'right' } as any,
-          children: 'content',
-        }),
-      )
-      expect(typeof result.type).toBe("function")
-    })
-
-    it('renders with alignY as breakpoint object', () => {
-      const result = asVNode(
-        Element({ alignY: { xs: 'top', lg: 'center' } as any, children: 'content' }),
-      )
-      expect(typeof result.type).toBe("function")
-    })
-
-    it('renders with direction as breakpoint object', () => {
-      const result = asVNode(
-        Element({
-          direction: { xs: 'rows', md: 'inline' } as any,
-          children: 'content',
-        }),
-      )
-      expect(typeof result.type).toBe("function")
-    })
-
-    it('renders with gap as breakpoint object', () => {
-      const result = asVNode(
-        Element({
-          gap: { xs: 8, md: 16, lg: 24 } as any,
-          beforeContent: h('span', null, 'Before'),
-          children: 'content',
-        }),
-      )
-      expect(typeof result.type).toBe("function")
-    })
-
-    it('renders with block as breakpoint object', () => {
-      const result = asVNode(
-        Element({ block: { xs: false, md: true } as any, children: 'content' }),
-      )
-      expect(typeof result.type).toBe("function")
-    })
-  })
-
-  describe('combined responsive props', () => {
-    it('renders with multiple responsive props simultaneously', () => {
-      const result = asVNode(
-        Element({
-          alignX: { xs: 'left', md: 'center' } as any,
-          alignY: ['top', 'center'] as any,
-          direction: { xs: 'rows', lg: 'inline' } as any,
-          block: [false, true] as any,
-          gap: 16,
-          beforeContent: h('span', { 'data-testid': 'before' }, 'Before'),
-          afterContent: h('span', { 'data-testid': 'after' }, 'After'),
-          children: h('span', { 'data-testid': 'main' }, 'Main'),
-        }),
-      )
-      expect(typeof result.type).toBe("function")
-      const slots = getContentSlots(result)
-      expect(slots).toHaveLength(3)
-    })
-
-    it('renders with responsive content directions', () => {
-      const result = asVNode(
-        Element({
-          contentDirection: { xs: 'rows', md: 'inline' } as any,
-          beforeContentDirection: { xs: 'inline', lg: 'rows' } as any,
-          afterContentDirection: 'inline',
-          beforeContent: h('span', null, 'Before'),
-          afterContent: h('span', null, 'After'),
-          children: h('span', null, 'Main'),
-        }),
-      )
-      expect(typeof result.type).toBe("function")
-      const slots = getContentSlots(result)
-      expect(slots).toHaveLength(3)
-    })
-
-    it('renders with responsive content alignment', () => {
-      const result = asVNode(
-        Element({
-          contentAlignX: { xs: 'left', md: 'center' } as any,
-          contentAlignY: ['top', 'center', 'bottom'] as any,
-          beforeContentAlignX: 'left',
-          afterContentAlignX: 'right',
-          beforeContent: h('span', null, 'Before'),
-          afterContent: h('span', null, 'After'),
-          children: 'content',
-        }),
-      )
-      expect(typeof result.type).toBe("function")
-    })
-  })
-
-  describe('responsive css prop', () => {
-    it('renders with css as string', () => {
-      const result = asVNode(Element({ css: 'background: red;', children: 'content' }))
-      expect(typeof result.type).toBe("function")
-      expect(getLayoutProps(result).extendCss).toBe('background: red;')
-    })
-
-    it('renders with contentCss', () => {
-      const result = asVNode(
-        Element({
-          contentCss: 'color: blue;',
-          beforeContent: h('span', null, 'Before'),
-          children: 'content',
-        }),
-      )
-      expect(typeof result.type).toBe("function")
-      const slots = getContentSlots(result)
-      const contentSlot = slots.find((v) => v.props.contentType === 'content')
-      expect(contentSlot?.props.extendCss).toBe('color: blue;')
-    })
-
-    it('renders with beforeContentCss and afterContentCss', () => {
-      const result = asVNode(
-        Element({
-          beforeContentCss: 'padding: 4px;',
-          afterContentCss: 'padding: 8px;',
-          beforeContent: h('span', null, 'Before'),
-          afterContent: h('span', null, 'After'),
-          children: 'content',
-        }),
-      )
-      expect(typeof result.type).toBe("function")
-      const slots = getContentSlots(result)
-      const beforeSlot = slots.find((v) => v.props.contentType === 'before')
-      const afterSlot = slots.find((v) => v.props.contentType === 'after')
-      expect(beforeSlot?.props.extendCss).toBe('padding: 4px;')
-      expect(afterSlot?.props.extendCss).toBe('padding: 8px;')
-    })
-  })
-
-  describe('alignment values', () => {
-    const alignXValues = [
-      'left',
-      'center',
-      'right',
-      'spaceBetween',
-      'spaceAround',
-      'block',
-    ] as const
-
-    const alignYValues = [
-      'top',
-      'center',
-      'bottom',
-      'spaceBetween',
-      'spaceAround',
-      'block',
-    ] as const
-
-    for (const value of alignXValues) {
-      it(`renders with alignX="${value}"`, () => {
-        const result = asVNode(Element({ alignX: value, children: 'content' }))
-        expect(typeof result.type).toBe("function")
-      })
-    }
-
-    for (const value of alignYValues) {
-      it(`renders with alignY="${value}"`, () => {
-        const result = asVNode(Element({ alignY: value, children: 'content' }))
-        expect(typeof result.type).toBe("function")
-      })
-    }
-  })
-
-  describe('direction values', () => {
-    const directionValues = ['inline', 'rows', 'reverseInline', 'reverseRows'] as const
-
-    for (const value of directionValues) {
-      it(`renders with direction="${value}"`, () => {
-        const result = asVNode(Element({ direction: value, children: 'content' }))
-        expect(typeof result.type).toBe("function")
-      })
-    }
-  })
-})

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

@@ -1,157 +0,0 @@
-// 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)
-  })
-})