Solid store solid 2

.changeset/pre.json

@@ -0,0 +1,4 @@
+{
+  "mode": "pre",
+  "tag": "rc"
+}

.changeset/solid-store-solid-2.md

@@ -0,0 +1,8 @@
+---
+'@tanstack/solid-store': minor
+---
+
+Support Solid 2. `@tanstack/solid-store` now requires `solid-js` 2 (`>=2.0.0-rc.19 <3.0.0`); stay on 0.11.x for Solid 1.
+
+- `useSelector` (and `useAtom`, `useStore`, `_useStore`) work unchanged. As with every Solid 2 signal, a value read right after a store write outside a reactive scope shows up after the next flush (`flush()` from `solid-js`, or the next microtask).
+- `createStoreContext`'s `StoreProvider` renders the Solid 2 context directly and no longer needs a JSX runtime, so the adapter depends on `solid-js` only.

.github/workflows/release.yml

@@ -2,7 +2,7 @@ name: Release
 
 on:
   push:
-    branches: [main, alpha, beta]
+    branches: [main, alpha, beta, '*-pre']
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.number || github.ref }}

docs/installation.md

@@ -43,7 +43,7 @@ TanStack Store is compatible with Angular 19+
 npm install @tanstack/solid-store
 ```
 
-TanStack Store is compatible with Solid and SolidStart.
+`@tanstack/solid-store` 0.12 and later work with Solid 2. For Solid 1, install `@tanstack/solid-store@0.11`.
 
 ## Svelte
 

examples/solid/atoms/package.json

@@ -9,12 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@solidjs/web": "^2.0.0-rc.19",
     "@tanstack/solid-store": "^0.11.2",
-    "solid-js": "^1.9.12"
+    "solid-js": "^2.0.0-rc.19"
   },
   "devDependencies": {
+    "@solidjs/vite-plugin": "^3.0.0-next.51",
     "typescript": "6.0.3",
-    "vite": "^8.0.8",
-    "vite-plugin-solid": "^2.11.12"
+    "vite": "^8.0.8"
   }
 }

examples/solid/atoms/src/index.tsx

@@ -1,4 +1,4 @@
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import { createAtom, useAtom, useSelector } from '@tanstack/solid-store'
 
 // Optionally, you can create atoms outside of Solid components at module scope

examples/solid/atoms/tsconfig.json

@@ -11,7 +11,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-    "jsxImportSource": "solid-js",
+    "jsxImportSource": "@solidjs/web",
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

examples/solid/atoms/vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vite'
-import solid from 'vite-plugin-solid'
+import solid from '@solidjs/vite-plugin'
 
 export default defineConfig({
   plugins: [solid()],

examples/solid/simple/package.json

@@ -9,12 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@solidjs/web": "^2.0.0-rc.19",
     "@tanstack/solid-store": "^0.11.2",
-    "solid-js": "^1.9.12"
+    "solid-js": "^2.0.0-rc.19"
   },
   "devDependencies": {
+    "@solidjs/vite-plugin": "^3.0.0-next.51",
     "typescript": "6.0.3",
-    "vite": "^8.0.8",
-    "vite-plugin-solid": "^2.11.12"
+    "vite": "^8.0.8"
   }
 }

examples/solid/simple/src/index.tsx

@@ -1,5 +1,5 @@
 import { createStore, useSelector } from '@tanstack/solid-store'
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 
 // You can instantiate a Store outside of Solid components too!
 export const store = createStore({

examples/solid/simple/tsconfig.json

@@ -13,7 +13,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-    "jsxImportSource": "solid-js",
+    "jsxImportSource": "@solidjs/web",
 
     /* Linting */
     "strict": true,

examples/solid/simple/vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vite'
-import solid from 'vite-plugin-solid'
+import solid from '@solidjs/vite-plugin'
 
 export default defineConfig({
   plugins: [solid()],

examples/solid/store-actions/package.json

@@ -9,12 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@solidjs/web": "^2.0.0-rc.19",
     "@tanstack/solid-store": "^0.11.2",
-    "solid-js": "^1.9.12"
+    "solid-js": "^2.0.0-rc.19"
   },
   "devDependencies": {
+    "@solidjs/vite-plugin": "^3.0.0-next.51",
     "typescript": "6.0.3",
-    "vite": "^8.0.8",
-    "vite-plugin-solid": "^2.11.12"
+    "vite": "^8.0.8"
   }
 }

examples/solid/store-actions/src/index.tsx

@@ -1,4 +1,4 @@
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import { createStore, _useStore, useSelector } from '@tanstack/solid-store'
 
 // Optionally, you can create stores outside of Solid components at module scope

examples/solid/store-actions/tsconfig.json

@@ -11,7 +11,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-    "jsxImportSource": "solid-js",
+    "jsxImportSource": "@solidjs/web",
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

examples/solid/store-actions/vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vite'
-import solid from 'vite-plugin-solid'
+import solid from '@solidjs/vite-plugin'
 
 export default defineConfig({
   plugins: [solid()],

examples/solid/store-context/package.json

@@ -9,12 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@solidjs/web": "^2.0.0-rc.19",
     "@tanstack/solid-store": "^0.11.2",
-    "solid-js": "^1.9.12"
+    "solid-js": "^2.0.0-rc.19"
   },
   "devDependencies": {
+    "@solidjs/vite-plugin": "^3.0.0-next.51",
     "typescript": "6.0.3",
-    "vite": "^8.0.8",
-    "vite-plugin-solid": "^2.11.12"
+    "vite": "^8.0.8"
   }
 }

examples/solid/store-context/src/index.tsx

@@ -1,4 +1,4 @@
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import {
   createAtom,
   createStore,

examples/solid/store-context/tsconfig.json

@@ -11,7 +11,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-    "jsxImportSource": "solid-js",
+    "jsxImportSource": "@solidjs/web",
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

examples/solid/store-context/vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vite'
-import solid from 'vite-plugin-solid'
+import solid from '@solidjs/vite-plugin'
 
 export default defineConfig({
   plugins: [solid()],

examples/solid/stores/package.json

@@ -9,12 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@solidjs/web": "^2.0.0-rc.19",
     "@tanstack/solid-store": "^0.11.2",
-    "solid-js": "^1.9.12"
+    "solid-js": "^2.0.0-rc.19"
   },
   "devDependencies": {
+    "@solidjs/vite-plugin": "^3.0.0-next.51",
     "typescript": "6.0.3",
-    "vite": "^8.0.8",
-    "vite-plugin-solid": "^2.11.12"
+    "vite": "^8.0.8"
   }
 }

examples/solid/stores/src/index.tsx

@@ -1,4 +1,4 @@
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import { createStore, useSelector } from '@tanstack/solid-store'
 
 // Optionally, you can create stores outside of Solid components at module scope

examples/solid/stores/tsconfig.json

@@ -11,7 +11,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-    "jsxImportSource": "solid-js",
+    "jsxImportSource": "@solidjs/web",
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

examples/solid/stores/vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vite'
-import solid from 'vite-plugin-solid'
+import solid from '@solidjs/vite-plugin'
 
 export default defineConfig({
   plugins: [solid()],

package.json

@@ -17,7 +17,7 @@
     "test:ci": "nx run-many --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build",
     "test:eslint": "nx affected --target=test:eslint",
     "test:format": "pnpm run prettier --check",
-    "test:sherif": "sherif",
+    "test:sherif": "sherif -i solid-js",
     "test:lib": "nx affected --target=test:lib --exclude=examples/**",
     "test:lib:dev": "pnpm run test:lib && nx watch --all -- pnpm run test:lib",
     "test:build": "nx affected --target=test:build --exclude=examples/**",

packages/solid-store/package.json

@@ -52,11 +52,12 @@
     "@tanstack/store": "workspace:*"
   },
   "devDependencies": {
-    "@solidjs/testing-library": "^0.8.10",
-    "solid-js": "^1.9.12",
-    "vite-plugin-solid": "^2.11.12"
+    "@solidjs/testing-library": "^1.0.0-rc.2",
+    "@solidjs/vite-plugin": "^3.0.0-next.51",
+    "@solidjs/web": "^2.0.0-rc.19",
+    "solid-js": "^2.0.0-rc.19"
   },
   "peerDependencies": {
-    "solid-js": "^1.6.0"
+    "solid-js": ">=2.0.0-rc.19 <3.0.0"
   }
 }

packages/solid-store/src/createStoreContext.tsx → packages/solid-store/src/createStoreContext.ts

@@ -1,5 +1,5 @@
-import { createContext, useContext } from 'solid-js'
-import type { JSX, ParentProps } from 'solid-js'
+import { createComponent, createContext, useContext } from 'solid-js'
+import type { Element, ParentProps } from 'solid-js'
 
 /**
  * Creates a typed Solid context for sharing a bundle of atoms and stores with a
@@ -41,21 +41,30 @@ import type { JSX, ParentProps } from 'solid-js'
  * @throws When `useStoreContext()` is called outside the matching `StoreProvider`.
  */
 export function createStoreContext<TValue extends object>(): {
-  StoreProvider: (props: ParentProps<{ value: TValue }>) => JSX.Element
+  StoreProvider: (props: ParentProps<{ value: TValue }>) => Element
   useStoreContext: () => TValue
 } {
-  const Context = createContext<TValue>()
+  // `null` default: Solid 2 throws its own error for a default-less context,
+  // and this keeps the clearer message below.
+  const Context = createContext<TValue | null>(null)
 
+  // Built without JSX so the adapter only depends on `solid-js`, not on the
+  // `@solidjs/web` renderer that compiled JSX imports from.
   function StoreProvider(props: ParentProps<{ value: TValue }>) {
-    return (
-      <Context.Provider value={props.value}>{props.children}</Context.Provider>
-    )
+    return createComponent(Context, {
+      get value() {
+        return props.value
+      },
+      get children() {
+        return props.children
+      },
+    })
   }
 
   function useStoreContext(): TValue {
     const value = useContext(Context)
 
-    if (value === undefined) {
+    if (value === null) {
       throw new Error('Missing StoreProvider for StoreContext')
     }
 

packages/solid-store/src/useSelector.ts

@@ -43,9 +43,18 @@ export function useSelector<TSource, TSelected = NoInfer<TSource>>(
   options?: UseSelectorOptions<TSelected>,
 ): Accessor<TSelected> {
   const compare = options?.compare ?? defaultCompare
-  const [signal, setSignal] = createSignal(selector(source.get()), {
-    equals: compare,
-  })
+  const initial = selector(source.get())
+  // Solid 2 reads a function passed to `createSignal` as a compute function,
+  // so a selected function value is wrapped to stay a plain value.
+  const [signal, setSignal] = createSignal<TSelected>(
+    (typeof initial === 'function' ? () => initial : initial) as any,
+    {
+      equals: compare,
+      // Stores notify synchronously from wherever `setState` runs, which can
+      // be inside an owned scope such as an effect.
+      ownedWrite: true,
+    },
+  )
 
   const unsubscribe = source.subscribe((snapshot) => {
     setSignal(() => selector(snapshot))