0.9.2: Source view, schema checks without the YAML extension

Every Archify page can show its file's YAML in place. Diagrams get
Diagram | Graph | Source (Graph only inside a model), main.archify
Model | Graph | Source, registry and decision pages View | Source, and the
Graph page a Source segment. 2D | 3D moves left of that switch and hides
while Source shows.

The YAML opens in a CodeMirror editor inside the page (dist/source.js,
loaded on first use), themed with the page's colours. Edits go to the VS
Code document as WorkspaceEdits; outside changes come back to the page.
Undo and redo are the editor's own, since VS Code sends ⌘Z in a focused
webview to the webview; save and find stay VS Code's. Problems come from
the host only (what the Problems panel holds for the file) and are
counted on the Source segment; completion and hover come from the schema,
folded into one draft-07 document per diagram type.

The host now checks .archify files against the extension's schema with
ajv on the YAML as written, before archify validate, and checks
.archify-registry files against the registry schema for the first time.
Registry and decision pages become text editor providers. While Source
shows, new renders wait and appear when the picture comes back.

Show Source switches the page to Source; Open in Text Editor (the editor
title button) opens the text beside it, as Show Source did. The decision
schema is no longer given to the YAML extension. Fixed: YAML errors in
registry and decision files were reported on line 1; "Webview is
disposed" when a diagram closed mid-render; the model heading under the
toolbar in narrow editors.
This commit is contained in:
root-at-skic committed 2026-10-27 23:46:05 +02:00
1 parent 5bcd34b839
commit 27d4794ff8
32 files changed
+2486 -127

No files matched your search

