@tanstack/create 0.61.6 → 0.62.0

package/src/frameworks/solid/project/base/src/components/Header.tsx.ejs

@@ -5,17 +5,17 @@ import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
 const icons = new Set([
   "Menu",
   "X",
-  "House",
   "Home",
   "Globe",
-  "ChevronDown",
-  "ChevronRight",
-  "Layers",
 ])
 
 for(const addOn of addOns) {
   for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) {
     icons.add( route.icon || "Globe");
+    if (route.children?.length) {
+      icons.add("ChevronDown")
+      icons.add("ChevronRight")
+    }
   }
 }
 %>
@@ -26,11 +26,13 @@ import {
 
 export default function Header() {
 <%
-const menusWithChildren = addOns.filter(a => a.routes?.some(r => r.children));
+const hasNestedRouteGroups = addOns.some(a => a.routes?.some(r => r.children?.length));
 const userHeaders = integrations.filter(i => i.type === 'header-user');
 %>
   const [isOpen, setIsOpen] = createSignal(false);
+  <% if (hasNestedRouteGroups) { %>
   const [groupedExpanded, setGroupedExpanded] = createSignal<Record<string, boolean>>({});
+  <% } %>
 
   return (
     <>
@@ -45,7 +47,7 @@ const userHeaders = integrations.filter(i => i.type === 'header-user');
         <h1 class="ml-4 text-xl font-semibold">
           <Link to="/">
             <img
-              src="/tanstack-word-logo-white.svg"
+              src="/logo192.png"
               alt="TanStack Logo"
               class="h-10"
             />

package/src/frameworks/solid/project/base/src/routes/__root.tsx.ejs

@@ -21,7 +21,7 @@ import { HeadContent, Outlet, Scripts, createRootRouteWithContext } from '@tanst
 import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
 
 <% if (addOnEnabled['solid-ui']) { %>
-import "@fontsource/inter"
+import "@fontsource/inter/400.css"
 <% } %>
 
 import { HydrationScript } from 'solid-js/web'

package/src/frameworks/solid/project/base/src/routes/index.tsx.ejs

@@ -47,7 +47,7 @@ function App() {
         <div class="relative max-w-5xl mx-auto">
           <div class="flex items-center justify-center gap-6 mb-6">
             <img
-              src="/tanstack-circle-logo.png"
+              src="/logo192.png"
               alt="TanStack Logo"
               class="w-24 h-24 md:w-32 md:h-32"
             />

package/src/frameworks.ts

@@ -155,6 +155,10 @@ export function registerFramework(framework: FrameworkDefinition) {
 }
 
 export function getFrameworkById(id: string) {
+  if (id === 'react-cra') {
+    return frameworks.find((framework) => framework.id === 'react')
+  }
+
   return frameworks.find((framework) => framework.id === id)
 }
 

package/src/package-json.ts

@@ -99,7 +99,7 @@ export function createPackageJSON(options: Options) {
   }
 
   if (options.routerOnly) {
-    if (options.framework.id === 'react-cra') {
+    if (options.framework.id === 'react') {
       delete packageJSON.dependencies?.['@tanstack/react-start']
       delete packageJSON.dependencies?.['@tanstack/react-router-ssr-query']
       packageJSON.devDependencies = {

package/src/registry.ts

@@ -6,6 +6,18 @@ import { handleSpecialURL } from './utils.js'
 import type { AddOn, Starter } from './types'
 
 const registrySchema = z.object({
+  templates: z
+    .array(
+      z.object({
+        name: z.string(),
+        description: z.string(),
+        url: z.string(),
+        banner: z.string().optional(),
+        mode: z.string(),
+        framework: z.string(),
+      }),
+    )
+    .optional(),
   starters: z
     .array(
       z.object({
@@ -49,15 +61,27 @@ export async function getRawRegistry(
     const url = handleSpecialURL(regUrl)
     const registry = (await fetch(url).then((res) => res.json())) as Registry
     const parsedRegistry = registrySchema.parse(registry)
+
+    if (!parsedRegistry.starters && parsedRegistry.templates) {
+      parsedRegistry.starters = parsedRegistry.templates
+    }
+
+    if (!parsedRegistry.templates && parsedRegistry.starters) {
+      parsedRegistry.templates = parsedRegistry.starters
+    }
+
     for (const addOn of parsedRegistry['add-ons'] || []) {
       addOn.url = absolutizeUrl(url, addOn.url)
     }
-    for (const starter of parsedRegistry.starters || []) {
-      starter.url = absolutizeUrl(url, starter.url)
-      if (starter.banner) {
-        starter.banner = absolutizeUrl(url, starter.banner)
+    for (const template of parsedRegistry.templates || []) {
+      template.url = absolutizeUrl(url, template.url)
+      if (template.banner) {
+        template.banner = absolutizeUrl(url, template.banner)
       }
     }
+
+    parsedRegistry.starters = parsedRegistry.templates
+
     return parsedRegistry
   }
 }

package/tests/add-ons.test.ts

@@ -8,7 +8,7 @@ describe('getAllAddOns', () => {
   it('filter add-ons', () => {
     const addOns = getAllAddOns(
       {
-        id: 'react-cra',
+        id: 'react',
         getAddOns: () => [
           {
             id: 'add-on-1',
@@ -32,7 +32,7 @@ describe('getAllAddOns', () => {
   it('should sort add-ons by priority (higher priority first)', () => {
     const addOns = getAllAddOns(
       {
-        id: 'react-cra',
+        id: 'react',
         getAddOns: () => [
           {
             id: 'low-priority',
@@ -72,7 +72,7 @@ describe('getAllAddOns', () => {
   it('should filter by mode and then sort by priority', () => {
     const addOns = getAllAddOns(
       {
-        id: 'react-cra',
+        id: 'react',
         getAddOns: () => [
           {
             id: 'file-router-low',
@@ -107,7 +107,7 @@ describe('finalizeAddOns', () => {
   it('should finalize add-ons', async () => {
     const addOns = await finalizeAddOns(
       {
-        id: 'react-cra',
+        id: 'react',
         getAddOns: () => [
           {
             id: 'add-on-1',

package/tests/config-file.test.ts

@@ -22,7 +22,7 @@ describe('writeConfigFile', () => {
     const targetDir = 'test-dir'
     const options = {
       framework: {
-        id: 'react-cra',
+        id: 'react',
         getAddOns: () => [],
       } as unknown as Framework,
       chosenAddOns: [
@@ -54,7 +54,7 @@ describe('readConfigFileFromEnvironment', () => {
     const targetDir = 'test-dir'
     const persistedOptions = {
       version: 1,
-      framework: 'react-cra',
+      framework: 'react',
       chosenAddOns: ['add-on-1'],
     }
     const { environment } = createMemoryEnvironment()
@@ -91,7 +91,7 @@ describe('readConfigFileFromEnvironment', () => {
     environment.finishRun()
 
     expect(config).toEqual({
-      framework: 'react-cra',
+      framework: 'react',
       projectName: 'foo',
       typescript: false,
       tailwind: false,

package/tests/custom-add-ons/starter.test.ts

@@ -1,7 +1,10 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { fs, vol } from 'memfs'
 
-import { readOrGenerateStarterInfo } from '../../src/custom-add-ons/starter.js'
+import {
+  loadStarter,
+  readOrGenerateStarterInfo,
+} from '../../src/custom-add-ons/starter.js'
 
 vi.mock('node:fs', () => fs)
 vi.mock('node:fs/promises', () => fs.promises)
@@ -23,7 +26,7 @@ describe('readOrGenerateStarterInfo', () => {
       git: true,
       chosenAddOns: [],
     })
-    expect(starterInfo.id).toEqual('test-starter')
+    expect(starterInfo.id).toEqual('test-template')
   })
 
   it('should read the starter info', async () => {
@@ -84,4 +87,33 @@ describe('readOrGenerateStarterInfo', () => {
     })
     expect(starterInfo.version).toEqual('0.0.1')
   })
+
+  it('should load a local template/starter file path', async () => {
+    fs.mkdirSync(process.cwd(), { recursive: true })
+    fs.writeFileSync(
+      './template.json',
+      JSON.stringify({
+        id: 'template-id',
+        name: 'Template Name',
+        version: '0.0.1',
+        description: 'template description',
+        author: 'Test Author',
+        license: 'MIT',
+        link: 'https://example.com/template',
+        type: 'starter',
+        framework: 'react',
+        mode: 'file-router',
+        typescript: true,
+        files: {
+          './package.json': '{}',
+        },
+        deletedFiles: [],
+      }),
+    )
+
+    const starter = await loadStarter('./template.json')
+
+    expect(starter.id).toEqual('./template.json')
+    await expect(starter.getFiles()).resolves.toEqual(['./package.json'])
+  })
 })

package/tests/frameworks.test.ts

@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { fs, vol } from 'memfs'
 
 import {
+  __testClearFrameworks,
   getFrameworks,
   getFrameworkById,
   getFrameworkByName,
@@ -13,6 +14,7 @@ vi.mock('node:fs/promises', () => fs.promises)
 
 beforeEach(() => {
   vol.reset()
+  __testClearFrameworks()
 })
 
 describe('registerFramework', () => {
@@ -60,4 +62,26 @@ describe('registerFramework', () => {
     expect(getFrameworkByName('test')).not.toBeUndefined()
     expect(getFrameworks().length).toEqual(1)
   })
+
+  it('should resolve legacy react-cra framework id', () => {
+    registerFramework({
+      id: 'react',
+      name: 'React',
+      addOns: [],
+      description: 'React',
+      version: '1.0.0',
+      base: {},
+      basePackageJSON: {},
+      optionalPackages: {},
+      supportedModes: {
+        'file-router': {
+          displayName: 'File Router',
+          description: 'File Router',
+          forceTypescript: true,
+        },
+      },
+    })
+
+    expect(getFrameworkById('react-cra')?.id).toBe('react')
+  })
 })

package/tests/options.test.ts

@@ -7,12 +7,12 @@ describe('createSerializedOptions', () => {
   it('handle no add-ons', () => {
     const options = createSerializedOptions({
       framework: {
-        id: 'react-cra',
+        id: 'react',
       } as Framework,
       chosenAddOns: [],
     } as unknown as Options)
     expect(options).toEqual({
-      framework: 'react-cra',
+      framework: 'react',
       chosenAddOns: [],
     })
   })
@@ -20,7 +20,7 @@ describe('createSerializedOptions', () => {
   it('handle add-ons and a starter', () => {
     const options = createSerializedOptions({
       framework: {
-        id: 'react-cra',
+        id: 'react',
       } as Framework,
       chosenAddOns: [
         {
@@ -34,7 +34,7 @@ describe('createSerializedOptions', () => {
       } as unknown as Starter,
     } as unknown as Options)
     expect(options).toEqual({
-      framework: 'react-cra',
+      framework: 'react',
       chosenAddOns: ['add-on-1'],
       starter: 'starter-1',
     })

package/tests/utils.test.ts

@@ -31,10 +31,10 @@ describe('handleSpecialURL', () => {
   it('should handle special URLs', () => {
     expect(
       handleSpecialURL(
-        'https://github.com/TanStack/create-tsrouter-app/blob/main/examples/react-cra/registry.json',
+        'https://github.com/TanStack/create-tsrouter-app/blob/main/examples/react/registry.json',
       ),
     ).toEqual(
-      'https://raw.githubusercontent.com/TanStack/create-tsrouter-app/refs/heads/main/examples/react-cra/registry.json',
+      'https://raw.githubusercontent.com/TanStack/create-tsrouter-app/refs/heads/main/examples/react/registry.json',
     )
 
     expect(