From c04300802dba95bced402bfe8d4ba569e9f3f2a9 Mon Sep 17 00:00:00 2001 From: Chris Wanstrath <2+defunkt@users.noreply.github.com> Date: Mon, 29 Dec 2025 13:27:01 -0800 Subject: [PATCH] better anon names --- src/index.tsx | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index e7f7e45..a3149c6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -197,9 +197,6 @@ function registerStyles(name: string, def: TagDef) { injectStylesInBrowser() } -// automatic names -let anonComponents = 1 - // module-level scoping export function createScope(scope: string) { return { @@ -207,15 +204,15 @@ export function createScope(scope: string) { if (typeof nameOrDef === 'string') return define(`${scope}${nameOrDef === 'Root' ? '' : nameOrDef}`, defIfNamed) else - return define(`${scope}Def${anonComponents++}`, nameOrDef as TagDef) + return define(`${scope}${anonName(nameOrDef)}`, nameOrDef as TagDef) } } } // the main event export function define(nameOrDef: string | TagDef, defIfNamed?: TagDef) { - const name = defIfNamed ? (nameOrDef as string) : `Def${anonComponents++}` const def = defIfNamed ?? nameOrDef as TagDef + const name = defIfNamed ? (nameOrDef as string) : anonName(def) if (styles[name]) throw `${name} is already defined! Must use unique names.` registerStyles(name, def) @@ -231,5 +228,22 @@ export function define(nameOrDef: string | TagDef, defIfNamed?: TagDef) { } } +// automatic names +const anonComponents: Record = {} + +// div tag -> Div1 +function anonName(def: TagDef): string { + const base = (def.base ?? 'div') + const count = (anonComponents[base] ??= 1) + anonComponents[base] += 1 + return tagName(base) + String(count) +} + +// a => Anchor, nav => Nav +function tagName(base: string): string { + const capitalized = base.slice(0, 1).toUpperCase() + base.slice(1) + return capitalized === 'A' ? 'Anchor' : capitalized +} + // shortcut so you only have to import one thing, if you want define.Styles = Styles \ No newline at end of file