@remix-run/cli 0.3.4 → 0.5.0

package/template/app/middleware/render.tsx

@@ -16,7 +16,7 @@ export function render() {
           frameSrc: request.url,
           signal: request.signal,
           resolveFrame: (src) => resolveFrame(router, request, src),
-          // Server rendering turns client entries into browser module URLs.
+          // Server rendering turns client entries into browser module URLs and preloads.
           async resolveClientEntry(entryId, component) {
             if (!entryId.startsWith('file://')) {
               throw new Error(
@@ -24,9 +24,15 @@ export function render() {
               )
             }
 
+            let [href, preloads] = await Promise.all([
+              assetServer.getHref(entryId),
+              assetServer.getPreloads(entryId),
+            ])
+
             return {
-              href: await assetServer.getHref(entryId),
+              href,
               exportName: entryId.split('#')[1] || component.name || titleCaseFileName(entryId),
+              preloads,
             }
           },
         })

package/template/hmr.ts

@@ -0,0 +1,46 @@
+import * as http from 'node:http'
+
+import { createFetchProxy } from 'remix/fetch-proxy'
+import { createHmrReadyFetch, run } from 'remix/node-hmr'
+import { createRequestListener } from 'remix/node-fetch-server'
+
+const hmrProxyPort = process.env.PORT ? Number.parseInt(process.env.PORT, 10) : 44100
+const hmrEventPort = process.env.HMR_PORT
+  ? Number.parseInt(process.env.HMR_PORT, 10)
+  : hmrProxyPort + 1
+const appPort = process.env.APP_PORT ? Number.parseInt(process.env.APP_PORT, 10) : hmrEventPort + 1
+
+const hmrRunner = run('server.ts', {
+  env: {
+    ...process.env,
+    PORT: String(appPort),
+    HMR_PROXY_PORT: String(hmrProxyPort),
+  },
+  nodeArgs: ['--import', 'remix/node-tsx', '--import', 'remix/ui-hmr/node'],
+  browserHmrChannel: { port: hmrEventPort },
+})
+
+const server = http.createServer(
+  createRequestListener(
+    createHmrReadyFetch(
+      hmrRunner,
+      createFetchProxy(`http://127.0.0.1:${appPort}`, {
+        xForwardedHeaders: true,
+      }),
+    ),
+  ),
+)
+
+server.listen(hmrProxyPort, '127.0.0.1')
+
+let shuttingDown = false
+
+function shutdown() {
+  if (shuttingDown) return
+  shuttingDown = true
+  server.close(() => hmrRunner.close().finally(() => process.exit(0)))
+  server.closeAllConnections()
+}
+
+process.on('SIGINT', shutdown)
+process.on('SIGTERM', shutdown)

