@pyreon/zero 0.24.5 → 0.24.6

package/src/icon.tsx

@@ -1,182 +0,0 @@
-import type { PyreonHTMLAttributes, SvgAttributes, VNodeChild } from '@pyreon/core'
-import { splitProps } from '@pyreon/core'
-
-// ─── Icon ───────────────────────────────────────────────────────────────────
-//
-// Renders a FULL, already-complete SVG that you loaded — it does NOT
-// synthesize its own <svg> wrapper around hand-authored <path> children.
-// You load an svg (it contains the <svg> root itself); Icon renders it and
-// makes it container-sizable + theme-aware.
-//
-// Two ways to hand it the loaded svg (you chose: support both):
-//   • `as`  — an imported SVG *component* (`import X from './x.svg?component'`).
-//             Rendered directly — NO host wrapper. Recommended form: it's a
-//             real <svg> element, so container-fill is reliable.
-//   • `svg` — the raw `<svg>…</svg>` *markup string*
-//             (`import x from './x.svg?raw'`). Inlined via a single `<span>`
-//             host (a markup string can't mount without a parent element —
-//             this one host is unavoidable for the string form).
-//
-// Either way:
-//   • Container-filling defaults (`fill="currentColor"`,
-//     `display:block;width:100%;height:100%`) — every consumer prop spreads
-//     through and OVERRIDES them (`style`, `class`, `fill`, `aria-*`, …).
-//   • No fixed size → it fills its container; the consumer's wrapper
-//     (`<span style="width:2rem"><Icon/></span>`, a flex/grid cell,
-//     `font-size`) controls the size.
-//   • `fill="currentColor"` → CSS `color` themes it (dark mode for free).
-//
-// Two layers (mirrors createLink/Link, createImage/Image):
-//   1. createIcon(source) — factory: one component per loaded glyph
-//   2. Icon               — generic shell for a one-off loaded svg
-//
-// There is intentionally no `useIcon` — an icon has no composable behaviour
-// (no async, no state, no router). A hook layer would be surface for its
-// own sake.
-
-const FILL_STYLE = 'display:block;width:100%;height:100%'
-
-/** An imported SVG component (`import X from './x.svg?component'`). */
-export type SvgComponent = (props: SvgAttributes) => VNodeChild
-
-/**
- * Props for {@link Icon}. The standard `<svg>` attribute surface
- * (`fill`, `class`, `style`, `aria-*`, `onClick`, …) — every one passed
- * straight through and overriding the container-fill defaults — plus the
- * two source props.
- */
-export interface IconProps extends SvgAttributes {
-  /**
-   * An imported SVG component, e.g. `import X from './icon.svg?component'`.
-   * Rendered directly with no host wrapper. Recommended over `svg`.
-   */
-  as?: SvgComponent | undefined
-  /**
-   * A full `<svg>…</svg>` markup string, e.g.
-   * `import x from './icon.svg?raw'`. Inlined inside a single `<span>` host.
-   */
-  svg?: string | undefined
-}
-
-/**
- * Render a loaded SVG — container-filling, theme-aware, props-transparent.
- *
- * @example
- * import Check from './check.svg?component'
- * <span style="width:2rem"><Icon as={Check} /></span>
- *
- * @example
- * import check from './check.svg?raw'
- * <span style="width:2rem"><Icon svg={check} /></span>
- */
-export function Icon(props: IconProps): VNodeChild {
-  const [own, rest] = splitProps(props, ['as', 'svg'])
-
-  // Component form — render the imported SVG directly, no host wrapper.
-  // Defaults first so consumer `rest` (spread) overrides them; JSX spread
-  // is reactivity-safe (compiler wraps it with `_wrapSpread`).
-  if (own.as) {
-    const As = own.as
-    return <As fill="currentColor" style={FILL_STYLE} {...rest} />
-  }
-
-  // Raw-markup form — the string already contains its own <svg>, so we
-  // inline it via a single <span> host. `dangerouslySetInnerHTML` last so
-  // it can't be clobbered by a stray spread key.
-  if (own.svg) {
-    // svg-only props (`fill`, `viewBox`, …) are inapplicable to the host
-    // span AND can't reach the opaque inlined markup — only host-level
-    // attrs (`class`, `style`, `aria-*`, events) are meaningfully
-    // forwardable here. Narrow the spread to the host's real surface.
-    const hostRest = rest as unknown as PyreonHTMLAttributes<HTMLElement>
-    return (
-      <span
-        style={FILL_STYLE}
-        {...hostRest}
-        dangerouslySetInnerHTML={{ __html: own.svg }}
-      />
-    )
-  }
-
-  return null
-}
-
-/**
- * Build a reusable icon component from a loaded svg — a markup string OR an
- * imported SVG component. The result is still just `<Icon>`, so it's
- * container-sizable + theme-aware with every prop passed through.
- *
- * @example
- * import check from './check.svg?raw'
- * export const Check = createIcon(check)
- *
- * import StarSvg from './star.svg?component'
- * export const Star = createIcon(StarSvg)
- *
- * // …sized + themed entirely by the consumer:
- * <span style="width:48px"><Check class="text-green-600" /></span>
- */
-export function createIcon(
-  source: string | SvgComponent,
-): (props: SvgAttributes) => VNodeChild {
-  return (props: SvgAttributes) =>
-    typeof source === 'string' ? (
-      <Icon svg={source} {...props} />
-    ) : (
-      <Icon as={source} {...props} />
-    )
-}
-
-// ─── createNamedIcon — typed icon-set runtime ────────────────────────────────
-//
-// The runtime half of `iconsPlugin`. The plugin scans a folder and writes a
-// generated file that calls this with a registry literal; `keyof typeof
-// REGISTRY` makes `name` a strict union (autocompletes, rejects typos) and
-// gives real go-to-definition — zero per-app wiring.
-
-/** How a named icon set renders each entry. */
-export type IconMode = 'inline' | 'image'
-
-/** Props of a component built by {@link createNamedIcon}. */
-export type NamedIconProps<R extends Record<string, string>> = {
-  /** A name from the scanned set — strictly typed to the available files. */
-  name: keyof R & string
-  /** `<img>` alt text (image mode). Defaults to `""` (decorative). */
-  alt?: string
-} & Omit<IconProps, 'as' | 'svg'>
-
-/**
- * Build a strictly-typed `<Icon name="…" />` from a name→source registry.
- *
- * - `mode: 'inline'` (default) — `source` is raw `<svg>` markup; rendered via
- *   {@link Icon} so it's `currentColor`-themeable (system icons you recolor).
- * - `mode: 'image'` — `source` is an asset URL; rendered as `<img>` with NO
- *   svg mutation, original colors preserved (colorful / brand icons).
- *
- * Either way it stays container-filling + props-transparent. Not called by
- * hand normally — `iconsPlugin` emits the generated file that calls it.
- *
- * @example
- * // icons.gen.tsx (auto-generated):
- * export const Icon = createNamedIcon({ 'check-circle': '<svg…' })
- * // app:
- * <span style="width:2rem"><Icon name="check-circle" /></span>
- */
-export function createNamedIcon<R extends Record<string, string>>(
-  registry: R,
-  options: { mode?: IconMode } = {},
-): (props: NamedIconProps<R>) => VNodeChild {
-  const mode = options.mode ?? 'inline'
-  return (props: NamedIconProps<R>) => {
-    const [own, rest] = splitProps(props, ['name', 'alt'])
-    const source = registry[own.name]
-    if (mode === 'image') {
-      // svg-only props can't apply to an <img>; only host attrs forward.
-      const hostRest = rest as unknown as PyreonHTMLAttributes<HTMLImageElement>
-      return (
-        <img src={source} alt={own.alt ?? ''} style={FILL_STYLE} {...hostRest} />
-      )
-    }
-    return <Icon svg={source} {...rest} />
-  }
-}

