@pyreon/elements 0.24.4 → 0.24.6

package/src/helpers/Iterator/component.tsx

@@ -1,316 +0,0 @@
-/**
- * Data-driven list renderer that supports three input modes: children,
- * an array of primitives, or an array of objects.
- * Each item receives positional metadata (first, last, odd, even, position)
- * and optional injected props via `itemProps`. Items can be individually
- * wrapped with `wrapComponent`. Children always take priority over the
- * component+data prop pattern.
- */
-
-import type { VNode, VNodeChild } from '@pyreon/core'
-import { Fragment } from '@pyreon/core'
-import { isEmpty, render } from '@pyreon/ui-core'
-import type {
-  ChildrenProps,
-  ExtendedProps,
-  LooseProps,
-  ObjectProps,
-  ObjectValue,
-  SimpleProps,
-  SimpleValue,
-} from './types'
-
-type ClassifiedData =
-  | { type: 'simple'; data: SimpleValue[] }
-  | { type: 'complex'; data: ObjectValue[] }
-  | null
-
-const classifyData = (data: unknown[]): ClassifiedData => {
-  const items = data.filter(
-    (item) =>
-      item != null && !(typeof item === 'object' && isEmpty(item as Record<string, unknown>)),
-  )
-
-  if (items.length === 0) return null
-
-  let isSimple = true
-  let isComplex = true
-
-  for (const item of items) {
-    if (typeof item === 'string' || typeof item === 'number') {
-      isComplex = false
-    } else if (typeof item === 'object') {
-      isSimple = false
-    } else {
-      isSimple = false
-      isComplex = false
-    }
-  }
-
-  if (isSimple) return { type: 'simple', data: items as SimpleValue[] }
-  if (isComplex) return { type: 'complex', data: items as ObjectValue[] }
-  return null
-}
-
-const RESERVED_PROPS = [
-  'children',
-  'component',
-  'wrapComponent',
-  'data',
-  'itemKey',
-  'valueName',
-  'itemProps',
-  'wrapProps',
-] as const
-
-type AttachItemProps = ({ i, length }: { i: number; length: number }) => ExtendedProps
-
-const attachItemProps: AttachItemProps = ({ i, length }: { i: number; length: number }) => {
-  const position = i + 1
-
-  return {
-    index: i,
-    first: position === 1,
-    last: position === length,
-    odd: position % 2 === 1,
-    even: position % 2 === 0,
-    position,
-  }
-}
-
-const Component = (props: LooseProps) => {
-  const {
-    itemKey,
-    valueName,
-    children: rawChildren,
-    component,
-    data,
-    wrapComponent: Wrapper,
-    wrapProps,
-    itemProps,
-  } = props
-
-  // Unwrap the Pyreon compiler's `() => x` accessor wrap. When the parent
-  // emits `<Iterator>{items}</Iterator>` and the compiler-emitted form is
-  // `Iterator({ children: () => items })`, the downstream `Array.isArray`
-  // check returns false, the Fragment check returns false (function is not
-  // an object), and the fallthrough `renderChild(function)` calls
-  // `render(function, props)` which interprets the function as a component
-  // function — wrong shape, lost per-item metadata. Resolving eagerly here
-  // keeps every downstream branch correct. Mirrors the kinetic Stagger /
-  // TransitionItem fix (PR #731 + parallel top-level fixes).
-  const children = typeof rawChildren === 'function'
-    ? (rawChildren as () => VNodeChild)()
-    : rawChildren
-
-  const injectItemProps = typeof itemProps === 'function' ? itemProps : () => itemProps
-
-  const injectWrapItemProps = typeof wrapProps === 'function' ? wrapProps : () => wrapProps
-
-  const getKey = (item: string | number, index: number) => {
-    if (typeof itemKey === 'function') return itemKey(item, index)
-    return index
-  }
-
-  const renderChild = (child: VNodeChild, total = 1, i = 0) => {
-    if (!itemProps && !Wrapper) return child
-
-    const extendedProps = attachItemProps({
-      i,
-      length: total,
-    })
-
-    const finalItemProps = itemProps ? injectItemProps({}, extendedProps) : {}
-
-    if (Wrapper) {
-      const finalWrapProps = wrapProps ? injectWrapItemProps({}, extendedProps) : {}
-
-      return (
-        <Wrapper key={i} {...finalWrapProps}>
-          {render(child, finalItemProps)}
-        </Wrapper>
-      )
-    }
-
-    return render(child, {
-      key: i,
-      ...finalItemProps,
-    })
-  }
-
-  // --------------------------------------------------------
-  // render children
-  // --------------------------------------------------------
-  const renderChildren = () => {
-    if (!children) return null
-
-    // if children is Array
-    if (Array.isArray(children)) {
-      return children.map((item, i) => renderChild(item, children.length, i))
-    }
-
-    // if children is Fragment — check VNode type
-    if (
-      typeof children === 'object' &&
-      'type' in (children as VNode) &&
-      (children as VNode).type === Fragment
-    ) {
-      const fragmentChildren = (children as VNode).children as VNodeChild[]
-      const childrenLength = fragmentChildren.length
-
-      return fragmentChildren.map((item, i) => renderChild(item, childrenLength, i))
-    }
-
-    // if single child
-    return renderChild(children)
-  }
-
-  // --------------------------------------------------------
-  // render array of strings or numbers
-  // --------------------------------------------------------
-  const renderSimpleArray = (simpleData: SimpleValue[]) => {
-    const { length } = simpleData
-
-    if (length === 0) return null
-
-    return simpleData.map((item, i) => {
-      const key = getKey(item, i)
-      const keyName = valueName ?? 'children'
-      const extendedProps = attachItemProps({
-        i,
-        length,
-      })
-
-      const finalItemProps = {
-        ...(itemProps ? injectItemProps({ [keyName]: item }, extendedProps) : {}),
-        [keyName]: item,
-      }
-
-      if (Wrapper) {
-        const finalWrapProps = wrapProps
-          ? injectWrapItemProps({ [keyName]: item }, extendedProps)
-          : {}
-
-        return (
-          <Wrapper key={key} {...finalWrapProps}>
-            {render(component, finalItemProps)}
-          </Wrapper>
-        )
-      }
-
-      return render(component, { key, ...finalItemProps })
-    })
-  }
-
-  // --------------------------------------------------------
-  // render array of objects
-  // --------------------------------------------------------
-  const getObjectKey = (item: ObjectValue, index: number) => {
-    if (!itemKey) return item.key ?? item.id ?? item.itemId ?? index
-    if (typeof itemKey === 'function') return itemKey(item, index)
-    if (typeof itemKey === 'string') return item[itemKey]
-
-    return index
-  }
-
-  const renderComplexArray = (complexData: ObjectValue[]) => {
-    const { length } = complexData
-
-    if (length === 0) return null
-
-    return complexData.map((item, i) => {
-      const { component: itemComponent, ...restItem } = item
-      const renderItem = itemComponent ?? component
-      const key = getObjectKey(restItem, i)
-      const extendedProps = attachItemProps({
-        i,
-        length,
-      })
-
-      const finalItemProps = {
-        ...(itemProps ? injectItemProps(item, extendedProps) : {}),
-        ...restItem,
-      }
-
-      if (Wrapper && !itemComponent) {
-        const finalWrapProps = wrapProps ? injectWrapItemProps(item, extendedProps) : {}
-
-        return (
-          <Wrapper key={key} {...finalWrapProps}>
-            {render(renderItem, finalItemProps)}
-          </Wrapper>
-        )
-      }
-
-      return render(renderItem, { key, ...finalItemProps })
-    })
-  }
-
-  // --------------------------------------------------------
-  // render list items
-  // --------------------------------------------------------
-  const renderItems = (): VNodeChild => {
-    // children have priority over props component + data
-    if (children) return renderChildren() as VNodeChild
-
-    // render props component + data
-    if (component && Array.isArray(data)) {
-      const classified = classifyData(data)
-      if (!classified) return null
-      if (classified.type === 'simple') return renderSimpleArray(classified.data) as VNodeChild
-      return renderComplexArray(classified.data) as VNodeChild
-    }
-
-    return null
-  }
-
-  return renderItems()
-}
-
-// ---------------------------------------------------------------------------
-// Public callable type — overloads expose the generic `<T>` API at the JSX
-// boundary while the impl stays loose-typed. TS picks the matching overload
-// based on the props object passed:
-//
-//   <Iterator data={['a','b']} valueName="text" component={Item} />
-//   ^ T inferred as string → SimpleProps<string> overload selected
-//
-//   <Iterator data={users} component={UserCard} />
-//   ^ T inferred as User → ObjectProps<User> overload selected
-//
-//   <Iterator>{...}</Iterator>            → ChildrenProps overload selected
-// ---------------------------------------------------------------------------
-export interface IteratorComponent {
-  // T is inferred from the `data` prop at the JSX site — no explicit
-  // generic argument needed. Order matters: SimpleProps first (matches
-  // `data: SimpleValue[]`), then ObjectProps (object[]), then ChildrenProps,
-  // then a LooseProps fallback.
-  //
-  // The narrow overloads (Simple / Object / Children) drive per-mode T
-  // inference and stricter compile-time errors for direct callers (e.g.
-  // `valueName` required for primitive arrays, forbidden for object arrays).
-  // The LooseProps fallback exists for forwarding patterns where the props
-  // type is a wide union that doesn't bind to any single narrow overload —
-  // notably `Partial<(typeof Wrapper)['$$types']>` spread back into the JSX
-  // site after `@pyreon/rocketstyle`'s 4-overload-aware `ExtractProps`
-  // distributes the union across all of Iterator's call signatures. Without
-  // the loose binding home, the wide union has nowhere to land and TS
-  // reports "no overload matches this call" at every forwarding site.
-  //
-  // Direct callers still see the strict per-mode errors — the loose fallback
-  // only fires when none of the three narrow overloads match.
-  <T extends SimpleValue>(props: SimpleProps<T>): VNodeChild
-  <T extends ObjectValue>(props: ObjectProps<T>): VNodeChild
-  (props: ChildrenProps): VNodeChild
-  (props: LooseProps): VNodeChild
-  isIterator: true
-  RESERVED_PROPS: typeof RESERVED_PROPS
-  displayName?: string
-}
-
-const Iterator = Object.assign(Component, {
-  isIterator: true as const,
-  RESERVED_PROPS,
-}) as unknown as IteratorComponent
-
-export default Iterator

