better anon names

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<string, number> = {}
+
+// 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