fix: more fixes for the registry, starters and add-ons

Author: jherr

packages/cta-engine/src/index.ts

@@ -41,7 +41,7 @@ export {
   relativePath,
 } from './file-helpers.js'
 
-export { formatCommand } from './utils.js'
+export { formatCommand, handleSpecialURL } from './utils.js'
 
 export { initStarter, compileStarter } from './custom-add-ons/starter.js'
 export { initAddOn, compileAddOn } from './custom-add-ons/add-on.js'

packages/cta-engine/src/registry.ts

@@ -1,6 +1,7 @@
 import { z } from 'zod'
 import { loadRemoteAddOn } from './custom-add-ons/add-on.js'
 import { loadStarter } from './custom-add-ons/starter.js'
+import { handleSpecialURL } from './utils.js'
 
 import type { AddOn, Starter } from './types'
 
@@ -45,15 +46,16 @@ export async function getRawRegistry(
 ): Promise<Registry | undefined> {
   const regUrl = registryUrl || process.env.CTA_REGISTRY
   if (regUrl) {
-    const registry = (await fetch(regUrl).then((res) => res.json())) as Registry
+    const url = handleSpecialURL(regUrl)
+    const registry = (await fetch(url).then((res) => res.json())) as Registry
     const parsedRegistry = registrySchema.parse(registry)
     for (const addOn of parsedRegistry['add-ons'] || []) {
-      addOn.url = absolutizeUrl(regUrl, addOn.url)
+      addOn.url = absolutizeUrl(url, addOn.url)
     }
     for (const starter of parsedRegistry.starters || []) {
-      starter.url = absolutizeUrl(regUrl, starter.url)
+      starter.url = absolutizeUrl(url, starter.url)
       if (starter.banner) {
-        starter.banner = absolutizeUrl(regUrl, starter.banner)
+        starter.banner = absolutizeUrl(url, starter.banner)
       }
     }
     return parsedRegistry

packages/cta-engine/src/utils.ts

@@ -25,3 +25,18 @@ export function formatCommand({
 }) {
   return `${command} ${args.join(' ')}`.trim()
 }
+
+// Turn GitHub URLs into raw URLs
+export function handleSpecialURL(url: string) {
+  if (url.startsWith('https://github.com/') && url.includes('blob')) {
+    return url
+      .replace('https://github.com/', 'https://raw.githubusercontent.com/')
+      .replace('/blob/', '/refs/heads/')
+  }
+  if (url.startsWith('https://github.com/') && url.includes('tree')) {
+    return url
+      .replace('https://github.com/', 'https://raw.githubusercontent.com/')
+      .replace('/tree/', '/refs/heads/')
+  }
+  return url
+}

packages/cta-engine/tests/utils.test.ts

@@ -1,6 +1,11 @@
 import { describe, expect, it } from 'vitest'
 
-import { formatCommand, jsSafeName, sortObject } from '../src/utils.js'
+import {
+  formatCommand,
+  handleSpecialURL,
+  jsSafeName,
+  sortObject,
+} from '../src/utils.js'
 
 describe('formatCommand', () => {
   it('should format a command', () => {
@@ -21,3 +26,23 @@ describe('sortObject', () => {
     expect(sortObject({ b: 'b', a: 'a' })).toEqual({ a: 'a', b: 'b' })
   })
 })
+
+describe('handleSpecialURL', () => {
+  it('should handle special URLs', () => {
+    expect(
+      handleSpecialURL(
+        'https://github.com/TanStack/create-tsrouter-app/blob/main/examples/react-cra/registry.json',
+      ),
+    ).toEqual(
+      'https://raw.githubusercontent.com/TanStack/create-tsrouter-app/refs/heads/main/examples/react-cra/registry.json',
+    )
+
+    expect(
+      handleSpecialURL(
+        'https://github.com/TanStack/create-tsrouter-app/tree/alpha/packages/cta-cli/tsconfig.json',
+      ),
+    ).toEqual(
+      'https://raw.githubusercontent.com/TanStack/create-tsrouter-app/refs/heads/alpha/packages/cta-cli/tsconfig.json',
+    )
+  })
+})

packages/cta-ui/lib/index.ts

@@ -7,6 +7,7 @@ import chalk from 'chalk'
 import {
   AddOnCompiledSchema,
   StarterCompiledSchema,
+  handleSpecialURL,
 } from '@tanstack/cta-engine'
 
 import { addToAppWrapper } from './engine-handling/add-to-app-wrapper.js'
@@ -81,14 +82,15 @@ export function launchUI(
       return
     }
     try {
-      const response = await fetch(url as string)
+      const fixedUrl = handleSpecialURL(url as string)
+      const response = await fetch(fixedUrl)
       const data = await response.json()
       const parsed = AddOnCompiledSchema.safeParse(data)
       if (!parsed.success) {
         res.status(400).json({ error: 'Invalid add-on data' })
       } else {
         res.json({
-          id: url,
+          id: fixedUrl,
           name: parsed.data.name,
           description: parsed.data.description,
           version: parsed.data.version,
@@ -113,14 +115,15 @@ export function launchUI(
       return
     }
     try {
-      const response = await fetch(url as string)
+      const fixedUrl = handleSpecialURL(url as string)
+      const response = await fetch(fixedUrl)
       const data = await response.json()
       const parsed = StarterCompiledSchema.safeParse(data)
       if (!parsed.success) {
         res.status(400).json({ error: 'Invalid starter data' })
       } else {
         res.json({
-          url,
+          url: fixedUrl,
           id: parsed.data.id,
           name: parsed.data.name,
           description: parsed.data.description,
@@ -132,7 +135,7 @@ export function launchUI(
           typescript: parsed.data.typescript,
           tailwind: parsed.data.tailwind,
           banner: parsed.data.banner
-            ? (url as string).replace('starter.json', parsed.data.banner)
+            ? fixedUrl.replace('starter.json', parsed.data.banner)
             : undefined,
         })
       }

packages/cta-ui/src/components/custom-add-on-dialog.tsx

@@ -51,7 +51,7 @@ export default function CustomAddOnDialog() {
         <TicketPlusIcon className="w-4 h-4" />
         Import Custom Add-On
       </Button>
-      <Dialog modal open={open}>
+      <Dialog modal open={open} onOpenChange={setOpen}>
         <DialogContent className="sm:min-w-[425px] sm:max-w-fit">
           <DialogHeader>
             <DialogTitle>Import Custom Add-On</DialogTitle>

packages/cta-ui/src/components/sidebar-items/starter.tsx

@@ -96,7 +96,7 @@ export default function Starter() {
             </DialogHeader>
             {registry?.starters && (
               <div>
-                <StartersCarousel onImport={onImport} />
+                <StartersCarousel onImport={(url) => onImport(url)} />
               </div>
             )}
             <div>
@@ -113,7 +113,7 @@ export default function Starter() {
               />
             </div>
             <DialogFooter>
-              <Button onClick={onImport}>Load</Button>
+              <Button onClick={() => onImport()}>Load</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>