Merge pull request #23 from apertureless/feature/runtimebuild

apertureless · web-flow · commit 52c1c5020690 · 2016-12-20T19:07:45.000+01:00
Feature/runtimebuild #22
diff --git a/build/webpack.base.conf.js b/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')
diff --git a/package.json b/package.json
@@ -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",
diff --git a/src/BaseCharts/Bar.js b/src/BaseCharts/Bar.js
@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      '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',
diff --git a/src/BaseCharts/Bubble.js b/src/BaseCharts/Bubble.js
@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {
diff --git a/src/BaseCharts/Doughnut.js b/src/BaseCharts/Doughnut.js
@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {
diff --git a/src/BaseCharts/Line.js b/src/BaseCharts/Line.js
@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {
diff --git a/src/BaseCharts/Pie.js b/src/BaseCharts/Pie.js
@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {
diff --git a/src/BaseCharts/PolarArea.js b/src/BaseCharts/PolarArea.js
@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {
diff --git a/src/BaseCharts/Radar.js b/src/BaseCharts/Radar.js
@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {
diff --git a/test/unit/specs/Bar.spec.js b/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,7 +26,15 @@ 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)
 
diff --git a/test/unit/specs/Bubble.spec.js b/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,7 +26,15 @@ 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)
 
diff --git a/test/unit/specs/Doughnut.spec.js b/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,7 +26,15 @@ 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)
 
diff --git a/test/unit/specs/Line.spec.js b/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,7 +26,15 @@ 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)
 
diff --git a/test/unit/specs/Pie.spec.js b/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,7 +26,15 @@ 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)
 
diff --git a/test/unit/specs/PolarArea.spec.js b/test/unit/specs/PolarArea.spec.js
diff --git a/test/unit/specs/Radar.spec.js b/test/unit/specs/Radar.spec.js
diff --git a/yarn.lock b/yarn.lock
