Modernize code + dependencies to prepare for React 19

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
-    extends: ['airbnb', 'plugin:flowtype/recommended', 'prettier', 'prettier/flowtype', 'prettier/react'],
+    extends: ['airbnb', 'plugin:flowtype/recommended', 'prettier'],
 
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
 
     plugins: ['flowtype', 'prettier'],
 
@@ -11,6 +11,8 @@ module.exports = {
         // https://github.com/airbnb/javascript/pull/985#issuecomment-239145468
         'react/jsx-filename-extension': 'off',
 
+        'react/jsx-props-no-spreading': 'off',
+
         // We use Flow in most of our projects so we don't really need prop-type validation.
         // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
         'react/prop-types': 'off',

.pre-commit-config.yaml

@@ -1,31 +1,31 @@
 repos:
--   repo: https://github.com/pre-commit/pre-commit-hooks
-    sha: v1.2.0
-    hooks:
-    -   id: trailing-whitespace
-    -   id: end-of-file-fixer
-    -   id: check-added-large-files
-    -   id: check-json
-    -   id: check-yaml
--   repo: https://github.com/prettier/prettier
-    sha: 1.10.2
-    hooks:
-    -   id: prettier
-        name: prettier
-        # Prettier runs on JavaScript as part of eslint
-        exclude_types: [javascript]
-        exclude: ^package\.json
--   repo: local
-    hooks:
-    -   id: eslint
-        name: eslint
-        entry: yarn eslint
-        language: system
-        files: \.js$
-        args: ['--fix', '--ignore-pattern=!.eslintrc.js']
--   repo: https://github.com/Yelp/detect-secrets
-    rev: 0.9.1
-    hooks:
-    -   id: detect-secrets
-        args: ['--baseline', '.secrets.baseline']
-        exclude: tests/.*
+    - repo: https://github.com/pre-commit/pre-commit-hooks
+      rev: v1.2.0
+      hooks:
+          - id: trailing-whitespace
+          - id: end-of-file-fixer
+          - id: check-added-large-files
+          - id: check-json
+          - id: check-yaml
+    - repo: https://github.com/pre-commit/mirrors-prettier
+      rev: v3.1.0
+      hooks:
+          - id: prettier
+            name: prettier
+            # Prettier runs on JavaScript as part of eslint
+            exclude_types: [javascript]
+            exclude: ^package\.json
+    - repo: local
+      hooks:
+          - id: eslint
+            name: eslint
+            entry: yarn eslint
+            language: system
+            files: \.js$
+            args: ['--fix', '--ignore-pattern=!.eslintrc.js']
+    - repo: https://github.com/Yelp/detect-secrets
+      rev: 0.9.1
+      hooks:
+          - id: detect-secrets
+            args: ['--baseline', '.secrets.baseline']
+            exclude: tests/.*

.travis.yml

@@ -3,18 +3,18 @@ language: node_js
 dist: trusty
 
 node_js:
-  - "8"
+    - '8'
 
 before_install:
-  - curl -L https://yarnpkg.com/install.sh | bash -s -- --version 1.3.2
-  - export PATH="$HOME/.yarn/bin:$PATH"
-  - pyenv global 3.6
+    - curl -L https://yarnpkg.com/install.sh | bash -s -- --version 1.3.2
+    - export PATH="$HOME/.yarn/bin:$PATH"
+    - pyenv global 3.10
 
 cache:
-  yarn: true
+    yarn: true
 
 install:
-  - yarn
+    - yarn
 
 script:
-  - make test
+    - make test

Makefile

@@ -31,7 +31,7 @@ test: build venv node_modules
 
 venv: Makefile requirements-dev.txt
 	rm -rf venv
-	virtualenv venv --python=python3.6
+	virtualenv venv --python=python3.10
 	venv/bin/pip install -r requirements-dev.txt
 
 src/components/LemonReset/LemonReset.css: node_modules patch-meyer-reset.js

babel.config.js

@@ -4,9 +4,17 @@ module.exports = ({ env }) => ({
             '@babel/preset-env',
             {
                 modules: env() === 'module' ? false : 'auto',
+                targets: '> 0.25%, not dead',
             },
         ],
         '@babel/preset-flow',
-        '@babel/preset-react',
+        [
+            '@babel/preset-react',
+            {
+                runtime: 'automatic',
+                useBuiltIns: true,
+                useSpread: true,
+            },
+        ],
     ],
 });

