@remix-run/cli 0.3.1 → 0.3.2

package/template/.agents/skills/remix/references/testing-patterns.md

@@ -2,8 +2,7 @@
 
 ## What This Covers
 
-How to test the two layers most Remix code lives in: HTTP behavior and DOM behavior. Read this when
-the task involves:
+How to test the two layers most Remix code lives in: HTTP behavior and DOM behavior. Read this when the task involves:
 
 - Driving the router with `router.fetch(new Request(...))` and asserting on the returned `Response`
 - Building a fresh router per test for session, storage, or database isolation
@@ -12,24 +11,18 @@ the task involves:
 - Using adjacent CLI checks such as `remix routes`, `remix doctor`, and `remix version`
 - Choosing which layer to test for a given behavior
 
-For session and auth test setup, see `auth-and-sessions.md`. For component lifecycle, see
-`component-model.md`.
+For session and auth test setup, see `auth-and-sessions.md`. For component lifecycle, see `component-model.md`.
 
 ## Two Shapes
 
-Remix tests run with `remix test`, use `remix/test` for the test framework, and use
-`remix/assert` for assertions. Two main shapes:
+Remix tests run with `remix test`, use `remix/test` for the test framework, and use `remix/assert` for assertions. Two main shapes:
 
-- **Server / router tests** — drive the router with `router.fetch(new Request(...))` and assert
-  on the returned `Response`. No DOM, no browser harness.
-- **Component tests** — render a component into a real DOM `Element` with `render(...)`, or use
-  `createRoot(...)` directly when you need lower-level root control.
+- **Server / router tests** — drive the router with `router.fetch(new Request(...))` and assert on the returned `Response`. No DOM, no browser harness.
+- **Component tests** — render a component into a real DOM `Element` with `render(...)`, or use `createRoot(...)` directly when you need lower-level root control.
 
 ## Server / Router Tests
 
-Treat the router as a pure `(Request) => Promise<Response>` function. Build a fresh app router
-per test (or per suite) so middleware state — sessions, in-memory storage, the database — stays
-isolated.
+Treat the router as a pure `(Request) => Promise<Response>` function. Build a fresh app router per test (or per suite) so middleware state — sessions, in-memory storage, the database — stays isolated.
 
 ```ts
 import * as assert from 'remix/assert'
@@ -49,10 +42,7 @@ describe('home', () => {
 })
 ```
 
-Use `routes.<name>.href(...)` to build URLs in tests so they stay in sync with the route
-definition. For form-style POSTs, attach a `FormData` body to the `Request`. For tests that need
-a known session, swap in `createMemorySessionStorage()` and a test cookie when constructing the
-router.
+Use `routes.<name>.href(...)` to build URLs in tests so they stay in sync with the route definition. For form-style POSTs, attach a `FormData` body to the `Request`. For tests that need a known session, swap in `createMemorySessionStorage()` and a test cookie when constructing the router.
 
 ```ts
 import { createMemorySessionStorage } from 'remix/session-storage/memory'
@@ -64,8 +54,7 @@ let router = createBookstoreRouter({
 })
 ```
 
-Use `createTestServer` from `remix/node-fetch-server/test` when the behavior depends on a real
-HTTP origin, redirects, streaming, cookies through a network boundary, or browser-style `fetch`:
+Use `createTestServer` from `remix/node-fetch-server/test` when the behavior depends on a real HTTP origin, redirects, streaming, cookies through a network boundary, or browser-style `fetch`:
 
 ```ts
 import { createTestServer } from 'remix/node-fetch-server/test'
@@ -102,16 +91,11 @@ export default {
 }
 ```
 
-Use `remix test --coverage` to enable coverage with defaults. Use `glob.exclude` when discovery
-would otherwise enter generated output, symlinked workspaces, or other paths that should not
-produce tests.
+Use `remix test --coverage` to enable coverage with defaults. Use `glob.exclude` when discovery would otherwise enter generated output, symlinked workspaces, or other paths that should not produce tests.
 
 ## Component Tests
 
-Use `render(...)` from `remix/ui/test` for most component tests. It creates a real DOM container,
-flushes the initial render, and returns `act(...)` so interactions can flush pending updates before
-assertions. Use `createRoot(container)` from `remix/ui` directly when a test needs explicit control
-over root rendering, flushing, or disposal.
+Use `render(...)` from `remix/ui/test` for most component tests. It creates a real DOM container, flushes the initial render, and returns `act(...)` so interactions can flush pending updates before assertions. Use `createRoot(container)` from `remix/ui` directly when a test needs explicit control over root rendering, flushing, or disposal.
 
 ### Basic pattern
 
@@ -130,8 +114,7 @@ result.cleanup()
 
 ### Why act / flush
 
-- **After initial render** — ensures event listeners are attached and the DOM is ready for
-  interaction.
+- **After initial render** — ensures event listeners are attached and the DOM is ready for interaction.
 - **After interactions** — applies updates from `handle.update()` calls triggered by events.
 - **After async work resolves** — applies updates from resolved `queueTask(...)` callbacks.
 
@@ -152,8 +135,7 @@ assert.equal(result.container.textContent, 'Expected data')
 
 ### Component removal
 
