@pyreon/elements 0.24.4 → 0.24.6

package/src/__tests__/Wrapper.test.tsx

@@ -1,196 +0,0 @@
-import type { VNode } from '@pyreon/core'
-import { describe, expect, it, vi } from 'vitest'
-
-// ---------------------------------------------------------------------------
-// Mocks
-// ---------------------------------------------------------------------------
-vi.mock('~/utils', () => ({
-  IS_DEVELOPMENT: true,
-}))
-
-import Wrapper from '../helpers/Wrapper/component'
-import Styled from '../helpers/Wrapper/styled'
-
-const asVNode = (v: unknown) => v as VNode
-
-describe('Wrapper component', () => {
-  describe('normal element (no flex fix needed)', () => {
-    it('returns a VNode whose type is the Styled component', () => {
-      const result = asVNode(Wrapper({ tag: 'div' }))
-      expect(result.type).toBe(Styled)
-    })
-
-    it('passes normalElement as $element prop with block, direction, alignX, alignY, equalCols, extraStyles', () => {
-      const result = asVNode(
-        Wrapper({
-          tag: 'div',
-          block: true,
-          direction: 'inline',
-          alignX: 'center',
-          alignY: 'top',
-          equalCols: false,
-          extendCss: 'color: red;',
-        }),
-      )
-
-      expect(result.props.$element).toEqual({
-        block: true,
-        direction: 'inline',
-        alignX: 'center',
-        alignY: 'top',
-        equalCols: false,
-        extraStyles: 'color: red;',
-      })
-    })
-
-    it("passes tag as the 'as' prop", () => {
-      const result = asVNode(Wrapper({ tag: 'div' }))
-      expect(result.props.as).toBe('div')
-    })
-
-    it('passes ref through', () => {
-      const ref = () => {}
-      const result = asVNode(Wrapper({ tag: 'div', ref }))
-      expect(result.props.ref).toBe(ref)
-    })
-
-    it('passes children through', () => {
-      const result = asVNode(Wrapper({ tag: 'div', children: 'child content' }))
-      expect(result.props.children).toBe('child content')
-    })
-
-    it('adds data-pyr-element in development mode', () => {
-      const result = asVNode(Wrapper({ tag: 'div' }))
-      expect(result.props['data-pyr-element']).toBe('Element')
-    })
-
-    it('spreads extra props', () => {
-      const result = asVNode(Wrapper({ tag: 'section', id: 'wrapper', role: 'main' } as any))
-      expect(result.props.id).toBe('wrapper')
-      expect(result.props.role).toBe('main')
-    })
-  })
-
-  describe('flex-fix path (button/fieldset/legend)', () => {
-    it('renders parent Styled with parentFixElement for button', () => {
-      const result = asVNode(Wrapper({ tag: 'button', children: 'Click me' }))
-      expect(result.type).toBe(Styled)
-      expect((result.props.$element as any).parentFix).toBe(true)
-    })
-
-    it('parent Styled receives parentFixElement props (block + extraStyles only)', () => {
-      const result = asVNode(
-        Wrapper({
-          tag: 'button',
-          block: true,
-          extendCss: 'border: none;',
-          direction: 'inline',
-          alignX: 'center',
-          alignY: 'center',
-        }),
-      )
-
-      expect(result.props.$element).toEqual({
-        parentFix: true,
-        block: true,
-        extraStyles: 'border: none;',
-      })
-      expect(result.props.as).toBe('button')
-    })
-
-    it('child Styled receives childFixElement props (direction, alignX, alignY, equalCols)', () => {
-      const result = asVNode(
-        Wrapper({
-          tag: 'fieldset',
-          direction: 'rows',
-          alignX: 'left',
-          alignY: 'bottom',
-          equalCols: true,
-        }),
-      )
-
-      // The child is the first (only) child of the parent
-      const child = asVNode(result.props.children)
-      expect(child.type).toBe(Styled)
-      expect(child.props.$childFix).toBe(true)
-      expect(child.props.$element).toEqual({
-        childFix: true,
-        direction: 'rows',
-        alignX: 'left',
-        alignY: 'bottom',
-        equalCols: true,
-      })
-    })
-
-    it("uses 'div' as inner tag by default", () => {
-      const result = asVNode(Wrapper({ tag: 'button' }))
-      const child = asVNode(result.props.children)
-      expect(child.props.as).toBe('div')
-    })
-
-    it("uses 'span' as inner tag when isInline is true", () => {
-      const result = asVNode(Wrapper({ tag: 'button', isInline: true }))
-      const child = asVNode(result.props.children)
-      expect(child.props.as).toBe('span')
-    })
-  })
-
-  describe('dangerouslySetInnerHTML skips fix', () => {
-    it('renders single Styled without parentFix for button when dangerouslySetInnerHTML is set', () => {
-      const result = asVNode(
-        Wrapper({
-          tag: 'button',
-          dangerouslySetInnerHTML: { __html: '<b>Bold</b>' },
-        } as any),
-      )
-
-      // Should be the normal (non-fix) path
-      expect(result.type).toBe(Styled)
-      expect((result.props.$element as any).parentFix).toBeUndefined()
-    })
-  })
-
-  // Void HTML elements (hr, input, img, br, …) cannot have children. Element
-  // already skips passing children to Wrapper for void tags, but the JSX
-  // `{own.children}` slot still serialized `undefined` into the vnode and
-  // tripped runtime-dom's void-element warning. Wrapper now drops the slot
-  // entirely for void tags.
-  describe('void HTML elements drop the children slot', () => {
-    const VOID_TAGS = ['hr', 'input', 'img', 'br', 'area', 'base', 'col', 'embed', 'link', 'source', 'track', 'wbr'] as const
-
-    for (const tag of VOID_TAGS) {
-      it(`omits children for <${tag}>`, () => {
-        // Cast to any — the Wrapper Props.tag type narrows out void
-        // elements, but the runtime guard still has to cover the case
-        // where a void tag reaches Wrapper (e.g. via rocketstyle attrs
-        // composing `tag: 'hr'` from a callback whose return type is wider).
-        const result = asVNode(Wrapper({ tag } as any))
-        expect(result.type).toBe(Styled)
-        expect(result.props.children).toBeUndefined()
-        expect(result.children).toEqual([])
-      })
-    }
-
-    it('still renders children for non-void tags', () => {
-      const result = asVNode(Wrapper({ tag: 'div', children: 'kept' }))
-      expect(result.props.children).toBe('kept')
-    })
-
-    it('omits children even when caller accidentally passes them to a void tag', () => {
-      const result = asVNode(Wrapper({ tag: 'hr', children: 'should-not-leak' }))
-      expect(result.props.children).toBeUndefined()
-    })
-
-    it('dangerouslySetInnerHTML on a normally-void tag bypasses the void path', () => {
-      const result = asVNode(
-        Wrapper({
-          tag: 'hr',
-          dangerouslySetInnerHTML: { __html: '<b>x</b>' },
-        } as any),
-      )
-      // dangerouslySetInnerHTML opts out of the void-element guard
-      // because the tag becomes a custom element / shadow host case.
-      expect(result.type).toBe(Styled)
-    })
-  })
-})

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

