Merge pull request #36 from euvl/ssr-fix-2-outputs

SSR fix

.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": ["es2015", "stage-2"],
+  "presets": ["env"],
   "comments": false
 }

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
 node_modules/
 npm-debug.log
+package-lock.json
 *.map

README.md

@@ -18,7 +18,7 @@ npm install vue-js-modal --save
 
 ### How to use
 
-Include plugin in your main.js file.
+Include plugin in your `main.js` file.
 
 ```javascript
 import vmodal from 'vue-js-modal'
@@ -26,13 +26,15 @@ import vmodal from 'vue-js-modal'
 Vue.use(vmodal)
 ```
 
-Create modal
+Create modal:
+
 ```html
 <modal name="hello-world">
   hello, world!
 </modal>
 ```
-Call it from anywhere in the app
+Call it from anywhere in the app:
+
 ```javascript
 methods: {
   show () {
@@ -44,6 +46,27 @@ methods: {
 }
 ```
 
+### SSR
+
+Include plugin in your `nuxt.config.js` file:
+
+```javascript
+module.exports = {
+  plugins: ['~plugins/vue-js-modal']
+}
+```
+
+And your `plugins/vue-js-modal.js` will look like:
+
+```javascript
+import Vue from 'vue'
+import VModal from 'vue-js-modal/dist/ssr.index'
+
+Vue.use(VModal)
+```
+
+For full demo please look at `demo/server_side_rendering`
+
 ### Properties
 
 | Name      | Required | Type          | Default     | Description |
