@pyreon/elements 0.15.0 → 0.18.0

package/src/helpers/Iterator/types.ts

@@ -23,6 +23,80 @@ export type ExtendedProps = {
   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
   | ((
@@ -30,50 +104,35 @@ export type PropsCallback =
       extendedProps: ExtendedProps,
     ) => TObj)
 
-export type Props = Partial<{
-  /**
-   * Valid children
-   */
+export type LooseProps = Partial<{
   children: VNodeChild
-
-  /**
-   * Array of data passed to `component` prop
-   */
   data: Array<SimpleValue | ObjectValue | MaybeNull>
-
-  /**
-   * A component to be rendered within list
-   */
   component: ElementType
-
-  /**
-   * Defines name of the prop to be passed to the iteration component
-   * when **data** prop is type of `string[]`, `number[]` or combination
-   * of both. Otherwise ignored.
-   */
   valueName: string
-
-  /**
-   * A component to be rendered within list. `wrapComponent`
-   * wraps `component`. Therefore it can be used to enhance the behavior
-   * of the list component
-   */
   wrapComponent: ElementType
-
-  /**
-   * Extension of **item** `component` props to be passed
-   */
   itemProps: PropsCallback
-
-  /**
-   * Extension of **item** `wrapComponent` props to be passed
-   */
-  wrapProps?: PropsCallback
-
-  /**
-   * Extension of **item** `wrapComponent` props to be passed
-   */
-  itemKey?:
+  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

@@ -4,7 +4,7 @@
  * fix (parent + child Styled) because these HTML elements do not natively
  * support `display: flex` consistently across browsers.
  */
-import { splitProps } from '@pyreon/core'
+import { h, splitProps } from '@pyreon/core'
 import { getShouldBeEmpty } from '../../Element/utils'
 import { IS_DEVELOPMENT } from '../../utils'
 import { internElementBundle } from '../internElementBundle'
@@ -14,6 +14,46 @@ 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.
@@ -34,13 +74,6 @@ const OWN_KEYS: Array<keyof Props | 'ref'> = [
 const Component = (props: Partial<Props> & { ref?: unknown }) => {
   const [own, rest] = splitProps(props, OWN_KEYS)
 
-  const commonProps = {
-    ...rest,
-    ...DEV_PROPS,
-    ref: own.ref,
-    as: own.tag,
-  }
-
   const needsFix = !own.dangerouslySetInnerHTML && isWebFixNeeded(own.tag)
 
   // Void HTML elements (hr, input, img, br, …) cannot have children. Even
@@ -50,6 +83,15 @@ const Component = (props: Partial<Props> & { ref?: unknown }) => {
   // 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,
@@ -60,12 +102,28 @@ const Component = (props: Partial<Props> & { ref?: unknown }) => {
       extraStyles: own.extendCss,
     })
     if (isVoidTag) {
-      return <Styled {...commonProps} $element={bundle} />
+      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 (
-      <Styled {...commonProps} $element={bundle}>
-        {own.children}
-      </Styled>
+    return h(
+      Styled,
+      buildStyledProps(rest as unknown as Record<string, unknown>, own.ref, own.tag, {
+        $element: bundle,
+        children: own.children,
+      }),
     )
   }
 
@@ -83,12 +141,39 @@ const Component = (props: Partial<Props> & { ref?: unknown }) => {
     equalCols: own.equalCols,
   })
 
-  return (
-    <Styled {...commonProps} $element={parentBundle}>
-      <Styled as={asTag} $childFix $element={childBundle}>
-        {own.children}
-      </Styled>
-    </Styled>
+  // 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,
+      }),
+    }),
   )
 }
 

package/src/helpers/Wrapper/styled.ts

@@ -23,31 +23,25 @@ const parentFixCSS = `
   flex-direction: column;
 `
 