@@ -1,132 +0,0 @@
-/** @jsxImportSource @pyreon/core */
-import { describe, expect, it, vi } from 'vitest'
-import { signal } from '@pyreon/reactivity'
-import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
-import { Element } from '../Element'
-import { Portal } from '../Portal'
-import { Text } from '../Text'
-
-describe('@pyreon/elements browser smoke', () => {
-  it('Element mounts into real DOM with structural rendering', () => {
-    const { container, unmount } = mountInBrowser(
-      <Element tag="div" data-id="el"><span>hello</span></Element>,
-    )
-    const el = container.querySelector('[data-id="el"]')
-    expect(el?.tagName.toLowerCase()).toBe('div')
-    expect(el?.querySelector('span')?.textContent).toBe('hello')
-    unmount()
-  })
-
-  it('Element forwards a reactive text child to the DOM', async () => {
-    const label = signal('hello')
-    const { container, unmount } = mountInBrowser(
-      <Element tag="div">
-        <span data-id="lbl">{() => label()}</span>
-      </Element>,
-    )
-    const lbl = container.querySelector('[data-id="lbl"]')
-    expect(lbl?.textContent).toBe('hello')
-    label.set('world')
-    await flush()
-    expect(lbl?.textContent).toBe('world')
-    unmount()
-  })
-
-  it('Text renders as inline element', () => {
-    const { container, unmount } = mountInBrowser(<Text tag="span" data-id="t">hi</Text>)
-    const el = container.querySelector('[data-id="t"]')
-    expect(el?.tagName.toLowerCase()).toBe('span')
-    expect(el?.textContent).toBe('hi')
-    unmount()
-  })
-
-  it('Portal projects children to document.body by default', () => {
-    const { unmount } = mountInBrowser(
-      <Portal>
-        <div data-portal-id="p">portal-content</div>
-      </Portal>,
-    )
-    const projected = document.querySelector('[data-portal-id="p"]')
-    expect(projected?.textContent).toBe('portal-content')
-    unmount()
-    expect(document.querySelector('[data-portal-id="p"]')).toBeNull()
-  })
-
-  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'`. Every modern bundler
-    // (incl. Vitest's Vite) replaces this at build time. In a real-browser
-    // test run the literal lands as `"development" !== "production"` →
-    // `true`, so dev warnings fire as expected.
-    expect(process.env.NODE_ENV).not.toBe('production')
-  })
-
-  // Void HTML elements via Element must not trip runtime-dom's
-  // "<X> is a void element and cannot have children" warning.
-  // Wrapper used to leak an `undefined` child into the vnode for void tags.
-  describe('void HTML element tags', () => {
-    const voidTags: Array<'hr' | 'br' | 'input' | 'img'> = ['hr', 'br', 'input', 'img']
-
-    for (const tag of voidTags) {
-      it(`<${tag}> mounts without "void element" console.warn`, () => {
-        const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-        const { container, unmount } = mountInBrowser(<Element tag={tag} data-id={tag} />)
-        const el = container.querySelector(`[data-id="${tag}"]`)
-        expect(el?.tagName.toLowerCase()).toBe(tag)
-        const voidWarnings = warnSpy.mock.calls.filter((args) =>
-          typeof args[0] === 'string' && args[0].includes('void element'),
-        )
-        expect(voidWarnings).toEqual([])
-        warnSpy.mockRestore()
-        unmount()
-      })
-    }
-  })
-
-  // Regression: Wrapper used to silently drop dangerouslySetInnerHTML.
-  // The unit test asserts Wrapper forwards the prop on the rendered
-  // vnode; this real-Chromium test asserts the SVG actually appears in
-  // the DOM after mount — the user-visible bug shape was "renders empty
-  // <div></div> instead of inlined SVG".
-  describe('dangerouslySetInnerHTML — real-Chromium DOM proof', () => {
-    it('inlines an SVG via Element + dangerouslySetInnerHTML', () => {
-      const { container, unmount } = mountInBrowser(
-        <Element
-          tag="div"
-          data-id="logo"
-          dangerouslySetInnerHTML={{
-            __html: '<svg viewBox="0 0 10 10"><rect width="10" height="10" /></svg>',
-          }}
-        />,
-      )
-      const root = container.querySelector('[data-id="logo"]')
-      expect(root).toBeTruthy()
-      // The SVG must actually be in the DOM, not lost between Wrapper and
-      // the renderer. Pre-fix this assertion failed: container had
-      // <div data-id="logo"></div> with no children.
-      const svg = root?.querySelector('svg')
-      expect(svg).toBeTruthy()
-      expect(svg?.tagName.toLowerCase()).toBe('svg')
-      expect(svg?.querySelector('rect')).toBeTruthy()
-      unmount()
-    })
-
-    it('inlines markup on a button (needsFix path)', () => {
-      const { container, unmount } = mountInBrowser(
-        <Element
-          tag="button"
-          data-id="btn"
-          dangerouslySetInnerHTML={{ __html: '<strong>Save</strong>' }}
-        />,
-      )
-      const btn = container.querySelector('[data-id="btn"]')
-      expect(btn).toBeTruthy()
-      // The bold text must reach the DOM. The needsFix gate's existing
-      // `!own.dangerouslySetInnerHTML` clause skips the two-layer fix,
-      // so this falls into the !needsFix branch and the fix's
-      // `if (innerHTML)` path takes over.
-      expect(btn?.querySelector('strong')?.textContent).toBe('Save')
-      unmount()
-    })
-  })
-})

