fix: make callbacks stable, fix TS type defs, fix export map

fix #110

Also rewrote the package in TS

BREAKING CHANGE: drop support for React < 16.8.0

.babelrc.js

@@ -1,23 +1,45 @@
 module.exports = function (api) {
-  const plugins = [
-    '@babel/plugin-transform-flow-strip-types',
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-optional-chaining',
-  ]
+  api.cache.using(() => process.env.OUTPUT_ESM)
+  const plugins = []
+  if (process.env.OUTPUT_ESM) {
+    plugins.push(function () {
+      function transformSource(source) {
+        if (source?.value.startsWith('.')) {
+          source.value = source.value.replace(/(\.m?(js|ts)?)?$/, '.mjs')
+        }
+      }
+      return {
+        visitor: {
+          ImportDeclaration(path) {
+            transformSource(path.node.source)
+          },
+          CallExpression(path) {
+            if (path.node.callee.type === 'Import') {
+              transformSource(path.node.arguments[0])
+            }
+          },
+          ExportNamedDeclaration(path) {
+            transformSource(path.node.source)
+          },
+        },
+      }
+    })
+  }
   const presets = [
     [
       '@babel/preset-env',
       api.env('es5')
         ? { forceAllTransforms: true }
-        : { targets: { node: '12' } },
+        : {
+            modules: process.env.OUTPUT_ESM ? false : undefined,
+            targets: { node: '12' },
+          },
     ],
+    ['@babel/preset-typescript', { allowDeclareFields: true }],
     '@babel/preset-react',
-    '@babel/preset-flow',
   ]
 
-  if (api.env(['test', 'coverage', 'es5'])) {
-    plugins.push('@babel/plugin-transform-runtime')
-  }
+  plugins.push('@babel/plugin-transform-runtime')
   if (api.env('coverage')) {
     plugins.push('babel-plugin-istanbul')
   }

.eslintrc

@@ -1,13 +1,4 @@
 {
-  "extends": [
-    "@jedwards1211/eslint-config-react",
-    "@jedwards1211/eslint-config-flow",
-    "prettier",
-    "prettier/babel",
-    "prettier/flowtype",
-    "prettier/react"
-  ],
-  "parser": "@babel/eslint-parser",
   "env": {
     "shared-node-browser": true,
     "es2017": true
@@ -18,5 +9,29 @@
       "version": "detect",
       "flowVersion": "detect"
     }
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.js"],
+      "extends": [
+        "@jedwards1211/eslint-config-react",
+        "@jedwards1211/eslint-config-flow",
+        "prettier"
+      ],
+      "parser": "@babel/eslint-parser"
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": [
+        "@jedwards1211/eslint-config-react",
+        "@jedwards1211/eslint-config-typescript",
+        "prettier"
+      ],
+      "plugins": ["@typescript-eslint/eslint-plugin"],
+      "parser": "@typescript-eslint/parser",
+      "rules": {
+        "@typescript-eslint/no-explicit-any": 0
+      }
+    }
+  ]
 }

.gitignore

@@ -1,17 +1,20 @@
 /coverage
 /.nyc_output
-node_modules
+/node_modules
 /lib
 /es
 .eslintcache
 *.js
-*.js.flow
+*.flow
 *.ts
-!/src/**/*.js
+!/scripts/**/*.ts
 !/src/**/*.ts
+!/src/**/*.tsx
+!/src/**/*.flow
 !/test/**/*.js
+!/test/**/*.ts
+!/test/**/*.tsx
 !/demo/**/*.js
 !/.babelrc.js
-!/webpack.config.js
 /demo-dist
 .idea

.npmignore

@@ -1,5 +1,6 @@
 **
 !**/*.js
+!**/*.mjs
 !**/*.js.flow
 !**/*.d.ts
 !/*.md

README.md

@@ -15,16 +15,17 @@ Also provides a [Render Props Component](https://reactjs.org/docs/render-props.h
 keeps track of the local state for a single popup, and passes the state and
 mutation functions to a child render function.
 
-# Using MUI v4?
+# Requirements
 
-For MUI v4 you'll need `material-ui-popup-state@^1.9.3`. Use `^2.0.0` and up for MUI v5.
+Requires MUI >= 5.0.0 and React >= 16.8.0.
+For MUI v4 you'll need `material-ui-popup-state@^1.9.3`.
 
 # Table of Contents
 
 <!-- toc -->
 
 - [material-ui-popup-state](#material-ui-popup-state)
-- [Using MUI v4?](#using-mui-v4)
+- [Requirements](#requirements)
 - [Table of Contents](#table-of-contents)
 - [Installation](#installation)
 - [Examples with React Hooks](#examples-with-react-hooks)

demo/index.js

@@ -1,15 +1,16 @@
 /* eslint-env browser, commonjs */
 
 import * as React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import Root from './Root'
 
 let reloads = 0
 const rootElement = document.getElementById('root')
 if (!rootElement) throw new Error('#root not found')
+const root = ReactDOM.createRoot(rootElement)
 
 function mount(Root) {
-  ReactDOM.render(<Root key={++reloads} />, rootElement)
+  root.render(<Root key={++reloads} />)
 }
 
 if (module.hot instanceof Object) {

webpack.config.js → demo/webpack.config.js

@@ -6,14 +6,15 @@ const prod = 'production' === process.env.NODE_ENV
 
 module.exports = {
   mode: prod ? 'production' : 'development',
-  entry: ['@babel/polyfill', './demo/index.js'],
+  entry: ['@babel/polyfill', path.resolve(__dirname, 'index.js')],
   output: {
-    path: path.join(__dirname, 'demo-dist'),
+    path: path.resolve(__dirname, '..', 'demo-dist'),
     filename: 'bundle.js',
   },
   resolve: {
+    extensions: ['.tsx', '.ts', '.js', '.json'],
     alias: {
-      'material-ui-popup-state': path.join(__dirname, 'src'),
+      'material-ui-popup-state': path.resolve(__dirname, '..', 'src/'),
     },
   },
   module: {
@@ -24,21 +25,29 @@ module.exports = {
         use: {
           loader: 'babel-loader',
           options: {
-            plugins: [
-              '@babel/plugin-transform-flow-strip-types',
-              '@babel/plugin-syntax-dynamic-import',
-              '@babel/plugin-proposal-export-default-from',
-              '@babel/plugin-proposal-export-namespace-from',
-              '@babel/plugin-proposal-object-rest-spread',
-              '@babel/plugin-proposal-class-properties',
+            presets: [
+              [
+                '@babel/preset-env',
+                { targets: { browsers: 'last 2 versions' } },
+              ],
+              '@babel/preset-react',
             ],
+          },
+        },
+      },
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
             presets: [
               [
                 '@babel/preset-env',
                 { targets: { browsers: 'last 2 versions' } },
               ],
               '@babel/preset-react',
-              '@babel/preset-flow',
+              '@babel/preset-typescript',
             ],
           },
         },
@@ -48,6 +57,8 @@ module.exports = {
   devServer: {
     port: 3000,
     host: '0.0.0.0',
-    contentBase: path.join(__dirname, 'demo'),
+    static: {
+      directory: __dirname,
+    },
   },
 }