feat!: Remove UMD build and drop support for older browsers

BREAKING CHANGE: The UMD build has been removed. BREAKING CHANGE: Older browsers are not supported anymore. In particulare Internet Explorer, the default browser on Android < 5.0 and iOS Safari < 12.2 BREAKING CHANGE: src folder is not included anymore in the package to reduce package size.
reactjs · Nov 27, 2022 · e4b9867 · e4b9867
1 parent ed49912
commit e4b9867
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 246 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -23,6 +23,7 @@ const options = {
     [
       '@babel/env',
       {
+        bugfixes: true,
         loose: true,
         modules,
         targets,

diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,6 @@
+> 0.3%
+last 2 versions
+Firefox ESR
+not dead
+not Android <5
+maintained node versions
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,5 @@ coverage/
 node_modules/
 npm-debug.log
 lib/
-dist/
 esm/
 yarn-error.log
diff --git a/README.md b/README.md
@@ -4,8 +4,8 @@ An accessible and easy tab component for ReactJS.
 
 https://reactcommunity.org/react-tabs/
 
-> Version 5 of `react-tabs` needs react version 18 or newer
-> 
+> Version 5 or newer of `react-tabs` needs react version 18 or newer
+>
 > Version 4 of `react-tabs` needs react version 16.8 or newer
 
 <ins><blockquote class="rich-diff-level-zero"> <p class="rich-diff-level-one">react-tabs was tested on real mobile devices and browsers with<br>
@@ -25,17 +25,6 @@ or
 npm install --save react-tabs
 ```
 
-You can also use react-tabs directly as UMD build in an HTML document by adding
-
-```html
-<script src="https://unpkg.com/react-tabs/dist/react-tabs.development.js" />
-<!-- or -->
-<script src="https://unpkg.com/react-tabs/dist/react-tabs.production.min.js" />
-```
-
-For example usages of the UMD builds have a look at the [`old_examples/umd`](./old_examples/umd/) folder.
-The development UMD build also needs the package `prop-types` being loaded besides `react`.
-
 ## Basic Example
 
 ```js
@@ -331,23 +320,6 @@ When using LESS you can easily import the default styles
 @import '../../path/to/node_modules/react-tabs/style/react-tabs.less';
 ```
 
-### UMD
-
-When using the UMD version of react-tabs you can easily use the default styles by adding
-
-```html
-<html>
-  <head>
-    ...
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/react-tabs/style/react-tabs.css"
-    />
-  </head>
-  ...
-</html>
-```
-
 ### Custom Style
 
 You can also always just simply copy the default style to your own css/scss/less and modify it to your own needs. The changelog will always tell you when classes change and we also consider changes that break the styling as semver major.
@@ -374,7 +346,10 @@ import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';
 import type { ReactTabsFunctionComponent, TabProps } from 'react-tabs';
 
 // All custom elements should pass through other props
-const CustomTab: ReactTabsFunctionComponent<TabProps> = ({ children, ...otherProps }) => (
+const CustomTab: ReactTabsFunctionComponent<TabProps> = ({
+  children,
+  ...otherProps
+}) => (
   <Tab {...otherProps}>
     <h1>{children}</h1>
   </Tab>

diff --git a/package.json b/package.json
@@ -7,10 +7,9 @@
   "typings": "index.d.ts",
   "scripts": {
     "clean:commonjs": "rimraf lib",
-    "clean:umd": "rimraf dist",
+    "clean:esm": "rimraf esm",
     "build:commonjs": "cross-env BABEL_OUTPUT=commonjs babel src/ --out-dir lib/ --ignore **/__tests__,**/__mocks__",
     "build:esm": "babel src/ --out-dir esm/ --ignore **/__tests__,**/__mocks__",
-    "build:umd": "rollup -c",
     "build": "npm-run-all clean:* --parallel build:*",
     "format": "eslint src --fix --report-unused-disable-directives",
     "lint": "eslint src --report-unused-disable-directives",
@@ -33,13 +32,9 @@
     "url": "https://github.com/reactjs/react-tabs/issues"
   },
   "files": [
-    "dist",
     "esm",
     "lib",
     "style",
-    "src/*.js",
-    "src/components/*.js",
-    "src/helpers/*.js",
     "index.d.ts"
   ],
   "homepage": "https://github.com/reactjs/react-tabs",
@@ -89,13 +84,6 @@
     "react-modal": "3.16.1",
     "react-test-renderer": "18.2.0",
     "rimraf": "3.0.2",
-    "rollup": "2.79.1",
-    "rollup-plugin-babel": "4.4.0",
-    "rollup-plugin-commonjs": "10.1.0",
-    "rollup-plugin-ignore": "1.0.10",
-    "rollup-plugin-node-resolve": "5.2.0",
-    "rollup-plugin-replace": "2.2.0",
-    "rollup-plugin-terser": "7.0.2",
     "webpack": "5.75.0",
     "webpack-cli": "5.0.0",
     "webpack-dev-server": "4.11.1"

diff --git a/rollup.config.js b/rollup.config.js