typescript, javascript: index Vue single-file components

graph/test/javascript/cases/69-vue-sfc/src/Comp.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { Child, MyBadge } from './child.js';
+function sfcHelper() { return 1; }
+function onSave(value) { return value; }
+const total = 3;
+</script>
+
+<template>
+  <div>
+    <Child msg="from sfc" @ping="sfcHelper" />
+    <my-badge v-if="total" />
+    <button @click="onSave(total)">{{ sfcHelper() }}</button>
+  </div>
+</template>

graph/test/javascript/cases/69-vue-sfc/src/TemplateOnly.vue

@@ -0,0 +1,3 @@
+<template>
+  <Child @ping="sfcHelper" />
+</template>

graph/test/javascript/cases/69-vue-sfc/src/Typed.vue

@@ -0,0 +1,4 @@
+<script setup lang="ts">
+function typedHelper(): number { return 2; }
+</script>
+<template><button @click="typedHelper">x</button></template>

graph/test/javascript/cases/69-vue-sfc/src/child.js

@@ -0,0 +1,7 @@
+export function Child(props) {
+  return props.msg;
+}
+
+export function MyBadge() {
+  return 'badge';
+}

graph/test/javascript/cases/69-vue-sfc/src/main.js

@@ -0,0 +1,5 @@
+import Comp from './Comp.vue';
+
+export function mount() {
+  return Comp;
+}

graph/test/javascript/expected/69-vue-sfc.diag

@@ -0,0 +1 @@
+package_entry    @axiomcode/code-graph  .  []  MAIN  dist/reason.js  NOT_STAGED  -> -

graph/test/javascript/expected/69-vue-sfc.edges

@@ -0,0 +1,5 @@
+Comp.vue:10:34 FUNCTION_CALL sfcHelper  ->  known_edge  Comp.vue:3:1 sfcHelper
+Comp.vue:10:6 FUNCTION_CALL Child  ->  known_edge  child.js:1:1 Child
+Comp.vue:11:6 FUNCTION_CALL MyBadge  ->  known_edge  child.js:5:1 MyBadge
+Comp.vue:12:21 FUNCTION_CALL onSave  ->  known_edge  Comp.vue:4:1 onSave
+Comp.vue:12:40 FUNCTION_CALL sfcHelper  ->  known_edge  Comp.vue:3:1 sfcHelper

graph/test/javascript/expected/69-vue-sfc.oracle

@@ -0,0 +1 @@
+# defects: 0

graph/test/typescript/cases/80-vue-sfc/src/Comp.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Child, format } from './child';
+function sfcHelper(): number { return 1; }
+function onSave(value: number): void { void value; }
+const total = 3;
+</script>
+
+<template>
+  <div class="card">
+    <Child msg="from sfc" @ping="sfcHelper" />
+    <button @click="onSave(total)">{{ format(total) }}</button>
+  </div>
+</template>
+
+<style scoped>
+.card { color: red; }
+</style>

graph/test/typescript/cases/80-vue-sfc/src/Plain.vue

@@ -0,0 +1,4 @@
+<script setup>
+function plainHelper() { return 2; }
+</script>
+<template><button @click="plainHelper">x</button></template>

graph/test/typescript/cases/80-vue-sfc/src/TemplateFirst.vue

@@ -0,0 +1,14 @@
+<template>
+  <section>
+    <my-badge v-if="shown()" />
+    <input @input="
+      onInput()
+    " />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { MyBadge } from './child';
+function shown(): boolean { return true; }
+function onInput(): void {}
+</script>

graph/test/typescript/cases/80-vue-sfc/src/TemplateOnly.vue

@@ -0,0 +1,3 @@
+<template>
+  <Child @ping="sfcHelper" />
+</template>

graph/test/typescript/cases/80-vue-sfc/src/child.ts

@@ -0,0 +1,11 @@
+export function Child(props: { msg: string }): string {
+  return props.msg;
+}
+
+export function MyBadge(): string {
+  return 'badge';
+}
+
+export function format(n: number): string {
+  return n.toFixed(2);
+}

graph/test/typescript/cases/80-vue-sfc/src/main.ts

@@ -0,0 +1,5 @@
+import Comp from './Comp.vue';
+
+export function mount(): unknown {
+  return Comp;
+}

graph/test/typescript/cases/80-vue-sfc/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  const component: unknown;
+  export default component;
+}

graph/test/typescript/cases/80-vue-sfc/src/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["**/*.ts", "**/*.vue"]
+}

graph/test/typescript/expected/80-vue-sfc.edges

