💎 Release new version 2.3.2

✨ Add minimal release webpack config

CHANGELOG.md

@@ -1,8 +1,35 @@
 # Change Log
 
+## [v2.3.1](https://github.com/apertureless/vue-chartjs/tree/v2.3.1) (2016-12-20)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.0...v2.3.1)
+
+**Fixed bugs:**
+
+- Issues after using gulp-- production [\#19](https://github.com/apertureless/vue-chartjs/issues/19)
+
+**Closed issues:**
+
+- Error in rendering [\#21](https://github.com/apertureless/vue-chartjs/issues/21)
+
+**Merged pull requests:**
+
+- ✅ Add tests for chart instance destroying [\#24](https://github.com/apertureless/vue-chartjs/pull/24) ([apertureless](https://github.com/apertureless))
+- Feature/runtimebuild \#22 [\#23](https://github.com/apertureless/vue-chartjs/pull/23) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.0](https://github.com/apertureless/vue-chartjs/tree/v2.3.0) (2016-12-17)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.2.1...v2.3.0)
+
+**Closed issues:**
+
+- Uncaught TypeError: \_c is not a function  [\#20](https://github.com/apertureless/vue-chartjs/issues/20)
+
 ## [v2.2.1](https://github.com/apertureless/vue-chartjs/tree/v2.2.1) (2016-12-07)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.2.0...v2.2.1)
 
+**Fixed bugs:**
+
+- Uncaught TypeError: Cannot read property 'draw' of null [\#15](https://github.com/apertureless/vue-chartjs/issues/15)
+
 **Merged pull requests:**
 
 - Update README.md [\#16](https://github.com/apertureless/vue-chartjs/pull/16) ([Ag47](https://github.com/Ag47))

README.md

@@ -1,8 +1,12 @@
 # Vue-ChartJs
 
-[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs) ![npm dependencies](https://david-dm.org/apertureless/vue-chartjs.svg) [![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs) [![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs)
+[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs) ![npm dependencies](https://david-dm.org/apertureless/vue-chartjs.svg) [![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs) [![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs) [![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
 
-Is a vue.js wrapper for chart.js. You can easily create your chart components. [See in action](https://apertureless.github.io/vue-chartjs/)
+Is a vue.js wrapper for chart.js. You can easily create your chart components.
+
+## Demo
+
+[Demo](https://apertureless.github.io/vue-chartjs/)
 
 ### Compatibility
 

build/webpack.base.conf.js

@@ -16,7 +16,6 @@ module.exports = {
     extensions: ['', '.js', '.vue'],
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
-      'vue': 'vue/dist/vue.common.js',
       'src': path.resolve(__dirname, '../src'),
       'mixins': path.resolve(__dirname, '../src/mixins'),
       'BaseCharts': path.resolve(__dirname, '../src/BaseCharts')

build/webpack.release.js

@@ -0,0 +1,78 @@
+var vue = require('vue-loader')
+var path = require('path')
+var webpack = require("webpack")
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+var projectRoot = path.resolve(__dirname, '../')
+var cssLoader = ExtractTextPlugin.extract('style-loader', 'css-loader')
+
+module.exports = {
+  entry: {
+    'vue-chartjs': './src/index.js'
+  },
+  output: {
+    filename: './dist/[name].js',
+    library: 'VueChartJs',
+    libraryTarget: 'umd'
+  },
+  module: {
+    preLoaders: [
+      {
+        test: /\.vue$/,
+        loader: 'eslint',
+        include: projectRoot,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.js$/,
+        loader: 'eslint',
+        include: projectRoot,
+        exclude: /node_modules/
+      }
+    ],
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel'
+      },
+      {
+        test: /\.css$/,
+        loader: cssLoader
+      },
+      {
+        test: /\.s[a|c]ss$/,
+        loader: ExtractTextPlugin.extract('style-loader','css-loader!sass-loader')
+      }
+    ]
+  },
+  eslint: {
+    formatter: require('eslint-friendly-formatter')
+  },
+  babel: {
+    presets: ['es2015'],
+    plugins: ['transform-runtime']
+  }
+}
+
+if (process.env.NODE_ENV === 'production') {
+
+  delete module.exports.devtool
+  module.exports.plugins = [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.optimize.OccurenceOrderPlugin()
+    // new ExtractTextPlugin('build.css')
+  ]
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-chartjs",
-  "version": "2.2.1",
+  "version": "2.3.2",
-  "description": "Vue wrapper for chart.js",
+  "description": "vue.js wrapper for chart.js",
   "author": "Jakub Juszczak <jakub@nextindex.de>",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
-    "prepublish": "node build/build.js"
+    "release": "webpack --progress --hide-modules --config  ./build/webpack.release.js"
   },
   "dependencies": {
     "babel-runtime": "^6.11.6",
@@ -82,6 +82,7 @@
     "vue-html-loader": "^1.2.3",
     "vue-loader": "^10.0.2",
     "vue-style-loader": "^1.0.0",
+    "vue-template-compiler": "^2.1.6",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.4.0",
     "webpack-hot-middleware": "^2.6.0",

src/BaseCharts/Bar.js

@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
+  render: function (createElement) {
-    <div>
+    return createElement(
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
+      'div',
-    </div>
+      [
-  `,
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {
@@ -51,7 +63,6 @@ export default Vue.extend({
   methods: {
     renderChart (data, options, type) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
-
       this._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: type || 'bar',

src/BaseCharts/Bubble.js

@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
+  render: function (createElement) {
-    <div>
+    return createElement(
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
+      'div',
-    </div>
+      [
-  `,
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {

src/BaseCharts/Doughnut.js

@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
+  render: function (createElement) {
-    <div>
+    return createElement(
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
+      'div',
-    </div>
+      [
-  `,
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {

src/BaseCharts/Line.js

@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
+  render: function (createElement) {
-    <div>
+    return createElement(
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
+      'div',
-    </div>
+      [
-  `,
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {

src/BaseCharts/Pie.js

@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
+  render: function (createElement) {
-    <div>
+    return createElement(
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
+      'div',
-    </div>
+      [
-  `,
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {

src/BaseCharts/PolarArea.js

@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
+  render: function (createElement) {
-    <div>
+    return createElement(
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
+      'div',
-    </div>
+      [
-  `,
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {

src/BaseCharts/Radar.js

@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
+  render: function (createElement) {
-    <div>
+    return createElement(
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
+      'div',
-    </div>
+      [
-  `,
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {

test/unit/specs/Bar.spec.js

@@ -10,7 +10,11 @@ describe('BarChart', () => {
 
   it('should render a canvas', () => {
     const vm = new Vue({
-      template: '<bar-chart></bar-chart>',
+      render: function (createElement) {
+        return createElement(
+          BarChart
+        )
+      },
       components: { BarChart }
     }).$mount(el)
 
@@ -22,10 +26,39 @@ describe('BarChart', () => {
 
   it('should change id based on prop', () => {
     const vm = new Vue({
-      template: '<bar-chart chartId="barchartprop"></bar-chart>',
+      render: function (createElement) {
+        return createElement(
+          BarChart, {
+            props: {
+              chartId: 'barchartprop'
+            }
+          }
+        )
+      },
       components: { BarChart }
     }).$mount(el)
 
     expect(vm.$el.querySelector('#barchartprop')).not.to.be.an('undefined')
   })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BarChart
+        )
+      },
+      components: { BarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
 })

test/unit/specs/Bubble.spec.js

@@ -10,7 +10,11 @@ describe('BubbleChart', () => {
 
   it('should render a canvas', () => {
     const vm = new Vue({
-      template: '<bubble-chart></bubble-chart>',
+      render: function (createElement) {
+        return createElement(
+          BubbleChart
+        )
+      },
       components: { BubbleChart }
     }).$mount(el)
 
@@ -22,10 +26,39 @@ describe('BubbleChart', () => {
 
   it('should change id based on prop', () => {
     const vm = new Vue({
-      template: '<bubble-chart chartId="bubblechartprop"></bubble-chart>',
+      render: function (createElement) {
+        return createElement(
+          BubbleChart, {
+            props: {
+              chartId: 'bubblechartprop'
+            }
+          }
+        )
+      },
       components: { BubbleChart }
     }).$mount(el)
 
     expect(vm.$el.querySelector('#bubblechartprop')).not.to.be.an('undefined')
   })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BubbleChart
+        )
+      },
+      components: { BubbleChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
 })

test/unit/specs/Doughnut.spec.js

@@ -10,7 +10,11 @@ describe('DoughnutChart', () => {
 
   it('should render a canvas', () => {
     const vm = new Vue({
-      template: '<doughnut-chart></doughnut-chart>',
+      render: function (createElement) {
+        return createElement(
+          DoughnutChart
+        )
+      },
       components: { DoughnutChart }
     }).$mount(el)
 
@@ -22,10 +26,39 @@ describe('DoughnutChart', () => {
 
   it('should change id based on prop', () => {
     const vm = new Vue({
-      template: '<doughnut-chart chartId="doughnutchartprop"></doughnut-chart>',
+      render: function (createElement) {
+        return createElement(
+          DoughnutChart, {
+            props: {
+              chartId: 'doughnutchartprop'
+            }
+          }
+        )
+      },
       components: { DoughnutChart }
     }).$mount(el)
 
     expect(vm.$el.querySelector('#doughnutchartprop')).not.to.be.an('undefined')
   })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          DoughnutChart
+        )
+      },
+      components: { DoughnutChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
 })

test/unit/specs/Line.spec.js

@@ -10,7 +10,11 @@ describe('LineChart', () => {
 
   it('should render a canvas', () => {
     const vm = new Vue({
-      template: '<line-chart></line-chart>',
+      render: function (createElement) {
+        return createElement(
+          LineChart
+        )
+      },
       components: { LineChart }
     }).$mount(el)
 
@@ -22,10 +26,39 @@ describe('LineChart', () => {
 
   it('should change id based on prop', () => {
     const vm = new Vue({
-      template: '<line-chart chartId="linechartprop"></line-chart>',
+      render: function (createElement) {
+        return createElement(
+          LineChart, {
+            props: {
+              chartId: 'linechartprop'
+            }
+          }
+        )
+      },
       components: { LineChart }
     }).$mount(el)
 
     expect(vm.$el.querySelector('#linechartprop')).not.to.be.an('undefined')
   })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          LineChart
+        )
+      },
+      components: { LineChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
 })

test/unit/specs/Pie.spec.js

@@ -10,7 +10,11 @@ describe('PieChart', () => {
 
   it('should render a canvas', () => {
     const vm = new Vue({
-      template: '<pie-chart></pie-chart>',
+      render: function (createElement) {
+        return createElement(
+          PieChart
+        )
+      },
       components: { PieChart }
     }).$mount(el)
 
@@ -22,10 +26,38 @@ describe('PieChart', () => {
 
   it('should change id based on prop', () => {
     const vm = new Vue({
-      template: '<pie-chart chartId="piechartprop"></pie-chart>',
+      render: function (createElement) {
+        return createElement(
+          PieChart, {
+            props: {
+              chartId: 'piechartprop'
+            }
+          }
+        )
+      },
       components: { PieChart }
     }).$mount(el)
 
     expect(vm.$el.querySelector('#piechartprop')).not.to.be.an('undefined')
   })
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PieChart
+        )
+      },
+      components: { PieChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
 })

test/unit/specs/PolarArea.spec.js

@@ -10,7 +10,11 @@ describe('PolarChart', () => {
 
   it('should render a canvas', () => {
     const vm = new Vue({
-      template: '<polar-chart></polar-chart>',
+      render: function (createElement) {
+        return createElement(
+          PolarChart
+        )
+      },
       components: { PolarChart }
     }).$mount(el)
 
@@ -22,10 +26,39 @@ describe('PolarChart', () => {
 
   it('should change id based on prop', () => {
     const vm = new Vue({
-      template: '<polar-chart chartId="polarchartprop"></polar-chart>',
+      render: function (createElement) {
+        return createElement(
+          PolarChart, {
+            props: {
+              chartId: 'polarchartprop'
+            }
+          }
+        )
+      },
       components: { PolarChart }
     }).$mount(el)
 
     expect(vm.$el.querySelector('#polarchartprop')).not.to.be.an('undefined')
   })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PolarChart
+        )
+      },
+      components: { PolarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
 })

test/unit/specs/Radar.spec.js

@@ -10,7 +10,11 @@ describe('RadarChart', () => {
 
   it('should render a canvas', () => {
     const vm = new Vue({
-      template: '<radar-chart></radar-chart>',
+      render: function (createElement) {
+        return createElement(
+          RadarChart
+        )
+      },
       components: { RadarChart }
     }).$mount(el)
 
@@ -22,10 +26,38 @@ describe('RadarChart', () => {
 
   it('should change id based on prop', () => {
     const vm = new Vue({
-      template: '<radar-chart chartId="rodarchartprop"></radar-chart>',
+      render: function (createElement) {
+        return createElement(
+          RadarChart, {
+            props: {
+              chartId: 'rodarchartprop'
+            }
+          }
+        )
+      },
       components: { RadarChart }
     }).$mount(el)
 
     expect(vm.$el.querySelector('#rodarchartprop')).not.to.be.an('undefined')
   })
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          RadarChart
+        )
+      },
+      components: { RadarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
 })

yarn.lock

@@ -1535,6 +1535,10 @@ dateformat@^1.0.6:
     get-stdin "^4.0.1"
     meow "^3.3.0"
 
+de-indent@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+
 debug@0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-0.7.4.tgz#06e1ea8082c2cb14e39806e22e2f6f757f92af39"
@@ -2527,7 +2531,7 @@ hawk@~3.1.3:
     hoek "2.x.x"
     sntp "1.x.x"
 
-he@1.1.x:
+he@1.1.x, he@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.0.tgz#29319d49beec13a9b1f3c4f9b2a6dde4859bb2a7"
 
@@ -5501,6 +5505,13 @@ vue-style-loader@^1.0.0:
   dependencies:
     loader-utils "^0.2.7"
 
+vue-template-compiler@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.1.6.tgz#f96f968652fc1e861bb0052f61993ba1fdc18ad3"
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.1.0"
+
 vue-template-es2015-compiler@^1.2.2:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.4.0.tgz#7b88853ca4bf8d84ae54ab9e56771de271e60198"