@prestack/thread-ui 0.0.1

package/dist/ui/generators/react.js

@@ -0,0 +1,218 @@
+import { createHash } from 'node:crypto';
+import { existsSync, readFileSync, statSync } from 'node:fs';
+import { cwd } from 'node:process';
+import { dirname, join, resolve } from 'node:path';
+import ts from 'typescript';
+import { idOf } from "../checked.js";
+import { classOf } from "../variant.js";
+const OWNED = /\.(t|j)sx$/;
+const VARIANT_MEMBER = /^[a-z]/;
+const ARRANGERS = new Set(['composition', 'screen']);
+const HOST = /^[a-z]/;
+const GENERATED = /^\s*\/\*\s*GENERATED by thread\b/;
+const ONE_WORD = /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
+function prefixed(called) {
+    return called === 'screen' ? 's-' : 'c-';
+}
+function quoted(node) {
+    return ts.isStringLiteral(node) ? node.text : undefined;
+}
+function joined(held) {
+    return held.filter((one) => one !== '').join(' ');
+}
+function arranging(held, at) {
+    let found;
+    for (const one of held) {
+        if (at < one.from || at >= one.to)
+            continue;
+        if (found === undefined || one.from > found.from)
+            found = one;
+    }
+    return found?.own;
+}
+function tagOf(node) {
+    return node.tagName;
+}
+function attributes(node) {
+    return node.attributes;
+}
+function named(held) {
+    let at;
+    let className;
+    for (const one of held.properties) {
+        if (!ts.isJsxAttribute(one) || !ts.isIdentifier(one.name))
+            continue;
+        if (one.name.text === 'at')
+            at = one;
+        if (one.name.text === 'className')
+            className = one;
+    }
+    return {
+        ...(at === undefined ? {} : { at }),
+        ...(className === undefined ? {} : { className }),
+    };
+}
+function wearing(held, added, text) {
+    if (held?.initializer === undefined)
+        return `className="${added}"`;
+    const value = held.initializer;
+    if (ts.isStringLiteral(value))
+        return `className="${joined([value.text, added])}"`;
+    const inner = text.slice(value.getStart() + 1, value.getEnd() - 1);
+    return `className={\`\${${inner}} ${added}\`}`;
+}
+export function compiled(text, at) {
+    const file = ts.createSourceFile(at, text, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+    const arranges = [];
+    const edits = [];
+    let because;
+    const calls = (node) => {
+        if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && ARRANGERS.has(node.expression.text)) {
+            const first = node.arguments[0];
+            const said = first === undefined ? undefined : quoted(first);
+            if (first !== undefined && said !== undefined) {
+                if (!ONE_WORD.test(said)) {
+                    because =
+                        `${at} names a ${node.expression.text} "${said}", and that name becomes the class everything inside ` +
+                            'it is arranged against. This one is not a single word, so it would become two classes and neither ' +
+                            'would be the one the stylesheet writes';
+                }
+                const own = `${prefixed(node.expression.text)}${idOf(said)}`;
+                arranges.push({ from: node.getStart(), to: node.getEnd(), own });
+                edits.push({ from: first.getStart(), to: first.getEnd(), text: `'${own}'` });
+            }
+        }
+        ts.forEachChild(node, calls);
+    };
+    calls(file);
+    const tags = (node) => {
+        if (ts.isJsxClosingElement(node)) {
+            const tag = tagOf(node);
+            if (ts.isPropertyAccessExpression(tag) && VARIANT_MEMBER.test(tag.name.text)) {
+                edits.push({ from: tag.getStart(), to: tag.getEnd(), text: tag.expression.getText() });
+            }
+        }
+        if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+            const tag = tagOf(node);
+            const held = named(attributes(node));
+            const worn = [];
+            if (ts.isIdentifier(tag) && HOST.test(tag.text) && !GENERATED.test(text)) {
+                because =
+                    `${at} writes <${tag.text}>, which is a host element: it wears no declared style, sits in no ` +
+                        'catalogue, and the style guide, a rebrand and every overlay read past it. Declare the element ' +
+                        'and wear its look, or use the declared groupings where a host element would have gone';
+            }
+            if (held.className !== undefined && !GENERATED.test(text)) {
+                because =
+                    `${at} writes a \`className\` by hand, which is CSS written in place: it names no style guide ` +
+                        'row, wears no declared variant, and the style guide, a rebrand and every overlay read past ' +
+                        'it. Declare a variant and wear it — `Box.card` — or name a place with `at`, which the build ' +
+                        'turns into the class the arrangement already declares';
+            }
+            if (ts.isPropertyAccessExpression(tag) && VARIANT_MEMBER.test(tag.name.text)) {
+                worn.push(classOf(idOf(tag.name.text)));
+                edits.push({ from: tag.getStart(), to: tag.getEnd(), text: tag.expression.getText() });
+            }
+            if (held.at !== undefined) {
+                const place = held.at.initializer === undefined ? undefined : quoted(held.at.initializer);
+                if (place === undefined) {
+                    because = `${at} gives a place that is not written out where it is used. A place is a class the build joins, so it has to be a plain word here`;
+                }
+                else {
+                    const own = arranging(arranges, node.getStart());
+                    if (own === undefined) {
+                        because =
+                            `${at} names the place "${place}" outside any composition or screen, and a place is declared by ` +
+                                'whatever arranges it. Nothing arranges this one, so the name points at nothing';
+                    }
+                    else {
+                        worn.push(`${own}-${place}`);
+                    }
+                }
+                edits.push({ from: held.at.getFullStart(), to: held.at.getEnd(), text: '' });
+            }
+            if (worn.length > 0) {
+                const wrote = wearing(held.className, joined(worn), text);
+                if (held.className === undefined)
+                    edits.push({ from: tag.getEnd(), to: tag.getEnd(), text: ` ${wrote}` });
+                else
+                    edits.push({ from: held.className.getStart(), to: held.className.getEnd(), text: wrote });
+            }
+        }
+        ts.forEachChild(node, tags);
+    };
+    tags(file);
+    if (because !== undefined)
+        return { because };
+    if (edits.length === 0)
+        return { text };
+    let made = text;
+    for (const one of [...edits].sort((a, b) => b.from - a.from)) {
+        made = made.slice(0, one.from) + one.text + made.slice(one.to);
+    }
+    return { text: made };
+}
+let checked;
+let against;
+function treeAt(from) {
+    for (const start of [dirname(resolve(from)), resolve(cwd())]) {
+        let root = start;
+        while (root !== dirname(root)) {
+            if (existsSync(join(root, '.thread', 'gate.json')) || existsSync(join(root, '_threads')))
+                return root;
+            root = dirname(root);
+        }
+    }
+    return undefined;
+}
+export function ungated(from) {
+    const root = treeAt(from);
+    const at = root === undefined ? '' : join(root, '.thread', 'gate.json');
+    const stamp = at !== '' && existsSync(at) ? `${String(statSync(at).mtimeMs)}:${String(statSync(at).size)}` : `none:${from}`;
+    if (checked !== undefined && against === stamp)
+        return checked;
+    against = stamp;
+    checked = null;
+    if (at === '' || !existsSync(at)) {
+        checked =
+            'this tree has no passing gate, so nothing in it may compile. Run `thread gate` — or the ' +
+                '`dev`, `build` and `start` scripts, which run it for you. A gate that has never run is not a ' +
+                'gate that passed, and the file you are compiling was never measured. Compiling ' +
+                `\`${from}\`, it looked for a gate receipt from \`${dirname(resolve(from))}\` and from ` +
+                `\`${resolve(cwd())}\` upwards${at === '' ? ', and neither reached a tree' : `, and found none at ${at}`}`;
+        return checked;
+    }
+    const held = JSON.parse(readFileSync(at, 'utf8'));
+    for (const [named, was] of Object.entries(held.of ?? {})) {
+        const now = existsSync(join(dirname(dirname(at)), named))
+            ? createHash('sha256').update(readFileSync(join(dirname(dirname(at)), named))).digest('hex').slice(0, 16)
+            : 'gone';
+        if (now === was)
+            continue;
+        checked = `${named} has changed since the gate last passed, so what this tree declares and what it was measured as no longer agree. Run \`thread gate\``;
+        return checked;
+    }
+    return checked;
+}
+export default function loader(source) {
+    const at = typeof this?.resourcePath === 'string' ? this.resourcePath : '';
+    const skipped = at === '' ? null : ungated(at);
+    if (skipped !== null)
+        throw new Error(`thread: ${skipped}.`);
+    const made = compiled(source, at);
+    if (made.because !== undefined)
+        throw new Error(made.because);
+    return made.text ?? source;
+}
+export const plugin = {
+    name: 'thread-react',
+    setup(build) {
+        build.onLoad({ filter: OWNED }, (args) => {
+            const text = readFileSync(args.path, 'utf8');
+            const made = compiled(text, args.path);
+            if (made.because !== undefined)
+                return { errors: [{ text: made.because }] };
+            return { contents: made.text ?? text, loader: 'tsx' };
+        });
+    },
+};

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

@@ -0,0 +1,11 @@
+export declare function typedRoute(source: string): string | undefined;
+interface Move {
+    readonly to?: string;
+    readonly through?: string;
+}
+interface Holding {
+    readonly moves: readonly Move[];
+    readonly places: readonly string[];
+}
+export declare function holding(text: string, at: string, wording: readonly string[], placeable: ReadonlySet<string>): Holding;
+export {};