",
"
",
@@ -39,14 +39,23 @@
},
"SIMAI Framework select": {
"prefix": "sf-select",
- "description": "An sf-dropdown in select mode. (SIMAI Framework ui-3521193e0c6b)",
+ "description": "An sf-dropdown in select mode. (SIMAI Framework ui-132b0863e12b)",
"body": [
"
$0"
]
},
+ "SIMAI Framework modal": {
+ "prefix": "sf-modal-dialog",
+ "description": "An sf-modal with an id, a title and a position. (SIMAI Framework ui-132b0863e12b)",
+ "body": [
+ "
",
+ " ${4:Content}",
+ "$0"
+ ]
+ },
"SIMAI Framework pagination": {
"prefix": "sf-pagination-bar",
- "description": "An sf-pagination with the current page and page size. (SIMAI Framework ui-3521193e0c6b)",
+ "description": "An sf-pagination with the current page and page size. (SIMAI Framework ui-132b0863e12b)",
"body": [
"
$0"
]
diff --git a/src/generate/buildFramework.ts b/src/generate/buildFramework.ts
index dc5b2ba..e46031a 100644
--- a/src/generate/buildFramework.ts
+++ b/src/generate/buildFramework.ts
@@ -370,6 +370,19 @@ export function buildFramework(inputs: FrameworkInputs): {
}
const blocked = new Set(registry.indexes.blocked);
const safe = new Set(registry.indexes.safe_to_suggest.filter(id => !blocked.has(id)));
+ // The index and the per-entry promotion state must agree. They are written
+ // by the same Framework build, so a disagreement is a registry defect and
+ // not something to resolve quietly in favour of the wider set.
+ for (const entry of registry.entries) {
+ const readiness = entry.readiness;
+ if (!readiness || !safe.has(entry.id)) continue;
+ if (readiness.safe_to_suggest === false || readiness.status !== 'ready') {
+ throw new Error(
+ `${entry.id} is in safe_to_suggest but readiness says `
+ + `${readiness.status ?? 'no status'}/${readiness.safe_to_suggest}`,
+ );
+ }
+ }
const report: FrameworkReport = { skippedPublicComponents: [], ignoredTokenMedia: [] };
const desktopRem = inputs.desktopMinWidthPx / 16;
diff --git a/src/generate/frameworkInputs.ts b/src/generate/frameworkInputs.ts
index eab6330..9020356 100644
--- a/src/generate/frameworkInputs.ts
+++ b/src/generate/frameworkInputs.ts
@@ -40,6 +40,16 @@ export interface RawRegistryEntry {
rule_names?: string[];
tags?: string[];
};
+ /**
+ * Per-entry promotion state. The Framework promotes an entry by a written
+ * rule (contracts/owners/PROMOTION.md) and only a promoted, ready entry
+ * belongs in the suggestion set. `blockers` is not machine-readable: a
+ * held entry carries an empty list, so never read a hold off it.
+ */
+ readiness?: {
+ safe_to_suggest?: boolean;
+ status?: string;
+ };
}
export interface RawContractRegistry {
diff --git a/src/generate/snippets.ts b/src/generate/snippets.ts
index 9716485..01efa13 100644
--- a/src/generate/snippets.ts
+++ b/src/generate/snippets.ts
@@ -5,8 +5,8 @@
* so a repin that drops a name fails the generator instead of shipping a
* broken snippet.
*
- * Modal and table snippets are missing on purpose: the Framework registry
- * does not mark a modal or table component as safe to suggest yet.
+ * A table snippet is missing on purpose: the Framework registry does not mark
+ * a table component as safe to suggest yet.
*/
import { FrameworkRegistry } from '../registry/frameworkTypes';
@@ -100,6 +100,21 @@ const specs: SnippetSpec[] = [
values: { mode: ['select'] },
}],
},
+ {
+ name: 'SIMAI Framework modal',
+ prefix: 'sf-modal-dialog',
+ description: 'An sf-modal with an id, a title and a position.',
+ body: [
+ '
',
+ ' ${4:Content}',
+ '$0',
+ ],
+ uses: [{
+ tag: 'sf-modal',
+ attributes: ['modal-id', 'title', 'position'],
+ values: { position: ['center', 'left', 'right', 'top', 'bottom'] },
+ }],
+ },
{
name: 'SIMAI Framework pagination',
prefix: 'sf-pagination-bar',
diff --git a/src/test/features.unit.test.ts b/src/test/features.unit.test.ts
index 531c3a7..ebd7191 100644
--- a/src/test/features.unit.test.ts
+++ b/src/test/features.unit.test.ts
@@ -76,7 +76,15 @@ test('snippets use only names from the snapshot', () => {
const snippets = buildSnippets(framework);
assert.deepEqual(
Object.values(snippets).map(item => item.prefix),
- ['sf-field', 'sf-checkbox-field', 'sf-button-submit', 'sf-buttons', 'sf-select', 'sf-pagination-bar'],
+ [
+ 'sf-field',
+ 'sf-checkbox-field',
+ 'sf-button-submit',
+ 'sf-buttons',
+ 'sf-select',
+ 'sf-modal-dialog',
+ 'sf-pagination-bar',
+ ],
);
const broken = structuredClone(framework);
broken.tags.find(tag => tag.tag === 'sf-input')!.attributes =
diff --git a/src/test/framework.unit.test.ts b/src/test/framework.unit.test.ts
index 89d28c4..b69041a 100644
--- a/src/test/framework.unit.test.ts
+++ b/src/test/framework.unit.test.ts
@@ -244,17 +244,42 @@ test('shipped framework registry is pinned and only holds safe entries', () => {
const snapshot = readJson('contracts/framework/framework-contract-registry.json') as RawContractRegistry;
const safe = new Set(snapshot.indexes.safe_to_suggest);
const blocked = new Set(snapshot.indexes.blocked);
- assert.equal(framework.release.id, 'ui-3521193e0c6b');
- assert.equal(framework.release.coreCommit, '3521193e0c6b7417912f50aaaab72895f48e43d2');
- assert.equal(framework.release.registryCommit, 'a990dd19ffe0a0471f49a24410718f39acbb8419');
+ const byId = new Map(snapshot.entries.map(entry => [entry.id, entry]));
+ assert.equal(framework.release.id, 'ui-132b0863e12b');
+ assert.equal(framework.release.coreCommit, '132b0863e12b9d5d9c9180d32b20c71f0584e7eb');
+ assert.equal(framework.release.smartCommit, '132b0863e12b9d5d9c9180d32b20c71f0584e7eb');
+ assert.equal(framework.release.registryCommit, 'ef3846772d453ca6df280e64d9d63f6969ee078c');
for (const id of [...framework.tags.map(tag => tag.id), ...framework.classes.map(item => item.id)]) {
assert.ok(safe.has(id) && !blocked.has(id), `${id} is not safe to suggest`);
+ assert.equal(byId.get(id)?.readiness?.status, 'ready', `${id} is not ready`);
}
- // Counts of release ui-3521193e0c6b; update them when repinning.
- assert.equal(framework.tags.length, 13);
- assert.equal(framework.classes.length, 1058);
- assert.equal(framework.tokens.length, 922);
- assert.equal(framework.tokens.filter(token => token.color).length, 414);
+ // Counts of release ui-132b0863e12b; update them when repinning.
+ assert.equal(framework.tags.length, 52);
+ assert.equal(framework.classes.length, 9270);
+ assert.equal(framework.tokens.length, 980);
+ assert.equal(framework.tokens.filter(token => token.color).length, 438);
+});
+
+test('the promotion rule decides which shipped tags are suggested', () => {
+ const framework = validateFrameworkRegistry(readJson('data/sf-framework.json'));
+ const tags = new Set(framework.tags.map(tag => tag.tag));
+ const known = new Set(framework.knownTags);
+ // Promoted in ui-132b0863e12b, so they complete on their own.
+ assert.ok(tags.has('sf-list-item'));
+ assert.ok(tags.has('sf-button-group'));
+ // Held by the promotion rule, each with its reason in readiness.blockers:
+ // no declared inputs, or deprecated. Known to diagnostics, never offered.
+ for (const tag of ['sf-inline-editor', 'sf-toggle']) {
+ assert.ok(!tags.has(tag), `${tag} must not be suggested`);
+ assert.ok(known.has(tag), `${tag} must stay known`);
+ }
+});
+
+test('generator rejects an entry the registry promotes but does not call ready', () => {
+ const inputs = fixture();
+ const buttons = inputs.registry.entries.find(item => item.id === 'smart.buttons')!;
+ buttons.readiness = { safe_to_suggest: true, status: 'discoverable' };
+ assert.throws(() => buildFramework(inputs), /smart\.buttons is in safe_to_suggest/);
});
test('index merges sizing contract data into core tokens', () => {
@@ -269,7 +294,7 @@ test('index merges sizing contract data into core tokens', () => {
const text = describeToken(index, space);
assert.match(text, /mobile \| 12px \(0\.75rem\)/);
assert.match(text, /simai\.vertical-sizing@1\.3\.0/);
- assert.match(text, /ui-3521193e0c6b/);
+ assert.match(text, /ui-132b0863e12b/);
const nearest = nearestColorTokens(index, [0, 0.3569, 0.7451, 1], 5);
assert.ok(nearest.some(token => token.name === '--sf-primary-40'));
diff --git a/src/test/screenshots/index.ts b/src/test/screenshots/index.ts
index 7ba5cf5..5570d5c 100644
--- a/src/test/screenshots/index.ts
+++ b/src/test/screenshots/index.ts
@@ -2,7 +2,7 @@
* Takes the Marketplace screenshots from a running VS Code with the extension
* loaded. VS Code is started with --remote-debugging-port (see
* runScreenshots.ts); each scene opens a real file, shows the feature and
- * captures the workbench window with the Chrome DevTools Protocol, so no OS
+ * captures the workbench with the Chrome DevTools Protocol, so no OS
* screen-recording permission is needed.
*/
import * as fs from 'fs';
@@ -14,7 +14,53 @@ const port = Number(process.env.SF_DEBUG_PORT ?? 9333);
const outputDir = process.env.SF_SCREENSHOT_DIR ?? path.resolve(__dirname, '..', '..', '..', 'images');
const sleep = (ms: number): Promise
=> new Promise(resolve => setTimeout(resolve, ms));
-async function capture(name: string): Promise {
+/**
+ * Measures the strip worth capturing: the workbench down to the widget the
+ * scene is about, so a Marketplace screenshot is a wide, short band and not a
+ * window mostly full of empty editor. `shown` is false while the widget is
+ * still opening, which is what the capture waits for.
+ */
+const bandScript = (widget: Widget): string => `(() => {
+ const box = [...document.querySelectorAll('${widget.selector}')]
+ .map(node => node.getBoundingClientRect())
+ .filter(rect => rect.width > 0 && rect.height > 0)
+ .sort((left, right) => right.bottom - left.bottom)[0];
+ const editor = document.querySelector('.monaco-editor');
+ const floor = editor ? editor.getBoundingClientRect().top + 150 : 300;
+ return {
+ shown: Boolean(box),
+ width: window.innerWidth,
+ height: Math.min(window.innerHeight, Math.ceil(Math.max(floor, box ? box.bottom : 0)) + 12),
+ };
+})()`;
+
+/** Captured at 2x so the images stay crisp wherever they were taken. */
+const captureScale = 2;
+
+interface Widget {
+ selector: string;
+}
+
+interface Band {
+ shown: boolean;
+ width: number;
+ height: number;
+}
+
+type Call = (method: string, params: unknown) => Promise;
+
+async function measure(call: Call, widget: Widget): Promise {
+ const evaluated = await call<{ result: { value?: Band }; exceptionDetails?: unknown }>(
+ 'Runtime.evaluate',
+ { expression: bandScript(widget), returnByValue: true },
+ );
+ if (evaluated.exceptionDetails || !evaluated.result.value) {
+ throw new Error(`measuring ${widget.selector}: ${JSON.stringify(evaluated.exceptionDetails)}`);
+ }
+ return evaluated.result.value;
+}
+
+async function capture(name: string, widget: Widget, settle: number): Promise {
const targets = await (await fetch(`http://127.0.0.1:${port}/json/list`)).json() as {
type: string;
url: string;
@@ -27,18 +73,48 @@ async function capture(name: string): Promise {
socket.onopen = resolve;
socket.onerror = reject;
});
- const data = await new Promise((resolve, reject) => {
- socket.onmessage = event => {
- const message = JSON.parse(String(event.data)) as { id: number; result?: { data: string }; error?: unknown };
- if (message.id !== 1) return;
- if (message.result) resolve(message.result.data);
- else reject(new Error(JSON.stringify(message.error)));
- };
- socket.send(JSON.stringify({ id: 1, method: 'Page.captureScreenshot', params: { format: 'png' } }));
- });
- socket.close();
- fs.mkdirSync(outputDir, { recursive: true });
- fs.writeFileSync(path.join(outputDir, `${name}.png`), Buffer.from(data, 'base64'));
+ let lastId = 0;
+ const call = (method: string, params: unknown): Promise => {
+ const id = (lastId += 1);
+ return new Promise((resolve, reject) => {
+ const onMessage = (event: MessageEvent): void => {
+ const message = JSON.parse(String(event.data)) as {
+ id: number;
+ result?: T;
+ error?: unknown;
+ };
+ if (message.id !== id) return;
+ socket.removeEventListener('message', onMessage);
+ if (message.result) resolve(message.result);
+ else reject(new Error(`${method}: ${JSON.stringify(message.error)}`));
+ };
+ socket.addEventListener('message', onMessage);
+ socket.send(JSON.stringify({ id, method, params }));
+ });
+ };
+ try {
+ // The widget opens asynchronously. Waiting for it beats a fixed sleep,
+ // which used to leave a scene without the feature it is meant to show.
+ let band: Band | undefined;
+ for (let attempt = 0; attempt < 40 && !band?.shown; attempt += 1) {
+ if (attempt > 0) await sleep(250);
+ band = await measure(call, widget);
+ }
+ if (!band?.shown) throw new Error(`${name}: ${widget.selector} never appeared`);
+ // Let the widget finish fading in and the editor finish marking the
+ // document, then measure again: a half-drawn widget ghosts the code
+ // underneath it.
+ await sleep(settle);
+ band = await measure(call, widget);
+ const shot = await call<{ data: string }>('Page.captureScreenshot', {
+ format: 'png',
+ clip: { x: 0, y: 0, width: band.width, height: band.height, scale: captureScale },
+ });
+ fs.mkdirSync(outputDir, { recursive: true });
+ fs.writeFileSync(path.join(outputDir, `${name}.png`), Buffer.from(shot.data, 'base64'));
+ } finally {
+ socket.close();
+ }
}
const root = fs.mkdtempSync(path.join(os.tmpdir(), 'sf-shots-'));
@@ -57,13 +133,27 @@ async function show(file: string, marked: string): Promise {
return editor;
}
-async function scene(name: string, file: string, marked: string, command: string, wait = 1500): Promise {
+// A suggest widget keeps its box while it is hidden and while it still shows
+// "Loading…", so measure the rows it ended up with instead of the box itself.
+const widgets: Record = {
+ 'editor.action.triggerSuggest': { selector: '.suggest-widget .monaco-list-row' },
+ 'editor.action.showHover': { selector: '.monaco-hover' },
+};
+
+type Command = 'editor.action.triggerSuggest' | 'editor.action.showHover';
+
+async function scene(
+ name: string,
+ file: string,
+ marked: string,
+ command: Command,
+ settle = 600,
+): Promise {
await vscode.commands.executeCommand('workbench.action.closeAllEditors');
await show(file, marked);
await vscode.commands.executeCommand('notifications.clearAll');
await vscode.commands.executeCommand(command);
- await sleep(wait);
- await capture(name);
+ await capture(name, widgets[command], settle);
await vscode.commands.executeCommand('hideSuggestWidget');
await vscode.commands.executeCommand('editor.action.hideHover');
}
@@ -109,7 +199,9 @@ export async function run(): Promise {
'menu.html',
'\n\n\n',
'editor.action.showHover',
- 2500,
+ // The scene is about the squiggles too, so give every analysed name
+ // time to be marked before the capture.
+ 1500,
);
fs.rmSync(root, { recursive: true, force: true });
}
diff --git a/src/test/suite/completion.ext.test.ts b/src/test/suite/completion.ext.test.ts
index f40dcd7..c38a3bb 100644
--- a/src/test/suite/completion.ext.test.ts
+++ b/src/test/suite/completion.ext.test.ts
@@ -38,6 +38,15 @@ async function open(language: string, marked: string): Promise<{
suiteTeardown(() => fs.rmSync(fixtureRoot, { recursive: true, force: true }));
+// VS Code registers the providers while it activates the extension. Waiting
+// here keeps the first test about the first *completion* request, not about
+// whether activation happened to win the race against it.
+suiteSetup(async () => {
+ const extension = vscode.extensions.getExtension('SIMAI.sf-vscode');
+ assert.ok(extension, 'the extension under test is not installed');
+ await extension.activate();
+});
+
async function completions(language: string, marked: string): Promise {
const { document, position } = await open(language, marked);
const list = await vscode.commands.executeCommand(
@@ -148,6 +157,18 @@ suite('completion provider', () => {
);
});
+ test('the promotion rule decides which tags complete', async () => {
+ // Promoted in ui-132b0863e12b; they used to be known but unsuggested.
+ assert.ok(find(await completions('html', ' {
// VS Code adds word-based suggestions (kind Text); look at ours only.
const classes = (items: vscode.CompletionItem[]): vscode.CompletionItem[] =>
@@ -163,7 +184,7 @@ suite('hover provider', () => {
assert.match(text, /--sf-primary/);
assert.match(text, /\| light \| #005bbe \|/);
assert.match(text, /\| dark \| #acc7ff \|/);
- assert.match(text, /ui-3521193e0c6b/);
+ assert.match(text, /ui-132b0863e12b/);
});
test('sizing tokens show mobile and desktop values', async () => {