fix: avoid vars start with $

Author: weizhenye

README.md

@@ -2,7 +2,6 @@
 
 [![GitHub Action](https://github.com/weizhenye/vue-highcharts/workflows/CI/badge.svg)](https://github.com/weizhenye/vue-highcharts/actions)
 [![Coverage](https://badgen.net/codecov/c/github/weizhenye/vue-highcharts?icon=codecov)](https://codecov.io/gh/weizhenye/vue-highcharts)
-[![Dependencies](https://badgen.net/david/dep/weizhenye/vue-highcharts?icon=https://api.iconify.design/si-glyph:connect-2.svg?color=white)](https://david-dm.org/weizhenye/vue-highcharts)
 [![NPM version](https://badgen.net/npm/v/vue-highcharts?icon=npm)](https://www.npmjs.com/package/vue-highcharts)
 [![License](https://badgen.net/npm/license/vue-highcharts?icon=https://api.iconify.design/octicon:law.svg?color=white)](https://github.com/weizhenye/vue-highcharts/blob/master/LICENSE)
 [![File size](https://badgen.net/bundlephobia/minzip/vue-highcharts?icon=https://api.iconify.design/ant-design:file-zip-outline.svg?color=white)](https://bundlephobia.com/result?p=vue-highcharts)
@@ -26,7 +25,7 @@ For **Vue 2**, please run `npm i -S vue-highcharts@0.1`, and checkout document [
 
 ## Usage
 
-### Registering Globally
+### Registering globally
 
 ```js
 import { createApp } from 'vue';
@@ -41,7 +40,7 @@ app.use(VueHighcharts, { Highcharts });
 ```
 
 <details>
-<summary>Direct <code>&lt;script&gt;</code> Include</summary>
+<summary>Direct <code>&lt;script&gt;</code> include</summary>
 
 ```html
 <script src="/path/to/vue/dist/vue.global.prod.js"></script>
@@ -86,7 +85,7 @@ app.use(VueHighcharts, { Highcharts });
 // drilldown and solid gauge are work with <Highcharts />
 ```
 
-### Registering In Components
+### Registering in components
 
 ```vue
 <template>
@@ -124,7 +123,7 @@ function createHighcharts(name: ChartName, Highcharts: Highcharts): VueComponent
 
 ```vue
 <template>
-  <Highcharts ref="$highcharts" :options="chartOptions" />
+  <Highcharts ref="highchartsRef" :options="chartOptions" />
   <Highstock :options="stockOptions" />
   <Highmaps :options="mapsOptions" />
   <HighchartsGantt :options="ganttOptions" />
@@ -135,12 +134,18 @@ import { ref, onMounted } from 'vue';
 
 export default {
   setup() {
-    const $highcharts = ref(null);
+    const highchartsRef = ref(null);
     onMounted(() => {
       // access the `chart` instance with template refs
-      const { chart } = $highcharts.value;
+      const { chart } = highchartsRef.value;
     });
-    return { $highcharts };
+    return {
+      highchartsRef,
+      chartOptions: {},
+      stockOptions: {},
+      mapsOptions: {},
+      ganttOptions: {},
+    };
   },
 };
 </script>

index.js

@@ -8,7 +8,7 @@ const ctors = {
 };
 
 function render() {
-  return h('div', { ref: '$highcharts' });
+  return h('div', { ref: 'highchartsRef' });
 }
 
 function createHighcharts(name, Highcharts) {
@@ -26,19 +26,19 @@ function createHighcharts(name, Highcharts) {
     props: ['options'],
     render,
     setup(props) {
-      const $highcharts = ref(null);
+      const highchartsRef = ref(null);
       const chart = ref(null);
       onMounted(() => {
         watchEffect(() => {
-          chart.value = ctor($highcharts.value, props.options);
+          chart.value = ctor(highchartsRef.value, props.options);
         });
       });
       onBeforeUnmount(() => {
-        if ($highcharts.value) {
+        if (highchartsRef.value) {
           chart.value.destroy();
         }
       });
-      return { $highcharts, chart };
+      return { highchartsRef, chart };
     },
   };
 }

package.json

@@ -4,6 +4,7 @@
   "description": "Highcharts component for Vue",
   "main": "dist/vue-highcharts.js",
   "module": "index.js",
+  "sideEffects": false,
   "files": [
     "dist",
     "index.js"
@@ -40,16 +41,16 @@
     "vue": ">=3"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.3",
-    "@babel/preset-env": "^7.10.3",
-    "@rollup/plugin-babel": "^5.0.4",
-    "eslint": "^7.3.1",
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "@rollup/plugin-babel": "^5.2.1",
+    "eslint": "^7.9.0",
     "eslint-config-airbnb-base": "^14.2.0",
-    "eslint-plugin-import": "^2.21.2",
-    "highcharts": "^8.1.2",
-    "jest": "^26.1.0",
-    "rollup": "^2.18.0",
-    "rollup-plugin-terser": "^6.1.0",
-    "vue": "^3.0.0-beta.15"
+    "eslint-plugin-import": "^2.22.0",
+    "highcharts": "^8.2.0",
+    "jest": "^26.4.2",
+    "rollup": "^2.27.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "vue": "^3.0.0"
   }
 }

test/test.js

@@ -21,49 +21,49 @@ describe('vue-highcharts', () => {
     const root = createComponent({
       template,
       setup() {
-        return { $chart: ref(null) };
+        return { chartRef: ref(null) };
       },
     });
-    expect(root.$chart.$highcharts.querySelector('.highcharts-root')).toBeDefined();
+    expect(root.chartRef.highchartsRef.querySelector('.highcharts-root')).toBeDefined();
   }
 
   it('should support <Highcharts /> component', () => {
-    checkComponent('<Highcharts ref="$chart" :options="{}" />');
+    checkComponent('<Highcharts ref="chartRef" :options="{}" />');
   });
 
   it('should support <Highstock /> component', () => {
-    checkComponent('<Highstock ref="$chart" :options="{}" />');
+    checkComponent('<Highstock ref="chartRef" :options="{}" />');
   });
 
   it('should support <Highmaps /> component', () => {
-    checkComponent('<Highmaps ref="$chart" :options="{}" />');
+    checkComponent('<Highmaps ref="chartRef" :options="{}" />');
   });
 
   it('should support <HighchartsGantt /> component', () => {
-    checkComponent('<HighchartsGantt ref="$chart" :options="{}" />');
+    checkComponent('<HighchartsGantt ref="chartRef" :options="{}" />');
   });
 
   it('can access the `chart` instance via template refs', () => {
     const root = createComponent({
-      template: '<Highcharts ref="$chart" :options="{}" />',
+      template: '<Highcharts ref="chartRef" :options="{}" />',
       setup() {
-        return { $chart: ref(null) };
+        return { chartRef: ref(null) };
       },
     });
-    expect(root.$chart.chart).toBeDefined();
+    expect(root.chartRef.chart).toBeDefined();
   });
 
   it('should destroy the chart instance when vm destroyed', (done) => {
     let chart = null;
     let el = null;
     const app = createApp({
-      template: '<div ref="$div"><Highcharts ref="$chart" :options="{}" /></div>',
+      template: '<div ref="divRef"><Highcharts ref="chartRef" :options="{}" /></div>',
       setup() {
-        const $div = ref(null);
-        const $chart = ref(null);
+        const divRef = ref(null);
+        const chartRef = ref(null);
         onBeforeUnmount(() => {
-          el = $div.value;
-          chart = $chart.value.chart;
+          el = divRef.value;
+          chart = chartRef.value.chart;
           expect(el.querySelector('.highcharts-root')).toBeDefined();
           expect(chart).toBeDefined();
         });
@@ -74,7 +74,7 @@ describe('vue-highcharts', () => {
             done();
           });
         });
-        return { $div, $chart };
+        return { divRef, chartRef };
       },
     });
     app.use(VueHighcharts, { Highcharts });
@@ -84,18 +84,18 @@ describe('vue-highcharts', () => {
 
   it('should watch `options`', () => {
     const root = createComponent({
-      template: '<Highcharts ref="$chart" :options="options" />',
+      template: '<Highcharts ref="chartRef" :options="options" />',
       setup() {
         return {
-          $chart: ref(null),
+          chartRef: ref(null),
           options: ref({ title: { text: 'origin' } }),
         };
       },
     });
-    expect(root.$chart.chart.title.textStr).toBe('origin');
+    expect(root.chartRef.chart.title.textStr).toBe('origin');
     root.options.title.text = 'changed';
     nextTick().then(() => {
-      expect(root.$chart.chart.title.textStr).toBe('changed');
+      expect(root.chartRef.chart.title.textStr).toBe('changed');
     });
   });