fix: add router UMD build for unpkg (#9446)

remix-run · Oct 17, 2022 · 9cf02f3 · 9cf02f3
1 parent be0c9d3
commit 9cf02f3
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 33 deletions.
diff --git a/.changeset/weak-lizards-occur.md 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
@@ -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
@@ -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
@@ -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
@@ -16,6 +16,7 @@
   "author": "Remix Software <[email protected]>",
   "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
@@ -1,17 +1,24 @@
 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,
   PRETTY,
 } = 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 }),
   ];
 };