Fix stale uPlot instance access

Closes #21
skalinichev · Nov 19, 2022 · 08beff9 · 08beff9
1 parent 31ca82a
commit 08beff9
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 27 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,10 @@
+{
+    "endOfLine": "lf",
+    "semi": true,
+    "trailingComma": "es5",
+    "singleQuote": true,
+    "bracketSpacing": true,
+    "printWidth": 120,
+    "tabWidth": 4,
+    "arrowParens": "always"
+}
diff --git a/common/package.json b/common/package.json
@@ -1,6 +1,6 @@
 {
     "name": "uplot-wrappers-common",
-    "version": "1.1.2",
+    "version": "1.1.3",
     "description": "Common code for React and Vue.js wrappers of uPlot",
     "author": "Sergey Kalinichev <kalinichev.so.0@gmail.com>",
     "license": "MIT",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "uplot-wrappers",
-    "version": "1.1.2",
+    "version": "1.1.3",
     "description": "React and Vue.js wrappers for uPlot",
     "author": "Sergey Kalinichev <kalinichev.so.0@gmail.com>",
     "license": "MIT",

diff --git a/react/package.json b/react/package.json
@@ -1,6 +1,6 @@
 {
     "name": "uplot-react",
-    "version": "1.1.2",
+    "version": "1.1.3",
     "description": "React wrapper for uPlot that allows you to work with charts declaratively inside your favorite framework",
     "author": "Sergey Kalinichev <kalinichev.so.0@gmail.com>",
     "license": "MIT",
@@ -38,6 +38,6 @@
         "react": ">=16.8.6",
         "react-dom": ">=16.8.6",
         "uplot": "^1.6.7",
-        "uplot-wrappers-common": "1.1.2"
+        "uplot-wrappers-common": "1.1.3"
     }
 }
diff --git a/react/uplot-react.tsx b/react/uplot-react.tsx
@@ -1,17 +1,24 @@
-import React, {useEffect, useRef} from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import uPlot from 'uplot';
 
-import {optionsUpdateState, dataMatch} from 'uplot-wrappers-common';
+import { optionsUpdateState, dataMatch } from 'uplot-wrappers-common';
 
-export default function UplotReact({options, data, target, onDelete = () => {}, onCreate = () => {}, resetScales = true}: {
-    options: uPlot.Options,
-    data: uPlot.AlignedData,
+export default function UplotReact({
+    options,
+    data,
+    target,
+    onDelete = () => {},
+    onCreate = () => {},
+    resetScales = true,
+}: {
+    options: uPlot.Options;
+    data: uPlot.AlignedData;
     // eslint-disable-next-line
-    target?: HTMLElement | ((self: uPlot, init: Function) => void),
-    onDelete?: (chart: uPlot) => void
-    onCreate?: (chart: uPlot) => void
-    resetScales?: boolean
+    target?: HTMLElement | ((self: uPlot, init: Function) => void);
+    onDelete?: (chart: uPlot) => void;
+    onCreate?: (chart: uPlot) => void;
+    resetScales?: boolean;
 }): JSX.Element | null {
     const chartRef = useRef<uPlot | null>(null);
     const targetRef = useRef<HTMLDivElement>(null);
@@ -24,7 +31,7 @@ export default function UplotReact({options, data, target, onDelete = () => {},
         }
     }
     function create() {
-        const newChart = new uPlot(options, data, target || targetRef.current as HTMLDivElement)
+        const newChart = new uPlot(options, data, target || (targetRef.current as HTMLDivElement));
         chartRef.current = newChart;
         onCreate(newChart);
     }
@@ -33,35 +40,34 @@ export default function UplotReact({options, data, target, onDelete = () => {},
         create();
         return () => {
             destroy(chartRef.current);
-        }
+        };
     }, []);
     // componentDidUpdate
-    const prevProps = useRef({options, data, target}).current;
+    const prevProps = useRef({ options, data, target }).current;
     useEffect(() => {
-        const chart = chartRef.current;
         if (prevProps.options !== options) {
             const optionsState = optionsUpdateState(prevProps.options, options);
-            if (!chart || optionsState === 'create') {
-                destroy(chart);
+            if (!chartRef.current || optionsState === 'create') {
+                destroy(chartRef.current);
                 create();
             } else if (optionsState === 'update') {
-                chart.setSize({width: options.width, height: options.height});
+                chartRef.current.setSize({ width: options.width, height: options.height });
             }
         }
         if (prevProps.data !== data) {
-            if (!chart) {
+            if (!chartRef.current) {
                 create();
             } else if (!dataMatch(prevProps.data, data)) {
                 if (resetScales) {
-                    chart.setData(data, true);
+                    chartRef.current.setData(data, true);
                 } else {
-                    chart.setData(data, false);
-                    chart.redraw();
+                    chartRef.current.setData(data, false);
+                    chartRef.current.redraw();
                 }
             }
         }
         if (prevProps.target !== target) {
-            destroy(chart);
+            destroy(chartRef.current);
             create();
         }
 

diff --git a/vue/package.json b/vue/package.json
@@ -1,6 +1,6 @@
 {
     "name": "uplot-vue",
-    "version": "1.1.2",
+    "version": "1.1.3",
     "description": "Vue.js wrapper for uPlot that allows you to work with charts declaratively inside your favorite framework",
     "author": "Sergey Kalinichev <kalinichev.so.0@gmail.com>",
     "license": "MIT",
@@ -33,7 +33,7 @@
     },
     "devDependencies": {
         "uplot": "^1.6.7",
-        "uplot-wrappers-common": "1.1.2",
+        "uplot-wrappers-common": "1.1.3",
         "vue": "^2.6.12",
         "vue3": "npm:vue@^3.0.11"
     }