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

.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}>

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

@@ -1,5 +1,5 @@
 import { createSignal } from 'solid-js'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 
 interface InputProps {
   label?: string
@@ -11,7 +11,7 @@ interface InputProps {
 }
 
 export function Input(props: InputProps) {
-  const styles = useStyles()
+  const styles = createStyles()
   const [val, setVal] = createSignal(props.value || '')
 
   const handleChange = (e: Event) => {

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

@@ -1,9 +1,9 @@
 import { createUniqueId } from 'solid-js'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 
 export function TanStackLogo() {
   const id = createUniqueId()
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <svg
       class={styles().logo}

packages/devtools-ui/src/components/main-panel.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 import type { JSX } from 'solid-js/jsx-runtime'
 
 type PanelProps = JSX.IntrinsicElements['div'] & {
@@ -14,7 +14,7 @@ export const MainPanel = ({
   class: classStyles,
   withPadding,
 }: PanelProps) => {
-  const styles = useStyles()
+  const styles = createStyles()
 
   return (
     <div

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

@@ -1,12 +1,12 @@
 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 const Section = ({
   children,
   ...rest
 }: JSX.IntrinsicElements['section']) => {
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <section class={clsx(styles().section.main, rest.class)} {...rest}>
       {children}
@@ -18,7 +18,7 @@ export const SectionTitle = ({
   children,
   ...rest
 }: JSX.IntrinsicElements['h3']) => {
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <h3 class={clsx(styles().section.title, rest.class)} {...rest}>
       {children}
@@ -30,7 +30,7 @@ export const SectionDescription = ({
   children,
   ...rest
 }: JSX.IntrinsicElements['p']) => {
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <p class={clsx(styles().section.description, rest.class)} {...rest}>
       {children}
@@ -42,7 +42,7 @@ export const SectionIcon = ({
   children,
   ...rest
 }: JSX.IntrinsicElements['span']) => {
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <span class={clsx(styles().section.icon, rest.class)} {...rest}>
       {children}

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

@@ -1,5 +1,5 @@
 import { createSignal } from 'solid-js'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 
 interface SelectOption<T extends string | number> {
   value: T
@@ -15,7 +15,7 @@ interface SelectProps<T extends string | number> {
 }
 
 export function Select<T extends string | number>(props: SelectProps<T>) {
-  const styles = useStyles()
+  const styles = createStyles()
   const [selected, setSelected] = createSignal(
     props.value || props.options[0]?.value,
   )

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

@@ -1,5 +1,5 @@
 import { Show } from 'solid-js'
-import { useStyles } from '../styles/use-styles'
+import { createStyles } from '../styles/use-styles'
 import type { tokens } from '../styles/tokens'
 
 export const Tag = (props: {
@@ -8,7 +8,7 @@ export const Tag = (props: {
   count?: number
   disabled?: boolean
 }) => {
-  const styles = useStyles()
+  const styles = createStyles()
   return (
     <button disabled={props.disabled} class={styles().tag.base}>
       <span class={styles().tag.dot(props.color)} />

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

@@ -1,4 +1,9 @@
-import { createContext, createEffect, createSignal, useContext } from 'solid-js'
+import {
+  createContext,
+  createEffect,
+  createSignal,
+  useContext as getContext,
+} from 'solid-js'
 import type { Accessor, JSX } from 'solid-js'
 
 export type TanStackDevtoolsTheme = 'light' | 'dark'
@@ -24,10 +29,10 @@ export const ThemeContextProvider = (props: {
   )
 }
 
-export function useTheme() {
-  const context = useContext(ThemeContext)
+export function createTheme() {
+  const context = getContext(ThemeContext)
   if (!context) {
-    throw new Error('useTheme must be used within a ThemeContextProvider')
+    throw new Error('createTheme must be used within a ThemeContextProvider')
   }
 
   return context