feat: add "routes" visualization command to cli

fixtures/gists-app/package.json

@@ -9,7 +9,9 @@
     "predev": "yarn run install_remix",
     "dev": "pm2-dev pm2.config.js",
     "prestart": "yarn run install_remix",
-    "start": "node server.js"
+    "start": "node server.js",
+    "preroutes": "yarn run install_remix",
+    "routes": "node node_modules/@remix-run/dev/cli.js routes"
   },
   "dependencies": {
     "@exampledev/new.css": "^1.1.3",

fixtures/gists-app/pm2.config.js

@@ -13,7 +13,7 @@ module.exports = {
     },
     {
       name: "Remix",
-      script: "node node_modules/@remix-run/dev/cli.js dev",
+      script: "node node_modules/@remix-run/dev/cli.js watch",
       ignore_watch: ["."],
       env: {
         NODE_ENV: "development"

packages/remix-dev/cli.ts

@@ -8,10 +8,12 @@ Usage
   $ remix build [remixRoot]
   $ remix dev [remixRoot]
   $ remix setup [remixPlatform]
+  $ remix routes [remixRoot]
 
 Options
   --help              Print this help message and exit
   --version, -v       Print the CLI version and exit
+  --json              Print the routes as JSON
 
 Values
   [remixPlatform]     "node" is currently the only platform
@@ -20,12 +22,16 @@ Examples
   $ remix build my-website
   $ remix dev my-website
   $ remix setup node
+  $ remix routes my-website
 `;
 
 const flags: AnyFlags = {
   version: {
     type: "boolean",
     alias: "v"
+  },
+  json: {
+    type: "boolean"
   }
 };
 
@@ -41,6 +47,9 @@ if (cli.flags.version) {
 }
 
 switch (cli.input[0]) {
+  case "routes":
+    commands.routes(cli.input[1], cli.flags.json ? "json" : "jsx");
+    break;
   case "build":
     commands.build(cli.input[1], process.env.NODE_ENV);
     break;

packages/remix-dev/cli/commands.ts

@@ -8,6 +8,7 @@ import { BuildMode, isBuildMode } from "../build";
 import * as compiler from "../compiler";
 import type { RemixConfig } from "../config";
 import { readConfig } from "../config";
+import { formatRoutes, RoutesFormat, isRoutesFormat } from "../config/format";
 import { setupRemix, isSetupPlatform, SetupPlatform } from "../setup";
 
 export async function setup(platformArg?: string) {
@@ -20,6 +21,17 @@ export async function setup(platformArg?: string) {
   console.log(`Successfully setup Remix for ${platform}.`);
 }
 
+export async function routes(
+  remixRoot: string,
+  formatArg?: string
+): Promise<void> {
+  let config = await readConfig(remixRoot);
+
+  let format = isRoutesFormat(formatArg) ? formatArg : RoutesFormat.jsx;
+
+  console.log(formatRoutes(config.routes, format));
+}
+
 export async function build(
   remixRoot: string,
   modeArg?: string

packages/remix-dev/config/format.ts

@@ -0,0 +1,98 @@
+import type { RouteManifest } from "./routes";
+
+export enum RoutesFormat {
+  json = "json",
+  jsx = "jsx"
+}
+
+export function isRoutesFormat(format: any): format is RoutesFormat {
+  return format === RoutesFormat.json || format === RoutesFormat.jsx;
+}
+
+export function formatRoutes(
+  routeManifest: RouteManifest,
+  format: RoutesFormat
+) {
+  switch (format) {
+    case RoutesFormat.json:
+      return formatRoutesAsJson(routeManifest);
+    case RoutesFormat.jsx:
+      return formatRoutesAsJsx(routeManifest);
+  }
+}
+
+type JsonFormattedRoute = {
+  id: string;
+  index?: boolean;
+  path?: string;
+  caseSensitive?: boolean;
+  file: string;
+  children?: JsonFormattedRoute[];
+};
+
+export function formatRoutesAsJson(routeManifest: RouteManifest): string {
+  function handleRoutesRecursive(
+    parentId?: string
+  ): JsonFormattedRoute[] | undefined {
+    let routes = Object.values(routeManifest).filter(
+      route => route.parentId === parentId
+    );
+
+    let children = [];
+
+    for (let route of routes) {
+      children.push({
+        id: route.id,
+        index: route.index,
+        path: route.path,
+        caseSensitive: route.caseSensitive,
+        file: route.file,
+        children: handleRoutesRecursive(route.id)
+      });
+    }
+
+    if (children.length > 0) {
+      return children;
+    }
+    return undefined;
+  }
+
+  return JSON.stringify(handleRoutesRecursive() || null, null, 2);
+}
+
+export function formatRoutesAsJsx(routeManifest: RouteManifest) {
+  let output = "<Routes>";
+
+  function handleRoutesRecursive(parentId?: string, level = 1): boolean {
+    let routes = Object.values(routeManifest).filter(
+      route => route.parentId === parentId
+    );
+
+    let indent = Array(level * 2)
+      .fill(" ")
+      .join("");
+
+    for (let route of routes) {
+      output += "\n" + indent;
+      output += `<Route${
+        route.path ? ` path=${JSON.stringify(route.path)}` : ""
+      }${route.index ? " index" : ""}${
+        route.file ? ` file=${JSON.stringify(route.file)}` : ""
+      }>`;
+      if (handleRoutesRecursive(route.id, level + 1)) {
+        output += "\n" + indent;
+        output += "</Route>";
+      } else {
+        output = output.slice(0, -1) + " />";
+      }
+    }
+
+    return routes.length > 0;
+  }
+
+  handleRoutesRecursive();
+
+  output += "\n</Routes>";
+
+  return output;
+}