Optimize

Author: owjs3901

src/analyzer.ts

@@ -91,14 +91,15 @@ export class ComponentLensAnalyzer {
     }
 
     const componentKinds = new Map<string, ComponentKind>()
-    await Promise.all(
-      [...uniqueFilePaths].map(async (resolvedPath) => {
-        componentKinds.set(
-          resolvedPath,
-          await this.getFileComponentKind(resolvedPath),
-        )
-      }),
-    )
+    const kindPromises: Promise<void>[] = []
+    for (const resolvedPath of uniqueFilePaths) {
+      kindPromises.push(
+        this.getFileComponentKind(resolvedPath).then((kind) => {
+          componentKinds.set(resolvedPath, kind)
+        }),
+      )
+    }
+    await Promise.all(kindPromises)
 
     const usages: ComponentUsage[] = []
 
@@ -183,19 +184,35 @@ function parseFileAnalysis(filePath: string, sourceText: string): FileAnalysis {
 
   const imports = new Map<string, ImportBinding>()
   const localComponentNames = new Set<string>()
+  let ownComponentKind: Exclude<ComponentKind, 'unknown'> = 'server'
+  let statementIndex = 0
+
+  for (; statementIndex < sourceFile.statements.length; statementIndex++) {
+    const statement = sourceFile.statements[statementIndex]!
+    if (
+      !ts.isExpressionStatement(statement) ||
+      !ts.isStringLiteral(statement.expression)
+    ) {
+      break
+    }
+    if (statement.expression.text === 'use client') {
+      ownComponentKind = 'client'
+      statementIndex++
+      break
+    }
+  }
 
-  for (const statement of sourceFile.statements) {
+  for (; statementIndex < sourceFile.statements.length; statementIndex++) {
+    const statement = sourceFile.statements[statementIndex]!
     collectImportBindings(statement, imports)
     collectLocalComponentName(statement, localComponentNames)
   }
 
-  const jsxTags = collectJsxTags(sourceFile)
-
   return {
     imports,
-    jsxTags,
+    jsxTags: collectJsxTags(sourceFile),
     localComponentNames,
-    ownComponentKind: hasUseClientDirective(sourceFile) ? 'client' : 'server',
+    ownComponentKind,
   }
 }
 
@@ -278,24 +295,6 @@ function collectLocalComponentName(
   }
 }
 
