@amad3v/solid-chart 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 amad3v
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,132 @@
+# solid-chart
+
+---
+
+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.
+---
+> 💡 **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**.
+
+> ⚠️ **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.
+
+## Installation
+```bash
+pnpm add @amad3v/solid-chart chart.js
+# or
+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`):
+```tsx
+import { registerCoreExtra, registerLine, registerBar } from 'solid-chart';
+
+// Registers Tooltip, Legend, Colors, Title, and SubTitle
+registerCoreExtra();
+
+// Registers specific chart requirements
+registerLine();
+registerBar();
+```
+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';
+
+registerComponent(MyPlugin);
+```
+
+## Usage
+Using the library is straightforward. You can use the generic `DefaultChart` or any of the typed exports.
+
+```tsx
+import { Line } from 'solid-chart';
+import { createStore } from 'solid-js/store';
+
+const App = () => {
+  const [data, setData] = createStore({
+    labels: ['January', 'February', 'March', 'April'],
+    datasets: [
+      {
+        label: 'Sales',
+        data: [12, 19, 3, 5],
+        backgroundColor: 'rgba(75, 192, 192, 0.2)',
+        borderColor: 'rgba(75, 192, 192, 1)',
+        borderWidth: 2,
+        tension: 0.4, // Smooth lines
+      },
+    ],
+  });
+
+  return (
+    <div style={{ width: '600px', height: '400px' }}>
+      <Line 
+        data={data} 
+        options={{ 
+          responsive: true,
+          maintainAspectRatio: false 
+        }} 
+      />
+    </div>
+  );
+};
+```
+
+## 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.
+
+## Registration Utilities
+
+| Function                          | Description                                             |
+| --------------------------------- | ------------------------------------------------------- |
+| 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.                 |
+| registerBar                       | Registers requirements for Bar charts.                  |
+| 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). |
+| options | ChartOptions | Chart.js configuration options.                   |
+| width   | number       | Default is 512.                                   |
+| height  | number       | Default is 512.                                   |
+| ref     | Ref          | Access to the underlying HTMLCanvasElement.       |
+
+## 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.
+
+## License
+
+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).
+
+## 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.

package/dist/solid-chart.d.ts

@@ -0,0 +1,140 @@
+import { ChartComponent } from 'chart.js';
+import { ChartData } from 'chart.js';
+import { ChartOptions } from 'chart.js';
+import { ChartTypeRegistry } from 'chart.js';
+import { Component } from 'solid-js';
+import { JSXElement } from 'solid-js';
+import { Plugin as Plugin_2 } from 'chart.js';
+import { Ref } from '@solid-primitives/refs';
+
+export declare const Bar: TypedChart;
+
+export declare const Bubble: TypedChart;
+
+/**
+ * Chart props
+ */
+export declare interface ChartProps {
+    /**
+     * Chart.js chart type
+     */
+    type: keyof ChartTypeRegistry;
+    /**
+     * The data object that is passed into the Chart.js chart
+     * @see https://www.chartjs.org/docs/latest/getting-started/
+     */
+    data?: ChartData;
+    /**
+     * The options object that is passed into the Chart.js chart
+     * @see https://www.chartjs.org/docs/latest/general/options.html
+     * @default {}
+     */
+    options?: ChartOptions;
+    /**
+     * The plugins array that is passed into the Chart.js chart
+     * @see https://www.chartjs.org/docs/latest/developers/plugins.html
+     * @default []
+     */
+    plugins?: Plugin_2[];
+    /**
+     * The width of the canvas element
+     * @default 512
+     */
+    width?: number | undefined;
+    /**
+     * The height of the canvas element
+     * @default 512
+     */
+    height?: number | undefined;
+    /**
+     * The fallback element to render when the canvas cannot be rendered.
+     * @default null
+     */
+    fallback?: JSXElement | null;
+    /**
+     * Support for any other Chart.js options
+     * @default {}
+     */
+    [key: string]: unknown;
+    /**
+     * A ref to the Chart.js instance
+     * @default null
+     */
+    ref?: Ref<HTMLCanvasElement | null>;
+}
+
+export declare const DefaultChart: Component<ChartProps>;
+
+export declare const Doughnut: TypedChart;
+
+export declare const Line: TypedChart;
+
+export declare const Pie: TypedChart;
+
+export declare const PolarArea: TypedChart;
+
+export declare const Radar: TypedChart;
+
+/**
+ * Essential for Bar chart.
+ */
+export declare const registerBar: () => void;
+
+/**
+ * Essential for Bubble chart.
+ */
+export declare const registerBubble: () => void;
+
+/**
+ * Global registration helper for custom components and plugins.
+ * Use this to register 3rd party plugins or custom scales.
+ */
+export declare const registerComponent: (...args: ChartComponent[]) => void;
+
+/**
+ * Essential plugins most charts need.
+ */
+export declare const registerCore: () => void;
+
+/**
+ * Extra standard plugins for titles and automatic color palettes.
+ */
+export declare const registerCoreExtra: () => void;
+
+/**
+ * Essential for Doughnut chart.
+ */
+export declare const registerDoughnut: () => void;
+
+/**
+ * Essential for Line chart.
+ */
+export declare const registerLine: () => void;
+
+/**
+ * Essential for Pie chart.
+ */
+export declare const registerPie: () => void;
+
+/**
+ * Essential for PolarArea chart.
+ */
+export declare const registerPolarArea: () => void;
+
+/**
+ * Essential for Radar chart.
+ */
+export declare const registerRadar: () => void;
+
+/**
+ * Essential for Scatter chart.
+ */
+export declare const registerScatter: () => void;
+
+export declare const Scatter: TypedChart;
+
+declare type TypedChart = Component<TypedChartProps>;
+
+export declare type TypedChartProps = Omit<ChartProps, 'type'>;
+
+export { }

package/dist/solid-chart.js

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

package/dist/solid-chart.js.map

@@ -0,0 +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 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    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","canvasRef","chart","merged","mergeProps","width","height","type","data","options","responsive","plugins","init","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

@@ -0,0 +1,78 @@
+{
+  "name": "@amad3v/solid-chart",
+  "version": "1.0.0",
+  "author": {
+    "name": "Mohamed JOUINI",
+    "email": "amad3v@gmail.com",
+    "url": "https://github.com/amad3v/"
+  },
+  "homepage": "https://github.com/amad3v/solid-chart",
+  "repository": {
+    "type": "github",
+    "url": "https://github.com/amad3v/solid-chart"
+  },
+  "bugs": {
+    "url": "https://github.com/amad3v/solid-chart/issues"
+  },
+  "description": "Chart.js wrapper for SolidJS.",
+  "license": "MIT",
+  "private": false,
+  "sideEffects": false,
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dist/solid-chart.js",
+  "module": "./dist/solid-chart.js",
+  "types": "./dist/solid-chart.d.ts",
+  "solid": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/solid-chart.d.ts",
+      "solid": "./src/index.ts",
+      "import": "./dist/solid-chart.js"
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@types/node": "^25.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.52.0",
+    "@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-solid": "^0.14.5",
+    "globals": "^17.0.0",
+    "pathe": "^2.0.3",
+    "prettier": "^3.7.4",
+    "pretty-quick": "^4.2.2",
+    "rimraf": "^6.1.2",
+    "solid-js": "^1.9.10",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.52.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-solid": "^2.11.10"
+  },
+  "peerDependencies": {
+    "chart.js": "^4.5.1",
+    "solid-js": "^1.9.10"
+  },
+  "keywords": [
+    "solidjs",
+    "chart.js"
+  ],
+  "dependencies": {
+    "@solid-primitives/refs": "^1.1.2"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "rimraf ./dist && vite build",
+    "lint": "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

@@ -0,0 +1,110 @@
+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 { unwrap } from 'solid-js/store';
+
+import { ChartProps } from './types';
+
+export const DefaultChart: Component<ChartProps> = (props) => {
+  let canvasRef: HTMLCanvasElement | null;
+  let chart: Chart | undefined;
+
+  const merged = mergeProps(
+    {
+      width: 512,
+      height: 512,
+      type: 'line' as const,
+      data: {} as ChartData,
+      options: { responsive: true } as ChartOptions,
+      plugins: [] as Plugin[],
+    },
+    props,
+  );
+
+  const init = () => {
+    if (!canvasRef) return;
+    const ctx = canvasRef.getContext('2d') as ChartItem;
+
+    // Clean unwrap and a safe copy of options
+    const rawOptions = unwrap(merged.options);
+    const configOptions = { ...rawOptions };
+
+    // Handle the radar scale issue without mutating props
+    if (merged.type !== 'radar' && configOptions.scales?.r) {
+      const { r: _, ...otherScales } = configOptions.scales;
+      configOptions.scales = otherScales;
+    }
+
+    chart = new Chart(ctx, {
+      type: merged.type,
+      data: unwrap(merged.data), // unwrap stores before passing to external libs
+      options: configOptions,
+      plugins: merged.plugins,
+    });
+  };
+
+  onMount(() => init());
+
+  createEffect(
+    on(
+      () => merged.data,
+      (newData) => {
+        if (chart) {
+          chart.data = unwrap(newData);
+          chart.update('none'); // Use 'none' for better performance on data updates
+        }
+      },
+      { defer: true },
+    ),
+  );
+
+  createEffect(
+    on(
+      () => merged.options,
+      (newOptions) => {
+        if (chart) {
+          chart.options = unwrap(newOptions);
+          chart.update();
+        }
+      },
+      { defer: true },
+    ),
+  );
+
+  createEffect(
+    on(
+      [() => merged.width, () => merged.height],
+      () => chart?.resize(merged.width, merged.height),
+      { defer: true },
+    ),
+  );
+
+  createEffect(
+    on(
+      () => merged.type,
+      () => {
+        if (chart) {
+          chart.destroy();
+          init();
+        }
+      },
+      { defer: true },
+    ),
+  );
+
+  onCleanup(() => {
+    chart?.destroy();
+    // Standard cleanup for the ref
+    mergeRefs(props.ref, null);
+  });
+
+  return (
+    <canvas
+      ref={mergeRefs(props.ref, (el) => (canvasRef = el))}
+      height={merged.height}
+      width={merged.width}
+    >
+      {merged.fallback}
+    </canvas>
+  );
+};

package/src/env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_SOLID_CHART_NAME: string;
+  readonly VITE_SOLID_CHART_VER: string;
+}
+
+export interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+export { DefaultChart } from './chart';
+export {
+  registerBar,
+  registerBubble,
+  registerComponent,
+  registerCore,
+  registerCoreExtra,
+  registerDoughnut,
+  registerLine,
+  registerPie,
+  registerPolarArea,
+  registerRadar,
+  registerScatter,
+} from './registry';
+export { Bar, Bubble, Doughnut, Line, Pie, PolarArea, Radar, Scatter } from './typedCharts';
+export type { TypedChartProps } from './typedCharts';
+export type { ChartProps } from './types';

package/src/registry.ts

@@ -0,0 +1,85 @@
+import {
+  ArcElement,
+  BarController,
+  BarElement,
+  BubbleController,
+  CategoryScale,
+  Chart,
+  ChartComponent,
+  Colors,
+  DoughnutController,
+  Legend,
+  LinearScale,
+  LineController,
+  LineElement,
+  PieController,
+  PointElement,
+  PolarAreaController,
+  RadarController,
+  RadialLinearScale,
+  ScatterController,
+  SubTitle,
+  Title,
+  Tooltip,
+} from 'chart.js';
+
+/**
+ * Global registration helper for custom components and plugins.
+ * Use this to register 3rd party plugins or custom scales.
+ */
+export const registerComponent = (...args: ChartComponent[]) => Chart.register(...args);
+
+/**
+ * Essential plugins most charts need.
+ */
+export const registerCore = () => registerComponent(Tooltip, Legend);
+
+/**
+ * Extra standard plugins for titles and automatic color palettes.
+ */
+export const registerCoreExtra = () => registerComponent(Title, Tooltip, Legend, Colors, SubTitle);
+
+/**
+ * Essential for Line chart.
+ */
+export const registerLine = () =>
+  registerComponent(LineController, CategoryScale, LinearScale, PointElement, LineElement);
+
+/**
+ * Essential for Bar chart.
+ */
+export const registerBar = () =>
+  registerComponent(BarController, CategoryScale, LinearScale, BarElement);
+
+/**
+ * Essential for Radar chart.
+ */
+export const registerRadar = () =>
+  registerComponent(RadarController, RadialLinearScale, PointElement, LineElement);
+
+/**
+ * Essential for Doughnut chart.
+ */
+export const registerDoughnut = () => registerComponent(DoughnutController, ArcElement);
+
+/**
+ * Essential for Pie chart.
+ */
+export const registerPie = () => registerComponent(PieController, ArcElement);
+
+/**
+ * Essential for PolarArea chart.
+ */
+export const registerPolarArea = () =>
+  registerComponent(PolarAreaController, RadialLinearScale, ArcElement);
+
+/**
+ * Essential for Bubble chart.
+ */
+export const registerBubble = () => registerComponent(BubbleController, LinearScale, PointElement);
+
+/**
+ * Essential for Scatter chart.
+ */
+export const registerScatter = () =>
+  registerComponent(ScatterController, LinearScale, PointElement);

package/src/typedCharts.tsx

@@ -0,0 +1,17 @@
+import { 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} />;

package/src/types.ts

@@ -0,0 +1,55 @@
+import type { Ref } from '@solid-primitives/refs';
+import type { ChartData, ChartOptions, ChartTypeRegistry, Plugin } from 'chart.js';
+import type { JSXElement } from 'solid-js';
+
+/**
+ * Chart props
+ */
+export interface ChartProps {
+  /**
+   * Chart.js chart type
+   */
+  type: keyof ChartTypeRegistry;
+  /**
+   * The data object that is passed into the Chart.js chart
+   * @see https://www.chartjs.org/docs/latest/getting-started/
+   */
+  data?: ChartData;
+  /**
+   * The options object that is passed into the Chart.js chart
+   * @see https://www.chartjs.org/docs/latest/general/options.html
+   * @default {}
+   */
+  options?: ChartOptions;
+  /**
+   * The plugins array that is passed into the Chart.js chart
+   * @see https://www.chartjs.org/docs/latest/developers/plugins.html
+   * @default []
+   */
+  plugins?: Plugin[];
+  /**
+   * The width of the canvas element
+   * @default 512
+   */
+  width?: number | undefined;
+  /**
+   * The height of the canvas element
+   * @default 512
+   */
+  height?: number | undefined;
+  /**
+   * The fallback element to render when the canvas cannot be rendered.
+   * @default null
+   */
+  fallback?: JSXElement | null;
+  /**
+   * Support for any other Chart.js options
+   * @default {}
+   */
+  [key: string]: unknown;
+  /**
+   * A ref to the Chart.js instance
+   * @default null
+   */
+  ref?: Ref<HTMLCanvasElement | null>;
+}