feat(solid-hotkeys): support Solid 2

.changeset/pre.json

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

.changeset/solid-hotkeys-solid-2.md

@@ -0,0 +1,12 @@
+---
+'@tanstack/solid-hotkeys': major
+---
+
+Support Solid 2. `@tanstack/solid-hotkeys` now requires `solid-js` 2 (`>=2.0.0-rc.20 <3.0.0`); stay on 1.x for Solid 1.
+
+- The primitives keep their API. Reactive options are tracked by split effects (compute reads the options, the effect applies them), `HotkeysProvider` publishes its store in `onSettled`, and provider props read once at creation are read untracked.
+- `HotkeysProvider` renders the Solid 2 context without JSX, so the adapter depends on `solid-js` only.
+- The internal store selector writes with `ownedWrite`, since store updates arrive from outside the owner.
+- `createHotkeyRegistrations` returns a store reconciled by registration `id`, so `<For>` rows keep their identity when registrations change.
+- As with every Solid 2 signal, values read right after a write outside a reactive scope update after the next flush (`flush()` from `solid-js`, or the next microtask).
+- `@tanstack/solid-hotkeys-devtools` stays on Solid 1 until TanStack Devtools has a Solid 2 entry.

.github/workflows/release.yml

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

docs/framework/solid/guides/formatting-display.md

@@ -156,6 +156,9 @@ Pages rendered this way depend on the request's `User-Agent` header. If a CDN or
 
 ### SolidStart
 
+> [!NOTE]
+> SolidStart and Astro's Solid integration don't support Solid 2 yet. This section and its example use Solid 1 with `@tanstack/solid-hotkeys` 1.x.
+
 `getRequestEvent()` from `solid-js/web` returns the current request on the server and `undefined` in the browser. Without a user agent, `detectPlatform` reads the browser's `navigator`, so the same code works on both sides:
 
 ```tsx
@@ -210,6 +213,9 @@ The [TanStack Start example](../examples/createFormatForDisplay-tanstack-start)
 
 ### Astro
 
+> [!NOTE]
+> SolidStart and Astro's Solid integration don't support Solid 2 yet. This section and its example use Solid 1 with `@tanstack/solid-hotkeys` 1.x.
+
 Each Solid island is its own Solid app, so render the provider inside the island and pass the platform from the page. The page must render on demand to have a request: add `export const prerender = false`, or use `output: 'server'`.
 
 ```astro
@@ -246,13 +252,15 @@ The [Astro example](../examples/createFormatForDisplay-astro) shows this setup.
 To skip server rendering for a label instead, render it after hydration. In the browser, plain `formatForDisplay` detects the platform:
 
 ```tsx
-import { Show, createSignal, onMount } from 'solid-js'
+import { Show, createSignal, onSettled } from 'solid-js'
 import { formatForDisplay } from '@tanstack/solid-hotkeys'
 import type { JSX } from 'solid-js'
 
 function ClientOnly(props: { children: JSX.Element; fallback?: JSX.Element }) {
   const [mounted, setMounted] = createSignal(false)
-  onMount(() => setMounted(true))
+  onSettled(() => {
+    setMounted(true)
+  })
   return (
     <Show when={mounted()} fallback={props.fallback}>
       {props.children}
@@ -265,7 +273,7 @@ function ClientOnly(props: { children: JSX.Element; fallback?: JSX.Element }) {
 </ClientOnly>
 ```
 
-`onMount` runs only in the browser, after hydration, so the server and the first render in the browser both show the fallback. Framework wrappers do the same: TanStack Router's `<ClientOnly>` from `@tanstack/solid-router`, SolidStart's `clientOnly()`, or `client:only="solid-js"` on an Astro island. A fallback with the label's width keeps the layout from shifting.
+`onSettled` runs only in the browser, after hydration, so the server and the first render in the browser both show the fallback. Framework wrappers do the same: TanStack Router's `<ClientOnly>` from `@tanstack/solid-router`, SolidStart's `clientOnly()`, or `client:only="solid-js"` on an Astro island. A fallback with the label's width keeps the layout from shifting.
 
 Don't use `<NoHydration>` or an `isServer` check for labels. `<NoHydration>` keeps the server's label, and rendering different content on the server and in the browser breaks hydration.
 

docs/framework/solid/guides/hotkeys-provider-and-scopes.md

