chore: strengthen registry support

Author: jherr

examples/react-cra/legend-state-add-on/.add-on/info.json

@@ -2,7 +2,7 @@
   "id": "legend-state-add-on-add-on",
   "name": "Legend State",
   "version": "0.0.1",
-  "description": "Add-on",
+  "description": "Legend State management for React",
   "author": "Jane Smith <jane.smith@example.com>",
   "license": "MIT",
   "link": "https://github.com/jane-smith/legend-state-add-on-add-on",

examples/react-cra/legend-state-add-on/add-on.json

@@ -2,7 +2,7 @@
   "id": "legend-state-add-on-add-on",
   "name": "Legend State",
   "version": "0.0.1",
-  "description": "Add-on",
+  "description": "Legend State management for React",
   "author": "Jane Smith <jane.smith@example.com>",
   "license": "MIT",
   "link": "https://github.com/jane-smith/legend-state-add-on-add-on",

examples/react-cra/mui-add-on/.add-on/info.json

@@ -1,8 +1,8 @@
 {
-  "id": "mui-add-on-add-on",
-  "name": "mui-add-on-add-on",
+  "id": "mui-add-on",
+  "name": "MUI",
   "version": "0.0.1",
-  "description": "Add-on",
+  "description": "Material UI components",
   "author": "Jane Smith <jane.smith@example.com>",
   "license": "MIT",
   "link": "https://github.com/jane-smith/mui-add-on-add-on",

examples/react-cra/mui-add-on/add-on.json

@@ -1,16 +1,14 @@
 {
-  "id": "mui-add-on-add-on",
-  "name": "mui-add-on-add-on",
+  "id": "mui-add-on",
+  "name": "MUI",
   "version": "0.0.1",
-  "description": "Add-on",
+  "description": "Material UI components",
   "author": "Jane Smith <jane.smith@example.com>",
   "license": "MIT",
   "link": "https://github.com/jane-smith/mui-add-on-add-on",
   "shadcnComponents": [],
   "framework": "react-cra",
-  "modes": [
-    "file-router"
-  ],
+  "modes": ["file-router"],
   "routes": [
     {
       "url": "/demo/mui",
@@ -45,4 +43,4 @@
     "./src/routes/demo.mui.tsx.ejs": "import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'\n\nimport Button from '@mui/material/Button'\nimport Box from '@mui/material/Box'\n\n<% if (codeRouter) { %>\nimport type { RootRoute } from '@tanstack/react-router'\n<% } else { %>\nexport const Route = createFileRoute('/demo/mui')({\n  component: MUIDemo,\n})\n<% } %>\n\nfunction MUIDemo() {\n  return (\n    <Box sx={{ px: 2, py: 4 }}>\n      <Button variant=\"contained\">Hello world</Button>\n    </Box>\n  )\n}\n\n<% if (codeRouter) { %>\nexport default (parentRoute: RootRoute) => createRoute({\n  path: '/demo/mui',\n  \n  component: MUIDemo,\n\n  getParentRoute: () => parentRoute,\n})\n<% } %>\n"
   },
   "deletedFiles": []
-}
+}

examples/react-cra/registry.json

@@ -4,31 +4,41 @@
       "name": "e-Commerce",
       "description": "A starter project for React with CRA",
       "url": "./ecommerce-starter/starter.json",
-      "banner": "./ecommerce-starter/.starter/banner.png"
+      "banner": "./ecommerce-starter/.starter/banner.png",
+      "modes": "file-router",
+      "framework": "react-cra"
     },
     {
       "name": "Blog",
       "description": "A blog starter for Tanstack React Start",
       "url": "./blog-starter/starter.json",
-      "banner": "./blog-starter/.starter/banner.png"
+      "banner": "./blog-starter/.starter/banner.png",
+      "modes": "file-router",
+      "framework": "react-cra"
     },
     {
       "name": "Resume",
       "description": "A resume starter for Tanstack React Start",
       "url": "./resume-starter/starter.json",
-      "banner": "./resume-starter/.starter/banner.png"
+      "banner": "./resume-starter/.starter/banner.png",
+      "modes": "file-router",
+      "framework": "react-cra"
     }
   ],
   "add-ons": [
     {
       "name": "Legend State",
       "description": "A Legend State add-on for Tanstack React Start",
-      "url": "./legend-state-add-on/add-on.json"
+      "url": "./legend-state-add-on/add-on.json",
+      "modes": ["code-router", "file-router"],
+      "framework": "react-cra"
     },
     {
       "name": "MUI",
       "description": "A MUI add-on for Tanstack React Start",
-      "url": "./mui-add-on/add-on.json"
+      "url": "./mui-add-on/add-on.json",
+      "modes": ["code-router", "file-router"],
+      "framework": "react-cra"
     }
   ]
 }

