@remix-run/ui 0.4.0 → 0.6.0

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
 }

package/src/runtime/demos/readme.demo.tsx

@@ -278,7 +278,7 @@ function ButtonAdvanced() {
         }),
       ]}
     >
-      <span className="icon">★</span>
+      <span class="icon">★</span>
       Click me
     </button>
   )
@@ -607,9 +607,9 @@ function ListWithFragment() {
 // ============================================================================
 function Example(handle: Handle<{ title: string; children: RemixNode }>) {
   return () => (
-    <div className="example">
+    <div class="example">
       <h2>{handle.props.title}</h2>
-      <div className="example-content">{handle.props.children}</div>
+      <div class="example-content">{handle.props.children}</div>
     </div>
   )
 }
@@ -623,7 +623,7 @@ function Example(handle: Handle<{ title: string; children: RemixNode }>) {
  */
 export default function DemoApp() {
   return () => (
-    <div className="examples-grid">
+    <div class="examples-grid">
       <Example title="Getting Started - Counter">
         <App />
       </Example>