package/src/__tests__/equalBeforeAfter.test.ts

@@ -1,122 +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'
-import Wrapper from '../helpers/Wrapper/component'
-
-const asVNode = (v: unknown) => v as VNode
-
-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 equalBeforeAfter', () => {
-  it('always passes a ref function to Wrapper', () => {
-    const result = asVNode(
-      Element({
-        equalBeforeAfter: true,
-        direction: 'inline',
-        beforeContent: h('span', null, 'Before'),
-        afterContent: h('span', null, 'After'),
-        children: 'Main',
-      }),
-    )
-    expect(typeof result.type).toBe("function")
-    expect(typeof result.props.ref).toBe('function')
-  })
-
-  it('does not crash without before/after content', () => {
-    const result = asVNode(Element({ equalBeforeAfter: true, children: 'Main only' }))
-    expect(typeof result.type).toBe("function")
-  })
-
-  it('does not crash with only beforeContent', () => {
-    const result = asVNode(
-      Element({
-        equalBeforeAfter: true,
-        beforeContent: h('span', null, 'Before'),
-        children: 'Main',
-      }),
-    )
-    expect(typeof result.type).toBe("function")
-  })
-
-  it('does not crash with only afterContent', () => {
-    const result = asVNode(
-      Element({
-        equalBeforeAfter: true,
-        afterContent: h('span', null, 'After'),
-        children: 'Main',
-      }),
-    )
-    expect(typeof result.type).toBe("function")
-  })
-
-  it('renders three slot children when both before and after exist', () => {
-    const result = asVNode(
-      Element({
-        equalBeforeAfter: true,
-        direction: 'inline',
-        beforeContent: h('span', null, 'Short'),
-        afterContent: h('span', null, 'Longer content'),
-        children: 'Center',
-      }),
-    )
-    const slots = getContentSlots(result)
-    expect(slots).toHaveLength(3)
-  })
-
-  it('merged ref calls external function ref', () => {
-    let captured: HTMLElement | null = null
-    const ref = (node: HTMLElement | null) => {
-      captured = node
-    }
-    const result = asVNode(
-      Element({
-        equalBeforeAfter: true,
-        ref,
-        beforeContent: h('span', null, 'Before'),
-        afterContent: h('span', null, 'After'),
-        children: 'Main',
-      }),
-    )
-    const fakeNode = {} as HTMLElement
-    ;(result.props.ref as (node: HTMLElement | null) => void)(fakeNode)
-    expect(captured).toBe(fakeNode)
-  })
-
-  it('merged ref sets object ref current', () => {
-    const ref = { current: null as HTMLElement | null }
-    const result = asVNode(
-      Element({
-        equalBeforeAfter: true,
-        ref,
-        beforeContent: h('span', null, 'Before'),
-        afterContent: h('span', null, 'After'),
-        children: 'Main',
-      }),
-    )
-    const fakeNode = {} as HTMLElement
-    ;(result.props.ref as (node: HTMLElement | null) => void)(fakeNode)
-    expect(ref.current).toBe(fakeNode)
-  })
-
-  it('uses inline direction for equalBeforeAfter', () => {
-    const result = asVNode(
-      Element({
-        equalBeforeAfter: true,
-        direction: 'inline',
-        beforeContent: h('span', null, 'B'),
-        afterContent: h('span', null, 'A'),
-        children: 'Main',
-      }),
-    )
-    expect(result.props.direction).toBe('inline')
-  })
-})