@@ -60,7 +83,7 @@ methods: {
 | minWidth  | false | Number           | 0           | The minimum width to which modal can be resized  |
 | minHeight | false | Number           | 0           | The minimum height to which modal can be resized |
 | pivotX    | false | Number (0 - 1.0) | 0.5         | Horizontal position in %, default is 0.5 (meaning that modal box will be in the middle (50% from top) of the window |
-| pivotY    | false | Number (0 - 1.0) | 0.5         | | 
+| pivotY    | false | Number (0 - 1.0) | 0.5         | |
 
 ### Events
 
@@ -109,7 +132,7 @@ export default {
 </script>
 ```
 
-This example, initializes `time` variable every time the modal is being opened. 
+This example, initializes `time` variable every time the modal is being opened.
 And then forbits closing it for the next 5000 ms
 
 ### Other
@@ -122,15 +145,15 @@ Example:
 ```vue
 <template>
   <modal name="foo">
-  
+
     <div slot="top-right">
       <button @click="$modal.hide('foo')">
         ❌
       </button>
-    </div> 
-   
+    </div>
+
     Hello, ☀️!
- 
+
   </modal>
 </template>
 ```
@@ -138,7 +161,7 @@ Example:
 
 #### Draggable handler
 
-Draggable property can accept not only `Boolean` but also `String` paramenters. With `String` value, you can specify a CSS selector to the element which will be a "handler" for dragging. 
+Draggable property can accept not only `Boolean` but also `String` paramenters. With `String` value, you can specify a CSS selector to the element which will be a "handler" for dragging.
 
 Example:
 
@@ -156,7 +179,7 @@ Example:
 
 To run an example:
 ```sh
-# Clone repo 
+# Clone repo
 
 git clone https://github.com/euvl/vue-js-modal.git
 
@@ -172,5 +195,3 @@ cd demo
 npm install
 npm run dev
 ```
-
-

build/webpack.base.config.js

@@ -0,0 +1,40 @@
+const path = require('path')
+const webpack = require('webpack')
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+
+//  "build:client": "cross-env NODE_ENV=production webpack --config ./build/webpack.client.config.js --progress --hide-modules",
+
+module.exports = {
+  entry: path.resolve(__dirname, '../src/index.js'),
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    publicPath: '/dist/',
+    library:'VueJsModal',
+    libraryTarget: 'commonjs2'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      }
+    ]
+  },
+  externals: {
+    vue: 'vue'
+  },
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js'
+    }
+  },
+  devtool: '#source-map',
+  plugins: [
+  //  new UglifyJSPlugin()
+  ]
+}

build/webpack.client.config.js

@@ -0,0 +1,10 @@
+const path = require('path')
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const base = require('./webpack.base.config')
+
+module.exports = merge(base, {
+  output: {
+    filename: 'index.js'
+  }
+})

build/webpack.server.config.js

@@ -0,0 +1,11 @@
+const path = require('path')
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const base = require('./webpack.base.config')
+
+module.exports = merge(base, {
+  target: 'node',
+  output: {
+    filename: 'ssr.index.js'
+  }
+})

demo/client_side_rendering/webpack.config.js

@@ -37,7 +37,7 @@ module.exports = {
   resolve: {
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
-		  'plugin': path.resolve(__dirname, "../dist/index.js")
+		  'plugin': path.resolve(__dirname, "../../dist/index.js")
     }
   },
   devServer: {

demo/server_side_rendering/.gitignore

@@ -0,0 +1 @@
+.nuxt

demo/server_side_rendering/nuxt.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ['~plugins/vue-js-modal']
+}

demo/server_side_rendering/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "nuxt-hello",
+  "scripts": {
+    "start": "nuxt"
+  },
+  "dependencies": {
+    "vue-js-modal": "github:euvl/vue-js-modal#dcf3291623d9fe54bcbf0ca48c0ed35865b8871a",
+    "nuxt": "^1.0.0-alpha.4"
+  }
+}

demo/server_side_rendering/pages/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <modal name="foo">bar</modal>
+    <button @click="$modal.show('foo')">
+      Open modal
+    </button>
+    <p>Hi from {{ name }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData ({ req }) {
+    return {
+      name: req ? 'server' : 'client'
+    }
+  }
+}
+</script>

demo/server_side_rendering/plugins/vue-js-modal.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VModal from 'vue-js-modal/dist/ssr.index'
+
+Vue.use(VModal)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-js-modal",
   "description": "Modal Component for Vue.js",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "author": "euvl <yev.vlasenko@gmail.com>",
   "main": "dist/index.js",
   "repository": {
@@ -18,27 +18,28 @@
     "url": "https://github.com/euvl/vue-js-modal/issues"
   },
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "build:client": "webpack --config ./build/webpack.client.config.js --progress --hide-modules",
+    "build:server": "webpack --config ./build/webpack.server.config.js --progress --hide-modules"
   },
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^6.0.0",
-    "babel-loader": "^6.2.10",
-    "babel-preset-es2015": "^6.0.0",
-    "babel-preset-latest": "^6.0.0",
-    "babel-preset-stage-2": "^6.24.1",
+    "babel-core": "^6.25.0",
+    "babel-loader": "latest",
+    "babel-preset-env": "^1.5.2",
     "cross-env": "^3.0.0",
     "css-loader": "^0.25.0",
     "file-loader": "^0.9.0",
     "node-sass": "^4.5.0",
     "sass-loader": "^5.0.1",
+    "uglifyjs-webpack-plugin": "^0.4.6",
     "vue": "^2.2.6",
     "vue-hot-reload-api": "^2.0.8",
     "vue-loader": "^10.0.0",
     "vue-style-loader": "^2.0.0",
     "vue-template-compiler": "^2.1.0",
     "webpack": "^2.2.0",
-    "webpack-dev-server": "^2.2.0"
+    "webpack-dev-server": "^2.2.0",
+    "webpack-merge": "^4.1.0"
   },
   "peerDependencies": {
     "vue": "^2.2.6"

src/Modal.vue

@@ -149,8 +149,8 @@
         },
 
         window: {
-          width: window.innerWidth,
-          height: window.innerWidth
+          width: 0,
+          height: 0
         },
 
         draggableElement: false
@@ -180,7 +180,7 @@
         }
       }
     },
-    created () {
+    beforeMount () {
       Modal.event.$on('toggle', (name, state, params) => {
         if (name === this.name) {
           if (typeof state === 'undefined') {
@@ -192,13 +192,11 @@
       });
 
       window.addEventListener('resize', this.onWindowResize)
+      this.onWindowResize()
     },
     beforeDestroy () {
       window.removeEventListener('resize', this.onWindowResize)
     },
-    beforeMount () {
-      this.onWindowResize()
-    },
     computed: {
       position () {
         const { window, modal, shift } = this
@@ -375,7 +373,7 @@
     }
   };
 </script>
-<style scoped>
+<style>
   .v--modal-overlay {
     position: fixed;
     left: 0;

webpack.config.js

@@ -1,65 +0,0 @@
-var path = require('path')
-var webpack = require('webpack')
-
-module.exports = {
-  entry: './src/index.js',
-  output: {
-    path: path.resolve(__dirname, './dist'),
-    publicPath: '/dist/',
-    filename: 'index.js',
-    library:'VueJsModal',
-    libraryTarget: 'umd'
-  },
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          loaders: {
-            'scss': 'vue-style-loader!css-loader!sass-loader',
-            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
-          }
-        }
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/
-      },
-      {
-        test: /\.(png|jpg|gif|svg)$/,
-        loader: 'file-loader',
-        options: {
-          name: '[name].[ext]?[hash]'
-        }
-      }
-    ]
-  },
-  externals: {
-    vue: 'vue'
-  },
-  resolve: {
-    alias: {
-      'vue$': 'vue/dist/vue.esm.js'
-    }
-  },
-  devServer: {
-    historyApiFallback: true,
-    noInfo: true
-  },
-  performance: {
-    hints: false
-  },
-  devtool: '#source-map',
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
-  ]
-}