feat: add esm file

replace rollup from webpack

.size-snapshot.json

@@ -0,0 +1,26 @@
+{
+  "lib/index.min.js": {
+    "bundled": 143133,
+    "minified": 141985,
+    "gzipped": 36279
+  },
+  "lib/index.cjs.js": {
+    "bundled": 360238,
+    "minified": 142287,
+    "gzipped": 36334
+  },
+  "lib/index.esm.js": {
+    "bundled": 359695,
+    "minified": 141968,
+    "gzipped": 36255,
+    "treeshaked": {
+      "rollup": {
+        "code": 136505,
+        "import_statements": 14
+      },
+      "webpack": {
+        "code": 137780
+      }
+    }
+  }
+}

babel.config.js

@@ -1,5 +1,6 @@
 const { BABEL_ENV, NODE_ENV } = process.env
 
+const modules = BABEL_ENV === 'cjs' || NODE_ENV === 'test' ? 'commonjs' : false
 module.exports = {
   presets: [
     [
@@ -12,6 +13,11 @@ module.exports = {
         modules: 'commonjs'
       }
     ],
+    '@babel/preset-react',
     '@babel/preset-typescript'
-  ]
+  ],
+  plugins: [
+    ['babel-plugin-transform-react-remove-prop-types', { mode: 'unsafe-wrap' }],
+    modules === 'commonjs' && 'add-module-exports'
+  ].filter(Boolean)
 }

package.json

@@ -10,8 +10,11 @@
     "drawing",
     "two.js"
   ],
-  "main": "lib/index.min.js",
+  "type": "module",
   "types": "lib/index.d.ts",
+  "main": "lib/index.cjs.js",
+  "module": "lib/index.esm.js",
+  "browser": "lib/index.min.js",
   "files": [
     "lib/**/*.{js,ts}"
   ],
@@ -27,13 +30,14 @@
     "email": "[email protected]"
   },
   "scripts": {
-    "lib": "webpack --config webpack.lib.js",
-    "lib:dev": "NODE_ENV=development webpack -w",
-    "lib:prod": "rimraf lib/*;NODE_ENV=production yarn lib -p; tsc",
-    "demo:dev": "NODE_ENV=development webpack-dev-server --config webpack.demo.js",
-    "demo:prod": "webpack --config webpack.demo.js -p",
+    "prod": "npm-run-all lib:*",
+    "lib:clear": "rimraf lib/*",
+    "lib:rollup": "NODE_ENV=production rollup -c",
+    "lib:tsc": "NODE_ENV=production tsc --emitDeclarationOnly",
+    "demo:dev": "NODE_ENV=development webpack-dev-server",
+    "demo:prod": "NODE_ENV=production webpack -p",
     "test": "NODE_ENV=test jest --passWithNoTests",
-    "prepare": "yarn lib:prod",
+    "prepare": "yarn prod",
     "release": "release-it"
   },
   "dependencies": {
@@ -44,11 +48,16 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@babel/core": "7.5.5",
-    "@babel/plugin-syntax-dynamic-import": "7.2.0",
-    "@babel/polyfill": "7.4.4",
-    "@babel/preset-env": "7.5.5",
-    "@babel/preset-typescript": "7.3.3",
+    "@babel/core": "7.9.6",
+    "@babel/plugin-transform-runtime": "7.9.6",
+    "@babel/polyfill": "7.8.7",
+    "@babel/preset-env": "7.9.6",
+    "@babel/preset-react": "7.9.4",
+    "@babel/preset-typescript": "7.9.0",
+    "@rollup/plugin-commonjs": "11.0.2",
+    "@rollup/plugin-json": "4.0.2",
+    "@rollup/plugin-node-resolve": "7.1.1",
+    "@rollup/plugin-replace": "2.3.1",
     "@types/autoprefixer": "9.6.1",
     "@types/babel-core": "6.25.6",
     "@types/babel__core": "7.1.2",
@@ -76,6 +85,8 @@
     "babel-core": "6.26.3",
     "babel-jest": "24.9.0",
     "babel-loader": "8.0.6",
+    "babel-plugin-add-module-exports": "1.0.2",
+    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "babel-preset-es2015": "6.24.1",
     "css-loader": "3.2.0",
     "eslint": "6.8.0",
@@ -88,6 +99,7 @@
     "html-webpack-plugin": "3.2.0",
     "jest": "24.9.0",
     "node-sass": "4.12.0",
+    "npm-run-all": "4.1.5",
     "postcss-loader": "3.0.0",
     "pressure": "2.1.2",
     "prettier": "1.18.2",
@@ -96,6 +108,11 @@
     "release-it": "12.3.6",
     "resolve-url-loader": "3.1.0",
     "rimraf": "3.0.0",
+    "rollup": "1.31.0",
+    "rollup-plugin-babel": "4.4.0",
+    "rollup-plugin-size-snapshot": "0.11.0",
+    "rollup-plugin-sourcemaps": "0.5.0",
+    "rollup-plugin-terser": "5.2.0",
     "sass-loader": "8.0.0",
     "style-loader": "1.0.0",
     "ts-jest": "24.0.2",

rollup.config.js

@@ -0,0 +1,134 @@
+import nodeResolve from '@rollup/plugin-node-resolve'
+import replace from '@rollup/plugin-replace'
+import commonjs from '@rollup/plugin-commonjs'
+import babel from 'rollup-plugin-babel'
+// import json from "@rollup/plugin-json"
+import sourceMaps from 'rollup-plugin-sourcemaps'
+import { terser } from 'rollup-plugin-terser'
+import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
+import pkg from './package.json'
+
+const globals = {
+  react: 'React'
+}
+
+const external = Object.keys(globals)
+// Fix:
+// const external = id => !id.startsWith('.') && !id.startsWith('/')
+
+const esm_targets = '>1%, not dead, not ie 11, not op_mini all'
+const extensions = ['.js', '.jsx', '.ts', '.tsx', '.json']
+const getBabelOptions = ({ useESModules }) => ({
+  extensions,
+  babelrc: false,
+  exclude: '**/node_modules/**',
+  runtimeHelpers: true,
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        loose: true,
+        modules: false,
+        targets: useESModules ? esm_targets : undefined
+      }
+    ],
+    // react
+    ['@babel/preset-react', { useBuiltIns: true }],
+    '@babel/preset-typescript'
+  ],
+  plugins: [
+    // react
+    ['transform-react-remove-prop-types', { removeImport: true }],
+    // TODO: optimize bundle size
+    // 'babel-plugin-annotate-pure-calls',
+    ['@babel/plugin-transform-runtime', { regenerator: false, useESModules }]
+  ]
+})
+const input = './src/index.ts'
+
+export default [
+  /**
+   * umd
+   */
+  {
+    input,
+    output: {
+      file: pkg.browser,
+      format: 'umd',
+      name: pkg.name,
+      globals,
+      exports: 'named',
+      sourcemap: false
+    },
+    external,
+    plugins: [
+      commonjs(),
+      babel(getBabelOptions({ useESModules: true })),
+      nodeResolve({ extensions }),
+      sourceMaps(),
+      replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
+      terser({ output: { comments: /Copyright/i } }),
+      sizeSnapshot()
+    ]
+  },
+  /**
+   * umd(development)
+   */
+  // {
+  //   input,
+  //   output: {
+  //     file: pkg.browser,
+  //     format: 'umd',
+  //     name: pkg.name,
+  //     globals,
+  //     exports: 'named',
+  //     sourcemap: false
+  //   },
+  //   external: Object.keys(globals),
+  //   plugins: [
+  //     babel(getBabelOptions({ useESModules: true })),
+  //     nodeResolve({ extensions }),
+  //     commonjs(),
+  //     replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
+  //     terser()
+  //   ]
+  // },
+  /**
+   * cjs
+   */
+  {
+    input,
+    output: {
+      file: pkg.main,
+      format: 'cjs',
+      exports: 'named',
+      sourcemap: true
+    },
+    external,
+    plugins: [
+      sourceMaps(),
+      commonjs(),
+      babel(getBabelOptions({ useESModules: false })),
+      nodeResolve({ extensions }),
+      sizeSnapshot()
+    ]
+  },
+  /**
+   * esm
+   */
+  {
+    input,
+    output: { file: pkg.module, format: 'esm', sourcemap: true },
+    external,
+    plugins: [
+      sourceMaps(),
+      babel(
+        getBabelOptions({
+          useESModules: true
+        })
+      ),
+      nodeResolve({ extensions }),
+      sizeSnapshot()
+    ]
+  }
+]