-const fullHeightCSS = `
-  height: 100%;
-`
-
-const blockCSS = `
-  align-self: stretch;
-  flex: 1;
-  min-width: 0;
-`
-
-const childFixPosition = (isBlock?: boolean) => `display: ${isBlock ? 'flex' : 'inline-flex'};`
-
-const styles: ResponsiveStylesCallback = ({ theme: t, css: cssFn }) => cssFn`
-  ${t.alignY === 'block' && fullHeightCSS};
-
+export const styles: ResponsiveStylesCallback = ({ theme: t, css: cssFn }) => cssFn`
   ${alignContent({
     direction: t.direction,
     alignX: t.alignX,
     alignY: t.alignY,
   })};
 
-  ${t.block && blockCSS};
-  ${t.alignY === 'block' && t.block && fullHeightCSS};
+  /*
+   * Always emit a value for the block-related properties so a responsive
+   * theme that flips from \`block: true\` at one breakpoint to \`block: false\`
+   * at another resets cleanly. Previously \`align-self\` / \`width\` / \`height\`
+   * were only set when the truthy branch matched, which left the prior
+   * breakpoint's values cascading through.
+   */
+  ${`align-self: ${t.block ? 'stretch' : 'auto'};
+     width: ${t.block ? '100%' : 'auto'};
+     height: ${t.alignY === 'block' ? '100%' : 'auto'};`};
 
-  ${!t.childFix && childFixPosition(t.block)};
+  ${!t.childFix && `display: ${t.block ? 'flex' : 'inline-flex'};`};
   ${t.parentFix && parentFixCSS};
 
   ${t.extraStyles && extendCss(t.extraStyles as Parameters<typeof extendCss>[0])};

package/src/index.ts

@@ -3,12 +3,16 @@ import { Provider } from '@pyreon/unistyle'
 export type { ElementProps, PyreonElement } from './Element'
 export { Element } from './Element'
 export type {
+  ChildrenProps as IteratorChildrenProps,
   ElementType,
   ExtendedProps,
+  LooseProps as IteratorLooseProps,
   MaybeNull,
+  ObjectProps as IteratorObjectProps,
   ObjectValue,
   Props as IteratorProps,
   PropsCallback,
+  SimpleProps as IteratorSimpleProps,
   SimpleValue,
 } from './helpers/Iterator'
 export { default as Iterator } from './helpers/Iterator'

package/src/types.ts

@@ -69,8 +69,39 @@ export type Responsive =
 
 export type ExtendCss = Css | Css[] | Partial<Record<BreakpointKeys, Css>>
 
-export type ExtractProps<TComponentOrTProps> =
-  TComponentOrTProps extends ComponentFn<infer TProps> ? TProps : TComponentOrTProps
+/**
+ * Extracts the props type from a Pyreon component function — multi-overload
+ * aware. Matches up to 4 call signatures and produces the UNION of their
+ * first-argument types. Iterator / List ship 3-overload primitives whose
+ * LAST overload is `ChildrenProps` (the loosest); without overload-aware
+ * extraction, `ExtractProps<Iterator>` returned just `ChildrenProps` and
+ * lost `SimpleProps<T>` / `ObjectProps<T>` shapes. Mirrors vitus-labs
+ * PR #222.
+ *
+ * Kept in sync with the copies in `@pyreon/core` / `@pyreon/attrs` /
+ * `@pyreon/rocketstyle`.
+ */
+export type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends {
+  (props: infer P1, ...args: any): any
+  (props: infer P2, ...args: any): any
+  (props: infer P3, ...args: any): any
+  (props: infer P4, ...args: any): any
+}
+  ? P1 | P2 | P3 | P4
+  : TComponentOrTProps extends {
+        (props: infer P1, ...args: any): any
+        (props: infer P2, ...args: any): any
+        (props: infer P3, ...args: any): any
+      }
+    ? P1 | P2 | P3
+    : TComponentOrTProps extends {
+          (props: infer P1, ...args: any): any
+          (props: infer P2, ...args: any): any
+        }
+      ? P1 | P2
+      : TComponentOrTProps extends ComponentFn<infer TProps>
+        ? TProps
+        : TComponentOrTProps
 
 export type PyreonComponent<P extends Record<string, any> = {}> = ComponentFn<P> & PyreonStatic