+34 -13
View File
@@ -6,31 +6,41 @@ import { DecisionPanel, decisionPanelFromIndex, decisionPanelStandalone } from '
import { ModelService } from '../model/service';
import { readText } from '../util/files';
import { log } from '../util/log';
import { sourceScriptUri } from '../webview/viewer3d';
import { SourceSession } from './sourceSession';
import { handleWebviewMessage, WebviewMessage } from '../webview/messages';
import { decisionPage, makeNonce } from '../webview/page';
import { DECISION_VIEW_TYPE, DIAGRAM_EDITOR_VIEW_TYPE, REGISTRY_VIEW_TYPE } from './viewTypes';
export { DECISION_VIEW_TYPE };
class DecisionDocument implements vscode.CustomDocument {
constructor(readonly uri: vscode.Uri) {}
dispose(): void {}
}
class DecisionView implements vscode.Disposable {
private seq = 0;
private timer: NodeJS.Timeout | undefined;
private last: string | undefined;
root: vscode.Uri | undefined;
private readonly disposables: vscode.Disposable[] = [];
/** The Source view; while it shows, a new page waits in `heldHtml`. */
readonly source: SourceSession;
private heldHtml: string | undefined;
constructor(
private readonly context: vscode.ExtensionContext,
private readonly models: ModelService,
readonly panel: vscode.WebviewPanel,
readonly uri: vscode.Uri,
) {
this.source = new SourceSession(context, panel, uri, 'decision', (shown) => {
if (!shown && this.heldHtml !== undefined) {
const html = this.heldHtml;
this.heldHtml = undefined;
this.panel.webview.html = html;
}
});
this.disposables.push(
this.source,
panel.webview.onDidReceiveMessage((message: WebviewMessage) => {
if (this.source.handle(message)) return;
if (message.type === 'openDiagram') return void this.openInModel(message.path, DIAGRAM_EDITOR_VIEW_TYPE);
if (message.type === 'openRegistry') return void this.openRegistryLine(message.file, message.line);
if (message.type === 'openDecision') return void this.openInModel(message.file, DECISION_VIEW_TYPE);
@@ -86,7 +96,12 @@ class DecisionView implements vscode.Disposable {
const fingerprint = JSON.stringify(decision);
if (fingerprint === this.last) return;
this.last = fingerprint;
this.panel.webview.html = decisionPage({ cspSource: this.panel.webview.cspSource, nonce: makeNonce() }, decision);
const html = decisionPage(
{ cspSource: this.panel.webview.cspSource, nonce: makeNonce(), source: { scriptUri: sourceScriptUri(this.panel.webview, this.context.extensionUri), left: 'View' } },
decision,
);
if (this.source.shown) this.heldHtml = html;
else this.panel.webview.html = html;
}
dispose(): void {
@@ -95,13 +110,16 @@ class DecisionView implements vscode.Disposable {
}
}
/** Read-only custom editor for .archify-decision files: the decision as a page, with its elements and diagrams. */
export class DecisionViewProvider implements vscode.CustomReadonlyEditorProvider<DecisionDocument>, vscode.Disposable {
/** Custom editor for .archify-decision files: the decision as a page, with its elements and diagrams. */
export class DecisionViewProvider implements vscode.CustomTextEditorProvider, vscode.Disposable {
private readonly views = new Set<DecisionView>();
private active: DecisionView | undefined;
private readonly disposables: vscode.Disposable[];
constructor(private readonly models: ModelService) {
constructor(
private readonly context: vscode.ExtensionContext,
private readonly models: ModelService,
) {
this.disposables = [
vscode.window.registerCustomEditorProvider(DECISION_VIEW_TYPE, this, {
webviewOptions: { retainContextWhenHidden: true, enableFindWidget: true },
@@ -122,13 +140,16 @@ export class DecisionViewProvider implements vscode.CustomReadonlyEditorProvider
return this.active?.uri;
}
openCustomDocument(uri: vscode.Uri): DecisionDocument {
return new DecisionDocument(uri);
/** The view of the focused page, if any. */
get activeView(): { source: SourceSession } | undefined {
return this.active;
}
async resolveCustomEditor(document: DecisionDocument, panel: vscode.WebviewPanel): Promise<void> {
// A text editor provider: the page edits the file's own TextDocument (in
// its Source view), so dirty state, save and undo are VS Code's.
async resolveCustomTextEditor(document: vscode.TextDocument, panel: vscode.WebviewPanel): Promise<void> {
panel.webview.options = { enableScripts: true };
const view = new DecisionView(this.models, panel, document.uri);
const view = new DecisionView(this.context, this.models, panel, document.uri);
this.views.add(view);
const onViewState = () => {
if (panel.active) this.active = view;
+48 -8
View File
@@ -13,7 +13,8 @@ import { log } from '../util/log';
import { viewerTheme } from '../util/settings';
import { handleWebviewMessage, WebviewMessage } from '../webview/messages';
import { graphPage, makeNonce, messagePage, modelPage, prepareDiagramHtml } from '../webview/page';
import { graphScriptUri, viewer3dOption, viewerRoots } from '../webview/viewer3d';
import { graphScriptUri, sourceScriptUri, viewer3dOption, viewerRoots } from '../webview/viewer3d';
import { SourceSession } from './sourceSession';
import { DECISION_VIEW_TYPE, DIAGRAM_EDITOR_VIEW_TYPE, PREVIEW_VIEW_TYPE, REGISTRY_VIEW_TYPE } from './viewTypes';
@@ -50,6 +51,10 @@ class DiagramPreview implements vscode.Disposable {
private graphQuery: string | undefined;
/** True while the webview shows the Graph page, which takes model updates as messages. */
private graphShown = false;
/** The Source view of a .archify file; while it shows, new HTML waits in `heldHtml`. */
readonly source: SourceSession | undefined;
private heldHtml: string | undefined;
private disposed = false;
constructor(
private readonly context: vscode.ExtensionContext,
@@ -69,9 +74,22 @@ class DiagramPreview implements vscode.Disposable {
panel.title = `Preview ${path.basename(uri.path)}`;
}
if (isArchifyFile(uri.path)) {
this.source = new SourceSession(context, panel, uri, 'diagram', (shown) => {
// Back from Source: show what was rendered meanwhile.
if (!shown && this.heldHtml !== undefined) {
const html = this.heldHtml;
this.heldHtml = undefined;
this.panel.webview.html = html;
}
});
this.disposables.push(this.source);
}
this.disposables.push(
panel.onDidDispose(() => this.dispose()),
panel.webview.onDidReceiveMessage((message: WebviewMessage) => {
if (this.source?.handle(message)) return;
if (message.type === 'hash') {
this.hash = message.hash;
return;
@@ -121,6 +139,22 @@ class DiagramPreview implements vscode.Disposable {
Promise.resolve(this.panel.webview.postMessage(message)).catch(() => undefined);
}
/** Replaces the page, unless Source is open in it: then the page waits until it closes. */
private setHtml(html: string): void {
if (this.disposed) return;
if (this.source?.shown) {
this.heldHtml = html;
return;
}
this.heldHtml = undefined;
this.panel.webview.html = html;
}
/** Page option for the Source view, on .archify files. */
private sourceOption(left: 'Model' | 'Diagram'): { scriptUri: string; left: 'Model' | 'Diagram' } | undefined {
return this.source ? { scriptUri: sourceScriptUri(this.panel.webview, this.context.extensionUri), left } : undefined;
}
private state(): PreviewState {
return { uri: this.uri.toString(), hash: this.hash, graph: this.graph };
}
@@ -156,21 +190,21 @@ class DiagramPreview implements vscode.Disposable {
return;
}
this.graphShown = true;
this.panel.webview.html = graphPage(
this.setHtml(graphPage(
{ cspSource: this.panel.webview.cspSource, nonce: makeNonce(), state: this.state() },
{ graph, query: this.graphQuery, scriptUri: graphScriptUri(this.panel.webview, this.context.extensionUri) },
);
));
this.graphQuery = undefined;
}
private showMessage(title: string, body: string, detail?: string): void {
this.lastHtml = undefined;
this.panel.webview.html = messagePage(
{ cspSource: this.panel.webview.cspSource, nonce: makeNonce(), state: this.state() },
this.setHtml(messagePage(
{ cspSource: this.panel.webview.cspSource, nonce: makeNonce(), state: this.state(), source: this.sourceOption('Diagram') },
title,
body,
detail,
);
));
}
/** Opens a diagram of the model, given its path relative to the model root. */
@@ -192,7 +226,7 @@ class DiagramPreview implements vscode.Disposable {
this.lastHtml = fingerprint;
this.rendered = false;
this.graphShown = false;
this.panel.webview.html = modelPage({ cspSource: this.panel.webview.cspSource, nonce: makeNonce(), state: this.state() }, model);
this.setHtml(modelPage({ cspSource: this.panel.webview.cspSource, nonce: makeNonce(), state: this.state(), source: this.sourceOption('Model') }, model));
}
scheduleUpdate(): void {
@@ -203,6 +237,7 @@ class DiagramPreview implements vscode.Disposable {
async update(force = false): Promise<void> {
clearTimeout(this.timer);
if (this.disposed) return;
const seq = ++this.seq;
let text: string;
try {
@@ -285,6 +320,7 @@ class DiagramPreview implements vscode.Disposable {
decisions: prepared.decisions,
model,
graphSwitch: main ? { left: 'Model' } : prepared.root ? { left: 'Diagram', query: `diagram:${path.relative(prepared.root.fsPath, this.uri.fsPath).split(path.sep).join('/')}` } : undefined,
source: this.sourceOption(main ? 'Model' : 'Diagram'),
});
// Nonces differ per render, so compare the renderer output instead.
const fingerprint = `${viewerTheme()}\u0000${result.evidenceNotice ?? ''}\u0000${JSON.stringify([model ?? null, [...prepared.links], [...prepared.descriptions], prepared.decisions])}\u0000${result.html}`;
@@ -294,10 +330,14 @@ class DiagramPreview implements vscode.Disposable {
}
this.lastHtml = fingerprint;
this.rendered = true;
this.panel.webview.html = html;
this.setHtml(html);
}
dispose(): void {
if (this.disposed) return;
this.disposed = true;
// Renders in flight check the sequence after every await; this ends them.
this.seq++;
clearTimeout(this.timer);
this.onDisposeEmitter.fire();
this.onDisposeEmitter.dispose();
+33 -12
View File
@@ -5,31 +5,41 @@ import { RegistryPanel, registryPanelFromIndex, registryPanelStandalone } from '
import { ModelService } from '../model/service';
import { readText } from '../util/files';
import { log } from '../util/log';
import { sourceScriptUri } from '../webview/viewer3d';
import { SourceSession } from './sourceSession';
import { handleWebviewMessage, WebviewMessage } from '../webview/messages';
import { makeNonce, registryPage } from '../webview/page';
import { DECISION_VIEW_TYPE, DIAGRAM_EDITOR_VIEW_TYPE, REGISTRY_VIEW_TYPE } from './viewTypes';
export { REGISTRY_VIEW_TYPE };
class RegistryDocument implements vscode.CustomDocument {
constructor(readonly uri: vscode.Uri) {}
dispose(): void {}
}
class RegistryView implements vscode.Disposable {
private seq = 0;
private timer: NodeJS.Timeout | undefined;
private last: string | undefined;
root: vscode.Uri | undefined;
private readonly disposables: vscode.Disposable[] = [];
/** The Source view; while it shows, a new page waits in `heldHtml`. */
readonly source: SourceSession;
private heldHtml: string | undefined;
constructor(
private readonly context: vscode.ExtensionContext,
private readonly models: ModelService,
readonly panel: vscode.WebviewPanel,
readonly uri: vscode.Uri,
) {
this.source = new SourceSession(context, panel, uri, 'registry', (shown) => {
if (!shown && this.heldHtml !== undefined) {
const html = this.heldHtml;
this.heldHtml = undefined;
this.panel.webview.html = html;
}
});
this.disposables.push(
this.source,
panel.webview.onDidReceiveMessage((message: WebviewMessage) => {
if (this.source.handle(message)) return;
if (message.type === 'openDiagram') return void this.openInModel(message.path, DIAGRAM_EDITOR_VIEW_TYPE);
if (message.type === 'openRegistry') return void this.openRegistryLine(message.file, message.line);
if (message.type === 'openDecision') return void this.openInModel(message.file, DECISION_VIEW_TYPE);
@@ -84,7 +94,12 @@ class RegistryView implements vscode.Disposable {
const fingerprint = JSON.stringify(registry);
if (fingerprint === this.last) return;
this.last = fingerprint;
this.panel.webview.html = registryPage({ cspSource: this.panel.webview.cspSource, nonce: makeNonce() }, registry);
const html = registryPage(
{ cspSource: this.panel.webview.cspSource, nonce: makeNonce(), source: { scriptUri: sourceScriptUri(this.panel.webview, this.context.extensionUri), left: 'View' } },
registry,
);
if (this.source.shown) this.heldHtml = html;
else this.panel.webview.html = html;
}
dispose(): void {
@@ -93,12 +108,15 @@ class RegistryView implements vscode.Disposable {
}
}
export class RegistryViewProvider implements vscode.CustomReadonlyEditorProvider<RegistryDocument>, vscode.Disposable {
export class RegistryViewProvider implements vscode.CustomTextEditorProvider, vscode.Disposable {
private readonly views = new Set<RegistryView>();
private active: RegistryView | undefined;
private readonly disposables: vscode.Disposable[];
constructor(private readonly models: ModelService) {
constructor(
private readonly context: vscode.ExtensionContext,
private readonly models: ModelService,
) {
this.disposables = [
vscode.window.registerCustomEditorProvider(REGISTRY_VIEW_TYPE, this, {
webviewOptions: { retainContextWhenHidden: true, enableFindWidget: true },
@@ -121,13 +139,16 @@ export class RegistryViewProvider implements vscode.CustomReadonlyEditorProvider
return this.active?.uri;
}
openCustomDocument(uri: vscode.Uri): RegistryDocument {
return new RegistryDocument(uri);
/** The view of the focused page, if any. */
get activeView(): { source: SourceSession } | undefined {
return this.active;
}
async resolveCustomEditor(document: RegistryDocument, panel: vscode.WebviewPanel): Promise<void> {
// A text editor provider: the page edits the file's own TextDocument (in
// its Source view), so dirty state, save and undo are VS Code's.
async resolveCustomTextEditor(document: vscode.TextDocument, panel: vscode.WebviewPanel): Promise<void> {
panel.webview.options = { enableScripts: true };
const view = new RegistryView(this.models, panel, document.uri);
const view = new RegistryView(this.context, this.models, panel, document.uri);
this.views.add(view);
const onViewState = () => {
if (panel.active) this.active = view;
+196
View File
@@ -0,0 +1,196 @@
import * as vscode from 'vscode';
import { EditorSchemas } from '../language/editorSchemas';
import { readSchemas } from '../language/schemaCheck';
import { log } from '../util/log';
import { TextChange, normalizeEol, offsetOf, positionOf } from '../util/textDiff';
/** Page → host messages of the Source view. */
export type SourceMessage =
| { type: 'sourceReady' }
| { type: 'sourceOpen' }
| { type: 'sourceClose' }
| { type: 'sourceEdit'; base: string; text: string; changes: TextChange[] };
export type SourceKind = 'diagram' | 'registry' | 'decision';
const CHECKS: Record<SourceKind, string> = {
diagram: 'YAML · checked against the Archify schema and the model',
registry: 'YAML · checked against the registry schema and the model',
decision: 'YAML · checked as a decision of the model',
};
let editorSchemas: EditorSchemas | undefined;
function schemasFor(context: vscode.ExtensionContext): EditorSchemas {
editorSchemas ??= new EditorSchemas(readSchemas(vscode.Uri.joinPath(context.extensionUri, 'schemas').fsPath));
return editorSchemas;
}
export function isSourceMessage(message: { type?: string }): message is SourceMessage {
return message.type === 'sourceReady' || message.type === 'sourceOpen' || message.type === 'sourceClose' || message.type === 'sourceEdit';
}
/**
* The host half of a page's Source view. The document stays VS Code's: page
* edits become WorkspaceEdits (so dirty state, save, undo and Git work as
* for any file), and changes from anywhere else (undo, the text editor, git)
* go back to the page. Problems are whatever the Problems panel holds for the
* file, sent as offsets; the page shows their count on the Source switch even
* while the picture is shown.
*/
export class SourceSession implements vscode.Disposable {
/** True while the page shows Source; the view must not replace its HTML then. */
shown = false;
/** Texts our own edits will produce, oldest first; their change events are not echoed. */
private readonly expected: string[] = [];
private queue: Promise<void> = Promise.resolve();
private schemaKey: string | undefined;
private readonly disposables: vscode.Disposable[];
constructor(
private readonly context: vscode.ExtensionContext,
private readonly panel: vscode.WebviewPanel,
readonly uri: vscode.Uri,
readonly kind: SourceKind,
/** Called when Source opens or closes, so the view can hold or apply its HTML. */
private readonly onShown: (shown: boolean) => void,
) {
const same = (uri: vscode.Uri) => uri.toString() === this.uri.toString();
this.disposables = [
vscode.languages.onDidChangeDiagnostics((event) => {
if (event.uris.some(same)) void this.postDiagnostics();
}),
vscode.workspace.onDidChangeTextDocument((event) => {
if (!same(event.document.uri) || !event.contentChanges.length) return;
this.post({ type: 'sourceDirty', dirty: event.document.isDirty });
if (this.shown) this.syncFrom(event.document);
}),
vscode.workspace.onDidSaveTextDocument((doc) => {
if (same(doc.uri)) this.post({ type: 'sourceDirty', dirty: false });
}),
];
}
/** Asks the page to show its Source view (Archify | Show Source). */
reveal(): void {
this.post({ type: 'setView', view: 'source' });
}
/** Handles a Source message from the page; false for any other message. */
handle(message: { type?: string }): boolean {
if (!isSourceMessage(message)) return false;
switch (message.type) {
case 'sourceReady':
void this.postDiagnostics();
break;
case 'sourceOpen':
this.setShown(true);
void this.sendText(true);
break;
case 'sourceClose':
this.setShown(false);
break;
case 'sourceEdit':
this.edit(message);
break;
}
return true;
}
private setShown(shown: boolean): void {
if (this.shown === shown) return;
this.shown = shown;
this.onShown(shown);
}
private post(message: unknown): void {
Promise.resolve(this.panel.webview.postMessage(message)).catch(() => undefined);
}
private document(): Promise<vscode.TextDocument> {
return Promise.resolve(vscode.workspace.openTextDocument(this.uri));
}
private async sendText(withDiagnostics: boolean): Promise<void> {
const doc = await this.document();
const text = normalizeEol(doc.getText());
this.expected.length = 0;
this.schemaKey = undefined;
this.post({ type: 'sourceText', text, schema: this.schemaChange(text), checks: CHECKS[this.kind] });
this.post({ type: 'sourceDirty', dirty: doc.isDirty });
if (withDiagnostics) await this.postDiagnostics();
}
/** The editor schema when it differs from the one the page has (a diagram's type may change), else undefined. */
private schemaChange(text: string): { key: string; schema: object } | null | undefined {
const next = schemasFor(this.context).forSource(this.kind, text);
const key = next?.key ?? '';
if (key === this.schemaKey) return undefined;
this.schemaKey = key;
return next ?? null;
}
private syncFrom(doc: vscode.TextDocument): void {
const text = normalizeEol(doc.getText());
const index = this.expected.indexOf(text);
if (index !== -1) {
// Our own edit coming back; anything older is settled too.
this.expected.splice(0, index + 1);
return;
}
this.post({ type: 'sourceText', text, schema: this.schemaChange(text), checks: CHECKS[this.kind] });
}
private edit(message: Extract<SourceMessage, { type: 'sourceEdit' }>): void {
this.expected.push(message.text);
const schema = this.schemaChange(message.text);
if (schema !== undefined) this.post({ type: 'sourceSchema', schema });
this.queue = this.queue.then(async () => {
try {
const doc = await this.document();
const current = normalizeEol(doc.getText());
if (current === message.text) return;
const edit = new vscode.WorkspaceEdit();
// Positions come from "\n" text; VS Code turns inserted text into the document's line endings.
const at = (text: string, offset: number) => {
const { line, character } = positionOf(text, offset);
return new vscode.Position(line, character);
};
if (current === message.base) {
for (const change of message.changes) edit.replace(this.uri, new vscode.Range(at(current, change.from), at(current, change.to)), change.insert);
} else {
// The document moved on under the page (rare): the page's text wins.
edit.replace(this.uri, new vscode.Range(at(current, 0), at(current, current.length)), message.text);
}
if (!(await vscode.workspace.applyEdit(edit))) {
log().warn(`Source edit was not applied to ${this.uri.fsPath}`);
void this.sendText(false);
}
} catch (error) {
log().error(`Source edit failed for ${this.uri.fsPath}: ${error instanceof Error ? error.message : String(error)}`);
}
});
}
/** Problems of the file as offsets into its "\n" text, and their count for the switch. */
async postDiagnostics(): Promise<void> {
const diagnostics = vscode.languages.getDiagnostics(this.uri);
let items: unknown[] = [];
if (this.shown && diagnostics.length) {
const text = normalizeEol((await this.document()).getText());
items = diagnostics.map((d) => ({
from: offsetOf(text, d.range.start.line, d.range.start.character),
to: offsetOf(text, d.range.end.line, d.range.end.character),
severity: d.severity === vscode.DiagnosticSeverity.Error ? 'error' : d.severity === vscode.DiagnosticSeverity.Warning ? 'warning' : 'info',
message: d.message,
source: d.source,
}));
}
const count = diagnostics.filter((d) => d.severity === vscode.DiagnosticSeverity.Error || d.severity === vscode.DiagnosticSeverity.Warning).length;
this.post({ type: 'sourceDiagnostics', items, count });
}
dispose(): void {
for (const d of this.disposables.splice(0)) d.dispose();
}
}