@@ -0,0 +1,8 @@
+ambiguous_unknown	METHOD_CALL	child#format(number) @L10 -> -
+known_edge	FUNCTION_CALL	Comp.vue#<module-init>() @L10 -> Comp.vue#sfcHelper()
+known_edge	FUNCTION_CALL	Comp.vue#<module-init>() @L10 -> child#Child({ msg: string })
+known_edge	FUNCTION_CALL	Comp.vue#<module-init>() @L11 -> Comp.vue#onSave(number)
+known_edge	FUNCTION_CALL	Comp.vue#<module-init>() @L11 -> child#format(number)
+known_edge	FUNCTION_CALL	TemplateFirst.vue#<module-init>() @L3 -> TemplateFirst.vue#shown()
+known_edge	FUNCTION_CALL	TemplateFirst.vue#<module-init>() @L3 -> child#MyBadge()
+known_edge	FUNCTION_CALL	TemplateFirst.vue#<module-init>() @L5 -> TemplateFirst.vue#onInput()

graph/test/typescript/expected/80-vue-sfc.entries

@@ -0,0 +1,5 @@
+── entry_point (4) ──
+  exported_from_entry_module main#mount   main.ts:3
+  unimported_module TemplateFirst.vue#<module>   TemplateFirst.vue:1
+  unimported_module main#<module>   main.ts:1
+  unimported_module shims-vue#<module>   shims-vue.d.ts:1

graph/test/typescript/expected/80-vue-sfc.fields

@@ -0,0 +1 @@
+known_edge	read	child#Child({ msg: string }) -> { msg: string }#msg

graph/test/typescript/expected/80-vue-sfc.fields-oracle

@@ -0,0 +1,9 @@
+80-vue-sfc [fields]
+  precision 0.0000   (0 correct, 1 wrong)
+  recall    0.0000   (0 of 1 the compiler resolved)
+  sites 1   resolved 1 (100.0%)
+  tiers known_edge=1
+  access read=1
+  not scored: 0 rows whose target is not a client declaration
+    WRONG   child#Child({ msg: string }) READ { msg: string }#msg
+    MISSING child#Child({ msg: string }) READ child#msg

graph/test/typescript/expected/80-vue-sfc.oracle

@@ -0,0 +1,8 @@
+oracle=0 engine=7 agree=0 missing=0 (known 0, NEW 0) extra=7
+  extra    Comp.vue#<module-init>() -> Comp.vue#onSave(number)
+  extra    Comp.vue#<module-init>() -> Comp.vue#sfcHelper()
+  extra    Comp.vue#<module-init>() -> child#Child({ msg: string })
+  extra    Comp.vue#<module-init>() -> child#format(number)
+  extra    TemplateFirst.vue#<module-init>() -> TemplateFirst.vue#onInput()
+  extra    TemplateFirst.vue#<module-init>() -> TemplateFirst.vue#shown()
+  extra    TemplateFirst.vue#<module-init>() -> child#MyBadge()

graph/test/typescript/expected/80-vue-sfc.types-oracle

@@ -0,0 +1,7 @@
+80-vue-sfc [types]
+  precision 0.0000   (0 correct, 0 wrong)
+  recall    0.0000   (0 of 0 the compiler resolved)
+  sites 0   resolved 0 
+  tiers 
+  contexts 
+  not scored: 0 rows whose target is not a client declaration

parser/src/parsers/javascript/extractors/js-fact-extractor.ts