packages/cta-engine/src/index.ts

@@ -52,6 +52,13 @@ export {
 
 export { createSerializedOptions } from './options.js'
 
+export {
+  getRawRegistry,
+  getRegistry,
+  getRegistryAddOns,
+  getRegistryStarters,
+} from './registry.js'
+
 export {
   StarterCompiledSchema,
   StatusEvent,

packages/cta-engine/src/registry.ts

@@ -0,0 +1,92 @@
+import { loadRemoteAddOn } from './custom-add-ons/add-on.js'
+import { loadStarter } from './custom-add-ons/starter.js'
+
+import type { AddOn, Mode, Starter } from './types'
+
+export type Registry = {
+  starters: Array<{
+    name: string
+    description: string
+    url: string
+    banner?: string
+    mode: Mode
+    framework: string
+  }>
+  'add-ons': Array<{
+    name: string
+    description: string
+    url: string
+    modes: Array<Mode>
+    framework: string
+  }>
+}
+
+function absolutizeUrl(originalUrl: string, relativeUrl: string) {
+  if (relativeUrl.startsWith('http') || relativeUrl.startsWith('https')) {
+    return relativeUrl
+  }
+  const baseUrl = originalUrl.replace(/registry.json$/, '')
+  return `${baseUrl}${relativeUrl.replace(/^\.\//, '')}`
+}
+
+export async function getRawRegistry(
+  registryUrl?: string,
+): Promise<Registry | undefined> {
+  const regUrl = registryUrl || process.env.CTA_REGISTRY
+  if (regUrl) {
+    const registry = (await fetch(regUrl).then((res) => res.json())) as Registry
+    for (const addOn of registry['add-ons']) {
+      addOn.url = absolutizeUrl(regUrl, addOn.url)
+    }
+    for (const starter of registry.starters) {
+      starter.url = absolutizeUrl(regUrl, starter.url)
+      if (starter.banner) {
+        starter.banner = absolutizeUrl(regUrl, starter.banner)
+      }
+    }
+    return registry
+  }
+}
+
+async function getAddOns(registry: Registry): Promise<Array<AddOn>> {
+  const addOns: Array<AddOn> = []
+  for (const addOnInfo of registry['add-ons']) {
+    const addOn = await loadRemoteAddOn(addOnInfo.url)
+    addOns.push(addOn)
+  }
+  return addOns
+}
+
+export async function getRegistryAddOns(
+  registryUrl?: string,
+): Promise<Array<AddOn>> {
+  const registry = await getRawRegistry(registryUrl)
+  return registry ? await getAddOns(registry) : []
+}
+
+async function getStarters(registry: Registry): Promise<Array<Starter>> {
+  const starters: Array<Starter> = []
+  for (const starterInfo of registry.starters) {
+    const starter = await loadStarter(starterInfo.url)
+    starters.push(starter)
+  }
+  return starters
+}
+
+export async function getRegistryStarters(
+  registryUrl?: string,
+): Promise<Array<Starter>> {
+  const registry = await getRawRegistry(registryUrl)
+  return registry ? await getStarters(registry) : []
+}
+
+export async function getRegistry(registryUrl?: string): Promise<{
+  addOns: Array<AddOn>
+  starters: Array<Starter>
+}> {
+  const registry = await getRawRegistry(registryUrl)
+  return {
+    addOns: registry ? await getAddOns(registry) : [],
+    starters: registry ? await getStarters(registry) : [],
+  }
+}

packages/cta-ui/lib/engine-handling/generate-initial-payload.ts

@@ -4,6 +4,8 @@ import {
   createSerializedOptionsFromPersisted,
   getAllAddOns,
   getFrameworkById,
+  getRawRegistry,
+  getRegistryAddOns,
   readConfigFile,
   recursivelyGatherFiles,
 } from '@tanstack/cta-engine'
@@ -17,18 +19,24 @@ import {
   getForcedRouterMode,
   getProjectOptions,
   getProjectPath,
-  getRegistry,
+  getRegistry as getRegistryURL,
 } from './server-environment.js'
 
-import type { SerializedOptions } from '@tanstack/cta-engine'
-import type { Registry } from '../types.js'
+import type { AddOn, SerializedOptions } from '@tanstack/cta-engine'
+import type { AddOnInfo } from '../types.js'
 
-function absolutizeUrl(originalUrl: string, relativeUrl: string) {
-  if (relativeUrl.startsWith('http') || relativeUrl.startsWith('https')) {
-    return relativeUrl
+function convertAddOnToAddOnInfo(addOn: AddOn): AddOnInfo {
+  return {
+    id: addOn.id,
+    name: addOn.name,
+    description: addOn.description,
+    modes: addOn.modes as Array<'code-router' | 'file-router'>,
+    type: addOn.type,
+    smallLogo: addOn.smallLogo,
+    logo: addOn.logo,
+    link: addOn.link!,
+    dependsOn: addOn.dependsOn,
   }
-  const baseUrl = originalUrl.replace(/registry.json$/, '')
-  return `${baseUrl}${relativeUrl.replace(/^\.\//, '')}`
 }
 
 export async function generateInitialPayload() {
@@ -68,20 +76,8 @@ export async function generateInitialPayload() {
     }
   }
 
-  const registryUrl = getRegistry()
-  let registry: Registry | undefined
-  if (registryUrl) {
-    registry = (await fetch(registryUrl).then((res) => res.json())) as Registry
-    for (const addOn of registry['add-ons']) {
-      addOn.url = absolutizeUrl(registryUrl, addOn.url)
-    }
-    for (const starter of registry.starters) {
-      starter.url = absolutizeUrl(registryUrl, starter.url)
-      if (starter.banner) {
-        starter.banner = absolutizeUrl(registryUrl, starter.banner)
-      }
-    }
-  }
+  const rawRegistry = await getRawRegistry(getRegistryURL())
+  const registryAddOns = await getRegistryAddOns(getRegistryURL())
 
   const serializedOptions = await getSerializedOptions()
 
@@ -91,39 +87,46 @@ export async function generateInitialPayload() {
 
   const framework = await getFrameworkById(serializedOptions.framework)
 
-  const codeRouter = getAllAddOns(framework!, 'code-router').map((addOn) => ({
-    id: addOn.id,
-    name: addOn.name,
-    description: addOn.description,
-    type: addOn.type,
-    smallLogo: addOn.smallLogo,
-    logo: addOn.logo,
-    link: addOn.link,
-    dependsOn: addOn.dependsOn,
-  }))
+  const codeRouterAddOns = getAllAddOns(framework!, 'code-router').map(
+    convertAddOnToAddOnInfo,
+  )
+
+  const fileRouterAddOns = getAllAddOns(framework!, 'file-router').map(
+    convertAddOnToAddOnInfo,
+  )
+
+  for (const addOnInfo of registryAddOns || []) {
+    const addOnFramework = rawRegistry?.['add-ons'].find(
+      (addOn) => addOn.url === addOnInfo.id,
+    )
+    if (addOnFramework?.framework === serializedOptions.framework) {
+      if (addOnInfo.modes.includes('code-router')) {
+        codeRouterAddOns.push(convertAddOnToAddOnInfo(addOnInfo))
+      }
+      if (addOnInfo.modes.includes('file-router')) {
+        fileRouterAddOns.push(convertAddOnToAddOnInfo(addOnInfo))
+      }
+    }
+  }
 
-  const fileRouter = getAllAddOns(framework!, 'file-router').map((addOn) => ({
-    id: addOn.id,
-    name: addOn.name,
-    description: addOn.description,
-    type: addOn.type,
-    smallLogo: addOn.smallLogo,
-    logo: addOn.logo,
-    link: addOn.link,
-    dependsOn: addOn.dependsOn,
-  }))
+  const serializedRegistry = {
+    ['add-ons']: [],
+    starters: (rawRegistry?.starters || []).filter(
+      (starter) => starter.framework === serializedOptions.framework,
+    ),
+  }
 
   return {
     applicationMode,
     localFiles,
     addOns: {
-      'code-router': codeRouter,
-      'file-router': fileRouter,
+      'code-router': codeRouterAddOns,
+      'file-router': fileRouterAddOns,
     },
     options: serializedOptions,
     output,
     forcedRouterMode,
     forcedAddOns: getForcedAddOns(),
-    registry,
+    registry: serializedRegistry,
   }
 }

packages/cta-ui/lib/types.d.ts

@@ -1,17 +1,3 @@
-export type Registry = {
-  starters: Array<{
-    name: string
-    description: string
-    url: string
-    banner?: string
-  }>
-  'add-ons': Array<{
-    name: string
-    description: string
-    url: string
-  }>
-}
-
 export type DryRunOutput = {
   files: Record<string, string>
   commands: Array<{
@@ -20,3 +6,15 @@ export type DryRunOutput = {
   }>
   deletedFiles: Array<string>
 }
+
+export type AddOnInfo = {
+  id: string
+  name: string
+  description: string
+  type: 'add-on' | 'example' | 'starter' | 'toolchain'
+  modes: Array<'code-router' | 'file-router'>
+  smallLogo?: string
+  logo?: string
+  link: string
+  dependsOn?: Array<string>
+}