@remix-run/cli 0.3.1 → 0.3.3

package/template/.agents/skills/remix/references/routing-and-controllers.md

@@ -2,8 +2,7 @@
 
 ## What This Covers
 
-Patterns for declaring URLs, handling requests, and wiring routes to controllers. Read this when
-the task involves:
+Patterns for declaring URLs, handling requests, and wiring routes to controllers. Read this when the task involves:
 
 - Defining or changing the URL surface of the app
 - Writing or reorganizing controllers and actions
@@ -11,9 +10,7 @@ the task involves:
 - Returning a `Response` for HTML, redirects, JSON, or errors
 - Generating internal URLs with `.href()`
 
-The companion reference for shaping `Request` bodies, validating input, and dealing with persisted
-data is `data-and-validation.md`. For request lifecycle and middleware ordering, see
-`middleware-and-server.md`.
+The companion reference for shaping `Request` bodies, validating input, and dealing with persisted data is `data-and-validation.md`. For request lifecycle and middleware ordering, see `middleware-and-server.md`.
 
 ## Route Builders
 
@@ -21,10 +18,7 @@ Import all route builders from `remix/routes`.
 
 ### `route(prefix, map)` — nested route group
 
-Adds a URL prefix to all children. Can also be called as `route(map)` without a prefix for a
-top-level grouping. Inside `route(...)`, a nested map may be either a `route('prefix', { ... })`
-call (when you want a shared URL prefix) or a plain object literal (when each leaf already owns
-its absolute path).
+Adds a URL prefix to all children. Can also be called as `route(map)` without a prefix for a top-level grouping. Inside `route(...)`, a nested map may be either a `route('prefix', { ... })` call (when you want a shared URL prefix) or a plain object literal (when each leaf already owns its absolute path).
 
 ```typescript
 import { route, get, post } from 'remix/routes'
@@ -58,8 +52,7 @@ export const routes = route({
 
 ### `form(path, options?)` — form route
 
-Creates a GET + POST pair for HTML form workflows. Expands to an `index` (GET) and an `action`
-(POST) by default.
+Creates a GET + POST pair for HTML form workflows. Expands to an `index` (GET) and an `action` (POST) by default.
 
 ```typescript
 contact: form('contact')
@@ -92,9 +85,7 @@ redirect(routes.account.orders.show.href({ orderId: '42' }))
 
 ## Actions
 
-An action is the handler for one leaf route. In Remix app code, actions should live in controllers.
-Use `Action` only when a reusable helper needs to type one action before it is added to a
-controller or when you are doing low-level router wiring outside the `app/actions` convention:
+An action is the handler for one leaf route. In Remix app code, actions should live in controllers. Use `Action` only when a reusable helper needs to type one action before it is added to a controller or when you are doing low-level router wiring outside the `app/actions` convention:
 
 ```typescript
 import { createAction } from 'remix/router'
@@ -117,21 +108,23 @@ The handler receives a context object with:
 - `url` — the request URL
 - `request` — the raw `Request`
 
-Actions with inline middleware:
+Actions with action middleware:
 
 ```typescript
+import { createAction } from 'remix/router'
 import { requireAuth } from 'remix/middleware/auth'
 
