@remix-run/cli 0.0.0 → 0.2.0

package/bootstrap/AGENTS.md

@@ -0,0 +1,39 @@
+# %%RMX_APP_DISPLAY_NAME%% Agent Guide
+
+This app was scaffolded with `remix new`. Use these conventions when continuing to build it out.
+
+## Commands
+
+```sh
+npm i
+npm run start
+npm test
+npm run typecheck
+```
+
+## Building Features
+
+Refer to ./agents/skills/remix/SKILL.md
+
+## Starter Layout
+
+- `app/controllers/home.tsx` owns the home page
+- `app/controllers/auth.tsx` owns the auth page
+- `app/routes.ts` defines the route contract
+- `app/router.ts` wires routes to route handlers
+- `app/ui/` holds the shared document and layout wrappers
+- `app/utils/render.tsx` centralizes HTML response rendering
+
+## Route Ownership
+
+- Start from `app/routes.ts` and map each route to the narrowest owner on disk.
+- Keep simple pages in flat files like `app/controllers/home.tsx` and `app/controllers/auth.tsx`.
+- Promote a route into a controller folder with `controller.tsx` only when it gains nested routes, multiple actions, or route-owned modules.
+- Keep route-owned page modules next to the route that owns them.
+- Move shared UI to `app/ui/`, not `app/controllers/`.
+
+## Build-Out Notes
+
+- This starter intentionally begins small; add directories like `app/data/`, `app/middleware/`, `public/`, and `test/` only when you need them.
+- Prefer putting code in the narrowest owner before introducing shared modules.
+- Avoid generic dumping-ground directories like `app/lib/` or `app/components/`.

package/bootstrap/README.md

@@ -0,0 +1,27 @@
+# %%RMX_APP_DISPLAY_NAME%%
+
+A minimal Remix application starter with a home page and an auth page.
+
+## Starter Shape
+
+- `app/controllers/home.tsx` owns the home page.
+- `app/controllers/auth.tsx` owns the auth page.
+- `app/routes.ts` defines the route contract.
+- `app/router.ts` wires routes to handlers.
+- `app/ui/` holds the shared document and layout wrappers.
+- `app/utils/render.tsx` centralizes HTML response rendering.
+
+## Growing The App
+
+- Start with flat route files and only introduce route folders when a route needs multiple actions or route-owned modules.
+- Add directories like `app/data/`, `app/middleware/`, `public/`, or `test/` when the app actually needs them.
+- Move shared UI into `app/ui/` once more than one route needs it.
+
+## Commands
+
+```sh
+npm i
+npm run start
+npm test
+npm run typecheck
+```

package/bootstrap/app/assets/entry.ts

@@ -0,0 +1,19 @@
+import { run } from 'remix/ui'
+
+run({
+  async loadModule(moduleUrl, exportName) {
+    let mod = await import(moduleUrl)
+    return mod[exportName]
+  },
+  async resolveFrame(src, signal, target) {
+    let headers = new Headers({ accept: 'text/html' })
+    if (target) headers.set('x-remix-target', target)
+
+    let response = await fetch(src, {
+      credentials: 'same-origin',
+      headers,
+      signal,
+    })
+    return response.body ?? response.text()
+  },
+})

package/bootstrap/app/assets.ts

@@ -0,0 +1,18 @@
+import { createAssetServer } from 'remix/assets'
+
+export const assets = createAssetServer({
+  basePath: '/assets',
+  rootDir: process.cwd(),
+  fileMap: {
+    'app/*path': 'app/*path',
+    'node_modules/*path': 'node_modules/*path',
+  },
+  allow: ['app/assets/**', 'app/ui/prompt-button.tsx', 'node_modules/**'],
+  deny: ['app/**/*.server.*'],
+  sourceMaps: process.env.NODE_ENV === 'development' ? 'external' : undefined,
+  scripts: {
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV ?? 'development'),
+    },
+  },
+})

package/bootstrap/app/controllers/auth.tsx