package/src/helpers/Iterator/index.ts

@@ -1,30 +0,0 @@
-import component from './component'
-import type {
-  ChildrenProps,
-  ElementType,
-  ExtendedProps,
-  LooseProps,
-  MaybeNull,
-  ObjectProps,
-  ObjectValue,
-  Props,
-  PropsCallback,
-  SimpleProps,
-  SimpleValue,
-} from './types'
-
-export type {
-  ChildrenProps,
-  ElementType,
-  ExtendedProps,
-  LooseProps,
-  MaybeNull,
-  ObjectProps,
-  ObjectValue,
-  Props,
-  PropsCallback,
-  SimpleProps,
-  SimpleValue,
-}
-
-export default component

package/src/helpers/Iterator/types.ts

@@ -1,138 +0,0 @@
-import type { ComponentFn, VNodeChild } from '@pyreon/core'
-import type { HTMLTags } from '@pyreon/ui-core'
-
-export type MaybeNull = undefined | null
-export type TObj = Record<string, unknown>
-export type SimpleValue = string | number
-export type ObjectValue = Partial<{
-  id: SimpleValue
-  key: SimpleValue
-  itemId: SimpleValue
-  component: ElementType
-}> &
-  Record<string, unknown>
-
-export type ElementType<T extends Record<string, unknown> = any> = ComponentFn<T> | HTMLTags
-
-export type ExtendedProps = {
-  index: number
-  first: boolean
-  last: boolean
-  odd: boolean
-  even: boolean
-  position: number
-}
-
-// ---------------------------------------------------------------------------
-// Per-mode prop shapes — narrowed via the `T` data-element type
-// ---------------------------------------------------------------------------
-
-/**
- * Iterator over an array of strings/numbers. Each item is wrapped in
- * `{ [valueName]: item }` and that object is what callbacks see + what's
- * spread onto the rendered component.
- */
-export type SimpleProps<T extends SimpleValue> = {
-  data: Array<T | MaybeNull>
-  /** A component to be rendered per item. */
-  component: ElementType
-  /**
-   * Key under which each primitive value is exposed to `component` and
-   * callbacks. Defaults to `'children'` at runtime — i.e. the value is
-   * passed to the component as its children.
-   */
-  valueName?: string
-  /** Optional wrapper around each item. */
-  wrapComponent?: ElementType
-  /** Stable key per item (defaults to index). */
-  itemKey?: (item: T, index: number) => SimpleValue
-  /** Extra props merged onto the rendered component, optionally per-item. */
-  itemProps?: TObj | ((item: { [k: string]: T }, ext: ExtendedProps) => TObj)
-  /** Extra props merged onto the wrapper, optionally per-item. */
-  wrapProps?: TObj | ((item: { [k: string]: T }, ext: ExtendedProps) => TObj)
-  children?: never
-}
-
-/**
- * Iterator over an array of objects. Each item is spread onto the rendered
- * component as props. Per-item `component` overrides also work — when an
- * item carries its own `component` field, the wrapper is bypassed.
- */
-export type ObjectProps<T extends ObjectValue> = {
-  data: Array<T | MaybeNull>
-  /** Default component to be rendered per item (item-level `component` overrides). */
-  component: ElementType
-  /** `valueName` is meaningless when iterating objects — TS forbids it. */
-  valueName?: never
-  /** Optional wrapper around each item. */
-  wrapComponent?: ElementType
-  /** Stable key per item — pick a key from the item, or compute it. */
-  itemKey?: keyof T | ((item: T, index: number) => SimpleValue)
-  /** Extra props merged onto the rendered component, optionally per-item. */
-  itemProps?: TObj | ((item: T, ext: ExtendedProps) => TObj)
-  /** Extra props merged onto the wrapper, optionally per-item. */
-  wrapProps?: TObj | ((item: T, ext: ExtendedProps) => TObj)
-  children?: never
-}
-
-/**
- * Iterator over `children` — no `data`/`component`. Each child gets
- * positional metadata via `itemProps` and an optional `wrapComponent`.
- */
-export type ChildrenProps = {
-  children: VNodeChild
-  data?: never
-  component?: never
-  valueName?: never
-  itemKey?: never
-  wrapComponent?: ElementType
-  itemProps?: TObj | ((_: Record<string, never>, ext: ExtendedProps) => TObj)
-  wrapProps?: TObj | ((_: Record<string, never>, ext: ExtendedProps) => TObj)
-}
-
-// ---------------------------------------------------------------------------
-// Loose backward-compatible fallback shape (today's behavior)
-//
-// Used when callers don't (or can't) parameterize `Props<T>` — keeps the
-// existing call surface intact so this refactor lands non-breaking.
-// ---------------------------------------------------------------------------
-
-export type PropsCallback =
-  | TObj
-  | ((
-      itemProps: Record<string, never> | Record<string, SimpleValue> | ObjectValue,
-      extendedProps: ExtendedProps,
-    ) => TObj)
-
-export type LooseProps = Partial<{
-  children: VNodeChild
-  data: Array<SimpleValue | ObjectValue | MaybeNull>
-  component: ElementType
-  valueName: string
-  wrapComponent: ElementType
-  itemProps: PropsCallback
-  wrapProps: PropsCallback
-  itemKey:
-    | keyof ObjectValue
-    | ((item: SimpleValue | Omit<ObjectValue, 'component'>, index: number) => SimpleValue)
-}>
-
-// ---------------------------------------------------------------------------
-// Public, generic-aware Props<T>
-//
-//   Props<string>          → SimpleProps<string>     (valueName REQUIRED)
-//   Props<{ id; name }>    → ObjectProps<{...}>      (valueName FORBIDDEN)
-//   Props<unknown> / Props → LooseProps              (today's behavior)
-//
-// `unknown extends T` is the canonical "did the caller actually narrow T?"
-// check — true only when T is left as `unknown`, false for any concrete
-// narrowing. Fallback to LooseProps preserves existing call sites.
-// ---------------------------------------------------------------------------
-
-export type Props<T = unknown> = unknown extends T
-  ? LooseProps
-  : T extends SimpleValue
-    ? SimpleProps<T>
-    : T extends ObjectValue
-      ? ObjectProps<T>
-      : ChildrenProps

