@prestack/thread-ui 0.0.1 → 0.0.2

package/dist/ui/generators/i18n.ts

@@ -0,0 +1,301 @@
+import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from 'node:fs'
+import { dirname, join, relative } from 'node:path'
+import { argv, stderr, 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'
+
+import { fileFor, languagesIn, sourceIn } from '../localizations.ts'
+
+const GENERATED = `app/_generated/wording.${'ts'}`
+
+const SKIP = new Set(['node_modules', '.next', '.git', 'dist', '_generated'])
+
+const CODE = /\.(tsx?|jsx?)$/
+
+export function walk(at: string, found: string[] = [], skip: ReadonlySet<string> = new Set()): readonly string[] {
+  for (const entry of readdirSync(at, { withFileTypes: true })) {
+    if (SKIP.has(entry.name)) continue
+    const path = join(at, entry.name)
+    if (skip.has(path)) continue
+    if (entry.isDirectory()) walk(path, found, skip)
+    else if (CODE.test(entry.name)) found.push(path)
+  }
+  return found
+}
+
+function leftOut(at: string): ReadonlySet<string> {
+  try {
+    const held = JSON.parse(readFileSync(join(at, 'tsconfig.json'), 'utf8')) as { exclude?: readonly string[] }
+    return new Set((held.exclude ?? []).map((one) => join(at, one)))
+  } catch {
+
+    return new Set()
+  }
+}
+
+const TYPED = /readonly\s+([A-Za-z][A-Za-z0-9]*)\??\s*:\s*MessageKey\b/g
+
+export function keyProps(at: string): readonly string[] {
+  const found = new Set<string>()
+  const home = join(at, 'node_modules', packageOf('ui'))
+  if (!existsSync(home)) return []
+  for (const file of walk(home)) {
+    for (const one of readFileSync(file, 'utf8').matchAll(TYPED)) found.add(one[1] ?? '')
+  }
+  for (const file of readdirSync(join(home, 'dist'), { withFileTypes: true })) {
+    if (!file.name.endsWith('.d.ts')) continue
+    for (const one of readFileSync(join(home, 'dist', file.name), 'utf8').matchAll(TYPED)) found.add(one[1] ?? '')
+  }
+  return [...found].sort()
+}
+
+const named = (props: readonly string[]): RegExp =>
+  new RegExp(`\\b(?:${props.join('|')})\\s*=\\s*(?:"([^"]+)"|'([^']+)')`, 'g')
+
+export function keysIn(text: string, props: readonly string[]): readonly string[] {
+  if (props.length === 0) return []
+  return [...text.matchAll(named(props))].map((one) => one[1] ?? one[2] ?? '')
+}
+
+async function shipped(at: string): Promise<Readonly<Record<string, string>>> {
+  const held = (await import('../i18n/catalogs/en.ts')) as { en?: Readonly<Record<string, unknown>> }
+  const made: Record<string, string> = {}
+  for (const [key, entry] of Object.entries(held.en ?? {})) {
+    made[key] = typeof entry === 'string' ? entry : String((entry as { text?: string }).text ?? '')
+  }
+  void at
+  return made
+}
+
+export function readWording(at: string, language: string): Readonly<Record<string, string>> {
+  const path = join(at, fileFor(language))
+  if (!existsSync(path)) return {}
+  try {
+    const held = JSON.parse(readFileSync(path, 'utf8')) as Readonly<Record<string, unknown>>
+    const made: Record<string, string> = {}
+    for (const [key, value] of Object.entries(held)) made[key] = typeof value === 'string' ? value : ''
+    return made
+  } catch (wrong) {
+    throw new Error(
+      `${fileFor(language)} is there and will not parse, so what this app says in ${language} cannot ` +
+        `be known. Nothing was written — a reader that cannot read is not a reader that found nothing.\n  ${String(wrong)}`,
+    )
+  }
+}
+
+const asJson = (value: string): string => JSON.stringify(value)
+
+export function wordingFile(held: Readonly<Record<string, string>>): string {
+  const keys = Object.keys(held).sort()
+  return `{\n${keys.map((key) => `  ${asJson(key)}: ${asJson(held[key] ?? '')}`).join(',\n')}\n}\n`
+}
+
+function moduleFor(
+  languages: readonly { readonly id: string; readonly name: string; readonly flag: string }[],
+  source: string,
+  used: readonly string[],
+  wording: ReadonlyMap<string, Readonly<Record<string, string>>>,
+): string {
+  const catalogue = (language: string): string => {
+    const held = wording.get(language) ?? {}
+    const keys = Object.keys(held).sort()
+    return [
+      `  ${asJson(language)}: {`,
+      ...keys.map((key) => `    ${asJson(key)}: ${asJson(held[key] ?? '')},`),
+      '  },',
+    ].join('\n')
+  }
+
+  return [
+    '/* GENERATED by thread — do not edit. Change the wording in i18n/, or the rows, and regenerate. */',
+    '',
+    'export type Language =',
+    ...languages.map((one) => `  | ${asJson(one.id)}`),
+    '',
+    `export const SOURCE: Language = ${asJson(source)}`,
+    '',
+    'export const LANGUAGES: readonly { readonly id: Language; readonly name: string; readonly flag: string }[] = [',
+    ...languages.map((one) => `  { id: ${asJson(one.id)}, name: ${asJson(one.name)}, flag: ${asJson(one.flag)} },`),
+    ']',
+    '',
+    '/*',
+    ' * Every key this interface names.',
+    ' */',
+    'export type Used =',
+    ...(used.length === 0 ? ['  | never'] : used.map((one) => `  | ${asJson(one)}`)),
+    '',
+    'const held = {',
+    ...languages.map((one) => catalogue(one.id)),
+    '} as const',
+    '',
+    '/*',
+    ' * AN UNANSWERED KEY IS A TYPE ERROR, NAMING THE LANGUAGE AND THE KEY.',
+    ' *',
+    ' * `Filled` is what makes the compiler one of the surfaces that refuses rather than a formality.',
+    ' * The catalogue above is `as const`, so every value is a literal type — an empty one is the',
+    ' * literal `""`, which `Filled` maps to `never`, which nothing is assignable to. So a key some',
+    ' * language has not answered fails HERE, at the line naming both, before anything is run.',
+    ' *',
+    ' * Written as an assignment rather than `satisfies`, and that is deliberate: `satisfies` on the',
+    ' * literal refuses the EXTRA keys too, and there are always extra ones — an app holds every',
+    ' * message it has, and `Used` is only the ones its markup names.',
+    ' */',
+    "type Filled<S> = S extends '' ? never : S",
+    '',
+    'type Answered<L extends Language> = {',
+    '  readonly [K in Used]: K extends keyof (typeof held)[L] ? Filled<(typeof held)[L][K]> : never',
+    '}',
+    '',
+    'export const WORDING: { readonly [L in Language]: Answered<L> } = held',
+    '',
+  ].join('\n')
+}
+
+interface Node {
+  readonly holds?: readonly { readonly id: string; readonly is?: string; readonly sets?: Readonly<Record<string, string>> }[]
+  readonly declares?: readonly { readonly id: string; readonly is?: string; readonly sets?: Readonly<Record<string, string>> }[]
+}
+
+async function rows(at: string): Promise<NonNullable<Node['holds']>> {
+  const path = inTree(findTree(), `localizations.${'ts'}`)
+  if (!existsSync(path)) {
+    stdout.write(`i18n: this tree has no ${relative(at, path)}, so it is in no language and there is no wording to write or check.\n`)
+    exit(0)
+  }
+  const held = (await import(pathToFileURL(path).href)) as { LOCALIZATION?: Node }
+  if (held.LOCALIZATION === undefined) {
+    throw new Error(
+      `${relative(at, path)} exports no \`LOCALIZATION\`, so nothing says what languages this app is ` +
+        `in. Run \`thread attach ${packageOf('ui')}\` — the sheet is the package's to write, not yours.`,
+    )
+  }
+  return [...(held.LOCALIZATION.holds ?? []), ...(held.LOCALIZATION.declares ?? [])]
+}
+
+async function run(): Promise<number> {
+  const tree = findTree()
+  const at = tree.at
+  const held = (await rows(at)) ?? []
+
+  const languages = languagesIn(held)
+  const source = sourceIn(held)
+
+  if (languages.length === 0) {
+    stderr.write('i18n: no language is declared, so this app is in no language at all. Add one with `thread create language`.\n')
+    return 1
+  }
+  if (source === undefined || !languages.some((one) => one.id === source)) {
+    stderr.write(
+      `i18n: the source row names \`${String(source)}\`, and that is not one of the declared languages ` +
+        `(${languages.map((one) => one.id).join(', ')}). An app is written in one of the languages it is in.\n`,
+    )
+    return 1
+  }
+
+  const props = keyProps(at)
+  if (props.length === 0) {
+    stderr.write(
+      `i18n: nothing in the installed \`${packageOf('ui')}\` declares a prop of type \`MessageKey\`, so no key could ` +
+        'be recognised in any file. That is a broken install, not an app with no wording.\n',
+    )
+    return 1
+  }
+
+  const used = new Set<string>()
+  const mine = leftOut(at)
+  for (const file of walk(at, [], mine)) for (const key of keysIn(readFileSync(file, 'utf8'), props)) used.add(key)
+
+  const seeded = await shipped(at)
+
+  const answered = new Set<string>()
+  for (const language of languages) {
+    for (const key of Object.keys(readWording(at, language.id))) answered.add(key)
+  }
+
+  const everything = [...new Set([...used, ...Object.keys(seeded), ...answered])].sort()
+
+  const wording = new Map<string, Readonly<Record<string, string>>>()
+  for (const language of languages) {
+    const already = readWording(at, language.id)
+    const made: Record<string, string> = {}
+    for (const key of everything) made[key] = already[key] ?? (language.id === source ? (seeded[key] ?? '') : '')
+    wording.set(language.id, made)
+  }
+
+  const files = [
+    ...languages.map((one) => ({ path: fileFor(one.id), made: wordingFile(wording.get(one.id) ?? {}) })),
+    { path: GENERATED, made: moduleFor(languages, source, [...used].sort(), wording) },
+  ]
+
+  const named = new Set(languages.map((one) => fileFor(one.id)))
+  const stray: string[] = []
+  try {
+    for (const entry of readdirSync(join(at, 'i18n'), { withFileTypes: true })) {
+      const path = `i18n/${entry.name}`
+      if (entry.isDirectory() || named.has(path)) continue
+      stray.push(path)
+    }
+  } catch {  }
+
+  const blank = languages.flatMap((one) =>
+    everything.filter((key) => (wording.get(one.id) ?? {})[key] === '').map((key) => `${one.id}: ${key}`),
+  )
+
+  if (argv.includes('--check')) {
+    const drifted = files.find((one) => {
+      let current = ''
+      try {
+        current = readFileSync(join(at, one.path), 'utf8')
+      } catch {
+        current = ''
+      }
+      return current !== one.made
+    })
+    if (drifted !== undefined) {
+      stderr.write(
+        `i18n: ${drifted.path} is not what the declarations produce. Run \`thread i18n\` and fill in what it adds.\n`,
+      )
+      return 1
+    }
+    if (stray.length > 0) {
+      stderr.write(
+        `i18n: ${stray.join(', ')} — no declared language accounts for ${stray.length === 1 ? 'it' : 'them'}, ` +
+          'so it is not wording, it is a file somebody left there. Declare the language with ' +
+          '`thread create language`, or delete the file.\n',
+      )
+      return 1
+    }
+    if (blank.length > 0) {
+      stderr.write(
+        `i18n: ${String(blank.length)} key(s) have no wording, and an untranslated key is an error rather ` +
+          `than a word that comes out in the wrong language:\n${blank.map((one) => `  ${one}`).join('\n')}\n`,
+      )
+      return 1
+    }
+    stdout.write(`i18n: ${String(everything.length)} key(s) answered in ${String(languages.length)} language(s)\n`)
+    return 0
+  }
+
+  for (const one of files) {
+    mkdirSync(dirname(join(at, one.path)), { recursive: true })
+    writeFileSync(join(at, one.path), one.made, 'utf8')
+  }
+
+  stdout.write(
+    `i18n: ${String(everything.length)} key(s) across ${String(languages.length)} language(s) — ` +
+      `${String(used.size)} named by this interface, ${String(everything.length - used.size)} shipped with the framework\n`,
+  )
+  if (blank.length > 0) {
+    stdout.write(
+      `i18n: ${String(blank.length)} still to write — the gate refuses until they are filled:\n` +
+        `${blank.slice(0, 20).map((one) => `  ${one}`).join('\n')}\n` +
+        (blank.length > 20 ? `  … and ${String(blank.length - 20)} more\n` : ''),
+    )
+  }
+  return 0
+}
+
+if (invoked(import.meta.url)) exit(await run())

package/dist/ui/generators/icons.ts

@@ -0,0 +1,214 @@
+import { createRequire } from 'node:module'
+
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { argv, stderr, stdout } from 'node:process'
+import { pathToFileURL } from 'node:url'
+
+import { exit } from '@prestack/thread/core/invoked'
+import { findTree, inTree } from '@prestack/thread/core/tree'
+
+import { brandExport, drawnAs, setNamed, sizeRows, SET_ROW, type IconSet } from '../icons.ts'
+
+interface Row {
+  readonly id: string
+  readonly is?: string
+  readonly sets?: Readonly<Record<string, string>>
+}
+
+interface Node {
+  readonly holds?: readonly Row[]
+  readonly declares?: readonly Row[]
+}
+
+function inside(node: Node): readonly Row[] {
+  return [...(node.holds ?? []), ...(node.declares ?? [])]
+}
+
+const compare = (a: string, b: string): number => (a < b ? -1 : a > b ? 1 : 0)
+
+function module(
+  set: IconSet,
+  drawn: readonly { readonly id: string; readonly as: string }[],
+  sizes: readonly { readonly id: string; readonly is: string }[],
+): string {
+  const names = [...new Set(drawn.map((one) => one.as))].sort(compare)
+
+  return [
+
+    "'use client'",
+    '',
+    '/* GENERATED by thread — do not edit. Change the icon rows and regenerate. */',
+    '',
+    `import { ${names.join(', ')} } from '${set.module}'`,
+    "import { installIcons } from '../icons.ts'",
+    '',
+    'installIcons(',
+    `  { name: '${set.name}', module: '${set.module}', size: ${String(set.size)}, viewBox: ${String(set.viewBox)}` +
+      `${set.nativeStroke === undefined ? '' : `, nativeStroke: ${String(set.nativeStroke)}`} },`,
+    '  {',
+    ...drawn.map((one) => `    '${one.id}': ${one.as},`),
+    '  },',
+    '  {',
+    ...sizes.map((one) => `    '${one.id}': '${one.is}',`),
+    '  },',
+    ')',
+    '',
+    '/*',
+    ' * Rendered once by the layout, and that is the point of it.',
+    ' *',
+    ' * A bare side-effect import of a client module from a server layout is a client REFERENCE, not',
+    ' * an evaluation: the install never ran, and every icon refused on a page whose layout plainly',
+    ' * imported it. Rendering this is what evaluates the module, in the graph the elements run in.',
+    ' */',
+    'export function ThreadIcons(): null {',
+    '  return null',
+    '}',
+    '',
+  ].join('\n')
+}
+
+function exported(root: string, module: string): ReadonlySet<string> | undefined {
+  let entry: string
+  try {
+    entry = createRequire(join(root, 'package.json')).resolve(module)
+  } catch {
+    return undefined
+  }
+  const suffix = `.d.${'ts'}`
+  const found = new Set<string>()
+  const seen: string[] = []
+  let dir = dirname(entry)
+  for (let up = 0; up < 5; up += 1) {
+    let names: readonly string[] = []
+    try {
+      names = readdirSync(dir).filter((each) => each.endsWith(suffix))
+    } catch {
+      names = []
+    }
+    for (const one of names) seen.push(join(dir, one))
+    if (existsSync(join(dir, 'package.json')) && seen.length > 0) break
+    const next = dirname(dir)
+    if (next === dir) break
+    dir = next
+  }
+  for (const one of seen) {
+    let text = ''
+    try {
+      text = readFileSync(one, 'utf8')
+    } catch {
+      continue
+    }
+    for (const each of text.matchAll(/declare const (\w+)/g)) found.add(each[1] ?? '')
+    for (const each of text.matchAll(/(\w+) as (\w+)/g)) found.add(each[2] ?? '')
+    for (const each of text.matchAll(/export declare const (\w+)/g)) found.add(each[1] ?? '')
+  }
+  return found.size === 0 ? undefined : found
+}
+
+async function node(file: string, name: string): Promise<Node> {
+  const at = inTree(findTree(), file)
+  if (!existsSync(at)) {
+    stdout.write(`icons: this tree has no ${findTree().name}/${file}, so it declares no icon and there is no module to write or check.\n`)
+    exit(0)
+  }
+  const held = (await import(pathToFileURL(at).href)) as Record<string, unknown>
+  const one = held[name]
+  if (one === undefined) throw new Error(`_threads/${file} exports no \`${name}\`.`)
+  return one as Node
+}
+
+async function run(): Promise<number> {
+  const tree = findTree()
+  const rows = inside(await node('icons.ts', 'ICON'))
+
+  const picked = rows.find((row) => row.id === SET_ROW)
+  if (picked?.is === undefined) {
+    stderr.write(
+      `thread: the icon sheet declares no \`${SET_ROW}\` row, so nothing says which library the app ` +
+        'draws from. One row, naming a registered library.\n',
+    )
+    return 1
+  }
+  const set = setNamed(picked.is)
+
+  try {
+    createRequire(join(tree.at, 'package.json')).resolve(set.module)
+  } catch {
+    stderr.write(
+      `thread: the icon rows draw from \`${set.name}\`, which is the package \`${set.module}\`, and this ` +
+        `app does not have it installed. Add it, or name a library the app already has.\n`,
+    )
+    return 1
+  }
+
+  const sizes = [...sizeRows(rows)].sort((one, two) => compare(one.id, two.id))
+  const held = new Set(sizes.map((one) => one.id))
+
+  if (sizes.length === 0) {
+    stderr.write(
+      'thread: the icon sheet declares no size row, so nothing says how large a symbol is drawn. ' +
+        'One row per size, holding a length.\n',
+    )
+    return 1
+  }
+
+  const drawn = rows
+    .filter((row) => row.id !== SET_ROW && !held.has(row.id))
+    .map((row) => ({ id: row.id, as: row.sets?.[set.name] ?? drawnAs(set.name, row.id, row.id) }))
+    .sort((one, two) => compare(one.id, two.id))
+
+  const missing = drawn.find((one) => one.as === '')
+  if (missing !== undefined) {
+    stderr.write(`thread: \`${missing.id}\` names no symbol in \`${set.name}\`.\n`)
+    return 1
+  }
+
+  const known = exported(tree.at, set.module)
+  if (known === undefined) {
+    stdout.write(`thread: the declarations of \`${set.module}\` could not be read from this app, so the names the icon rows give it are unverified.\n`)
+  } else {
+    const unknown = drawn.find((one) => !one.as.startsWith('si') && !known.has(one.as))
+    if (unknown !== undefined) {
+      stderr.write(
+        `thread: \`${unknown.id}\` is drawn as \`${unknown.as}\` in \`${set.name}\`, and that library does not export it — its ` +
+          `declarations list ${String(known.size)} names and none of them is that one. Check the library's own naming; the module ` +
+          'would fail to build with it.\n',
+      )
+      return 1
+    }
+  }
+
+  const brand = drawn.filter((one) => one.as.startsWith('si')).map((one) => brandExport(one.id))
+  if (brand.length > 0) stdout.write(`thread: ${String(brand.length)} brand icon(s) drawn from their own set\n`)
+
+  const at = join(tree.at, 'app/_generated/icons.ts')
+  const made = module(set, drawn, sizes)
+
+  if (argv.includes('--check')) {
+    let current = ''
+    try {
+      current = readFileSync(at, 'utf8')
+    } catch {
+      current = ''
+    }
+    if (current === made) {
+      stdout.write('icons: app/_generated/icons.ts is what the rows produce\n')
+      return 0
+    }
+    stderr.write(
+      'icons: app/_generated/icons.ts is not what the rows produce. A derived file that differs from ' +
+        'its generator is a hand edit wearing a generated name. Run `thread icons` and commit what it writes.\n',
+    )
+    return 1
+  }
+
+  mkdirSync(dirname(at), { recursive: true })
+  writeFileSync(at, made, 'utf8')
+  stdout.write(
+    `thread: wrote app/_generated/icons.ts — ${String(drawn.length)} icons drawn from \`${set.name}\`\n`,
+  )
+  return 0
+}
+
+if (argv[1] !== undefined) exit(await run())

package/dist/ui/generators/react.js

@@ -9,7 +9,7 @@ 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 MAKES = 'element';
 const ONE_WORD = /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
 function prefixed(called) {
     return called === 'screen' ? 's-' : 'c-';
@@ -30,6 +30,9 @@ function arranging(held, at) {
     }
     return found?.own;
 }
+function within(held, at) {
+    return held.some((one) => at >= one.from && at < one.to);
+}
 function tagOf(node) {
     return node.tagName;
 }
@@ -66,7 +69,11 @@ export function compiled(text, at) {
     const arranges = [];
     const edits = [];
     let because;
+    const writing = [];
     const calls = (node) => {
+        if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === MAKES) {
+            writing.push({ from: node.getStart(), to: node.getEnd() });
+        }
         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);
@@ -96,13 +103,13 @@ export function compiled(text, at) {
             const tag = tagOf(node);
             const held = named(attributes(node));
             const worn = [];
-            if (ts.isIdentifier(tag) && HOST.test(tag.text) && !GENERATED.test(text)) {
+            if (ts.isIdentifier(tag) && HOST.test(tag.text) && !within(writing, node.getStart())) {
                 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)) {
+            if (held.className !== undefined && !within(writing, node.getStart())) {
                 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 ' +