fix(devtools): rename Solid use* primitives to create* for React Compiler compat

The devtools packages are Solid but used React-style naming (useStyles,
useTheme, useDevtoolsState, ...) for their custom primitives. When an app
enables React Compiler, it matches the use* convention and transforms this
Solid code as if it were React, breaking the panel.

Rename every custom Solid primitive in @tanstack/devtools, devtools-ui, and
devtools-a11y from use* to create*, and import Solid's useContext and
@solid-primitives' useKeyDownList under non-use aliases (getContext,
getKeyDownList).

BREAKING(@tanstack/devtools-ui): exported useTheme is renamed to createTheme.

Author: AlemTuzlak

.changeset/solid-hook-naming-react-compiler.md

@@ -0,0 +1,13 @@
+---
+'@tanstack/devtools-ui': minor
+'@tanstack/devtools': patch
+'@tanstack/devtools-a11y': patch
+---
+
+fix: rename Solid `use*` primitives to `create*` so React Compiler doesn't transform them
+
+The devtools packages are written in Solid but used React-style naming (`useStyles`, `useTheme`, `useDevtoolsState`, …) for their custom primitives. When an app enables React Compiler, the compiler matches the `use*` naming convention and transforms/optimizes this Solid code as if it were React, breaking the panel (it is Solid JSX, not React).
+
+All custom Solid primitives in `@tanstack/devtools`, `@tanstack/devtools-ui`, and `@tanstack/devtools-a11y` are renamed from `use*` to `create*`, and Solid's own `useContext` / `@solid-primitives` `useKeyDownList` are imported under non-`use` aliases (`getContext`, `getKeyDownList`).
+
+Breaking for `@tanstack/devtools-ui`: the exported `useTheme` is renamed to `createTheme`.

packages/devtools-a11y/src/core/components/IssueCard.tsx

@@ -2,7 +2,7 @@
 
 import { For, Show } from 'solid-js'
 import { Button } from '@tanstack/devtools-ui'
-import { useStyles } from '../styles/styles'
+import { createStyles } from '../styles/styles'
 
 // types
 import type { A11yIssue, SeverityThreshold } from '../types/types'
