@remix-run/ui 0.3.0 → 0.5.0

package/src/{components/popover/popover.ts → popover/index.ts}

@@ -1,22 +1,15 @@
 import {
   attrs,
   createMixin,
-  css,
   on,
-  type CSSMixinDescriptor,
   type ElementProps,
   type Handle,
   type MixinFactory,
   type RemixNode,
 } from '@remix-run/ui'
-import {
-  anchor as positionAnchor,
-  type AnchorOptions,
-  type AnchorTarget,
-} from '../anchor/anchor.ts'
-import { onOutsideClick } from '../../interactions/outside-click/outside-click-mixin.ts'
-import { theme } from '../../theme/theme.ts'
-import { lockScroll } from '../../utils/scroll-lock.ts'
+import { anchor as positionAnchor, type AnchorOptions, type AnchorTarget } from '../anchor/index.ts'
+import { onOutsideClick } from './outside-click.ts'
+import { lockScroll } from './scroll-lock.ts'
 
 export interface PopoverContext {
   hideFocusTarget: HTMLElement | null
@@ -34,53 +27,6 @@ interface AnchorRef {
   options: AnchorOptions
 }
 
-const popupViewportClampMaxHeight = '50dvh'
-
-const popoverSurfaceTransitionCss: CSSMixinDescriptor = css({
-  opacity: 0,
-  '&:popover-open': {
-    opacity: 1,
-  },
-  '&:not(:popover-open)': {
-    pointerEvents: 'none',
-    transition: 'opacity 180ms ease-in, overlay 180ms ease-in, display 180ms ease-in',
-    transitionBehavior: 'allow-discrete',
-  },
-})
-
-const popoverContentCss: CSSMixinDescriptor = css({
-  flex: '1 1 auto',
-  minHeight: 0,
-  padding: theme.space.xs,
-  overflow: 'auto',
-  overscrollBehavior: 'contain',
-})
-
-const popoverSurfaceCss: CSSMixinDescriptor = css({
-  position: 'fixed',
-  inset: 'auto',
-  margin: 0,
-  padding: theme.space.none,
-  display: 'flex',
-  flexDirection: 'column',
-  minHeight: 0,
-  minWidth: '12rem',
-  maxWidth: `min(24rem, calc(100vw - (${theme.space.lg} * 2)))`,
-  maxHeight: popupViewportClampMaxHeight,
-  border: `1px solid ${theme.colors.border.subtle}`,
-  borderRadius: theme.radius.lg,
-  backgroundColor: theme.surface.lvl0,
-  color: theme.colors.text.primary,
-  overflow: 'hidden',
-  boxShadow: `${theme.shadow.xs}, ${theme.shadow.md}`,
-  '&::backdrop': {
-    background: 'transparent',
-  },
-})
-
-export const contentStyle = popoverContentCss
-export const surfaceStyle = [popoverSurfaceCss, popoverSurfaceTransitionCss] as const
-
 function PopoverProvider(handle: Handle<PopoverProps, PopoverContext>): () => RemixNode {
   handle.context.set({
     hideFocusTarget: null,

package/src/{utils → popover}/scroll-lock.ts

@@ -1,5 +1,3 @@
-import { createMixin, on, type ElementProps, type MixinFactory } from '@remix-run/ui'
-
 type ScrollLockState = {
   count: number
   documentOverflow: string
@@ -73,29 +71,3 @@ export function lockScroll(targetDocument: Document | undefined = globalThis.doc
     view.scrollTo(currentState.scrollX, currentState.scrollY)
   }
 }
-
-export const lockScrollOnToggle: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
-  HTMLElement,
-  [],
-  ElementProps
->((handle) => {
-  let unlockScroll = () => {}
-
-  handle.signal.addEventListener('abort', () => {
-    unlockScroll()
-    unlockScroll = () => {}
-  })
-
-  return () => [
-    on('beforetoggle', (event) => {
-      unlockScroll()
-      unlockScroll = () => {}
-
-      if (event.newState !== 'open') {
-        return
-      }
-
-      unlockScroll = lockScroll((event.currentTarget as HTMLElement).ownerDocument)
-    }),
-  ]
-})

package/src/radio/README.md

@@ -0,0 +1,53 @@
+# radio
+
+`radio` is a style mixin for native radio inputs. It only owns radio visuals and the default `type="radio"` behavior for native `<input>` hosts.
+
+## Primitive Usage
+
+```tsx
+import radio from 'remix/ui/radio'
+
+function ShippingSpeed() {
+  return () => (
+    <fieldset>
+      <label>
+        <input defaultChecked mix={radio()} name="shipping-speed" value="standard" />
+        Standard
+      </label>
+      <label>
+        <input mix={radio({ size: 'lg' })} name="shipping-speed" value="express" />
+        Express
+      </label>
+    </fieldset>
+  )
+}
+```
+
+Compose app-owned styles around the primitive when a radio option needs local layout:
+
+```tsx
+import radio from 'remix/ui/radio'
+import { optionStyle } from './shipping.styles'
+
+function ShippingOption() {
+  return () => (
+    <label mix={optionStyle}>
+      <input mix={radio()} name="shipping-speed" value="overnight" />
+      Overnight
+    </label>
+  )
+}
+```
+
+## `remix/ui/radio`
+
+- `radio(options)`: style mixin for native radio inputs or radio-like hosts.
+- `RadioOptions`: accepts `size`.
+- `RadioSize`: `'md'` or `'lg'`. Defaults to `'md'`.
+
+## Behavior Notes
+
+- `radio()` returns a mixin descriptor, so it composes with other mixins in the host element's `mix` prop.
+- Native `<input>` hosts receive `type="radio"` unless an explicit `type` is provided.
+- Radio state is native browser behavior. The mixin also styles `aria-checked="true"` and `data-state="checked"` for custom hosts.
+- Disabled hosts use the shared disabled treatment through `disabled` or `aria-disabled="true"`.

package/src/radio/index.ts

@@ -0,0 +1,101 @@
+import { createMixin, css } from '@remix-run/ui'
+import type { CSSMixinDescriptor, ElementProps, MixinDescriptor } from '@remix-run/ui'
+import { renderMixinElement } from '../runtime/mixins/mixin.ts'
+import { controlFocusShadow } from '../shared/focus-styles.ts'
+
+export type RadioSize = 'md' | 'lg'
+
+export interface RadioOptions {
+  size?: RadioSize
+}
+
+type RadioMixin = readonly [
+  MixinDescriptor<Element, [], ElementProps>,
+  CSSMixinDescriptor,
+  CSSMixinDescriptor,
+]
+
+const checkedSelector = '&:checked, &[aria-checked="true"], &[data-state="checked"]'
+const checkedMarkSelector =
+  '&:checked::before, &[aria-checked="true"]::before, &[data-state="checked"]::before'
+
+const radioDefaultAttrs = createMixin<Element, [], ElementProps>((handle, hostType) => (props) => {
+  if (hostType !== 'input' || props.type !== undefined) {
+    return handle.element
+  }
+
+  return renderMixinElement(handle.element, {
+    ...props,
+    type: 'radio',
+  })
+})()
+
+const baseStyle: CSSMixinDescriptor = css({
+  appearance: 'none',
+  WebkitAppearance: 'none',
+  margin: 0,
+  boxSizing: 'border-box',
+  position: 'relative',
+  display: 'inline-grid',
+  placeItems: 'center',
+  width: 'var(--rmx-radio-size)',
+  height: 'var(--rmx-radio-size)',
+  minWidth: 'var(--rmx-radio-size)',
+  minHeight: 'var(--rmx-radio-size)',
+  padding: 0,
+  border: '1px solid light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.2))',
+  borderRadius: '9999px',
+  background: 'light-dark(#FFFFFF, #1a1a1a)',
+  boxShadow: 'inset 0 1px 1px rgba(0, 0, 0, 0.06), inset 0 2px 2px rgba(0, 0, 0, 0.06)',
+  verticalAlign: 'middle',
+  flex: 'none',
+  '&::before': {
+    content: '""',
+    width: 'var(--rmx-radio-mark-size)',
+    height: 'var(--rmx-radio-mark-size)',
+    borderRadius: '99px',
+    background:
+      'linear-gradient(180deg, rgba(53, 115, 246, 0) 25%, rgba(53, 115, 246, 0.15) 100%), light-dark(#FFFFFF, #f5f9ff)',
+    boxShadow:
+      '0 1px 1px -0.5px #0944BE, 0 2px 2px -1px #0944BE, 0 4px 4px -2px #0944BE, 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.28)), inset 0 0 2px 1px light-dark(#FFFFFF, rgba(255, 255, 255, 0.5))',
+    opacity: 0,
+    pointerEvents: 'none',
+  },
+  '&:disabled, &[aria-disabled="true"]': {
+    opacity: 0.55,
+  },
+  [checkedSelector]: {
+    border: 0,
+    borderRadius: '99px',
+    background:
+      'linear-gradient(180deg, light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.16)) 0%, rgba(0, 0, 0, 0) 75.48%), light-dark(#3573F6, #6eaaff)',
+    backgroundBlendMode: 'overlay, normal',
+    boxShadow:
+      '0 1px 0 rgba(255, 255, 255, 0.6), 0 0 16px rgba(53, 115, 246, 0.25), inset 0 0 3px 1px rgba(0, 0, 0, 0.1)',
+  },
+  [checkedMarkSelector]: {
+    opacity: 1,
+  },
+  '&:focus-visible': {
+    outline: 0,
+    boxShadow: controlFocusShadow,
+  },
+})
+
+const sizeStyles = {
+  md: css({
+    '--rmx-radio-size': '16px',
+    '--rmx-radio-mark-size': '8px',
+  }),
+  lg: css({
+    '--rmx-radio-size': '20px',
+    '--rmx-radio-mark-size': '10px',
+  }),
+} as const satisfies Record<RadioSize, CSSMixinDescriptor>
+
+export function radio(options: RadioOptions = {}): RadioMixin {
+  let { size = 'md' } = options
+  return [radioDefaultAttrs, baseStyle, sizeStyles[size]]
+}
+
+export default radio

package/src/runtime/client-entry-boundary.ts

@@ -0,0 +1,54 @@
+import type { VirtualRoot } from './vdom.ts'
+
+export type ClientEntryIdentity = {
+  moduleUrl: string
+  exportName: string
+}
+
+type ClientEntryRoot = Pick<VirtualRoot, 'dispose' | 'render'>
+
+export type ClientEntryBoundaryOwner = {
+  identity: ClientEntryIdentity
+  root: ClientEntryRoot
+}
+
+const CLIENT_ENTRY_BOUNDARY_OWNER = Symbol('ClientEntryBoundaryOwner')
+
+type ClientEntryBoundaryMarker = Comment & {
+  [CLIENT_ENTRY_BOUNDARY_OWNER]?: ClientEntryBoundaryOwner
+  $rmx?: ClientEntryRoot
+}
+
+export function getClientEntryBoundaryOwner(marker: Comment): ClientEntryBoundaryOwner | undefined {
+  return (marker as ClientEntryBoundaryMarker)[CLIENT_ENTRY_BOUNDARY_OWNER]
+}
+
+export function setClientEntryBoundaryOwner(
+  marker: Comment,
+  identity: ClientEntryIdentity,
+  root: ClientEntryRoot,
+): ClientEntryBoundaryOwner {
+  let owner = { identity, root }
+  Object.defineProperties(marker, {
+    [CLIENT_ENTRY_BOUNDARY_OWNER]: {
+      configurable: true,
+      value: owner,
+    },
+    $rmx: {
+      configurable: true,
+      value: root,
+    },
+  })
+  return owner
+}
+
+export function disposeClientEntryBoundary(marker: Comment): boolean {
+  let boundaryMarker = marker as ClientEntryBoundaryMarker
+  let owner = boundaryMarker[CLIENT_ENTRY_BOUNDARY_OWNER]
+  if (!owner) return false
+
+  delete boundaryMarker[CLIENT_ENTRY_BOUNDARY_OWNER]
+  delete boundaryMarker.$rmx
+  owner.root.dispose()
+  return true
+}

package/src/runtime/component.ts

@@ -1,4 +1,6 @@
 import type { ElementProps, ElementType, RemixNode, Renderable } from './jsx.ts'
+import type { ElementFunction } from './element-function.ts'
+import type { Key } from './key.ts'
 import { TypedEventTarget } from './typed-event-target.ts'
 
 /**
@@ -138,6 +140,14 @@ export interface Context<C> {
  */
 export type FrameContent = ReadableStream<Uint8Array> | string | RemixNode
 
+/**
+ * Value returned by a browser frame resolver.
+ *
+ * A response body is rendered as frame content. When `fetch()` followed a redirect, the response's
+ * final URL updates the frame source and browser URL for a top-frame navigation.
+ */
+export type FrameResolution = FrameContent | Response
+
 /**
  * Events emitted by frame handles during reloads.
  */
@@ -208,18 +218,26 @@ export interface BuiltinElements {
 /**
  * Key type used to stabilize host elements and components during reconciliation.
  */
-export type Key = string | number | bigint
+export type { Key } from './key.ts'
 
 type ComponentConfig = {
   id: string
-  type: Function
+  type: ElementFunction
   frame: FrameHandle
-  getContext: (type: Component) => unknown
+  getContext: (type: ElementFunction) => unknown
   getFrameByName: (name: string) => FrameHandle | undefined
   getTopFrame?: () => FrameHandle | undefined
   signal?: AbortSignal
 }
 
+/**
+ * Minimal structural view of the scheduler used for handle.update() so this
+ * module doesn't depend on the reconciler.
+ */
+export interface UpdateQueue {
+  enqueue(vnode: object, domParent: ParentNode): void
+}
+
 /**
  * Runtime handle returned by {@link createComponent}.
  */
@@ -227,7 +245,7 @@ export interface ComponentHandle<C = NoContext> {
   frame: FrameHandle
   render(nextProps: ElementProps): [RemixNode, Array<() => void>]
   remove(): Array<() => void>
-  setScheduleUpdate(nextScheduleUpdate: () => void): void
+  setScheduleUpdate(queue: UpdateQueue, vnode: object, domParent: ParentNode): void
   getContextValue(): C | undefined
   isRemoved(): boolean
 }
@@ -249,12 +267,22 @@ class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
   #connectedController: AbortController | undefined
   #contextValue: C | undefined
   #handle: Handle<ElementProps, C>
-  #props = {} as ElementProps
+  #props: ElementProps = {}
   #renderController: AbortController | undefined
   #renderFn: RenderFn | undefined
   #removed = false
-  #scheduleUpdate: () => void = () => {
-    throw new Error('scheduleUpdate not implemented')
+  // The schedule target is stored as fields (updated each render) rather than
+  // a closure so re-renders don't allocate a new function per component.
+  #updateQueue: UpdateQueue | undefined
+  #updateVNode: object | undefined
+  #updateDomParent: ParentNode | undefined
+  #scheduleUpdate = (): void => {
+    let queue = this.#updateQueue
+    if (!queue) throw new Error('scheduleUpdate not implemented')
+    let vnode = this.#updateVNode
+    let domParent = this.#updateDomParent
+    if (!vnode || !domParent) throw new Error('scheduleUpdate target not initialized')
+    queue.enqueue(vnode, domParent)
   }
   #tasks: Task[] = []
 
@@ -276,14 +304,15 @@ class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
     let renderFn = this.#renderFn
 
     if (renderFn === undefined) {
-      let result = this.#config.type(this.#handle)
+      let initialize = this.#config.type as unknown as (handle: Handle<ElementProps, C>) => unknown
+      let result = initialize(this.#handle)
 
-      if (typeof result !== 'function') {
+      if (!isRenderFn(result)) {
         let name = this.#config.type.name || 'Anonymous'
         throw new Error(`${name} must return a render function, received ${typeof result}`)
       }
 
-      renderFn = result as RenderFn
+      renderFn = result
       this.#renderFn = renderFn
     }
 
@@ -291,15 +320,18 @@ class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
   }
 
   remove = (): Array<() => void> => {
-    if (this.#removed) return []
+    if (this.#removed) return EMPTY_TASKS
     this.#removed = true
     this.#connectedController?.abort()
     this.#abortRenderSignal()
-    return this.#dequeueTasks(AbortSignal.abort())
+    if (this.#tasks.length === 0) return EMPTY_TASKS
+    return this.#dequeueTasks((sharedAbortedSignal ??= AbortSignal.abort()))
   }
 
-  setScheduleUpdate = (nextScheduleUpdate: () => void): void => {
-    this.#scheduleUpdate = nextScheduleUpdate
+  setScheduleUpdate = (queue: UpdateQueue, vnode: object, domParent: ParentNode): void => {
+    this.#updateQueue = queue
+    this.#updateVNode = vnode
+    this.#updateDomParent = domParent
   }
 
   getContextValue = (): C | undefined => this.#contextValue
@@ -312,7 +344,8 @@ class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
       set: (value: C) => {
         this.#contextValue = value
       },
-      get: (type: ElementType | symbol) => this.#config.getContext(type as Component),
+      get: (type: ElementType | symbol) =>
+        isElementFunction(type) ? this.#config.getContext(type) : undefined,
     }
 
     return {
@@ -358,6 +391,8 @@ class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
   }
 
   #dequeueTasks(signal?: AbortSignal): Array<() => void> {
+    if (this.#tasks.length === 0) return EMPTY_TASKS
+
     let needsSignal = signal === undefined && this.#tasks.some((task) => task.length >= 1)
 
     if (needsSignal) {
@@ -365,11 +400,25 @@ class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
     }
 
     signal ??= this.#renderController?.signal
+    signal ??= sharedAbortedSignal ??= AbortSignal.abort()
     let tasks = this.#tasks.splice(0, this.#tasks.length)
-    return tasks.map((task) => () => task(signal!))
+    return tasks.map((task) => () => task(signal))
   }
 }
 
+function isRenderFn(value: unknown): value is RenderFn {
+  return typeof value === 'function'
+}
+
+function isElementFunction(value: unknown): value is ElementFunction {
+  return typeof value === 'function'
+}
+
+// Shared empty result and aborted signal so the common no-task removal path
+// (large subtree teardowns dispose many components at once) allocates nothing.
+const EMPTY_TASKS: Array<() => void> = []
+let sharedAbortedSignal: AbortSignal | undefined
+
 function syncProps(target: ElementProps, next: ElementProps): void {
   for (let key in target) {
     if (!(key in next)) {

package/src/runtime/core/attributes.ts

@@ -62,10 +62,31 @@ export function canUseProperty(
   return name in element
 }
 
+// Prop names repeat constantly across elements and renders; cache the
+// normalized results so the string work and object allocation happen once
+// per distinct name. Entries are shared — callers must not mutate them.
+const NORMALIZATION_CACHE_LIMIT = 256
+const htmlAttributeNameCache = new Map<string, { ns?: string; attr: string }>()
+const svgAttributeNameCache = new Map<string, { ns?: string; attr: string }>()
+
 export function normalizeAttributeName(
   name: string,
   isSvg: boolean,
 ): { ns?: string; attr: string } {
+  let cache = isSvg ? svgAttributeNameCache : htmlAttributeNameCache
+  let cached = cache.get(name)
+  if (cached === undefined) {
+    cached = computeAttributeName(name, isSvg)
+    if (cache.size >= NORMALIZATION_CACHE_LIMIT) {
+      let oldest = cache.keys().next()
+      if (!oldest.done) cache.delete(oldest.value)
+    }
+    cache.set(name, cached)
+  }
+  return cached
+}
+
+function computeAttributeName(name: string, isSvg: boolean): { ns?: string; attr: string } {
   if (name.startsWith('aria-') || name.startsWith('data-')) return { attr: name }
 
   if (name === 'className') return { attr: 'class' }
@@ -113,6 +134,19 @@ export function getMergedClassName(props: ElementProps): string | undefined {
   return merged || undefined
 }
 
+// Style/attribute names come from a small recurring set, so cache conversions
+// instead of running a regex per property per element per render.
+const kebabCaseCache = new Map<string, string>()
+
 export function toKebabCase(value: string): string {
-  return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+  let cached = kebabCaseCache.get(value)
+  if (cached === undefined) {
+    cached = value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+    if (kebabCaseCache.size >= NORMALIZATION_CACHE_LIMIT) {
+      let oldest = kebabCaseCache.keys().next()
+      if (!oldest.done) kebabCaseCache.delete(oldest.value)
+    }
+    kebabCaseCache.set(value, cached)
+  }
+  return cached
 }

package/src/runtime/core/children.ts

@@ -1,4 +1,6 @@
 import type { RemixNode } from '../jsx.ts'
+import { invariant } from '../invariant.ts'
+import { isRemixElement } from './vnode.ts'
 
 export type EmptyChild = boolean | null | undefined
 export type PrimitiveChild = string | number | bigint
@@ -13,8 +15,8 @@ export function isPrimitiveChild(value: RemixNode): value is PrimitiveChild {
 }
 
 export function normalizeChildren(children: readonly RemixNode[]): RemixNode[] {
-  for (let child of children) {
-    if (Array.isArray(child)) {
+  for (let i = 0; i < children.length; i++) {
+    if (Array.isArray(children[i])) {
       return (children as unknown[]).flat(Infinity) as RemixNode[]
     }
   }
@@ -22,6 +24,26 @@ export function normalizeChildren(children: readonly RemixNode[]): RemixNode[] {
   return children as RemixNode[]
 }
 
+export function assertRemixNodes(values: readonly unknown[]): asserts values is RemixNode[] {
+  for (let value of values) {
+    invariant(isRemixNode(value), 'Invalid child node')
+  }
+}
+
+export function isRemixNode(value: unknown): value is RemixNode {
+  if (value == null) return true
+  let type = typeof value
+  if (type === 'string' || type === 'number' || type === 'bigint' || type === 'boolean') {
+    return true
+  }
+  if (isRemixElement(value)) return true
+  if (!Array.isArray(value)) return false
+  for (let child of value) {
+    if (!isRemixNode(child)) return false
+  }
+  return true
+}
+
 export function packChildren(children: readonly RemixNode[]): RemixNode | undefined {
   if (children.length === 0) {
     return undefined

package/src/runtime/core/vnode.ts

@@ -1,9 +1,9 @@
-import type { ElementProps, ElementType, RemixElement, RemixNode } from '../jsx.ts'
+import type { ElementProps, ElementType, RemixElement } from '../jsx.ts'
 
 export function createRemixElement(
   type: ElementType,
   props: ElementProps | null | undefined,
-  key?: string,
+  key?: any,
 ): RemixElement {
   return {
     $rmx: true,
@@ -13,19 +13,40 @@ export function createRemixElement(
   }
 }
 
-export function isRemixElement(node: RemixNode): node is RemixElement {
-  return typeof node === 'object' && node !== null && '$rmx' in node
+export function isRemixElement(node: unknown): node is RemixElement {
+  if (typeof node !== 'object' || node === null) return false
+  let type = Reflect.get(node, 'type')
+  let props = Reflect.get(node, 'props')
+  return (
+    Reflect.get(node, '$rmx') === true &&
+    (typeof type === 'string' || typeof type === 'function') &&
+    typeof props === 'object' &&
+    props !== null
+  )
 }
 
 function normalizeElementProps(props: ElementProps | null | undefined): ElementProps {
   if (!props) return {}
   if (!('mix' in props)) return props
 
+  // Fast path: `mix={[a, b]}` with flat, truthy entries is already normalized.
+  // Skipping the copy avoids two prop-object spreads per element per render.
+  if (isNormalizedMix(props.mix)) return props
+
   let { mix, ...rest } = props
   let normalizedMix = normalizeMixValue(mix)
   return normalizedMix === undefined ? rest : { ...rest, mix: normalizedMix }
 }
 
+function isNormalizedMix(mix: unknown): boolean {
+  if (!Array.isArray(mix) || mix.length === 0) return false
+  for (let i = 0; i < mix.length; i++) {
+    let item = mix[i]
+    if (!item || Array.isArray(item)) return false
+  }
+  return true
+}
+
 function normalizeMixValue(mix: unknown): unknown[] | undefined {
   if (!mix) return undefined
 

package/src/runtime/create-element.ts

@@ -1,6 +1,6 @@
 import { jsx } from './jsx.ts'
-import type { ElementType, RemixElement } from './jsx.ts'
-import { normalizeChildren } from './core/children.ts'
+import type { ElementProps, ElementType, RemixElement } from './jsx.ts'
+import { assertRemixNodes, normalizeChildren } from './core/children.ts'
 
 /**
  * Creates a Remix virtual element from a JSX-like call signature.
@@ -12,8 +12,8 @@ import { normalizeChildren } from './core/children.ts'
  */
 export function createElement(
   type: ElementType,
-  props?: Record<string, any>,
-  ...children: any[]
+  props?: ElementProps,
+  ...children: unknown[]
 ): RemixElement {
   let nextProps = { ...(props ?? {}) }
   if (isMixinElementType(type)) {
@@ -21,6 +21,7 @@ export function createElement(
       console.error(new Error('mixin elements must not receive children'))
     }
   } else {
+    assertRemixNodes(children)
     nextProps.children = normalizeChildren(children)
   }
 
@@ -34,6 +35,6 @@ export function createElement(
 
 function isMixinElementType(
   type: ElementType,
-): type is ((...args: unknown[]) => unknown) & { __rmxMixinElementType: string } {
+): type is ElementType & { __rmxMixinElementType: string } {
   return typeof type === 'function' && '__rmxMixinElementType' in type
 }