@pyreon/compiler 0.11.5 → 0.11.7

package/src/react-intercept.ts

@@ -12,37 +12,37 @@
  *  3. MCP server `migrate_react` / `validate` tools (AI agent integration)
  */
 
-import ts from "typescript"
+import ts from 'typescript'
 
 // ═══════════════════════════════════════════════════════════════════════════════
 // Types
 // ═══════════════════════════════════════════════════════════════════════════════
 
 export type ReactDiagnosticCode =
-  | "react-import"
-  | "react-dom-import"
-  | "react-router-import"
-  | "use-state"
-  | "use-effect-mount"
-  | "use-effect-deps"
-  | "use-effect-no-deps"
-  | "use-memo"
-  | "use-callback"
-  | "use-ref-dom"
-  | "use-ref-box"
-  | "use-reducer"
-  | "use-layout-effect"
-  | "memo-wrapper"
-  | "forward-ref"
-  | "class-name-prop"
-  | "html-for-prop"
-  | "on-change-input"
-  | "dangerously-set-inner-html"
-  | "dot-value-signal"
-  | "array-map-jsx"
-  | "key-on-for-child"
-  | "create-context-import"
-  | "use-context-import"
+  | 'react-import'
+  | 'react-dom-import'
+  | 'react-router-import'
+  | 'use-state'
+  | 'use-effect-mount'
+  | 'use-effect-deps'
+  | 'use-effect-no-deps'
+  | 'use-memo'
+  | 'use-callback'
+  | 'use-ref-dom'
+  | 'use-ref-box'
+  | 'use-reducer'
+  | 'use-layout-effect'
+  | 'memo-wrapper'
+  | 'forward-ref'
+  | 'class-name-prop'
+  | 'html-for-prop'
+  | 'on-change-input'
+  | 'dangerously-set-inner-html'
+  | 'dot-value-signal'
+  | 'array-map-jsx'
+  | 'key-on-for-child'
+  | 'create-context-import'
+  | 'use-context-import'
 
 export interface ReactDiagnostic {
   /** Machine-readable code for filtering and programmatic handling */
@@ -62,7 +62,7 @@ export interface ReactDiagnostic {
 }
 
 export interface MigrationChange {
-  type: "replace" | "remove" | "add"
+  type: 'replace' | 'remove' | 'add'
   line: number
   description: string
 }
@@ -89,87 +89,87 @@ interface HookMapping {
 
 const _REACT_HOOK_MAP: Record<string, HookMapping> = {
   useState: {
-    pyreonFn: "signal",
-    pyreonImport: "@pyreon/reactivity",
-    description: "Signals are callable functions — read: count(), write: count.set(5)",
+    pyreonFn: 'signal',
+    pyreonImport: '@pyreon/reactivity',
+    description: 'Signals are callable functions — read: count(), write: count.set(5)',
     example:
-      "const count = signal(0)\n// Read: count()  Write: count.set(5)  Update: count.update(n => n + 1)",
+      'const count = signal(0)\n// Read: count()  Write: count.set(5)  Update: count.update(n => n + 1)',
   },
   useEffect: {
-    pyreonFn: "effect",
-    pyreonImport: "@pyreon/reactivity",
-    description: "Effects auto-track signal dependencies — no dependency array needed",
-    example: "effect(() => {\n  console.log(count()) // auto-subscribes to count\n})",
+    pyreonFn: 'effect',
+    pyreonImport: '@pyreon/reactivity',
+    description: 'Effects auto-track signal dependencies — no dependency array needed',
+    example: 'effect(() => {\n  console.log(count()) // auto-subscribes to count\n})',
   },
   useLayoutEffect: {
-    pyreonFn: "effect",
-    pyreonImport: "@pyreon/reactivity",
-    description: "Pyreon effects run synchronously after signal updates",
-    example: "effect(() => {\n  // runs sync after signal changes\n})",
+    pyreonFn: 'effect',
+    pyreonImport: '@pyreon/reactivity',
+    description: 'Pyreon effects run synchronously after signal updates',
+    example: 'effect(() => {\n  // runs sync after signal changes\n})',
   },
   useMemo: {
-    pyreonFn: "computed",
-    pyreonImport: "@pyreon/reactivity",
-    description: "Computed values auto-track dependencies and memoize",
-    example: "const doubled = computed(() => count() * 2)",
+    pyreonFn: 'computed',
+    pyreonImport: '@pyreon/reactivity',
+    description: 'Computed values auto-track dependencies and memoize',
+    example: 'const doubled = computed(() => count() * 2)',
   },
   useCallback: {
-    pyreonFn: "(plain function)",
-    pyreonImport: "",
+    pyreonFn: '(plain function)',
+    pyreonImport: '',
     description:
-      "Not needed — Pyreon components run once, so closures never go stale. Use a plain function",
-    example: "const handleClick = () => doSomething(count())",
+      'Not needed — Pyreon components run once, so closures never go stale. Use a plain function',
+    example: 'const handleClick = () => doSomething(count())',
   },
   useReducer: {
-    pyreonFn: "signal",
-    pyreonImport: "@pyreon/reactivity",
-    description: "Use signal with update() for reducer-like patterns",
+    pyreonFn: 'signal',
+    pyreonImport: '@pyreon/reactivity',
+    description: 'Use signal with update() for reducer-like patterns',
     example:
-      "const state = signal(initialState)\nconst dispatch = (action) => state.update(s => reducer(s, action))",
+      'const state = signal(initialState)\nconst dispatch = (action) => state.update(s => reducer(s, action))',
   },
 }
 
 /** React import sources → Pyreon equivalents */
 const IMPORT_REWRITES: Record<string, string | null> = {
-  react: "@pyreon/core",
-  "react-dom": "@pyreon/runtime-dom",
-  "react-dom/client": "@pyreon/runtime-dom",
-  "react-dom/server": "@pyreon/runtime-server",
-  "react-router": "@pyreon/router",
-  "react-router-dom": "@pyreon/router",
+  react: '@pyreon/core',
+  'react-dom': '@pyreon/runtime-dom',
+  'react-dom/client': '@pyreon/runtime-dom',
+  'react-dom/server': '@pyreon/runtime-server',
+  'react-router': '@pyreon/router',
+  'react-router-dom': '@pyreon/router',
 }
 
 /** React specifiers that map to specific Pyreon imports */
 const SPECIFIER_REWRITES: Record<string, { name: string; from: string }> = {
-  useState: { name: "signal", from: "@pyreon/reactivity" },
-  useEffect: { name: "effect", from: "@pyreon/reactivity" },
-  useLayoutEffect: { name: "effect", from: "@pyreon/reactivity" },
-  useMemo: { name: "computed", from: "@pyreon/reactivity" },
-  useReducer: { name: "signal", from: "@pyreon/reactivity" },
-  useRef: { name: "signal", from: "@pyreon/reactivity" },
-  createContext: { name: "createContext", from: "@pyreon/core" },
-  useContext: { name: "useContext", from: "@pyreon/core" },
-  Fragment: { name: "Fragment", from: "@pyreon/core" },
-  Suspense: { name: "Suspense", from: "@pyreon/core" },
-  lazy: { name: "lazy", from: "@pyreon/core" },
-  memo: { name: "", from: "" }, // removed, not needed
-  forwardRef: { name: "", from: "" }, // removed, not needed
-  createRoot: { name: "mount", from: "@pyreon/runtime-dom" },
-  hydrateRoot: { name: "hydrateRoot", from: "@pyreon/runtime-dom" },
+  useState: { name: 'signal', from: '@pyreon/reactivity' },
+  useEffect: { name: 'effect', from: '@pyreon/reactivity' },
+  useLayoutEffect: { name: 'effect', from: '@pyreon/reactivity' },
+  useMemo: { name: 'computed', from: '@pyreon/reactivity' },
+  useReducer: { name: 'signal', from: '@pyreon/reactivity' },
+  useRef: { name: 'signal', from: '@pyreon/reactivity' },
+  createContext: { name: 'createContext', from: '@pyreon/core' },
+  useContext: { name: 'useContext', from: '@pyreon/core' },
+  Fragment: { name: 'Fragment', from: '@pyreon/core' },
+  Suspense: { name: 'Suspense', from: '@pyreon/core' },
+  lazy: { name: 'lazy', from: '@pyreon/core' },
+  memo: { name: '', from: '' }, // removed, not needed
+  forwardRef: { name: '', from: '' }, // removed, not needed
+  createRoot: { name: 'mount', from: '@pyreon/runtime-dom' },
+  hydrateRoot: { name: 'hydrateRoot', from: '@pyreon/runtime-dom' },
   // React Router
-  useNavigate: { name: "useRouter", from: "@pyreon/router" },
-  useParams: { name: "useRoute", from: "@pyreon/router" },
-  useLocation: { name: "useRoute", from: "@pyreon/router" },
-  Link: { name: "RouterLink", from: "@pyreon/router" },
-  NavLink: { name: "RouterLink", from: "@pyreon/router" },
-  Outlet: { name: "RouterView", from: "@pyreon/router" },
-  useSearchParams: { name: "useSearchParams", from: "@pyreon/router" },
+  useNavigate: { name: 'useRouter', from: '@pyreon/router' },
+  useParams: { name: 'useRoute', from: '@pyreon/router' },
+  useLocation: { name: 'useRoute', from: '@pyreon/router' },
+  Link: { name: 'RouterLink', from: '@pyreon/router' },
+  NavLink: { name: 'RouterLink', from: '@pyreon/router' },
+  Outlet: { name: 'RouterView', from: '@pyreon/router' },
+  useSearchParams: { name: 'useSearchParams', from: '@pyreon/router' },
 }
 
 /** JSX attribute rewrites (React → standard HTML) */
 const JSX_ATTR_REWRITES: Record<string, string> = {
-  className: "class",
-  htmlFor: "for",
+  className: 'class',
+  htmlFor: 'for',
 }
 
 // ═══════════════════════════════════════════════════════════════════════════════
@@ -220,11 +220,11 @@ function detectImportDeclaration(ctx: DetectContext, node: ts.ImportDeclaration)
       }
     }
 
