feat(@remix-run/dev): add resolveExtensions and resolveAliases co…

…nfigs

This commit adds two new config options — `resolveExtensions` and
`resolveAliases` — that together enable a user to configure their remix
app to be able to utilize packages build with react-native-web (RNW).
The config options are required due to two quirks of RNW:

1. RNW expects implicit file extension resolution to prioritize files
   ending with `.web.<ext>` over files ending with just `.<ext>`
2. Most packages that utilize RNW expect the bundler to alias imports of
   `react-native` to `react-native-web` when the package is being used
   in a web context.

The `resolveExtensions` config option addresses the first quirk by
passing the config value through to esbuild, and the `resolveAliases`
option addresses the second by passing the value to the newly-added
esbuild-plugin-alias plugin, and can be used thusly:

    /** @type {import('@remix-run/dev').AppConfig} */
    module.exports = {
	/* ... */
        resolveExtensions: ['.tsx', '.ts', '.jsx', '.js', '.css', '.json']
            .map(ext => [`.web${ext}`, ext]).flat(),
        resolveAliases: {
            'react-native': require.resolve('react-native-web'),
        },
    }

packages/remix-dev/compiler.ts

@@ -6,6 +6,7 @@ import debounce from "lodash.debounce";
 import chokidar from "chokidar";
 import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
 import { pnpPlugin as yarnPnpPlugin } from "@yarnpkg/esbuild-plugin-pnp";
+import aliasPlugin from "esbuild-plugin-alias";
 
 import { BuildMode, BuildTarget } from "./build";
 import type { RemixConfig } from "./config";
@@ -355,6 +356,10 @@ async function createBrowserBuild(
     yarnPnpPlugin(),
   ];
 
+  if (config.resolveAliases) {
+    plugins.unshift(aliasPlugin(config.resolveAliases));
+  }
+
   return esbuild.build({
     entryPoints,
     outdir: config.assetsBuildDirectory,
@@ -388,6 +393,7 @@ async function createBrowserBuild(
     jsx: "automatic",
     jsxDev: options.mode !== BuildMode.Production,
     plugins,
+    resolveExtensions: config.resolveExtensions,
   });
 }
 
@@ -429,6 +435,10 @@ function createServerBuild(
     plugins.unshift(NodeModulesPolyfillPlugin());
   }
 
+  if (config.resolveAliases) {
+    plugins.unshift(aliasPlugin(config.resolveAliases));
+  }
+
   return esbuild
     .build({
       absWorkingDir: config.rootDirectory,
@@ -481,6 +491,7 @@ function createServerBuild(
       jsx: "automatic",
       jsxDev: options.mode !== BuildMode.Production,
       plugins,
+      resolveExtensions: config.resolveExtensions,
     })
     .then(async (build) => {
       await writeServerBuildResult(config, build.outputFiles);

packages/remix-dev/config.ts

@@ -157,6 +157,20 @@ export interface AppConfig {
     | string
     | string[]
     | (() => Promise<string | string[]> | string | string[]);
+
+  /*
+   * A prioritized list of file extensions used for implicit file resolution.
+   * Defaults to [".tsx", ".ts", ".jsx", ".js", ".css", ".json"]
+   */
+  resolveExtensions?: string[];
+
+  /*
+   * A set of aliases to apply during path resolution.
+   * E.g. { "react-native": require.resolve("react-native-web") } will replace
+   * all imports from "react-native" with imports from the "react-native-web"
+   * package.
+   */
+  resolveAliases?: Record<string, string>;
 }
 
 /**
@@ -275,6 +289,20 @@ export interface RemixConfig {
    * The path for the tsconfig file, if present on the root directory.
    */
   tsconfigPath: string | undefined;
+
+  /*
+   * A prioritized list of file extensions used for implicit file resolution.
+   * Defaults to [".tsx", ".ts", ".jsx", ".js", ".css", ".json"]
+   */
+  resolveExtensions?: string[];
+
+  /*
+   * A set of aliases to apply during path resolution.
+   * E.g. { "react-native": require.resolve("react-native-web") } will replace
+   * all imports from "react-native" with imports from the "react-native-web"
+   * package.
+   */
+  resolveAliases?: Record<string, string>;
 }
 
 /**
@@ -472,6 +500,8 @@ export async function readConfig(
     writeConfigDefaults(tsconfigPath);
   }
 
+  let { resolveExtensions, resolveAliases } = appConfig;
+
   return {
     appDirectory,
     cacheDirectory,
@@ -495,6 +525,8 @@ export async function readConfig(
     mdx,
     watchPaths,
     tsconfigPath,
+    resolveExtensions,
+    resolveAliases,
   };
 }
 

packages/remix-dev/package.json

@@ -32,6 +32,7 @@
     "chokidar": "^3.5.1",
     "dotenv": "^16.0.0",
     "esbuild": "0.14.51",
+    "esbuild-plugin-alias": "^0.2.1",
     "exit-hook": "2.2.1",
     "express": "^4.17.1",
     "fast-glob": "3.2.11",

yarn.lock

@@ -5830,6 +5830,11 @@ [email protected]:
   resolved "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.51.tgz#4adba0b7ea7eb1428bb00d8e94c199a949b130e8"
   integrity sha512-7R1/p39M+LSVQVgDVlcY1KKm6kFKjERSX1lipMG51NPcspJD1tmiZSmmBXoY5jhHIu6JL1QkFDTx94gMYK6vfA==
 
+esbuild-plugin-alias@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/esbuild-plugin-alias/-/esbuild-plugin-alias-0.2.1.tgz#45a86cb941e20e7c2bc68a2bea53562172494fcb"
+  integrity sha512-jyfL/pwPqaFXyKnj8lP8iLk6Z0m099uXR45aSN8Av1XD4vhvQutxxPzgA2bTcAwQpa1zCXDcWOlhFgyP3GKqhQ==
+
 esbuild-register@^3.3.2:
   version "3.3.2"
   resolved "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.3.2.tgz"