-router.get(routes.account.index, {
+export const account = createAction(routes.account.index, {
   middleware: [requireAuth()],
-  handler: accountAction.handler,
+  handler(context) {
+    return render(<AccountPage />)
+  },
 })
 ```
 
 ## Returning Responses
 
-An action returns a `Response`. The shape of that response is part of the route contract, and
-choosing it well saves a lot of glue elsewhere.
+An action returns a `Response`. The shape of that response is part of the route contract, and choosing it well saves a lot of glue elsewhere.
 
 ### Render HTML
 
@@ -147,8 +140,7 @@ async handler({ get }) {
 
 ### Redirect after a mutation
 
-For state-changing routes (POST, PUT, PATCH, DELETE), the canonical reply is a redirect to the
-resulting page. Pass `303` explicitly when you want a POST-redirect-GET flow:
+For state-changing routes (POST, PUT, PATCH, DELETE), the canonical reply is a redirect to the resulting page. Pass `303` explicitly when you want a POST-redirect-GET flow:
 
 ```typescript
 import { redirect } from 'remix/response/redirect'
@@ -167,13 +159,11 @@ async create({ get }) {
 }
 ```
 
-This pattern works without JavaScript and stays compatible with `clientEntry(...)` enhancements
-on top.
+This pattern works without JavaScript and stays compatible with `clientEntry(...)` enhancements on top.
 
 ### Return an error response
 
-For expected failures — validation, conflict, not found — return a `Response` directly. Reserve
-thrown errors for genuinely unexpected failures.
+For expected failures — validation, conflict, not found — return a `Response` directly. Reserve thrown errors for genuinely unexpected failures.
 
 ```typescript
 async show({ get, params }) {
@@ -198,9 +188,7 @@ if (!parsed.success) {
 
 ### Return JSON
 
-For routes consumed by client code rather than rendered as a page (autocomplete endpoints, polling
-APIs, inter-service calls), return a JSON `Response`. Use `SuperHeaders` from `remix/headers` when
-typed header accessors make the response clearer:
+For routes consumed by client code rather than rendered as a page (autocomplete endpoints, polling APIs, inter-service calls), return a JSON `Response`. Use `SuperHeaders` from `remix/headers` when typed header accessors make the response clearer:
 
 ```typescript
 import Headers from 'remix/headers'
@@ -214,20 +202,13 @@ return new Response(JSON.stringify({ results }), {
 })
 ```
 
-If you find yourself returning JSON for what is really a browser form submission, prefer the
-redirect-after-POST pattern instead. JSON-only mutation endpoints make it harder to support
-non-JS clients, harder to share rendering logic, and easier for the client to drift out of sync
-with the server.
+If you find yourself returning JSON for what is really a browser form submission, prefer the redirect-after-POST pattern instead. JSON-only mutation endpoints make it harder to support non-JS clients, harder to share rendering logic, and easier for the client to drift out of sync with the server.
 
 ## Controllers
 
-A controller owns the direct leaf routes in one route map. Each key in `actions` matches a direct
-leaf route key in the route definition passed to `router.map(...)`. Nested route-map keys do not
-belong inside a controller's `actions`; map those route maps with their own controllers.
+A controller owns the direct leaf routes in one route map. Each key in `actions` matches a direct leaf route key in the route definition passed to `router.map(...)`. Nested route-map keys do not belong inside a controller's `actions`; map those route maps with their own controllers.
 
-Configure `RouterTypes.context` with your app context in the router module, then use
-`createController()` so `get(Database)`, `get(Session)`, `get(Auth)`, etc. are typed against your
-middleware stack without repeating a type clause on every controller.
+Configure `RouterTypes.context` with your app context in the router module, then use `createController()` so `get(Database)`, `get(Session)`, `get(Auth)`, etc. are typed against your middleware stack without repeating a type clause on every controller.
 
 ```typescript
 import { createController } from 'remix/router'
@@ -284,8 +265,7 @@ Because `account` is a nested route map, it is not an action key in the root con
 
 ### Nested route maps
 
-Nested route maps use their own controllers under `app/actions/<route-key>/controller.tsx`.
-Directory names under `app/actions/` are route-map keys, not URL path segments.
+Nested route maps use their own controllers under `app/actions/<route-key>/controller.tsx`. Directory names under `app/actions/` are route-map keys, not URL path segments.
 
 ```typescript
 // app/actions/account/controller.tsx
@@ -328,8 +308,7 @@ router.map(routes.account.settings, accountSettingsController)
 
 ### Controller middleware
 
-The `middleware` array on a controller runs only for the direct actions in that controller, before
-action-level middleware. It does not apply to other controllers.
+The `middleware` array on a controller runs only for the direct actions in that controller, before action middleware. It does not apply to other controllers.
 
 ```typescript
 export default createController(routes.admin, {
@@ -342,8 +321,7 @@ export default createController(routes.admin, {
 
 ## Registering Routes
 
-Use `router.map` for route maps and controllers. Map each nested route map explicitly. Use verb
-methods only for low-level router wiring outside the `app/actions` controller convention.
+Use `router.map` for route maps and controllers. Map each nested route map explicitly. Use verb methods only for low-level router wiring outside the `app/actions` controller convention.
 
 ```typescript
 let router = createRouter({ middleware })
@@ -363,23 +341,16 @@ router.post(routes.logout, logoutAction)
 
 ## Typed Context
 
-Define an `AppContext` type from your middleware stack, then make it the default context used by
-`createAction()` and `createController()`:
+Define an `AppContext` type from your router, then make it the default context used by `createAction()` and `createController()`:
 
 ```typescript
-import type { MiddlewareContext, ContextWithParams, AnyParams } from 'remix/router'
-
-type RootMiddleware = [
-  ReturnType<typeof formData>,
-  ReturnType<typeof session>,
-  ReturnType<typeof loadDatabase>,
-  ReturnType<typeof loadAuth>,
-]
-
-export type AppContext<params extends AnyParams = {}> = ContextWithParams<
-  MiddlewareContext<RootMiddleware>,
-  params
->
+import { createRouter, type RouterContext } from 'remix/router'
+
+export const router = createRouter({
+  middleware: [formData(), session(cookie, storage), loadDatabase(), loadAuth()],
+})
+
+export type AppContext = RouterContext<typeof router>
 
 declare module 'remix/router' {
   interface RouterTypes {

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() {