fix: import resolution for type checking.

Author: knightedcodemonkey

playwright/diagnostics.spec.ts

@@ -1,9 +1,11 @@
 import { expect, test } from '@playwright/test'
 import {
+  addWorkspaceTab,
   ensurePanelToolsVisible,
   ensureDiagnosticsDrawerOpen,
   getActiveComponentEditorLineNumber,
   getActiveStylesEditorLineNumber,
+  setWorkspaceTabSource,
   runComponentLint,
   runStylesLint,
   runTypecheck,
@@ -147,6 +149,76 @@ test('dom mode typecheck resolves @knighted/jsx type-only imports', async ({ pag
   expect(diagnosticsText).not.toContain("Cannot find module '@knighted/jsx'")
 })
 
+test('typecheck resolves .js import to workspace tsx module tab', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await ensurePanelToolsVisible(page, 'component')
+  await addWorkspaceTab(page)
+
+  await setWorkspaceTabSource(page, {
+    fileName: 'module.tsx',
+    kind: 'component',
+    source: [
+      'type ThingProps = { label: string }',
+      'export const Thing = ({ label }: ThingProps) => <p>{label}</p>',
+    ].join('\n'),
+  })
+
+  await setComponentEditorSource(
+    page,
+    [
+      "import { Thing } from './module.js'",
+      'const App = () => <Thing label="ok" />',
+      '',
+    ].join('\n'),
+  )
+
+  await runTypecheck(page)
+  await ensureDiagnosticsDrawerOpen(page)
+  await expect(page.locator('#diagnostics-component')).toContainText(
+    'No TypeScript errors found.',
+  )
+
+  const diagnosticsText = await page.locator('#diagnostics-component').innerText()
+  expect(diagnosticsText).not.toContain("Cannot find module './module.js'")
+})
+
+test('typecheck resolves parent-relative .js import to workspace tsx module tab', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await ensurePanelToolsVisible(page, 'component')
+  await addWorkspaceTab(page)
+
+  await setWorkspaceTabSource(page, {
+    fileName: 'module.tsx',
+    kind: 'component',
+    source: [
+      'type ThingProps = { label: string }',
+      'export const Thing = ({ label }: ThingProps) => <p>{label}</p>',
+    ].join('\n'),
+  })
+
+  await setComponentEditorSource(
+    page,
+    [
+      "import { Thing } from '../components/module.js'",
+      'const App = () => <Thing label="ok" />',
+      '',
+    ].join('\n'),
+  )
+
+  await runTypecheck(page)
+  await ensureDiagnosticsDrawerOpen(page)
+  await expect(page.locator('#diagnostics-component')).toContainText(
+    'No TypeScript errors found.',
+  )
+
+  const diagnosticsText = await page.locator('#diagnostics-component').innerText()
+  expect(diagnosticsText).not.toContain("Cannot find module '../components/module.js'")
+})
+
 test('component diagnostics rows navigate editor to reported line', async ({ page }) => {
   await waitForInitialRender(page)
 

src/app.js

@@ -2386,6 +2386,7 @@ const typeDiagnostics = createTypeDiagnosticsController({
   getTypeScriptLibUrls,
   getTypePackageFileUrls,
   getJsxSource: () => getJsxSource(),
+  getWorkspaceTabs: () => buildWorkspaceTabsSnapshot(),
   getRenderMode: () => renderMode.value,
   setTypecheckButtonLoading,
   setTypeDiagnosticsDetails,

src/modules/type-diagnostics.js

@@ -234,6 +234,7 @@ export const createTypeDiagnosticsController = ({
   getTypeScriptLibUrls,
   getTypePackageFileUrls,
   getJsxSource,
+  getWorkspaceTabs = () => [],
   getRenderMode = () => 'dom',
   defaultTypeScriptLibFileName = 'lib.esnext.full.d.ts',
   setTypecheckButtonLoading,
@@ -248,6 +249,116 @@ export const createTypeDiagnosticsController = ({
   getActiveTypeDiagnosticsRuns,
   onIssuesDetected = () => {},
 }) => {
+  const styleTabLanguages = new Set(['css', 'less', 'sass', 'module'])
+
+  const isStyleWorkspaceTab = tab => {
+    if (!tab || typeof tab !== 'object') {
+      return false
+    }
+
+    const language =
+      typeof tab.language === 'string' ? tab.language.trim().toLowerCase() : ''
+    if (styleTabLanguages.has(language)) {
+      return true
+    }
+
+    const path = typeof tab.path === 'string' ? tab.path.trim().toLowerCase() : ''
+    return /\.(css|less|sass|scss)$/.test(path)
+  }
+
+  const toWorkspaceComponentTabs = () => {
+    const tabs = typeof getWorkspaceTabs === 'function' ? getWorkspaceTabs() : []
+    if (!Array.isArray(tabs)) {
+      return []
+    }
+
+    return tabs
+      .filter(tab => tab && typeof tab === 'object' && !isStyleWorkspaceTab(tab))
+      .map(tab => ({
+        ...tab,
+        path:
+          typeof tab.path === 'string' && tab.path.trim().length > 0
+            ? normalizeRelativePath(tab.path)
+            : typeof tab.name === 'string' && tab.name.trim().length > 0
+              ? normalizeRelativePath(tab.name)
+              : '',
+        content: typeof tab.content === 'string' ? tab.content : '',
+      }))
+      .filter(tab => tab.path.length > 0)
+  }
+
+  const resolveWorkspaceEntryForTypecheck = tabs => {
+    if (!Array.isArray(tabs) || tabs.length === 0) {
+      return null
+    }
+
+    return (
+      tabs.find(tab => tab?.role === 'entry' && typeof tab.path === 'string') ??
+      tabs.find(tab => tab?.id === 'component' && typeof tab.path === 'string') ??
+      tabs[0] ??
+      null
+    )
+  }
+
+  const toJsCompatibilityCandidates = (specifier, containingFile) => {
+    if (typeof specifier !== 'string' || !specifier.startsWith('.')) {
+      return []
+    }
+
+    const containingDirectory = dirname(containingFile)
+    const resolvedSpecifier = joinPath(containingDirectory, specifier)
+    const withoutJsExtension = resolvedSpecifier.replace(/\.(mjs|cjs|jsx|js)$/i, '')
+
+    if (withoutJsExtension === resolvedSpecifier) {
+      return []
+    }
+
+    const candidates = [
+      `${withoutJsExtension}.ts`,
+      `${withoutJsExtension}.tsx`,
+      `${withoutJsExtension}.mts`,
+      `${withoutJsExtension}.cts`,
+      `${withoutJsExtension}/index.ts`,
+      `${withoutJsExtension}/index.tsx`,
+      `${withoutJsExtension}/index.mts`,
+      `${withoutJsExtension}/index.cts`,
+    ]
+
+    return [...new Set(candidates)]
+  }
+
+  const toTypeScriptExtension = (compiler, fileName) => {
+    if (fileName.endsWith('.tsx')) {
+      return compiler.Extension?.Tsx ?? '.tsx'
+    }
+
+    if (fileName.endsWith('.ts')) {
+      return compiler.Extension?.Ts ?? '.ts'
+    }
+
+    if (fileName.endsWith('.mts')) {
+      return compiler.Extension?.Mts ?? '.mts'
+    }
+
+    if (fileName.endsWith('.cts')) {
+      return compiler.Extension?.Cts ?? '.cts'
+    }
+
+    if (fileName.endsWith('.d.ts')) {
+      return compiler.Extension?.Dts ?? '.d.ts'
+    }
+
+    if (fileName.endsWith('.jsx')) {
+      return compiler.Extension?.Jsx ?? '.jsx'
+    }
+
+    if (fileName.endsWith('.js')) {
+      return compiler.Extension?.Js ?? '.js'
+    }
+
+    return compiler.Extension?.Ts ?? '.ts'
+  }
+
   let typeCheckRunId = 0
   let typeScriptCompiler = null
   let typeScriptCompilerProvider = null
@@ -690,7 +801,10 @@ export const createTypeDiagnosticsController = ({
   }
 
   const collectTypeDiagnostics = async (compiler, sourceText) => {
-    const sourceFileName = 'component.tsx'
+    const workspaceComponentTabs = toWorkspaceComponentTabs()
+    const resolvedEntryTab = resolveWorkspaceEntryForTypecheck(workspaceComponentTabs)
+    const sourceFileName = resolvedEntryTab?.path || 'component.tsx'
+    const typecheckSourceFileName = sourceFileName.replace(/\.(jsx?|mjs|cjs)$/i, '.tsx')
     const jsxTypesFileName = 'knighted-jsx-runtime.d.ts'
     const renderMode = getRenderMode()
     const isReactMode = renderMode === 'react'
@@ -701,7 +815,15 @@ export const createTypeDiagnosticsController = ({
       reactTypes = await ensureReactTypeFiles(compiler)
     }
 
-    const files = new Map([[sourceFileName, sourceText], ...libFiles.entries()])
+    const files = new Map(libFiles.entries())
+
+    if (workspaceComponentTabs.length > 0) {
+      for (const tab of workspaceComponentTabs) {
+        files.set(tab.path, tab.content)
+      }
+    }
+
+    files.set(typecheckSourceFileName, sourceText)
 
     if (!isReactMode) {
       files.set(jsxTypesFileName, domJsxTypes)
@@ -723,6 +845,8 @@ export const createTypeDiagnosticsController = ({
         compiler.ModuleResolutionKind?.NodeJs,
       types: [],
       strict: true,
+      allowJs: true,
+      checkJs: false,
       noEmit: true,
       skipLibCheck: true,
     }
@@ -776,6 +900,22 @@ export const createTypeDiagnosticsController = ({
           return resolved.resolvedModule
         }
 
+        const jsCompatibilityCandidates = toJsCompatibilityCandidates(
+          moduleName,
+          containingFile,
+        )
+        const matchedWorkspaceModule = jsCompatibilityCandidates.find(candidate =>
+          files.has(candidate),
+        )
+
+        if (matchedWorkspaceModule) {
+          return {
+            resolvedFileName: matchedWorkspaceModule,
+            extension: toTypeScriptExtension(compiler, matchedWorkspaceModule),
+            isExternalLibraryImport: false,
+          }
+        }
+
         if (!reactTypes) {
           return undefined
         }
@@ -813,9 +953,13 @@ export const createTypeDiagnosticsController = ({
 
         const scriptKind = normalizedFileName.endsWith('.tsx')
           ? compiler.ScriptKind?.TSX
-          : normalizedFileName.endsWith('.d.ts')
-            ? compiler.ScriptKind?.TS
-            : compiler.ScriptKind?.TS
+          : normalizedFileName.endsWith('.jsx')
+            ? compiler.ScriptKind?.JSX
+            : normalizedFileName.endsWith('.js')
+              ? compiler.ScriptKind?.JS
+              : normalizedFileName.endsWith('.d.ts')
+                ? compiler.ScriptKind?.TS
+                : compiler.ScriptKind?.TS
 
         return compiler.createSourceFile(
           normalizedFileName,
@@ -834,7 +978,7 @@ export const createTypeDiagnosticsController = ({
       resolveModuleNames,
     }
 
-    const rootNames = [sourceFileName]
+    const rootNames = [typecheckSourceFileName]
     if (!isReactMode) {
       rootNames.push(jsxTypesFileName)
     }