fix: fix useDeno hook signature in production mode

Author: Je

tsc/compile.ts

@@ -2,11 +2,12 @@ import ts from 'https://esm.sh/typescript'
 import transformImportPathRewrite from './transform-import-path-rewrite.ts'
 import transformReactJsx from './transform-react-jsx.ts'
 import transformReactRefresh from './transform-react-refresh.ts'
+import transformReactUseDenoHook from './transform-react-use-deno-hook.ts'
 import { CreatePlainTransformer, CreateTransformer } from './transformer.ts'
 
 export interface CompileOptions {
-    target: string
     mode: 'development' | 'production'
+    target: string
     reactRefresh: boolean
     rewriteImportPath: (importPath: string, async?: boolean) => string
 }
@@ -29,10 +30,11 @@ const allowTargets = [
     'es2020',
 ]
 
-export function compile(fileName: string, source: string, { target: targetName, mode, rewriteImportPath, reactRefresh }: CompileOptions) {
+export function compile(fileName: string, source: string, { mode, target: targetName, rewriteImportPath, reactRefresh }: CompileOptions) {
     const target = allowTargets.indexOf(targetName.toLowerCase())
     const transformers: ts.CustomTransformers = { before: [], after: [] }
     transformers.before!.push(CreatePlainTransformer(transformReactJsx, { mode, rewriteImportPath }))
+    transformers.before!.push(CreateTransformer(transformReactUseDenoHook))
     if (reactRefresh) {
         transformers.before!.push(CreateTransformer(transformReactRefresh))
     }

tsc/transform-react-refresh.ts

@@ -5,22 +5,19 @@
  */
 
 import ts from 'https://esm.sh/typescript'
-import { Sha1 } from '../std.ts'
 
 const f = ts.factory
 
 type TSFunctionLike = ts.FunctionDeclaration | ts.FunctionExpression | ts.ArrowFunction
 
 export class RefreshTransformer {
     #sf: ts.SourceFile
-    #useDenoIndex: number
 
     static refreshSig = '$RefreshSig$'
     static refreshReg = '$RefreshReg$'
 
     constructor(sf: ts.SourceFile) {
         this.#sf = sf
-        this.#useDenoIndex = 0
     }
 
     transform() {
@@ -173,9 +170,6 @@ export class RefreshTransformer {
                             const sig = this._getHookCallSignature(initializer)
                             if (sig) {
                                 hookCalls.push(sig)
-                                if (sig.name === 'useDeno') {
-                                    this._signUseDeno(initializer)
-                                }
                             }
                         }
                     })
@@ -186,9 +180,6 @@ export class RefreshTransformer {
                     const sig = this._getHookCallSignature(s.expression)
                     if (sig) {
                         hookCalls.push(sig)
-                        if (sig.name === 'useDeno') {
-                            this._signUseDeno(s.expression)
-                        }
                     }
                 }
             })
@@ -239,25 +230,6 @@ export class RefreshTransformer {
         }
     }
 