package/src/helpers/Wrapper/component.tsx

@@ -1,180 +0,0 @@
-/**
- * Wrapper component that serves as the outermost styled container for Element.
- * On web, it detects button/fieldset/legend tags and applies a two-layer flex
- * fix (parent + child Styled) because these HTML elements do not natively
- * support `display: flex` consistently across browsers.
- */
-import { h, splitProps } from '@pyreon/core'
-import { getShouldBeEmpty } from '../../Element/utils'
-import { IS_DEVELOPMENT } from '../../utils'
-import { internElementBundle } from '../internElementBundle'
-import Styled from './styled'
-import type { Props } from './types'
-import { isWebFixNeeded } from './utils'
-
-const DEV_PROPS: Record<string, string> = IS_DEVELOPMENT ? { 'data-pyr-element': 'Element' } : {}
-
-/**
- * Build a props object for `h(Styled, ...)` by copying own property
- * DESCRIPTORS from `rest`, then layering the additional fields. Compiler-
- * emitted reactive props (`_rp(() => signal())` converted to getters by
- * `makeReactiveProps`) survive end-to-end with their getter intact.
- *
- * Why we bypass JSX spread here: the standard JSX automatic-runtime
- * compilation lowers `<Styled {...rest} foo={x}>` to roughly
- * `jsx(Styled, { ...rest, foo: x })`. That `{...rest, foo: x}` object
- * literal is evaluated at JS level — it fires every getter on `rest` and
- * stores the resolved value before `jsx()` ever sees the object. No
- * amount of in-runtime descriptor preservation can recover the getters
- * once they've been collapsed by the surface-level spread. The fix is
- * structural: don't use JSX spread for reactive-prop forwarding. Build
- * the props object with descriptor preservation and pass it to `h()`
- * directly — `h()` stores props as-is on the vnode, no copy, getters
- * survive into mount.
- */
-const buildStyledProps = (
-  rest: Record<string, unknown>,
-  refValue: unknown,
-  asTag: unknown,
-  extras: Record<string, unknown>,
-): Record<string, unknown> => {
-  const result: Record<string, unknown> = {}
-  const descriptors = Object.getOwnPropertyDescriptors(rest)
-  for (const key in descriptors) {
-    Object.defineProperty(result, key, descriptors[key]!)
-  }
-  for (const key in DEV_PROPS) {
-    result[key] = DEV_PROPS[key]
-  }
-  result.ref = refValue
-  result.as = asTag
-  for (const key in extras) {
-    result[key] = extras[key]
-  }
-  return result
-}
-
-// Layout / ref keys consumed by Wrapper itself. Everything else is forwarded
-// onto the underlying DOM node. Listed as a tuple so `splitProps` narrows
-// `own` correctly while preserving reactive prop tracking on both halves.
-const OWN_KEYS: Array<keyof Props | 'ref'> = [
-  'children',
-  'tag',
-  'block',
-  'extendCss',
-  'direction',
-  'alignX',
-  'alignY',
-  'equalCols',
-  'isInline',
-  'ref',
-  'dangerouslySetInnerHTML',
-]
-
-const Component = (props: Partial<Props> & { ref?: unknown }) => {
-  const [own, rest] = splitProps(props, OWN_KEYS)
-
-  const needsFix = !own.dangerouslySetInnerHTML && isWebFixNeeded(own.tag)
-
-  // Void HTML elements (hr, input, img, br, …) cannot have children. Even
-  // a falsy `{own.children}` slot becomes `[undefined]` in the vnode and
-  // trips runtime-dom's void-element warning. Element already skips passing
-  // children to Wrapper for void tags; this guard makes sure the empty
-  // slot is dropped here too instead of leaking into the JSX.
-  const isVoidTag = !own.dangerouslySetInnerHTML && getShouldBeEmpty(own.tag)
-
-  // dangerouslySetInnerHTML and children are mutually exclusive — both
-  // become inner content (per `runtime-server/src/index.ts:228` and
-  // `runtime-dom/src/props.ts:289`). Pre-fix the prop was in OWN_KEYS,
-  // moved into `own` by splitProps, and never re-attached to the rendered
-  // vnode — so `<Logo dangerouslySetInnerHTML={...} />` rendered an empty
-  // <div></div>. Forward the prop to the styled vnode and drop the
-  // children slot when innerHTML is set.
-  const innerHTML = own.dangerouslySetInnerHTML
-
-  if (!needsFix) {
-    const bundle = internElementBundle({
-      block: own.block,
-      direction: own.direction,
-      alignX: own.alignX,
-      alignY: own.alignY,
-      equalCols: own.equalCols,
-      extraStyles: own.extendCss,
-    })
-    if (isVoidTag) {
-      return h(
-        Styled,
-        buildStyledProps(rest as unknown as Record<string, unknown>, own.ref, own.tag, {
-          $element: bundle,
-        }),
-      )
-    }
-    if (innerHTML) {
-      return h(
-        Styled,
-        buildStyledProps(rest as unknown as Record<string, unknown>, own.ref, own.tag, {
-          $element: bundle,
-          dangerouslySetInnerHTML: innerHTML,
-        }),
-      )
-    }
-    return h(
-      Styled,
-      buildStyledProps(rest as unknown as Record<string, unknown>, own.ref, own.tag, {
-        $element: bundle,
-        children: own.children,
-      }),
-    )
-  }
-
-  const asTag = own.isInline ? 'span' : 'div'
-  const parentBundle = internElementBundle({
-    parentFix: true as const,
-    block: own.block,
-    extraStyles: own.extendCss,
-  })
-  const childBundle = internElementBundle({
-    childFix: true as const,
-    direction: own.direction,
-    alignX: own.alignX,
-    alignY: own.alignY,
-    equalCols: own.equalCols,
-  })
-
-  // needsFix path: innerHTML belongs on the INNER styled node (where the
-  // actual content lives), NOT on the outer flex-fix wrapper. The
-  // `needsFix` computation already excludes the innerHTML case
-  // (`!own.dangerouslySetInnerHTML && isWebFixNeeded(own.tag)`), so this
-  // branch normally won't execute when innerHTML is set — but we keep
-  // the defensive forwarding so the contract is robust against future
-  // refactors of the needsFix gate.
-  if (innerHTML) {
-    return h(
-      Styled,
-      buildStyledProps(rest as unknown as Record<string, unknown>, own.ref, own.tag, {
-        $element: parentBundle,
-        children: h(Styled, {
-          as: asTag,
-          $childFix: true,
-          $element: childBundle,
-          dangerouslySetInnerHTML: innerHTML,
-        }),
-      }),
-    )
-  }
-
-  return h(
-    Styled,
-    buildStyledProps(rest as unknown as Record<string, unknown>, own.ref, own.tag, {
-      $element: parentBundle,
-      children: h(Styled, {
-        as: asTag,
-        $childFix: true,
-        $element: childBundle,
-        children: own.children,
-      }),
-    }),
-  )
-}
-
-export default Component

package/src/helpers/Wrapper/constants.ts

@@ -1,10 +0,0 @@
-/**
- * HTML elements that need a two-layer DOM workaround because browsers do not
- * fully support flexbox layout on button, fieldset, and legend elements.
- * @see https://stackoverflow.com/questions/35464067/flexbox-not-working-on-button-or-fieldset-elements
- */
-export const INLINE_ELEMENTS_FLEX_FIX = {
-  button: true,
-  fieldset: true,
-  legend: true,
-}

package/src/helpers/Wrapper/index.ts

@@ -1,3 +0,0 @@
-import component from './component'
-
-export default component