@@ -0,0 +1,21 @@
+import type { BuildAction } from 'remix/fetch-router'
+
+import type { routes } from '../routes.ts'
+import { Layout } from '../ui/layout.tsx'
+import { render } from '../utils/render.tsx'
+
+export const auth: BuildAction<'GET', typeof routes.auth> = {
+  handler({ request }) {
+    return render(<AuthPage />, request)
+  },
+}
+
+function AuthPage() {
+  return () => (
+    <Layout title="Auth">
+      <h1>Auth</h1>
+      <p>Use this route to start building sign-in, sign-up, and session flows.</p>
+      <p>Keep it as a flat file until the route needs multiple actions or route-owned modules.</p>
+    </Layout>
+  )
+}

package/bootstrap/app/controllers/home.tsx

@@ -0,0 +1,11 @@
+import type { BuildAction } from 'remix/fetch-router'
+
+import type { routes } from '../routes.ts'
+import { HomePage } from '../ui/scaffold-home-page.tsx'
+import { render } from '../utils/render.tsx'
+
+export const home: BuildAction<'GET', typeof routes.home> = {
+  handler({ request }) {
+    return render(<HomePage />, request)
+  },
+}

package/bootstrap/app/router.ts

@@ -0,0 +1,16 @@
+import { createRouter } from 'remix/fetch-router'
+
+import { assets } from './assets.ts'
+import { auth } from './controllers/auth.tsx'
+import { home } from './controllers/home.tsx'
+import { routes } from './routes.ts'
+
+export const router = createRouter()
+
+router.get(routes.assets, async ({ request }) => {
+  let response = await assets.fetch(request)
+  return response ?? new Response('Not Found', { status: 404 })
+})
+
+router.map(routes.home, home)
+router.map(routes.auth, auth)

package/bootstrap/app/routes.ts

@@ -0,0 +1,7 @@
+import { get, route } from 'remix/fetch-router/routes'
+
+export const routes = route({
+  assets: get('/assets/*path'),
+  home: '/',
+  auth: '/auth',
+})

package/bootstrap/app/ui/document.tsx

@@ -0,0 +1,26 @@
+import type { RemixNode } from 'remix/ui'
+
+import { routes } from '../routes.ts'
+
+export interface DocumentProps {
+  children?: RemixNode
+  title?: string
+}
+
+const DEFAULT_TITLE = decodeURIComponent('%%RMX_APP_DISPLAY_NAME_URI_COMPONENT%%')
+
+export function Document() {
+  return ({ title = DEFAULT_TITLE, children }: DocumentProps) => (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>{title}</title>
+      </head>
+      <body>
+        {children}
+        <script type="module" src={routes.assets.href({ path: 'app/assets/entry.ts' })}></script>
+      </body>
+    </html>
+  )
+}

package/bootstrap/app/ui/layout.tsx

@@ -0,0 +1,22 @@
+import type { RemixNode } from 'remix/ui'
+
+import { routes } from '../routes.ts'
+import { Document } from './document.tsx'
+
+export interface LayoutProps {
+  children?: RemixNode
+  title?: string
+}
+
+export function Layout() {
+  return ({ title, children }: LayoutProps) => (
+    <Document title={title}>
+      <header>
+        <nav>
+          <a href={routes.home.href()}>Home</a> <a href={routes.auth.href()}>Auth</a>
+        </nav>
+      </header>
+      <main>{children}</main>
+    </Document>
+  )
+}

package/bootstrap/app/ui/prompt-button.tsx

