Solid charts solid 2

.changeset/solid-2-subpath.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/charts': minor
+'@tanstack/solid-charts': minor
+---
+
+Add a Solid 2 adapter at `@tanstack/charts/solid/solid2` (and `@tanstack/solid-charts/solid2`). It takes the same props and exports the same types as the Solid 1 adapter, which is unchanged at `@tanstack/charts/solid`. The `solid-js` peer now accepts `^1.8 || >=2.0.0-rc.19 <3.0.0`, with an optional `@solidjs/web` peer for the Solid 2 entry.

docs/framework/solid/adapter.md

@@ -74,5 +74,23 @@ Read the context through `tooltip` instead of destructuring it so Solid tracks
 focused points and pinned state. The shared host owns focus, placement,
 portaling, and dismissal; Solid owns the returned component lifecycle.
 
+## Solid 2
+
+Solid 2 applications import the same component from the `solid2` subpath:
+
+```sh
+pnpm add @tanstack/charts solid-js@next @solidjs/web@next
+```
+
+```tsx
+import { Chart } from '@tanstack/charts/solid/solid2'
+```
+
+It takes the same props and exports the same types. `style` uses
+`JSX.CSSProperties` from `@solidjs/web`, and `ChartTooltipBodyRenderContext`
+types `defaultBody` as Solid 2's `Element`. Props flow through a split
+`createEffect` and the host mounts in `onSettled`. `tooltip.dismiss` is a
+stable function, so `onClick={tooltip.dismiss}` needs no tracking.
+
 See the [`Chart` reference](./reference/chart.md), [SSR and hydration](../../guides/ssr-and-hydration.md),
 and [Chart Definition API](../../reference/chart-definitions.md).

docs/installation.md

@@ -96,7 +96,8 @@ D3 dependency.
 | `@tanstack/charts/react-native` | React `^19.2.3`, React Native `^0.86.0` or `^0.88.0`, and `react-native-svg` `>=15.15.4 <16` |
 | `@tanstack/charts/preact`       | Preact `>=10`                                                                                |
 | `@tanstack/charts/vue`          | Vue `>=3.5`                                                                                  |
-| `@tanstack/charts/solid`        | Solid `>=1.8`                                                                                |
+| `@tanstack/charts/solid`        | Solid `^1.8`                                                                                 |
+| `@tanstack/charts/solid/solid2` | Solid and `@solidjs/web` `>=2.0.0-rc.19 <3`                                                  |
 | `@tanstack/charts/svelte`       | Svelte `^5.20.0`                                                                             |
 | `@tanstack/charts/angular`      | Angular core and platform browser `>=19`                                                     |
 | `@tanstack/charts/lit`          | Lit `>=3.1.3`                                                                                |

docs/reference/index.md

@@ -112,6 +112,7 @@ aggregate `/scales` export.
 | `@tanstack/charts/preact`               | Preact `Chart` and chart prop, definition, point, and tooltip-body types                                                                                                                                                        |
 | `@tanstack/charts/vue`                  | Vue `Chart` and chart prop, definition, point, and tooltip-slot types                                                                                                                                                           |
 | `@tanstack/charts/solid`                | Solid `Chart` and chart prop, definition, point, and tooltip-body types                                                                                                                                                         |
+| `@tanstack/charts/solid/solid2`         | Solid 2 `Chart` and the same chart prop, definition, point, and tooltip-body types                                                                                                                                              |
 | `@tanstack/charts/svelte`               | Svelte `Chart` and chart prop, definition, point, and tooltip-snippet types                                                                                                                                                     |
 | `@tanstack/charts/angular`              | Angular `Chart`, tooltip-body directive, chart option, definition, point, and template-context types                                                                                                                            |
 | `@tanstack/charts/lit`                  | Lit `Chart`, `defineChartElement`, chart prop, definition, point, and tooltip-body types                                                                                                                                        |

nx.json

@@ -84,6 +84,8 @@
       "{workspaceRoot}/packages/charts-scales/**/*",
       "{workspaceRoot}/packages/*-charts/**/*",
       "{workspaceRoot}/packages/react-18-compat/package.json",
+      "{workspaceRoot}/packages/solid-2-compat/package.json",
+      "{workspaceRoot}/scripts/solid-2-compat.mjs",
       "{workspaceRoot}/examples/charts-react-native/**/*",
       "{workspaceRoot}/examples/charts-expo/**/*",
       "!{workspaceRoot}/packages/*/dist/**/*",
@@ -109,6 +111,8 @@
       "{workspaceRoot}/vitest.solid*.config.ts",
       "{workspaceRoot}/packages/charts-core/**/*",
       "{workspaceRoot}/packages/solid-charts/**/*",