package/src/__tests__/helpers.test.ts

@@ -1,65 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { INLINE_ELEMENTS_FLEX_FIX } from '../helpers/Wrapper/constants'
-import { isWebFixNeeded } from '../helpers/Wrapper/utils'
-
-describe('Wrapper utils', () => {
-  describe('isWebFixNeeded', () => {
-    it('returns true for button', () => {
-      expect(isWebFixNeeded('button')).toBe(true)
-    })
-
-    it('returns true for fieldset', () => {
-      expect(isWebFixNeeded('fieldset')).toBe(true)
-    })
-
-    it('returns true for legend', () => {
-      expect(isWebFixNeeded('legend')).toBe(true)
-    })
-
-    it('returns false for div', () => {
-      expect(isWebFixNeeded('div')).toBe(false)
-    })
-
-    it('returns false for span', () => {
-      expect(isWebFixNeeded('span')).toBe(false)
-    })
-
-    it('returns false for section', () => {
-      expect(isWebFixNeeded('section')).toBe(false)
-    })
-
-    it('returns false for undefined', () => {
-      expect(isWebFixNeeded(undefined)).toBe(false)
-    })
-
-    it('returns false for empty string', () => {
-      expect(isWebFixNeeded('')).toBe(false)
-    })
-
-    it('returns false for input', () => {
-      expect(isWebFixNeeded('input')).toBe(false)
-    })
-
-    it('returns false for form', () => {
-      expect(isWebFixNeeded('form')).toBe(false)
-    })
-  })
-
-  describe('INLINE_ELEMENTS_FLEX_FIX', () => {
-    it('contains button', () => {
-      expect(INLINE_ELEMENTS_FLEX_FIX.button).toBe(true)
-    })
-
-    it('contains fieldset', () => {
-      expect(INLINE_ELEMENTS_FLEX_FIX.fieldset).toBe(true)
-    })
-
-    it('contains legend', () => {
-      expect(INLINE_ELEMENTS_FLEX_FIX.legend).toBe(true)
-    })
-
-    it('only has 3 entries', () => {
-      expect(Object.keys(INLINE_ELEMENTS_FLEX_FIX)).toHaveLength(3)
-    })
-  })
-})

