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

+53
View File
@@ -0,0 +1,53 @@
import assert from 'node:assert/strict';
import path from 'node:path';
import { test } from 'node:test';
import { EditorSchemas, bundleSchema } from '../src/language/editorSchemas';
import { readSchemas } from '../src/language/schemaCheck';
const schemas = readSchemas(path.resolve(__dirname, '..', '..', 'schemas'));
/** Every "$ref" in a bundled schema must point inside it. */
function resolveAll(schema: object): void {
const visit = (node: unknown): void => {
if (Array.isArray(node)) return node.forEach(visit);
if (!node || typeof node !== 'object') return;
for (const [key, value] of Object.entries(node)) {
if (key === '$ref') {
assert.match(String(value), /^#/, `local ref: ${value}`);
let target: unknown = schema;
for (const part of String(value).slice(1).split('/').filter(Boolean)) {
target = (target as Record<string, unknown>)[part.replace(/~1/g, '/').replace(/~0/g, '~')];
assert.ok(target !== undefined, `${value} resolves`);
}
} else visit(value);
}
};
visit(schema);
}
test('each schema bundles into one self-contained document', () => {
for (const name of Object.keys(schemas)) {
const bundled = bundleSchema(schemas, name);
resolveAll(bundled);
const text = JSON.stringify(bundled);
assert.ok(!text.includes('"prefixItems"'), `${name}: no prefixItems`);
assert.ok(!text.includes('"$schema"'), `${name}: no $schema`);
}
});
test('points become draft-07 tuples', () => {
const architecture = bundleSchema(schemas, 'architecture.schema.json') as { $defs: Record<string, { $defs: Record<string, unknown> }> };
const point = architecture.$defs['file:common.schema.json'].$defs.point as Record<string, unknown>;
assert.deepEqual(point.items, [{ type: 'number' }, { type: 'number' }]);
assert.equal(point.additionalItems, false);
});
test('a diagram gets the schema of its diagram_type, a decision none', () => {
const editor = new EditorSchemas(schemas);
assert.equal(editor.forSource('diagram', 'schema_version: 1\ndiagram_type: sequence\n')?.key, 'sequence.schema.json');
assert.equal(editor.forSource('diagram', 'diagram_type: "workflow"\n')?.key, 'workflow.schema.json');
assert.equal(editor.forSource('diagram', 'meta:\n title: x\n')?.key, 'archify.schema.json');
assert.equal(editor.forSource('diagram', 'diagram_type: poster\n')?.key, 'archify.schema.json');
assert.equal(editor.forSource('registry', '')?.key, 'archify-registry.schema.json');
assert.equal(editor.forSource('decision', ''), undefined);
});
+53 -3
View File
@@ -61,9 +61,18 @@ export async function run(): Promise<void> {
assert.equal(vscode.window.activeTextEditor?.document.uri.toString() === uri.toString(), false, 'no text editor was opened for it');
});
await check('.archify files are YAML and Show Source opens the text beside the diagram', async () => {
await check('Show Source keeps the diagram in its one tab (the page switches to Source)', async () => {
const uri = workspaceFile('web-platform.archify');
await vscode.commands.executeCommand('archify.showSource');
await new Promise((resolve) => setTimeout(resolve, 1000));
assert.equal(vscode.window.visibleTextEditors.some((e) => e.document.uri.toString() === uri.toString()), false, 'no text editor was opened');
const tabs = vscode.window.tabGroups.all.flatMap((g) => g.tabs).filter((t) => t.input instanceof vscode.TabInputCustom && t.input.uri.toString() === uri.toString());
assert.equal(tabs.length, 1);
});
await check('.archify files are YAML and Open in Text Editor opens the text beside the diagram', async () => {
const uri = workspaceFile('web-platform.archify');
await vscode.commands.executeCommand('archify.openInTextEditor');
const editor = await waitFor('source text editor', () =>
vscode.window.visibleTextEditors.find((e) => e.document.uri.toString() === uri.toString()),
);
@@ -333,14 +342,14 @@ export async function run(): Promise<void> {
await new Promise((resolve) => setTimeout(resolve, 500));
});
await check('a .archify-registry file opens as the registry view and Show Source opens the YAML', async () => {
await check('a .archify-registry file opens as the registry view and Open in Text Editor opens the YAML', async () => {
const registry = workspaceFile('model/registry/people.archify-registry');
await vscode.commands.executeCommand('vscode.open', registry);
const tab = await waitFor('registry view tab', () =>
vscode.window.tabGroups.all.flatMap((g) => g.tabs).find((t) => t.isActive && t.input instanceof vscode.TabInputCustom && t.input.viewType === 'archify.registry' && t.input.uri.toString() === registry.toString()),
);
assert.ok(tab);
await vscode.commands.executeCommand('archify.showSource');
await vscode.commands.executeCommand('archify.openInTextEditor');
const editor = await waitFor('registry text editor', () => vscode.window.visibleTextEditors.find((e) => e.document.uri.toString() === registry.toString()));
assert.equal(editor.document.languageId, 'yaml');
});
@@ -459,4 +468,45 @@ export async function run(): Promise<void> {
const errors = vscode.languages.getDiagnostics(containers.uri).filter((d) => d.severity === vscode.DiagnosticSeverity.Error);
assert.deepEqual(errors.map((d) => d.message), []);
});
await check('a registry is checked against its schema without a YAML extension', async () => {
const target = workspaceFile('model/registry/typo.archify-registry');
await vscode.workspace.fs.writeFile(target, new TextEncoder().encode('schema_version: 1\nelements:\n billing:\n typ: backend\n label: Billing\n'));
const doc = await vscode.workspace.openTextDocument(target);
await vscode.window.showTextDocument(doc);
const unknown = await waitFor('unknown key diagnostic', () =>
vscode.languages.getDiagnostics(doc.uri).find((d) => d.source === 'archify' && /Unknown key "typ" in elements\.billing/.test(d.message)),
);
assert.equal(doc.getText(unknown.range), 'typ');
assert.ok(vscode.languages.getDiagnostics(doc.uri).some((d) => /"type" is required in elements\.billing/.test(d.message)));
await vscode.commands.executeCommand('workbench.action.closeActiveEditor');
await vscode.workspace.fs.delete(target);
});
await check('registry and decision pages own their document: edits make it dirty and VS Code undo reverts them', async () => {
for (const [file, viewType] of [
['model/registry/containers.archify-registry', 'archify.registry'],
['model/decisions/0001-postgres-as-source-of-truth.archify-decision', 'archify.decision'],
] as const) {
const uri = workspaceFile(file);
await vscode.commands.executeCommand('vscode.openWith', uri, viewType);
await waitFor(`${viewType} tab`, () =>
vscode.window.tabGroups.activeTabGroup.activeTab?.input instanceof vscode.TabInputCustom &&
(vscode.window.tabGroups.activeTabGroup.activeTab.input as vscode.TabInputCustom).uri.toString() === uri.toString(),
);
const doc = await vscode.workspace.openTextDocument(uri);
const before = doc.getText();
// What the Source view does with a keystroke: a WorkspaceEdit on the document.
const edit = new vscode.WorkspaceEdit();
edit.insert(uri, new vscode.Position(0, 0), '# edited in Source\n');
assert.ok(await vscode.workspace.applyEdit(edit));
assert.ok(doc.isDirty, `${file} is dirty`);
const tab = vscode.window.tabGroups.activeTabGroup.activeTab;
assert.ok(tab?.isDirty, 'the page tab shows the dirty dot');
// ⌘Z in the page reaches VS Code as the undo command.
await vscode.commands.executeCommand('undo');
await waitFor('undo', () => doc.getText() === before);
await vscode.commands.executeCommand('workbench.action.revertAndCloseActiveEditor');
}
});
}
+7
View File
@@ -141,3 +141,10 @@ test('summaries and groups: root first, then folders', () => {
assert.deepEqual(groups.map((g) => g.group), ['', '0100-context', '0300-components']);
assert.deepEqual(groups[0].diagrams.map((d) => d.relativePath), ['broken.archify', 'checkout.archify']);
});
test('a registry YAML error is reported at its line, not the first', () => {
const { problems } = parseRegistry('schema_version: 1\nelements:\n api:\n type: backend\n sub\n label: API\n', 'r.archify-registry');
const yaml = problems.find((p) => /not valid YAML/.test(p.message));
assert.ok(yaml, 'a YAML problem');
assert.ok((yaml.line ?? 0) >= 3, `reported on line ${(yaml.line ?? 0) + 1}`);
});
+27 -1
View File
@@ -1,6 +1,6 @@
import assert from 'node:assert/strict';
import { test } from 'node:test';
import { prepareDiagramHtml } from '../src/webview/page';
import { decisionPage, messagePage, prepareDiagramHtml, registryPage } from '../src/webview/page';
const page = `<!DOCTYPE html><html><head>
<meta http-equiv="Content-Security-Policy" content="default-src *">
@@ -61,3 +61,29 @@ test('saved view state is merged, not replaced, when the hash changes', () => {
const html = prepareDiagramHtml(page, { cspSource: 'x', nonce: 'n', theme: 'dark', state: { uri: 'file:///a.archify' } });
assert.match(html, /vscode\.setState\(Object\.assign\(\{\}, vscode\.getState\(\) \|\| \{\}, config\.state, \{ hash: location\.hash \}\)\)/);
});
test('a page with Source carries its script and the name of its own view', () => {
const html = prepareDiagramHtml(page, {
cspSource: 'x',
nonce: 'n',
theme: 'dark',
graphSwitch: { left: 'Diagram', query: 'diagram:a.archify' },
source: { scriptUri: 'https://file+.vscode-resource/ext/dist/source.js', left: 'Diagram' },
});
assert.match(html, /"source":\{"scriptUri":"https:\/\/file\+\.vscode-resource\/ext\/dist\/source\.js","left":"Diagram"\}/);
// Loaded on first use, not with the page.
assert.ok(!/<script[^>]+source\.js/.test(html));
assert.match(html, /post\(\{ type: 'sourceReady' \}\)/);
});
test('registry, decision and message pages offer View | Source when given the script', () => {
const source = { scriptUri: 'https://x/dist/source.js', left: 'View' as const };
const registry = registryPage({ cspSource: 'x', nonce: 'n', source }, { file: 'r.archify-registry', inModel: false, problems: [], elements: [] } as never);
const decision = decisionPage({ cspSource: 'x', nonce: 'n', source }, { file: 'd.archify-decision', inModel: false, problems: [], supersededBy: [] } as never);
const message = messagePage({ cspSource: 'x', nonce: 'n', source: { ...source, left: 'Diagram' } }, 'Archify could not render this diagram', 'Fix it');
for (const html of [registry, decision, message]) {
assert.match(html, /"source":\{"scriptUri":"https:\/\/x\/dist\/source\.js"/);
assert.match(html, /\.archify-mode-seg/, 'switch styles');
}
assert.ok(!messagePage({ cspSource: 'x', nonce: 'n' }, 'Rendering…', '').includes('"source"'), 'no Source without the option');
});
+77
View File
@@ -0,0 +1,77 @@
import assert from 'node:assert/strict';
import fs from 'node:fs';
import path from 'node:path';
import { test } from 'node:test';
import { DIAGRAM_SCHEMA, REGISTRY_SCHEMA, SchemaChecker, readSchemas, readablePointer } from '../src/language/schemaCheck';
const root = path.resolve(__dirname, '..', '..');
const checker = new SchemaChecker(readSchemas(path.join(root, 'schemas')));
function walk(dir: string, out: string[] = []): string[] {
for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
const full = path.join(dir, entry.name);
if (entry.isDirectory()) walk(full, out);
else if (/\.archify(-registry)?$/.test(entry.name)) out.push(full);
}
return out;
}
const schemaFor = (file: string) => (file.endsWith('-registry') ? REGISTRY_SCHEMA : DIAGRAM_SCHEMA);
test('every shipped .archify and registry file passes the schema check', () => {
const files = ['examples', 'templates', path.join('test', 'fixtures')].flatMap((dir) => walk(path.join(root, dir)));
assert.ok(files.length > 30, `found ${files.length} files`);
for (const file of files) {
const problems = checker.check(fs.readFileSync(file, 'utf8'), schemaFor(file));
assert.deepEqual(problems.map((p) => p.message), [], path.relative(root, file));
}
});
function problemsAfter(file: string, from: string, to: string) {
const original = fs.readFileSync(path.join(root, file), 'utf8');
assert.ok(original.includes(from), `${file} contains ${from}`);
const text = original.replace(from, to);
return checker.check(text, schemaFor(file)).map((p) => ({ ...p, text: text.slice(p.from, p.to) }));
}
const DIAGRAM = 'templates/models/c4-standard-web-app/0200-containers/web-app.archify';
const REGISTRY = 'templates/models/c4-standard-web-app/registry/containers.archify-registry';
test('an unknown key is placed on the key', () => {
const [problem, ...rest] = problemsAfter(DIAGRAM, 'label: SQL', 'lable: SQL');
assert.equal(rest.length, 0);
assert.equal(problem.text, 'lable');
assert.match(problem.message, /^Unknown key "lable" in connections\[\d+\]\.$/);
});
test('a point with one number is placed on the whole flow list', () => {
const problems = problemsAfter(DIAGRAM, 'pos: [690, 160]', 'pos: [690]');
assert.equal(problems.length, 1);
assert.equal(problems[0].text, '[690]');
assert.match(problems[0].message, /pos needs at least 2 items\.$/);
});
test('registry: a misspelt type key, a bad type, a bad id', () => {
const typo = problemsAfter(REGISTRY, ' type: database', ' typ: database');
assert.deepEqual(typo.map((p) => p.text).sort(), ['db', 'typ']);
assert.ok(typo.some((p) => p.text === 'typ' && /Unknown key "typ"/.test(p.message)));
assert.ok(typo.some((p) => p.text === 'db' && /"type" is required in elements\.db/.test(p.message)));
const bad = problemsAfter(REGISTRY, ' type: cloud', ' type: bucket');
assert.equal(bad.length, 1);
assert.equal(bad[0].text, 'bucket');
assert.match(bad[0].message, /must be one of: frontend, backend, database, cloud, security, messagebus, external\.$/);
});
test('a YAML syntax error is reported once, as YAML', () => {
const problems = problemsAfter(REGISTRY, 'label: API', 'label: [API');
assert.equal(problems.length, 1);
assert.equal(problems[0].kind, 'yaml');
assert.match(problems[0].message, /^YAML: /);
});
test('pointers read like paths', () => {
assert.equal(readablePointer('/connections/4/label'), 'connections[4].label');
assert.equal(readablePointer('/elements/db'), 'elements.db');
assert.equal(readablePointer(''), 'the file');
});
+41
View File
@@ -0,0 +1,41 @@
import assert from 'node:assert/strict';
import { test } from 'node:test';
import { applyChanges, minimalChange, normalizeEol, offsetOf, positionOf } from '../src/util/textDiff';
test('minimalChange keeps the common start and end', () => {
assert.equal(minimalChange('abc', 'abc'), undefined);
assert.deepEqual(minimalChange('label: SQL', 'lable: SQL'), { from: 3, to: 5, insert: 'le' });
assert.deepEqual(minimalChange('a\nb\n', 'a\nx\nb\n'), { from: 2, to: 2, insert: 'x\n' });
assert.deepEqual(minimalChange('aaa', 'aa'), { from: 2, to: 3, insert: '' });
assert.deepEqual(minimalChange('', 'new'), { from: 0, to: 0, insert: 'new' });
});
test('minimalChange round-trips through applyChanges', () => {
const pairs = [['schema_version: 1\nmeta:\n title: A\n', 'schema_version: 1\nmeta:\n title: B\n output: b.html\n'], ['x', ''], ['', 'y'], ['abab', 'ab']];
for (const [before, after] of pairs) {
const change = minimalChange(before, after)!;
assert.equal(applyChanges(before, [change]), after);
}
});
test('applyChanges takes several changes in the coordinates of the original text', () => {
assert.equal(applyChanges('one two three', [{ from: 0, to: 3, insert: '1' }, { from: 8, to: 13, insert: '3' }]), '1 two 3');
});
test('positions and offsets in "\\n" text', () => {
const text = 'ab\ncde\n\nf';
assert.deepEqual(positionOf(text, 0), { line: 0, character: 0 });
assert.deepEqual(positionOf(text, 4), { line: 1, character: 1 });
assert.deepEqual(positionOf(text, 7), { line: 2, character: 0 });
assert.deepEqual(positionOf(text, 99), { line: 3, character: 1 });
for (let offset = 0; offset <= text.length; offset++) {
const { line, character } = positionOf(text, offset);
assert.equal(offsetOf(text, line, character), offset);
}
assert.equal(offsetOf(text, 0, 50), 2, 'clamped to the end of the line');
assert.equal(offsetOf(text, 9, 0), text.length);
});
test('normalizeEol', () => {
assert.equal(normalizeEol('a\r\nb\nc\r\n'), 'a\nb\nc\n');
});