@@ -111,6 +111,11 @@ export interface JsFileExtractionOptions {
   readonly projectModuleHashes: ReadonlyMap<string, string>;
   /** Absolute path -> project-relative path, extension stripped. */
   readonly toProjectRelative: (absolutePath: string) => string;
+  /**
+   * How `sourceText` parses, when the file's extension cannot say: a `.vue`
+   * component's virtual script is JS or JSX by its `lang`, not by its name.
+   */
+  readonly scriptKind?: ts.ScriptKind;
 }
 
 export interface JsFileFacts {
@@ -160,7 +165,7 @@ export function extractJavaScriptFile(options: JsFileExtractionOptions): JsFileF
     options.sourceText,
     ts.ScriptTarget.Latest,
     true,
-    scriptKindFor(options.absoluteFilePath)
+    options.scriptKind ?? scriptKindFor(options.absoluteFilePath)
   );
 
   const moduleResult = extractModule({

parser/src/parsers/javascript/extractors/js-module-edge-extractor.ts

@@ -28,6 +28,7 @@ import {
   isRequireCall,
   pointOf,
 } from '@/utils/javascript';
+import { resolveVueSpecifier } from '@/utils/vue-sfc';
 
 /**
  * `js_import` and `js_export`, minted in a **second pass from expression rows**.
@@ -1199,7 +1200,10 @@ class JsModuleEdgeExtractor {
       undefined,
       m
     ).resolvedModule?.resolvedFileName;
-    const resolved = resolveIn(mode) ?? (mode === ts.ModuleKind.ESNext ? resolveIn(ts.ModuleKind.CommonJS) : undefined);
+    // tsc resolves no `.vue` import itself (its extensions are fixed), so a
+    // component in this program is looked up by path.
+    const resolved = resolveIn(mode) ?? (mode === ts.ModuleKind.ESNext ? resolveIn(ts.ModuleKind.CommonJS) : undefined)
+      ?? resolveVueSpecifier(specifier, this.options.absoluteFilePath);
     if (resolved === undefined) {
       return { filePath: '', outcome: JsImportResolutionOutcome.UNRESOLVED_MISSING };
     }

parser/src/parsers/typescript/extractors/ts-fact-extractor.ts

@@ -43,6 +43,7 @@ import {
   ResolutionStats,
   TsLocalResolver,
 } from '@/parsers/typescript/extractors/ts-resolution-linker';
+import { resolveVueSpecifier } from '@/utils/vue-sfc';
 
 /**
  * Extracts the whole fact spine for ONE TypeScript file.
@@ -91,6 +92,11 @@ export interface TsFileExtractionOptions {
   readonly projectModuleHashes: ReadonlyMap<string, string>;
   /** Absolute path -> project-relative path, extension stripped. */
   readonly toProjectRelative: (absolutePath: string) => string;
+  /**
+   * How `sourceText` parses, when the file's extension cannot say: a `.vue`
+   * component's virtual script is TS or TSX by its `lang`, not by its name.
+   */
+  readonly scriptKind?: ts.ScriptKind;
 }
 
 export interface TsFileFacts {
@@ -142,7 +148,7 @@ export function extractTypeScriptFile(options: TsFileExtractionOptions): TsFileF
     options.sourceText,
     ts.ScriptTarget.Latest,
     true,
-    scriptKindFor(options.absoluteFilePath)
+    options.scriptKind ?? scriptKindFor(options.absoluteFilePath)
   );
 
   const modules = extractModules({
@@ -173,7 +179,8 @@ export function extractTypeScriptFile(options: TsFileExtractionOptions): TsFileF
         options.compilerOptions,
         ts.sys
       );
-      const fileName = resolved.resolvedModule?.resolvedFileName;
+      const fileName = resolved.resolvedModule?.resolvedFileName
+        ?? resolveVueSpecifier(specifier, options.absoluteFilePath);
       if (!fileName) {
         return undefined;
       }

parser/src/parsers/typescript/extractors/ts-import-extractor.ts

@@ -5,6 +5,7 @@ import * as ts from 'typescript';
 import { TsImportRegistry } from '@/analysis-types/typescript/TsImportRegistry';
 import { TsImportKind, TsImportResolutionKind } from '@/enums/typescript/imports';
 import { nodeId } from '@/parsers/typescript/extractors/ts-binder';
+import { resolveVueSpecifier, VUE_EXTENSION } from '@/utils/vue-sfc';
 
 /**
  * Emits `ts_import` rows — schema §4.12.
@@ -442,6 +443,18 @@ export class TsImportExtractor {
       ts.sys
     );
     const module = resolved.resolvedModule;
+    const vueFile = module ? undefined : resolveVueSpecifier(specifier, this.options.absoluteFilePath);
+    if (vueFile !== undefined && this.options.projectModuleHashes.has(vueFile)) {
+      // A component in this program; tsc resolves no `.vue` import itself.
+      return {
+        absolutePath: vueFile,
+        relativePath: this.options.toProjectRelative(vueFile),
+        moduleHash: this.options.projectModuleHashes.get(vueFile)!,
+        kind: TsImportResolutionKind.RELATIVE_FILE,
+        extension: VUE_EXTENSION,
+        packageName: '',
+      };
+    }
     if (!module) {
       // `undefined` is an honest answer, not a failure to try. It is also the
       // right answer for a wildcard ambient specifier like `"*.svg"`, which

parser/src/parsers/typescript/tsconfig-resolver.ts

@@ -243,7 +243,11 @@ export class TsConfigResolver {
         ts.sys,
         path.dirname(configPath),
         undefined,
-        configPath
+        configPath,
+        undefined,
+        // `.vue` components are the program's files too, as vue-tsc reads it:
+        // without this `include: ["src/**/*.vue"]` claims nothing.
+        [{ extension: '.vue', isMixedContent: true, scriptKind: ts.ScriptKind.Deferred }]
       );
       result = {
         configPath,