package/src/__tests__/integration.test.tsx

@@ -1,118 +0,0 @@
-import type { VNode } from '@pyreon/core'
-import { describe, expect, it, vi } from 'vitest'
-
-// Element's simple-Element fast path inlines the Wrapper helper directly into
-// a Styled invocation, so layout props move from `result.props.{tag, direction, …}`
-// to `result.props.{as, $element.direction, …}`. This helper reads from
-// whichever shape the result is in so assertions don't depend on which path.
-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,
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Mocks — match patterns from existing element tests
-// ---------------------------------------------------------------------------
-vi.mock('~/utils', () => ({
-  IS_DEVELOPMENT: true,
-}))
-
-vi.mock('@pyreon/ui-core', async (importOriginal) => {
-  const actual = (await importOriginal()) as Record<string, unknown>
-  return {
-    ...actual,
-    render: (children: unknown) => children,
-  }
-})
-
-import { Element } from '../Element'
-import Content from '../helpers/Content/component'
-import Wrapper from '../helpers/Wrapper/component'
-
-const asVNode = (v: unknown) => v as VNode
-
-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[]
-}
-
-// ─── Integration tests ───────────────────────────────────────────────────────
-
-describe('Element integration', () => {
-  it('renders with content prop producing Wrapper VNode', () => {
-    const result = asVNode(Element({ content: 'hello world', children: undefined }))
-    expect(typeof result.type).toBe("function")
-    const children = result.props.children
-    expect(children).toBeDefined()
-  })
-
-  it('three-section layout: beforeContent + content + afterContent', () => {
-    const result = asVNode(
-      Element({
-        beforeContent: 'icon',
-        content: 'main text',
-        afterContent: 'arrow',
-        children: undefined,
-      }),
-    )
-    expect(typeof result.type).toBe("function")
-    const slots = getContentSlots(result)
-    // With before/after content, there should be Content wrapper VNodes
-    expect(slots.length).toBeGreaterThanOrEqual(2)
-  })
-
-  it('direction and alignX props pass through to Wrapper', () => {
-    const result = asVNode(
-      Element({
-        direction: 'inline',
-        alignX: 'center',
-        children: 'test',
-      }),
-    )
-
-    // When beforeContent/afterContent are absent, direction falls through
-    // to wrapper level and contentDirection/contentAlignX take effect
-    expect(typeof result.type).toBe("function")
-    // The wrapper receives alignment props
-    expect(result.props).toBeDefined()
-  })
-
-  it('contentDirection overrides default direction on wrapper for simple element', () => {
-    const result = asVNode(
-      Element({
-        contentDirection: 'inline',
-        contentAlignX: 'center',
-        children: 'test',
-      }),
-    )
-    // Simple element (no before/after) uses contentDirection as wrapper direction
-    expect(getLayoutProps(result).direction).toBe('inline')
-    expect(getLayoutProps(result).alignX).toBe('center')
-  })
-})