-Use `result.cleanup()` or `root.dispose()` to remove the component tree and verify cleanup
-behavior:
+Use `result.cleanup()` or `root.dispose()` to remove the component tree and verify cleanup behavior:
 
 ```tsx
 let result = render(<MyComponent />)
@@ -168,5 +150,4 @@ assert.throws(() => result.$('.content'), /cleaned up/)
 
 - Prefer real DOM interactions over mocking framework behavior.
 - Avoid testing implementation-only markers unless they are the only stable synchronization point.
-- One representative flow proving a behavior is better than repeating the same assertion across many
-  paths.
+- One representative flow proving a behavior is better than repeating the same assertion across many paths.

package/template/app/ui/document.tsx

@@ -1,4 +1,5 @@
-import { css, type RemixNode } from 'remix/ui'
+import type { Handle, RemixNode } from 'remix/ui'
+import { css } from 'remix/ui'
 
 import { routes } from '../routes.ts'
 
@@ -10,22 +11,26 @@ export interface DocumentProps {
 
 const DEFAULT_TITLE = readAppDisplayName('%%RMX_APP_DISPLAY_NAME_URI_COMPONENT%%')
 
-export function Document() {
-  return ({ children, head, title = DEFAULT_TITLE }: DocumentProps) => (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        <title>{title}</title>
-        {head}
-      </head>
-      <body mix={css({ margin: 0 })}>
-        {children}
-        <script type="module" src={routes.assets.href({ path: 'app/assets/entry.ts' })}></script>
-      </body>
-    </html>
-  )
+export function Document(handle: Handle<DocumentProps>) {
+  return () => {
+    let { children, head, title = DEFAULT_TITLE } = handle.props
+
+    return (
+      <html lang="en">
+        <head>
+          <meta charSet="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+          <title>{title}</title>
+          {head}
+        </head>
+        <body mix={css({ margin: 0 })}>
+          {children}
+          <script type="module" src={routes.assets.href({ path: 'app/assets/entry.ts' })}></script>
+        </body>
+      </html>
+    )
+  }
 }
 
 function readAppDisplayName(value: string): string {

package/template/app/ui/scaffold-home-page.tsx

@@ -1,5 +1,6 @@
 // Delete this file and put your own home page in app/actions/controller.tsx
-import { css, type RemixNode } from 'remix/ui'
+import type { Handle, RemixNode } from 'remix/ui'
+import { css } from 'remix/ui'
 
 import { PromptButton } from '../assets/prompt-button.tsx'
 import { Document } from './document.tsx'
@@ -203,54 +204,62 @@ function CodingWithAiCard() {
   )
 }
 
-function CardLink() {
-  return ({ href, icon, label }: { href: string; icon: RemixNode; label: string }) => (
-    <a
-      href={href}
-      mix={css({
-        display: 'flex',
-        gap: '16px',
-        alignItems: 'center',
-        padding: '16px',
-        borderRadius: '12px',
-        color: 'var(--text-primary)',
-        textDecoration: 'none',
-        background: 'transparent',
-        transition: 'background-color 150ms ease, color 150ms ease',
-        '&:hover, &:focus-visible': {
-          background: 'var(--surface-4)',
-          color: 'var(--brand-blue)',
-          outline: 'none',
-        },
-      })}
-    >
-      <IconSlot>{icon}</IconSlot>
-      <span mix={css({ fontSize: '14px', lineHeight: 1.5, whiteSpace: 'nowrap' })}>{label}</span>
-    </a>
-  )
+function CardLink(handle: Handle<{ href: string; icon: RemixNode; label: string }>) {
+  return () => {
+    let { href, icon, label } = handle.props
+
+    return (
+      <a
+        href={href}
+        mix={css({
+          display: 'flex',
+          gap: '16px',
+          alignItems: 'center',
+          padding: '16px',
+          borderRadius: '12px',
+          color: 'var(--text-primary)',
+          textDecoration: 'none',
+          background: 'transparent',
+          transition: 'background-color 150ms ease, color 150ms ease',
+          '&:hover, &:focus-visible': {
+            background: 'var(--surface-4)',
+            color: 'var(--brand-blue)',
+            outline: 'none',
+          },
+        })}
+      >
+        <IconSlot>{icon}</IconSlot>
+        <span mix={css({ fontSize: '14px', lineHeight: 1.5, whiteSpace: 'nowrap' })}>{label}</span>
+      </a>
+    )
+  }
 }
 
-function IconSlot() {
-  return ({ children, rotated = false }: { children: RemixNode; rotated?: boolean }) => (
-    <span
-      aria-hidden="true"
-      mix={css({
-        flex: '0 0 24px',
-        width: '24px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: rotated ? 'center' : 'flex-start',
-        '& svg': {
-          width: '20px',
-          height: '20px',
-          display: 'block',
-          ...(rotated ? { transform: 'rotate(180deg)' } : {}),
-        },
-      })}
-    >
-      {children}
-    </span>
-  )
+function IconSlot(handle: Handle<{ children: RemixNode; rotated?: boolean }>) {
+  return () => {
+    let { children, rotated = false } = handle.props
+
+    return (
+      <span
+        aria-hidden="true"
+        mix={css({
+          flex: '0 0 24px',
+          width: '24px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: rotated ? 'center' : 'flex-start',
+          '& svg': {
+            width: '20px',
+            height: '20px',
+            display: 'block',
+            ...(rotated ? { transform: 'rotate(180deg)' } : {}),
+          },
+        })}
+      >
+        {children}
+      </span>
+    )
+  }
 }
 
 function Footer() {