@amad3v/solid-chart 1.0.2 → 1.0.4

package/README.md

@@ -4,27 +4,34 @@
 
 A lightweight, reactive [SolidJS](https://www.solidjs.com/) wrapper for [Chart.js 4.5+](https://www.chartjs.org/).
 
-This library provides a thin, high-performance layer over **Chart.js**, ensuring that chart instances stay in sync with Solid's fine-grained reactivity without the "Wrapper Tax" of older implementations.
+This library provides a thin, high-performance layer over **Chart.js**, ensuring
+that chart instances stay in sync with Solid's fine-grained reactivity without
+the "Wrapper Tax" of older implementations.
 
 ---
 
-> 💡 **Important**
+> 💡 **Important**: This project is based on the original work by [s0ftik3/solid-chartjs](https://github.com/s0ftik3/solid-chartjs). It has been modernised to fix race conditions related to DOM rendering and updated for compatibility with the latest **Chart.js**.
 
-> This project is based on the original work by [s0ftik3/solid-chartjs](https://github.com/s0ftik3/solid-chartjs). It has been modernised to fix race conditions related to DOM rendering and updated for compatibility with the latest **Chart.js**.
-
-> ⚠️ **Warning**
+---
 
-> This library is **not thoroughly tested** in production environments. Please use it with caution and report any issues.
+> ⚠️ **Warning**: This library is **not thoroughly tested** in production environments. Please use it with caution and report any issues.
 
 ---
+
 ## Features
- - **Zero-Signal Architecture**: Uses synchronous `onMount` ref handling to prevent `getComputedStyle` errors.
- - **Prop Protection**: Automatically unwraps Solid Stores before passing them to Chart.js to prevent Proxy-related crashes.
- - **Typed Components**: Includes pre-defined components for `Line`, `Bar`, `Doughnut`, ...
- - **Registration Utilities**: Built-in helpers to register only what you need, keeping your bundle small.
- - **ESM-First**: Optimised for modern bundlers like Vite and Rspack.
+
+- **Zero-Signal Architecture**: Uses synchronous `onMount` ref handling to
+  prevent `getComputedStyle` errors.
+- **Prop Protection**: Automatically unwraps Solid Stores before passing them to
+  Chart.js to prevent Proxy-related crashes.
+- **Typed Components**: Includes pre-defined components for `Line`, `Bar`,
+  `Doughnut`,...
+- **Registration Utilities**: Built-in helpers to register only what you need,
+  keeping your bundle small.
+- **ESM-First**: Optimised for modern bundlers like Vite and Rspack.
 
 ## Installation
+
 ```bash
 pnpm add @amad3v/solid-chart chart.js
 # or
@@ -32,7 +39,11 @@ npm install @amad3v/solid-chart chart.js
 ```
 
 ## Setup (Registration)
-To keep the bundle lean, `solid-chart` does not register Chart.js components globally by default. We provide utilities to register exactly what you need in your entry point (e.g., `index.tsx`):
+
+To keep the bundle lean, `solid-chart` does not register Chart.js components
+globally by default. We provide utilities to register exactly what you need in
+your entry point (e.g., `index.tsx`):
+
 ```tsx
 import { registerCoreExtra, registerLine, registerBar } from 'solid-chart';
 
@@ -43,7 +54,10 @@ registerCoreExtra();
 registerLine();
 registerBar();
 ```
-If you have custom requirements or 3rd party plugins, use the exposed `registerComponent` helper:
+
+If you have custom requirements or 3rd party plugins, use the exposed
+`registerComponent` helper:
+
 ```tsx
 import { registerComponent } from 'solid-chart';
 import MyPlugin from 'chartjs-my-plugin';
@@ -52,7 +66,9 @@ registerComponent(MyPlugin);
 ```
 
 ## Usage
-Using the library is straightforward. You can use the generic `DefaultChart` or any of the typed exports.
+
+Using the library is straightforward. You can use the generic `DefaultChart` or
+any of the typed exports.
 
 ```tsx
 import { Line } from 'solid-chart';
@@ -88,18 +104,21 @@ const App = () => {
 ```
 
 ## API
+
 ### Components
+
 All components accept standard Chart.js configuration objects as props.
 
 `DefaultChart`: The base component (requires a `type` prop).
 
-`Line`, `Bar`, `Radar`, `Doughnut`, `PolarArea`, `Bubble`, `Pie`, `Scatter`: Type-safe shortcuts.
+`Line`, `Bar`, `Radar`, `Doughnut`, `PolarArea`, `Bubble`, `Pie`, `Scatter`:
+Type-safe shortcuts.
 
 ## Registration Utilities
 
 | Function                          | Description                                             |
 | --------------------------------- | ------------------------------------------------------- |
-| registerComponent                          | Raw access to Chart.register(...args).                  |
+| registerComponent                 | Raw access to Chart.register(...args).                  |
 | registerCore                      | Registers Tooltip and Legend.                           |
 | registerCoreExtra                 | Registers Title, Tooltip, Legend, Colors, and SubTitle. |
 | registerLine                      | Registers requirements for Line charts.                 |
@@ -107,8 +126,8 @@ All components accept standard Chart.js configuration objects as props.
 | registerPie / registerDoughnut    | Registers requirements for Arc-based charts.            |
 | registerRadar / registerPolarArea | Registers requirements for Radial charts.               |
 
-
 ### Props
+
 | Prop    | Type         | Description                                       |
 | ------- | ------------ | ------------------------------------------------- |
 | data    | ChartData    | The reactive data object (Solid Store supported). |
@@ -119,20 +138,33 @@ All components accept standard Chart.js configuration objects as props.
 
 ## Contributing
 
-Contributions are welcome! Please fork the repository and submit a pull request for any improvements, bug fixes, or new features. Be sure to follow best practices and ensure all tests pass before submitting.
+Contributions are welcome! Please fork the repository and submit a pull request
+for any improvements, bug fixes, or new features. Be sure to follow best
+practices and ensure all tests pass before submitting.
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
+This project is licensed under the MIT License - see the [LICENSE](./LICENSE)
+file for details.
 
 ## Acknowledgements
 
-This library is a modernised and refactored version of [solid-chartjs](https://github.com/s0ftik3/solid-chartjs), tailored to support modern SolidJS and Chart.js 4.5+ architectures. All credit for the original [solid-chartjs](https://github.com/s0ftik3/solid-chartjs) library and its initial implementation goes to the original [authors](https://github.com/s0ftik3).
+This library is a modernised and refactored version of
+[solid-chartjs](https://github.com/s0ftik3/solid-chartjs), tailored to support
+modern SolidJS and Chart.js 4.5+ architectures. All credit for the original
+[solid-chartjs](https://github.com/s0ftik3/solid-chartjs) library and its
+initial implementation goes to the original
+[authors](https://github.com/s0ftik3).
 
 ## Disclaimer
 
-Please note: This library is by no means a professional or production-ready solution. It was developed out of necessity for personal projects, and it may not meet the quality or stability standards required for a fully-fledged production environment. It is intended for personal use and experimentation, and contributions are highly encouraged to improve its functionality and stability.
+Please note: This library is by no means a professional or production-ready
+solution. It was developed out of necessity for personal projects, and it may
+not meet the quality or stability standards required for a fully-fledged
+production environment. It is intended for personal use and experimentation, and
+contributions are highly encouraged to improve its functionality and stability.
 
 ## Changelog
 
-Detailed changes for each release are documented in the [CHANGELOG.md](./CHANGELOG.md).
+Detailed changes for each release are documented in the
+[CHANGELOG.md](./CHANGELOG.md).

package/dist/solid-chart.js

@@ -1,12 +1,12 @@
-import { template as x, use as D, insert as O, effect as T, setAttribute as w, createComponent as i, mergeProps as s } from "solid-js/web";
-import { mergeRefs as P } from "@solid-primitives/refs";
-import { Chart as S, PointElement as f, LinearScale as m, BubbleController as _, Legend as A, Tooltip as B, SubTitle as $, Colors as k, Title as q, ArcElement as v, DoughnutController as z, LineElement as L, CategoryScale as E, LineController as F, PieController as M, RadialLinearScale as R, PolarAreaController as j, RadarController as G, ScatterController as H, BarElement as I, BarController as J } from "chart.js";
-import { mergeProps as K, onMount as N, createEffect as p, on as d, onCleanup as Q } from "solid-js";
-import { unwrap as g } from "solid-js/store";
-var U = /* @__PURE__ */ x("<canvas>");
-const l = (e) => {
-  let h = 0, c, o;
-  const t = K({
+import { template as D, use as x, insert as O, effect as T, setAttribute as S, createComponent as i, mergeProps as s } from "solid-js/web";
+import { mergeProps as M, onMount as _, createEffect as d, on as g, onCleanup as I } from "solid-js";
+import { unwrap as f } from "solid-js/store";
+import { mergeRefs as w } from "@solid-primitives/refs";
+import { Chart as P, PointElement as h, LinearScale as m, BubbleController as $, Legend as A, Tooltip as E, SubTitle as k, Colors as q, Title as z, ArcElement as b, DoughnutController as F, LineElement as R, CategoryScale as B, LineController as X, PieController as j, RadialLinearScale as L, PolarAreaController as G, RadarController as H, ScatterController as J, BarElement as K, BarController as N } from "chart.js";
+var Q = /* @__PURE__ */ D("<canvas>");
+const U = 300, l = (e) => {
+  let c = 0, u, o;
+  const t = M({
     width: 512,
     height: 512,
     type: "line",
@@ -16,93 +16,97 @@ const l = (e) => {
     },
     plugins: []
   }, e), C = () => {
-    if (!c) return;
-    if (!c.isConnected) {
-      h++, h === 60 && console.warn("Solid-Chart: Canvas layout is delayed. Still retrying..."), requestAnimationFrame(C);
+    if (!u) return;
+    if (!u.isConnected) {
+      if (c++, c % 120 === 0 && console.warn("Solid-Chart: Canvas layout is delayed. Still retrying..."), c >= U) {
+        console.error("Solid-Chart: Initialisation failed. Canvas never connected to DOM.");
+        return;
+      }
+      requestAnimationFrame(C);
       return;
     }
-    h = 0;
-    const n = c.getContext("2d"), r = {
-      ...g(t.options)
+    c = 0;
+    const n = u.getContext("2d"), r = {
+      ...f(t.options)
     };
     if (t.type !== "radar" && r.scales?.r) {
       const {
-        r: b,
-        ...u
+        r: v,
+        ...p
       } = r.scales;
-      r.scales = u;
+      r.scales = p;
     }
-    o = new S(n, {
+    o = new P(n, {
       type: t.type,
-      data: g(t.data),
+      data: f(t.data),
       // unwrap stores before passing to external libs
       options: r,
       plugins: t.plugins
     });
   };
-  return N(() => C()), p(d(() => t.data, (n) => {
-    o && (o.data = g(n), o.update("none"));
+  return _(() => C()), d(g(() => t.data, (n) => {
+    o && (o.data = f(n), o.update("none"));
   }, {
     defer: !0
-  })), p(d(() => t.options, (n) => {
-    o && (o.options = g(n), o.update());
+  })), d(g(() => t.options, (n) => {
+    o && (o.options = f(n), o.update());
   }, {
     defer: !0
-  })), p(d([() => t.width, () => t.height], () => o?.resize(t.width, t.height), {
+  })), d(g([() => t.width, () => t.height], () => o?.resize(t.width, t.height), {
     defer: !0
-  })), p(d(() => t.type, () => {
+  })), d(g(() => t.type, () => {
     o && (o.destroy(), C());
   }, {
     defer: !0
-  })), Q(() => {
-    o?.destroy(), P(e.ref, null);
+  })), I(() => {
+    o?.destroy(), w(e.ref, null);
   }), (() => {
-    var n = U(), y = P(e.ref, (r) => c = r);
-    return typeof y == "function" && D(y, n), O(n, () => t.fallback), T((r) => {
-      var b = t.height, u = t.width;
-      return b !== r.e && w(n, "height", r.e = b), u !== r.t && w(n, "width", r.t = u), r;
+    var n = Q(), y = w(e.ref, (r) => u = r);
+    return typeof y == "function" && x(y, n), O(n, () => t.fallback), T((r) => {
+      var v = t.height, p = t.width;
+      return v !== r.e && S(n, "height", r.e = v), p !== r.t && S(n, "width", r.t = p), r;
     }, {
       e: void 0,
       t: void 0
     }), n;
   })();
-}, a = (...e) => S.register(...e), ee = () => a(B, A), te = () => a(q, B, A, k, $), re = () => a(F, E, m, f, L), oe = () => a(J, E, m, I), ne = () => a(G, R, f, L), ae = () => a(z, v), ie = () => a(M, v), se = () => a(j, R, v), le = () => a(_, m, f), ce = () => a(H, m, f), ue = (e) => i(l, s({
+}, a = (...e) => P.register(...e), te = () => a(E, A), re = () => a(z, E, A, q, k), oe = () => a(X, B, m, h, R), ne = () => a(N, B, m, K), ae = () => a(H, L, h, R), ie = () => a(F, b), se = () => a(j, b), le = () => a(G, L, b), ce = () => a($, m, h), ue = () => a(J, m, h), pe = (e) => i(l, s(e, {
   type: "line"
-}, e)), pe = (e) => i(l, s({
+})), de = (e) => i(l, s(e, {
   type: "bar"
-}, e)), de = (e) => i(l, s({
+})), ge = (e) => i(l, s(e, {
   type: "radar"
-}, e)), ge = (e) => i(l, s({
+})), fe = (e) => i(l, s(e, {
   type: "doughnut"
-}, e)), fe = (e) => i(l, s({
+})), he = (e) => i(l, s(e, {
   type: "polarArea"
-}, e)), me = (e) => i(l, s({
+})), me = (e) => i(l, s(e, {
   type: "bubble"
-}, e)), he = (e) => i(l, s({
+})), Ce = (e) => i(l, s(e, {
   type: "pie"
-}, e)), Ce = (e) => i(l, s({
+})), ye = (e) => i(l, s(e, {
   type: "scatter"
-}, e));
+}));
 export {
-  pe as Bar,
+  de as Bar,
   me as Bubble,
   l as DefaultChart,
-  ge as Doughnut,
-  ue as Line,
-  he as Pie,
-  fe as PolarArea,
-  de as Radar,
-  Ce as Scatter,
-  oe as registerBar,
-  le as registerBubble,
+  fe as Doughnut,
+  pe as Line,
+  Ce as Pie,
+  he as PolarArea,
+  ge as Radar,
+  ye as Scatter,
+  ne as registerBar,
+  ce as registerBubble,
   a as registerComponent,
-  ee as registerCore,
-  te as registerCoreExtra,
-  ae as registerDoughnut,
-  re as registerLine,
-  ie as registerPie,
-  se as registerPolarArea,
-  ne as registerRadar,
-  ce as registerScatter
+  te as registerCore,
+  re as registerCoreExtra,
+  ie as registerDoughnut,
+  oe as registerLine,
+  se as registerPie,
+  le as registerPolarArea,
+  ae as registerRadar,
+  ue as registerScatter
 };
 //# sourceMappingURL=solid-chart.js.map

package/dist/solid-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"solid-chart.js","sources":["../src/chart.tsx","../src/registry.ts","../src/typedCharts.tsx"],"sourcesContent":["import { mergeRefs } from '@solid-primitives/refs';\nimport { Chart, ChartData, ChartItem, ChartOptions, Plugin } from 'chart.js';\nimport { Component, createEffect, mergeProps, on, onCleanup, onMount } from 'solid-js';\nimport { unwrap } from 'solid-js/store';\n\nimport { ChartProps } from './types';\n\nexport const DefaultChart: Component<ChartProps> = (props) => {\n  let retryCount = 0;\n  let canvasRef: HTMLCanvasElement | null;\n  let chart: Chart | undefined;\n\n  const merged = mergeProps(\n    {\n      width: 512,\n      height: 512,\n      type: 'line' as const,\n      data: {} as ChartData,\n      options: { responsive: true } as ChartOptions,\n      plugins: [] as Plugin[],\n    },\n    props,\n  );\n\n  const init = () => {\n    if (!canvasRef) return;\n\n    // Is the canvas actually in the document?\n    if (!canvasRef.isConnected) {\n      retryCount++;\n\n      // Warn if it takes an abnormally long time (> 1 second)\n      // Assuming ~60fps, 60 retries is roughly 1 second.\n      if (retryCount === 60) {\n        // eslint-disable-next-line no-console\n        console.warn('Solid-Chart: Canvas layout is delayed. Still retrying...');\n      }\n\n      requestAnimationFrame(init);\n      return;\n    }\n\n    // Success! Reset counter and proceed\n    retryCount = 0;\n\n    const ctx = canvasRef.getContext('2d') as ChartItem;\n\n    // Clean unwrap and a safe copy of options\n    const rawOptions = unwrap(merged.options);\n    const configOptions = { ...rawOptions };\n\n    // Handle the radar scale issue without mutating props\n    if (merged.type !== 'radar' && configOptions.scales?.r) {\n      const { r: _, ...otherScales } = configOptions.scales;\n      configOptions.scales = otherScales;\n    }\n\n    chart = new Chart(ctx, {\n      type: merged.type,\n      data: unwrap(merged.data), // unwrap stores before passing to external libs\n      options: configOptions,\n      plugins: merged.plugins,\n    });\n  };\n\n  onMount(() => init());\n\n  createEffect(\n    on(\n      () => merged.data,\n      (newData) => {\n        if (chart) {\n          chart.data = unwrap(newData);\n          chart.update('none'); // Use 'none' for better performance on data updates\n        }\n      },\n      { defer: true },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => merged.options,\n      (newOptions) => {\n        if (chart) {\n          chart.options = unwrap(newOptions);\n          chart.update();\n        }\n      },\n      { defer: true },\n    ),\n  );\n\n  createEffect(\n    on(\n      [() => merged.width, () => merged.height],\n      () => chart?.resize(merged.width, merged.height),\n      { defer: true },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => merged.type,\n      () => {\n        if (chart) {\n          chart.destroy();\n          init();\n        }\n      },\n      { defer: true },\n    ),\n  );\n\n  onCleanup(() => {\n    chart?.destroy();\n    // Standard cleanup for the ref\n    mergeRefs(props.ref, null);\n  });\n\n  return (\n    <canvas\n      ref={mergeRefs(props.ref, (el) => (canvasRef = el))}\n      height={merged.height}\n      width={merged.width}\n    >\n      {merged.fallback}\n    </canvas>\n  );\n};\n","import {\n  ArcElement,\n  BarController,\n  BarElement,\n  BubbleController,\n  CategoryScale,\n  Chart,\n  ChartComponent,\n  Colors,\n  DoughnutController,\n  Legend,\n  LinearScale,\n  LineController,\n  LineElement,\n  PieController,\n  PointElement,\n  PolarAreaController,\n  RadarController,\n  RadialLinearScale,\n  ScatterController,\n  SubTitle,\n  Title,\n  Tooltip,\n} from 'chart.js';\n\n/**\n * Global registration helper for custom components and plugins.\n * Use this to register 3rd party plugins or custom scales.\n */\nexport const registerComponent = (...args: ChartComponent[]) => Chart.register(...args);\n\n/**\n * Essential plugins most charts need.\n */\nexport const registerCore = () => registerComponent(Tooltip, Legend);\n\n/**\n * Extra standard plugins for titles and automatic color palettes.\n */\nexport const registerCoreExtra = () => registerComponent(Title, Tooltip, Legend, Colors, SubTitle);\n\n/**\n * Essential for Line chart.\n */\nexport const registerLine = () =>\n  registerComponent(LineController, CategoryScale, LinearScale, PointElement, LineElement);\n\n/**\n * Essential for Bar chart.\n */\nexport const registerBar = () =>\n  registerComponent(BarController, CategoryScale, LinearScale, BarElement);\n\n/**\n * Essential for Radar chart.\n */\nexport const registerRadar = () =>\n  registerComponent(RadarController, RadialLinearScale, PointElement, LineElement);\n\n/**\n * Essential for Doughnut chart.\n */\nexport const registerDoughnut = () => registerComponent(DoughnutController, ArcElement);\n\n/**\n * Essential for Pie chart.\n */\nexport const registerPie = () => registerComponent(PieController, ArcElement);\n\n/**\n * Essential for PolarArea chart.\n */\nexport const registerPolarArea = () =>\n  registerComponent(PolarAreaController, RadialLinearScale, ArcElement);\n\n/**\n * Essential for Bubble chart.\n */\nexport const registerBubble = () => registerComponent(BubbleController, LinearScale, PointElement);\n\n/**\n * Essential for Scatter chart.\n */\nexport const registerScatter = () =>\n  registerComponent(ScatterController, LinearScale, PointElement);\n","import { Component } from 'solid-js';\n\nimport { DefaultChart } from './chart';\nimport type { ChartProps } from './types';\n\n// Omit 'type' from props since these components define the type themselves\nexport type TypedChartProps = Omit<ChartProps, 'type'>;\ntype TypedChart = Component<TypedChartProps>;\n\nexport const Line: TypedChart = (props) => <DefaultChart type=\"line\" {...props} />;\nexport const Bar: TypedChart = (props) => <DefaultChart type=\"bar\" {...props} />;\nexport const Radar: TypedChart = (props) => <DefaultChart type=\"radar\" {...props} />;\nexport const Doughnut: TypedChart = (props) => <DefaultChart type=\"doughnut\" {...props} />;\nexport const PolarArea: TypedChart = (props) => <DefaultChart type=\"polarArea\" {...props} />;\nexport const Bubble: TypedChart = (props) => <DefaultChart type=\"bubble\" {...props} />;\nexport const Pie: TypedChart = (props) => <DefaultChart type=\"pie\" {...props} />;\nexport const Scatter: TypedChart = (props) => <DefaultChart type=\"scatter\" {...props} />;\n"],"names":["DefaultChart","props","retryCount","canvasRef","chart","merged","mergeProps","width","height","type","data","options","responsive","plugins","init","isConnected","console","warn","requestAnimationFrame","ctx","getContext","configOptions","unwrap","rawOptions","scales","r","_","otherScales","Chart","onMount","createEffect","on","newData","update","defer","newOptions","resize","destroy","onCleanup","mergeRefs","ref","_el$","_tmpl$","_ref$","el","_$use","_$insert","fallback","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","registerComponent","args","registerCore","Tooltip","Legend","registerCoreExtra","Title","Colors","SubTitle","registerLine","LineController","CategoryScale","LinearScale","PointElement","LineElement","registerBar","BarController","BarElement","registerRadar","RadarController","RadialLinearScale","registerDoughnut","DoughnutController","ArcElement","registerPie","PieController","registerPolarArea","PolarAreaController","registerBubble","BubbleController","registerScatter","ScatterController","Line","_$createComponent","_$mergeProps","Bar","Radar","Doughnut","PolarArea","Bubble","Pie","Scatter"],"mappings":"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"}
+{"version":3,"file":"solid-chart.js","sources":["../src/chart.tsx","../src/registry.ts","../src/typedCharts.tsx"],"sourcesContent":["import type { ChartData, ChartItem, ChartOptions, Plugin } from 'chart.js';\nimport type { Component } from 'solid-js';\nimport type { ChartProps } from './types';\n\nimport { createEffect, mergeProps, on, onCleanup, onMount } from 'solid-js';\nimport { unwrap } from 'solid-js/store';\n\nimport { mergeRefs } from '@solid-primitives/refs';\nimport { Chart } from 'chart.js';\n\nconst MAX_RETRIES = 300; // ~5 seconds of trying\n\nexport const DefaultChart: Component<ChartProps> = (props) => {\n  let retryCount = 0;\n  let canvasRef: HTMLCanvasElement | null;\n  let chart: Chart | undefined;\n\n  const merged = mergeProps(\n    {\n      width: 512,\n      height: 512,\n      type: 'line' as const,\n      data: {} as ChartData,\n      options: { responsive: true } as ChartOptions,\n      plugins: [] as Plugin[],\n    },\n    props,\n  );\n\n  const init = () => {\n    if (!canvasRef) return;\n\n    // Is the canvas actually in the document?\n    if (!canvasRef.isConnected) {\n      retryCount++;\n\n      // Warns every ~2 second if it's still failing\n      // Assuming ~60fps, 60 retries is roughly 1 second.\n      if (retryCount % 120 === 0) {\n        // eslint-disable-next-line no-console\n        console.warn('Solid-Chart: Canvas layout is delayed. Still retrying...');\n      }\n\n      if (retryCount >= MAX_RETRIES) {\n        // eslint-disable-next-line no-console\n        console.error('Solid-Chart: Initialisation failed. Canvas never connected to DOM.');\n        return; // Stop retrying\n      }\n\n      requestAnimationFrame(init);\n      return;\n    }\n\n    // Success! Reset counter and proceed\n    retryCount = 0;\n\n    const ctx = canvasRef.getContext('2d') as ChartItem;\n\n    // Clean unwrap and a safe copy of options\n    const rawOptions = unwrap(merged.options);\n    const configOptions = { ...rawOptions };\n\n    // Handle the radar scale issue without mutating props\n    if (merged.type !== 'radar' && configOptions.scales?.r) {\n      const { r: _, ...otherScales } = configOptions.scales;\n      configOptions.scales = otherScales;\n    }\n\n    chart = new Chart(ctx, {\n      type: merged.type,\n      data: unwrap(merged.data), // unwrap stores before passing to external libs\n      options: configOptions,\n      plugins: merged.plugins,\n    });\n  };\n\n  onMount(() => init());\n\n  createEffect(\n    on(\n      () => merged.data,\n      (newData) => {\n        if (chart) {\n          chart.data = unwrap(newData);\n          chart.update('none'); // Use 'none' for better performance on data updates\n        }\n      },\n      { defer: true },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => merged.options,\n      (newOptions) => {\n        if (chart) {\n          chart.options = unwrap(newOptions);\n          chart.update();\n        }\n      },\n      { defer: true },\n    ),\n  );\n\n  createEffect(\n    on(\n      [() => merged.width, () => merged.height],\n      () => chart?.resize(merged.width, merged.height),\n      { defer: true },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => merged.type,\n      () => {\n        if (chart) {\n          chart.destroy();\n          init();\n        }\n      },\n      { defer: true },\n    ),\n  );\n\n  onCleanup(() => {\n    chart?.destroy();\n    // Standard cleanup for the ref\n    mergeRefs(props.ref, null);\n  });\n\n  return (\n    <canvas\n      ref={mergeRefs(props.ref, (el) => (canvasRef = el))}\n      height={merged.height}\n      width={merged.width}\n    >\n      {merged.fallback}\n    </canvas>\n  );\n};\n","import type { ChartComponent } from 'chart.js';\n\nimport {\n  ArcElement,\n  BarController,\n  BarElement,\n  BubbleController,\n  CategoryScale,\n  Chart,\n  Colors,\n  DoughnutController,\n  Legend,\n  LinearScale,\n  LineController,\n  LineElement,\n  PieController,\n  PointElement,\n  PolarAreaController,\n  RadarController,\n  RadialLinearScale,\n  ScatterController,\n  SubTitle,\n  Title,\n  Tooltip,\n} from 'chart.js';\n\n/**\n * Global registration helper for custom components and plugins.\n * Use this to register 3rd party plugins or custom scales.\n */\nexport const registerComponent = (...args: ChartComponent[]) => Chart.register(...args);\n\n/**\n * Essential plugins most charts need.\n */\nexport const registerCore = () => registerComponent(Tooltip, Legend);\n\n/**\n * Extra standard plugins for titles and automatic color palettes.\n */\nexport const registerCoreExtra = () => registerComponent(Title, Tooltip, Legend, Colors, SubTitle);\n\n/**\n * Essential for Line chart.\n */\nexport const registerLine = () =>\n  registerComponent(LineController, CategoryScale, LinearScale, PointElement, LineElement);\n\n/**\n * Essential for Bar chart.\n */\nexport const registerBar = () =>\n  registerComponent(BarController, CategoryScale, LinearScale, BarElement);\n\n/**\n * Essential for Radar chart.\n */\nexport const registerRadar = () =>\n  registerComponent(RadarController, RadialLinearScale, PointElement, LineElement);\n\n/**\n * Essential for Doughnut chart.\n */\nexport const registerDoughnut = () => registerComponent(DoughnutController, ArcElement);\n\n/**\n * Essential for Pie chart.\n */\nexport const registerPie = () => registerComponent(PieController, ArcElement);\n\n/**\n * Essential for PolarArea chart.\n */\nexport const registerPolarArea = () =>\n  registerComponent(PolarAreaController, RadialLinearScale, ArcElement);\n\n/**\n * Essential for Bubble chart.\n */\nexport const registerBubble = () => registerComponent(BubbleController, LinearScale, PointElement);\n\n/**\n * Essential for Scatter chart.\n */\nexport const registerScatter = () =>\n  registerComponent(ScatterController, LinearScale, PointElement);\n","import type { ChartProps } from './types';\nimport type { Component } from 'solid-js';\n\nimport { DefaultChart } from './chart';\n\n// Omit 'type' from props since these components define the type themselves\nexport type TypedChartProps = Omit<ChartProps, 'type'>;\ntype TypedChart = Component<TypedChartProps>;\n\nexport const Line: TypedChart = (props) => <DefaultChart {...props} type=\"line\" />;\nexport const Bar: TypedChart = (props) => <DefaultChart {...props} type=\"bar\" />;\nexport const Radar: TypedChart = (props) => <DefaultChart {...props} type=\"radar\" />;\nexport const Doughnut: TypedChart = (props) => <DefaultChart {...props} type=\"doughnut\" />;\nexport const PolarArea: TypedChart = (props) => <DefaultChart {...props} type=\"polarArea\" />;\nexport const Bubble: TypedChart = (props) => <DefaultChart {...props} type=\"bubble\" />;\nexport const Pie: TypedChart = (props) => <DefaultChart {...props} type=\"pie\" />;\nexport const Scatter: TypedChart = (props) => <DefaultChart {...props} type=\"scatter\" />;\n"],"names":["MAX_RETRIES","DefaultChart","props","retryCount","canvasRef","chart","merged","mergeProps","width","height","type","data","options","responsive","plugins","init","isConnected","console","warn","error","requestAnimationFrame","ctx","getContext","configOptions","unwrap","rawOptions","scales","r","_","otherScales","Chart","onMount","createEffect","on","newData","update","defer","newOptions","resize","destroy","onCleanup","mergeRefs","ref","_el$","_tmpl$","_ref$","el","_$use","_$insert","fallback","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","registerComponent","args","registerCore","Tooltip","Legend","registerCoreExtra","Title","Colors","SubTitle","registerLine","LineController","CategoryScale","LinearScale","PointElement","LineElement","registerBar","BarController","BarElement","registerRadar","RadarController","RadialLinearScale","registerDoughnut","DoughnutController","ArcElement","registerPie","PieController","registerPolarArea","PolarAreaController","registerBubble","BubbleController","registerScatter","ScatterController","Line","_$createComponent","_$mergeProps","Bar","Radar","Doughnut","PolarArea","Bubble","Pie","Scatter"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amad3v/solid-chart",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "author": {
     "name": "Mohamed JOUINI",
     "email": "amad3v@gmail.com",
@@ -41,7 +41,7 @@
     "@typescript-eslint/parser": "^8.52.0",
     "eslint": "^9.39.2",
     "eslint-import-resolver-typescript": "^4.4.4",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-import-x": "^4.16.1",
     "eslint-plugin-solid": "^0.14.5",
     "globals": "^17.0.0",
     "pathe": "^2.0.3",
@@ -71,7 +71,8 @@
   "scripts": {
     "dev": "vite",
     "build": "rimraf ./dist && vite build",
-    "lint": "eslint ./src -c eslint.config.js --fix",
+    "lint": "eslint ./src -c eslint.config.js",
+    "lint:fix": "eslint ./src -c eslint.config.js --fix",
     "fmt": "prettier --write \"**/*.{mjs,cjs,js,jsx,ts,tsx,json}\"",
     "lint:fmt": "pnpm fmt && pnpm lint"
   }

package/src/chart.tsx

@@ -1,9 +1,14 @@
-import { mergeRefs } from '@solid-primitives/refs';
-import { Chart, ChartData, ChartItem, ChartOptions, Plugin } from 'chart.js';
-import { Component, createEffect, mergeProps, on, onCleanup, onMount } from 'solid-js';
+import type { ChartData, ChartItem, ChartOptions, Plugin } from 'chart.js';
+import type { Component } from 'solid-js';
+import type { ChartProps } from './types';
+
+import { createEffect, mergeProps, on, onCleanup, onMount } from 'solid-js';
 import { unwrap } from 'solid-js/store';
 
-import { ChartProps } from './types';
+import { mergeRefs } from '@solid-primitives/refs';
+import { Chart } from 'chart.js';
+
+const MAX_RETRIES = 300; // ~5 seconds of trying
 
 export const DefaultChart: Component<ChartProps> = (props) => {
   let retryCount = 0;
@@ -29,13 +34,19 @@ export const DefaultChart: Component<ChartProps> = (props) => {
     if (!canvasRef.isConnected) {
       retryCount++;
 
-      // Warn if it takes an abnormally long time (> 1 second)
+      // Warns every ~2 second if it's still failing
       // Assuming ~60fps, 60 retries is roughly 1 second.
-      if (retryCount === 60) {
+      if (retryCount % 120 === 0) {
         // eslint-disable-next-line no-console
         console.warn('Solid-Chart: Canvas layout is delayed. Still retrying...');
       }
 
+      if (retryCount >= MAX_RETRIES) {
+        // eslint-disable-next-line no-console
+        console.error('Solid-Chart: Initialisation failed. Canvas never connected to DOM.');
+        return; // Stop retrying
+      }
+
       requestAnimationFrame(init);
       return;
     }

package/src/index.ts

@@ -12,6 +12,6 @@ export {
   registerRadar,
   registerScatter,
 } from './registry';
-export { Bar, Bubble, Doughnut, Line, Pie, PolarArea, Radar, Scatter } from './typedCharts';
 export type { TypedChartProps } from './typedCharts';
+export { Bar, Bubble, Doughnut, Line, Pie, PolarArea, Radar, Scatter } from './typedCharts';
 export type { ChartProps } from './types';

package/src/registry.ts

@@ -1,3 +1,5 @@
+import type { ChartComponent } from 'chart.js';
+
 import {
   ArcElement,
   BarController,
@@ -5,7 +7,6 @@ import {
   BubbleController,
   CategoryScale,
   Chart,
-  ChartComponent,
   Colors,
   DoughnutController,
   Legend,

package/src/typedCharts.tsx

@@ -1,17 +1,17 @@
-import { Component } from 'solid-js';
+import type { ChartProps } from './types';
+import type { Component } from 'solid-js';
 
 import { DefaultChart } from './chart';
-import type { ChartProps } from './types';
 
 // Omit 'type' from props since these components define the type themselves
 export type TypedChartProps = Omit<ChartProps, 'type'>;
 type TypedChart = Component<TypedChartProps>;
 
-export const Line: TypedChart = (props) => <DefaultChart type="line" {...props} />;
-export const Bar: TypedChart = (props) => <DefaultChart type="bar" {...props} />;
-export const Radar: TypedChart = (props) => <DefaultChart type="radar" {...props} />;
-export const Doughnut: TypedChart = (props) => <DefaultChart type="doughnut" {...props} />;
-export const PolarArea: TypedChart = (props) => <DefaultChart type="polarArea" {...props} />;
-export const Bubble: TypedChart = (props) => <DefaultChart type="bubble" {...props} />;
-export const Pie: TypedChart = (props) => <DefaultChart type="pie" {...props} />;
-export const Scatter: TypedChart = (props) => <DefaultChart type="scatter" {...props} />;
+export const Line: TypedChart = (props) => <DefaultChart {...props} type="line" />;
+export const Bar: TypedChart = (props) => <DefaultChart {...props} type="bar" />;
+export const Radar: TypedChart = (props) => <DefaultChart {...props} type="radar" />;
+export const Doughnut: TypedChart = (props) => <DefaultChart {...props} type="doughnut" />;
+export const PolarArea: TypedChart = (props) => <DefaultChart {...props} type="polarArea" />;
+export const Bubble: TypedChart = (props) => <DefaultChart {...props} type="bubble" />;
+export const Pie: TypedChart = (props) => <DefaultChart {...props} type="pie" />;
+export const Scatter: TypedChart = (props) => <DefaultChart {...props} type="scatter" />;