@remix-run/cli 0.2.0 → 0.3.1

package/src/lib/doctor/controller-placeholders.ts

@@ -1,108 +1,19 @@
 import * as path from 'node:path'
 
 import { getOwnerFileExtension } from '../controller-files.ts'
-import type { OwnershipRouteNode } from '../controller-ownership.ts'
-
-const RESERVED_BINDING_IDENTIFIERS = new Set([
-  'await',
-  'break',
-  'case',
-  'catch',
-  'class',
-  'const',
-  'continue',
-  'debugger',
-  'default',
-  'delete',
-  'do',
-  'else',
-  'enum',
-  'export',
-  'extends',
-  'false',
-  'finally',
-  'for',
-  'function',
-  'if',
-  'implements',
-  'import',
-  'in',
-  'instanceof',
-  'interface',
-  'let',
-  'new',
-  'null',
-  'package',
-  'private',
-  'protected',
-  'public',
-  'return',
-  'static',
-  'super',
-  'switch',
-  'this',
-  'throw',
-  'true',
-  'try',
-  'typeof',
-  'var',
-  'void',
-  'while',
-  'with',
-  'yield',
-])
-
-export function renderActionPlaceholder(routeNode: OwnershipRouteNode, entryPath: string): string {
-  let routeMessage = `TODO: implement routes.${routeNode.name}`
-  let extension = getOwnerFileExtension(entryPath)
-  let exportName = getActionExportName(routeNode.key)
-
-  if (extension === '.js' || extension === '.jsx') {
-    return [
-      `export const ${exportName} = {`,
-      `  handler() {`,
-      `    return new Response(${JSON.stringify(routeMessage)})`,
-      `  },`,
-      `}`,
-      '',
-    ].join('\n')
-  }
-
-  let routeExpression = getRouteAccessExpression(routeNode.name)
-  let routesImportPath = getRelativeImportPath(entryPath, 'app/routes.ts')
-  let method = routeNode.method ?? 'ANY'
-
-  return [
-    `import type { BuildAction } from 'remix/fetch-router'`,
-    '',
-    `import type { routes } from '${routesImportPath}'`,
-    '',
-    `export const ${exportName}: BuildAction<'${method}', typeof ${routeExpression}> = {`,
-    `  handler() {`,
-    `    return new Response(${JSON.stringify(routeMessage)})`,
-    `  },`,
-    `}`,
-    '',
-  ].join('\n')
-}
+import { ROOT_ROUTE_NAME, type OwnershipRouteNode } from '../controller-ownership.ts'
 
 export function renderControllerPlaceholder(
   routeNode: OwnershipRouteNode,
   entryPath: string,
-  resolvedEntryPathByRouteName: Map<string, string>,
 ): string {
   let extension = getOwnerFileExtension(entryPath)
   let lines: string[] = []
-  let childImports = getControllerChildImports(routeNode, entryPath, resolvedEntryPathByRouteName)
-  let actionEntries = routeNode.children.map((childNode) =>
-    renderControllerActionEntry(childNode, entryPath, resolvedEntryPathByRouteName),
-  )
+  let actionEntries = routeNode.children
+    .filter((childNode) => childNode.kind === 'route')
+    .map((childNode) => renderControllerActionEntry(childNode))
 
   if (extension === '.js' || extension === '.jsx') {
-    if (childImports.length > 0) {
-      lines.push(...childImports, '')
-    }
-
     lines.push('export default {', '  actions: {')
     lines.push(...actionEntries)
     lines.push('  },', '}', '')
@@ -112,85 +23,29 @@ export function renderControllerPlaceholder(
   let routeExpression = getRouteAccessExpression(routeNode.name)
   let routesImportPath = getRelativeImportPath(entryPath, 'app/routes.ts')
 
-  lines.push(`import type { Controller } from 'remix/fetch-router'`, '')
-  lines.push(`import type { routes } from '${routesImportPath}'`)
-
-  if (childImports.length > 0) {
-    lines.push('', ...childImports)
-  }
+  lines.push(`import { createController } from 'remix/router'`, '')
+  lines.push(`import { routes } from '${routesImportPath}'`)
 
-  lines.push('', 'export default {', '  actions: {')
+  lines.push('', `export default createController(${routeExpression}, {`, '  actions: {')
   lines.push(...actionEntries)
-  lines.push('  },', `} satisfies Controller<typeof ${routeExpression}>`, '')
+  lines.push('  },', '})', '')
 
   return lines.join('\n')
 }
 
-function getControllerChildImports(
-  routeNode: OwnershipRouteNode,
-  entryPath: string,
-  resolvedEntryPathByRouteName: Map<string, string>,
-): string[] {
-  let imports: string[] = []
-
-  for (let childNode of routeNode.children) {
-    if (childNode.kind !== 'group') {
-      continue
-    }
-
-    let childEntryPath = resolvedEntryPathByRouteName.get(childNode.name)
-    if (childEntryPath == null) {
-      continue
-    }
-
-    imports.push(
-      `import ${getControllerImportName(childNode.key)} from '${getRelativeImportPath(entryPath, childEntryPath)}'`,
-    )
-  }
-
-  return imports
+function renderControllerActionEntry(childNode: OwnershipRouteNode): string {
+  return [
+    `    ${formatObjectKey(childNode.key)}() {`,
+    `      return new Response(${JSON.stringify(`TODO: implement routes.${childNode.name}`)})`,
+    `    },`,
+  ].join('\n')
 }
 
-function renderControllerActionEntry(
-  childNode: OwnershipRouteNode,
-  entryPath: string,
-  resolvedEntryPathByRouteName: Map<string, string>,
-): string {
-  if (childNode.kind === 'route') {
-    return [
-      `    ${formatObjectKey(childNode.key)}() {`,
-      `      return new Response(${JSON.stringify(`TODO: implement routes.${childNode.name}`)})`,
-      `    },`,
-    ].join('\n')
-  }
-
-  let childEntryPath = resolvedEntryPathByRouteName.get(childNode.name)
-  if (childEntryPath != null) {
-    return `    ${formatObjectKey(childNode.key)}: ${getControllerImportName(childNode.key)},`
+function getRouteAccessExpression(routeName: string): string {
+  if (routeName === ROOT_ROUTE_NAME) {
+    return 'routes'
   }
 
-  return `    ${formatObjectKey(childNode.key)}: ${renderInlineControllerPlaceholder(childNode)},`
-}
-
-function renderInlineControllerPlaceholder(routeNode: OwnershipRouteNode): string {
-  let childEntries = routeNode.children.map((childNode) =>
-    childNode.kind === 'route'
-      ? `${formatObjectKey(childNode.key)}() { return new Response(${JSON.stringify(`TODO: implement routes.${childNode.name}`)}) }`
-      : `${formatObjectKey(childNode.key)}: ${renderInlineControllerPlaceholder(childNode)}`,
-  )
-
-  return `{ actions: { ${childEntries.join(', ')} } }`
-}
-
-function getControllerImportName(key: string): string {
-  return `${toIdentifier(key)}Controller`
-}
-
-function getActionExportName(key: string): string {
-  return toIdentifier(key)
-}
-
-function getRouteAccessExpression(routeName: string): string {
   let segments = routeName.split('.')
   let expression = 'routes'
 
@@ -210,33 +65,6 @@ function formatObjectKey(key: string): string {
   return isIdentifier(key) ? key : JSON.stringify(key)
 }
 
-function toIdentifier(value: string): string {
-  let parts = value.split(/[^A-Za-z0-9_$]+/).filter(Boolean)
-  if (parts.length === 0) {
-    return 'route'
-  }
-
-  let identifier = parts
-    .map((part, index) =>
-      index === 0 ? part.replace(/^./, (char) => char.toLowerCase()) : capitalize(part),
-    )
-    .join('')
-
-  if (!/^[A-Za-z_$]/.test(identifier)) {
-    return `route${capitalize(identifier)}`
-  }
-
-  if (RESERVED_BINDING_IDENTIFIERS.has(identifier)) {
-    return `route${capitalize(identifier)}`
-  }
-
-  return identifier
-}
-
-function capitalize(value: string): string {
-  return value.length === 0 ? value : `${value[0].toUpperCase()}${value.slice(1)}`
-}
-
 function isIdentifier(value: string): boolean {
   return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(value)
 }

package/src/lib/doctor/controllers.ts

@@ -18,6 +18,6 @@ export async function checkControllerConventions(
 
   return {
     fixPlans,
-    suite: createDoctorSuite('controllers', findings),
+    suite: createDoctorSuite('actions', findings),
   }
 }

package/src/lib/doctor/project.ts

@@ -62,7 +62,7 @@ export async function checkProject(projectRoot: string): Promise<ProjectDoctorRe
 export async function getProjectFixPlans(projectRoot: string): Promise<DoctorFixPlan[]> {
   let routesFile = path.join(projectRoot, 'app', 'routes.ts')
   let homeActionPath = normalizeRelativePath(
-    path.join('app', 'controllers', `home${await inferHomeOwnerExtension(projectRoot)}`),
+    path.join('app', 'actions', `controller${await inferHomeOwnerExtension(projectRoot)}`),
   )
 
   if (await pathExists(routesFile)) {
@@ -225,8 +225,8 @@ function hasOnlyWhitespaceAndComments(source: string): boolean {
 }
 
 async function inferHomeOwnerExtension(projectRoot: string): Promise<OwnerFileExtension> {
-  let controllersDir = path.join(projectRoot, 'app', 'controllers')
-  let extensions = await collectOwnerExtensions(controllersDir)
+  let actionsDir = path.join(projectRoot, 'app', 'actions')
+  let extensions = await collectOwnerExtensions(actionsDir)
 
   if (extensions.length > 0) {
     return getMostCommonExtension(extensions)
@@ -298,7 +298,7 @@ function getMostCommonExtension(extensions: OwnerFileExtension[]): OwnerFileExte
 
 function renderDefaultRoutesFile(): string {
   return [
-    `import { route } from 'remix/fetch-router/routes'`,
+    `import { route } from 'remix/routes'`,
     '',
     'export const routes = route({',
     `  home: '/',`,
@@ -318,22 +318,24 @@ function renderDefaultHomeAction(entryPath: string): string {
       `import { html } from 'remix/html-template'`,
       `import { createHtmlResponse } from 'remix/response/html'`,
       '',
-      'export const home = {',
-      '  handler() {',
-      '    let page = html`',
-      '      <html lang="en">',
-      '        <head>',
-      '          <meta charset="utf-8" />',
-      '          <meta name="viewport" content="width=device-width, initial-scale=1" />',
-      '          <title>Home</title>',
-      '        </head>',
-      '        <body>',
-      '          <h1>Home</h1>',
-      '          <p>Update app/routes.ts and app/controllers/home to keep building your app.</p>',
-      '        </body>',
-      '      </html>',
-      '    `',
-      '    return createHtmlResponse(page)',
+      'export default {',
+      '  actions: {',
+      '    home() {',
+      '      let page = html`',
+      '        <html lang="en">',
+      '          <head>',
+      '            <meta charset="utf-8" />',
+      '            <meta name="viewport" content="width=device-width, initial-scale=1" />',
+      '            <title>Home</title>',
+      '          </head>',
+      '          <body>',
+      '            <h1>Home</h1>',
+      '            <p>Update app/routes.ts and app/actions/controller to keep building your app.</p>',
+      '          </body>',
+      '        </html>',
+      '      `',
+      '      return createHtmlResponse(page)',
+      '    },',
       '  },',
       '}',
       '',
@@ -342,30 +344,32 @@ function renderDefaultHomeAction(entryPath: string): string {
 
   if (extension === '.ts') {
     return [
-      `import type { BuildAction } from 'remix/fetch-router'`,
+      `import { createController } from 'remix/router'`,
       `import { html } from 'remix/html-template'`,
       `import { createHtmlResponse } from 'remix/response/html'`,
       '',
-      `import type { routes } from '../routes.ts'`,
+      `import { routes } from '../routes.ts'`,
       '',
-      `export const home: BuildAction<'ANY', typeof routes.home> = {`,
-      '  handler() {',
-      '    let page = html`',
-      '      <html lang="en">',
-      '        <head>',
-      '          <meta charset="utf-8" />',
-      '          <meta name="viewport" content="width=device-width, initial-scale=1" />',
-      '          <title>Home</title>',
-      '        </head>',
-      '        <body>',
-      '          <h1>Home</h1>',
-      '          <p>Update app/routes.ts and app/controllers/home to keep building your app.</p>',
-      '        </body>',
-      '      </html>',
-      '    `',
-      '    return createHtmlResponse(page)',
+      `export default createController(routes, {`,
+      '  actions: {',
+      '    home() {',
+      '      let page = html`',
+      '        <html lang="en">',
+      '          <head>',
+      '            <meta charset="utf-8" />',
+      '            <meta name="viewport" content="width=device-width, initial-scale=1" />',
+      '            <title>Home</title>',
+      '          </head>',
+      '          <body>',
+      '            <h1>Home</h1>',
+      '            <p>Update app/routes.ts and app/actions/controller to keep building your app.</p>',
+      '          </body>',
+      '        </html>',
+      '      `',
+      '      return createHtmlResponse(page)',
+      '    },',
       '  },',
-      '}',
+      `})`,
       '',
     ].join('\n')
   }
@@ -375,10 +379,12 @@ function renderDefaultHomeAction(entryPath: string): string {
       `import { renderToStream } from 'remix/ui/server'`,
       `import { createHtmlResponse } from 'remix/response/html'`,
       '',
-      'export const home = {',
-      '  handler() {',
-      '    let page = <HomePage />',
-      '    return createHtmlResponse(renderToStream(page))',
+      'export default {',
+      '  actions: {',
+      '    home() {',
+      '      let page = <HomePage />',
+      '      return createHtmlResponse(renderToStream(page))',
+      '    },',
       '  },',
       '}',
       '',
@@ -392,7 +398,7 @@ function renderDefaultHomeAction(entryPath: string): string {
       '      </head>',
       '      <body>',
       '        <h1>Home</h1>',
-      '        <p>Update app/routes.ts and app/controllers/home to keep building your app.</p>',
+      '        <p>Update app/routes.ts and app/actions/controller to keep building your app.</p>',
       '      </body>',
       '    </html>',
       '  )',
@@ -402,18 +408,20 @@ function renderDefaultHomeAction(entryPath: string): string {
   }
 
   return [
-    `import type { BuildAction } from 'remix/fetch-router'`,
+    `import { createController } from 'remix/router'`,
     `import { renderToStream } from 'remix/ui/server'`,
     `import { createHtmlResponse } from 'remix/response/html'`,
     '',
-    `import type { routes } from '../routes.ts'`,
+    `import { routes } from '../routes.ts'`,
     '',
-    `export const home: BuildAction<'ANY', typeof routes.home> = {`,
-    '  handler() {',
-    '    let page = <HomePage />',
-    '    return createHtmlResponse(renderToStream(page))',
+    `export default createController(routes, {`,
+    '  actions: {',
+    '    home() {',
+    '      let page = <HomePage />',
+    '      return createHtmlResponse(renderToStream(page))',
+    '    },',
     '  },',
-    '}',
+    `})`,
     '',
     'function HomePage() {',
     '  return () => (',
@@ -425,7 +433,7 @@ function renderDefaultHomeAction(entryPath: string): string {
     '      </head>',
     '      <body>',
     '        <h1>Home</h1>',
-    '        <p>Update app/routes.ts and app/controllers/home to keep building your app.</p>',
+    '        <p>Update app/routes.ts and app/actions/controller to keep building your app.</p>',
     '      </body>',
     '    </html>',
     '  )',

package/src/lib/doctor/types.ts

@@ -1,4 +1,4 @@
-export type DoctorSuiteName = 'environment' | 'project' | 'controllers'
+export type DoctorSuiteName = 'environment' | 'project' | 'actions'
 export type DoctorFindingSeverity = 'warn' | 'advice'
 export type DoctorSuiteStatus = 'ok' | 'issues' | 'skipped'
 
@@ -18,12 +18,8 @@ export type DoctorFindingCode =
   | 'route-map-invalid-json'
   | 'route-map-loader-signal'
   | 'missing-owner'
-  | 'wrong-owner-kind'
-  | 'ambiguous-owner'
   | 'duplicate-owner-file'
   | 'incomplete-controller'
-  | 'promotion-drift'
-  | 'orphan-action'
   | 'orphan-controller'
   | 'orphan-route-directory'
 

package/src/lib/help-text.ts

@@ -82,7 +82,8 @@ function formatHeading(title: string, target: NodeJS.WriteStream): string {
 }
 
 function highlightSyntax(text: string, target: NodeJS.WriteStream): string {
-  return text.replace(/(--[A-Za-z0-9-]+|-[A-Za-z]|\[[A-Za-z][A-Za-z0-9-]*\]|<[^>\n]+>)/g, (token) =>
-    lightYellow(token, target),
+  return text.replace(
+    /(?<![^\s[,|])(--[A-Za-z0-9-]+|-[A-Za-z])(?=$|[\s,\]|])|\[[A-Za-z][A-Za-z0-9-]*\]|<[^>\n]+>/g,
+    (token) => lightYellow(token, target),
   )
 }

package/src/lib/load-route-map-worker.ts

@@ -24,13 +24,13 @@ async function run(): Promise<void> {
 }
 
 async function loadRawRouteTree(routesFile: string): Promise<RawRouteTreeNode[]> {
-  let routeModule = await import(pathToFileURL(routesFile).href)
+  let routeModule: object = await import(pathToFileURL(routesFile).href)
 
   if (!('routes' in routeModule)) {
     throw new Error(`Route module ${routesFile} must export a named "routes" value.`)
   }
 
-  return normalizeRouteGroup(Reflect.get(routeModule, 'routes'), [], new Map())
+  return normalizeRouteGroup(routeModule.routes, [], new Map())
 }
 
 function normalizeRouteGroup(
@@ -55,15 +55,16 @@ function normalizeRouteGroup(
     return Object.entries(value).map(([key, entryValue]) => {
       let nameSegments = [...parentSegments, key]
       let name = nameSegments.join('.')
+      let routeLeaf = readRouteLeaf(entryValue)
 
-      if (isRouteLeaf(entryValue)) {
+      if (routeLeaf !== undefined) {
         return {
           children: [],
           key,
           kind: 'route',
-          method: entryValue.method,
+          method: routeLeaf.method,
           name,
-          pattern: entryValue.pattern.source,
+          pattern: routeLeaf.pattern,
         } satisfies RawRouteTreeNode
       }
 
@@ -85,14 +86,22 @@ function normalizeRouteGroup(
   }
 }
 
-function isRouteLeaf(value: unknown): value is { method: string; pattern: { source: string } } {
+function readRouteLeaf(value: unknown): { method: string; pattern: string } | undefined {
+  if (typeof value !== 'object' || value == null) return undefined
+
+  let method = Reflect.get(value, 'method')
+  let pattern = Reflect.get(value, 'pattern')
+  if (typeof method !== 'string' || !hasToString(pattern)) return undefined
+
+  return { method, pattern: pattern.toString() }
+}
+
+function hasToString(value: unknown): value is { toString(): string } {
   return (
     typeof value === 'object' &&
     value != null &&
-    typeof Reflect.get(value, 'method') === 'string' &&
-    typeof Reflect.get(value, 'pattern') === 'object' &&
-    Reflect.get(value, 'pattern') != null &&
-    typeof Reflect.get(Reflect.get(value, 'pattern'), 'source') === 'string'
+    'toString' in value &&
+    typeof value.toString === 'function'
   )
 }
 

package/src/lib/route-map.ts

@@ -4,7 +4,13 @@ import * as process from 'node:process'
 import { spawn } from 'node:child_process'
 import { fileURLToPath } from 'node:url'
 
-import { inspectControllerOwnership, type OwnedSubtree } from './controller-ownership.ts'
+import {
+  ROOT_ROUTE_NAME,
+  inspectControllerOwnership,
+  type ControllerOwnership,
+  type OwnedSubtree,
+  type RouteDirectoryPlan,
+} from './controller-ownership.ts'
 import {
   routeMapLoaderFailed,
   routeMapLoaderInvalidJson,
@@ -13,7 +19,7 @@ import {
   routesFileNotFound,
 } from './errors.ts'
 
-export type RouteOwnerKind = 'action' | 'controller'
+export type RouteOwnerKind = 'controller' | 'directory'
 export type RouteTreeNodeKind = 'group' | 'route'
 
 export interface RouteTreeOwner {
@@ -56,7 +62,7 @@ export interface RawRouteTreeNode {
 export async function loadRouteMap(cwd: string = process.cwd()): Promise<LoadedRouteMap> {
   let manifest = await loadRouteManifest(cwd)
   let ownership = await inspectControllerOwnership(manifest.appRoot, manifest.tree)
-  let tree = decorateRouteTree(manifest.tree, ownership.subtrees)
+  let tree = decorateRouteTree(manifest.tree, ownership)
 
   return {
     appRoot: manifest.appRoot,
@@ -137,28 +143,51 @@ async function loadRawRouteMap(appRoot: string, routesFile: string): Promise<Raw
 
 function decorateRouteTree(
   rawTree: RawRouteTreeNode[],
-  subtrees: OwnedSubtree[],
-  parentSegments: string[] = [],
+  ownership: ControllerOwnership,
 ): RouteTreeNode[] {
-  let subtreesByRouteName = new Map(subtrees.map((subtree) => [subtree.routeName, subtree]))
+  let subtreesByRouteName = new Map(
+    ownership.subtrees.map((subtree) => [subtree.routeName, subtree]),
+  )
+  let directoriesByRouteName = new Map(
+    ownership.routeDirectories.map((directory) => [directory.routeName, directory]),
+  )
 
-  return decorateRouteTreeWithLookup(rawTree, subtreesByRouteName, parentSegments)
+  return decorateRouteTreeWithLookup(
+    rawTree,
+    subtreesByRouteName,
+    directoriesByRouteName,
+    ownership.scan.routeDirectoryPaths,
+  )
 }
 
 function decorateRouteTreeWithLookup(
   rawTree: RawRouteTreeNode[],
   subtreesByRouteName: Map<string, OwnedSubtree>,
+  directoriesByRouteName: Map<string, RouteDirectoryPlan>,
+  actualRouteDirectories: Set<string>,
   parentSegments: string[] = [],
 ): RouteTreeNode[] {
   return rawTree.map((rawNode) => {
-    let owner = getRouteOwner(rawNode, parentSegments, subtreesByRouteName)
+    let owner = getRouteOwner(
+      rawNode,
+      parentSegments,
+      subtreesByRouteName,
+      directoriesByRouteName,
+      actualRouteDirectories,
+    )
     let nextParentSegments =
       rawNode.kind === 'group' ? [...parentSegments, rawNode.key] : parentSegments
 
     return {
       children:
         rawNode.kind === 'group'
-          ? decorateRouteTreeWithLookup(rawNode.children, subtreesByRouteName, nextParentSegments)
+          ? decorateRouteTreeWithLookup(
+              rawNode.children,
+              subtreesByRouteName,
+              directoriesByRouteName,
+              actualRouteDirectories,
+              nextParentSegments,
+            )
           : [],
       key: rawNode.key,
       kind: rawNode.kind,
@@ -174,24 +203,40 @@ function getRouteOwner(
   rawNode: RawRouteTreeNode,
   parentSegments: string[],
   subtreesByRouteName: Map<string, OwnedSubtree>,
+  directoriesByRouteName: Map<string, RouteDirectoryPlan>,
+  actualRouteDirectories: Set<string>,
 ): RouteTreeOwner {
   let ownerRouteName =
     rawNode.kind === 'group'
       ? rawNode.name
       : parentSegments.length === 0
-        ? rawNode.name
+        ? ROOT_ROUTE_NAME
         : parentSegments.join('.')
   let subtree = subtreesByRouteName.get(ownerRouteName)
 
-  if (subtree == null) {
-    throw routeOwnerPlanUnresolved(rawNode.name)
+  if (subtree != null) {
+    return {
+      exists: subtree.actualEntryPath != null,
+      kind: 'controller',
+      path: subtree.actualEntryPath ?? subtree.entryDisplayPath,
+    }
   }
 
-  return {
-    exists: subtree.actualEntryPath != null,
-    kind: subtree.kind,
-    path: subtree.actualEntryPath ?? subtree.entryDisplayPath,
+  if (rawNode.kind === 'group') {
+    let directory = directoriesByRouteName.get(rawNode.name)
+
+    if (directory == null) {
+      throw routeOwnerPlanUnresolved(rawNode.name)
+    }
+
+    return {
+      exists: actualRouteDirectories.has(directory.directoryPath),
+      kind: 'directory',
+      path: directory.directoryPath,
+    }
   }
+
+  throw routeOwnerPlanUnresolved(rawNode.name)
 }
 
 function assertRawRouteTree(value: unknown): RawRouteTreeNode[] {