Merge pull request #203 from johndoe6345789/codex/update-component-registry-paths-and-sources

Prefer explicit `load.path` for JSON components and resolve explicit module paths first

json-components-registry.json

@@ -1562,7 +1562,11 @@
       "canHaveChildren": true,
       "description": "Chart component",
       "status": "supported",
-      "source": "ui"
+      "source": "ui",
+      "load": {
+        "path": "@/components/ui/chart/chart-container.tsx",
+        "export": "ChartContainer"
+      }
     },
     {
       "type": "DataList",
@@ -2109,7 +2113,11 @@
       "description": "JSONUIShowcase organism component",
       "status": "supported",
       "source": "organisms",
-      "jsonCompatible": true
+      "jsonCompatible": true,
+      "load": {
+        "path": "@/components/JSONUIShowcase.tsx",
+        "export": "JSONUIShowcase"
+      }
     },
     {
       "type": "Kbd",
@@ -2166,7 +2174,11 @@
       "canHaveChildren": true,
       "description": "PageHeader component",
       "status": "supported",
-      "source": "atoms"
+      "source": "atoms",
+      "load": {
+        "path": "@/components/atoms/PageHeader.tsx",
+        "export": "BasicPageHeader"
+      }
     },
     {
       "type": "PageHeaderContent",
@@ -2249,7 +2261,11 @@
       "canHaveChildren": true,
       "description": "Resizable component",
       "status": "supported",
-      "source": "ui"
+      "source": "ui",
+      "load": {
+        "path": "@/components/ui/resizable.tsx",
+        "export": "ResizablePanelGroup"
+      }
     },
     {
       "type": "SaveIndicator",
@@ -2353,7 +2369,11 @@
       "canHaveChildren": false,
       "description": "Search input with icon",
       "status": "supported",
-      "source": "atoms"
+      "source": "atoms",
+      "load": {
+        "path": "@/components/atoms/SearchInput.tsx",
+        "export": "BasicSearchInput"
+      }
     },
     {
       "type": "Sheet",

schemas/json-components-registry-schema.json

@@ -85,6 +85,9 @@
           "load": {
             "type": "object",
             "properties": {
+              "path": {
+                "type": "string"
+              },
               "export": {
                 "type": "string"
               }

src/lib/json-ui/component-registry.ts

@@ -1,7 +1,6 @@
 import { ComponentType } from 'react'
 import * as PhosphorIcons from '@phosphor-icons/react'
 import jsonComponentsRegistry from '../../../json-components-registry.json'
-import { JSONUIShowcase } from '@/components/JSONUIShowcase'
 
 export interface UIComponentRegistry {
   [key: string]: ComponentType<any>
@@ -17,6 +16,7 @@ interface JsonRegistryEntry {
   wrapperComponent?: string
   wrapperFor?: string
   load?: {
+    path?: string
     export?: string
   }
   deprecated?: DeprecatedComponentInfo
@@ -99,35 +99,43 @@ const buildComponentMapFromModules = (
   }, {})
 }
 
-const atomComponentMap = buildComponentMapFromModules(moduleMapsBySource.atoms ?? {})
-const moleculeComponentMap = buildComponentMapFromModules(moduleMapsBySource.molecules ?? {})
-const organismComponentMap = buildComponentMapFromModules(moduleMapsBySource.organisms ?? {})
-const uiComponentMap = buildComponentMapFromModules(moduleMapsBySource.ui ?? {})
-const wrapperComponentMap = buildComponentMapFromModules(moduleMapsBySource.wrappers ?? {})
+const atomModules = import.meta.glob('@/components/atoms/*.tsx', { eager: true })
+const moleculeModules = import.meta.glob('@/components/molecules/*.tsx', { eager: true })
+const organismModules = import.meta.glob('@/components/organisms/*.tsx', { eager: true })
+const uiModules = import.meta.glob('@/components/ui/**/*.{ts,tsx}', { eager: true })
+const wrapperModules = import.meta.glob('@/lib/json-ui/wrappers/*.tsx', { eager: true })
+const explicitModules = import.meta.glob(
+  ['@/components/**/*.tsx', '@/lib/json-ui/wrappers/**/*.tsx'],
+  { eager: true }
+)
+
+const atomComponentMap = buildComponentMapFromModules(atomModules)
+const moleculeComponentMap = buildComponentMapFromModules(moleculeModules)
+const organismComponentMap = buildComponentMapFromModules(organismModules)
+const uiComponentMap = buildComponentMapFromModules(uiModules)
+const wrapperComponentMap = buildComponentMapFromModules(wrapperModules)
 const iconComponentMap = buildComponentMapFromExports(PhosphorIcons)
 
-const sourceAliases: Record<string, Record<string, string>> = {
-  atoms: {
-    PageHeader: 'BasicPageHeader',
-    SearchInput: 'BasicSearchInput',
-  },
-  molecules: {},
-  organisms: {},
-  ui: {
-    Chart: 'ChartContainer',
-    Resizable: 'ResizablePanelGroup',
-  },
-  wrappers: {},
-}
-
-const explicitComponentAllowlist: Record<string, ComponentType<any>> = {
-  JSONUIShowcase,
+const resolveComponentFromExplicitPath = (
+  entry: JsonRegistryEntry,
+  entryExportName: string
+): ComponentType<any> | undefined => {
+  if (!entry.load?.path) {
+    return undefined
+  }
+  const moduleExports = explicitModules[entry.load.path]
+  if (!moduleExports || typeof moduleExports !== 'object') {
+    return undefined
+  }
+  const explicitComponents = buildComponentMapFromExports(
+    moduleExports as Record<string, unknown>
+  )
+  return explicitComponents[entryExportName]
 }
 
 const buildRegistryFromEntries = (
   source: string,
-  componentMap: Record<string, ComponentType<any>>,
-  aliases: Record<string, string> = {}
+  componentMap: Record<string, ComponentType<any>>
 ): UIComponentRegistry => {
   return jsonRegistryEntries
     .filter((entry) => entry.source === source)
@@ -137,11 +145,9 @@ const buildRegistryFromEntries = (
       if (!entryKey || !entryExportName) {
         return registry
       }
-      const aliasName = aliases[entryKey]
       const component =
-        componentMap[entryExportName] ??
-        (aliasName ? componentMap[aliasName] : undefined) ??
-        explicitComponentAllowlist[entryKey]
+        resolveComponentFromExplicitPath(entry, entryExportName) ??
+        componentMap[entryExportName]
       if (component) {
         registry[entryKey] = component
       }
@@ -170,32 +176,27 @@ export const primitiveComponents: UIComponentRegistry = {
 
 export const shadcnComponents: UIComponentRegistry = buildRegistryFromEntries(
   'ui',
-  uiComponentMap,
-  sourceAliases.ui
+  uiComponentMap
 )
 
 export const atomComponents: UIComponentRegistry = buildRegistryFromEntries(
   'atoms',
-  atomComponentMap,
-  sourceAliases.atoms
+  atomComponentMap
 )
 
 export const moleculeComponents: UIComponentRegistry = buildRegistryFromEntries(
   'molecules',
-  moleculeComponentMap,
-  sourceAliases.molecules
+  moleculeComponentMap
 )
 
 export const organismComponents: UIComponentRegistry = buildRegistryFromEntries(
   'organisms',
-  organismComponentMap,
-  sourceAliases.organisms
+  organismComponentMap
 )
 
 export const jsonWrapperComponents: UIComponentRegistry = buildRegistryFromEntries(
   'wrappers',
-  wrapperComponentMap,
-  sourceAliases.wrappers
+  wrapperComponentMap
 )
 
 export const iconComponents: UIComponentRegistry = buildRegistryFromEntries(