feat: fix close bug/modify rollup config/eslint

Author: zWingz

.babelrc.js

@@ -4,25 +4,25 @@ module.exports = {
     [
       "@babel/preset-env",
       {
-        modules: false
+        modules: false,
+        "useBuiltIns": "entry",
+        "targets": {
+          "browsers": [
+            "last 2 versions"
+          ]
+        },
       }
     ],
     "@babel/preset-react"
   ],
   "plugins": [
     ['@babel/proposal-class-properties', { loose: true }]
-    // "external-helpers"
   ],
   "env": {
     "development": {
       "plugins": [
         "react-hot-loader/babel"
       ]
-    },
-    "production": {
-      "plugins": [
-        '@babel/plugin-external-helpers',
-      ],
     }
   }
 }

.eslintrc.js

@@ -103,6 +103,7 @@ module.exports = {
     'class-methods-use-this': 'off',
     'react/prop-types': 0,
     'react/display-name': 'off',
+    'no-console': ["error", { allow: ["warn", "error"] }],
     'prefer-destructuring': [
       'error',
       {

build/prod.conf.js

@@ -7,7 +7,7 @@ const config = merge(base, {
     index: './src/index.js'
   },
   output: {
-    // libraryTarget: 'commonjs2',
+    libraryTarget: 'commonjs2',
     filename: 'index.js',
     path: `${__dirname}/../dist`
   },
@@ -16,21 +16,15 @@ const config = merge(base, {
       {
         test: /\.scss$/,
         use: ['style-loader', {
-          loader: 'css-loader',
-          options: {
-            minimizer: true
-          }
+          loader: 'css-loader'
         }, 'sass-loader']
       }
     ]
   },
   externals: {
-    react: 'React',
-    'react-dom': 'ReactDOM',
-    'prop-types': 'PropTypes'
-  },
-  optimization: {
-    minimize: true
+    react: 'commonjs react',
+    'react-dom': 'commonjs react-dom',
+    'prop-types': 'commonjs prop-types'
   }
 })
 

package.json

@@ -1,9 +1,9 @@
 {
   "name": "@zzwing/react-image",
-  "version": "0.1.3",
+  "version": "1.0.1",
   "description": "react image component",
   "main": "dist/index.js",
-  "module": "src/index.js",
+  "module": "es/index.js",
   "keywords": [
     "react",
     "image",
@@ -21,7 +21,7 @@
     "build:rollup": "cross-env NODE_ENV=production rollup -c",
     "build:webpack": "cross-env NODE_ENV=production webpack --config=./build/prod.conf.js",
     "dev": "cross-env NODE_ENV=development webpack-serve --config=./build/dev.conf.js --host 0.0.0.0 --port 2222",
-    "publish": "npm publish --registry http://registry.npmjs.org --access=public"
+    "pub": "npm run lint && npm run build:rollup && npm publish --registry http://registry.npmjs.org --access=public"
   },
   "author": "zhengzwing@gmail.com",
   "license": "MIT",
@@ -34,28 +34,27 @@
     "url": "https://github.com/zWingz/react-image/issues"
   },
   "peerDependencies": {
+    "prop-types": ">=15.6.2",
     "react": ">=16.0.0",
-    "react-dom": ">=16.0.0",
-    "prop-types": ">=15.6.2"
+    "react-dom": ">=16.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.0.1",
     "@babel/plugin-external-helpers": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@mdx-js/loader": "^0.15.0-2",
-    "@mdx-js/mdx": "^0.15.0-2",
-    "autoprefixer": "^9.1.3",
+    "@mdx-js/loader": "^0.15.2",
+    "@mdx-js/mdx": "^0.15.2",
+    "autoprefixer": "^9.1.5",
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.2",
-    "babel-plugin-external-helpers": "^6.22.0",
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.0",
     "cz-conventional-changelog": "^2.1.0",
-    "docz": "^0.11.0",
+    "docz": "^0.11.2",
     "docz-plugin-css": "^0.11.0",
-    "docz-theme-default": "^0.11.0",
+    "docz-theme-default": "^0.11.2",
     "eslint": "^5.5.0",
     "eslint-config-airbnb": "^17.0.0",
     "eslint-loader": "^2.1.0",
@@ -66,13 +65,14 @@
     "html-webpack-plugin": "^3.2.0",
     "node-sass": "^4.9.2",
     "postcss-loader": "^3.0.0",
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2",
-    "react-hot-loader": "^4.3.5",
+    "postcss-url": "^8.0.0",
+    "react": "^16.5.0",
+    "react-dom": "^16.5.0",
+    "react-hot-loader": "^4.3.6",
     "rollup": "^0.64.1",
-    "rollup-plugin-babel": "^4.0.2",
+    "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-commonjs": "^9.1.6",
-    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss": "^1.6.2",
     "rollup-plugin-sass": "^0.9.2",
@@ -81,7 +81,7 @@
     "sass-loader": "^7.0.3",
     "url-loader": "^1.1.1",
     "vue-style-loader": "^4.1.1",
-    "webpack": "^4.17.1",
+    "webpack": "^4.18.0",
     "webpack-cli": "^3.1.0",
     "webpack-merge": "^4.1.3",
     "webpack-serve": "^2.0.2"
@@ -91,7 +91,5 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
-  "dependencies": {
-    "optimize-css-assets-webpack-plugin": "^5.0.1"
-  }
+  "dependencies": {}
 }

rollup.config.js

@@ -6,6 +6,7 @@ import resolve from 'rollup-plugin-node-resolve'
 import url from 'rollup-plugin-url'
 import sass from 'node-sass'
 import autoprefixer from 'autoprefixer'
+import postcssurl from 'postcss-url'
 import pkg from './package.json'
 const babelrc = require('./.babelrc.js')
 export default {
@@ -23,18 +24,17 @@ export default {
   plugins: [
     external(),
     postcss({
-      preprocessor: (content, id) => new Promise((res) => {
-        const result = sass.renderSync({ file: id })
-        res({ code: result.css.toString() })
-      }),
-      plugins: [
-        autoprefixer
-      ],
+      preprocessor: (content, id) => new Promise(res => {
+          const result = sass.renderSync({ file: id })
+          res({ code: result.css.toString() })
+        }),
+      plugins: [autoprefixer, postcssurl({ url: 'inline' })],
+      minimize: true,
       // extract: true,
       extensions: ['.sass', '.css']
     }),
     url({
-      limit: 0, // inline files < 10k, copy files > 10k
+      limit: 10 * 1024, // inline files < 10k, copy files > 10k
       publicPath: '/',
       emitFiles: true // defaults to true
     }),
@@ -43,11 +43,9 @@ export default {
       ...babelrc
       // externalHelpers: true
     }),
-    resolve(
-      {
-        extensions: ['.js', '.jsx', '.json']
-      }
-    ),
+    resolve({
+      extensions: ['.js', '.jsx', '.json']
+    }),
     commonjs()
   ]
 }

src/lib/ImgPreview/ImgPreview.jsx

@@ -350,14 +350,13 @@ export default class ImgPpreview extends React.PureComponent {
   _renderIcon() {
     return (
       <>
-        <div className="img-viewer-close">
-          <i
-            ref={el => {
-              this.$close = el
-            }}
-            className="react-image-icon"
-            style={{ pointerEvents: 'none' }}
-          >
+        <div
+          className="img-viewer-close"
+          ref={el => {
+            this.$close = el
+          }}
+        >
+          <i className="react-image-icon" style={{ pointerEvents: 'none' }}>
             &#xe904;
           </i>
         </div>
@@ -411,8 +410,8 @@ export default class ImgPpreview extends React.PureComponent {
 
   _renderFooter() {
     const {
- state, prev, next, rotateFnc
-} = this
+      state, prev, next, rotateFnc
+    } = this
     const { images, current } = state
     return (
       <>

src/style/global.scss

@@ -1,7 +1,7 @@
 @font-face {
   font-family: 'react-image-icon';
-  src: url('../assets/fonts/icomoon.woff?5zyc2o') format('woff'),
-    url('../assets/fonts/icomoon.svg?5zyc2o#icomoon') format('svg');
+  src: url('../assets/fonts/icomoon.woff?5zyc2o') format('woff');
+  // src: url('../assets/fonts/icomoon.svg?5zyc2o#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }