diff --git a/CHANGELOG.md b/CHANGELOG.md
index 32132da00..d71cb51f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
### Fixes
+- In Nuxt and Astro projects, a file-routed page is now linked to the component its file defines. An Astro endpoint is linked to the HTTP-verb handlers it exports, like `export const GET`. Before, a page route like Nuxt's `pages/admin.vue` or Astro's `src/pages/about.astro` linked to nothing, so callers, impact and flows stopped at the route.
- In Rails apps, a `resources` line's `only:` and `except:` are now read in every form Rails accepts: `%i[new create index]`, `%w(index show)`, a quoted name, and the older `:only => [...]`. Before, only a bracketed list was read, so maybe's `resources :family_exports, only: %i[new create index]` became all seven routes, four of them to actions the controller doesn't have.
- In Vue, Svelte and Astro files, a component now owns its script, and what a `
+`,
+ 'pages/admin.vue': `admin
+`,
+ 'pages/orders/index.vue': `orders
+`,
+ 'components/index.vue': `not a page
+`,
+ },
+ astro: {
+ 'package.json': JSON.stringify({ name: 'site', private: true, dependencies: { astro: '^4.0.0' } }),
+ 'src/pages/index.astro': `---
+const title = 'Home';
+---
+
{title}
+`,
+ 'src/pages/about.astro': `about
+`,
+ 'src/pages/blog/index.astro': `blog
+`,
+ 'src/pages/api/hello.ts': `export const GET = async () => new Response('hi');
+export async function POST() { return new Response('ok'); }
+`,
+ },
+};
+
+const graphs: Record = {};
+
+beforeAll(async () => {
+ for (const [name, files] of Object.entries(projects)) {
+ const root = fs.mkdtempSync(path.join(os.tmpdir(), `cg-page-${name}-`));
+ for (const [rel, content] of Object.entries(files)) {
+ fs.mkdirSync(path.dirname(path.join(root, rel)), { recursive: true });
+ fs.writeFileSync(path.join(root, rel), content);
+ }
+ graphs[name] = { root, cg: await CodeGraph.init(root, { index: true }) };
+ }
+});
+
+afterAll(() => {
+ for (const { root, cg } of Object.values(graphs)) {
+ cg.close();
+ fs.rmSync(root, { recursive: true, force: true });
+ }
+});
+
+/** route name → the files of what it calls or references. */
+function served(cg: CodeGraph): Record {
+ const out: Record = {};
+ for (const route of cg.getNodesByKind('route')) {
+ out[route.name] = cg.getOutgoingEdgesFrom([route.id], ['calls', 'references'])
+ .map((e) => cg.getNode(e.target)!)
+ .map((n) => `${n.kind} ${n.filePath}`);
+ }
+ return out;
+}
+
+describe('a Nuxt page', () => {
+ it('is served by its own file’s component', () => {
+ const map = served(graphs.nuxt!.cg);
+ expect(map['/']).toEqual(['component pages/index.vue']);
+ expect(map['/admin']).toEqual(['component pages/admin.vue']);
+ expect(map['/orders']).toEqual(['component pages/orders/index.vue']);
+ });
+
+ it('is listed with the component that serves it', () => {
+ const { entries } = buildRoutes(graphs.nuxt!.cg, new URLSearchParams());
+ expect(entries.map((e) => `${e.url} ${e.handler} ${e.file}`).sort()).toEqual([
+ '/ index pages/index.vue',
+ '/admin admin pages/admin.vue',
+ '/orders index pages/orders/index.vue',
+ ]);
+ });
+});
+
+describe('an Astro page', () => {
+ it('is served by its own file’s component, and an endpoint by the verbs it exports', () => {
+ const map = served(graphs.astro!.cg);
+ expect(map['/']).toEqual(['component src/pages/index.astro']);
+ expect(map['/about']).toEqual(['component src/pages/about.astro']);
+ expect(map['/blog']).toEqual(['component src/pages/blog/index.astro']);
+ expect(map['/api/hello']).toEqual(['function src/pages/api/hello.ts', 'function src/pages/api/hello.ts']);
+ });
+});
diff --git a/docs/viewer-launch-changelog.md b/docs/viewer-launch-changelog.md
index 7376e5517..71b2a2e10 100644
--- a/docs/viewer-launch-changelog.md
+++ b/docs/viewer-launch-changelog.md
@@ -125,6 +125,8 @@ These describe `codegraph ui` and its screens. They were taken out of `## [Unrel
## Fixes — Screens, links and navigation
+- **Routes served by a component are listed.** Entry points and the Steps picker listed a route only when a function, method or class served it. A Vue Router, Nuxt, Svelte or Astro screen is served by a component, so those apps' routes weren't listed at all. They are now, each with the component that serves it.
+
- **Where the app goes after login is a fork, not two always-es.** A navigation whose destination comes back from a helper — `router.replace(await resolvePostLoginRoute())` over `return (await hasSeenWelcome(…)) ? '/home/' : '/welcome/'` — drew both screens with no condition, reading as if the welcome screen always shows. The two arms share a line, and only a column can tell them apart; each synthesized edge now carries its literal's own position, so the guard reader says which arm it is: `WHEN await hasSeenWelcome(…)` → home, and its negation → welcome. And the scan starts at the helper's body, so a literal-union return type — `Promise<'/welcome/' | '/home/'>`, whose routes are string literals too, written first — no longer stands in for the navigation itself. Re-index after upgrading to pick the positions up.
- **A screen that talks to native code keeps its own navigations.** In a React Native or Expo app, a `router.push` written inside a listener for a native event was credited to whichever screen had *started* that round trip, not to the screen the push is written on. In one app that moved seven transitions off the capture screen and onto the review screen it opens — leaving the review screen looking as though nothing in the app could reach it, stranded in the "no transition reaches this" band at the bottom of the Screens tab, and printing Swift conditions like `Thread.isMainThread` on a JavaScript navigation. A navigation now belongs to the screen whose file it is written in; an event arriving from native code, from an HTTP call or off a queue is no longer read backwards as if it were a caller.
diff --git a/src/db/queries.ts b/src/db/queries.ts
index 443b85137..655f98a98 100644
--- a/src/db/queries.ts
+++ b/src/db/queries.ts
@@ -1204,7 +1204,8 @@ export class QueryBuilder {
if (!this.stmts.getRoutingManifest) {
// Edge kind varies across framework resolvers: Spring/Rails/
// Laravel/Drupal emit `references`, Express emits `calls`. Accept
- // both — the semantic is the same (route → its handler).
+ // both — the semantic is the same (route → its handler). A screen in
+ // a Vue / Svelte / Astro app is served by a `component`.
this.stmts.getRoutingManifest = this.db.prepare(`
SELECT
r.name AS url,
@@ -1220,7 +1221,7 @@ export class QueryBuilder {
JOIN nodes h ON e.target = h.id
WHERE r.kind = 'route'
AND e.kind IN ('references', 'calls')
- AND h.kind IN ('function', 'method', 'class', 'constant', 'variable')
+ AND h.kind IN ('function', 'method', 'class', 'constant', 'variable', 'component')
ORDER BY r.file_path, r.start_line
LIMIT ?
`);
diff --git a/src/resolution/frameworks/astro.ts b/src/resolution/frameworks/astro.ts
index 4645335ba..635d19e97 100644
--- a/src/resolution/frameworks/astro.ts
+++ b/src/resolution/frameworks/astro.ts
@@ -7,6 +7,7 @@
import { Node } from '../../types';
import { FrameworkResolver, UnresolvedRef, ResolvedRef, ResolutionContext } from '../types';
+import { pageComponentRef, resolvePageComponent } from './page-component';
/**
* Astro virtual module prefixes — framework-provided, not user code
@@ -47,6 +48,10 @@ export const astroResolver: FrameworkResolver = {
},
resolve(ref: UnresolvedRef, context: ResolutionContext): ResolvedRef | null {
+ // A page route names the component its file is.
+ const page = resolvePageComponent(ref, context);
+ if (page) return page;
+
// Pattern 1: the `Astro` global (Astro.props, Astro.url, Astro.params, …)
// — runtime-provided in every component's frontmatter. Resolving it as
// framework-provided keeps it from name-matching a user symbol named Astro.
@@ -95,8 +100,9 @@ export const astroResolver: FrameworkResolver = {
return null;
},
- extract(filePath: string, _content: string) {
+ extract(filePath: string, content: string) {
const nodes: Node[] = [];
+ const references: UnresolvedRef[] = [];
const now = Date.now();
// Normalize to forward slashes
@@ -118,8 +124,9 @@ export const astroResolver: FrameworkResolver = {
!/\.config\.[a-z]+$/.test(base)
) {
const routePath = filePathToAstroRoute(afterPages);
-
- nodes.push({
+ const isPage = normalized.endsWith('.astro');
+ const language = isPage ? 'astro' : 'typescript';
+ const route: Node = {
id: `route:${filePath}:${routePath}:1`,
kind: 'route',
name: routePath,
@@ -129,16 +136,31 @@ export const astroResolver: FrameworkResolver = {
endLine: 1,
startColumn: 0,
endColumn: 0,
- language: normalized.endsWith('.astro') ? 'astro' : 'typescript',
+ language,
updatedAt: now,
- });
+ };
+ nodes.push(route);
+ if (isPage) {
+ references.push(pageComponentRef(route, '.astro', 'astro'));
+ } else {
+ // An endpoint is served by the verbs it exports: `export const GET:
+ // APIRoute = …`, `export async function POST(…)`.
+ for (const m of content.matchAll(ENDPOINT_EXPORT)) {
+ const verb = m[1] ?? m[2]!;
+ const line = content.slice(0, m.index).split('\n').length;
+ references.push({ fromNodeId: route.id, referenceName: verb, referenceKind: 'references', line, column: 0, filePath, language, candidates: [verb] });
+ }
+ }
}
}
- return { nodes, references: [] };
+ return { nodes, references };
},
};
+/** An Astro endpoint's exported handler: `export const GET`, `export async function POST`. */
+const ENDPOINT_EXPORT = /^\s*export\s+(?:(?:async\s+)?function\s+(GET|POST|PUT|PATCH|DELETE|OPTIONS|HEAD|ALL)\b|const\s+(GET|POST|PUT|PATCH|DELETE|OPTIONS|HEAD|ALL)\b)/gm;
+
/**
* Check if string is PascalCase
*/
diff --git a/src/resolution/frameworks/page-component.ts b/src/resolution/frameworks/page-component.ts
new file mode 100644
index 000000000..38d311b11
--- /dev/null
+++ b/src/resolution/frameworks/page-component.ts
@@ -0,0 +1,44 @@
+/**
+ * A file-routed page — Nuxt's `pages/admin.vue`, Astro's `src/pages/about.astro`
+ * — is served by the component its file IS: the single-file-component
+ * extractor's one component per file, named after the file. Without the link a
+ * page route stood alone, so the viewer's Steps tab drew nothing for a page and
+ * the routes list never named what serves it.
+ *
+ * The route says so with a `calls` reference by that name, the way a Next.js
+ * page names its default export, and {@link resolvePageComponent} lands it on
+ * the SAME file's component — never on a same-named one elsewhere, since every
+ * `index.vue` is a component named `index`.
+ */
+
+import type { Language, Node } from '../../types';
+import type { ResolutionContext, ResolvedRef, UnresolvedRef } from '../types';
+
+/** The component name a single-file-component extractor gives a file: its basename, extension off. */
+export function pageComponentName(filePath: string, extension: string): string {
+ const base = filePath.split(/[/\\]/).pop() ?? filePath;
+ return base.endsWith(extension) ? base.slice(0, -extension.length) : base;
+}
+
+export function pageComponentRef(route: Node, extension: string, language: Language): UnresolvedRef {
+ const name = pageComponentName(route.filePath, extension);
+ return {
+ fromNodeId: route.id,
+ referenceName: name,
+ referenceKind: 'calls',
+ line: 1,
+ column: 0,
+ filePath: route.filePath,
+ language,
+ candidates: [name],
+ };
+}
+
+/** A page route's reference to its file's own component, or null when this is not one. */
+export function resolvePageComponent(ref: UnresolvedRef, context: ResolutionContext): ResolvedRef | null {
+ if (ref.referenceKind !== 'calls' || !ref.fromNodeId.startsWith(`route:${ref.filePath}:`)) return null;
+ const component = context
+ .getNodesInFile(ref.filePath)
+ .find((n) => n.kind === 'component' && n.name === ref.referenceName);
+ return component ? { original: ref, targetNodeId: component.id, confidence: 0.95, resolvedBy: 'framework' } : null;
+}
diff --git a/src/resolution/frameworks/vue.ts b/src/resolution/frameworks/vue.ts
index e894e9b46..6a5d9027c 100644
--- a/src/resolution/frameworks/vue.ts
+++ b/src/resolution/frameworks/vue.ts
@@ -8,6 +8,7 @@
import { Node } from '../../types';
import { FrameworkResolver, UnresolvedRef, ResolvedRef, ResolutionContext } from '../types';
import { dependsOn } from './package-deps';
+import { pageComponentRef, resolvePageComponent } from './page-component';
/** The languages a Vue app's scripts are written in. */
const VUE_SCRIPT_LANGUAGES: ReadonlySet = new Set(['vue', 'javascript', 'typescript', 'tsx', 'jsx']);
@@ -212,12 +213,14 @@ export const nuxtResolver: FrameworkResolver = {
return context.getAllFiles().some((f) => /(?:^|\/)nuxt\.config\.(?:[cm]?[jt]s)$/.test(f));
},
- resolve(): ResolvedRef | null {
- return null;
+ resolve(ref: UnresolvedRef, context: ResolutionContext): ResolvedRef | null {
+ // A page route names the component its file is.
+ return resolvePageComponent(ref, context);
},
extract(filePath: string, _content: string) {
const nodes: Node[] = [];
+ const references: UnresolvedRef[] = [];
const now = Date.now();
// Forward slashes, and a leading `/` so an app at the repository root
@@ -229,7 +232,7 @@ export const nuxtResolver: FrameworkResolver = {
if (pagesIndex !== -1 && normalized.endsWith('.vue')) {
const routePath = filePathToNuxtRoute(normalized, pagesIndex + '/pages/'.length);
if (routePath !== null) {
- nodes.push({
+ const route: Node = {
id: `route:${filePath}:${routePath}:1`,
kind: 'route',
name: routePath,
@@ -241,7 +244,9 @@ export const nuxtResolver: FrameworkResolver = {
endColumn: 0,
language: 'vue',
updatedAt: now,
- });
+ };
+ nodes.push(route);
+ references.push(pageComponentRef(route, '.vue', 'vue'));
}
}
@@ -292,7 +297,7 @@ export const nuxtResolver: FrameworkResolver = {
});
}
- return { nodes, references: [] };
+ return { nodes, references };
},
};