Prepared and published to npm

Author: rcarcasses

build/webpack.prod.conf.js

@@ -14,115 +14,55 @@ const env = process.env.NODE_ENV === 'testing'
   ? require('../config/test.env')
   : config.build.env
 
-const webpackConfig = merge(baseWebpackConfig, {
-  module: {
-    rules: utils.styleLoaders({
-      sourceMap: config.build.productionSourceMap,
-      extract: true
-    })
-  },
-  devtool: config.build.productionSourceMap ? '#source-map' : false,
-  output: {
-    path: config.build.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
-  },
-  plugins: [
-    // http://vuejs.github.io/vue-loader/en/workflow/production.html
-    new webpack.DefinePlugin({
-      'process.env': env
+const webpackConfig = [
+  merge(baseWebpackConfig, {
+    entry: path.resolve(__dirname + '/../src/App.vue'),
+    output: {
+      filename: 'vue-dots.js',
+      libraryTarget: 'umd',
+      library: 'vue-dots',
+      umdNamedDefine: true
+    },
+    plugins: [
+      new webpack.optimize.UglifyJsPlugin( {
+        minimize : true,
+        sourceMap : false,
+        mangle: true,
+        compress: {
+          warnings: false
+        }
+      }),
+      // extract css into its own file
+      new ExtractTextPlugin({
+        filename: utils.assetsPath('../vue-dots.css')
+      })
+    ]
+  }),
+  merge(baseWebpackConfig, {
+    entry: path.resolve(__dirname + '/../src/plugin.js'),
+    output: {
+      filename: 'vue-dots.min.js',
+      libraryTarget: 'window',
+      library: 'VueDots'
+    },
+    externals: {
+      vue: 'vue'
+    },
+    plugins: [
+      new webpack.optimize.UglifyJsPlugin( {
+        minimize : true,
+        sourceMap : false,
+        mangle: true,
+        compress: {
+          warnings: false
+        }
     }),
-    // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      },
-      sourceMap: true
-    }),
-    // extract css into its own file
-    new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css')
-    }),
-    // Compress extracted CSS. We are using this plugin so that possible
-    // duplicated CSS from different components can be deduped.
-    new OptimizeCSSPlugin({
-      cssProcessorOptions: {
-        safe: true
-      }
-    }),
-    // generate dist index.html with correct asset hash for caching.
-    // you can customize output by editing /index.html
-    // see https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: process.env.NODE_ENV === 'testing'
-        ? 'index.html'
-        : config.build.index,
-      template: 'index.html',
-      inject: true,
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeAttributeQuotes: true
-        // more options:
-        // https://github.com/kangax/html-minifier#options-quick-reference
-      },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
-    }),
-    // keep module.id stable when vender modules does not change
-    new webpack.HashedModuleIdsPlugin(),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: function (module) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
-            path.join(__dirname, '../node_modules')
-          ) === 0
-        )
-      }
-    }),
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      chunks: ['vendor']
-    }),
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../static'),
-        to: config.build.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ])
-  ]
-})
-
-if (config.build.productionGzip) {
-  const CompressionWebpackPlugin = require('compression-webpack-plugin')
-
-  webpackConfig.plugins.push(
-    new CompressionWebpackPlugin({
-      asset: '[path].gz[query]',
-      algorithm: 'gzip',
-      test: new RegExp(
-        '\\.(' +
-        config.build.productionGzipExtensions.join('|') +
-        ')$'
-      ),
-      threshold: 10240,
-      minRatio: 0.8
-    })
-  )
-}
-
-if (config.build.bundleAnalyzerReport) {
-  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
-}
+      // extract css into its own file
+      new ExtractTextPlugin({
+        filename: utils.assetsPath('../vue-dots.css')
+      })
+    ]
+  })
+]
 
 module.exports = webpackConfig

package.json

@@ -1,9 +1,9 @@
 {
   "name": "vue-dots",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Show dots and connections among them",
-  "author": "Yuselis Castano <ycastano87@gmail.com>",
-  "private": true,
+  "author": "Robert Carcasses Quevedo <carcasses@gmail.com>",
+  "license": "MIT",
   "scripts": {
     "dev": "node build/dev-server.js",
     "start": "npm run dev",
@@ -12,6 +12,19 @@
     "test": "npm run unit",
     "lint": "eslint --ext .js,.vue src test/unit/specs"
   },
+  "homepage": "https://github.com/rcarcasses/vue-dots",
+  "bugs": "https://github.com/rcarcasses/vue-dots/issues",
+  "repository": {
+    "url": "https://github.com/rcarcasses/vue-dots",
+    "type": "git"
+  },
+  "contributors": [
+    "Yuselis Castano Guerrero <[email protected]>"
+  ],
+  "files": [
+    "dist/**/*"
+  ],
+  "main": "dist/vue-dots.js",
   "dependencies": {
     "vue": "^2.4.2"
   },

src/App.vue

@@ -1,14 +1,20 @@
 <template>
   <div id="app">
-    <svg-dots/>
+    <svg-dots :store="store"/>
   </div>
 </template>
 
 <script>
 import SVGDots from './components/SVGDots'
+import {store} from './components/store'
 
 export default {
   name: 'app',
+  data () {
+    return {
+      store
+    }
+  },
   components: {
     'svg-dots': SVGDots
   }

src/components/SVGDots.vue

@@ -38,9 +38,10 @@ import ZoomOut from './icons/ZoomOut'
 import Delete from './icons/Delete'
 import Move from './icons/Move'
 import BuildPath from './icons/BuildPath'
-import {BUILD, MOVE, DELETE, store} from './store'
+import {BUILD, MOVE, DELETE} from './store'
 
 export default {
+  props: ['store'],
   components: {
     ZoomIn,
     ZoomOut,
@@ -65,8 +66,8 @@ export default {
       beingDragId: -1,      // who is being dragged
       isDragging: false,    // says if we are currently dragging something
       isEditing: true,
-      state: store.state,
-      actions: store.actions
+      state: this.store.state,
+      actions: this.store.actions
     }
   },
   methods: {

src/components/store.js

@@ -17,7 +17,8 @@ const state = {
 }
 
 function getNewNodeId () {
-  return state.lastId++
+  const newId = state.lastId += 1
+  return newId
 }
 
 function createNode (x, y) {

src/plugin.js

@@ -0,0 +1,7 @@
+import VueDots from './App.vue'
+
+module.exports = {
+  install: function (Vue, options) {
+    Vue.component('vue-dots', VueDots)
+  }
+}

webpack.lib.conf.js

@@ -0,0 +1,57 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const path = require('path');
+
+var config = {
+  output: {
+    path: path.resolve(__dirname + '/lib/'),
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        loader: 'babel',
+        include: __dirname,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+      {
+        test: /\.css$/,
+        loader: 'style!less!css'
+      }
+    ]
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin( {
+      minimize : true,
+      sourceMap : false,
+      mangle: true,
+      compress: {
+        warnings: false
+      }
+    })
+  ]
+};
+
+module.exports = [
+  merge(config, {
+    entry: path.resolve(__dirname + '/src/plugin.js'),
+    output: {
+      filename: 'vue-dots.min.js',
+      libraryTarget: 'window',
+      library: 'VueDots',
+    }
+  }),
+  merge(config, {
+    entry: path.resolve(__dirname + '/src/App.vue'),
+    output: {
+      filename: 'vue-dots.js',
+      libraryTarget: 'umd',
+      library: 'vue-dots',
+      umdNamedDefine: true
+    }
+  })
+];