From 7a611ecd2ede73aeb15f1a94d9da04b23143202d Mon Sep 17 00:00:00 2001 From: Robby6Strings Date: Tue, 22 Oct 2024 21:39:09 +1300 Subject: [PATCH] hmr/devtools - filepath for "open in editor" button is now derived from script header injection instead of being included as a comment node inside each function --- packages/devtools-shared/src/utils.ts | 4 +- packages/lib/src/hmr.ts | 7 +- packages/vite-plugin-kaioken/src/index.ts | 90 +---------------------- 3 files changed, 12 insertions(+), 89 deletions(-) diff --git a/packages/devtools-shared/src/utils.ts b/packages/devtools-shared/src/utils.ts index 5c605030..d678eae1 100644 --- 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 index ae2c4ff6..04676233 100644 --- a/packages/lib/src/hmr.ts +++ b/packages/lib/src/hmr.ts @@ -32,6 +32,7 @@ export function isGenericHmrAcceptor( type ModuleMemory = { hotVars: Map unnamedWatchers: Array + 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 index 7881adcd..c009f34e 100644 --- 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() @@ -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" &&