-    private _signUseDeno(call: ts.CallExpression) {
-        const args = call.arguments as unknown as Array<any>
-        if (args.length > 0) {
-            const id = new Sha1().update(this.#sf.fileName + ':useDeno#' + (this.#useDenoIndex++)).hex().slice(0, 9)
-            const arg3 = f.createStringLiteral(`useDeno.${id}`)
-            if (args.length === 1) {
-                args.push(f.createFalse())
-            }
-            if (args.length === 2) {
-                args.push(f.createVoidZero())
-            }
-            if (args.length === 3) {
-                args.push(arg3)
-            } else {
-                args[3] = arg3
-            }
-        }
-    }
-
     private _sign(fnNode: TSFunctionLike, fnName: string, sigId: ts.Identifier, key: string, forceReset: boolean, customHooks: string[]) {
         if (fnNode.body && ts.isBlock(fnNode.body)) {
             const _s = f.createExpressionStatement(ts.createCall(
@@ -347,7 +319,7 @@ function isComponentishName(name: string) {
     return c >= 'A' && c <= 'Z'
 }
 
-function isHookName(name: string) {
+export function isHookName(name: string) {
     let c: string
     return name.startsWith('use') && (c = name.charAt(3)) && c >= 'A' && c <= 'Z'
 }

tsc/transform-react-use-deno-hook.ts

@@ -0,0 +1,120 @@
+/**
+ * TypeScript AST Transformer for react refresh.
+ * @link https://github.com/facebook/react/issues/16604#issuecomment-528663101
+ * @link https://github.com/facebook/react/blob/master/packages/react-refresh/src/ReactFreshBabelPlugin.js
+ */
+
+import ts from 'https://esm.sh/typescript'
+import { Sha1 } from '../std.ts'
+import { isHookName } from './transform-react-refresh.ts'
+
+const f = ts.factory
+
+export class RefreshTransformer {
+    #sf: ts.SourceFile
+    #useDenoIndex: number
+
+    constructor(sf: ts.SourceFile) {
+        this.#sf = sf
+        this.#useDenoIndex = 0
+    }
+
+    transform() {
+        const statements: ts.Statement[] = []
+
+        this.#sf.statements.forEach(node => {
+            if (ts.isFunctionDeclaration(node)) {
+                this._getHookCallsSignature(node)
+            } else if (ts.isVariableStatement(node)) {
+                node.declarationList.declarations.forEach(({ name, initializer, modifiers }) => {
+                    if (
+                        initializer &&
+                        ts.isIdentifier(name) &&
+                        (ts.isFunctionExpression(initializer) || ts.isArrowFunction(initializer))
+                    ) {
+                        this._getHookCallsSignature(initializer)
+                    }
+                })
+            }
+            statements.push(node)
+        })
+
+        return ts.updateSourceFileNode(
+            this.#sf,
+            ts.setTextRange(
+                f.createNodeArray(statements),
+                this.#sf.statements
+            )
+        )
+    }
+
+    private _getHookCallsSignature(fnNode: ts.FunctionDeclaration | ts.FunctionExpression | ts.ArrowFunction) {
+        if (fnNode.body && ts.isBlock(fnNode.body)) {
+            fnNode.body.statements.forEach(s => {
+                if (ts.isVariableStatement(s)) {
+                    s.declarationList.declarations.forEach(({ initializer }) => {
+                        if (
+                            initializer &&
+                            ts.isCallExpression(initializer)
+                        ) {
+                            const name = this._getHookCallSignature(initializer)
+                            if (name === 'useDeno') {
+                                this._signUseDeno(initializer)
+                            }
+                        }
+                    })
+                } else if (
+                    ts.isExpressionStatement(s) &&
+                    ts.isCallExpression(s.expression)
+                ) {
+                    const name = this._getHookCallSignature(s.expression)
+                    if (name === 'useDeno') {
+                        this._signUseDeno(s.expression)
+                    }
+                }
+            })
+        }
+    }
+
+    private _getHookCallSignature(ctx: ts.CallExpression) {
+        let name: string
+        const { expression } = ctx
+        if (ts.isIdentifier(expression)) {
+            name = expression.text
+        } else if (ts.isPropertyAccessExpression(expression)) {
+            name = expression.name.text
+        } else {
+            return null
+        }
+        if (!isHookName(name)) {
+            return null
+        }
+        return name
+    }
+
+    private _signUseDeno(call: ts.CallExpression) {
+        const args = call.arguments as unknown as Array<any>
+        if (args.length > 0) {
+            const id = new Sha1().update(this.#sf.fileName + ':useDeno#' + (this.#useDenoIndex++)).hex().slice(0, 9)
+            const arg3 = f.createStringLiteral(`useDeno.${id}`)
+            if (args.length === 1) {
+                args.push(f.createFalse())
+            }
+            if (args.length === 2) {
+                args.push(f.createVoidZero())
+            }
+            if (args.length === 3) {
+                args.push(arg3)
+            } else {
+                args[3] = arg3
+            }
+        }
+    }
+}
+
+
+
+export default function transformReactUseDenoHook(ctx: ts.TransformationContext, sf: ts.SourceFile): ts.SourceFile {
+    const t = new RefreshTransformer(sf)
+    return t.transform()
+}