feat: configure export conditions properly (#12136)

feat: nuke rollup into oblivion in favor of tsup
feat: add ESM build for architect, express and node packages
chore: update HMR test to ignore warning log
feat: add module-sync export condition
fix: react-router should not reference itself, that's weird (use tsconfig paths)
chore: update e2e test warning assertion
chore: add vite ignore comment for dynamic import
fix: update optimizeDeps
chore: add wireit for caching
chore: add cache to workflows

---------

Co-authored-by: Matt Brophy <[email protected]>

Author: jacob-ebey

.github/workflows/shared-build.yml

@@ -22,6 +22,8 @@ jobs:
           node-version-file: ".nvmrc"
           cache: "pnpm"
 
+      - uses: google/wireit@setup-github-actions-caching/v2
+
       - name: Disable GitHub Actions Annotations
         run: |
           echo "::remove-matcher owner=tsc::"

.github/workflows/shared-integration.yml

@@ -45,6 +45,8 @@ jobs:
           node-version: ${{ matrix.node }}
           cache: "pnpm"
 
+      - uses: google/wireit@setup-github-actions-caching/v2
+
       - name: Disable GitHub Actions Annotations
         run: |
           echo "::remove-matcher owner=tsc::"

.github/workflows/test.yml

@@ -45,6 +45,8 @@ jobs:
           cache: pnpm
           check-latest: true
 
+      - uses: google/wireit@setup-github-actions-caching/v2
+
       - name: Disable GitHub Actions Annotations
         run: |
           echo "::remove-matcher owner=tsc::"

.gitignore

@@ -22,6 +22,7 @@ node_modules/
 /packages/*/dist/
 /packages/*/LICENSE.md
 
+.wireit
 .eslintcache
 .tmp
 /.env

build.utils.ts

@@ -0,0 +1,12 @@
+export function createBanner(packageName: string, version: string) {
+  return `/**
+ * ${packageName} v${version}
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */`;
+}

integration/helpers/playwright-fixture.ts

@@ -1,9 +1,11 @@
 import cp from "node:child_process";
 import type { Page, Response, Request } from "@playwright/test";
 import { test } from "@playwright/test";
-import cheerio from "cheerio";
+import { load } from "cheerio";
 import prettier from "prettier";
 
+let cheerio = load("");
+
 import type { AppFixture } from "./create-fixture.js";
 
 export class PlaywrightFixture {
@@ -239,7 +241,7 @@ export function selectHtml(source: string, selector: string) {
   return prettyHtml(cheerio.html(el)).trim();
 }
 
-export function prettyHtml(source: string): string {
+export function prettyHtml(source: string) {
   return prettier.format(source, { parser: "html" });
 }
 

integration/vite-spa-mode-test.ts

@@ -567,8 +567,15 @@ test.describe("SPA Mode", () => {
       expect(await page.locator("[data-root]").textContent()).toBe("Root");
       expect(await page.locator("[data-index]").textContent()).toBe("Index");
 
-      // Hydrates without issues
-      expect(logs).toEqual([]);
+      // Hydrates without issues - this message is expected due to the nested <Routes>
+      expect(logs).toEqual([
+        'You rendered descendant <Routes> (or called `useRoutes()`) at "/" ' +
+          '(under <Route path="">) but the parent route path has no trailing "*". ' +
+          "This means if you navigate deeper, the parent won't match anymore and " +
+          "therefore the child routes will never render." +
+          "\n\n" +
+          'Please change the parent <Route path=""> to <Route path="/*">.',
+      ]);
     });
 
     test("wraps default root HydrateFallback in user-provided Layout", async ({

package.json

@@ -2,7 +2,7 @@
   "name": "@remix-run/react-router",
   "private": true,
   "scripts": {
-    "build": "rollup -c",
+    "build": "pnpm run --filter=\"./packages/**/*\" build",
     "clean": "git clean -fdX .",
     "clean:build": "git clean -fdx -e node_modules .",
     "clean:integration": "node ./integration/helpers/cleanup.mjs",
@@ -57,10 +57,6 @@
     "@octokit/rest": "^18.12.0",
     "@playwright/test": "^1.33.0",
     "@remix-run/changelog-github": "^0.0.5",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-node-resolve": "^11.0.1",
-    "@rollup/plugin-replace": "^4.0.0",
-    "@rollup/plugin-typescript": "^8.5.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.5.2",
@@ -104,10 +100,6 @@
     "remark-gfm": "3.0.1",
     "remark-parse": "^10.0.1",
     "remark-stringify": "^10.0.2",
-    "rollup": "^2.79.1",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-prettier": "^2.3.0",
-    "rollup-plugin-terser": "^7.0.2",
     "semver": "^7.5.4",
     "tslib": "^2.6.2",
     "type-fest": "^2.19.0",

packages/react-router-architect/package.json

@@ -15,13 +15,38 @@
   "typings": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "node": {
+        "types": "./dist/index.d.ts",
+        "module-sync": "./dist/index.mjs",
+        "default": "./dist/index.js"
+      },
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "default": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
     },
     "./package.json": "./package.json"
   },
   "scripts": {
-    "tsc": "tsc"
+    "build": "wireit"
+  },
+  "wireit": {
+    "build": {
+      "command": "tsup",
+      "files": [
+        "sessions/**",
+        "*.ts",
+        "tsconfig.json",
+        "package.json"
+      ],
+      "output": [
+        "dist/**"
+      ]
+    }
   },
   "dependencies": {
     "@architect/functions": "^5.2.0",
@@ -35,7 +60,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "workspace:*",
-    "typescript": "^5.1.0"
+    "tsup": "^8.3.0",
+    "typescript": "^5.1.6",
+    "wireit": "0.14.9"
   },
   "peerDependencies": {
     "@react-router/node": "workspace:^",

packages/react-router-architect/rollup.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from "tsup";
+
+// @ts-ignore - out of scope
+import { createBanner } from "../../build.utils.js";
+
+import pkg from "./package.json";
+
+const entry = ["index.ts"];
+
+export default defineConfig([
+  {
+    clean: true,
+    entry,
+    format: ["cjs", "esm"],
+    outDir: "dist",
+    dts: true,
+    banner: {
+      js: createBanner(pkg.name, pkg.version),
+    },
+  },
+]);

packages/react-router-architect/tsup.config.ts

@@ -15,23 +15,45 @@
   "typings": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "default": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
     },
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "rollup -c",
-    "tsc": "tsc"
+    "build": "wireit"
+  },
+  "wireit": {
+    "build": {
+      "command": "tsup",
+      "files": [
+        "sessions/**",
+        "*.ts",
+        "tsconfig.json",
+        "package.json"
+      ],
+      "output": [
+        "dist/**"
+      ]
+    }
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20230518.0",
     "react-router": "workspace:*",
-    "typescript": "^5.1.0"
+    "tsup": "^8.3.0",
+    "typescript": "^5.1.6",
+    "wireit": "0.14.9"
   },
   "peerDependencies": {
     "@cloudflare/workers-types": "^4.0.0",
     "react-router": "workspace:^",
+    "tsup": "^8.3.0",
     "typescript": "^5.1.0"
   },
   "peerDependenciesMeta": {

packages/react-router-cloudflare/package.json

@@ -0,0 +1,21 @@
+import { defineConfig } from "tsup";
+
+// @ts-ignore - out of scope
+import { createBanner } from "../../build.utils.js";
+
+import pkg from "./package.json";
+
+const entry = ["index.ts"];
+
+export default defineConfig([
+  {
+    clean: true,
+    entry,
+    format: ["cjs", "esm"],
+    outDir: "dist",
+    dts: true,
+    banner: {
+      js: createBanner(pkg.name, pkg.version),
+    },
+  },
+]);