@@ -99,7 +99,7 @@ function Editor() {
   // Also has a target: works only while focus is inside the outline
   createHotkey('Delete', () => deleteHeading(), () => ({ target: outline() }))
 
-  return <nav ref={setOutline} tabIndex={0}>...</nav>
+  return <nav ref={setOutline} tabindex={0}>...</nav>
 }
 ```
 

docs/framework/solid/guides/hotkeys.md

@@ -311,7 +311,7 @@ function Panel() {
   createHotkey('Escape', () => closePanel(), () => ({ target: panel() }))
 
   return (
-    <div ref={setPanel} tabIndex={0}>
+    <div ref={setPanel} tabindex={0}>
       Panel content
     </div>
   )
@@ -321,34 +321,37 @@ function Panel() {
 A `null` target waits until the element is attached.
 
 > [!NOTE]
-> An element receives key presses only while it, or something inside it, has focus. Give it a `tabIndex` if it isn't focusable already.
+> An element receives key presses only while it, or something inside it, has focus. Give it a `tabindex` if it isn't focusable already.
 
 While focus is inside the element, its hotkeys run before hotkeys on `document`. With the default `stopPropagation: true`, a `document` hotkey for the same key doesn't run at all. A sequence with a target advances only on key presses inside the target.
 
 ### Elements that are removed
 
-Solid doesn't call a `ref` with `null` when it removes an element, so a signal set by `ref` keeps the removed element, and the hotkey stays registered on it until the component unmounts. Keep the signal for an element the component always renders.
-
-For an element inside `<Show>`, `<For>`, or another control flow that removes it, call `createHotkey` in the element's `ref` callback:
+For an element inside `<Show>`, `<For>`, or another control flow that removes it, put the element and its `createHotkey` call in their own component. A `ref` callback runs outside the component's owner, so don't call `createHotkey` there:
 
 ```tsx
-import { Show } from 'solid-js'
+import { Show, createSignal } from 'solid-js'
+
+function PanelBody() {
+  const [panel, setPanel] = createSignal<HTMLDivElement | null>(null)
+  createHotkey('Escape', () => closePanel(), () => ({ target: panel() }))
+  return (
+    <div ref={setPanel} tabindex={0}>
+      Panel content
+    </div>
+  )
+}
 
 function Panel(props: { open: boolean }) {
   return (
     <Show when={props.open}>
-      <div
-        ref={(el) => createHotkey('Escape', () => closePanel(), { target: el })}
-        tabIndex={0}
-      >
-        Panel content
-      </div>
+      <PanelBody />
     </Show>
   )
 }
 ```
 
-The `ref` callback runs inside the branch that renders the element. So the hotkey registers each time the element is created, and unregisters when Solid removes it.
+The hotkey registers each time `<Show>` creates `PanelBody`, and unregisters when Solid removes it.
 
 ### A target is not a scope
 

docs/framework/solid/quick-start.md

@@ -140,29 +140,16 @@ function Panel() {
   createHotkey('Escape', () => closePanel(), () => ({ target: panel() }))
 
   return (
-    <div ref={setPanel} tabIndex={0}>
+    <div ref={setPanel} tabindex={0}>
       ...
     </div>
   )
 }
 ```
 
-A `null` target waits until the element is attached. The hotkey fires while focus is on the element or inside it. If nothing there can take focus, give the element a `tabIndex`.
+A `null` target waits until the element is attached. The hotkey fires while focus is on the element or inside it. If nothing there can take focus, give the element a `tabindex`.
 
-Solid doesn't clear a ref when the element is removed, so the signal keeps a removed element. For an element inside `<Show>` or `<For>`, register the hotkey in the element's `ref` callback instead:
-
-```tsx
-<Show when={open()}>
-  <div
-    ref={(el) => createHotkey('Escape', () => closePanel(), { target: el })}
-    tabIndex={0}
-  >
-    ...
-  </div>
-</Show>
-```
-
-The callback runs each time the element is created, and the hotkey unregisters when the element is removed.
+For an element inside `<Show>` or `<For>`, put the element and its `createHotkey` call in their own component, like `Panel` above. The hotkey unregisters when Solid removes the component.
 
 ## Add providers and scopes (optional)
 

docs/installation.md

@@ -42,7 +42,7 @@ Start with the [Quick Start](./framework/preact/quick-start) guide and the Preac
 
 # Solid
 
