feat(dev): add BrowserMeta file for @remix-run/dev

contributors.yml

@@ -540,3 +540,4 @@
 - yudai-nkt
 - baby230211
 - TomVance
+- 19Qingfeng

packages/remix-dev/compiler/compiler.ts

@@ -8,6 +8,7 @@ import * as Channel from "../channel";
 import type { Manifest } from "../manifest";
 import { create as createManifest, write as writeManifest } from "./manifest";
 import { err, ok } from "../result";
+import createMetaFile from "./utils/analyzer";
 
 type Compiler = {
   compile: (options?: {
@@ -27,6 +28,8 @@ export let create = async (ctx: Context): Promise<Compiler> => {
     manifest: undefined as unknown as Channel.Type<Manifest>,
   };
 
+  let { createBrowserMetaFile } = createMetaFile(ctx)
+
   let subcompiler = {
     css: await CSS.createCompiler(ctx),
     js: await JS.createCompiler(ctx, channels),
@@ -45,6 +48,7 @@ export let create = async (ctx: Context): Promise<Compiler> => {
     ]);
   };
 
+
   let compile = async (
     options: { onManifest?: (manifest: Manifest) => void } = {}
   ) => {
@@ -83,10 +87,10 @@ export let create = async (ctx: Context): Promise<Compiler> => {
     let cssBundleHref =
       css.value.bundle &&
       ctx.config.publicPath +
-        path.relative(
-          ctx.config.assetsBuildDirectory,
-          path.resolve(css.value.bundle.path)
-        );
+      path.relative(
+        ctx.config.assetsBuildDirectory,
+        path.resolve(css.value.bundle.path)
+      );
     channels.cssBundleHref.ok(cssBundleHref);
     if (css.value.bundle) {
       writes.cssBundle = CSS.writeBundle(ctx, css.value.outputFiles);
@@ -96,6 +100,7 @@ export let create = async (ctx: Context): Promise<Compiler> => {
     let js = await tasks.js;
     if (!js.ok) throw error ?? js.error;
     let { metafile, hmr } = js.value;
+    await createBrowserMetaFile(metafile)
 
     // artifacts/manifest
     let manifest = await createManifest({
@@ -108,12 +113,12 @@ export let create = async (ctx: Context): Promise<Compiler> => {
     options.onManifest?.(manifest);
     writes.manifest = writeManifest(ctx.config, manifest);
 
-    // server compilation
     let server = await tasks.server;
     if (!server.ok) throw error ?? server.error;
     // artifacts/server
     writes.server = Server.write(ctx.config, server.value);
 
+
     await Promise.all(Object.values(writes));
     return manifest;
   };

packages/remix-dev/compiler/utils/analyzer.ts

@@ -0,0 +1,44 @@
+import { resolve, normalize } from 'path'
+import fs from 'fs-extra'
+import type { Metafile } from 'esbuild';
+
+import type { Context } from "../context";
+import invariant from "../../invariant";
+
+
+const JS_META_FILE_NAME = 'browser-metafile.json';
+
+
+const getMetaPath = (target: string, filename: string) => normalize(resolve(target, filename));
+
+/**
+ * Generate metafile for esbuild analyze
+ * @returns 
+ */
+const createMetaFile = (ctx: Context) => {
+  let {
+    config
+  } = ctx;
+  let {
+    metafile,
+    debugDirectory
+  } = config
+  return {
+    createBrowserMetaFile: (outputMeta?: Metafile) => {
+      if (metafile && outputMeta) {
+        try {
+          let output = getMetaPath(debugDirectory, JS_META_FILE_NAME);
+          if (!fs.existsSync(debugDirectory)) {
+            fs.mkdirSync(debugDirectory)
+          }
+          return fs.writeFile(normalize(output), JSON.stringify(outputMeta));
+        } catch (e) {
+          invariant(e, `Failed to generate ${JS_META_FILE_NAME} in ${debugDirectory}.`);
+        }
+      }
+    }
+  }
+}
+
+export default createMetaFile
+

packages/remix-dev/config.ts

@@ -91,6 +91,16 @@ export interface AppConfig {
    */
   assetsBuildDirectory?: string;
 
+  /**
+    * The path to the browser metafile build, relative to `remix.config.js`. Defaults  * to "public/.debug".
+  */
+  debugDirectory?: string
+
+  /**
+   * Whether to support generate browser js metafile for esbuild, default to false.
+   */
+  metafile?: boolean;
+
   /**
    * The path to the browser build, relative to remix.config.js. Defaults to
    * "public/build".
@@ -212,9 +222,9 @@ export interface AppConfig {
    * A function for defining custom directories to watch while running `remix dev`, in addition to `appDirectory`.
    */
   watchPaths?:
-    | string
-    | string[]
-    | (() => Promise<string | string[]> | string | string[]);
+  | string
+  | string[]
+  | (() => Promise<string | string[]> | string | string[]);
 
   future?: Partial<FutureConfig>;
 }
@@ -268,6 +278,17 @@ export interface RemixConfig {
    */
   assetsBuildDirectory: string;
 
+  /**
+   * The absolute path to the metafile build directory.
+   */
+  debugDirectory: string
+
+  /**
+   * Whether to support generate browser js metafile for esbuild, default to false.
+   * When you set it to true, remix-js-metafile.json will be generated in the assetsBuildDirectory directory.
+   */
+  metafile?: boolean;
+
   /**
    * the original relative path to the assets build directory
    */
@@ -403,7 +424,6 @@ export async function readConfig(
 
   let rootDirectory = path.resolve(remixRoot);
   let configFile = findConfig(rootDirectory, "remix.config", configExts);
-
   let appConfig: AppConfig = {};
   if (configFile) {
     let appConfigModule: any;
@@ -548,10 +568,10 @@ export async function readConfig(
     let serverRuntime = deps["@remix-run/deno"]
       ? "deno"
       : deps["@remix-run/cloudflare"]
-      ? "cloudflare"
-      : deps["@remix-run/node"]
-      ? "node"
-      : undefined;
+        ? "cloudflare"
+        : deps["@remix-run/node"]
+          ? "node"
+          : undefined;
 
     if (!serverRuntime) {
       let serverRuntimes = [
@@ -657,11 +677,20 @@ export async function readConfig(
     appConfig.browserBuildDirectory ||
     path.join("public", "build");
 
+
   let absoluteAssetsBuildDirectory = path.resolve(
     rootDirectory,
     assetsBuildDirectory
   );
 
+  let absoluteDebugDirectory = path.resolve(
+    rootDirectory,
+    appConfig.debugDirectory || path.join("public", ".debugger")
+  );
+
+  let metafile = !!appConfig.metafile
+
+
   let devServerPort =
     Number(process.env.REMIX_DEV_SERVER_WS_PORT) ||
     (await getPort({ port: Number(appConfig.devServerPort) || 8002 }));
@@ -750,6 +779,8 @@ export async function readConfig(
     entryClientFilePath,
     entryServerFile,
     entryServerFilePath,
+    debugDirectory: absoluteDebugDirectory,
+    metafile,
     devServerPort,
     devServerBroadcastDelay,
     assetsBuildDirectory: absoluteAssetsBuildDirectory,