Merge branch 'dev' into defjosiah/act/hmr-promise-router

.changeset/kind-coins-attack.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+ignore errors when killing already dead processes

.changeset/nine-islands-mate.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+fix sourcemaps for v2_dev

.changeset/red-bananas-design.md

@@ -0,0 +1,13 @@
+---
+"@remix-run/dev": minor
+---
+
+Output esbuild metafiles for bundle analysis
+
+Written to server build directory (`build/` by default):
+
+- `metafile.css.json`
+- `metafile.js.json` (browser JS)
+- `metafile.server.json` (server JS)
+
+Metafiles can be uploaded to https://esbuild.github.io/analyze/ for analysis.

.changeset/type-userouteloaderdata.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Add generic type for `useRouteLoaderData()`

packages/remix-dev/compiler/analysis.ts

@@ -0,0 +1,17 @@
+import fs from "node:fs";
+import path from "node:path";
+import type { Metafile } from "esbuild";
+
+import type { Context } from "./context";
+
+export let writeMetafile = (
+  ctx: Context,
+  filename: string,
+  metafile: Metafile
+) => {
+  let buildDir = path.dirname(ctx.config.serverBuildPath);
+  if (!fs.existsSync(buildDir)) {
+    fs.mkdirSync(buildDir, { recursive: true });
+  }
+  fs.writeFileSync(path.join(buildDir, filename), JSON.stringify(metafile));
+};

packages/remix-dev/compiler/css/compiler.ts

@@ -18,6 +18,7 @@ import {
 } from "./plugins/bundleEntry";
 import type { Context } from "../context";
 import { isBundle } from "./bundle";
