From 7c91bcda68c9b0c31a71c455fb4091d7443c3799 Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Tue, 15 Oct 2024 15:48:09 -0400 Subject: [PATCH 01/10] Export proper dom versions --- package.json | 1 + packages/react-router-dom/index.ts | 7 +++++++ packages/react-router-dom/package.json | 3 +++ packages/react-router-dom/tsconfig.json | 4 ++-- packages/react-router/package.json | 3 +++ packages/react-router/tsconfig.json | 4 ++-- 6 files changed, 18 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 73cf006e6f..9626fa045f 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "changeset": "changeset", "changeset:version": "changeset version && node ./scripts/remove-prerelease-changelogs.mjs", "publish": "node scripts/publish.js", + "tsc": "pnpm -r tsc", "version": "node ./scripts/version", "watch": "rollup -c -w" }, diff --git a/packages/react-router-dom/index.ts b/packages/react-router-dom/index.ts index c4934c9ec5..957fe6bbd0 100644 --- a/packages/react-router-dom/index.ts +++ b/packages/react-router-dom/index.ts @@ -1,2 +1,9 @@ +import type { RouterProviderProps } from "react-router/dom"; +import { HydratedRouter, RouterProvider } from "react-router/dom"; + +// TODO: Confirm if this causes tree-shaking issues and if so, convert to named exports export type * from "react-router"; export * from "react-router"; + +export type { RouterProviderProps }; +export { HydratedRouter, RouterProvider }; diff --git a/packages/react-router-dom/package.json b/packages/react-router-dom/package.json index dcfa6fcefd..ff9e21b3f9 100644 --- a/packages/react-router-dom/package.json +++ b/packages/react-router-dom/package.json @@ -30,6 +30,9 @@ }, "./package.json": "./package.json" }, + "scripts": { + "tsc": "tsc" + }, "dependencies": { "react-router": "workspace:*" }, diff --git a/packages/react-router-dom/tsconfig.json b/packages/react-router-dom/tsconfig.json index 4c00326035..45b8ec667f 100644 --- a/packages/react-router-dom/tsconfig.json +++ b/packages/react-router-dom/tsconfig.json @@ -3,8 +3,8 @@ "compilerOptions": { "lib": ["ES2020", "DOM", "DOM.Iterable"], "target": "ES2020", - "module": "ES2020", - "moduleResolution": "node", + "module": "Node16", + "moduleResolution": "Node16", "strict": true, "jsx": "react", diff --git a/packages/react-router/package.json b/packages/react-router/package.json index 215eb32c85..b59b9ec052 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -38,6 +38,9 @@ }, "./package.json": "./package.json" }, + "scripts": { + "tsc": "tsc" + }, "dependencies": { "@types/cookie": "^0.6.0", "@web3-storage/multipart-parser": "^1.0.0", diff --git a/packages/react-router/tsconfig.json b/packages/react-router/tsconfig.json index 302bedbf6b..9238ae0799 100644 --- a/packages/react-router/tsconfig.json +++ b/packages/react-router/tsconfig.json @@ -4,8 +4,8 @@ "compilerOptions": { "lib": ["ES2020", "DOM", "DOM.Iterable"], "target": "ES2020", - "module": "ES2020", - "moduleResolution": "node", + "module": "Node16", + "moduleResolution": "Node16", "strict": true, "jsx": "react", From ec493f7257006b50f5da024cbdd9bad4118ef6ce Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Tue, 15 Oct 2024 15:56:25 -0400 Subject: [PATCH 02/10] Run tsc before build --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 9626fa045f..82eefbc4ab 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "@remix-run/react-router", "private": true, "scripts": { + "prebuild": "pnpm run tsc -b", "build": "rollup -c", "clean": "git clean -fdX .", "clean:build": "git clean -fdx -e node_modules .", From 608abd987bb929f8720d838f18fe74dcf1f8fe07 Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Wed, 16 Oct 2024 09:11:37 -0400 Subject: [PATCH 03/10] Update docs --- docs/upgrading/v6.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/docs/upgrading/v6.md b/docs/upgrading/v6.md index 4a2290f3f6..a1e4c2930f 100644 --- a/docs/upgrading/v6.md +++ b/docs/upgrading/v6.md @@ -277,12 +277,14 @@ Now that your app is caught up, you can simply update to v7 (theoretically!) wit npm install react-router-dom@7 ``` -Your app should continue to work but you'll get console warnings for importing from "react-router-dom". In v7 you can import everything directly from `"react-router"`. +Your app should continue to work but we've restructured in v7 so that you can import directly from `"react-router"` — we'll do that in the next step. _Note: If you have issues with the above command, you may need to use the full `7.0.0-pre.N` version number because package managers may not always resolve `@7` to a prerelease since there is no stable 7.x release yet._ 👉 **Uninstall react-router-dom, install react-router** +In v7 we've also combined the `react-router` and `react-router-dom` packages and you can import everything directly from `"react-router"` (with one exception - see below): + ```shellscript nonumber npm uninstall react-router-dom npm install react-router @@ -290,6 +292,19 @@ npm install react-router 👉 **Update imports** +Now you can update you imports to come from `react-router`: + +```diff +-import { useLocation } from "react-router-dom"; ++import { useLocation } from "react-router"; +``` + +The one exception to this rule is for exports that specifically require `react-dom` — namely `RouterProvider` and `HydratedRouter` which use [`ReactDOM.flushSync`][react-flushsync] internally. These need to come from a separate `package.json` export to avoid peer dependency issues in non-browser apps that don't install `react-dom`. If you're writing a browser-based app, you will want to those from `react-router/dom`: + +```js +import { RouterProvider } from "react-router/dom"; +``` + Instead of manually updating imports, you can use this command. Make sure your git working tree is clean though so you can revert if it doesn't work as expected. ```shellscript nonumber @@ -297,3 +312,5 @@ find ./path/to/src \( -name "*.tsx" -o -name "*.ts" -o -name "*.js" -o -name "*. ``` Congratulations, you're now on v7! + +[react-flushsync]: https://react.dev/reference/react-dom/flushSync From 41df8ec6017bc19fa1de0df4b07900f5bcefc6f5 Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Wed, 16 Oct 2024 10:22:41 -0400 Subject: [PATCH 04/10] Update prebuild step --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 82eefbc4ab..b8aa2aa3fe 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@remix-run/react-router", "private": true, "scripts": { - "prebuild": "pnpm run tsc -b", + "prebuild": "pnpm --filter react-router tsc -b", "build": "rollup -c", "clean": "git clean -fdX .", "clean:build": "git clean -fdx -e node_modules .", From 763be657c2f1dd0d055a051f0ef3a60cbb8f7a08 Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Wed, 16 Oct 2024 10:28:22 -0400 Subject: [PATCH 05/10] Remove root tsc script --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index b8aa2aa3fe..659251889d 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,6 @@ "changeset": "changeset", "changeset:version": "changeset version && node ./scripts/remove-prerelease-changelogs.mjs", "publish": "node scripts/publish.js", - "tsc": "pnpm -r tsc", "version": "node ./scripts/version", "watch": "rollup -c -w" }, From 85c59e32b8817edf7f1f25e192b525fb302fdb20 Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Wed, 16 Oct 2024 10:54:49 -0400 Subject: [PATCH 06/10] Update rollup order and change react-router-node to use Node16 --- packages/react-router-node/tsconfig.json | 5 ++--- rollup.config.js | 10 +++++----- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/react-router-node/tsconfig.json b/packages/react-router-node/tsconfig.json index 91b81681b8..2ee2e1f13d 100644 --- a/packages/react-router-node/tsconfig.json +++ b/packages/react-router-node/tsconfig.json @@ -4,9 +4,8 @@ "compilerOptions": { "lib": ["DOM", "DOM.Iterable", "ES2022"], "target": "ES2022", - "module": "ES2022", - - "moduleResolution": "Bundler", + "module": "Node16", + "moduleResolution": "Node16", "allowSyntheticDefaultImports": true, "strict": true, "jsx": "react", diff --git a/rollup.config.js b/rollup.config.js index 66a4af0937..2a6b16ee22 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -4,13 +4,13 @@ const path = require("path"); module.exports = function rollup(options) { return [ "react-router", + "react-router-dom", // depends on react-router + "react-router-node", // depends on react-router + "react-router-express", // depends on react-router-node + "react-router-serve", // depends on react-router-node/express + "react-router-dev", // depends on react-router-node/express/serve "react-router-architect", "react-router-cloudflare", - "react-router-dom", - "react-router-dev", - "react-router-express", - "react-router-node", - "react-router-serve", "react-router-fs-routes", "react-router-remix-config-routes-adapter", ] From d864bfc7c657ebb937dc91eb8a935b037a082bd2 Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Wed, 16 Oct 2024 14:55:12 -0400 Subject: [PATCH 07/10] Remove node ESM build to fix types --- packages/react-router-node/package.json | 6 ++--- packages/react-router-node/rollup.config.js | 26 +++------------------ 2 files changed, 5 insertions(+), 27 deletions(-) diff --git a/packages/react-router-node/package.json b/packages/react-router-node/package.json index c6d5ee06aa..e4640d532a 100644 --- a/packages/react-router-node/package.json +++ b/packages/react-router-node/package.json @@ -16,13 +16,11 @@ "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.js" + "default": "./dist/index.js" }, "./install": { "types": "./dist/install.d.ts", - "import": "./dist/install.mjs", - "require": "./dist/install.js" + "default": "./dist/install.js" }, "./package.json": "./package.json" }, diff --git a/packages/react-router-node/rollup.config.js b/packages/react-router-node/rollup.config.js index 7fa53e3690..9ebe70d1a2 100644 --- a/packages/react-router-node/rollup.config.js +++ b/packages/react-router-node/rollup.config.js @@ -21,7 +21,7 @@ module.exports = function rollup() { "react-router-node" ); - const input = [`${SOURCE_DIR}/index.ts`, `${SOURCE_DIR}/install.ts`]; + const input = [`./${SOURCE_DIR}/index.ts`, `./${SOURCE_DIR}/install.ts`]; return [ { @@ -30,8 +30,7 @@ module.exports = function rollup() { output: { banner: createBanner(name, version), dir: OUTPUT_DIR, - entryFileNames: "[name].mjs", - format: "esm", + format: "cjs", preserveModules: true, exports: "named", }, @@ -46,6 +45,7 @@ module.exports = function rollup() { tsconfig: path.join(__dirname, "tsconfig.json"), exclude: ["__tests__"], noEmitOnError: !WATCH, + noForceEmit: true, }), nodeResolve({ extensions: [".ts", ".tsx"] }), copy({ @@ -53,25 +53,5 @@ module.exports = function rollup() { }), ], }, - { - input, - external: (id) => isBareModuleId(id), - output: { - banner: createBanner(name, version), - dir: OUTPUT_DIR, - format: "cjs", - preserveModules: true, - exports: "named", - }, - plugins: [ - babel({ - babelHelpers: "bundled", - exclude: /node_modules/, - extensions: [".ts", ".tsx"], - ...remixBabelConfig, - }), - nodeResolve({ extensions: [".ts", ".tsx"] }), - ], - }, ]; }; From 83036beb786288e2961886ad506c04ef6f024ae9 Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Wed, 16 Oct 2024 15:10:46 -0400 Subject: [PATCH 08/10] Add noForceEmit to react-router build --- packages/react-router/rollup.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-router/rollup.config.js b/packages/react-router/rollup.config.js index 08b2c1ad0b..39448e7230 100644 --- a/packages/react-router/rollup.config.js +++ b/packages/react-router/rollup.config.js @@ -53,6 +53,7 @@ module.exports = function rollup() { tsconfig: path.join(__dirname, "tsconfig.json"), exclude: ["__tests__"], noEmitOnError: !WATCH, + noForceEmit: true, }), copy({ targets: [{ src: "LICENSE.md", dest: SOURCE_DIR }], From 5d05ee868d3bc79f81203610ceb6205a48529aa8 Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Wed, 16 Oct 2024 15:25:04 -0400 Subject: [PATCH 09/10] Remove uneeded changes --- package.json | 1 - packages/react-router-dom/package.json | 3 --- packages/react-router-node/rollup.config.js | 2 +- packages/react-router/package.json | 3 --- 4 files changed, 1 insertion(+), 8 deletions(-) diff --git a/package.json b/package.json index 659251889d..73cf006e6f 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,6 @@ "name": "@remix-run/react-router", "private": true, "scripts": { - "prebuild": "pnpm --filter react-router tsc -b", "build": "rollup -c", "clean": "git clean -fdX .", "clean:build": "git clean -fdx -e node_modules .", diff --git a/packages/react-router-dom/package.json b/packages/react-router-dom/package.json index ff9e21b3f9..dcfa6fcefd 100644 --- a/packages/react-router-dom/package.json +++ b/packages/react-router-dom/package.json @@ -30,9 +30,6 @@ }, "./package.json": "./package.json" }, - "scripts": { - "tsc": "tsc" - }, "dependencies": { "react-router": "workspace:*" }, diff --git a/packages/react-router-node/rollup.config.js b/packages/react-router-node/rollup.config.js index 9ebe70d1a2..49266fca02 100644 --- a/packages/react-router-node/rollup.config.js +++ b/packages/react-router-node/rollup.config.js @@ -21,7 +21,7 @@ module.exports = function rollup() { "react-router-node" ); - const input = [`./${SOURCE_DIR}/index.ts`, `./${SOURCE_DIR}/install.ts`]; + const input = [`${SOURCE_DIR}/index.ts`, `${SOURCE_DIR}/install.ts`]; return [ { diff --git a/packages/react-router/package.json b/packages/react-router/package.json index b59b9ec052..215eb32c85 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -38,9 +38,6 @@ }, "./package.json": "./package.json" }, - "scripts": { - "tsc": "tsc" - }, "dependencies": { "@types/cookie": "^0.6.0", "@web3-storage/multipart-parser": "^1.0.0", From 421d5cdc1d7802705b4db6f1c206b2662e752915 Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Wed, 16 Oct 2024 15:39:23 -0400 Subject: [PATCH 10/10] Align remixBabelConfig and noForceEmit across packages --- packages/react-router-architect/rollup.config.js | 7 ++++--- packages/react-router-cloudflare/rollup.config.js | 5 ++--- packages/react-router-express/rollup.config.js | 1 + packages/react-router-fs-routes/rollup.config.js | 3 +++ .../rollup.config.js | 3 +++ packages/react-router-serve/rollup.config.js | 1 + packages/react-router/rollup.config.js | 2 ++ rollup.utils.js | 9 --------- 8 files changed, 16 insertions(+), 15 deletions(-) diff --git a/packages/react-router-architect/rollup.config.js b/packages/react-router-architect/rollup.config.js index 4e48ff954e..666442b069 100644 --- a/packages/react-router-architect/rollup.config.js +++ b/packages/react-router-architect/rollup.config.js @@ -10,6 +10,7 @@ const { getBuildDirectories, createBanner, WATCH, + remixBabelConfig, } = require("../../rollup.utils"); const { name: packageName, version } = require("./package.json"); @@ -23,9 +24,7 @@ module.exports = function rollup() { return [ { - external(id) { - return isBareModuleId(id); - }, + external: (id) => isBareModuleId(id), input: `${SOURCE_DIR}/index.ts`, output: { banner: createBanner(packageName, version), @@ -39,11 +38,13 @@ module.exports = function rollup() { babelHelpers: "bundled", exclude: /node_modules/, extensions: [".ts"], + ...remixBabelConfig, }), typescript({ tsconfig: path.join(__dirname, "tsconfig.json"), exclude: ["__tests__"], noEmitOnError: !WATCH, + noForceEmit: true, }), nodeResolve({ extensions: [".ts"] }), copy({ diff --git a/packages/react-router-cloudflare/rollup.config.js b/packages/react-router-cloudflare/rollup.config.js index 82dad3a416..578f3ad892 100644 --- a/packages/react-router-cloudflare/rollup.config.js +++ b/packages/react-router-cloudflare/rollup.config.js @@ -24,9 +24,7 @@ module.exports = function rollup() { return [ { - external(id) { - return isBareModuleId(id); - }, + external: (id) => isBareModuleId(id), input: `${SOURCE_DIR}/index.ts`, output: { banner: createBanner(packageName, version), @@ -45,6 +43,7 @@ module.exports = function rollup() { typescript({ tsconfig: path.join(__dirname, "tsconfig.json"), noEmitOnError: !WATCH, + noForceEmit: true, }), nodeResolve({ extensions: [".ts"] }), copy({ diff --git a/packages/react-router-express/rollup.config.js b/packages/react-router-express/rollup.config.js index 156a6620e3..9508014d31 100644 --- a/packages/react-router-express/rollup.config.js +++ b/packages/react-router-express/rollup.config.js @@ -43,6 +43,7 @@ module.exports = function rollup() { tsconfig: path.join(__dirname, "tsconfig.json"), exclude: ["__tests__"], noEmitOnError: !WATCH, + noForceEmit: true, }), nodeResolve({ extensions: [".ts", ".tsx"] }), copy({ diff --git a/packages/react-router-fs-routes/rollup.config.js b/packages/react-router-fs-routes/rollup.config.js index b663bec580..ac59595db7 100644 --- a/packages/react-router-fs-routes/rollup.config.js +++ b/packages/react-router-fs-routes/rollup.config.js @@ -9,6 +9,7 @@ const { createBanner, getBuildDirectories, WATCH, + remixBabelConfig, } = require("../../rollup.utils"); const { name, version } = require("./package.json"); @@ -36,11 +37,13 @@ module.exports = function rollup() { babelHelpers: "bundled", exclude: /node_modules/, extensions: [".ts"], + ...remixBabelConfig, }), typescript({ tsconfig: path.join(__dirname, "tsconfig.json"), exclude: ["__tests__"], noEmitOnError: !WATCH, + noForceEmit: true, }), nodeResolve({ extensions: [".ts"] }), copy({ diff --git a/packages/react-router-remix-config-routes-adapter/rollup.config.js b/packages/react-router-remix-config-routes-adapter/rollup.config.js index a263370d4c..0afe65b2b4 100644 --- a/packages/react-router-remix-config-routes-adapter/rollup.config.js +++ b/packages/react-router-remix-config-routes-adapter/rollup.config.js @@ -9,6 +9,7 @@ const { createBanner, getBuildDirectories, WATCH, + remixBabelConfig, } = require("../../rollup.utils"); const { name, version } = require("./package.json"); @@ -36,11 +37,13 @@ module.exports = function rollup() { babelHelpers: "bundled", exclude: /node_modules/, extensions: [".ts"], + ...remixBabelConfig, }), typescript({ tsconfig: path.join(__dirname, "tsconfig.json"), exclude: ["__tests__"], noEmitOnError: !WATCH, + noForceEmit: true, }), nodeResolve({ extensions: [".ts"] }), copy({ diff --git a/packages/react-router-serve/rollup.config.js b/packages/react-router-serve/rollup.config.js index 9f7cc10161..122390bd26 100644 --- a/packages/react-router-serve/rollup.config.js +++ b/packages/react-router-serve/rollup.config.js @@ -42,6 +42,7 @@ module.exports = function rollup() { tsconfig: path.join(__dirname, "tsconfig.json"), exclude: ["__tests__"], noEmitOnError: !WATCH, + noForceEmit: true, }), nodeResolve({ extensions: [".ts"] }), copy({ diff --git a/packages/react-router/rollup.config.js b/packages/react-router/rollup.config.js index 39448e7230..cb776f2983 100644 --- a/packages/react-router/rollup.config.js +++ b/packages/react-router/rollup.config.js @@ -91,6 +91,7 @@ module.exports = function rollup() { // eslint-disable-next-line no-restricted-globals tsconfig: path.join(__dirname, "tsconfig.dom.json"), noEmitOnError: !WATCH, + noForceEmit: true, }), ].concat(PRETTY ? prettier({ parser: "babel" }) : []), }, @@ -122,6 +123,7 @@ module.exports = function rollup() { // eslint-disable-next-line no-restricted-globals tsconfig: path.join(__dirname, "tsconfig.dom.json"), noEmitOnError: !WATCH, + noForceEmit: true, }), ], }, diff --git a/rollup.utils.js b/rollup.utils.js index 4d8d1fe83d..e131cc72df 100644 --- a/rollup.utils.js +++ b/rollup.utils.js @@ -150,15 +150,6 @@ const remixBabelConfig = { plugins: [ "@babel/plugin-proposal-export-namespace-from", "@babel/plugin-proposal-optional-chaining", - // Strip console.debug calls unless REACT_ROUTER_DEBUG=true - ...(process.env.REACT_ROUTER_DEBUG === "true" - ? [] - : [ - [ - "transform-remove-console", - { exclude: ["error", "warn", "log", "info"] }, - ], - ]), ], };