@weft-js/warp-icons 0.1.1 → 0.1.2

package/package.json

@@ -1,8 +1,17 @@
 {
   "name": "@weft-js/warp-icons",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Icons for warp and weft",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Ravonus/weft.git",
+    "directory": "packages/warp-icons"
+  },
+  "homepage": "https://github.com/Ravonus/weft/tree/main/packages/warp-icons#readme",
+  "bugs": {
+    "url": "https://github.com/Ravonus/weft/issues"
+  },
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -23,7 +32,7 @@
   },
   "peerDependencies": {
     "vite": "*",
-    "@weft-js/core": "^0.1.1"
+    "@weft-js/core": "^0.1.2"
   },
   "publishConfig": {
     "access": "public"
@@ -41,4 +50,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/plugin.mjs

@@ -5,13 +5,18 @@ import { definePlugin } from '@weft-js/core/plugin'
 const TIERS = ['quiet', 'balanced', 'vivid']
 
 function options(input) {
-  for (const key of Object.keys(input)) if (key !== 'tier' && key !== 'source') throw Object.assign(new Error(`unknown option \`${key}\``), { path: key })
-  if (input.tier !== undefined && !TIERS.includes(input.tier)) throw Object.assign(new Error(`must be one of ${TIERS.join(', ')}`), { path: 'tier' })
-  if (input.source !== undefined && !/^https?:\/\/.+\/$/.test(input.source)) throw Object.assign(new Error('must be an http(s) URL ending in /'), { path: 'source' })
+  for (const key of Object.keys(input))
+    if (key !== 'tier' && key !== 'source')
+      throw Object.assign(new Error(`unknown option \`${key}\``), { path: key })
+  if (input.tier !== undefined && !TIERS.includes(input.tier))
+    throw Object.assign(new Error(`must be one of ${TIERS.join(', ')}`), { path: 'tier' })
+  if (input.source !== undefined && !/^https?:\/\/.+\/$/.test(input.source))
+    throw Object.assign(new Error('must be an http(s) URL ending in /'), { path: 'source' })
   return { ...(input.tier && { tier: input.tier }), ...(input.source && { source: input.source }) }
 }
 
-const agents = "Import icons from `@weft-js/warp-icons`: `CheckIcon` is hollow, the default, `CheckIconSolid` the other form (`<Icon name=\"check\" solid />`); `<Icons.Check />` and warp's `<Icon name=\"check\" />` build to the same bytes. Tiers are a prop, `tier`, or the page's `data-expression`. Decorative by default; `label` gives one a name. An unknown literal name is I001 at the build and in `weft check`. A name only known at runtime is legal and loads the pack lazily (I002 reports it), or single files with `icons({ source })` and `weft icons publish <dir>`. `trash`, `bell`, `check`, `refresh` and `copy` animate with `action`. `weft docs icons` has the rest."
+const agents =
+  'Import icons from `@weft-js/warp-icons`: `CheckIcon` is hollow, the default, `CheckIconSolid` the other form (`<Icon name="check" solid />`); `<Icons.Check />` and warp\'s `<Icon name="check" />` build to the same bytes. Tiers are a prop, `tier`, or the page\'s `data-expression`. Decorative by default; `label` gives one a name. An unknown literal name is I001 at the build and in `weft check`. A name only known at runtime is legal and loads the pack lazily (I002 reports it), or single files with `icons({ source })` and `weft icons publish <dir>`. `trash`, `bell`, `check`, `refresh` and `copy` animate with `action`. `weft docs icons` has the rest.'
 
 /** `icons()` for `weft.config.ts`: pins a tier if asked, and tells agents how the names work. */
 export const icons = definePlugin({
@@ -21,10 +26,31 @@ export const icons = definePlugin({
   options,
   contribute(o) {
     return {
-      tokens: { namespace: 'icons', values: { tier: o.tier ?? 'runtime' }, ...((o.tier || o.source) && { alias: { ...(o.tier && { '@weft-js/warp-icons': `@weft-js/warp-icons/${o.tier}` }), ...(o.source && { '@weft-js/warp-icons/source': o.source }) } }) },
+      tokens: {
+        namespace: 'icons',
+        values: { tier: o.tier ?? 'runtime' },
+        ...((o.tier || o.source) && {
+          alias: {
+            ...(o.tier && { '@weft-js/warp-icons': `@weft-js/warp-icons/${o.tier}` }),
+            ...(o.source && { '@weft-js/warp-icons/source': o.source }),
+          },
+        }),
+      },
       agents: { title: 'Icons', text: agents },
-      catalog: [{ name: 'Icon', import: '@weft-js/warp-icons/all', summary: 'Any icon by name, for names that come from data; costs the whole set' }],
-      map: [{ want: 'An icon', call: 'Import `NameIcon` from `@weft-js/warp-icons`; `npm run sheet` in the package draws them all', have: 'one export per icon' }],
+      catalog: [
+        {
+          name: 'Icon',
+          import: '@weft-js/warp-icons/all',
+          summary: 'Any icon by name, for names that come from data; costs the whole set',
+        },
+      ],
+      map: [
+        {
+          want: 'An icon',
+          call: 'Import `NameIcon` from `@weft-js/warp-icons`; `npm run sheet` in the package draws them all',
+          have: 'one export per icon',
+        },
+      ],
     }
   },
 })

package/src/action.tsx

@@ -8,5 +8,11 @@ export type ActionIconProps = IconProps & { action?: IconTrigger | boolean }
 
 /*#__NO_SIDE_EFFECTS__*/
 export function acting(line: string, pixels: string) {
-  return ({ action, ...rest }: ActionIconProps) => <Svg {...rest} data-act={typeof action === 'string' ? action : 'hover focus press'} html={line + pixels} />
+  return ({ action, ...rest }: ActionIconProps) => (
+    <Svg
+      {...rest}
+      data-act={typeof action === 'string' ? action : 'hover focus press'}
+      html={line + pixels}
+    />
+  )
 }

package/src/all.tsx

@@ -6,4 +6,7 @@ import { lookup } from './lookup'
 export { actions, lookup, names, type IconActionName, type IconName, type IconVariant }
 export { Icon, type IconByNameProps } from './icon'
 /** Every icon, by its name. */
-export const icons = Object.fromEntries(names.map(n => [n, lookup(n)])) as Record<IconName, IconComponent>
+export const icons = Object.fromEntries(names.map((n) => [n, lookup(n)])) as Record<
+  IconName,
+  IconComponent
+>

package/src/compile-catalog.mjs

@@ -0,0 +1,96 @@
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { brotliCompressSync, constants } from 'node:zlib'
+
+/** The icons that have an action, read from the generated names. */
+export const actionList = () =>
+  [
+    ...readFileSync(new URL('./gen/names.ts', import.meta.url), 'utf8')
+      .match(/const actions = (\[.*?\])/)[1]
+      .matchAll(/"([a-z0-9-]+)"/g),
+  ].map((m) => m[1])
+/** Every icon name, read from the generated names. */
+export const list = () => [
+  ...new Set(
+    [
+      ...readFileSync(new URL('./gen/names.ts', import.meta.url), 'utf8')
+        .split('\n')[1]
+        .matchAll(/"([a-z0-9-]+)"/g),
+    ].map((m) => m[1]),
+  ),
+]
+
+/** What the pack costs if a page takes it: every icon in one tier, brotli. */
+export function packCost() {
+  const entry = readFileSync(new URL('./gen/all.tsx', import.meta.url), 'utf8')
+  const modules = [...entry.matchAll(/^export \* from '(\.\/all-[^']+)'$/gm)]
+  const header = entry
+    .slice(0, entry.indexOf('export * from'))
+    .replace("import '../svg'", "import { icon } from '../svg'")
+  const code =
+    header +
+    modules
+      .map(([, path]) =>
+        readFileSync(new URL(`./gen/${path.slice(2)}.tsx`, import.meta.url), 'utf8').replace(
+          /^.*\nimport \{ icon \} from '\.\.\/svg'\n\n/,
+          '',
+        ),
+      )
+      .join('')
+  return brotliCompressSync(Buffer.from(code), { params: { [constants.BROTLI_PARAM_QUALITY]: 5 } })
+    .length
+}
+
+/** `weft check`'s view: the same walk a build does, as findings. */
+export function findings(root, analyze) {
+  const catalog = list(),
+    r = analyze(root, { catalog })
+  const kb = `${(packCost() / 1024).toFixed(0)} KB`
+  return [
+    ...r.unknown.map((u) => ({
+      code: 'I001',
+      file: u.file,
+      line: u.line,
+      column: u.column,
+      why: u.why ?? `no icon '${u.name}', did you mean '${u.suggest}'?`,
+    })),
+    ...r.dynamic.map((d) => ({
+      code: 'I002',
+      file: d.file,
+      line: d.line,
+      column: d.column,
+      why: `\`${d.why}\` isn't known until runtime, so this use loads the icon pack lazily (about ${kb} br, only on pages that reach it).`,
+    })),
+    ...r.escaped.map((d) => ({
+      code: 'I003',
+      file: d.file,
+      line: d.line,
+      column: d.column,
+      why: `${d.why}, so every icon ships with the page (about ${kb} br).`,
+    })),
+  ]
+}
+
+/** Every icon and variant as a static .svg, for a CDN or bucket. Writes files; nothing is uploaded. */
+export async function publish(dir) {
+  const { load } = await import('../scripts/build.mjs')
+  const { forms } = await import('../scripts/forms.mjs')
+  const icons = await load()
+  mkdirSync(dir, { recursive: true })
+  const svg = (html) =>
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${html}</svg>\n`
+  let files = 0
+  for (const [name, entry] of Object.entries(icons)) {
+    const f = forms(name, entry)
+    const all = { '': f.hollow.line + f.hollow.pixels, '.solid': f.solid.line + f.solid.pixels }
+    for (const [suffix, html] of Object.entries(all)) {
+      writeFileSync(join(dir, `${name}${suffix}.svg`), svg(html))
+      files++
+    }
+  }
+  writeFileSync(
+    join(dir, 'manifest.json'),
+    JSON.stringify({ icons: Object.keys(icons), variants: ['', 'solid'] }) + '\n',
+  )
+  return { dir, files, icons: Object.keys(icons).length }
+}

package/src/compile-closest.mjs

@@ -0,0 +1,19 @@
+function distance(a, b) {
+  let row = Array.from({ length: b.length + 1 }, (_, i) => i)
+  for (let i = 1; i <= a.length; i++) {
+    const next = [i]
+    for (let j = 1; j <= b.length; j++)
+      next[j] = Math.min(next[j - 1] + 1, row[j] + 1, row[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1))
+    row = next
+  }
+  return row[b.length]
+}
+/** The name nearest to a typo, for "did you mean": a prefix counts as one edit closer. */
+export const closest = (name, names) =>
+  names.reduce(
+    (best, n) => {
+      const d = distance(name, n) - (n.startsWith(name) ? 1 : 0)
+      return d < best.d ? { n, d } : best
+    },
+    { n: null, d: Infinity },
+  ).n

package/src/compile-names.mjs

@@ -0,0 +1,33 @@
+import { pascal } from './compile-pascal.mjs'
+
+/** The module warp's name lookup becomes in a build: these names and no others, and the pack only if a name escaped. */
+/** @param {Iterable<string>} names */
+export function namesModule(names, { lazy = false, source } = {}) {
+  const list = [...names].sort()
+  const id = (key) => pascal(...key.split(':'))
+  const imports = list.length
+    ? `import { ${list.map(id).join(', ')} } from '@weft-js/warp-icons'\n`
+    : ''
+  const table = `const names = { ${list.map((n) => `${JSON.stringify(n)}: ${id(n)}`).join(', ')} }\nconst key = (name, variant) => (variant ? name + ':' + variant : name)\n`
+  const packExport = `export const pack = id => { const [, b, v = ''] = /^(.+?)(Hollow|Solid|Action)?$/.exec(id.replace(/Icon(?=$|Hollow$|Solid$|Action$)/, '')); return resolve(b.replace(/[A-Z]/g, c => '-' + c.toLowerCase()).replace(/^-/, ''), v.toLowerCase()) }\n`
+  if (source)
+    return `${imports}import { remote } from '@weft-js/warp-icons/late'\n${table}const get = remote(${JSON.stringify(source)})\nexport const resolve = (name, variant) => names[key(name, variant)] ?? get(name, variant)\n${packExport}`
+  if (lazy)
+    return `${imports}import { late } from '@weft-js/warp-icons/late'\n${table}const load = () => import('@weft-js/warp-icons/all').then(m => m.lookup)\nexport const resolve = (name, variant) => names[key(name, variant)] ?? late(name, variant, load)\n${packExport}`
+  return `${imports}${table}export const resolve = (name, variant) => names[key(name, variant)]\n${packExport}`
+}
+
+const VISIBLE = { quiet: 'oq', balanced: 'ob', vivid: 'v' }
+/** Drop the drawings no shipped stop can show. With one stop left there is nothing to switch, so the switch goes too. */
+export function trimTiers(source, stops) {
+  // a build imports the pack as a namespace (rewrite), and this default would keep every icon alive
+  const code = source
+  if (stops.size === 3) return code
+  const keep = [...stops].map((s) => VISIBLE[s]).join('')
+  const out = code.replace(/<path data-t="([oqbv])"[^>]*?\/>/g, (m, t) =>
+    keep.includes(t) ? m : '',
+  )
+  return stops.size === 1
+    ? out.replaceAll(/ data-t="[oqbv]"/g, '').replace("import '../tiers.css'\n", '')
+    : out
+}

package/src/compile-pascal.mjs

@@ -0,0 +1,4 @@
+export const title = (name) => name.replace(/(^|-)(.)/g, (_, __, c) => c.toUpperCase())
+/** The export a name and variant compile to: `check`, `solid` is `CheckIconSolid`. */
+export const pascal = (name, variant = '') =>
+  `${title(name)}Icon${variant ? variant[0].toUpperCase() + variant.slice(1) : ''}`

package/src/compile-read.mjs

@@ -0,0 +1,227 @@
+import { existsSync, statSync } from 'node:fs'
+import { dirname, extname, join, resolve as path } from 'node:path'
+import { parseAst } from 'vite'
+import { unwrap } from './compile-unwrap.mjs'
+
+const ITERATORS = new Set([
+  'map',
+  'flatMap',
+  'filter',
+  'forEach',
+  'find',
+  'some',
+  'every',
+  'sort',
+  'toSorted',
+])
+function moduleFile(from, source) {
+  const base = path(dirname(from), source)
+  for (const c of [
+    base,
+    ...['.tsx', '.ts', '.jsx', '.js', '.mjs'].map((e) => base + e),
+    ...['tsx', 'ts', 'jsx', 'js'].map((e) => join(base, `index.${e}`)),
+    base.replace(/\.js$/, '.ts'),
+    base.replace(/\.js$/, '.tsx'),
+  ])
+    if (existsSync(c) && statSync(c).isFile()) return c
+  return null
+}
+
+function parse(file, code) {
+  try {
+    return parseAst(code, {
+      lang: file.endsWith('.tsx') ? 'tsx' : file.endsWith('.ts') ? 'ts' : 'jsx',
+    })
+  } catch {
+    return null
+  }
+}
+
+/** One source: its imports, what its names are bound to, and every place an icon name, a stop or a pack is used. */
+export function read(file, code) {
+  const unit = {
+    file,
+    code,
+    imports: new Map(),
+    bindings: new Map(),
+    exports: new Map(),
+    uses: [],
+    sites: [],
+    stops: [],
+    related: [],
+    members: [],
+    idents: [],
+    warp: false,
+  }
+  if (extname(file) === '.html') {
+    for (const m of code.matchAll(/data-expression=["']?([a-z]+)/g))
+      unit.stops.push({ value: m[1] })
+    return unit
+  }
+  for (const m of code.matchAll(
+    /setAttribute\(\s*['"]data-expression['"]\s*,\s*(?:['"]([a-z]+)['"])?/g,
+  ))
+    unit.stops.push(m[1] ? { value: m[1] } : { dynamic: true, at: m.index })
+  if (/dataset\.expression\s*=/.test(code))
+    unit.stops.push({ dynamic: true, at: code.search(/dataset\.expression\s*=/) })
+  const ast = parse(file, code)
+  if (!ast) return unit
+  unit.ast = ast
+  visitUnit(unit, ast, file)
+  return unit
+}
+
+function visitUnit(unit, ast, file) {
+  const bind = (name, binding) => {
+    if (!unit.bindings.has(name)) unit.bindings.set(name, [])
+    unit.bindings.get(name).push(binding)
+  }
+  const pattern = (id, make) => {
+    if (id?.type === 'Identifier') bind(id.name, make(null))
+    else if (id?.type === 'AssignmentPattern') pattern(id.left, make)
+    else if (id?.type === 'ObjectPattern')
+      for (const p of id.properties) {
+        const key = p.key?.name ?? p.key?.value
+        if (key !== undefined) pattern(p.value, (inner) => make(inner ? [key, ...inner] : [key]))
+      }
+  }
+  const component = (name, params) => {
+    if (!name || !/^[A-Z]/.test(name)) return
+    const first = params?.[0] ?? params?.items?.[0]
+    if (first?.type === 'Identifier') bind(first.name, { kind: 'props', comp: name })
+    else if (first) pattern(first, (keys) => ({ kind: 'prop', comp: name, key: keys?.[0] }))
+  }
+  const visit = (node) => {
+    if (!node || typeof node !== 'object') return
+    if (Array.isArray(node)) {
+      for (const n of node) visit(n)
+      return
+    }
+    if (typeof node.type !== 'string') return
+    if (declarations(node, unit, file, pattern, component)) return
+    uses(node, unit)
+    for (const k of Object.keys(node)) {
+      if (k !== 'type' && k !== 'start' && k !== 'end') visit(node[k])
+    }
+  }
+  visit(ast.body)
+}
+
+function declarations(node, unit, file, pattern, component) {
+  switch (node.type) {
+    case 'ImportDeclaration': {
+      const source = node.source.value
+      if (source === '@weft-js/warp' || source.startsWith('@weft-js/warp/')) unit.warp = true
+      const target = source.startsWith('.') ? moduleFile(file, source) : null
+      if (target) unit.related.push(target)
+      for (const s of node.specifiers ?? []) {
+        const imported =
+          s.type === 'ImportNamespaceSpecifier'
+            ? '*'
+            : s.type === 'ImportDefaultSpecifier'
+              ? 'default'
+              : (s.imported.name ?? s.imported.value)
+        unit.imports.set(s.local.name, { source, imported, target })
+      }
+      return true
+    }
+    case 'ExportNamedDeclaration':
+      if (node.source && node.source.value.startsWith('.')) {
+        const t = moduleFile(file, node.source.value)
+        if (t) {
+          unit.related.push(t)
+          for (const s of node.specifiers ?? [])
+            unit.exports.set(s.exported.name, {
+              reexport: t,
+              name: s.local.name ?? s.local.value,
+            })
+        }
+      }
+      break
+    case 'ExportAllDeclaration':
+      if (node.source.value.startsWith('.')) {
+        const t = moduleFile(file, node.source.value)
+        if (t) {
+          unit.related.push(t)
+          ;(unit.stars ??= []).push(t)
+        }
+      }
+      break
+    case 'VariableDeclarator':
+      if (node.init) {
+        pattern(node.id, (keys) => ({ kind: 'value', expr: node.init, keys }))
+        const fn = unwrap(node.init)
+        if (node.id.type === 'Identifier' && /Function/.test(fn.type))
+          component(node.id.name, fn.params)
+      }
+      break
+    case 'FunctionDeclaration':
+      component(node.id?.name, node.params)
+      break
+    case 'CallExpression': {
+      const callee = node.callee
+      if (
+        callee.type === 'MemberExpression' &&
+        !callee.computed &&
+        ITERATORS.has(callee.property.name)
+      ) {
+        const fn = node.arguments[0] && unwrap(node.arguments[0])
+        if (fn && /Function/.test(fn.type))
+          pattern(fn.params?.[0] ?? fn.params?.items?.[0], (keys) => ({
+            kind: 'each',
+            of: callee.object,
+            keys,
+          }))
+      }
+      break
+    }
+  }
+  return false
+}
+
+function uses(node, unit) {
+  switch (node.type) {
+    case 'MemberExpression':
+      if (node.object.type === 'Identifier') unit.members.push({ local: node.object.name, node })
+      break
+    case 'JSXMemberExpression':
+      if (node.object.type === 'JSXIdentifier')
+        unit.members.push({ local: node.object.name, node, jsx: true })
+      break
+    case 'Identifier':
+    case 'JSXIdentifier':
+      unit.idents.push(node)
+      break
+    case 'JSXOpeningElement': {
+      const comp =
+        node.name.type === 'JSXIdentifier'
+          ? node.name.name
+          : node.name.type === 'JSXMemberExpression'
+            ? `${node.name.object.name}.${node.name.property.name}`
+            : null
+      if (!comp) break
+      for (const attr of node.attributes) {
+        if (attr.type !== 'JSXAttribute' || attr.name.type !== 'JSXIdentifier') continue
+        const value =
+          attr.value?.type === 'JSXExpressionContainer' ? attr.value.expression : attr.value
+        if (attr.name.name === 'data-expression' && value)
+          unit.stops.push({ expr: value, at: attr.start })
+        if (value && /^[A-Z]/.test(comp))
+          unit.uses.push({
+            comp,
+            prop: attr.name.name,
+            expr: value,
+            at: attr.start,
+            end: attr.end,
+            element: node,
+          })
+      }
+      break
+    }
+    case 'Property':
+    case 'ObjectProperty':
+      if (!node.computed && (node.key.name ?? node.key.value) === 'icon' && !node.method)
+        unit.sites.push({ soft: true, expr: node.value, at: node.start })
+      break
+  }
+}

package/src/compile-resolver.mjs

@@ -0,0 +1,169 @@
+import { unwrap } from './compile-unwrap.mjs'
+
+const empty = () => ({ values: new Set(), shapes: [], dynamic: null })
+const merge = (into, r) => {
+  for (const v of r.values) into.values.add(v)
+  into.shapes.push(...r.shapes)
+  into.dynamic ??= r.dynamic
+  return into
+}
+const text = (unit, n) => unit.code.slice(n.start, n.end).slice(0, 60)
+
+function exported(ctx, file, name, seen) {
+  const u = ctx.units.get(file)
+  if (!u) return { ...empty(), dynamic: `export ${name}` }
+  const re = u.exports.get(name)
+  if (re?.reexport) return exported(ctx, re.reexport, re.name, seen)
+  if (u.bindings.has(name)) return identifier(ctx, u, name, seen)
+  for (const star of u.stars ?? []) {
+    const r = exported(ctx, star, name, seen)
+    if (!r.dynamic) return r
+  }
+  return { ...empty(), dynamic: `export ${name}` }
+}
+
+function identifier(ctx, unit, name, seen) {
+  if (name === 'undefined') return empty()
+  const id = `${unit.file}#${name}`
+  if (seen.has(id)) return empty()
+  seen.add(id)
+  const imp = unit.imports.get(name)
+  if (imp) {
+    if (imp.source === '@weft-js/warp-icons' || imp.source.startsWith('@weft-js/warp-icons/'))
+      return empty()
+    if (imp.target && imp.imported !== '*') return exported(ctx, imp.target, imp.imported, seen)
+    return { ...empty(), dynamic: name }
+  }
+  const list = unit.bindings.get(name)
+  if (!list) return { ...empty(), dynamic: name }
+  const out = empty()
+  for (const b of list) merge(out, binding(ctx, unit, b, seen))
+  seen.delete(id)
+  return out
+}
+
+function pick(ctx, unit, from, keys, seen) {
+  let cur = from
+  for (const key of keys ?? []) {
+    const next = empty()
+    next.dynamic = cur.dynamic
+    for (const { shape, unit: u } of cur.shapes) merge(next, property(ctx, u, shape, key, seen))
+    cur = next
+  }
+  return cur
+}
+
+function binding(ctx, unit, b, seen) {
+  if (b.kind === 'value') return pick(ctx, unit, expression(ctx, unit, b.expr, seen), b.keys, seen)
+  if (b.kind === 'each') {
+    const list = expression(ctx, unit, b.of, seen),
+      items = empty()
+    items.dynamic = list.dynamic
+    for (const { shape, unit: u } of list.shapes)
+      if (shape.type === 'ArrayExpression')
+        for (const el of shape.elements) if (el) merge(items, expression(ctx, u, el, seen))
+    return pick(ctx, unit, items, b.keys, seen)
+  }
+  if (b.kind === 'prop')
+    return b.key ? forwarded(ctx, b.comp, b.key, seen) : { ...empty(), dynamic: `${b.comp} props` }
+  return { ...empty(), dynamic: `${b.comp} props` }
+}
+
+function forwarded(ctx, comp, prop, seen) {
+  const out = empty()
+  for (const { unit, use } of ctx.usesOf.get(`${comp}.${prop}`) ?? [])
+    merge(out, expression(ctx, unit, use.expr, seen))
+  return out
+}
+
+function property(ctx, unit, shape, key, seen) {
+  const out = empty()
+  if (shape.type === 'ObjectExpression') {
+    for (const p of shape.properties) {
+      if (p.type === 'SpreadElement') {
+        const s = expression(ctx, unit, p.argument, seen)
+        for (const x of s.shapes) merge(out, property(ctx, x.unit, x.shape, key, seen))
+        out.dynamic ??= s.dynamic
+        continue
+      }
+      const k = p.key?.name ?? p.key?.value
+      if (key === null || k === key) merge(out, expression(ctx, unit, p.value, seen))
+    }
+  } else if (shape.type === 'ArrayExpression')
+    for (const el of shape.elements) if (el) merge(out, expression(ctx, unit, el, seen))
+  return out
+}
+
+function expression(ctx, unit, raw, seen = new Set()) {
+  const node = unwrap(raw)
+  if (!node) return empty()
+  switch (node.type) {
+    case 'Literal':
+    case 'StringLiteral':
+      return typeof node.value === 'string'
+        ? { ...empty(), values: new Set([node.value]) }
+        : empty()
+    case 'TemplateLiteral':
+      return node.expressions.length
+        ? { ...empty(), dynamic: text(unit, node) }
+        : { ...empty(), values: new Set([node.quasis[0].value.cooked]) }
+    case 'ConditionalExpression':
+      return merge(
+        expression(ctx, unit, node.consequent, seen),
+        expression(ctx, unit, node.alternate, seen),
+      )
+    case 'LogicalExpression':
+      return merge(expression(ctx, unit, node.left, seen), expression(ctx, unit, node.right, seen))
+    case 'ArrayExpression':
+    case 'ObjectExpression':
+      return { ...empty(), shapes: [{ shape: node, unit }] }
+    case 'Identifier':
+      return identifier(ctx, unit, node.name, seen)
+    case 'ArrowFunctionExpression':
+    case 'FunctionExpression':
+    case 'JSXElement':
+    case 'JSXFragment':
+      return empty()
+    case 'MemberExpression': {
+      const object = unwrap(node.object)
+      const key = node.computed ? (unwrap(node.property)?.value ?? null) : node.property.name
+      if (object.type === 'Identifier') {
+        const props = unit.bindings.get(object.name)?.find((b) => b.kind === 'props')
+        if (props && key) return forwarded(ctx, props.comp, key, seen)
+        const imp = unit.imports.get(object.name)
+        if (imp?.imported === '*' && imp.target && key) return exported(ctx, imp.target, key, seen)
+      }
+      const base = expression(ctx, unit, object, seen),
+        out = empty()
+      out.dynamic = base.dynamic
+      for (const { shape, unit: u } of base.shapes) merge(out, property(ctx, u, shape, key, seen))
+      return out
+    }
+    case 'CallExpression': {
+      // a list method hands back the list, or an item of it
+      const c = node.callee
+      if (
+        c.type === 'MemberExpression' &&
+        !c.computed &&
+        ['filter', 'sort', 'toSorted', 'slice', 'reverse', 'concat'].includes(c.property.name)
+      )
+        return expression(ctx, unit, c.object, seen)
+      if (c.type === 'MemberExpression' && !c.computed && c.property.name === 'find') {
+        const base = expression(ctx, unit, c.object, seen),
+          out = empty()
+        out.dynamic = base.dynamic
+        for (const { shape, unit: u } of base.shapes)
+          merge(out, property(ctx, u, shape, null, seen))
+        return out
+      }
+      return { ...empty(), dynamic: text(unit, node) }
+    }
+    default:
+      return { ...empty(), dynamic: text(unit, node) }
+  }
+}
+
+export function resolver(units, usesOf) {
+  const ctx = { units, usesOf }
+  return { expression: (unit, raw, seen) => expression(ctx, unit, raw, seen) }
+}