refactor: refactor webpack config

Author: kmkzt

.github/workflows/gh-pages.yml

@@ -0,0 +1,28 @@
+name: deploy github pages
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  deploy-ghpages:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@master
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: install
+        run: |
+          yarn install
+      - name: Build
+        run: |
+          yarn demo:prod
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_branch: gh-pages
+          publish_dir: ./dist

.gitignore

@@ -8,6 +8,7 @@
 
 # production,distfile
 /build
+/dist
 
 npm-debug.log*
 yarn-debug.log*

babel.config.js

@@ -1,11 +1,15 @@
+const { BABEL_ENV, NODE_ENV } = process.env
+
 module.exports = {
   presets: [
     [
       '@babel/preset-env',
       {
-        targets: {
-          node: 'current'
-        }
+        targets: NODE_ENV === 'test' ? { node: 'current' } : undefined,
+        loose: true,
+        // TODO: Add ES Module
+        // modules: BABEL_ENV === 'cjs' || NODE_ENV === 'test' ? 'commonjs' : false
+        modules: 'commonjs'
       }
     ],
     '@babel/preset-typescript'

docs/index.html

@@ -1,77 +1,70 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { useRef, useEffect, useCallback } from 'react';
 import { SvgDrawing } from 'svg-drawing';
 import { downloadBlob } from './utils/downloadBlob';
-export var useSvgDrawing = function (option) {
-    var renderRef = useRef(null);
-    var drawingRef = useRef(null);
-    var getSvgXML = useCallback(function () {
+export const useSvgDrawing = (option) => {
+    const renderRef = useRef(null);
+    const drawingRef = useRef(null);
+    const getSvgXML = useCallback(() => {
         if (!drawingRef.current)
             return null;
         return drawingRef.current.toSvgXml();
     }, []);
-    var download = useCallback(function () {
+    const download = useCallback(() => {
         if (!drawingRef.current)
             return;
-        var base64 = drawingRef.current.toSvgBase64();
+        const base64 = drawingRef.current.toSvgBase64();
         if (!base64)
             return;
         downloadBlob({
-            base64: base64,
-            filename: new Date().toISOString() + ".svg",
+            base64,
+            filename: `${new Date().toISOString()}.svg`,
             mimeType: 'image/svg+xml'
         });
     }, []);
-    var changePenColor = useCallback(function (penColor) {
+    const changePenColor = useCallback((penColor) => {
         if (!drawingRef.current || !penColor)
             return;
         drawingRef.current.penColor = penColor;
     }, []);
-    var changePenWidth = useCallback(function (penSise) {
+    const changePenWidth = useCallback((penSise) => {
         if (!drawingRef.current)
             return;
         drawingRef.current.penWidth = Number(penSise);
     }, []);
-    var clear = useCallback(function () {
+    const clear = useCallback(() => {
         if (!drawingRef.current)
             return;
         drawingRef.current.clear();
     }, []);
-    var undo = useCallback(function () {
+    const undo = useCallback(() => {
         if (!drawingRef.current)
             return;
-        var drawingChildren = drawingRef.current.scene.children;
+        const drawingChildren = drawingRef.current.scene.children;
         if (drawingChildren.length === 0)
             return;
         drawingRef.current.remove(drawingChildren[drawingChildren.length - 1]);
     }, []);
-    useEffect(function () {
+    useEffect(() => {
         if (drawingRef.current)
             return;
         if (!renderRef.current)
             return;
-        drawingRef.current = new SvgDrawing(__assign(__assign({}, option), { el: renderRef.current, autostart: true }));
+        drawingRef.current = new SvgDrawing({
+            ...option,
+            el: renderRef.current,
+            autostart: true
+        });
     });
     return [
         renderRef,
         {
             two: drawingRef.current,
-            changePenWidth: changePenWidth,
-            changePenColor: changePenColor,
-            clear: clear,
-            undo: undo,
-            getSvgXML: getSvgXML,
-            download: download
+            changePenWidth,
+            changePenColor,
+            clear,
+            undo,
+            getSvgXML,
+            download
         }
     ];
 };

docs/main.bundle.js

@@ -1,18 +1,17 @@
-export var downloadBlob = function (_a) {
-    var base64 = _a.base64, filename = _a.filename, mimeType = _a.mimeType;
-    var bin = atob(base64.replace(/^.*,/, ''));
-    var buffer = new Uint8Array(bin.length);
-    for (var i = 0; i < bin.length; i++) {
+export const downloadBlob = ({ base64, filename, mimeType }) => {
+    const bin = atob(base64.replace(/^.*,/, ''));
+    const buffer = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) {
         buffer[i] = bin.charCodeAt(i);
     }
-    var blob = new Blob([buffer.buffer], {
+    const blob = new Blob([buffer.buffer], {
         type: mimeType
     });
     if (window.navigator.msSaveBlob) {
         window.navigator.msSaveBlob(blob, filename);
     }
     else if (window.URL && window.URL.createObjectURL) {
-        var a = document.createElement('a');
+        const a = document.createElement('a');
         a.download = filename;
         a.href = window.URL.createObjectURL(blob);
         document.body.appendChild(a);

docs/main.bundle.js.map

@@ -27,13 +27,13 @@
     "email": "[email protected]"
   },
   "scripts": {
-    "dev": "NODE_ENV=development webpack-dev-server",
-    "build": "npm-run-all build:*",
-    "build:lib": "rimraf lib/* && NODE_ENV=production webpack -p && tsc",
-    "build:demo": "rimraf docs/* && NODE_ENV=development webpack -p",
-    "sample": "webpack-dev-server server.js",
-    "test": "jest --passWithNoTests",
-    "prepare": "yarn build:lib",
+    "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",
+    "test": "NODE_ENV=test jest --passWithNoTests",
+    "prepare": "yarn lib:prod",
     "release": "release-it"
   },
   "dependencies": {
@@ -88,7 +88,6 @@
     "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",

lib/index.min.js

@@ -7,7 +7,7 @@ import React, {
 } from 'react'
 import { render } from 'react-dom'
 import Pressure from 'pressure'
-import { useSvgDrawing } from '../'
+import { useSvgDrawing } from '..'
 
 const getRandomInt = (max: number): number =>
   Math.floor(Math.random() * Math.floor(max))

lib/useDrawing.js

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "outDir": "./lib",
-    "target": "es5",
+    "target": "esnext",
     "module": "esnext",
     "lib": ["es2018", "es2017", "dom"],
     "jsx": "react",

lib/utils/downloadBlob.js

@@ -1,46 +1,40 @@
-const { resolve } = require('path')
-const { smart } = require('webpack-merge')
-const devMode = process.env.NODE_ENV === 'development'
-const config = devMode
-  ? require('./webpack.dev.config')
-  : require('./webpack.prod.config')
-
-const common = {
+const eslintLoader = {
+  loader: 'eslint-loader',
+  options: {
+    failOnWarning: false
+  }
+}
+module.exports = {
   module: {
     rules: [
       {
         enforce: 'pre',
-        test: /\.(j|t)sx?$/,
+        test: /\.jsx?$/,
         exclude: /node_modules/,
-        use: [
-          {
-            loader: 'eslint-loader',
-            options: {
-              failOnWarning: true
-            }
-          }
-        ]
+        use: [eslintLoader]
       },
       {
-        test: /\.js|.jsx$/,
+        enforce: 'pre',
+        test: /\.tsx?$/,
         exclude: /node_modules/,
         use: [
           {
-            loader: 'babel-loader',
+            loader: 'ts-loader',
             options: {
-              presets: ['@babel/preset-env', '@babel/preset-typescript']
+              transpileOnly: true
             }
-          }
+          },
+          eslintLoader
         ]
       },
       {
-        test: /\.ts|.tsx$/,
+        test: /\.[jt]sx?$/,
         exclude: /node_modules/,
         use: [
           {
-            loader: 'ts-loader',
+            loader: 'babel-loader',
             options: {
-              transpileOnly: true
+              presets: ['@babel/preset-env', '@babel/preset-typescript']
             }
           }
         ]
@@ -61,11 +55,6 @@ const common = {
     ]
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
-    alias: {
-      '@': resolve(__dirname, 'src')
-    }
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
   }
 }
-
-module.exports = smart(common, config)

package.json

@@ -0,0 +1,26 @@
+const { join, resolve } = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { smart } = require('webpack-merge')
+const common = require('./webpack.config')
+
+const isDev = process.env.NODE_ENV !== 'production'
+
+module.exports = smart(common, {
+  mode: isDev ? 'development' : 'production',
+  entry: resolve(__dirname, 'src/example/app.tsx'),
+  output: {
+    filename: '[name].bundle.js',
+    path: resolve(__dirname, 'dist')
+  },
+  devtool: isDev ? 'source-map' : false,
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: resolve(__dirname, 'src/example/index.html')
+    })
+  ],
+  devServer: {
+    contentBase: join(__dirname, 'dist'),
+    compress: true,
+    port: 8888
+  }
+})

src/example/index.tsx renamed to src/example/app.tsx

@@ -1,22 +1,24 @@
 const { resolve } = require('path')
+const { smart } = require('webpack-merge')
+const common = require('./webpack.config')
 
-const config = {
-  mode: 'production',
+const isDev = process.env.NODE_ENV !== 'production'
+
+module.exports = smart(common, {
+  mode: isDev ? 'development' : 'production',
   entry: resolve(__dirname, 'src/index.ts'),
   output: {
     filename: 'index.min.js',
     path: resolve('lib'),
     library: 'react-hooks-svgdrawing',
     libraryTarget: 'umd'
   },
-  devtool: false,
+  devtool: isDev ? 'eval-source-map' : false,
   externals: {
     react: 'react'
   },
   plugins: [],
   optimization: {
     minimize: true
   }
-}
-
-module.exports = config
+})