-Use Solid 1.7 or newer within version 1. The devtools panel needs Solid 1.9.15 or newer.
+`@tanstack/solid-hotkeys` 2 and later work with Solid 2; for Solid 1 (1.7 or newer), install `@tanstack/solid-hotkeys@1`. The devtools panel still runs on Solid 1 (1.9.15 or newer) and isn't available for Solid 2 apps yet.
 
 Start with the [Quick Start](./framework/solid/quick-start) guide and the Solid-specific [guides](./framework/solid/guides/hotkeys). If you want the integrated devtools panel, also install:
 

e2e/ssr/examples.ts

@@ -64,17 +64,11 @@ export const examples: Array<SsrExample> = [
     command: 'pnpm preview --port 4312',
     static: true,
   },
-  {
-    folder: 'solid/createFormatForDisplay-solid-start',
-    port: 4313,
-    command: 'pnpm start',
-  },
   {
     folder: 'solid/createFormatForDisplay-tanstack-start',
     port: 4314,
     command: 'pnpm preview --port 4314 --strictPort',
   },
-  { folder: 'solid/createFormatForDisplay-astro', port: 4315, command: astro },
   {
     folder: 'svelte/getFormatForDisplay-sveltekit',
     port: 4316,

examples/solid/createFormatForDisplay-tanstack-start/package.json

@@ -11,14 +11,15 @@
     "test:types": "tsc"
   },
   "dependencies": {
+    "@solidjs/web": "^2.0.0-rc.20",
     "@tanstack/solid-hotkeys": "^0.21.0",
-    "@tanstack/solid-router": "^1.170.43",
-    "@tanstack/solid-start": "^1.169.4",
-    "solid-js": "^1.9.15"
+    "@tanstack/solid-router": "^2.0.0-rc.10",
+    "@tanstack/solid-start": "^2.0.0-rc.10",
+    "solid-js": "^2.0.0-rc.20"
   },
   "devDependencies": {
+    "@solidjs/vite-plugin": "^3.0.0-next.55",
     "typescript": "6.0.3",
-    "vite": "^8.3.2",
-    "vite-plugin-solid": "^2.11.14"
+    "vite": "^8.3.2"
   }
 }

examples/solid/createFormatForDisplay-tanstack-start/src/CheatSheetPage.tsx