src/example/app.tsx

@@ -8,6 +8,8 @@ import React, {
 import { render } from 'react-dom'
 import Pressure from 'pressure'
 import { useSvgDrawing } from '..'
+// TODO: Add e2e tests for library file.
+// import { useSvgDrawing } from '../../lib/index.esm'
 
 const getRandomInt = (max: number): number =>
   Math.floor(Math.random() * Math.floor(max))

tsconfig.json

@@ -28,5 +28,5 @@
     "typeRoots": ["node_modules/@types", "./src/typings"]
   },
   "include": ["src/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "lib"]
 }

webpack.config.js

@@ -1,22 +1,36 @@
+const { join, resolve } = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const isDev = process.env.NODE_ENV !== 'production'
+
 const eslintLoader = {
   loader: 'eslint-loader',
   options: {
     failOnWarning: false
   }
 }
+
+const exclude = /node_modules|lib/
+
 module.exports = {
+  mode: isDev ? 'development' : 'production',
+  devtool: isDev ? 'eval-source-map' : false,
+  entry: resolve(__dirname, 'src/example/app.tsx'),
+  output: {
+    filename: '[name].bundle.js',
+    path: resolve(__dirname, 'dist')
+  },
   module: {
     rules: [
       {
         enforce: 'pre',
         test: /\.jsx?$/,
-        exclude: /node_modules/,
+        exclude,
         use: [eslintLoader]
       },
       {
         enforce: 'pre',
         test: /\.tsx?$/,
-        exclude: /node_modules/,
+        exclude,
         use: [
           {
             loader: 'ts-loader',
@@ -29,7 +43,7 @@ module.exports = {
       },
       {
         test: /\.[jt]sx?$/,
-        exclude: /node_modules/,
+        exclude,
         use: [
           {
             loader: 'babel-loader',
@@ -41,7 +55,7 @@ module.exports = {
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
-        exclude: /node_modules/,
+        exclude,
         use: [
           {
             loader: 'file-loader',
@@ -51,10 +65,20 @@ module.exports = {
           }
         ]
       },
-      { test: /\.html$/, exclude: /node_modules/, use: 'html-loader' }
+      { test: /\.html$/, exclude, use: 'html-loader' }
     ]
   },
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: resolve(__dirname, 'src/example/index.html')
+    })
+  ],
+  devServer: {
+    contentBase: join(__dirname, 'dist'),
+    compress: true,
+    port: 8888
   }
 }