@@ -0,0 +1,162 @@
+import { clientEntry, css, on, type Handle, type SerializableProps } from 'remix/ui'
+
+const FADE_MS = 180
+const HOLD_MS = 1200
+
+type CopyState = 'idle' | 'copied' | 'failed' | 'resetting'
+
+interface PromptButtonProps extends SerializableProps {
+  text: string
+}
+
+export const PromptButton = clientEntry(
+  '/assets/app/ui/prompt-button.tsx#PromptButton',
+  function PromptButton(handle: Handle<PromptButtonProps>) {
+    let state: CopyState = 'idle'
+
+    return () => {
+      let promptLabel = `\u201C${handle.props.text}\u201D`
+      let label =
+        state === 'copied' || state === 'resetting'
+          ? 'Copied to clipboard'
+          : state === 'failed'
+            ? 'Copy failed'
+            : promptLabel
+      let active = state === 'copied' || state === 'failed' || state === 'resetting'
+
+      return (
+        <button
+          type="button"
+          className={state}
+          style={{
+            background: active ? 'var(--surface-4)' : undefined,
+            color: active ? 'var(--brand-blue)' : undefined,
+          }}
+          mix={[
+            buttonStyle,
+            on('click', async (_event, signal) => {
+              try {
+                await navigator.clipboard.writeText(handle.props.text)
+                if (signal.aborted) return
+              } catch {
+                state = 'failed'
+                await handle.update()
+                await wait(HOLD_MS)
+                if (signal.aborted) return
+                state = 'resetting'
+                await handle.update()
+                await wait(FADE_MS)
+                if (signal.aborted) return
+                state = 'idle'
+                handle.update()
+                return
+              }
+
+              state = 'copied'
+              await handle.update()
+              await wait(HOLD_MS)
+              if (signal.aborted) return
+
+              state = 'resetting'
+              await handle.update()
+              await wait(FADE_MS)
+              if (signal.aborted) return
+
+              state = 'idle'
+              await handle.update()
+            }),
+          ]}
+        >
+          <span aria-hidden="true" mix={iconSlotStyle}>
+            <CopyIcon />
+          </span>
+          <span
+            mix={css({
+              alignItems: 'center',
+              display: 'flex',
+              fontSize: '14px',
+              flex: '1 1 0',
+              lineHeight: 1.5,
+              minWidth: 0,
+              position: 'relative',
+              transition: 'opacity 180ms ease',
+            })}
+            style={{ opacity: state === 'resetting' ? 0 : undefined }}
+          >
+            <span
+              aria-hidden={state === 'idle' ? true : undefined}
+              style={{
+                alignItems: 'center',
+                display: 'flex',
+                inset: 0,
+                position: 'absolute',
+                visibility: state === 'idle' ? 'hidden' : 'visible',
+              }}
+            >
+              {label}
+            </span>
+            <span
+              aria-hidden={state === 'idle' ? undefined : true}
+              style={{ visibility: state === 'idle' ? 'visible' : 'hidden' }}
+            >
+              {promptLabel}
+            </span>
+          </span>
+        </button>
+      )
+    }
+  },
+)
+
+export function CopyIcon() {
+  return () => (
+    <svg viewBox="0 0 14 16.5" fill="none">
+      <path
+        d="M0.75 9.188L0.75 4.083C0.75 2.242 2.242 0.75 4.083 0.75L9.188 0.75M5.75 15.75L11.375 15.75C12.41 15.75 13.25 14.91 13.25 13.875L13.25 5.75C13.25 4.714 12.41 3.875 11.375 3.875L5.75 3.875C4.714 3.875 3.875 4.714 3.875 5.75L3.875 13.875C3.875 14.91 4.714 15.75 5.75 15.75Z"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+      />
+    </svg>
+  )
+}
+
+function wait(ms: number) {
+  return new Promise<void>((resolve) => setTimeout(resolve, ms))
+}
+
+const buttonStyle = css({
+  appearance: 'none',
+  font: 'inherit',
+  textAlign: 'left',
+  cursor: 'pointer',
+  width: '100%',
+  display: 'flex',
+  gap: '16px',
+  alignItems: 'center',
+  padding: '16px',
+  border: 0,
+  borderRadius: '12px',
+  color: 'var(--text-primary)',
+  background: 'transparent',
+  transition: 'background-color 150ms ease, color 150ms ease',
+  '&:hover, &:focus-visible': {
+    background: 'var(--surface-4)',
+    color: 'var(--brand-blue)',
+    outline: 'none',
+  },
+})
+
+const iconSlotStyle = css({
+  flex: '0 0 24px',
+  width: '24px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  '& svg': {
+    width: '20px',
+    height: '20px',
+    display: 'block',
+    transform: 'rotate(180deg)',
+  },
+})