fix(install): export install method for custom fabric

yassilah · Sep 18, 2020 · 202fa96 · 202fa96
1 parent f9379f6
commit 202fa96
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -14,8 +14,19 @@ yarn add chart-js-fabric
 
 You can use the regular API from both those great libraries as you would normally. Each fabric.Chart object has an extra "chart" propeprty where you can set your chart.js options (see below).
 
+If using a custom fabric instance, please use the export "install" method.
+
 ```js
 import { fabric } from 'fabric'
+import { install } from 'chart-js-fabric'
+
+install(fabric)
+```
+
+Else, simply import the plugin.
+
+```js
+import fabric from 'fabric'
 import 'chart-js-fabric'
 
 const instance = new fabric.Canvas('#canvas')
@@ -61,17 +72,19 @@ object.set({ chart: { data: [2] })
 ```
 
 You may add global Chart.js plugins using the utility method "addPlugin".
+
 ```js
 fabric.util.chart.addPlugin(YourPlugin)
 ```
 
 You may also change the global default Chart.js options using the utility method "setDefaults". Your new options will be merged with the existing ones.
+
 ```js
 fabric.util.chart.setDefaults({
   options: {
     onClick() {
       alert('You clicked!')
     }
   }
- })
-```
+})
+```
diff --git a/rollup.config.ts b/rollup.config.ts
@@ -23,17 +23,6 @@ export default {
         'chart.js': 'Chart'
       }
     },
-    {
-      file: pkg.main.replace(/\.js$/, '.min.js'),
-      name: camelCase(libraryName),
-      format: 'umd',
-      sourcemap: true,
-      globals: {
-        fabric: 'fabric',
-        'chart.js': 'Chart'
-      },
-      plugins: [terser()]
-    },
     {
       file: pkg.module,
       format: 'es',
@@ -59,7 +48,9 @@ export default {
     // Compile TypeScript files
     typescript({ useTsconfigDeclarationDir: true }),
     // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
-    commonjs(),
+    commonjs({
+      include: 'node_modules/**'
+    }),
     // Allow node_modules resolution, so you can use 'external' to control
     // which external modules to include in the bundle
     // https://github.com/rollup/rollup-plugin-node-resolve#usage

diff --git a/src/chart-js-fabric.ts b/src/chart-js-fabric.ts
@@ -1,10 +1,9 @@
-import fabricJS, { fabric } from 'fabric'
+import fabricJS, { fabric as fabricTS } from 'fabric'
 import Chart, { ChartConfiguration, ChartSize, PluginServiceRegistrationOptions } from 'chart.js'
 import debounce from 'lodash.debounce'
 import merge from 'lodash.merge'
 
-const _fabric = (fabricJS as any) as typeof fabric
-
+const fabric = ('fabric' in fabricJS ? fabricJS.fabric : (fabricJS as any)) as typeof fabricTS
 const CHART_OPTIONS = 'chart'
 const CHART_INSTANCE = '__chart'
 const CHART_PLUGINS: PluginServiceRegistrationOptions[] = []
@@ -22,8 +21,7 @@ const CHART_EVENTS = {
   touchstart: 'touchstart',
   touchmove: 'touchmove',
 }
-
-export class ChartObject extends _fabric.Object {
+export class ChartObject extends fabric.Object {
   /**
    * Type of an object (rect, circle, path, etc.).
    * Note that this property is meant to be read-only and not meant to be modified.
@@ -258,7 +256,7 @@ export class ChartObject extends _fabric.Object {
    * @param {fabric.IChartConfiguration} options
    * @return {fabric.Chart}
    */
-  public initialize(options?: fabric.IChartConfiguration) {
+  public initialize(options?: fabricTS.IChartConfiguration) {
     super.initialize(options)
     this.__createChart()
     this.__bindChartEvents()
@@ -313,31 +311,34 @@ declare module 'fabric' {
   }
 }
 
-const klass = _fabric.util.createClass(ChartObject)
-
-klass.type = 'chart'
-
-Object.defineProperty(_fabric, 'Chart', {
-  value: klass,
-})
-
-_fabric.util.object.extend(_fabric.util, {
-  chart: {
-    /**
-     * Add plugins to the list of default plugins.
-     *
-     * @param plugin
-     */
-    addPlugins(...plugins: any[]) {
-      CHART_PLUGINS.push(...plugins)
-    },
-    /**
-     * Set the default global options.
-     *
-     * @param options
-     */
-    setDefaults(options: Partial<ChartConfiguration>) {
-      merge(CHART_DEFAULT_OPTIONS, options)
+/**
+ * Install the plugin on a given fabric instance.
+ *
+ * @param fabric
+ */
+export function install(fabric: typeof fabricTS) {
+  fabric.Chart = fabric.util.createClass(ChartObject)
+
+  fabric.util.object.extend(fabric.util, {
+    chart: {
+      /**
+       * Add plugins to the list of default plugins.
+       *
+       * @param plugin
+       */
+      addPlugins(...plugins: any[]) {
+        CHART_PLUGINS.push(...plugins)
+      },
+      /**
+       * Set the default global options.
+       *
+       * @param options
+       */
+      setDefaults(options: Partial<ChartConfiguration>) {
+        merge(CHART_DEFAULT_OPTIONS, options)
+      },
     },
-  },
-})
+  })
+}
+
+install(fabric)