add ssr support

.gitignore

@@ -1,7 +1,8 @@
 .DS_Store
 node_modules/
 dist/
-lib/
+client/
+ssr/
 npm-debug.log
 yarn-error.log
 .npmignore

README.md

@@ -9,7 +9,7 @@
 
 # vue-element-loading
 
-⏳ Loading inside a container or full screen for Vue.js
+⏳ Loading inside a container or full screen for Vue.js SSR support
 
 # 👀 Document & Demo Page
 
@@ -61,6 +61,18 @@ export default {
 };
 ```
 
+# 🕹 SSR Usage
+```javascript
+import VueElementLoading from "vue-element-loading/ssr";
+import "vue-element-loading/ssr/index.css";
+
+export default {
+  components: {
+    VueElementLoading
+  }
+};
+```
+
 # 🔎 Example
 
 ## Inside container

example/App.vue

@@ -116,8 +116,7 @@
 </template>
 
 <script>
-// import VueElementLoading from '../src'
-import VueElementLoading from '../lib/vue-element-loading.min.js'
+import VueElementLoading from '../client/vue-element-loading'
 
 export default {
   name: 'app',

package.json

@@ -1,26 +1,24 @@
 {
   "name": "vue-element-loading",
-  "description": "Loading inside a container or full screen for Vue.js",
-  "version": "2.0.2",
+  "description": "Loading inside a container or full screen for Vue.js SSR support",
+  "version": "2.0.3",
   "author": "biig_pongsatorn <[email protected]>",
   "license": "MIT",
-  "main": "lib/vue-element-loading.min.js",
+  "main": "client/vue-element-loading.min.js",
   "files": [
-    "lib"
+    "client",
+    "ssr"
   ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/biigpongsatorn/vue-element-loading.git"
   },
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --mode development --open --hot",
-    "build:lib": "rm -rf ./lib && bili src/index.vue",
+    "build:lib": "rollup --environment NODE_ENV:production -c rollup.config.js",
     "build:example": "rm -rf ./dist && cross-env NODE_ENV=production webpack --mode production --progress --hide-modules",
     "prepublish": "npm run build:lib"
   },
-  "dependencies": {
-    "vue": "^2.5.22"
-  },
   "browserslist": [
     "> 1%",
     "last 2 versions",
@@ -30,12 +28,16 @@
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.2.3",
     "babel-loader": "^8.0.5",
-    "bili": "^3.4.2",
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.0",
     "file-loader": "^3.0.1",
-    "rollup-plugin-vue": "^4.6.1",
-    "uglifyjs-webpack-plugin": "^2.1.1",
+    "rollup": "^0.67.0",
+    "rollup-plugin-css-only": "0.4.0",
+    "rollup-plugin-uglify": "^6.0.4",
+    "rollup-plugin-vue": "^5.1.9",
+    "uglify-es": "^3.3.9",
+    "uglifyjs-webpack-plugin": "^1.1.2",
+    "vue": "^2.5.22",
     "vue-loader": "^15.5.1",
     "vue-template-compiler": "^2.5.22",
     "webpack": "^4.28.4",

rollup.config.js

@@ -0,0 +1,23 @@
+const VuePlugin = require('rollup-plugin-vue');
+const css = require('rollup-plugin-css-only');
+const {uglify} = require('rollup-plugin-uglify');
+
+module.exports = function() {
+  return [
+    {
+      entry: 'src/index.js',
+      dest: 'ssr/index.js',
+      format: 'umd',
+      moduleName: 'VueElementLoading',
+      plugins: [css(), VuePlugin({css: false}), uglify()],
+    },
+    {
+      entry: 'src/index.js',
+      dest: 'client/vue-element-loading.js',
+      format: 'umd',
+      moduleName: 'VueElementLoading',
+      plugins: [VuePlugin(), uglify()],
+    }
+  ];
+};
+

src/index.js

@@ -0,0 +1,16 @@
+import VueElementLoading from './index.vue';
+
+const install = function installMyComponent(Vue, opt) {
+  // Don't install if already installed, or SSR
+  if (install.installed || Vue.prototype.$isServer) return;
+  install.installed = true;
+
+  Vue.component('vue-element-loading', VueElementLoading);
+};
+
+// Inject install function into component - allows component
+// to be registered via Vue.use() as well as Vue.component()
+VueElementLoading.install = install;
+
+// To allow use as module (npm/webpack/etc.) export component
+export default VueElementLoading;

src/index.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import Loaders from './loaders'
+import Loaders from './loaders/index.js'
 
 export default {
   name: 'vue-element-loading',
@@ -95,7 +95,7 @@ export default {
       this.isActiveDelay = true
 
       setTimeout(() => {
-        this.isActiveDelay = false  
+        this.isActiveDelay = false
       }, ms)
     }
   },