From 9cf02f36f84a3b53e928dc500eb33a889172b03a Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Mon, 17 Oct 2022 10:25:44 -0400 Subject: [PATCH] fix: add router UMD build for unpkg (#9446) --- .changeset/weak-lizards-occur.md | 5 ++++ .../rollup.config.js | 4 ++-- packages/react-router-dom/rollup.config.js | 24 ++++++------------- packages/react-router/rollup.config.js | 16 ++++++------- packages/router/package.json | 1 + packages/router/rollup.config.js | 21 ++++++++++++---- 6 files changed, 38 insertions(+), 33 deletions(-) create mode 100644 .changeset/weak-lizards-occur.md diff --git a/.changeset/weak-lizards-occur.md b/.changeset/weak-lizards-occur.md new file mode 100644 index 0000000000..1a2bfbf475 --- /dev/null +++ b/.changeset/weak-lizards-occur.md @@ -0,0 +1,5 @@ +--- +"@remix-run/router": patch +--- + +Add UMD build for @remix-run/router diff --git a/packages/react-router-dom-v5-compat/rollup.config.js b/packages/react-router-dom-v5-compat/rollup.config.js index 1971a95083..82fed85f33 100644 --- a/packages/react-router-dom-v5-compat/rollup.config.js +++ b/packages/react-router-dom-v5-compat/rollup.config.js @@ -86,7 +86,7 @@ module.exports = function rollup() { banner: createBanner("React Router DOM v5 Compat", version), globals: { history: "HistoryLibrary", - "@remix-run/router": "Router", + "@remix-run/router": "RemixRouter", react: "React", "react-router": "ReactRouter", "react-router-dom": "ReactRouterDOM", @@ -128,7 +128,7 @@ module.exports = function rollup() { banner: createBanner("React Router DOM v5 Compat", version), globals: { history: "HistoryLibrary", - "@remix-run/router": "Router", + "@remix-run/router": "RemixRouter", react: "React", "react-router": "ReactRouter", "react-router-dom": "ReactRouterDOM", diff --git a/packages/react-router-dom/rollup.config.js b/packages/react-router-dom/rollup.config.js index 37df554bf5..0a816d13a2 100644 --- a/packages/react-router-dom/rollup.config.js +++ b/packages/react-router-dom/rollup.config.js @@ -26,13 +26,7 @@ module.exports = function rollup() { sourcemap: !PRETTY, banner: createBanner("React Router DOM", version), }, - external: [ - "history", - "react", - "react-dom", - "react-router", - "@remix-run/router", - ], + external: ["react", "react-dom", "react-router", "@remix-run/router"], plugins: [ extensions({ extensions: [".ts", ".tsx"] }), babel({ @@ -73,7 +67,7 @@ module.exports = function rollup() { sourcemap: !PRETTY, banner: createBanner("React Router DOM", version), }, - external: ["history", "react", "react-router", "@remix-run/router"], + external: ["react", "react-router", "@remix-run/router"], plugins: [ extensions({ extensions: [".ts", ".tsx"] }), babel({ @@ -101,7 +95,7 @@ module.exports = function rollup() { sourcemap: !PRETTY, banner: createBanner("React Router DOM", version), }, - external: ["history", "react", "react-router", "@remix-run/router"], + external: ["react", "react-router", "@remix-run/router"], plugins: [ extensions({ extensions: [".ts", ".tsx"] }), babel({ @@ -147,14 +141,13 @@ module.exports = function rollup() { sourcemap: !PRETTY, banner: createBanner("React Router DOM", version), globals: { - history: "HistoryLibrary", - "@remix-run/router": "Router", + "@remix-run/router": "RemixRouter", react: "React", "react-router": "ReactRouter", }, name: "ReactRouterDOM", }, - external: ["history", "react", "react-router", "@remix-run/router"], + external: ["react", "react-router", "@remix-run/router"], plugins: [ extensions({ extensions: [".ts", ".tsx"] }), babel({ @@ -182,14 +175,13 @@ module.exports = function rollup() { sourcemap: !PRETTY, banner: createBanner("React Router DOM", version), globals: { - history: "HistoryLibrary", - "@remix-run/router": "Router", + "@remix-run/router": "RemixRouter", react: "React", "react-router": "ReactRouter", }, name: "ReactRouterDOM", }, - external: ["history", "react", "react-router", "@remix-run/router"], + external: ["react", "react-router", "@remix-run/router"], plugins: [ extensions({ extensions: [".ts", ".tsx"] }), babel({ @@ -240,7 +232,6 @@ module.exports = function rollup() { ], external: [ "url", - "history", "react", "react-dom/server", "react-router-dom", @@ -284,7 +275,6 @@ module.exports = function rollup() { ], external: [ "url", - "history", "react", "react-dom/server", "react-router-dom", diff --git a/packages/react-router/rollup.config.js b/packages/react-router/rollup.config.js index e604c850ff..ff9d98a671 100644 --- a/packages/react-router/rollup.config.js +++ b/packages/react-router/rollup.config.js @@ -26,7 +26,7 @@ module.exports = function rollup() { sourcemap: !PRETTY, banner: createBanner("React Router", version), }, - external: ["history", "@remix-run/router", "react"], + external: ["@remix-run/router", "react"], plugins: [ extensions({ extensions: [".tsx", ".ts"] }), babel({ @@ -60,7 +60,7 @@ module.exports = function rollup() { sourcemap: !PRETTY, banner: createBanner("React Router", version), }, - external: ["history", "@remix-run/router", "react"], + external: ["@remix-run/router", "react"], plugins: [ extensions({ extensions: [".tsx", ".ts"] }), babel({ @@ -93,7 +93,7 @@ module.exports = function rollup() { sourcemap: !PRETTY, banner: createBanner("React Router", version), }, - external: ["history", "@remix-run/router", "react"], + external: ["@remix-run/router", "react"], plugins: [ extensions({ extensions: [".tsx", ".ts"] }), babel({ @@ -139,13 +139,12 @@ module.exports = function rollup() { sourcemap: !PRETTY, banner: createBanner("React Router", version), globals: { - history: "HistoryLibrary", - "@remix-run/router": "Router", + "@remix-run/router": "RemixRouter", react: "React", }, name: "ReactRouter", }, - external: ["history", "@remix-run/router", "react"], + external: ["@remix-run/router", "react"], plugins: [ extensions({ extensions: [".tsx", ".ts"] }), babel({ @@ -173,13 +172,12 @@ module.exports = function rollup() { sourcemap: !PRETTY, banner: createBanner("React Router", version), globals: { - history: "HistoryLibrary", - "@remix-run/router": "Router", + "@remix-run/router": "RemixRouter", react: "React", }, name: "ReactRouter", }, - external: ["history", "@remix-run/router", "react"], + external: ["@remix-run/router", "react"], plugins: [ extensions({ extensions: [".tsx", ".ts"] }), babel({ diff --git a/packages/router/package.json b/packages/router/package.json index a9db873260..6dbc30e704 100644 --- a/packages/router/package.json +++ b/packages/router/package.json @@ -16,6 +16,7 @@ "author": "Remix Software ", "sideEffects": false, "main": "./dist/router.cjs.js", + "unpkg": "./dist/router.umd.min.js", "module": "./dist/router.js", "types": "./dist/index.d.ts", "files": [ diff --git a/packages/router/rollup.config.js b/packages/router/rollup.config.js index 3ebc0fb2cb..78cf1c6858 100644 --- a/packages/router/rollup.config.js +++ b/packages/router/rollup.config.js @@ -1,9 +1,12 @@ const path = require("path"); + const babel = require("@rollup/plugin-babel").default; +const typescript = require("@rollup/plugin-typescript"); const copy = require("rollup-plugin-copy"); const extensions = require("rollup-plugin-extensions"); const prettier = require("rollup-plugin-prettier"); -const typescript = require("@rollup/plugin-typescript"); +const { terser } = require("rollup-plugin-terser"); + const { createBanner, getBuildDirectories, @@ -11,7 +14,11 @@ const { } = require("../../rollup.utils"); const { name, version } = require("./package.json"); -function getRollupConfig(format, filename, includeTypesAndCopy = false) { +function getRollupConfig( + format, + filename, + { includeTypesAndCopy, minify } = {} +) { const { ROOT_DIR, SOURCE_DIR, OUTPUT_DIR } = getBuildDirectories( name, // We don't live in a folder matching our package name @@ -25,6 +32,7 @@ function getRollupConfig(format, filename, includeTypesAndCopy = false) { format, sourcemap: !PRETTY, banner: createBanner("@remix-run/router", version), + ...(format === "umd" ? { name: "RemixRouter" } : {}), }, plugins: [ extensions({ extensions: [".ts"] }), @@ -37,7 +45,7 @@ function getRollupConfig(format, filename, includeTypesAndCopy = false) { ], extensions: [".ts"], }), - ...(includeTypesAndCopy + ...(includeTypesAndCopy === true ? [ typescript({ tsconfig: path.join(__dirname, "tsconfig.json"), @@ -52,14 +60,17 @@ function getRollupConfig(format, filename, includeTypesAndCopy = false) { }), ] : []), + ...(minify === true ? [terser()] : []), ].concat(PRETTY ? prettier({ parser: "babel" }) : []), }; } module.exports = function rollup() { return [ - getRollupConfig("esm", "router.js", true), - getRollupConfig("cjs", "router.cjs.js", false), + getRollupConfig("esm", "router.js", { includeTypesAndCopy: true }), + getRollupConfig("cjs", "router.cjs.js"), + getRollupConfig("umd", "router.umd.js"), + getRollupConfig("umd", "router.umd.min.js", { minify: true }), ]; };