@remix-run/ui 0.4.0 → 0.5.0

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>