+import { writeMetafile } from "../analysis";
 
 const getExternals = (config: RemixConfig): string[] => {
   // For the browser build, exclude node built-ins that don't have a
@@ -96,9 +97,11 @@ export let create = async (ctx: Context) => {
   let compiler = await esbuild.context({
     ...createEsbuildConfig(ctx),
     write: false,
+    metafile: true,
   });
   let compile = async () => {
-    let { outputFiles } = await compiler.rebuild();
+    let { outputFiles, metafile } = await compiler.rebuild();
+    writeMetafile(ctx, "metafile.css.json", metafile);
     let bundleOutputFile = outputFiles.find((outputFile) =>
       isBundle(ctx, outputFile, ".css")
     );

packages/remix-dev/compiler/js/compiler.ts

@@ -22,6 +22,7 @@ import invariant from "../../invariant";
 import { hmrPlugin } from "./plugins/hmr";
 import type { LazyValue } from "../lazyValue";
 import type { Context } from "../context";
+import { writeMetafile } from "../analysis";
 
 type Compiler = {
   // produce ./public/build/
@@ -164,6 +165,7 @@ export const create = async (
 
   let compile = async () => {
     let { metafile } = await compiler.rebuild();
+    writeMetafile(ctx, "metafile.js.json", metafile);
 
     let hmr: Manifest["hmr"] | undefined = undefined;
     if (ctx.options.mode === "development" && ctx.config.future.v2_dev) {

packages/remix-dev/compiler/js/plugins/hmr.ts

@@ -1,6 +1,6 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
-import * as esbuild from "esbuild";
+import type * as esbuild from "esbuild";
 
 import type { RemixConfig } from "../../../config";
 import type { Context } from "../../context";
@@ -161,6 +161,10 @@ export async function applyHMR(
 ) {
   let babel = await import("@babel/core");
   // @ts-expect-error
+  let babelPresetTypescript = await import("@babel/preset-typescript");
+  // @ts-expect-error
+  let babelJsx = await import("@babel/plugin-syntax-jsx");
+  // @ts-expect-error
   let reactRefresh = await import("react-refresh/babel");
 
   let IS_FAST_REFRESH_ENABLED = /\$RefreshReg\$\(/;
@@ -177,54 +181,45 @@ import.meta.hot = __hmr__.createHotContext(
 $id$
 );
 ${lastModified ? `import.meta.hot.lastModified = "${lastModified}";` : ""}
-}`.replace(/\$id\$/g, hmrId);
+}
+// REMIX HMR END
+\n`.replace(/\$id\$/g, hmrId);
   let sourceCodeWithHMR = hmrPrefix + sourceCode;
 
-  // turn the source code into JS for babel
-  let jsWithHMR = esbuild.transformSync(sourceCodeWithHMR, {
-    loader: argsPath.endsWith("x") ? "tsx" : "ts",
-    format: args.pluginData?.format || "esm",
-    jsx: "automatic",
-  }).code;
-  let resultCode = jsWithHMR;
-
   // run babel to add react-refresh
-  let transformResult = babel.transformSync(jsWithHMR, {
+  let transformResult = babel.transformSync(sourceCodeWithHMR, {
     filename: argsPath,
     ast: false,
     compact: false,
     sourceMaps: sourcemap,
     configFile: false,
     babelrc: false,
-    plugins: [[reactRefresh.default, { skipEnvCheck: true }]],
+    presets: [babelPresetTypescript.default],
+    plugins: [babelJsx.default, [reactRefresh.default, { skipEnvCheck: true }]],
   });
 
-  let jsWithReactRefresh = transformResult?.code || jsWithHMR;
+  let jsWithReactRefresh = transformResult?.code ?? sourceCodeWithHMR;
 
   // auto opt-in to accepting fast refresh updates if the module
   // has react components
-  if (IS_FAST_REFRESH_ENABLED.test(jsWithReactRefresh)) {
-    resultCode =
-      `
-        if (!window.$RefreshReg$ || !window.$RefreshSig$ || !window.$RefreshRuntime$) {
-          console.warn('remix:hmr: React Fast Refresh only works when the Remix compiler is running in development mode.');
-        } else {
-          var prevRefreshReg = window.$RefreshReg$;
-          var prevRefreshSig = window.$RefreshSig$;
-          window.$RefreshReg$ = (type, id) => {
-            window.$RefreshRuntime$.register(type, ${JSON.stringify(
-              hmrId
-            )} + id);
-          }
-          window.$RefreshSig$ = window.$RefreshRuntime$.createSignatureFunctionForTransform;
-        }
-      ` +
-      jsWithReactRefresh +
-      `
-        window.$RefreshReg$ = prevRefreshReg;
-        window.$RefreshSig$ = prevRefreshSig;
-      `;
+  if (!IS_FAST_REFRESH_ENABLED.test(jsWithReactRefresh)) {
+    return "// REMIX HMR BEGIN\n" + sourceCodeWithHMR;
   }
-
-  return resultCode;
+  return (
+    `// REMIX HMR BEGIN
+if (!window.$RefreshReg$ || !window.$RefreshSig$ || !window.$RefreshRuntime$) {
+  console.warn('remix:hmr: React Fast Refresh only works when the Remix compiler is running in development mode.');
+} else {
+  var prevRefreshReg = window.$RefreshReg$;
+  var prevRefreshSig = window.$RefreshSig$;
+  window.$RefreshReg$ = (type, id) => {
+    window.$RefreshRuntime$.register(type, ${JSON.stringify(hmrId)} + id);
+  }
+  window.$RefreshSig$ = window.$RefreshRuntime$.createSignatureFunctionForTransform;
+}\n` +
+    jsWithReactRefresh +
+    `\n
+window.$RefreshReg$ = prevRefreshReg;
+window.$RefreshSig$ = prevRefreshSig;`
+  );
 }

packages/remix-dev/compiler/server/compiler.ts

@@ -20,6 +20,7 @@ import type * as Channel from "../../channel";
 import type { Context } from "../context";
 import type { LazyValue } from "../lazyValue";
 import { cssBundlePlugin } from "../plugins/cssBundlePlugin";
+import { writeMetafile } from "../analysis";
 
 type Compiler = {
   // produce ./build/index.js
@@ -132,9 +133,11 @@ export const create = async (
   let compiler = await esbuild.context({
     ...createEsbuildConfig(ctx, refs),
     write: false,
+    metafile: true,
   });
   let compile = async () => {
-    let { outputFiles } = await compiler.rebuild();
+    let { outputFiles, metafile } = await compiler.rebuild();
+    writeMetafile(ctx, "metafile.server.json", metafile);
     return outputFiles;
   };
   return {

packages/remix-dev/devServer_unstable/proc.ts

@@ -4,14 +4,17 @@ import pidtree from "pidtree";
 let isWindows = process.platform === "win32";
 
 export let kill = async (pid: number) => {
-  try {
-    let cmd = isWindows
-      ? ["taskkill", "/F", "/PID", pid.toString()]
-      : ["kill", "-9", pid.toString()];
-    await execa(cmd[0], cmd.slice(1));
-  } catch (error) {
-    throw new Error(`Failed to kill process ${pid}: ${error}`);
+  if (isWindows) {
+    await execa("taskkill", ["/F", "/PID", pid.toString()]).catch((error) => {
+      // taskkill 128 -> the process is already dead
+      if (error.exitCode !== 128) throw error;
+    });
+    return;
   }
+  await execa("kill", ["-9", pid.toString()]).catch((error) => {
+    // process is already dead
+    if (!/No such process/.test(error.message)) throw error;
+  });
 };
 
 let isAlive = (pid: number) => {