package/src/icons-plugin.ts

@@ -1,296 +0,0 @@
-import { existsSync, readdirSync } from 'node:fs'
-import { readFile, writeFile } from 'node:fs/promises'
-import { basename, dirname, join, relative } from 'node:path'
-import type { Plugin } from 'vite'
-
-import type { IconMode } from './icon'
-
-// ─── iconsPlugin — folder → strictly-typed icon set ─────────────────────────
-//
-// Point it at a folder of `*.svg` files; it writes a generated `icons.gen.tsx`
-// that exports a strictly-typed `<Icon name="…" />`. Add an svg → the `name`
-// union widens; remove one → a now-invalid `name` fails typecheck. The
-// generated file calls `createNamedIcon(REGISTRY)` so `keyof typeof REGISTRY`
-// IS the type surface (autocomplete + real go-to-definition, zero per-app
-// wiring — same one-touch shape as fs-router / islands auto-registry).
-//
-// Two render modes (per the colorful-vs-system split):
-//   • mode: 'inline' (default) — system icons. Each svg inlined as raw markup;
-//     `currentColor`-themeable, recolor via CSS `color`.
-//   • mode: 'image'            — colorful / brand icons. Each svg emitted as a
-//     static asset, rendered `<img>`. NO mutation, original colors preserved.
-//
-//   import { iconsPlugin } from '@pyreon/zero/server'
-//   iconsPlugin({ dir: './src/icons' })            // → src/icons.gen.tsx
-//   // app:
-//   import { Icon } from './icons.gen'
-//   <span style="width:2rem"><Icon name="check-circle" /></span>
-
-/** One named set in the multi-set form. */
-export interface IconSetConfig {
-  /** Folder of `*.svg` files to scan for this set. */
-  dir: string
-  /**
-   * `'inline'` (default — system icons, `currentColor`-themeable) or
-   * `'image'` (colorful / brand icons, rendered `<img>`, no mutation).
-   */
-  mode?: IconMode
-}
-
-export interface IconsPluginConfig {
-  /**
-   * Single-set form: a folder of `*.svg` files → one `<Icon name="…" />`
-   * with a single `IconName` union. Mutually exclusive with `sets`.
-   */
-  dir?: string
-  /**
-   * Named multi-set form: `{ ui: { dir }, brand: { dir, mode } }` → one
-   * generated file exporting a strictly-typed component PER set with
-   * NAMESPACED types so they never clash:
-   *   `ui` → `<UiIcon name="…" />` + `type UiIconName`
-   *   `brand` → `<BrandIcon name="…" />` + `type BrandIconName`
-   * Mutually exclusive with `dir`.
-   */
-  sets?: Record<string, IconSetConfig>
-  /**
-   * Where to write the generated `.tsx`. Single-set default: `icons.gen.tsx`
-   * next to `dir` (e.g. `src/icons` → `src/icons.gen.tsx`). Multi-set
-   * default: `src/icons.gen.tsx` under the project root. Recommend
-   * gitignoring it — it's a build artifact.
-   */
-  out?: string
-  /** Single-set form only — render mode (`'inline'` default | `'image'`). */
-  mode?: IconMode
-}
-
-/** Set key → exported component name. `ui` → `UiIcon`, `brand-marks` → `BrandMarksIcon`. */
-export function componentNameFromSetKey(key: string): string {
-  const pascal = key
-    .split(/[-_/\s]+/)
-    .filter(Boolean)
-    .map((p) => p.charAt(0).toUpperCase() + p.slice(1))
-    .join('')
-  const safe = pascal.replace(/[^A-Za-z0-9_$]/g, '')
-  const base = /^[A-Za-z_$]/.test(safe) ? safe : `Set${safe}`
-  return `${base}Icon`
-}
-
-/** Filename stem → registry key. `Check-Circle.svg` → `check-circle`. */
-export function iconNameFromFile(file: string): string {
-  return basename(file, '.svg')
-    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-    .replace(/[\s_]+/g, '-')
-    .toLowerCase()
-}
-
-/** Registry key → safe JS import binding. `check-circle` → `checkCircle`. */
-function bindingFromName(name: string): string {
-  const camel = name.replace(/[-/](.)/g, (_, c: string) => c.toUpperCase())
-  const safe = camel.replace(/[^A-Za-z0-9_$]/g, '_')
-  return /^[A-Za-z_$]/.test(safe) ? safe : `_${safe}`
-}
-
-/** List the `*.svg` filenames in `dir` (sorted, stable). Empty if missing. */
-export function scanIconDir(dir: string): string[] {
-  if (!existsSync(dir)) return []
-  return readdirSync(dir)
-    .filter((f) => f.toLowerCase().endsWith('.svg'))
-    .sort()
-}
-
-/**
- * Render the generated `.tsx` source for a set of svg filenames. Pure —
- * unit-tested directly; the plugin only adds fs + watch around it.
- */
-export function generateIconSetSource(
-  files: string[],
-  opts: { mode: IconMode; importDir: string },
-): string {
-  const query = opts.mode === 'image' ? '' : '?raw'
-  const seen = new Map<string, string>() // binding → name (collision guard)
-  const entries: { key: string; binding: string; file: string }[] = []
-  for (const file of files) {
-    const key = iconNameFromFile(file)
-    let binding = bindingFromName(key)
-    while (seen.has(binding)) binding = `${binding}_`
-    seen.set(binding, key)
-    entries.push({ key, binding, file })
-  }
-
-  const header = [
-    '// AUTO-GENERATED by @pyreon/zero iconsPlugin — do not edit.',
-    `// Add / remove .svg files in ${opts.importDir} and this regenerates.`,
-    '/// <reference types="vite/client" />',
-    "import { createNamedIcon } from '@pyreon/zero'",
-  ]
-  const imports = entries.map(
-    (e) => `import ${e.binding} from '${opts.importDir}/${e.file}${query}'`,
-  )
-  const registry = [
-    'const REGISTRY = {',
-    ...entries.map((e) => `  ${JSON.stringify(e.key)}: ${e.binding},`),
-    '} as const',
-  ]
-  const tail = [
-    'export type IconName = keyof typeof REGISTRY',
-    `export const Icon = createNamedIcon(REGISTRY${
-      opts.mode === 'image' ? ", { mode: 'image' }" : ''
-    })`,
-    '',
-  ]
-  return [...header, '', ...imports, '', ...registry, '', ...tail].join('\n')
-}
-
-/** One resolved set for the multi-set generator. */
-export interface NamedSetInput {
-  /** Set key (`ui`) — becomes `<UiIcon>` + `type UiIconName`. */
-  key: string
-  files: string[]
-  mode: IconMode
-  /** Relative import dir from the generated file to this set's folder. */
-  importDir: string
-}
-
-/**
- * Render the generated `.tsx` for the NAMED MULTI-SET form. One file, one
- * `createNamedIcon` import, one strictly-typed component PER set with
- * namespaced types (`UiIcon`/`UiIconName`, `BrandIcon`/`BrandIconName`) so
- * sets never clash. Bindings are per-set-prefixed so two sets sharing a
- * glyph filename don't collide.
- */
-export function generateNamedIconSetsSource(sets: NamedSetInput[]): string {
-  const header = [
-    '// AUTO-GENERATED by @pyreon/zero iconsPlugin — do not edit.',
-    '// Add / remove .svg files in the configured set folders and this regenerates.',
-    '/// <reference types="vite/client" />',
-    "import { createNamedIcon } from '@pyreon/zero'",
-  ]
-  const blocks: string[] = []
-  for (const set of sets) {
-    const component = componentNameFromSetKey(set.key)
-    const typeName = `${component}Name`
-    const registry = `${component}_REGISTRY`
-    const query = set.mode === 'image' ? '' : '?raw'
-    const seen = new Set<string>()
-    const entries: { key: string; binding: string; file: string }[] = []
-    for (const file of set.files) {
-      const k = iconNameFromFile(file)
-      // Per-set binding prefix → no cross-set collision even on shared names.
-      let binding = `${bindingFromName(set.key)}_${bindingFromName(k)}`
-      while (seen.has(binding)) binding = `${binding}_`
-      seen.add(binding)
-      entries.push({ key: k, binding, file })
-    }
-    const imports = entries.map(
-      (e) => `import ${e.binding} from '${set.importDir}/${e.file}${query}'`,
-    )
-    blocks.push(
-      [
-        `// ── set "${set.key}" → <${component} name="…" /> ──`,
-        ...imports,
-        `const ${registry} = {`,
-        ...entries.map((e) => `  ${JSON.stringify(e.key)}: ${e.binding},`),
-        '} as const',
-        `export type ${typeName} = keyof typeof ${registry}`,
-        `export const ${component} = createNamedIcon(${registry}${
-          set.mode === 'image' ? ", { mode: 'image' }" : ''
-        })`,
-      ].join('\n'),
-    )
-  }
-  return [...header, '', blocks.join('\n\n'), ''].join('\n')
-}
-
-function resolveOut(cfg: IconsPluginConfig, root: string): string {
-  if (cfg.out) return join(root, cfg.out)
-  if (cfg.dir) {
-    const dir = join(root, cfg.dir)
-    return join(dirname(dir), `${basename(dir)}.gen.tsx`)
-  }
-  // Multi-set form with no explicit `out`.
-  return join(root, 'src', 'icons.gen.tsx')
-}
-
-/**
- * Vite plugin: scan `dir` for `*.svg`, write a strictly-typed
- * `icons.gen.tsx`, regenerate on add / unlink in dev.
- */
-export function iconsPlugin(cfg: IconsPluginConfig): Plugin {
-  const hasDir = typeof cfg.dir === 'string'
-  const hasSets = !!cfg.sets && Object.keys(cfg.sets).length > 0
-  if (hasDir === hasSets) {
-    throw new Error(
-      '[Pyreon] iconsPlugin: provide EXACTLY ONE of `dir` (single set) or ' +
-        '`sets` (named multi-set). ' +
-        (hasDir
-          ? 'Both were given.'
-          : 'Neither was given (or `sets` is empty).'),
-    )
-  }
-  let root = process.cwd()
-  const mode: IconMode = cfg.mode ?? 'inline'
-
-  /** Relative `./…` import dir from the generated file to a scanned folder. */
-  function rel(out: string, scanned: string): string {
-    const r = relative(dirname(out), scanned).split('\\').join('/')
-    return r.startsWith('.') ? r : `./${r}`
-  }
-
-  async function regenerate(): Promise<void> {
-    const out = resolveOut(cfg, root)
-    let source: string
-    if (hasSets) {
-      const sets: NamedSetInput[] = Object.entries(cfg.sets ?? {}).map(
-        ([key, sc]) => {
-          const scanned = join(root, sc.dir)
-          return {
-            key,
-            files: scanIconDir(scanned),
-            mode: sc.mode ?? 'inline',
-            importDir: rel(out, scanned),
-          }
-        },
-      )
-      source = generateNamedIconSetsSource(sets)
-    } else {
-      const scanned = join(root, cfg.dir as string)
-      source = generateIconSetSource(scanIconDir(scanned), {
-        mode,
-        importDir: rel(out, scanned),
-      })
-    }
-    // Idempotent — never rewrite identical content (avoids an HMR loop).
-    const current = existsSync(out) ? await readFile(out, 'utf8') : null
-    if (current !== source) await writeFile(out, source, 'utf8')
-  }
-
-  const watchDirs = (): string[] =>
-    hasSets
-      ? Object.values(cfg.sets ?? {}).map((s) => join(root, s.dir))
-      : [join(root, cfg.dir as string)]
-
-  return {
-    name: 'pyreon:zero-icons',
-    async configResolved(resolved) {
-      root = resolved.root
-      await regenerate()
-    },
-    async buildStart() {
-      await regenerate()
-    },
-    configureServer(server) {
-      const dirs = watchDirs()
-      for (const d of dirs) server.watcher.add(d)
-      const onChange = (file: string): void => {
-        if (
-          file.toLowerCase().endsWith('.svg') &&
-          dirs.some((d) => file.startsWith(d))
-        ) {
-          void regenerate()
-        }
-      }
-      server.watcher.on('add', onChange)
-      server.watcher.on('unlink', onChange)
-    },
-  }
-}