feat(remix-dev): add support for Yarn 3 PnP (#1316)

* feat: Add basic support for yarn 3's PnP feature * fix: Add missing (peer-)dependencies * Add name to contributors.yml * docs(examples): Add Yarn PnP example
remix-run · Jun 21, 2022 · 7cee94a · 7cee94a
1 parent 556cd2c
commit 7cee94a
Show file tree

Hide file tree

Showing 18 changed files with 240 additions and 2 deletions.
diff --git a/contributors.yml b/contributors.yml
@@ -62,6 +62,7 @@
 - clarkmitchell
 - cliffordfajardo
 - cloudy9101
+- cmd-johnson
 - codymjarrett
 - colinhacks
 - confix

diff --git a/examples/yarn-pnp/.eslintrc.js b/examples/yarn-pnp/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+};
diff --git a/examples/yarn-pnp/.gitignore b/examples/yarn-pnp/.gitignore
@@ -0,0 +1,19 @@
+node_modules
+
+/.cache
+/build
+/public/build
+/package-lock.json
+
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Swap the comments on the following lines if you wish to use zero-installs
+# See https://yarnpkg.com/features/zero-installs and
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+.pnp.*
+# !.yarn/cache
diff --git a/examples/yarn-pnp/README.md b/examples/yarn-pnp/README.md
@@ -0,0 +1,54 @@
+# Welcome to Remix!
+
+This is a very basic example of a Remix app, using the Remix App Server and Yarn PnP.
+
+- [Remix Docs](https://remix.run/docs)
+- [Yarn Plug'n'Play](https://next.yarnpkg.com/features/pnp)
+
+## Development
+
+From your terminal
+
+```sh
+yarn install
+yarn dev
+```
+
+This starts your app in development mode, rebuilding assets on file changes.
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+yarn build
+```
+
+Then run the app in production mode:
+
+```sh
+yarn start
+```
+
+## Notes for Using Yarn PnP
+
+- You'll need to use Yarn ≥ v3.2.0. Older versions don't work because of [an issue with Yarn](https://github.com/yarnpkg/berry/issues/3687).
+- For editor support of PnP, refer to [Editor SDKs](https://yarnpkg.com/getting-started/editor-sdks).
+- When using TypeScript, consider installing the [Yarn TypeScript plugin](https://github.com/yarnpkg/berry/tree/master/packages/plugin-typescript).
+- For the `~/*` alias to work for imports relative to `app/*`, you have to add this to your `package.json`:
+  ```json
+  "dependencies": {
+    /* ... */
+    "~": "link:app/"
+  }
+  ```
+  You can then also remove the `~` alias from your `tsconfig.json`.
+- For only installing non-dev dependencies in production, you can use [`yarn workspaces focus`](https://yarnpkg.com/cli/workspaces/focus) after removing the `.yarn/cache` directory:
+  ```sh
+  yarn install
+  yarn build
+  rm -r .yarn/cache
+  yarn workspaces focus --production
+  yarn start
+  ```
+  Or check out [plugin-installs](https://gitlab.com/Larry1123/yarn-contrib/-/blob/master/packages/plugin-production-install/README.md) by [Larry1123](https://gitlab.com/Larry1123).
diff --git a/examples/yarn-pnp/app/entry.client.tsx b/examples/yarn-pnp/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import { RemixBrowser } from "@remix-run/react";
+import { hydrate } from "react-dom";
+
+hydrate(<RemixBrowser />, document);
diff --git a/examples/yarn-pnp/app/entry.server.tsx b/examples/yarn-pnp/app/entry.server.tsx
@@ -0,0 +1,21 @@
+import type { EntryContext } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import { renderToString } from "react-dom/server";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+}
diff --git a/examples/yarn-pnp/app/root.tsx b/examples/yarn-pnp/app/root.tsx
@@ -0,0 +1,32 @@
+import type { MetaFunction } from "@remix-run/node";
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+export const meta: MetaFunction = () => ({
+  charset: "utf-8",
+  title: "New Remix App",
+  viewport: "width=device-width,initial-scale=1",
+});
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
diff --git a/examples/yarn-pnp/app/routes/index.tsx b/examples/yarn-pnp/app/routes/index.tsx
@@ -0,0 +1,18 @@
+export default function Index() {
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+      <h1>Welcome to Remix</h1>
+      <p>
+        This example is using{" "}
+        <a
+          target="_blank"
+          href="https://next.yarnpkg.com/features/pnp"
+          rel="noreferrer"
+        >
+          Yarn PnP
+        </a>
+        !
+      </p>
+    </div>
+  );
+}
diff --git a/examples/yarn-pnp/package.json b/examples/yarn-pnp/package.json
@@ -0,0 +1,27 @@
+{
+  "private": true,
+  "sideEffects": false,
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev",
+    "start": "remix-serve build"
+  },
+  "dependencies": {
+    "@remix-run/node": "1.6.0",
+    "@remix-run/react": "1.6.0",
+    "@remix-run/serve": "1.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "~": "link:./app"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "1.6.0",
+    "@types/react": "^17.0.24",
+    "@types/react-dom": "^17.0.9",
+    "typescript": "^4.1.2"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "packageManager": "[email protected]"
+}
diff --git a/examples/yarn-pnp/public/favicon.ico b/examples/yarn-pnp/public/favicon.ico
diff --git a/examples/yarn-pnp/remix.config.js b/examples/yarn-pnp/remix.config.js
@@ -0,0 +1,10 @@
+/**
+ * @type {import('@remix-run/dev').AppConfig}
+ */
+module.exports = {
+  ignoredRouteFiles: ["**/.*"],
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // serverBuildPath: "build/index.js",
+  // publicPath: "/build/",
+};
diff --git a/examples/yarn-pnp/remix.env.d.ts b/examples/yarn-pnp/remix.env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node/globals" />
diff --git a/examples/yarn-pnp/sandbox.config.json b/examples/yarn-pnp/sandbox.config.json
@@ -0,0 +1,6 @@
+{
+  "hardReloadOnChange": true,
+  "container": {
+    "port": 3000
+  }
+}
diff --git a/examples/yarn-pnp/tsconfig.json b/examples/yarn-pnp/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
+  }
+}
diff --git a/packages/remix-dev/compiler.ts b/packages/remix-dev/compiler.ts
@@ -5,6 +5,7 @@ import * as fse from "fs-extra";
 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 { BuildMode, BuildTarget } from "./build";
 import type { RemixConfig } from "./config";
@@ -353,6 +354,7 @@ async function createBrowserBuild(
     browserRouteModulesPlugin(config, /\?browser$/),
     emptyModulesPlugin(config, /\.server(\.[jt]sx?)?$/),
     NodeModulesPolyfillPlugin(),
+    yarnPnpPlugin(),
   ];
 
   return esbuild.build({
@@ -419,6 +421,7 @@ function createServerBuild(
     serverEntryModulePlugin(config),
     serverAssetsManifestPlugin(assetsManifestPromiseRef),
     serverBareModulesPlugin(config, dependencies, options.onWarning),
+    yarnPnpPlugin(),
   ];
 
   if (config.serverPlatform !== "node") {

diff --git a/packages/remix-dev/compiler/assets.ts b/packages/remix-dev/compiler/assets.ts
@@ -73,7 +73,10 @@ export async function createAssetsManifest(
     if (!output.entryPoint) continue;
 
     let entryPointFile = path.resolve(
-      output.entryPoint.replace(/(^browser-route-module:|\?browser$)/g, "")
+      output.entryPoint.replace(
+        /(^browser-route-module:|^pnp:|\?browser$)/g,
+        ""
+      )
     );
     if (entryPointFile === entryClientFile) {
       entry = {

diff --git a/packages/remix-dev/package.json b/packages/remix-dev/package.json
@@ -23,6 +23,7 @@
     "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
     "@npmcli/package-json": "^2.0.0",
     "@remix-run/server-runtime": "1.6.0",
+    "@yarnpkg/esbuild-plugin-pnp": "^2.0.0",
     "cacache": "^15.0.5",
     "chalk": "^4.1.2",
     "chokidar": "^3.5.1",
@@ -74,5 +75,13 @@
   },
   "engines": {
     "node": ">=14"
+  },
+  "peerDependencies": {
+    "@remix-run/serve": "1.5.1"
+  },
+  "peerDependenciesMeta": {
+    "@remix-run/serve": {
+      "optional": true
+    }
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -2577,6 +2577,13 @@
   resolved "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz"
   integrity sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==
 
+"@yarnpkg/esbuild-plugin-pnp@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@yarnpkg/esbuild-plugin-pnp/-/esbuild-plugin-pnp-2.0.1.tgz#120faad903d40e8f000ed3c9db9f9055c9612800"
+  integrity sha512-M8nYJr8S0riwy4Jgm3ja88m5ZfW6zZSV8fgLtO1mXpwTg0tD9ki1ShPOSm9DEbicc350TVf+k/jVNh6v1xApCw==
+  dependencies:
+    tslib "^1.13.0"
+
 "@zxing/[email protected]":
   version "0.9.0"
   resolved "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz"
@@ -10691,7 +10698,7 @@ tsconfig-paths@^4.0.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="@remix-run/dev" />
		/// <reference types="@remix-run/node/globals" />