@prestack/thread-ui 0.0.1

package/dist/ui/generators/show.js

@@ -0,0 +1,231 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { join, resolve } from 'node:path';
+import { argv, stdout } from 'node:process';
+import { pathToFileURL } from 'node:url';
+import { exit, invoked } from "@prestack/thread/core/invoked";
+import { named as packageOf } from "@prestack/thread/core/scope";
+import { findTree, inTree } from "@prestack/thread/core/tree";
+function inside(node) {
+    return [...(node.holds ?? []), ...(node.declares ?? [])];
+}
+const compare = (a, b) => (a < b ? -1 : a > b ? 1 : 0);
+const exported = (id) => id.replace(/-/g, '_').toUpperCase();
+function pascal(id) {
+    return id
+        .split('-')
+        .map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+        .join('');
+}
+async function node(file, name) {
+    const held = (await import(__rewriteRelativeImportExtension(pathToFileURL(inTree(findTree(), file)).href)));
+    const one = held[name];
+    if (one === undefined)
+        return {};
+    return one;
+}
+const LOADABLE = /\.(js|mjs|cjs|ts|mts)$/;
+async function fileFor(root, at, id) {
+    const path = resolve(root, at);
+    if (!existsSync(path) || !LOADABLE.test(path))
+        return undefined;
+    try {
+        const held = (await import(__rewriteRelativeImportExtension(pathToFileURL(path).href)));
+        return held[exported(id)];
+    }
+    catch (wrong) {
+        throw new Error(`${at} is there but will not load, so what it names cannot be read. A guard that cannot read is ` +
+            `not a guard that passed.\n  ${String(wrong instanceof Error ? wrong.message : wrong)}`);
+    }
+}
+const NAMED = /var\(\s*--([a-z0-9-]+)\s*\)/g;
+const PACKAGES = 'node_modules';
+const INSTALLED = `${PACKAGES}/${packageOf('ui')}/dist/elements`;
+function referenced(value, named, into) {
+    if (typeof value === 'string') {
+        for (const one of value.matchAll(NAMED))
+            into.add(one[1] ?? '');
+        if (named.has(value))
+            into.add(value);
+        return;
+    }
+    if (Array.isArray(value)) {
+        for (const one of value)
+            referenced(one, named, into);
+        return;
+    }
+    if (typeof value === 'object' && value !== null) {
+        for (const one of Object.values(value))
+            referenced(one, named, into);
+    }
+}
+function raising(files) {
+    const still = new Map();
+    const moving = [];
+    for (const path of files) {
+        const one = path.slice(path.lastIndexOf('/') + 1);
+        let text = '';
+        try {
+            text = readFileSync(path, 'utf8');
+        }
+        catch {
+            continue;
+        }
+        const code = text.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^\s*\/\/.*$/gm, '');
+        const at = code.indexOf('holds:');
+        if (at === -1)
+            continue;
+        const opens = code.indexOf('[', at);
+        if (opens === -1 || opens > at + 40)
+            continue;
+        let depth = 0;
+        let shut = opens;
+        for (; shut < code.length; shut += 1) {
+            const ch = code[shut];
+            if (ch === '[')
+                depth += 1;
+            else if (ch === ']') {
+                depth -= 1;
+                if (depth === 0)
+                    break;
+            }
+        }
+        const held = code.slice(opens, shut + 1);
+        const found = [...held.matchAll(/'([a-zA-Z]+)'/g)].map((each) => each[1] ?? '');
+        const element = pascal(one.replace(/\.tsx$/, ''));
+        if (/\.filter\(|\.map\(/.test(held))
+            moving.push(element);
+        if (found.length > 0)
+            still.set(element, [...new Set(found)].sort(compare));
+    }
+    return { still, moving };
+}
+function listed(what, held, good) {
+    if (held.length === 0)
+        return [`  ${what}: ${good}`];
+    return [`  ${what}: ${String(held.length)}`, ...held.map((one) => `    ${one}`)];
+}
+export async function namedBy(id) {
+    const root = findTree().at;
+    const found = [];
+    const looks = async (file, name, what) => {
+        for (const one of inside(await node(file, name))) {
+            if (one.id === id)
+                continue;
+            if (one.at === undefined) {
+                const held = new Set();
+                referenced(one, new Set([id]), held);
+                if (held.has(id))
+                    found.push(`the ${what} \`${one.id}\``);
+                continue;
+            }
+            const shape = await fileFor(root, one.at, one.id);
+            const held = new Set();
+            referenced(shape, new Set([id]), held);
+            if (held.has(id))
+                found.push(`the ${what} \`${one.id}\``);
+        }
+    };
+    await looks(`styleguides.${'ts'}`, 'STYLEGUIDE', 'value');
+    await looks(`variants.${'ts'}`, 'VARIANT', 'variant');
+    await looks(`materials.${'ts'}`, 'MATERIAL', 'material');
+    await looks(`animations.${'ts'}`, 'ANIMATION', 'animation');
+    await looks(`compositions.${'ts'}`, 'COMPOSITION', 'composition');
+    await looks(`screens.${'ts'}`, 'SCREEN', 'screen');
+    await looks(`fonts.${'ts'}`, 'FONT', 'font role');
+    return [...new Set(found)].sort(compare);
+}
+async function run() {
+    const tree = findTree();
+    const root = tree.at;
+    const guide = inside(await node('styleguides.ts', 'STYLEGUIDE'));
+    const variants = inside(await node('variants.ts', 'VARIANT'));
+    const elements = inside(await node('elements.ts', 'ELEMENT'));
+    const signals = inside(await node('signals.ts', 'SIGNAL'));
+    const materials = inside(await node('materials.ts', 'MATERIAL'));
+    const animations = inside(await node('animations.ts', 'ANIMATION'));
+    const compositions = inside(await node('compositions.ts', 'COMPOSITION'));
+    const screens = inside(await node('screens.ts', 'SCREEN'));
+    const fonts = inside(await node('fonts.ts', 'FONT'));
+    const named = new Set(guide.map((row) => row.id));
+    const used = new Set();
+    for (const row of [...variants, ...materials, ...animations]) {
+        if (row.at === undefined)
+            continue;
+        referenced(await fileFor(root, row.at, row.id), named, used);
+    }
+    for (const row of [...compositions, ...screens, ...fonts])
+        referenced(row, named, used);
+    const unused = [...named].filter((one) => !used.has(one)).sort(compare);
+    const worn = new Set(variants.flatMap((row) => row.wears ?? []));
+    const known = new Set(elements.map((row) => pascal(row.id)));
+    const bare = [...known].filter((one) => !worn.has(one)).sort(compare);
+    const unworn = variants.filter((row) => (row.wears ?? []).every((one) => !known.has(one))).map((row) => row.id).sort(compare);
+    const shipped = (() => {
+        const dir = join(root, INSTALLED);
+        try {
+            return readdirSync(dir)
+                .filter((one) => one.endsWith('.tsx'))
+                .map((one) => join(dir, one));
+        }
+        catch {
+            return [];
+        }
+    })();
+    const ours = elements
+        .map((row) => row.at ?? '')
+        .filter((one) => one !== '' && !one.startsWith(PACKAGES))
+        .map((one) => resolve(root, one))
+        .filter((one) => existsSync(one));
+    const { still, moving } = raising([...shipped, ...ours]);
+    const raised = new Set([...still.values()].flat());
+    const reacted = new Set();
+    for (const row of variants) {
+        if (row.at === undefined)
+            continue;
+        const held = (await fileFor(root, row.at, row.id));
+        for (const one of held?.reacts ?? [])
+            reacted.add(one);
+    }
+    const declaredSignals = signals.map((row) => row.id);
+    const unraisable = declaredSignals
+        .filter((one) => !raised.has(one) && !/^(hover|active|focus|disabled|invalid)$/.test(one))
+        .sort(compare);
+    const answered = declaredSignals.filter((one) => reacted.has(one)).length;
+    stdout.write(`show: ${tree.name}\n\n`);
+    stdout.write([
+        `declared: ${String(guide.length)} values · ${String(variants.length)} variants · ${String(elements.length)} elements · ` +
+            `${String(signals.length)} signals · ${String(materials.length)} materials · ${String(animations.length)} animations`,
+        '',
+        ...listed('style guide rows nothing names', unused, 'none — every value is reached'),
+        '',
+        ...listed('variants no declared element accepts', unworn, 'none — every variant is worn'),
+        '',
+        ...listed('elements wearing no variant', bare, 'none — every element is dressed'),
+        '',
+        ...listed('signals no element is seen to raise', unraisable, 'none — every declared signal is raised somewhere'),
+        moving.length === 0
+            ? ''
+            : `    (${moving.join(', ')} ${moving.length === 1 ? 'works its' : 'work theirs'} out at run time, from the gesture it is bound to, so it cannot be read from source)`,
+        '',
+        `  signals answered by some variant: ${String(answered)} of ${String(signals.length)}`,
+    ].join('\n'));
+    stdout.write('\n');
+    if (argv.includes('--check')) {
+        const wrong = unused.length + unworn.length + unraisable.length;
+        if (wrong > 0) {
+            stdout.write(`\nshow: ${String(wrong)} declared thing(s) nothing reaches. This is a report, not a refusal — ` +
+                'reaching them, or retiring them, is a decision.\n');
+        }
+    }
+    return 0;
+}
+if (invoked(import.meta.url))
+    exit(await run());

package/dist/ui/generators/styles.d.ts

@@ -0,0 +1 @@
+export {};