package/template/package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "scripts": {
     "dev": "NODE_ENV=development node --watch --import remix/node-tsx server.ts",
+    "hmr": "NODE_ENV=development node hmr.ts",
     "start": "NODE_ENV=production node --import remix/node-tsx server.ts",
     "test": "NODE_ENV=test node --import remix/node-tsx --test",
     "typecheck": "tsc --noEmit"

package/template/server.ts

@@ -4,6 +4,9 @@ import { createRequestListener } from 'remix/node-fetch-server'
 import { router } from './app/router.ts'
 
 const port = process.env.PORT ? Number.parseInt(process.env.PORT, 10) : 44100
+const hmrProxyPort = process.env.HMR_PROXY_PORT
+  ? Number.parseInt(process.env.HMR_PROXY_PORT, 10)
+  : null
 
 const server = http.createServer(
   createRequestListener(async (request) => {
@@ -19,7 +22,11 @@ const server = http.createServer(
 )
 
 server.listen(port, () => {
-  console.log(`Server listening on http://localhost:${port}`)
+  if (process.env.REMIX_NODE_HMR) {
+    import('remix/node-hmr/runtime').then((nodeHmr) => nodeHmr.emitServerReady())
+  }
+
+  console.log(`Server listening on http://localhost:${hmrProxyPort ?? port}`)
 })
 
 let shuttingDown = false

package/template/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "strict": true,
     "lib": ["ES2024", "DOM", "DOM.Iterable"],
-    "types": ["node"],
+    "types": ["node", "remix/assets/types/hmr"],
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "target": "ESNext",

package/dist/lib/doctor/controller-fix-plans.d.ts

@@ -1,4 +0,0 @@
-import type { ControllerOwnership, OwnershipRouteNode } from '../controller-ownership.ts';
-import type { DoctorFixPlan } from './types.ts';
-export declare function getControllerFixPlans(appRoot: string, tree: OwnershipRouteNode[], ownership: ControllerOwnership): Promise<DoctorFixPlan[]>;
-//# sourceMappingURL=controller-fix-plans.d.ts.map

package/dist/lib/doctor/controller-fix-plans.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"controller-fix-plans.d.ts","sourceRoot":"","sources":["../../../src/lib/doctor/controller-fix-plans.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,mBAAmB,EAEnB,kBAAkB,EACnB,MAAM,4BAA4B,CAAA;AAGnC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAI/C,wBAAsB,qBAAqB,CACzC,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,kBAAkB,EAAE,EAC1B,SAAS,EAAE,mBAAmB,GAC7B,OAAO,CAAC,aAAa,EAAE,CAAC,CAkD1B"}

package/dist/lib/doctor/controller-fix-plans.js

@@ -1,119 +0,0 @@
-import * as fs from 'node:fs/promises';
-import * as path from 'node:path';
-import { getOwnerCandidateForExtension, getOwnerFileExtension, } from "../controller-files.js";
-import { ROOT_ROUTE_NAME } from "../controller-ownership.js";
-import { renderControllerPlaceholder } from "./controller-placeholders.js";
-const OWNER_EXTENSION_PRIORITY = ['.tsx', '.ts', '.jsx', '.js'];
-export async function getControllerFixPlans(appRoot, tree, ownership) {
-    let routeNodesByName = getRouteNodesByName(tree);
-    let hasTsconfig = await pathExists(path.join(appRoot, 'tsconfig.json'));
-    let resolvedEntryPathByRouteName = new Map();
-    for (let subtree of ownership.subtrees) {
-        if (subtree.actualEntryPath != null) {
-            resolvedEntryPathByRouteName.set(subtree.routeName, subtree.actualEntryPath);
-            continue;
-        }
-        let fixCode = getFixCodeForSubtree(subtree);
-        if (fixCode == null) {
-            continue;
-        }
-        let extension = inferOwnerExtension(subtree, ownership, hasTsconfig);
-        let targetPath = getOwnerCandidateForExtension(subtree.entryCandidates, extension) ?? subtree.entryDisplayPath;
-        resolvedEntryPathByRouteName.set(subtree.routeName, targetPath);
-    }
-    let fixPlans = [];
-    for (let subtree of ownership.subtrees) {
-        let code = getFixCodeForSubtree(subtree);
-        if (code == null) {
-            continue;
-        }
-        let routeNode = routeNodesByName.get(subtree.routeName);
-        let entryPath = resolvedEntryPathByRouteName.get(subtree.routeName);
-        if (routeNode == null || entryPath == null) {
-            continue;
-        }
-        let contents = renderControllerPlaceholder(routeNode, entryPath);
-        fixPlans.push({
-            code,
-            contents,
-            kind: 'create-file',
-            path: entryPath,
-            routeName: subtree.routeName,
-            suite: 'actions',
-        });
-    }
-    return fixPlans;
-}
-function getFixCodeForSubtree(subtree) {
-    if (subtree.actualEntryPaths.length > 1) {
-        return null;
-    }
-    if (subtree.actualEntryPath != null) {
-        return null;
-    }
-    return subtree.claimedFilePaths.length > 0 ? 'incomplete-controller' : 'missing-owner';
-}
-function inferOwnerExtension(subtree, ownership, hasTsconfig) {
-    let subtreeExtension = getMostCommonOwnerExtension(subtree.claimedRouteLocalFilePaths);
-    if (subtreeExtension != null) {
-        return subtreeExtension;
-    }
-    let projectExtension = getMostCommonOwnerExtension([...ownership.scan.controllerEntryPaths]);
-    if (projectExtension != null) {
-        return projectExtension;
-    }
-    return hasTsconfig ? '.tsx' : '.js';
-}
-function getMostCommonOwnerExtension(filePaths) {
-    let counts = new Map();
-    for (let filePath of filePaths) {
-        let extension = getOwnerFileExtension(filePath);
-        if (extension == null) {
-            continue;
-        }
-        counts.set(extension, (counts.get(extension) ?? 0) + 1);
-    }
-    if (counts.size === 0) {
-        return null;
-    }
-    let bestExtension = null;
-    let bestCount = -1;
-    for (let extension of OWNER_EXTENSION_PRIORITY) {
-        let count = counts.get(extension) ?? 0;
-        if (count > bestCount) {
-            bestCount = count;
-            bestExtension = extension;
-        }
-    }
-    return bestExtension;
-}
-function getRouteNodesByName(tree) {
-    let routeNodesByName = new Map();
-    routeNodesByName.set(ROOT_ROUTE_NAME, {
-        children: tree,
-        key: ROOT_ROUTE_NAME,
-        kind: 'group',
-        name: ROOT_ROUTE_NAME,
-    });
-    function visit(nodes) {
-        for (let node of nodes) {
-            routeNodesByName.set(node.name, node);
-            visit(node.children);
-        }
-    }
-    visit(tree);
-    return routeNodesByName;
-}
-async function pathExists(filePath) {
-    try {
-        await fs.access(filePath);
-        return true;
-    }
-    catch (error) {
-        let nodeError = error;
-        if (nodeError.code === 'ENOENT') {
-            return false;
-        }
-        throw error;
-    }
-}

package/dist/lib/doctor/controller-placeholders.d.ts

@@ -1,3 +0,0 @@
-import { type OwnershipRouteNode } from '../controller-ownership.ts';
-export declare function renderControllerPlaceholder(routeNode: OwnershipRouteNode, entryPath: string): string;
-//# sourceMappingURL=controller-placeholders.d.ts.map

package/dist/lib/doctor/controller-placeholders.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"controller-placeholders.d.ts","sourceRoot":"","sources":["../../../src/lib/doctor/controller-placeholders.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAErF,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,kBAAkB,EAC7B,SAAS,EAAE,MAAM,GAChB,MAAM,CAyBR"}

package/dist/lib/doctor/controller-placeholders.js

@@ -1,52 +0,0 @@
-import * as path from 'node:path';
-import { getOwnerFileExtension } from "../controller-files.js";
-import { ROOT_ROUTE_NAME } from "../controller-ownership.js";
-export function renderControllerPlaceholder(routeNode, entryPath) {
-    let extension = getOwnerFileExtension(entryPath);
-    let lines = [];
-    let actionEntries = routeNode.children
-        .filter((childNode) => childNode.kind === 'route')
-        .map((childNode) => renderControllerActionEntry(childNode));
-    if (extension === '.js' || extension === '.jsx') {
-        lines.push('export default {', '  actions: {');
-        lines.push(...actionEntries);
-        lines.push('  },', '}', '');
-        return lines.join('\n');
-    }
-    let routeExpression = getRouteAccessExpression(routeNode.name);
-    let routesImportPath = getRelativeImportPath(entryPath, 'app/routes.ts');
-    lines.push(`import { createController } from 'remix/router'`, '');
-    lines.push(`import { routes } from '${routesImportPath}'`);
-    lines.push('', `export default createController(${routeExpression}, {`, '  actions: {');
-    lines.push(...actionEntries);
-    lines.push('  },', '})', '');
-    return lines.join('\n');
-}
-function renderControllerActionEntry(childNode) {
-    return [
-        `    ${formatObjectKey(childNode.key)}() {`,
-        `      return new Response(${JSON.stringify(`TODO: implement routes.${childNode.name}`)})`,
-        `    },`,
-    ].join('\n');
-}
-function getRouteAccessExpression(routeName) {
-    if (routeName === ROOT_ROUTE_NAME) {
-        return 'routes';
-    }
-    let segments = routeName.split('.');
-    let expression = 'routes';
-    for (let segment of segments) {
-        expression += isIdentifier(segment) ? `.${segment}` : `[${JSON.stringify(segment)}]`;
-    }
-    return expression;
-}
-function getRelativeImportPath(fromFilePath, toFilePath) {
-    let relativePath = path.posix.relative(path.posix.dirname(fromFilePath), toFilePath);
-    return relativePath.startsWith('.') ? relativePath : `./${relativePath}`;
-}
-function formatObjectKey(key) {
-    return isIdentifier(key) ? key : JSON.stringify(key);
-}
-function isIdentifier(value) {
-    return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(value);
-}

package/src/lib/doctor/controller-fix-plans.ts

@@ -1,168 +0,0 @@
-import * as fs from 'node:fs/promises'
-import * as path from 'node:path'
-
-import {
-  getOwnerCandidateForExtension,
-  getOwnerFileExtension,
-  type OwnerFileExtension,
-} from '../controller-files.ts'
-import type {
-  ControllerOwnership,
-  OwnedSubtree,
-  OwnershipRouteNode,
-} from '../controller-ownership.ts'
-import { ROOT_ROUTE_NAME } from '../controller-ownership.ts'
-import { renderControllerPlaceholder } from './controller-placeholders.ts'
-import type { DoctorFixPlan } from './types.ts'
-
-const OWNER_EXTENSION_PRIORITY: OwnerFileExtension[] = ['.tsx', '.ts', '.jsx', '.js']
-
-export async function getControllerFixPlans(
-  appRoot: string,
-  tree: OwnershipRouteNode[],
-  ownership: ControllerOwnership,
-): Promise<DoctorFixPlan[]> {
-  let routeNodesByName = getRouteNodesByName(tree)
-  let hasTsconfig = await pathExists(path.join(appRoot, 'tsconfig.json'))
-  let resolvedEntryPathByRouteName = new Map<string, string>()
-
-  for (let subtree of ownership.subtrees) {
-    if (subtree.actualEntryPath != null) {
-      resolvedEntryPathByRouteName.set(subtree.routeName, subtree.actualEntryPath)
-      continue
-    }
-
-    let fixCode = getFixCodeForSubtree(subtree)
-    if (fixCode == null) {
-      continue
-    }
-
-    let extension = inferOwnerExtension(subtree, ownership, hasTsconfig)
-    let targetPath =
-      getOwnerCandidateForExtension(subtree.entryCandidates, extension) ?? subtree.entryDisplayPath
-
-    resolvedEntryPathByRouteName.set(subtree.routeName, targetPath)
-  }
-
-  let fixPlans: DoctorFixPlan[] = []
-
-  for (let subtree of ownership.subtrees) {
-    let code = getFixCodeForSubtree(subtree)
-    if (code == null) {
-      continue
-    }
-
-    let routeNode = routeNodesByName.get(subtree.routeName)
-    let entryPath = resolvedEntryPathByRouteName.get(subtree.routeName)
-    if (routeNode == null || entryPath == null) {
-      continue
-    }
-
-    let contents = renderControllerPlaceholder(routeNode, entryPath)
-
-    fixPlans.push({
-      code,
-      contents,
-      kind: 'create-file',
-      path: entryPath,
-      routeName: subtree.routeName,
-      suite: 'actions',
-    })
-  }
-
-  return fixPlans
-}
-
-function getFixCodeForSubtree(subtree: OwnedSubtree): DoctorFixPlan['code'] | null {
-  if (subtree.actualEntryPaths.length > 1) {
-    return null
-  }
-
-  if (subtree.actualEntryPath != null) {
-    return null
-  }
-
-  return subtree.claimedFilePaths.length > 0 ? 'incomplete-controller' : 'missing-owner'
-}
-
-function inferOwnerExtension(
-  subtree: OwnedSubtree,
-  ownership: ControllerOwnership,
-  hasTsconfig: boolean,
-): OwnerFileExtension {
-  let subtreeExtension = getMostCommonOwnerExtension(subtree.claimedRouteLocalFilePaths)
-  if (subtreeExtension != null) {
-    return subtreeExtension
-  }
-
-  let projectExtension = getMostCommonOwnerExtension([...ownership.scan.controllerEntryPaths])
-  if (projectExtension != null) {
-    return projectExtension
-  }
-
-  return hasTsconfig ? '.tsx' : '.js'
-}
-
-function getMostCommonOwnerExtension(filePaths: string[]): OwnerFileExtension | null {
-  let counts = new Map<OwnerFileExtension, number>()
-
-  for (let filePath of filePaths) {
-    let extension = getOwnerFileExtension(filePath)
-    if (extension == null) {
-      continue
-    }
-
-    counts.set(extension, (counts.get(extension) ?? 0) + 1)
-  }
-
-  if (counts.size === 0) {
-    return null
-  }
-
-  let bestExtension: OwnerFileExtension | null = null
-  let bestCount = -1
-
-  for (let extension of OWNER_EXTENSION_PRIORITY) {
-    let count = counts.get(extension) ?? 0
-    if (count > bestCount) {
-      bestCount = count
-      bestExtension = extension
-    }
-  }
-
-  return bestExtension
-}
-
-function getRouteNodesByName(tree: OwnershipRouteNode[]): Map<string, OwnershipRouteNode> {
-  let routeNodesByName = new Map<string, OwnershipRouteNode>()
-  routeNodesByName.set(ROOT_ROUTE_NAME, {
-    children: tree,
-    key: ROOT_ROUTE_NAME,
-    kind: 'group',
-    name: ROOT_ROUTE_NAME,
-  })
-
-  function visit(nodes: OwnershipRouteNode[]): void {
-    for (let node of nodes) {
-      routeNodesByName.set(node.name, node)
-      visit(node.children)
-    }
-  }
-
-  visit(tree)
-  return routeNodesByName
-}
-
-async function pathExists(filePath: string): Promise<boolean> {
-  try {
-    await fs.access(filePath)
-    return true
-  } catch (error) {
-    let nodeError = error as NodeJS.ErrnoException
-    if (nodeError.code === 'ENOENT') {
-      return false
-    }
-
-    throw error
-  }
-}

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

@@ -1,70 +0,0 @@
-import * as path from 'node:path'
-
-import { getOwnerFileExtension } from '../controller-files.ts'
-import { ROOT_ROUTE_NAME, type OwnershipRouteNode } from '../controller-ownership.ts'
-
-export function renderControllerPlaceholder(
-  routeNode: OwnershipRouteNode,
-  entryPath: string,
-): string {
-  let extension = getOwnerFileExtension(entryPath)
-  let lines: string[] = []
-  let actionEntries = routeNode.children
-    .filter((childNode) => childNode.kind === 'route')
-    .map((childNode) => renderControllerActionEntry(childNode))
-
-  if (extension === '.js' || extension === '.jsx') {
-    lines.push('export default {', '  actions: {')
-    lines.push(...actionEntries)
-    lines.push('  },', '}', '')
-    return lines.join('\n')
-  }
-
-  let routeExpression = getRouteAccessExpression(routeNode.name)
-  let routesImportPath = getRelativeImportPath(entryPath, 'app/routes.ts')
-
-  lines.push(`import { createController } from 'remix/router'`, '')
-  lines.push(`import { routes } from '${routesImportPath}'`)
-
-  lines.push('', `export default createController(${routeExpression}, {`, '  actions: {')
-  lines.push(...actionEntries)
-  lines.push('  },', '})', '')
-
-  return lines.join('\n')
-}
-
-function renderControllerActionEntry(childNode: OwnershipRouteNode): string {
-  return [
-    `    ${formatObjectKey(childNode.key)}() {`,
-    `      return new Response(${JSON.stringify(`TODO: implement routes.${childNode.name}`)})`,
-    `    },`,
-  ].join('\n')
-}
-
-function getRouteAccessExpression(routeName: string): string {
-  if (routeName === ROOT_ROUTE_NAME) {
-    return 'routes'
-  }
-
-  let segments = routeName.split('.')
-  let expression = 'routes'
-
-  for (let segment of segments) {
-    expression += isIdentifier(segment) ? `.${segment}` : `[${JSON.stringify(segment)}]`
-  }
-
-  return expression
-}
-
-function getRelativeImportPath(fromFilePath: string, toFilePath: string): string {
-  let relativePath = path.posix.relative(path.posix.dirname(fromFilePath), toFilePath)
-  return relativePath.startsWith('.') ? relativePath : `./${relativePath}`
-}
-
-function formatObjectKey(key: string): string {
-  return isIdentifier(key) ? key : JSON.stringify(key)
-}
-
-function isIdentifier(value: string): boolean {
-  return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(value)
-}

package/template/app/assets/entry.ts

@@ -1,17 +0,0 @@
-import { run } from 'remix/ui'
-
-run({
-  async loadModule(moduleUrl, exportName) {
-    let mod = await import(moduleUrl)
-    return mod[exportName]
-  },
-  async resolveFrame(src, signal) {
-    let response = await fetch(src, { headers: { Accept: 'text/html' }, signal })
-    if (!response.ok) {
-      return `<pre>Frame error: ${response.status} ${response.statusText}</pre>`
-    }
-
-    if (response.body) return response.body
-    return await response.text()
-  },
-})