@prestack/thread-ui 0.0.1 → 0.0.2

package/dist/ui/generators/show.ts

@@ -0,0 +1,259 @@
+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'
+
+interface Row {
+  readonly id: string
+  readonly at?: string
+  readonly is?: string
+  readonly token?: string
+  readonly sets?: Readonly<Record<string, string>>
+  readonly places?: Readonly<Record<string, Readonly<Record<string, string>>>>
+  readonly wears?: readonly string[]
+  readonly plays?: { readonly in?: string; readonly out?: string }
+}
+
+interface Node {
+  readonly declares?: readonly Row[]
+  readonly holds?: 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)
+
+const exported = (id: string): string => id.replace(/-/g, '_').toUpperCase()
+
+function pascal(id: string): string {
+  return id
+    .split('-')
+    .map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+    .join('')
+}
+
+async function node(file: string, name: string): Promise<Node> {
+  const held = (await import(pathToFileURL(inTree(findTree(), file)).href)) as Record<string, unknown>
+  const one = held[name]
+  if (one === undefined) return {}
+  return one as Node
+}
+
+const LOADABLE = /\.(js|mjs|cjs|ts|mts)$/
+
+async function fileFor(root: string, at: string, id: string): Promise<Record<string, unknown> | undefined> {
+  const path = resolve(root, at)
+  if (!existsSync(path) || !LOADABLE.test(path)) return undefined
+  try {
+    const held = (await import(pathToFileURL(path).href)) as Record<string, unknown>
+    return held[exported(id)] as Record<string, unknown> | undefined
+  } 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: unknown, named: ReadonlySet<string>, into: Set<string>): void {
+  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: readonly string[]): {
+  readonly still: ReadonlyMap<string, readonly string[]>
+  readonly moving: readonly string[]
+} {
+  const still = new Map<string, string[]>()
+  const moving: string[] = []
+  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: string, held: readonly string[], good: string): readonly string[] {
+  if (held.length === 0) return [`  ${what}: ${good}`]
+  return [`  ${what}: ${String(held.length)}`, ...held.map((one) => `    ${one}`)]
+}
+
+export async function namedBy(id: string): Promise<readonly string[]> {
+  const root = findTree().at
+  const found: string[] = []
+
+  const looks = async (file: string, name: string, what: string): Promise<void> => {
+    for (const one of inside(await node(file, name))) {
+
+      if (one.id === id) continue
+      if (one.at === undefined) {
+        const held = new Set<string>()
+        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<string>()
+      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(): Promise<number> {
+  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<string>()
+
+  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 = ((): readonly string[] => {
+    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<string>()
+  for (const row of variants) {
+    if (row.at === undefined) continue
+    const held = (await fileFor(root, row.at, row.id)) as { readonly reacts?: readonly string[] } | undefined
+    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.js

@@ -458,7 +458,7 @@ async function run() {
         '}',
         '',
         'export const ASKING = [',
-        ...asking.map((one) => `  { id: '${String(one.id)}', selector: '${one.selector ?? `[data-${String(one.id)}]`}' },`),
+        ...asking.map((one) => `  { id: '${String(one.id)}', selector: '${one.selector ?? `[data-${String(one.id)}]`}'${typeof one.when === 'string' ? `, when: '${one.when}'` : ''} },`),
         '] as const',
         '',
     ].join('\n');