@remix-run/ui 0.3.0 → 0.5.0

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

@@ -196,12 +196,14 @@ function SlugForm(handle: Handle) {
 function KeyboardTracker(handle: Handle) {
   let keys: string[] = []
 
-  addEventListeners(document, handle.signal, {
-    keydown: (event) => {
-      keys.push(event.key)
-      if (keys.length > 10) keys.shift()
-      handle.update()
-    },
+  handle.queueTask(() => {
+    addEventListeners(document, handle.signal, {
+      keydown: (event) => {
+        keys.push(event.key)
+        if (keys.length > 10) keys.shift()
+        handle.update()
+      },
+    })
   })
 
   return () => <div>Keys: {keys.join(', ') || '(press some keys)'}</div>
@@ -276,7 +278,7 @@ function ButtonAdvanced() {
         }),
       ]}
     >
-      <span className="icon">★</span>
+      <span class="icon">★</span>
       Click me
     </button>
   )
@@ -457,14 +459,14 @@ function FormWithScroll(handle: Handle) {
 // handle.signal - Clock
 // ============================================================================
 function Clock(handle: Handle) {
-  let interval = setInterval(() => {
-    // clear the interval when the component is disconnected
-    if (handle.signal.aborted) {
-      clearInterval(interval)
-      return
-    }
-    handle.update()
-  }, 1000)
+  handle.queueTask(() => {
+    let interval = setInterval(() => {
+      handle.update()
+    }, 1000)
+
+    handle.signal.addEventListener('abort', () => clearInterval(interval), { once: true })
+  })
+
   return () => <span>{new Date().toLocaleTimeString()}</span>
 }
 
@@ -605,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>
   )
 }
@@ -621,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>