hmr/devtools - filepath for "open in editor" button is now derived fr…

…om script header injection instead of being included as a comment node inside each function
CrimsonChi · Oct 22, 2024 · 7a611ec · 7a611ec
1 parent 96665fa
commit 7a611ec
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 89 deletions.
diff --git a/packages/devtools-shared/src/utils.ts b/packages/devtools-shared/src/utils.ts
@@ -23,4 +23,6 @@ export function getNodeName(node: Kaioken.VNode) {
 
 export const getComponentFileLink = (
   node: Kaioken.VNode & { type: Function }
-) => node.type.toString().match(/\/\/ \[kaioken_devtools\]:(.*)/)?.[1] ?? null
+): string =>
+  // @ts-ignore
+  node.type.__devtoolsFileLink ?? null
diff --git a/packages/lib/src/hmr.ts b/packages/lib/src/hmr.ts
@@ -32,6 +32,7 @@ export function isGenericHmrAcceptor(
 type ModuleMemory = {
   hotVars: Map<string, HotVar>
   unnamedWatchers: Array<WatchEffect>
+  fileLink: string
 }
 
 export function createHMRContext() {
@@ -44,14 +45,14 @@ export function createHMRContext() {
   let isWaitingForNextWatchCall = false
   let tmpUnnamedWatchers: WatchEffect[] = []
 
-  const prepare = (filePath: string) => {
+  const prepare = (filePath: string, fileLink: string) => {
     let mod = moduleMap.get(filePath)
     isModuleReplacementExecution = !!mod
-
     if (!mod) {
       mod = {
         hotVars: new Map(),
         unnamedWatchers: [],
+        fileLink,
       }
       moduleMap.set(filePath, mod)
     }
@@ -64,6 +65,8 @@ export function createHMRContext() {
 
     for (const [name, newVar] of Object.entries(hotVars)) {
       const oldVar = currentModuleMemory.hotVars.get(name)
+      // @ts-ignore
+      newVar.__devtoolsFileLink = currentModuleMemory.fileLink + ":0"
       currentModuleMemory.hotVars.set(name, newVar)
       if (!oldVar) continue
       if (isGenericHmrAcceptor(oldVar) && isGenericHmrAcceptor(newVar)) {

diff --git a/packages/vite-plugin-kaioken/src/index.ts b/packages/vite-plugin-kaioken/src/index.ts
@@ -27,7 +27,7 @@ type TransformContext = {
   inserts: TransformInsert[]
 }
 
-type FilePathFormatter = (path: string, line: number) => string
+type FilePathFormatter = (path: string) => string
 
 export interface KaiokenPluginOptions {
   devtools?: boolean
@@ -36,13 +36,12 @@ export interface KaiokenPluginOptions {
    * @param path the path to the file that contains the component on disk
    * @param line the component's line number
    * @returns {string} the formatted link
-   * @default (path, line) => `vscode://file/${path}:${line}`
+   * @default (path) => `vscode://file/${path}`
    */
   formatFileLink?: FilePathFormatter
 }
 
-const vscodeFilePathFormatter = (path: string, line: number) =>
-  `vscode://file/${path}:${line}`
+const vscodeFilePathFormatter = (path: string) => `vscode://file/${path}`
 
 export default function kaioken(
   opts: KaiokenPluginOptions = {
@@ -134,16 +133,11 @@ export default function kaioken(
           ast.body as AstNode[],
           transformCtx
         )
-        transformInsertFilePathComments(
-          fileLinkFormatter,
-          ast.body as AstNode[],
-          transformCtx
-        )
         code = transformInjectInserts(transformCtx)
         code =
           `
 if (import.meta.hot && "window" in globalThis) {
-  window.__kaioken.HMRContext?.prepare("${id}");
+  window.__kaioken.HMRContext?.prepare("${id}", "${fileLinkFormatter(id)}");
 }
 ` +
           code +
@@ -194,12 +188,6 @@ interface AstNode {
   value?: unknown
 }
 
-const createFilePathComment = (
-  formatter: FilePathFormatter,
-  filePath: string,
-  line = 0
-) => `// [kaioken_devtools]:${formatter(filePath, line)}`
-
 function createAliasBuilder(source: string, name: string) {
   const aliases = new Set<string>()
 
@@ -336,76 +324,6 @@ function transformInsertUnnamedWatchPreambles(
   }
 }
 
-function transformInsertFilePathComments(
-  linkFormatter: FilePathFormatter,
-  nodes: AstNode[],
-  ctx: TransformContext
-) {
-  const commentText = createFilePathComment(linkFormatter, ctx.id)
-  const insertToFunctionDeclarationBody = (
-    body: AstNode & { body: AstNode[] }
-  ) => {
-    const insertPosition = body.start + 1
-    ctx.inserts.push({
-      content: commentText,
-      start: insertPosition,
-    })
-  }
-  // for each function that contains `kaioken.createElement`, inject the file path as a comment node inside of the function body
-  for (const node of nodes) {
-    if (
-      findNode(node, isNodeCreateElementExpression) &&
-      node.type === "FunctionDeclaration" &&
-      node.body &&
-      !Array.isArray(node.body)
-    ) {
-      const body = node.body as AstNode & { body: AstNode[] }
-      insertToFunctionDeclarationBody(body)
-    } else if (node.type === "VariableDeclaration") {
-      const declarations = node.declarations
-      if (!declarations) continue
-
-      for (const dec of declarations) {
-        if (
-          dec.init &&
-          dec.init.body &&
-          findNode(dec.init, isNodeCreateElementExpression)
-        ) {
-          const body = dec.init.body as AstNode & { body: AstNode[] }
-          insertToFunctionDeclarationBody(body)
-        }
-      }
-    } else if (
-      node.type === "ExportNamedDeclaration" ||
-      node.type === "ExportDefaultDeclaration"
-    ) {
-      const dec = node.declaration
-      if (dec?.type === "FunctionDeclaration") {
-        const body = dec.body as AstNode & { body: AstNode[] }
-        if (findNode(body, isNodeCreateElementExpression)) {
-          insertToFunctionDeclarationBody(body)
-        }
-      } else if (dec?.type === "VariableDeclaration") {
-        const declarations = dec.declarations
-        if (!declarations) continue
-        for (const dec of declarations) {
-          if (dec.init && findNode(dec.init, isNodeCreateElementExpression)) {
-            const body = dec.init as AstNode & { body: AstNode[] }
-            if (
-              body.type === "ArrowFunctionExpression" ||
-              body.type === "FunctionExpression"
-            ) {
-              insertToFunctionDeclarationBody(
-                body.body! as AstNode & { body: AstNode[] }
-              )
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
 function isNodeCreateElementExpression(node: AstNode): boolean {
   return (
     node.type === "MemberExpression" &&