-    const diagCode = source.startsWith("react-router")
-      ? "react-router-import"
-      : source.startsWith("react-dom")
-        ? "react-dom-import"
-        : "react-import"
+    const diagCode = source.startsWith('react-router')
+      ? 'react-router-import'
+      : source.startsWith('react-dom')
+        ? 'react-dom-import'
+        : 'react-import'
 
     detectDiag(
       ctx,
@@ -234,7 +234,7 @@ function detectImportDeclaration(ctx: DetectContext, node: ts.ImportDeclaration)
       detectGetNodeText(ctx, node),
       pyreonSource
         ? `import { ... } from "${pyreonSource}"`
-        : "Remove this import — not needed in Pyreon",
+        : 'Remove this import — not needed in Pyreon',
       true,
     )
   }
@@ -250,13 +250,13 @@ function detectUseState(ctx: DetectContext, node: ts.CallExpression): void {
   ) {
     const firstEl = parent.name.elements[0]
     const valueName =
-      firstEl && ts.isBindingElement(firstEl) ? (firstEl.name as ts.Identifier).text : "value"
-    const initArg = node.arguments[0] ? detectGetNodeText(ctx, node.arguments[0]) : "undefined"
+      firstEl && ts.isBindingElement(firstEl) ? (firstEl.name as ts.Identifier).text : 'value'
+    const initArg = node.arguments[0] ? detectGetNodeText(ctx, node.arguments[0]) : 'undefined'
 
     detectDiag(
       ctx,
       node,
-      "use-state",
+      'use-state',
       `useState is a React API. In Pyreon, use signal(). Read: ${valueName}(), Write: ${valueName}.set(x)`,
       detectGetNodeText(ctx, parent),
       `${valueName} = signal(${initArg})`,
@@ -266,10 +266,10 @@ function detectUseState(ctx: DetectContext, node: ts.CallExpression): void {
     detectDiag(
       ctx,
       node,
-      "use-state",
-      "useState is a React API. In Pyreon, use signal().",
+      'use-state',
+      'useState is a React API. In Pyreon, use signal().',
       detectGetNodeText(ctx, node),
-      "signal(initialValue)",
+      'signal(initialValue)',
       true,
     )
   }
@@ -296,32 +296,32 @@ function detectUseEffect(ctx: DetectContext, node: ts.CallExpression): void {
     detectDiag(
       ctx,
       node,
-      "use-effect-mount",
+      'use-effect-mount',
       `${hookName} with empty deps [] means "run once on mount". Use onMount() in Pyreon.`,
       detectGetNodeText(ctx, node),
       hasCleanup
-        ? "onMount(() => {\n  // setup...\n  return () => { /* cleanup */ }\n})"
-        : "onMount(() => {\n  // setup...\n})",
+        ? 'onMount(() => {\n  // setup...\n  return () => { /* cleanup */ }\n})'
+        : 'onMount(() => {\n  // setup...\n})',
       true,
     )
   } else if (depsArg && ts.isArrayLiteralExpression(depsArg)) {
     detectDiag(
       ctx,
       node,
-      "use-effect-deps",
+      'use-effect-deps',
       `${hookName} with dependency array. In Pyreon, effect() auto-tracks dependencies — no array needed.`,
       detectGetNodeText(ctx, node),
-      "effect(() => {\n  // reads are auto-tracked\n})",
+      'effect(() => {\n  // reads are auto-tracked\n})',
       true,
     )
   } else if (!depsArg) {
     detectDiag(
       ctx,
       node,
-      "use-effect-no-deps",
+      'use-effect-no-deps',
       `${hookName} with no dependency array. In Pyreon, use effect() — it auto-tracks signal reads.`,
       detectGetNodeText(ctx, node),
-      "effect(() => {\n  // runs when accessed signals change\n})",
+      'effect(() => {\n  // runs when accessed signals change\n})',
       true,
     )
   }
@@ -329,13 +329,13 @@ function detectUseEffect(ctx: DetectContext, node: ts.CallExpression): void {
 
 function detectUseMemo(ctx: DetectContext, node: ts.CallExpression): void {
   const computeFn = node.arguments[0]
-  const computeText = computeFn ? detectGetNodeText(ctx, computeFn) : "() => value"
+  const computeText = computeFn ? detectGetNodeText(ctx, computeFn) : '() => value'
 
   detectDiag(
     ctx,
     node,
-    "use-memo",
-    "useMemo is a React API. In Pyreon, use computed() — dependencies auto-tracked.",
+    'use-memo',
+    'useMemo is a React API. In Pyreon, use computed() — dependencies auto-tracked.',
     detectGetNodeText(ctx, node),
     `computed(${computeText})`,
     true,
@@ -344,13 +344,13 @@ function detectUseMemo(ctx: DetectContext, node: ts.CallExpression): void {
 
 function detectUseCallback(ctx: DetectContext, node: ts.CallExpression): void {
   const callbackFn = node.arguments[0]
-  const callbackText = callbackFn ? detectGetNodeText(ctx, callbackFn) : "() => {}"
+  const callbackText = callbackFn ? detectGetNodeText(ctx, callbackFn) : '() => {}'
 
   detectDiag(
     ctx,
     node,
-    "use-callback",
-    "useCallback is not needed in Pyreon. Components run once, so closures never go stale. Use a plain function.",
+    'use-callback',
+    'useCallback is not needed in Pyreon. Components run once, so closures never go stale. Use a plain function.',
     detectGetNodeText(ctx, node),
     callbackText,
     true,
@@ -361,25 +361,25 @@ function detectUseRef(ctx: DetectContext, node: ts.CallExpression): void {
   const arg = node.arguments[0]
   const isNullInit =
     arg &&
-    (arg.kind === ts.SyntaxKind.NullKeyword || (ts.isIdentifier(arg) && arg.text === "undefined"))
+    (arg.kind === ts.SyntaxKind.NullKeyword || (ts.isIdentifier(arg) && arg.text === 'undefined'))
 
   if (isNullInit) {
     detectDiag(
       ctx,
       node,
-      "use-ref-dom",
-      "useRef(null) for DOM refs. In Pyreon, use createRef() from @pyreon/core.",
+      'use-ref-dom',
+      'useRef(null) for DOM refs. In Pyreon, use createRef() from @pyreon/core.',
       detectGetNodeText(ctx, node),
-      "createRef()",
+      'createRef()',
       true,
     )
   } else {
-    const initText = arg ? detectGetNodeText(ctx, arg) : "undefined"
+    const initText = arg ? detectGetNodeText(ctx, arg) : 'undefined'
     detectDiag(
       ctx,
       node,
-      "use-ref-box",
-      "useRef for mutable values. In Pyreon, use signal() — it works the same way but is reactive.",
+      'use-ref-box',
+      'useRef for mutable values. In Pyreon, use signal() — it works the same way but is reactive.',
       detectGetNodeText(ctx, node),
       `signal(${initText})`,
       true,
@@ -391,10 +391,10 @@ function detectUseReducer(ctx: DetectContext, node: ts.CallExpression): void {
   detectDiag(
     ctx,
     node,
-    "use-reducer",
-    "useReducer is a React API. In Pyreon, use signal() with update() for reducer patterns.",
+    'use-reducer',
+    'useReducer is a React API. In Pyreon, use signal() with update() for reducer patterns.',
     detectGetNodeText(ctx, node),
-    "const state = signal(initialState)\nconst dispatch = (action) => state.update(s => reducer(s, action))",
+    'const state = signal(initialState)\nconst dispatch = (action) => state.update(s => reducer(s, action))',
     false,
   )
 }
@@ -403,7 +403,7 @@ function isCallToReactDot(callee: ts.Expression, methodName: string): boolean {
   return (
     ts.isPropertyAccessExpression(callee) &&
     ts.isIdentifier(callee.expression) &&
-    callee.expression.text === "React" &&
+    callee.expression.text === 'React' &&
     callee.name.text === methodName
   )
 }
@@ -411,17 +411,17 @@ function isCallToReactDot(callee: ts.Expression, methodName: string): boolean {
 function detectMemoWrapper(ctx: DetectContext, node: ts.CallExpression): void {
   const callee = node.expression
   const isMemo =
-    (ts.isIdentifier(callee) && callee.text === "memo") || isCallToReactDot(callee, "memo")
+    (ts.isIdentifier(callee) && callee.text === 'memo') || isCallToReactDot(callee, 'memo')
 
   if (isMemo) {
     const inner = node.arguments[0]
-    const innerText = inner ? detectGetNodeText(ctx, inner) : "Component"
+    const innerText = inner ? detectGetNodeText(ctx, inner) : 'Component'
 
     detectDiag(
       ctx,
       node,
-      "memo-wrapper",
-      "memo() is not needed in Pyreon. Components run once — only signals trigger updates, not re-renders.",
+      'memo-wrapper',
+      'memo() is not needed in Pyreon. Components run once — only signals trigger updates, not re-renders.',
       detectGetNodeText(ctx, node),
       innerText,
       true,
@@ -432,17 +432,17 @@ function detectMemoWrapper(ctx: DetectContext, node: ts.CallExpression): void {
 function detectForwardRef(ctx: DetectContext, node: ts.CallExpression): void {
   const callee = node.expression
   const isForwardRef =
-    (ts.isIdentifier(callee) && callee.text === "forwardRef") ||
-    isCallToReactDot(callee, "forwardRef")
+    (ts.isIdentifier(callee) && callee.text === 'forwardRef') ||
+    isCallToReactDot(callee, 'forwardRef')
 
   if (isForwardRef) {
     detectDiag(
       ctx,
       node,
-      "forward-ref",
-      "forwardRef is not needed in Pyreon. Pass ref as a regular prop.",
+      'forward-ref',
+      'forwardRef is not needed in Pyreon. Pass ref as a regular prop.',
       detectGetNodeText(ctx, node),
-      "// Just pass ref as a prop:\nconst MyInput = (props) => <input ref={props.ref} />",
+      '// Just pass ref as a prop:\nconst MyInput = (props) => <input ref={props.ref} />',
       true,
     )
   }
@@ -456,7 +456,7 @@ function detectJsxAttributes(ctx: DetectContext, node: ts.JsxAttribute): void {
     detectDiag(
       ctx,
       node,
-      attrName === "className" ? "class-name-prop" : "html-for-prop",
+      attrName === 'className' ? 'class-name-prop' : 'html-for-prop',
       `'${attrName}' is a React JSX attribute. Use '${htmlAttr}' in Pyreon (standard HTML).`,
       detectGetNodeText(ctx, node),
       detectGetNodeText(ctx, node).replace(attrName, htmlAttr),
@@ -464,32 +464,32 @@ function detectJsxAttributes(ctx: DetectContext, node: ts.JsxAttribute): void {
     )
   }
 
-  if (attrName === "onChange") {
+  if (attrName === 'onChange') {
     const jsxElement = findParentJsxElement(node)
     if (jsxElement) {
       const tagName = getJsxTagName(jsxElement)
-      if (tagName === "input" || tagName === "textarea" || tagName === "select") {
+      if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
         detectDiag(
           ctx,
           node,
-          "on-change-input",
+          'on-change-input',
           `onChange on <${tagName}> fires on blur in Pyreon (native DOM behavior). For keypress-by-keypress updates, use onInput.`,
           detectGetNodeText(ctx, node),
-          detectGetNodeText(ctx, node).replace("onChange", "onInput"),
+          detectGetNodeText(ctx, node).replace('onChange', 'onInput'),
           true,
         )
       }
     }
   }
 
-  if (attrName === "dangerouslySetInnerHTML") {
+  if (attrName === 'dangerouslySetInnerHTML') {
     detectDiag(
       ctx,
       node,
-      "dangerously-set-inner-html",
-      "dangerouslySetInnerHTML is React-specific. Use innerHTML prop in Pyreon.",
+      'dangerously-set-inner-html',
+      'dangerouslySetInnerHTML is React-specific. Use innerHTML prop in Pyreon.',
       detectGetNodeText(ctx, node),
-      "innerHTML={htmlString}",
+      'innerHTML={htmlString}',
       true,
     )
   }
@@ -502,7 +502,7 @@ function detectDotValueSignal(ctx: DetectContext, node: ts.PropertyAccessExpress
     detectDiag(
       ctx,
       node,
-      "dot-value-signal",
+      'dot-value-signal',
       `'${varName}.value' looks like a Vue ref pattern. Pyreon signals are callable functions. Use ${varName}.set(x) to write.`,
       detectGetNodeText(ctx, parent),
       `${varName}.set(${detectGetNodeText(ctx, parent.right)})`,
@@ -521,13 +521,13 @@ function detectArrayMapJsx(ctx: DetectContext, node: ts.CallExpression): void {
     const mapCallback = node.arguments[0]
     const mapCallbackText = mapCallback
       ? detectGetNodeText(ctx, mapCallback)
-      : "item => <li>{item}</li>"
+      : 'item => <li>{item}</li>'
 
     detectDiag(
       ctx,
       node,
-      "array-map-jsx",
-      "Array.map() in JSX is not reactive in Pyreon. Use <For> for efficient keyed list rendering.",
+      'array-map-jsx',
+      'Array.map() in JSX is not reactive in Pyreon. Use <For> for efficient keyed list rendering.',
       detectGetNodeText(ctx, node),
       `<For each={${arrayExpr}} by={item => item.id}>\n  {${mapCallbackText}}\n</For>`,
       false,
@@ -547,7 +547,7 @@ function isCallToEffectHook(node: ts.Node): node is ts.CallExpression {
   return (
     ts.isCallExpression(node) &&
     ts.isIdentifier(node.expression) &&
-    (node.expression.text === "useEffect" || node.expression.text === "useLayoutEffect")
+    (node.expression.text === 'useEffect' || node.expression.text === 'useLayoutEffect')
   )
 }
 
@@ -556,7 +556,7 @@ function isMapCallExpression(node: ts.Node): node is ts.CallExpression {
     ts.isCallExpression(node) &&
     ts.isPropertyAccessExpression(node.expression) &&
     ts.isIdentifier(node.expression.name) &&
-    node.expression.name.text === "map"
+    node.expression.name.text === 'map'
   )
 }
 
@@ -564,19 +564,19 @@ function isDotValueAccess(node: ts.Node): node is ts.PropertyAccessExpression {
   return (
     ts.isPropertyAccessExpression(node) &&
     ts.isIdentifier(node.name) &&
-    node.name.text === "value" &&
+    node.name.text === 'value' &&
     ts.isIdentifier(node.expression)
   )
 }
 
 function detectVisitNode(ctx: DetectContext, node: ts.Node): void {
   if (ts.isImportDeclaration(node)) detectImportDeclaration(ctx, node)
-  if (isCallToHook(node, "useState")) detectUseState(ctx, node)
+  if (isCallToHook(node, 'useState')) detectUseState(ctx, node)
   if (isCallToEffectHook(node)) detectUseEffect(ctx, node)
-  if (isCallToHook(node, "useMemo")) detectUseMemo(ctx, node)
-  if (isCallToHook(node, "useCallback")) detectUseCallback(ctx, node)
-  if (isCallToHook(node, "useRef")) detectUseRef(ctx, node)
-  if (isCallToHook(node, "useReducer")) detectUseReducer(ctx, node)
+  if (isCallToHook(node, 'useMemo')) detectUseMemo(ctx, node)
+  if (isCallToHook(node, 'useCallback')) detectUseCallback(ctx, node)
+  if (isCallToHook(node, 'useRef')) detectUseRef(ctx, node)
+  if (isCallToHook(node, 'useReducer')) detectUseReducer(ctx, node)
   if (ts.isCallExpression(node)) detectMemoWrapper(ctx, node)
   if (ts.isCallExpression(node)) detectForwardRef(ctx, node)
   if (ts.isJsxAttribute(node) && ts.isIdentifier(node.name)) detectJsxAttributes(ctx, node)
@@ -591,7 +591,7 @@ function detectVisit(ctx: DetectContext, node: ts.Node): void {
   })
 }
 
-export function detectReactPatterns(code: string, filename = "input.tsx"): ReactDiagnostic[] {
+export function detectReactPatterns(code: string, filename = 'input.tsx'): ReactDiagnostic[] {
   const sf = ts.createSourceFile(filename, code, ts.ScriptTarget.ESNext, true, ts.ScriptKind.TSX)
   const ctx: DetectContext = {
     sf,
@@ -672,8 +672,8 @@ function migrateUseState(ctx: MigrateContext, node: ts.CallExpression): void {
   ) {
     const firstEl = parent.name.elements[0]
     const valueName =
-      firstEl && ts.isBindingElement(firstEl) ? (firstEl.name as ts.Identifier).text : "value"
-    const initArg = node.arguments[0] ? migrateGetNodeText(ctx, node.arguments[0]) : "undefined"
+      firstEl && ts.isBindingElement(firstEl) ? (firstEl.name as ts.Identifier).text : 'value'
+    const initArg = node.arguments[0] ? migrateGetNodeText(ctx, node.arguments[0]) : 'undefined'
 
     const declStart = parent.getStart(ctx.sf)
     const declEnd = parent.getEnd()
@@ -682,9 +682,9 @@ function migrateUseState(ctx: MigrateContext, node: ts.CallExpression): void {
       end: declEnd,
       text: `${valueName} = signal(${initArg})`,
     })
-    migrateAddImport(ctx, "@pyreon/reactivity", "signal")
+    migrateAddImport(ctx, '@pyreon/reactivity', 'signal')
     ctx.changes.push({
-      type: "replace",
+      type: 'replace',
       line: migrateGetLine(ctx, node),
       description: `useState → signal: ${valueName}`,
     })
@@ -704,18 +704,18 @@ function migrateUseEffect(ctx: MigrateContext, node: ts.CallExpression): void {
   ) {
     const callbackText = migrateGetNodeText(ctx, callbackArg)
     migrateReplace(ctx, node, `onMount(${callbackText})`)
-    migrateAddImport(ctx, "@pyreon/core", "onMount")
+    migrateAddImport(ctx, '@pyreon/core', 'onMount')
     ctx.changes.push({
-      type: "replace",
+      type: 'replace',
       line: migrateGetLine(ctx, node),
       description: `${hookName}(fn, []) → onMount(fn)`,
     })
   } else if (callbackArg) {
     const callbackText = migrateGetNodeText(ctx, callbackArg)
     migrateReplace(ctx, node, `effect(${callbackText})`)
-    migrateAddImport(ctx, "@pyreon/reactivity", "effect")
+    migrateAddImport(ctx, '@pyreon/reactivity', 'effect')
     ctx.changes.push({
-      type: "replace",
+      type: 'replace',
       line: migrateGetLine(ctx, node),
       description: `${hookName} → effect (auto-tracks deps)`,
     })
@@ -726,11 +726,11 @@ function migrateUseMemo(ctx: MigrateContext, node: ts.CallExpression): void {
   const computeFn = node.arguments[0]
   if (computeFn) {
     migrateReplace(ctx, node, `computed(${migrateGetNodeText(ctx, computeFn)})`)
-    migrateAddImport(ctx, "@pyreon/reactivity", "computed")
+    migrateAddImport(ctx, '@pyreon/reactivity', 'computed')
     ctx.changes.push({
-      type: "replace",
+      type: 'replace',
       line: migrateGetLine(ctx, node),
-      description: "useMemo → computed (auto-tracks deps)",
+      description: 'useMemo → computed (auto-tracks deps)',
     })
   }
 }
@@ -740,9 +740,9 @@ function migrateUseCallback(ctx: MigrateContext, node: ts.CallExpression): void
   if (callbackFn) {
     migrateReplace(ctx, node, migrateGetNodeText(ctx, callbackFn))
     ctx.changes.push({
-      type: "replace",
+      type: 'replace',
       line: migrateGetLine(ctx, node),
-      description: "useCallback → plain function (not needed in Pyreon)",
+      description: 'useCallback → plain function (not needed in Pyreon)',
     })
   }
 }
@@ -751,23 +751,23 @@ function migrateUseRef(ctx: MigrateContext, node: ts.CallExpression): void {
   const arg = node.arguments[0]
   const isNullInit =
     arg &&
-    (arg.kind === ts.SyntaxKind.NullKeyword || (ts.isIdentifier(arg) && arg.text === "undefined"))
+    (arg.kind === ts.SyntaxKind.NullKeyword || (ts.isIdentifier(arg) && arg.text === 'undefined'))
 
   if (isNullInit || !arg) {
-    migrateReplace(ctx, node, "createRef()")
-    migrateAddImport(ctx, "@pyreon/core", "createRef")
+    migrateReplace(ctx, node, 'createRef()')
+    migrateAddImport(ctx, '@pyreon/core', 'createRef')
     ctx.changes.push({
-      type: "replace",
+      type: 'replace',
       line: migrateGetLine(ctx, node),
-      description: "useRef(null) → createRef()",
+      description: 'useRef(null) → createRef()',
     })
   } else {
     migrateReplace(ctx, node, `signal(${migrateGetNodeText(ctx, arg)})`)
-    migrateAddImport(ctx, "@pyreon/reactivity", "signal")
+    migrateAddImport(ctx, '@pyreon/reactivity', 'signal')
     ctx.changes.push({
-      type: "replace",
+      type: 'replace',
       line: migrateGetLine(ctx, node),
-      description: "useRef(value) → signal(value)",
+      description: 'useRef(value) → signal(value)',
     })
   }
 }
@@ -775,14 +775,14 @@ function migrateUseRef(ctx: MigrateContext, node: ts.CallExpression): void {
 function migrateMemoWrapper(ctx: MigrateContext, node: ts.CallExpression): void {
   const callee = node.expression
   const isMemo =
-    (ts.isIdentifier(callee) && callee.text === "memo") || isCallToReactDot(callee, "memo")
+    (ts.isIdentifier(callee) && callee.text === 'memo') || isCallToReactDot(callee, 'memo')
 
   if (isMemo && node.arguments[0]) {
     migrateReplace(ctx, node, migrateGetNodeText(ctx, node.arguments[0]))
     ctx.changes.push({
-      type: "remove",
+      type: 'remove',
       line: migrateGetLine(ctx, node),
-      description: "Removed memo() wrapper (not needed in Pyreon)",
+      description: 'Removed memo() wrapper (not needed in Pyreon)',
     })
   }
 }
@@ -790,15 +790,15 @@ function migrateMemoWrapper(ctx: MigrateContext, node: ts.CallExpression): void
 function migrateForwardRef(ctx: MigrateContext, node: ts.CallExpression): void {
   const callee = node.expression
   const isForwardRef =
-    (ts.isIdentifier(callee) && callee.text === "forwardRef") ||
-    isCallToReactDot(callee, "forwardRef")
+    (ts.isIdentifier(callee) && callee.text === 'forwardRef') ||
+    isCallToReactDot(callee, 'forwardRef')
 
   if (isForwardRef && node.arguments[0]) {
     migrateReplace(ctx, node, migrateGetNodeText(ctx, node.arguments[0]))
     ctx.changes.push({
-      type: "remove",
+      type: 'remove',
       line: migrateGetLine(ctx, node),
-      description: "Removed forwardRef wrapper (pass ref as normal prop in Pyreon)",
+      description: 'Removed forwardRef wrapper (pass ref as normal prop in Pyreon)',
     })
   }
 }
@@ -814,24 +814,24 @@ function migrateJsxAttributes(ctx: MigrateContext, node: ts.JsxAttribute): void
       text: htmlAttr,
     })
     ctx.changes.push({
-      type: "replace",
+      type: 'replace',
       line: migrateGetLine(ctx, node),
       description: `${attrName} → ${htmlAttr}`,
     })
   }
 
-  if (attrName === "onChange") {
+  if (attrName === 'onChange') {
     const jsxElement = findParentJsxElement(node)
     if (jsxElement) {
       const tagName = getJsxTagName(jsxElement)
-      if (tagName === "input" || tagName === "textarea" || tagName === "select") {
+      if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
         ctx.replacements.push({
           start: node.name.getStart(ctx.sf),
           end: node.name.getEnd(),
-          text: "onInput",
+          text: 'onInput',
         })
         ctx.changes.push({
-          type: "replace",
+          type: 'replace',
           line: migrateGetLine(ctx, node),
           description: `onChange on <${tagName}> → onInput (native DOM events)`,
         })
@@ -839,7 +839,7 @@ function migrateJsxAttributes(ctx: MigrateContext, node: ts.JsxAttribute): void
     }
   }
 
-  if (attrName === "dangerouslySetInnerHTML") {
+  if (attrName === 'dangerouslySetInnerHTML') {
     migrateDangerouslySetInnerHTML(ctx, node)
   }
 }
@@ -852,16 +852,16 @@ function migrateDangerouslySetInnerHTML(ctx: MigrateContext, node: ts.JsxAttribu
   if (!ts.isObjectLiteralExpression(expr)) return
 
   const htmlProp = expr.properties.find(
-    (p) => ts.isPropertyAssignment(p) && ts.isIdentifier(p.name) && p.name.text === "__html",
+    (p) => ts.isPropertyAssignment(p) && ts.isIdentifier(p.name) && p.name.text === '__html',
   ) as ts.PropertyAssignment | undefined
 
   if (htmlProp) {
     const valueText = migrateGetNodeText(ctx, htmlProp.initializer)
     migrateReplace(ctx, node, `innerHTML={${valueText}}`)
     ctx.changes.push({
-      type: "replace",
+      type: 'replace',
       line: migrateGetLine(ctx, node),
-      description: "dangerouslySetInnerHTML → innerHTML",
+      description: 'dangerouslySetInnerHTML → innerHTML',
     })
   }
 }
@@ -869,11 +869,11 @@ function migrateDangerouslySetInnerHTML(ctx: MigrateContext, node: ts.JsxAttribu
 function applyReplacements(code: string, ctx: MigrateContext): string {
   // Remove React import declarations
   for (const imp of ctx.importsToRemove) {
-    ctx.replacements.push({ start: imp.getStart(ctx.sf), end: imp.getEnd(), text: "" })
+    ctx.replacements.push({ start: imp.getStart(ctx.sf), end: imp.getEnd(), text: '' })
     ctx.changes.push({
-      type: "remove",
+      type: 'remove',
       line: ctx.sf.getLineAndCharacterOfPosition(imp.getStart(ctx.sf)).line + 1,
-      description: "Removed React import",
+      description: 'Removed React import',
     })
   }
 
@@ -908,7 +908,7 @@ function applyReplacements(code: string, ctx: MigrateContext): string {
     lastPos = r.end
   }
   parts.push(code.slice(lastPos))
-  return parts.join("")
+  return parts.join('')
 }
 
 function insertPyreonImports(code: string, pyreonImports: Map<string, Set<string>>): string {
@@ -917,10 +917,10 @@ function insertPyreonImports(code: string, pyreonImports: Map<string, Set<string
   const importLines: string[] = []
   const sorted = [...pyreonImports.entries()].sort(([a], [b]) => a.localeCompare(b))
   for (const [source, specs] of sorted) {
-    const specList = [...specs].sort().join(", ")
+    const specList = [...specs].sort().join(', ')
     importLines.push(`import { ${specList} } from "${source}"`)
   }
-  const importBlock = importLines.join("\n")
+  const importBlock = importLines.join('\n')
 
   const lastImportEnd = findLastImportEnd(code)
   if (lastImportEnd > 0) {
@@ -931,11 +931,11 @@ function insertPyreonImports(code: string, pyreonImports: Map<string, Set<string
 
 function migrateVisitNode(ctx: MigrateContext, node: ts.Node): void {
   if (ts.isImportDeclaration(node)) migrateImportDeclaration(ctx, node)
-  if (isCallToHook(node, "useState")) migrateUseState(ctx, node)
+  if (isCallToHook(node, 'useState')) migrateUseState(ctx, node)
   if (isCallToEffectHook(node)) migrateUseEffect(ctx, node)
-  if (isCallToHook(node, "useMemo")) migrateUseMemo(ctx, node)
-  if (isCallToHook(node, "useCallback")) migrateUseCallback(ctx, node)
-  if (isCallToHook(node, "useRef")) migrateUseRef(ctx, node)
+  if (isCallToHook(node, 'useMemo')) migrateUseMemo(ctx, node)
+  if (isCallToHook(node, 'useCallback')) migrateUseCallback(ctx, node)
+  if (isCallToHook(node, 'useRef')) migrateUseRef(ctx, node)
   if (ts.isCallExpression(node)) migrateMemoWrapper(ctx, node)
   if (ts.isCallExpression(node)) migrateForwardRef(ctx, node)
   if (ts.isJsxAttribute(node) && ts.isIdentifier(node.name)) migrateJsxAttributes(ctx, node)
@@ -948,7 +948,7 @@ function migrateVisit(ctx: MigrateContext, node: ts.Node): void {
   })
 }
 
-export function migrateReactCode(code: string, filename = "input.tsx"): MigrationResult {
+export function migrateReactCode(code: string, filename = 'input.tsx'): MigrationResult {
   const sf = ts.createSourceFile(filename, code, ts.ScriptTarget.ESNext, true, ts.ScriptKind.TSX)
   const diagnostics = detectReactPatterns(code, filename)
 
@@ -968,7 +968,7 @@ export function migrateReactCode(code: string, filename = "input.tsx"): Migratio
   result = insertPyreonImports(result, ctx.pyreonImports)
 
   // Clean up empty lines from removed imports
-  result = result.replace(/\n{3,}/g, "\n\n")
+  result = result.replace(/\n{3,}/g, '\n\n')
 
   return { code: result, diagnostics, changes: ctx.changes }
 }
@@ -1002,7 +1002,7 @@ function getJsxTagName(node: ts.JsxOpeningElement | ts.JsxSelfClosingElement): s
   if (ts.isIdentifier(tagName)) {
     return tagName.text
   }
-  return ""
+  return ''
 }
 
 function findLastImportEnd(code: string): number {
@@ -1062,7 +1062,7 @@ const ERROR_PATTERNS: ErrorPattern[] = [
     pattern: /Cannot read properties of undefined \(reading '(set|update|peek|subscribe)'\)/,
     diagnose: (m) => ({
       cause: `Calling .${m[1]}() on undefined. The signal variable is likely out of scope, misspelled, or not yet initialized.`,
-      fix: "Check that the signal is defined and in scope. Signals must be created with signal() before use.",
+      fix: 'Check that the signal is defined and in scope. Signals must be created with signal() before use.',
       fixCode: `const mySignal = signal(initialValue)\nmySignal.${m[1]}(newValue)`,
     }),
   },
@@ -1070,7 +1070,7 @@ const ERROR_PATTERNS: ErrorPattern[] = [
     pattern: /(\w+) is not a function/,
     diagnose: (m) => ({
       cause: `'${m[1]}' is not callable. If this is a signal, you need to call it: ${m[1]}()`,
-      fix: "Pyreon signals are callable functions. Read: signal(), Write: signal.set(value)",
+      fix: 'Pyreon signals are callable functions. Read: signal(), Write: signal.set(value)',
       fixCode: `// Read value:\nconst value = ${m[1]}()\n// Set value:\n${m[1]}.set(newValue)`,
     }),
   },
@@ -1086,7 +1086,7 @@ const ERROR_PATTERNS: ErrorPattern[] = [
     pattern: /Cannot find module 'react'/,
     diagnose: () => ({
       cause: "Importing from 'react' in a Pyreon project.",
-      fix: "Replace React imports with Pyreon equivalents.",
+      fix: 'Replace React imports with Pyreon equivalents.',
       fixCode:
         '// Instead of:\nimport { useState } from "react"\n// Use:\nimport { signal } from "@pyreon/reactivity"',
     }),
@@ -1096,51 +1096,51 @@ const ERROR_PATTERNS: ErrorPattern[] = [
     diagnose: (m) => ({
       cause: `Accessing .${m[1]} on a signal. Pyreon signals don't have a .${m[1]} property.`,
       fix:
-        m[1] === "value"
-          ? "Pyreon signals are callable functions, not .value getters. Call signal() to read, signal.set() to write."
+        m[1] === 'value'
+          ? 'Pyreon signals are callable functions, not .value getters. Call signal() to read, signal.set() to write.'
           : `Signals have these methods: .set(), .update(), .peek(), .subscribe(). '${m[1]}' is not one of them.`,
       fixCode:
-        m[1] === "value" ? "// Read: mySignal()\n// Write: mySignal.set(newValue)" : undefined,
+        m[1] === 'value' ? '// Read: mySignal()\n// Write: mySignal.set(newValue)' : undefined,
     }),
   },
   {
     pattern: /Type '(\w+)' is not assignable to type 'VNode'/,
     diagnose: (m) => ({
       cause: `Component returned ${m[1]} instead of VNode. Components must return JSX, null, or a string.`,
-      fix: "Make sure your component returns a JSX element, null, or a string.",
-      fixCode: "const MyComponent = (props) => {\n  return <div>{props.children}</div>\n}",
+      fix: 'Make sure your component returns a JSX element, null, or a string.',
+      fixCode: 'const MyComponent = (props) => {\n  return <div>{props.children}</div>\n}',
     }),
   },
   {
     pattern: /onMount callback must return/,
     diagnose: () => ({
-      cause: "onMount expects a callback that optionally returns a CleanupFn.",
-      fix: "Return a cleanup function, or return nothing.",
-      fixCode: "onMount(() => {\n  // setup code\n})",
+      cause: 'onMount expects a callback that optionally returns a CleanupFn.',
+      fix: 'Return a cleanup function, or return nothing.',
+      fixCode: 'onMount(() => {\n  // setup code\n})',
     }),
   },
   {
     pattern: /Expected 'by' prop on <For>/,
     diagnose: () => ({
       cause: "<For> requires a 'by' prop for efficient keyed reconciliation.",
-      fix: "Add a by prop that returns a unique key for each item.",
+      fix: 'Add a by prop that returns a unique key for each item.',
       fixCode:
-        "<For each={items()} by={item => item.id}>\n  {item => <li>{item.name}</li>}\n</For>",
+        '<For each={items()} by={item => item.id}>\n  {item => <li>{item.name}</li>}\n</For>',
     }),
   },
   {
     pattern: /useHook.*outside.*component/i,
     diagnose: () => ({
       cause:
-        "Hook called outside a component function. Pyreon hooks must be called during component setup.",
-      fix: "Move the hook call inside a component function body.",
+        'Hook called outside a component function. Pyreon hooks must be called during component setup.',
+      fix: 'Move the hook call inside a component function body.',
     }),
   },
   {
     pattern: /Hydration mismatch/,
     diagnose: () => ({
       cause: "Server-rendered HTML doesn't match client-rendered output.",
-      fix: "Ensure SSR and client render the same initial content. Check for browser-only APIs (window, document) in SSR code.",
+      fix: 'Ensure SSR and client render the same initial content. Check for browser-only APIs (window, document) in SSR code.',
       related: "Use typeof window !== 'undefined' checks or onMount() for client-only code.",
     }),
   },