feat: extract css make ssr work

README.md

@@ -20,6 +20,7 @@ npm install react-viewer --save
 ```javascript
 import * as React from 'react';
 import Viewer from 'react-viewer';
+import 'react-viewer/dist/index.css';
 
 function App() {
   const [ visible, setVisible ] = React.useState(false);

package-lock.json

@@ -10827,6 +10827,18 @@
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
+    "mini-css-extract-plugin": {
+      "version": "0.9.0",
+      "resolved": "http://bnpm.byted.org/mini-css-extract-plugin/download/mini-css-extract-plugin-0.9.0.tgz",
+      "integrity": "sha1-R/LPB6oWWrNXM7H8l9TEbAVkM54=",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "normalize-url": "1.9.1",
+        "schema-utils": "^1.0.0",
+        "webpack-sources": "^1.1.0"
+      }
+    },
     "mini-store": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mini-store/-/mini-store-2.0.0.tgz",

package.json

@@ -68,6 +68,7 @@
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
     "merge2": "^1.3.0",
+    "mini-css-extract-plugin": "^0.9.0",
     "postcss-loader": "^3.0.0",
     "pre-commit": "^1.1.3",
     "react": "^16.10.2",

ssr-test/app.js

@@ -1,5 +1,5 @@
 const React = require('react');
-const Viewer = require('./dist/index');
+const Viewer = require('../dist/index').default;
 
 function App () {
   const [ visible, setVisible ] = React.useState(false);
@@ -18,7 +18,7 @@ function App () {
   return (
     <div>
       <button onClick={() => { setVisible(true); }}>{visible ? 'close' : 'open'}</button>
-      <Viewer images={images} visible={visible} />
+      <Viewer images={images} visible={visible} onClose={() => { setVisible(false); }} />
     </div>
   );
 }

ssr-test/client.js

@@ -1,5 +1,6 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
 const App = require('./app');
+import '../dist/index.css';
 
 ReactDOM.hydrate(<App />, document.getElementById('root'));

ssr-test/package.json

@@ -8,9 +8,7 @@
   "dependencies": {
     "@babel/cli": "^7.5.5",
     "@babel/node": "^7.5.5",
-    "express": "^4.17.1",
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2"
+    "express": "^4.17.1"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",

ssr-test/webpack.config.js

@@ -14,13 +14,24 @@ module.exports = {
         test: /\.js$/,
         use: 'babel-loader',
         exclude: /node_modules/,
+      }, {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+          },
+        ],
+        exclude: /node_modules/,
       }
     ],
   },
   devtool: 'cheap-module-eval-source-map',
   resolve: {
     extensions: [ '.js' ],
-    modules: [path.join(__dirname, 'node_modules')],
+    modules: [path.join(__dirname, 'node_modules'), path.join(__dirname, '../node_modules')],
   },
   plugins: [
     new webpack.DefinePlugin({

webpack.config.common.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const Config = require('webpack-chain');
 const autoprefixer = require('autoprefixer');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const DEFAULT_BROWSERS = [
   '>1%',
@@ -54,8 +55,8 @@ config.module
 config.module
   .rule('less')
     .test(/\.less/)
-    .use('style-loader')
-      .loader('style-loader')
+    .use('MiniCssExtractPlugin.loader')
+      .loader(MiniCssExtractPlugin.loader)
       .end()
     .use('css-loader')
       .loader('css-loader')
@@ -132,4 +133,7 @@ config.resolve
   .end()
   .modules.add(path.join(__dirname, 'node_modules'));
 
+config.plugin('MiniCssExtractPlugin')
+  .use(MiniCssExtractPlugin)
+
 module.exports = config;

webpack.config.prop.js

@@ -11,6 +11,7 @@ if (fs.existsSync(distPath)) {
 config.output.merge({
   library: 'react-viewer',
   libraryTarget: 'umd',
+  globalObject: 'this'
 });
 
 config.mode('production');