+      "{workspaceRoot}/packages/solid-2-compat/package.json",
+      "{workspaceRoot}/scripts/solid-2-compat.mjs",
       "!{workspaceRoot}/packages/*/dist/**/*",
       "!{workspaceRoot}/packages/**/CHANGELOG.md",
       "!{workspaceRoot}/packages/**/README.md",
@@ -191,6 +195,14 @@
       "cache": true,
       "inputs": ["testSolid"]
     },
+    "test-solid2": {
+      "cache": true,
+      "inputs": ["testSolid"]
+    },
+    "test-solid2-ssr": {
+      "cache": true,
+      "inputs": ["testSolid"]
+    },
     "test-svelte": {
       "cache": true,
       "inputs": ["testSvelte"]

packages/charts-core/docs/framework/solid/adapter.md

@@ -74,5 +74,23 @@ Read the context through `tooltip` instead of destructuring it so Solid tracks
 focused points and pinned state. The shared host owns focus, placement,
 portaling, and dismissal; Solid owns the returned component lifecycle.
 
+## Solid 2
+
+Solid 2 applications import the same component from the `solid2` subpath:
+
+```sh
+pnpm add @tanstack/charts solid-js@next @solidjs/web@next
+```
+
+```tsx
+import { Chart } from '@tanstack/charts/solid/solid2'
+```
+
+It takes the same props and exports the same types. `style` uses
+`JSX.CSSProperties` from `@solidjs/web`, and `ChartTooltipBodyRenderContext`
+types `defaultBody` as Solid 2's `Element`. Props flow through a split
+`createEffect` and the host mounts in `onSettled`. `tooltip.dismiss` is a
+stable function, so `onClick={tooltip.dismiss}` needs no tracking.
+
 See the [`Chart` reference](./reference/chart.md), [SSR and hydration](../../guides/ssr-and-hydration.md),
 and [Chart Definition API](../../reference/chart-definitions.md).

packages/charts-core/docs/installation.md

@@ -96,7 +96,8 @@ D3 dependency.
 | `@tanstack/charts/react-native` | React `^19.2.3`, React Native `^0.86.0` or `^0.88.0`, and `react-native-svg` `>=15.15.4 <16` |
 | `@tanstack/charts/preact`       | Preact `>=10`                                                                                |
 | `@tanstack/charts/vue`          | Vue `>=3.5`                                                                                  |
-| `@tanstack/charts/solid`        | Solid `>=1.8`                                                                                |
+| `@tanstack/charts/solid`        | Solid `^1.8`                                                                                 |
+| `@tanstack/charts/solid/solid2` | Solid and `@solidjs/web` `>=2.0.0-rc.19 <3`                                                  |
 | `@tanstack/charts/svelte`       | Svelte `^5.20.0`                                                                             |
 | `@tanstack/charts/angular`      | Angular core and platform browser `>=19`                                                     |
 | `@tanstack/charts/lit`          | Lit `>=3.1.3`                                                                                |

packages/charts-core/docs/reference/index.md

@@ -112,6 +112,7 @@ aggregate `/scales` export.
 | `@tanstack/charts/preact`               | Preact `Chart` and chart prop, definition, point, and tooltip-body types                                                                                                                                                        |
 | `@tanstack/charts/vue`                  | Vue `Chart` and chart prop, definition, point, and tooltip-slot types                                                                                                                                                           |
 | `@tanstack/charts/solid`                | Solid `Chart` and chart prop, definition, point, and tooltip-body types                                                                                                                                                         |
+| `@tanstack/charts/solid/solid2`         | Solid 2 `Chart` and the same chart prop, definition, point, and tooltip-body types                                                                                                                                              |
 | `@tanstack/charts/svelte`               | Svelte `Chart` and chart prop, definition, point, and tooltip-snippet types                                                                                                                                                     |
 | `@tanstack/charts/angular`              | Angular `Chart`, tooltip-body directive, chart option, definition, point, and template-context types                                                                                                                            |
 | `@tanstack/charts/lit`                  | Lit `Chart`, `defineChartElement`, chart prop, definition, point, and tooltip-body types                                                                                                                                        |

packages/charts-core/package.json

@@ -45,6 +45,7 @@
   "peerDependencies": {
     "@angular/core": ">=19",
     "@angular/platform-browser": ">=19",
+    "@solidjs/web": ">=2.0.0-rc.19 <3.0.0",
     "alpinejs": ">=3.15",
     "lit": ">=3.1.3",
     "octane": "^0.1.13",
@@ -53,7 +54,7 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-native": "^0.86.0 || ^0.88.0",
     "react-native-svg": ">=15.15.4 <16",
-    "solid-js": ">=1.8",
+    "solid-js": "^1.8 || >=2.0.0-rc.19 <3.0.0",
     "svelte": "^5.20.0",
     "vue": ">=3.5"
   },
@@ -64,6 +65,9 @@
     "@angular/platform-browser": {
       "optional": true
     },
+    "@solidjs/web": {
+      "optional": true
+    },
     "alpinejs": {
       "optional": true
     },
@@ -188,6 +192,7 @@
     "./scales/point": "./src/scales-point.ts",
     "./scene": "./src/scene.ts",
     "./solid": "./src/solid.ts",
+    "./solid/solid2": "./src/solid-solid2.ts",
     "./svg": "./src/svg.ts",
     "./svg/renderer": "./src/svg-surface.ts",
     "./svg/resources": "./src/svg-resources.ts",
@@ -582,6 +587,11 @@
         "solid": "./dist/solid/index.js",
         "import": "./dist/solid/index.js"
       },