@@ -1,4 +1,4 @@
-import { For, Show, createSignal, onMount } from 'solid-js'
+import { For, Show, createSignal, onSettled } from 'solid-js'
 import {
   createFormatForDisplay,
   createHotkeys,
@@ -54,7 +54,9 @@ function Header() {
   // Read only in the browser after hydration, so it can't cause a mismatch
   const [browserPlatform, setBrowserPlatform] =
     createSignal<HotkeyPlatform | null>(null)
-  onMount(() => setBrowserPlatform(detectPlatform()))
+  onSettled(() => {
+    setBrowserPlatform(detectPlatform())
+  })
 
   return (
     <header class="header">

examples/solid/createFormatForDisplay-tanstack-start/src/routes/__root.tsx

@@ -7,10 +7,10 @@ import {
 } from '@tanstack/solid-router'
 import { createIsomorphicFn } from '@tanstack/solid-start'
 import { getRequestHeader } from '@tanstack/solid-start/server'
-import { HydrationScript } from 'solid-js/web'
+import { HydrationScript } from '@solidjs/web'
 import { HotkeysProvider, detectPlatform } from '@tanstack/solid-hotkeys'
 import stylesUrl from '../styles.css?url'
-import type { JSX } from 'solid-js'
+import type { JSX } from '@solidjs/web'
 
 // The request's User-Agent on the server, the browser's navigator in the browser
 const getPlatform = createIsomorphicFn()

examples/solid/createFormatForDisplay-tanstack-start/tsconfig.json

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

examples/solid/createFormatForDisplay-tanstack-start/vite.config.ts

@@ -1,6 +1,6 @@
 import { tanstackStart } from '@tanstack/solid-start/plugin/vite'
 import { defineConfig } from 'vite'
-import solid from 'vite-plugin-solid'
+import solid from '@solidjs/vite-plugin'
 
 export default defineConfig({
   plugins: [tanstackStart(), solid({ ssr: true })],

examples/solid/createHeldKeys/package.json

@@ -8,13 +8,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/solid-devtools": "0.8.14",
+    "@solidjs/web": "^2.0.0-rc.20",
     "@tanstack/solid-hotkeys": "^0.21.0",
-    "@tanstack/solid-hotkeys-devtools": "^0.13.1",
-    "solid-js": "^1.9.15"
+    "solid-js": "^2.0.0-rc.20"
   },
   "devDependencies": {
-    "vite": "^8.3.2",
-    "vite-plugin-solid": "^2.11.14"
+    "@solidjs/vite-plugin": "^3.0.0-next.55",
+    "vite": "^8.3.2"
   }
 }

examples/solid/createHeldKeys/src/index.tsx

@@ -1,23 +1,20 @@
 /* @refresh reload */
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import { createEffect, createSignal } from 'solid-js'
 import {
   HotkeysProvider,
   createHeldKeyCodes,
   createHeldKeys,
   formatForDisplay,
 } from '@tanstack/solid-hotkeys'
-import { hotkeysDevtoolsPlugin } from '@tanstack/solid-hotkeys-devtools'
-import { TanStackDevtools } from '@tanstack/solid-devtools'
 import './index.css'
 
 function App() {
   const heldKeys = createHeldKeys()
   const heldCodes = createHeldKeyCodes()
   const [history, setHistory] = createSignal<Array<string>>([])
 
-  createEffect(() => {
-    const keys = heldKeys()
+  createEffect(heldKeys, (keys) => {
     if (keys.length > 0) {
       const combo = keys
         .map((k) => formatForDisplay({ key: k }, { useSymbols: true }))
@@ -120,8 +117,6 @@ function KeyDisplay() {
           </ul>
         </section>
       </main>
-
-      <TanStackDevtools plugins={[hotkeysDevtoolsPlugin()]} />
     </div>
   )
 }

examples/solid/createHeldKeys/tsconfig.json

@@ -6,7 +6,7 @@
     "skipLibCheck": true,
     "moduleResolution": "Bundler",
     "jsx": "preserve",
-    "jsxImportSource": "solid-js",
+    "jsxImportSource": "@solidjs/web",
     "strict": true,
     "types": ["vite/client", "solid-js"]
   },

examples/solid/createHeldKeys/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/createHotkey-sequences/package.json

@@ -8,13 +8,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/solid-devtools": "0.8.14",
+    "@solidjs/web": "^2.0.0-rc.20",
     "@tanstack/solid-hotkeys": "^0.21.0",
-    "@tanstack/solid-hotkeys-devtools": "^0.13.1",
-    "solid-js": "^1.9.15"
+    "solid-js": "^2.0.0-rc.20"
   },
   "devDependencies": {
-    "vite": "^8.3.2",
-    "vite-plugin-solid": "^2.11.14"
+    "@solidjs/vite-plugin": "^3.0.0-next.55",
+    "vite": "^8.3.2"
   }
 }

examples/solid/createHotkey-sequences/src/index.tsx

@@ -1,9 +1,7 @@
 /* @refresh reload */
-import { render } from 'solid-js/web'
-import { createSignal, Show } from 'solid-js'
-import { createHotkey, HotkeysProvider } from '@tanstack/solid-hotkeys'
-import { hotkeysDevtoolsPlugin } from '@tanstack/solid-hotkeys-devtools'
-import { TanStackDevtools } from '@tanstack/solid-devtools'
+import { render } from '@solidjs/web'
+import { Show, createSignal } from 'solid-js'
+import { HotkeysProvider, createHotkey } from '@tanstack/solid-hotkeys'
 import './index.css'
 
 function App() {
@@ -243,8 +241,6 @@ function VimEditor() {
           Press <kbd>Escape</kbd> to clear history
         </p>
       </main>
-
-      <TanStackDevtools plugins={[hotkeysDevtoolsPlugin()]} />
     </div>
   )
 }

examples/solid/createHotkey-sequences/tsconfig.json

@@ -6,7 +6,7 @@
     "skipLibCheck": true,
     "moduleResolution": "Bundler",
     "jsx": "preserve",
-    "jsxImportSource": "solid-js",
+    "jsxImportSource": "@solidjs/web",
     "strict": true,
     "types": ["vite/client", "solid-js"]
   },

examples/solid/createHotkey-sequences/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()],