Skip to content
This repository has been archived by the owner on Dec 21, 2023. It is now read-only.

Commit

Permalink
feat(@remix-run/dev): add resolveExtensions and resolveAliases co…
Browse files Browse the repository at this point in the history
…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'),
        },
    }
  • Loading branch information
Mikey Lemmon committed Sep 29, 2022
1 parent e4fc0a5 commit b0e79b9
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 0 deletions.
11 changes: 11 additions & 0 deletions packages/remix-dev/compiler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -355,6 +356,10 @@ async function createBrowserBuild(
yarnPnpPlugin(),
];

if (config.resolveAliases) {
plugins.unshift(aliasPlugin(config.resolveAliases));
}

return esbuild.build({
entryPoints,
outdir: config.assetsBuildDirectory,
Expand Down Expand Up @@ -388,6 +393,7 @@ async function createBrowserBuild(
jsx: "automatic",
jsxDev: options.mode !== BuildMode.Production,
plugins,
resolveExtensions: config.resolveExtensions,
});
}

Expand Down Expand Up @@ -429,6 +435,10 @@ function createServerBuild(
plugins.unshift(NodeModulesPolyfillPlugin());
}

if (config.resolveAliases) {
plugins.unshift(aliasPlugin(config.resolveAliases));
}

return esbuild
.build({
absWorkingDir: config.rootDirectory,
Expand Down Expand Up @@ -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);
Expand Down
32 changes: 32 additions & 0 deletions packages/remix-dev/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}

/**
Expand Down Expand Up @@ -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>;
}

/**
Expand Down Expand Up @@ -472,6 +500,8 @@ export async function readConfig(
writeConfigDefaults(tsconfigPath);
}

let { resolveExtensions, resolveAliases } = appConfig;

return {
appDirectory,
cacheDirectory,
Expand All @@ -495,6 +525,8 @@ export async function readConfig(
mdx,
watchPaths,
tsconfigPath,
resolveExtensions,
resolveAliases,
};
}

Expand Down
1 change: 1 addition & 0 deletions packages/remix-dev/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit b0e79b9

Please sign in to comment.