+      "./solid/solid2": {
+        "types": "./dist/solid/solid2/index.d.ts",
+        "solid": "./dist/solid/solid2/index.js",
+        "import": "./dist/solid/solid2/index.js"
+      },
       "./svg": {
         "types": "./dist/svg.d.ts",
         "import": "./dist/svg.js"

packages/charts-core/src/exports.test.ts

@@ -39,6 +39,8 @@ const specializedLoaderSpecifiers = new Set([
   '@tanstack/charts/octane/core',
   '@tanstack/charts/react-native',
   '@tanstack/charts/react-native/tooltip',
+  // Solid 2 resolves from @charts-internal/solid-2-compat (vitest.solid2*).
+  '@tanstack/charts/solid/solid2',
   '@tanstack/charts/svelte',
 ])
 

packages/charts-core/src/solid-solid2.ts

@@ -0,0 +1 @@
+export * from '../../solid-charts/src/solid2/index'

packages/solid-2-compat/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@charts-internal/solid-2-compat",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@solidjs/web": "2.0.0-rc.19",
+    "solid-js": "2.0.0-rc.19"
+  },
+  "devDependencies": {
+    "@solidjs/vite-plugin": "3.0.0-next.52"
+  }
+}

packages/solid-charts/package.json

@@ -19,13 +19,23 @@
     ".": {
       "solid": "./src/index.ts",
       "import": "./src/index.ts"
+    },
+    "./solid2": {
+      "solid": "./src/solid2/index.ts",
+      "import": "./src/solid2/index.ts"
     }
   },
   "dependencies": {
     "@tanstack/charts": "workspace:*"
   },
   "peerDependencies": {
-    "solid-js": ">=1.8"
+    "@solidjs/web": ">=2.0.0-rc.19 <3.0.0",
+    "solid-js": "^1.8 || >=2.0.0-rc.19 <3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@solidjs/web": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "solid-js": "^1.9.13",
@@ -39,6 +49,11 @@
         "types": "./dist/index.d.ts",
         "solid": "./dist/index.js",
         "import": "./dist/index.js"
+      },
+      "./solid2": {
+        "types": "./dist/solid2/index.d.ts",
+        "solid": "./dist/solid2/index.js",
+        "import": "./dist/solid2/index.js"
       }
     }
   }

packages/solid-charts/src/solid2/Chart.ssr.test.tsx

@@ -0,0 +1,35 @@
+/** @jsxImportSource @solidjs/web */
+import { renderToString } from '@solidjs/web'
+import { describe, expect, it } from 'vitest'
+import { defineChart, lineY } from '@tanstack/charts'
+import { scaleLinear } from 'd3-scale'
+import { Chart } from './Chart'
+
+const rows = [
+  { id: 'a', x: 0, y: 2 },
+  { id: 'b', x: 1, y: 4 },
+]
+const definition = defineChart({
+  marks: [lineY(rows, { x: 'x', y: 'y', key: 'id' })],
+  scales: {
+    x: { scale: scaleLinear().domain([0, 1]) },
+    y: { scale: scaleLinear().domain([0, 4]) },
+  },
+})
+
+describe('Solid 2 adapter SSR', () => {
+  it('server-renders complete SVG', () => {
+    const html = renderToString(() => (
+      <Chart
+        definition={definition}
+        width={480}
+        height={260}
+        ariaLabel="Revenue"
+      />
+    ))
+
+    expect(html).toContain('class="ts-chart-host"')
+    expect(html).toContain('<svg')
+    expect(html).toContain('aria-label="Revenue"')
+  })
+})