-function hasUseClientDirective(sourceFile: ts.SourceFile): boolean {
-  for (const statement of sourceFile.statements) {
-    if (
-      !ts.isExpressionStatement(statement) ||
-      !ts.isStringLiteral(statement.expression)
-    ) {
-      return false
-    }
-
-    if (statement.expression.text === 'use client') {
-      return true
-    }
-  }
-
-  return false
-}
-
-const COMPONENT_NAME_RE = /^[A-Z]/u
 const COMPONENT_WRAPPER_NAMES = new Set([
   'forwardRef',
   'memo',
@@ -304,7 +303,8 @@ const COMPONENT_WRAPPER_NAMES = new Set([
 ])
 
 function isComponentIdentifier(name: string): boolean {
-  return COMPONENT_NAME_RE.test(name)
+  const code = name.charCodeAt(0)
+  return code >= 65 && code <= 90
 }
 
 function isComponentInitializer(

src/decorations.ts

@@ -28,23 +28,38 @@ export class LensDecorations implements vscode.Disposable {
   public apply(editor: vscode.TextEditor, usages: ComponentUsage[]): void {
     const clientDecorations: vscode.DecorationOptions[] = []
     const serverDecorations: vscode.DecorationOptions[] = []
+    const editorDir = path.dirname(editor.document.uri.fsPath)
+    const displayPathCache = new Map<string, string>()
 
     for (const usage of usages) {
-      for (const range of usage.ranges) {
-        const decoration: vscode.DecorationOptions = {
-          hoverMessage: new vscode.MarkdownString(
-            `${usage.kind === 'client' ? 'Client' : 'Server'} component from \`${toDisplayPath(editor.document.uri, usage.sourceFilePath)}\``,
-          ),
-          range: new vscode.Range(
-            editor.document.positionAt(range.start),
-            editor.document.positionAt(range.end),
-          ),
-        }
+      let displayPath = displayPathCache.get(usage.sourceFilePath)
+      if (displayPath === undefined) {
+        displayPath = toDisplayPath(editorDir, usage.sourceFilePath)
+        displayPathCache.set(usage.sourceFilePath, displayPath)
+      }
 
+      const label = usage.kind === 'client' ? 'Client' : 'Server'
+      const hoverMessage = new vscode.MarkdownString(
+        `${label} component from \`${displayPath}\``,
+      )
+
+      for (const range of usage.ranges) {
         if (usage.kind === 'client') {
-          clientDecorations.push(decoration)
+          clientDecorations.push({
+            hoverMessage,
+            range: new vscode.Range(
+              editor.document.positionAt(range.start),
+              editor.document.positionAt(range.end),
+            ),
+          })
         } else {
-          serverDecorations.push(decoration)
+          serverDecorations.push({
+            hoverMessage,
+            range: new vscode.Range(
+              editor.document.positionAt(range.start),
+              editor.document.positionAt(range.end),
+            ),
+          })
         }
       }
     }
@@ -64,14 +79,8 @@ export class LensDecorations implements vscode.Disposable {
   }
 }
 
-function toDisplayPath(
-  documentUri: vscode.Uri,
-  sourceFilePath: string,
-): string {
-  const relativePath = path.relative(
-    path.dirname(documentUri.fsPath),
-    sourceFilePath,
-  )
+function toDisplayPath(editorDir: string, sourceFilePath: string): string {
+  const relativePath = path.relative(editorDir, sourceFilePath)
   return relativePath.length > 0 ? relativePath : path.basename(sourceFilePath)
 }
 

src/resolver.ts

@@ -33,17 +33,22 @@ export class ImportResolver {
   >()
   private readonly configPathCache = new Map<string, string | undefined>()
   private readonly resolutionCache = new Map<string, string | undefined>()
-  private readonly hostDirectoryExists: (directoryPath: string) => boolean
-  private readonly hostFileExists: (filePath: string) => boolean
-  private readonly hostReadFile: (filePath: string) => string | undefined
+  private readonly resolutionHost: ts.ModuleResolutionHost
+  private currentDirectory = ''
 
   public constructor(private readonly host: SourceHost) {
-    this.hostDirectoryExists = (directoryPath) =>
-      host.fileExists(directoryPath) || ts.sys.directoryExists(directoryPath)
-    this.hostFileExists = (filePath) =>
-      host.fileExists(filePath) || ts.sys.fileExists(filePath)
-    this.hostReadFile = (filePath) =>
-      host.readFile(filePath) ?? ts.sys.readFile(filePath)
+    this.resolutionHost = {
+      directoryExists: (directoryPath) =>
+        host.fileExists(directoryPath) || ts.sys.directoryExists(directoryPath),
+      fileExists: (filePath) =>
+        host.fileExists(filePath) || ts.sys.fileExists(filePath),
+      getCurrentDirectory: () => this.currentDirectory,
+      getDirectories: ts.sys.getDirectories,
+      readFile: (filePath) =>
+        host.readFile(filePath) ?? ts.sys.readFile(filePath),
+      realpath: ts.sys.realpath,
+      useCaseSensitiveFileNames: ts.sys.useCaseSensitiveFileNames,
+    }
   }
 
   public clear(): void {
@@ -64,21 +69,13 @@ export class ImportResolver {
     }
 
     const compilerOptions = this.getCompilerOptions(normalizedFromFilePath)
-    const resolutionHost: ts.ModuleResolutionHost = {
-      directoryExists: this.hostDirectoryExists,
-      fileExists: this.hostFileExists,
-      getCurrentDirectory: () => path.dirname(normalizedFromFilePath),
-      getDirectories: ts.sys.getDirectories,
-      readFile: this.hostReadFile,
-      realpath: ts.sys.realpath,
-      useCaseSensitiveFileNames: ts.sys.useCaseSensitiveFileNames,
-    }
+    this.currentDirectory = path.dirname(normalizedFromFilePath)
 
     const result = ts.resolveModuleName(
       specifier,
       normalizedFromFilePath,
       compilerOptions,
-      resolutionHost,
+      this.resolutionHost,
     ).resolvedModule
 
     if (!result || !isSupportedSourceFile(result.resolvedFileName)) {