Move the samples context out of the Vuepress plugin

"Utils" methods and chart defaults are now directly accessible under
the /docs/samples folder, making easier to figure out from where some
part of the samples snippets come from.

Author: simonbrunel

docs/.vuepress/config.js

@@ -17,19 +17,11 @@ module.exports = {
       ],
     }],
     [ChartEditorPlugin, {
-      defaults: {
-        global: {
-          legend: {
-            display: false
-          },
-          title: {
-            display: false
-          },
-          tooltips: {
-            enabled: false
-          }
-        }
-      }
+      imports: [
+        ['samples/register.js'],
+        ['samples/defaults.js'],
+        ['samples/utils.js', 'Utils'],
+      ]
     }],
   ],
   themeConfig: {

docs/.vuepress/plugins/chart-editor/components/ChartEditor.vue

@@ -13,16 +13,13 @@
 </template>
 
 <script>
-import Chart from 'chart.js';
-import * as Utils from '../utils';
+import {Chart} from 'chart.js';
 
 // Components
 import ChartActions from './ChartActions.vue';
 import ChartView from './ChartView.vue';
 import CodeEditor from './CodeEditor.vue';
 
-const CHART_DEFAULTS = Chart.helpers.merge({}, Chart.defaults);
-
 export default {
   components: {
     ChartActions,
@@ -63,11 +60,31 @@ export default {
         return;
       }
 
+      const logger = {
+        log(...args) {
+          me.messages = [...me.messages, args.join(' ')].slice(-50);
+        },
+      };
+
+      const me = this;
+      const context = {
+        ...(this.$chart || {}).imports,
+        console: {
+          ...console,
+          ...logger,
+        },
+        Chart,
+      };
+
+      const keys = Object.keys(context);
+      const lines = keys.map((key) => {
+        return `const ${key} = arguments[0].${key}`;
+      });
+
       const script = `
         'use strict';
-        const Chart = arguments[0].Chart;
-        const Utils = arguments[0].Utils;
         const module = {exports: {}};
+        ${lines.join(';\n')};
         (function(){ ${code} })();
         return module.exports;
       `;

docs/.vuepress/plugins/chart-editor/components/ChartView.vue

@@ -5,10 +5,7 @@
 </template>
 
 <script>
-import Chart from 'chart.js';
-import plugin from '../../../../../dist/chartjs-plugin-datalabels.js';
-
-Chart.plugins.register(plugin);
+import {Chart} from 'chart.js';
 
 export default {
   methods: {

docs/.vuepress/plugins/chart-editor/components/CodeEditor.vue

@@ -103,6 +103,9 @@ export default {
   },
 
   watch: {
+    output() {
+      this.rebuild();
+    },
     value: {
       immediate: true,
       handler() {

docs/.vuepress/plugins/chart-editor/index.js

@@ -1,39 +1,65 @@
 const {resolve} = require('path');
 
-module.exports = ({defaults}) => {
-  function render(md) {
-    const fence = md.renderer.rules.fence;
-    md.renderer.rules.fence = (...args) => {
-      const [tokens, idx] = args;
-      const token = tokens[idx];
-      const lang = token.info.trim();
+function render({renderer}) {
+  const fence = renderer.rules.fence;
+  renderer.rules.fence = (...args) => {
+    const [tokens, idx] = args;
+    const token = tokens[idx];
+    const lang = token.info.trim();
 
-      if (!(/ chart-editor( |$)/).test(lang)) {
-        return fence(...args);
-      }
+    return (/ chart-editor( |$)/).test(lang) ?
+      `<chart-editor :code="\`${token.content}\`"/>` :
+      fence(...args);
+  };
+}
+
+function importsScripts(imports) {
+  const names = imports.map(([, name]) => name).filter((name) => !!name);
+  const lines = imports.map(([file, name]) => {
+    const path = `@docs/${file}`;
+    return name ?
+      `import * as ${name} from '${path}'` :
+      `import '${path}'`;
+  });
 
-      return `<chart-editor :code="\`${token.content}\`"/>`;
-    };
-  }
+  return `
+    import Vue from 'vue';
+    ${lines.join(';\n')};
 
+    const imports = {
+      ${names.join(',\n')}
+    }
+
+    Vue.mixin({
+      created() {
+        this.$chart = this.$chart || {};
+        this.$chart.imports = imports;
+      }
+    })
+  `;
+}
+
+module.exports = ({imports}) => {
   return {
     name: 'vuepress-plugin-chart-editor',
     enhanceAppFiles: [
-      {
-        name: 'chart-defaults',
-        content: `
-          import Chart from 'chart.js';
-          Chart.helpers.merge(Chart.defaults, ${JSON.stringify(defaults)});
-        `
-      },
       resolve(__dirname, 'global.js'),
       resolve(__dirname, 'enhancer.js'),
+      {
+        content: importsScripts(imports),
+        name: 'chart-imports',
+      }
     ],
     chainWebpack: (config) => {
       config.merge({
         externals: {
           moment: 'moment',
         },
+        resolve: {
+          alias: {
+            '@docs': resolve(__dirname, '../../../'),
+          }
+        }
       });
     },
     chainMarkdown: (config) => {

docs/samples/defaults.js

@@ -0,0 +1,15 @@
+import {defaults, helpers} from 'chart.js';
+
+const {merge} = helpers;
+
+merge(defaults.global, {
+  legend: {
+    display: false
+  },
+  title: {
+    display: false
+  },
+  tooltips: {
+    enabled: false
+  }
+});

docs/samples/events/listeners.md

@@ -18,7 +18,7 @@ function log(type, context) {
   var j = context.dataIndex;
   var v = context.dataset.data[j];
 
-  Utils.log(type + ': ' + i + '-' + j + ' (' + v + ')')
+  console.log(type + ': ' + i + '-' + j + ' (' + v + ')')
 }
 // </block:setup>
 

docs/samples/events/selection.md

@@ -34,7 +34,7 @@ function isSelected(context) {
 }
 
 function log(selected) {
-  Utils.log('selection: ' + selected.map(function(item) {
+  console.log('selection: ' + selected.map(function(item) {
     return item.value;
   }).join(', '));
 }

docs/samples/register.js

@@ -0,0 +1,4 @@
+import {plugins} from 'chart.js';
+import plugin from '../../dist/chartjs-plugin-datalabels.js';
+
+plugins.register(plugin);

…/.vuepress/plugins/chart-editor/utils.js docs/samples/utils.jsdocs/.vuepress/plugins/chart-editor/utils.js renamed to docs/samples/utils.js docs/.vuepress/plugins/chart-editor/utils.js renamed to docs/samples/utils.js

@@ -13,7 +13,7 @@ function fallback(/* values ... */) {
 
 var Color = typeof window !== 'undefined' ? window.Color : {};
 
-var COLORS = [
+export var COLORS = [
   '#FF3784',
   '#36A2EB',
   '#4BC0C0',
@@ -28,19 +28,20 @@ var COLORS = [
 ];
 
 // Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
-function srand(seed) {
-  this._seed = seed;
+var _seed = Date.now();
+
+export function srand(seed) {
+  _seed = seed;
 }
 
-function rand(min, max) {
-  var seed = this._seed;
+export function rand(min, max) {
   min = min === undefined ? 0 : min;
   max = max === undefined ? 1 : max;
-  this._seed = (seed * 9301 + 49297) % 233280;
-  return min + (this._seed / 233280) * (max - min);
+  _seed = (_seed * 9301 + 49297) % 233280;
+  return min + (_seed / 233280) * (max - min);
 }
 
-function numbers(config) {
+export function numbers(config) {
   var cfg = config || {};
   var min = fallback(cfg.min, 0);
   var max = fallback(cfg.max, 1);
@@ -64,13 +65,13 @@ function numbers(config) {
   return data;
 }
 
-function color(offset) {
+export function color(offset) {
   var count = COLORS.length;
   var index = offset === undefined ? ~~rand(0, count) : offset;
   return COLORS[index % count];
 }
 
-function colors(config) {
+export function colors(config) {
   var cfg = config || {};
   var c = cfg.color || color(0);
   var count = cfg.count !== undefined ? cfg.count : 8;
@@ -93,19 +94,7 @@ function colors(config) {
   return values;
 }
 
-function transparentize(c, opacity) {
+export function transparentize(c, opacity) {
   var alpha = opacity === undefined ? 0.5 : 1 - opacity;
   return Color(c).alpha(alpha).rgbString();
 }
-
-srand(Date.now());
-
-module.exports = {
-  color: color,
-  colors: colors,
-  COLORS: COLORS,
-  numbers: numbers,
-  rand: rand,
-  srand: srand,
-  transparentize: transparentize,
-};