package.json

@@ -12,45 +12,47 @@
     "typecheck": "flow check"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/preset-env": "^7.2.3",
-    "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.5",
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.24.4",
+    "@babel/eslint-parser": "^7.24.1",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-flow": "^7.24.1",
+    "@babel/preset-react": "^7.24.1",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.0.0",
     "css-loader": "^2.0.1",
     "empty": "^0.10.1",
     "enzyme": "^3.1.1",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-adapter-react-16": "^1.15.8",
     "enzyme-to-json": "^3.3.0",
-    "eslint": "^4.9.0",
-    "eslint-config-airbnb": "^17.0.0",
-    "eslint-config-prettier": "^3.3.0",
-    "eslint-plugin-flowtype": "^3.2.1",
+    "eslint": "^8.0.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.0.0",
+    "eslint-plugin-flowtype": "^8.0.0",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.4.0",
     "flow-copy-source": "^2.0.2",
-    "flow-bin": "^0.90.0",
+    "flow-bin": "^0.100.0",
     "flow-typed": "^2.5.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.6.0",
+    "jest": "^29.7.0",
     "mini-css-extract-plugin": "^0.5.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "prettier": "^1.10.2",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "prettier": "^3.1.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "reset-css": "^4.0.0",
-    "uglifyjs-webpack-plugin": "^2.0.1",
-    "webpack": "^4.27.1",
-    "webpack-cli": "^3.1.2"
+    "terser-webpack-plugin": "^5.0.0",
+    "webpack": "^5.0.0",
+    "webpack-cli": "^5.0.0"
   },
   "peerDependencies": {
-    "react": "15.x || 16.x"
+    "react": ">=16.14.0"
+  },
+  "engine": {
+    "node": ">=16.0.0"
   },
   "files": [
     "dist",

src/components/LemonReset/LemonReset.js

@@ -93,13 +93,13 @@ type Props<T> = {
     tagRef?: ?React.Ref<T>,
 };
 
-export const LemonReset = <T: string & LemonResetType>({
+export function LemonReset<T: string & LemonResetType>({
     tag: Tag,
-    children,
-    className,
-    tagRef,
+    children = null,
+    className = '',
+    tagRef = null,
     ...otherProps
-}: Props<T>) => {
+}: Props<T>) {
     let classes = styles[`lemon--${Tag}`];
     if (className != null && className !== '') {
         classes += ` ${className}`;
@@ -109,16 +109,10 @@ export const LemonReset = <T: string & LemonResetType>({
             {children}
         </Tag>
     );
-};
+}
 
 LemonReset.displayName = 'LemonReset';
 
-LemonReset.defaultProps = {
-    children: null,
-    className: '',
-    tagRef: null,
-};
-
 type TagProps = {
     children?: React.Node,
     className?: string,
@@ -129,20 +123,19 @@ type NoChildTagProps = {
 };
 
 function createTagComponent(tag: LemonResetType, displayName: string) {
-    const component = (props: TagProps) => <LemonReset tag={tag} {...props} />;
-    component.defaultProps = {
-        className: '',
-    };
+    const component = ({ className = '', ...otherProps }: TagProps) => (
+        <LemonReset tag={tag} className={className} {...otherProps} />
+    );
     component.displayName = displayName;
     return component;
 }
 
 function createNoChildTagComponent(tag: LemonResetType, displayName: string) {
-    const component = (props: NoChildTagProps) => <LemonReset tag={tag} {...props} />;
-    component.defaultProps = {
-        children: null,
-        className: '',
-    };
+    const component = ({ children = null, className = '', ...otherProps }: NoChildTagProps) => (
+        <LemonReset tag={tag} className={className} {...otherProps}>
+            {children}
+        </LemonReset>
+    );
     component.displayName = displayName;
     return component;
 }