@@ -17,7 +17,7 @@ interface A11yIssueCardProps {
 
 export function A11yIssueCard(props: A11yIssueCardProps) {
   const selector = () => props.issue.nodes[0]?.selector || 'unknown'
-  const styles = useStyles()
+  const styles = createStyles()
 
   return (
     <div

packages/devtools-a11y/src/core/components/IssueList.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource solid-js */
 
 import { For, Show } from 'solid-js'
-import { useAllyContext } from '../contexts/allyContext'
+import { createAllyContext } from '../contexts/allyContext'
 import {
   SEVERITY_LABELS,
   clearHighlights,
@@ -10,7 +10,7 @@ import {
   scrollToElement,
 } from '../utils/ui.utils'
 import { IMPACTS } from '../utils/ally-audit.utils'
-import { useStyles } from '../styles/styles'
+import { createStyles } from '../styles/styles'
 import { A11yIssueCard } from './IssueCard'
 
 // types
@@ -24,8 +24,8 @@ export function A11yIssueList(props: A11yIssueListProps) {
   const [selectedIssueId, setSelectedIssueId] = props.selectedIssueSignal
 
   // hooks
-  const styles = useStyles()
-  const ally = useAllyContext()
+  const styles = createStyles()
+  const ally = createAllyContext()
 
   // handlers
   const handleIssueClick = (issueId: string) => {

packages/devtools-a11y/src/core/components/Settings.tsx

@@ -3,8 +3,8 @@
 import { For, Show, createMemo, createSignal } from 'solid-js'
 import { Button, Input, Select } from '@tanstack/devtools-ui'
 import { getAvailableRules } from '../utils/ally-audit.utils'
-import { useAllyContext } from '../contexts/allyContext'
-import { CATEGORIES, CATEGORY_LABELS, useStyles } from '../styles/styles'
+import { createAllyContext } from '../contexts/allyContext'
+import { CATEGORIES, CATEGORY_LABELS, createStyles } from '../styles/styles'
 
 // types
 import type {
@@ -18,8 +18,8 @@ interface A11ySettingsOverlayProps {
 }
 
 export function A11ySettingsOverlay(props: A11ySettingsOverlayProps) {
-  const { config, setConfig } = useAllyContext()
-  const styles = useStyles()
+  const { config, setConfig } = createAllyContext()
+  const styles = createStyles()
 
   const disabledRulesSet = createMemo(() => new Set(config.disabledRules))
   const availableRules = createMemo(() => getAvailableRules())

packages/devtools-a11y/src/core/components/Shell.tsx

@@ -2,18 +2,18 @@
 
 import { Match, Show, Switch, createMemo, createSignal } from 'solid-js'
 import { Button, Header, MainPanel } from '@tanstack/devtools-ui'
-import { useAllyContext } from '../contexts/allyContext'
+import { createAllyContext } from '../contexts/allyContext'
 import { RULE_SET_LABELS, SEVERITY_LABELS } from '../utils/ui.utils'
-import { useStyles } from '../styles/styles'
+import { createStyles } from '../styles/styles'
 import { A11yIssueList } from './IssueList'
 import { A11ySettingsOverlay } from './Settings'
 
 export function Shell() {
-  const styles = useStyles()
+  const styles = createStyles()
 
   // ally context
   const { filteredIssues, allyResult, config, setConfig, triggerAllyScan } =
-    useAllyContext()
+    createAllyContext()
 
   // ui state
   const selectedIssueSignal = createSignal<string>('')

packages/devtools-a11y/src/core/contexts/allyContext.tsx

@@ -5,7 +5,7 @@ import {
   createEffect,
   createMemo,
   createSignal,
-  useContext,
+  useContext as getContext,
 } from 'solid-js'
 import { createStore } from 'solid-js/store'
 import { filterIssuesAboveThreshold, runAudit } from '../utils/ally-audit.utils'
@@ -24,7 +24,7 @@ import type { ParentComponent } from 'solid-js'
 // context state
 //
 
-function useAllyValue() {
+function createAllyValue() {
   const [config, setConfig] =
     createStore<Required<A11yPluginOptions>>(mergeConfig())
 
@@ -89,7 +89,7 @@ function useAllyValue() {
   }
 }
 
-type ContextType = ReturnType<typeof useAllyValue>
+type ContextType = ReturnType<typeof createAllyValue>
 
 //
 // context
@@ -100,18 +100,18 @@ const AllyContext = createContext<ContextType | null>(null)
 type AllyProviderProps = {}
 
 export const AllyProvider: ParentComponent<AllyProviderProps> = (props) => {
-  const value = useAllyValue()
+  const value = createAllyValue()
 
   return (
     <AllyContext.Provider value={value}>{props.children}</AllyContext.Provider>
   )
 }
 
-export function useAllyContext() {
-  const context = useContext(AllyContext)
+export function createAllyContext() {
+  const context = getContext(AllyContext)
 
   if (context === null) {
-    throw new Error('useAllyContext must be used within an AllyProvider')
+    throw new Error('createAllyContext must be used within an AllyProvider')
   }
 
   return context

packages/devtools-a11y/src/core/styles/styles.ts

@@ -1,5 +1,5 @@
 import * as goober from 'goober'
-import { useTheme } from '@tanstack/devtools-ui'
+import { createTheme } from '@tanstack/devtools-ui'
 import { createMemo } from 'solid-js'
 
 import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
@@ -548,8 +548,8 @@ function createA11yPanelStyles(theme: TanStackDevtoolsTheme) {
   }
 }
 
-export function useStyles() {
-  const { theme } = useTheme()
+export function createStyles() {
+  const { theme } = createTheme()
   const styles = createMemo(() => createA11yPanelStyles(theme()))
 
   return styles

packages/devtools-ui/src/components/button.tsx

@@ -1,6 +1,6 @@
 import { createMemo } from 'solid-js'
 import clsx from 'clsx'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 
 // types
 import type { JSX } from 'solid-js'
@@ -20,7 +20,7 @@ type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
   className?: string
 }
 export function Button(props: ButtonProps) {
-  const styles = useStyles()
+  const styles = createStyles()
 
   const classes = createMemo(() => {
     const variant = props.variant || 'primary'

packages/devtools-ui/src/components/checkbox.tsx

@@ -1,5 +1,5 @@
 import { createSignal } from 'solid-js'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 
 interface CheckboxProps {
   label?: string
@@ -9,7 +9,7 @@ interface CheckboxProps {
 }
 
 export function Checkbox(props: CheckboxProps) {
-  const styles = useStyles()
+  const styles = createStyles()
   const [isChecked, setIsChecked] = createSignal(props.checked || false)
 
   const handleChange = (e: Event) => {

packages/devtools-ui/src/components/header.tsx

@@ -1,13 +1,13 @@
 import clsx from 'clsx'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 import type { JSX } from 'solid-js/jsx-runtime'
 
 export function Header({
   children,
   class: className,
   ...rest
 }: JSX.IntrinsicElements['header']) {
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <header
       class={clsx(styles().header.row, 'tsqd-header', className)}
@@ -30,7 +30,7 @@ export function HeaderLogo({
   }
   onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>
 }) {
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <div class={styles().header.logoAndToggleContainer}>
       <button class={clsx(styles().header.logo)} onClick={onClick}>