#2 Initial TODO List

- create js bundle to use as lib (need to exclude vega and vega lite, see #6)
- create standalone html examples

.eslintignore

@@ -1,2 +1,4 @@
 build/*.js
 config/*.js
+lib/
+dist/

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules/
 dist/
+lib/
 npm-debug.log*
 test/unit/coverage
 

build/webpack.bundle.conf.js

@@ -0,0 +1,37 @@
+const webpack = require('webpack')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const base = require('./webpack.base.conf')
+const config = require('../config')
+
+// this is used only for umd browser bundle,
+// refer to .babelrc for lib configuration
+
+base.entry = {
+  'vue-vega': './src/index.js',
+}
+
+base.output = {
+  path: config.bundle.assetsRoot,
+  publicPath: config.bundle.assetsPublicPath,
+  filename: 'vue-vega.min.js',
+  libraryTarget: 'umd',
+  library: 'VueVega'
+}
+
+var webpackConfig = Object.assign({
+  devtool: '#source-map'
+}, base)
+
+webpackConfig.plugins = (webpackConfig.plugins || []).concat([
+  new webpack.DefinePlugin({
+    'process.env': {
+      NODE_ENV: '"production"'
+    }
+  }),
+  new webpack.optimize.UglifyJsPlugin({
+    compress: { warnings: false },
+    sourceMap: true
+  })
+])
+
+module.exports = webpackConfig

config/index.js

@@ -21,6 +21,11 @@ module.exports = {
     // Set to `true` or `false` to always turn it on or off
     bundleAnalyzerReport: process.env.npm_config_report
   },
+  bundle: {
+    env: require('./prod.env'),
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsPublicPath: '/'
+  },
   dev: {
     env: require('./dev.env'),
     port: 8080,

package.json

@@ -7,6 +7,8 @@
   "scripts": {
     "dev": "node build/dev-server.js",
     "start": "node build/dev-server.js",
+    "bundle:web": "rm -rf dist && BUILD=web webpack --config build/webpack.bundle.conf.js",
+    "bundle:lib": "rm -rf lib && BUILD=lib babel src --out-dir lib",
     "build": "node build/build.js",
     "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
     "test": "npm run unit",
@@ -19,6 +21,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",
+    "babel-cli": "^6.18.0",
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.10",
@@ -63,7 +66,7 @@
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "ora": "^1.2.0",
     "phantomjs-prebuilt": "^2.1.14",
-    "rimraf": "^2.6.0",
+    "rimraf": "^2.6.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "sinon": "^2.1.0",

src/components/BarChart.vue

@@ -1,22 +1,22 @@
 <script>
-export default {
+  export default {
 
-  data () {
-    return {
-      values: [
-        {a: 'A', b: 28}, {a: 'B', b: 55}, {a: 'C', b: 43},
-        {a: 'D', b: 91}, {a: 'E', b: 81}, {a: 'F', b: 53},
-        {a: 'G', b: 19}, {a: 'H', b: 87}, {a: 'I', b: 52}
-      ]
-    }
-  },
+    data () {
+      return {
+        values: [
+          {a: 'A', b: 28}, {a: 'B', b: 55}, {a: 'C', b: 43},
+          {a: 'D', b: 91}, {a: 'E', b: 81}, {a: 'F', b: 53},
+          {a: 'G', b: 19}, {a: 'H', b: 87}, {a: 'I', b: 52}
+        ]
+      }
+    },
 
-  mark: 'bar',
+    mark: 'bar',
 
-  encoding: {
-    x: {field: 'a', type: 'ordinal'},
-    y: {field: 'b', type: 'quantitative'}
+    encoding: {
+      x: {field: 'a', type: 'ordinal'},
+      y: {field: 'b', type: 'quantitative'}
+    }
   }
-}
 </script>
 

src/index.js

@@ -1,17 +1,29 @@
-import * as vega from 'vega';
-import * as vl from 'vega-lite';
-import createVegaLiteMixin from 'src/mixin/createVegaLiteMixin';
+import { parse, View, Warn } from 'vega'
+import { compile } from 'vega-lite'
+import createVegaLiteMixin from 'src/mixin/createVegaLiteMixin'
+import isVegaOptions from 'src/util/isVegaLiteOptions'
 
 const VueVegaPlugin = {
   install (Vue) {
     const vegaLiteMixin = createVegaLiteMixin({
-      compile: vl.compile,
-      parse: vega.parse,
-      View: vega.View,
-      logLevel: vega.Debug
+      compile: compile,
+      parse: parse,
+      View: View,
+      logLevel: Warn
     })
 
     Vue.mixin(vegaLiteMixin)
+
+    let originalExtend = Vue.extend
+    Vue.extend = function (options) {
+      if (isVegaOptions(options)) {
+        if (!options.template && !options.el) {
+          options.template = '<div></div>'
+        }
+      }
+
+      return originalExtend.apply(this, arguments)
+    }
   }
 }
 

src/mixin/createVegaLiteMixin.js

@@ -7,8 +7,6 @@ const SPEC_TEMPLATE = {
 export default (options) => {
   return {
 
-    template: `<div></div>`,
-
     props: {
       description: {
         type: String

test/unit/index.js

@@ -4,8 +4,6 @@ import chai from 'chai'
 Vue.config.productionTip = false
 chai.config.truncateThreshold = 0
 
-console.log(chai.config)
-
 // require all test files (files that ends with .spec.js)
 const testsContext = require.context('./specs', true, /\.spec$/)
 testsContext.keys().forEach(testsContext)

test/web/browser-bar-chart.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Trivial Bar Chart</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
+  <script src="../../dist/vue-vega.min.js"></script>
+</head>
+<body>
+<div id='app'>
+  <bar-chart description='A simple bar chart'></bar-chart>
+</div>
+<script>
+  /* global Vue */
+  Vue.use(window.VueVega.default)
+
+  Vue.component('bar-chart', {
+    data () {
+      return {
+        values: [
+          {a: 'A', b: 28}, {a: 'B', b: 55}, {a: 'C', b: 43},
+          {a: 'D', b: 91}, {a: 'E', b: 81}, {a: 'F', b: 53},
+          {a: 'G', b: 19}, {a: 'H', b: 87}, {a: 'I', b: 52}
+        ]
+      }
+    },
+    mark: 'bar',
+    encoding: {
+      x: {field: 'a', type: 'ordinal'},
+      y: {field: 'b', type: 'quantitative'}
+    }
+  })
+
+  new Vue({ // eslint-disable-line no-new
+    el: '#app'
+  })
+</script>
+</body>
+</html>

test/web/browser-data-update.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Spec inside instance</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
+  <script src="../../dist/vue-vega.min.js"></script>
+</head>
+<body>
+<div id='visualization'></div>
+<script>
+  /* global Vue */
+  Vue.use(window.VueVega.default)
+
+  new Vue({ // eslint-disable-line no-new
+    el: '#visualization',
+    data: {
+      values: [
+        {a: 'A', b: 28}, {a: 'B', b: 55}, {a: 'C', b: 43},
+        {a: 'D', b: 91}, {a: 'E', b: 81}, {a: 'F', b: 53},
+        {a: 'G', b: 19}, {a: 'H', b: 87}, {a: 'I', b: 52}
+      ]
+    },
+    mark: 'line',
+    encoding: {
+      x: {field: 'a', type: 'ordinal'},
+      y: {field: 'b', type: 'quantitative'}
+    }
+  })
+
+</script>
+</body>
+</html>