@tanstack/create 0.61.5 → 0.62.0

package/dist/frameworks/react/project/base/src/styles.css.ejs

@@ -1,15 +1,277 @@
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap");
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@theme {
+  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
+}
+
+:root {
+  --sea-ink: #173a40;
+  --sea-ink-soft: #416166;
+  --lagoon: #4fb8b2;
+  --lagoon-deep: #328f97;
+  --palm: #2f6a4a;
+  --sand: #e7f0e8;
+  --foam: #f3faf5;
+  --surface: rgba(255, 255, 255, 0.74);
+  --surface-strong: rgba(255, 255, 255, 0.9);
+  --line: rgba(23, 58, 64, 0.14);
+  --inset-glint: rgba(255, 255, 255, 0.82);
+  --kicker: rgba(47, 106, 74, 0.9);
+  --bg-base: #e7f3ec;
+  --header-bg: rgba(251, 255, 248, 0.84);
+  --chip-bg: rgba(255, 255, 255, 0.8);
+  --chip-line: rgba(47, 106, 74, 0.18);
+  --link-bg-hover: rgba(255, 255, 255, 0.9);
+  --hero-a: rgba(79, 184, 178, 0.36);
+  --hero-b: rgba(47, 106, 74, 0.2);
+}
+
+:root[data-theme="dark"] {
+  --sea-ink: #d7ece8;
+  --sea-ink-soft: #afcdc8;
+  --lagoon: #60d7cf;
+  --lagoon-deep: #8de5db;
+  --palm: #6ec89a;
+  --sand: #0f1a1e;
+  --foam: #101d22;
+  --surface: rgba(16, 30, 34, 0.8);
+  --surface-strong: rgba(15, 27, 31, 0.92);
+  --line: rgba(141, 229, 219, 0.18);
+  --inset-glint: rgba(194, 247, 238, 0.14);
+  --kicker: #b8efe5;
+  --bg-base: #0a1418;
+  --header-bg: rgba(10, 20, 24, 0.8);
+  --chip-bg: rgba(13, 28, 32, 0.9);
+  --chip-line: rgba(141, 229, 219, 0.24);
+  --link-bg-hover: rgba(24, 44, 49, 0.8);
+  --hero-a: rgba(96, 215, 207, 0.18);
+  --hero-b: rgba(110, 200, 154, 0.12);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --sea-ink: #d7ece8;
+    --sea-ink-soft: #afcdc8;
+    --lagoon: #60d7cf;
+    --lagoon-deep: #8de5db;
+    --palm: #6ec89a;
+    --sand: #0f1a1e;
+    --foam: #101d22;
+    --surface: rgba(16, 30, 34, 0.8);
+    --surface-strong: rgba(15, 27, 31, 0.92);
+    --line: rgba(141, 229, 219, 0.18);
+    --inset-glint: rgba(194, 247, 238, 0.14);
+    --kicker: #b8efe5;
+    --bg-base: #0a1418;
+    --header-bg: rgba(10, 20, 24, 0.8);
+    --chip-bg: rgba(13, 28, 32, 0.9);
+    --chip-line: rgba(141, 229, 219, 0.24);
+    --link-bg-hover: rgba(24, 44, 49, 0.8);
+    --hero-a: rgba(96, 215, 207, 0.18);
+    --hero-b: rgba(110, 200, 154, 0.12);
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
+}
 
 body {
-  @apply m-0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  margin: 0;
+  color: var(--sea-ink);
+  font-family: var(--font-sans);
+  background-color: var(--bg-base);
+  background:
+    radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%),
+    radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%),
+    radial-gradient(720px 380px at 50% 115%, rgba(79, 184, 178, 0.1), transparent 68%),
+    linear-gradient(180deg, color-mix(in oklab, var(--sand) 68%, white) 0%, var(--foam) 44%, var(--bg-base) 100%);
+  overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+  opacity: 0.28;
+  background:
+    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.8), transparent 34%),
+    radial-gradient(circle at 78% 26%, rgba(79, 184, 178, 0.2), transparent 42%),
+    radial-gradient(circle at 42% 82%, rgba(47, 106, 74, 0.14), transparent 36%);
+}
+
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+  opacity: 0.14;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
+  background-size: 28px 28px;
+  mask-image: radial-gradient(circle at 50% 30%, black, transparent 78%);
+}
+
+a {
+  color: var(--lagoon-deep);
+  text-decoration-color: rgba(50, 143, 151, 0.4);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+a:hover {
+  color: #246f76;
+}
+
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-size: 0.9em;
+  border: 1px solid var(--line);
+  background: color-mix(in oklab, var(--surface-strong) 82%, white 18%);
+  border-radius: 7px;
+  padding: 2px 7px;
+}
+
+pre code {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+  color: inherit;
+}
+
+.prose pre {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: #1d2e45;
+  color: #e8efff;
+  overflow-x: auto;
+}
+
+.prose {
+  overflow-wrap: anywhere;
+}
+
+.prose table {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+}
+
+.page-wrap {
+  width: min(1080px, calc(100% - 2rem));
+  margin-inline: auto;
+}
+
+.display-title {
+  font-family: "Fraunces", Georgia, serif;
+}
+
+.island-shell {
+  border: 1px solid var(--line);
+  background: linear-gradient(165deg, var(--surface-strong), var(--surface));
+  box-shadow:
+    0 1px 0 var(--inset-glint) inset,
+    0 22px 44px rgba(30, 90, 72, 0.1),
+    0 6px 18px rgba(23, 58, 64, 0.08);
+  backdrop-filter: blur(4px);
+}
+
+.feature-card {
+  background: linear-gradient(165deg, color-mix(in oklab, var(--surface-strong) 93%, white 7%), var(--surface));
+  box-shadow:
+    0 1px 0 var(--inset-glint) inset,
+    0 18px 34px rgba(30, 90, 72, 0.1),
+    0 4px 14px rgba(23, 58, 64, 0.06);
+}
+
+.feature-card:hover {
+  transform: translateY(-2px);
+  border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line));
+}
+
+button,
+.island-shell,
+a {
+  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,
+    transform 180ms ease;
+}
+
+.island-kicker {
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 0.69rem;
+  color: var(--kicker);
+}
+
+.nav-link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--sea-ink-soft);
+}
+
+.nav-link::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -6px;
+  width: 100%;
+  height: 2px;
+  transform: scaleX(0);
+  transform-origin: left;
+  background: linear-gradient(90deg, var(--lagoon), #7ed3bf);
+  transition: transform 170ms ease;
+}
+
+.nav-link:hover,
+.nav-link.is-active {
+  color: var(--sea-ink);
+}
+
+.nav-link:hover::after,
+.nav-link.is-active::after {
+  transform: scaleX(1);
+}
+
+@media (max-width: 640px) {
+  .nav-link::after {
+    bottom: -4px;
+  }
+}
+
+.site-footer {
+  border-top: 1px solid var(--line);
+  background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%);
+}
+
+.rise-in {
+  animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes rise-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }

package/dist/frameworks/react/project/base/tsconfig.json.ejs

@@ -7,6 +7,8 @@
     "module": "ESNext",
     "baseUrl": ".",
     "paths": {
+      "#/*": ["./src/*"],
+      "content-collections": ["./.content-collections/generated"],
       "@/*": ["./src/*"]
     },
     "lib": ["ES2022", "DOM", "DOM.Iterable"],

package/dist/frameworks/react/project/base/vite.config.ts.ejs

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import { devtools } from '@tanstack/devtools-vite'
+import contentCollections from '@content-collections/vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
 <% if (addOnEnabled.paraglide) { -%>
 import { paraglideVitePlugin } from "@inlang/paraglide-js"
@@ -20,6 +21,7 @@ const config = defineConfig({
     outdir: './src/paraglide',
     strategy: ['url', "baseLocale"],
   }), <% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
+    contentCollections(),
     tsconfigPaths({ projects: ['./tsconfig.json'] }),
     tailwindcss(),
     <% if (routerOnly) { %>tanstackRouter({ target: 'react', autoCodeSplitting: true }),<% } else { %>tanstackStart(),<% } %>

package/dist/frameworks/solid/add-ons/store/assets/src/lib/demo-store.ts

@@ -1,13 +1,12 @@
-import { Derived, Store } from '@tanstack/store'
+import { Store } from '@tanstack/store'
 
 export const store = new Store({
   firstName: 'Jane',
   lastName: 'Smith',
 })
 
-export const fullName = new Derived({
-  fn: () => `${store.state.firstName} ${store.state.lastName}`,
-  deps: [store],
-})
+export const fullName = new Store(`${store.state.firstName} ${store.state.lastName}`)
 
-fullName.mount()
+store.subscribe(() => {
+  fullName.setState(() => `${store.state.firstName} ${store.state.lastName}`)
+})

package/dist/frameworks/solid/add-ons/store/assets/src/routes/demo.store.tsx.ejs

@@ -43,7 +43,7 @@ function FullName() {
   const fName = useStore(fullName)
   return (
     <div class="bg-white/10 rounded-lg px-4 py-2 outline-none ">
-      {fName}
+      {fName()}
     </div>
   )
 }
@@ -74,4 +74,4 @@ export default (parentRoute: RootRoute) => createRoute({
   getParentRoute: () => parentRoute,
 })
 <% } %>
-    
+    

package/dist/frameworks/solid/examples/tanchat/assets/src/lib/demo-store.ts

@@ -1,13 +1,12 @@
-import { Derived, Store } from '@tanstack/store'
+import { Store } from '@tanstack/store'
 
 export const store = new Store({
   firstName: 'Jane',
   lastName: 'Smith',
 })
 
-export const fullName = new Derived({
-  fn: () => `${store.state.firstName} ${store.state.lastName}`,
-  deps: [store],
-})
+export const fullName = new Store(`${store.state.firstName} ${store.state.lastName}`)
 
-fullName.mount()
+store.subscribe(() => {
+  fullName.setState(() => `${store.state.firstName} ${store.state.lastName}`)
+})

package/dist/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/dist/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/dist/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/dist/frameworks.js

@@ -104,6 +104,9 @@ export function registerFramework(framework) {
     frameworks.push(frameworkWithBundler);
 }
 export function getFrameworkById(id) {
+    if (id === 'react-cra') {
+        return frameworks.find((framework) => framework.id === 'react');
+    }
     return frameworks.find((framework) => framework.id === id);
 }
 export function getFrameworkByName(name) {

package/dist/package-json.js

@@ -73,7 +73,7 @@ export function createPackageJSON(options) {
         packageJSON = mergePackageJSON(packageJSON, options.starter.packageAdditions);
     }
     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/dist/registry.js

@@ -3,6 +3,16 @@ import { loadRemoteAddOn } from './custom-add-ons/add-on.js';
 import { loadStarter } from './custom-add-ons/starter.js';
 import { handleSpecialURL } from './utils.js';
 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({
         name: z.string(),
@@ -36,15 +46,22 @@ export async function getRawRegistry(registryUrl) {
         const url = handleSpecialURL(regUrl);
         const registry = (await fetch(url).then((res) => res.json()));
         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/dist/types/registry.d.ts

@@ -1,6 +1,28 @@
 import { z } from 'zod';
 import type { AddOn, Starter } from './types';
 declare const registrySchema: z.ZodObject<{
+    templates: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        description: z.ZodString;
+        url: z.ZodString;
+        banner: z.ZodOptional<z.ZodString>;
+        mode: z.ZodString;
+        framework: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        description: string;
+        name: string;
+        url: string;
+        framework: string;
+        mode: string;
+        banner?: string | undefined;
+    }, {
+        description: string;
+        name: string;
+        url: string;
+        framework: string;
+        mode: string;
+        banner?: string | undefined;
+    }>, "many">>;
     starters: z.ZodOptional<z.ZodArray<z.ZodObject<{
         name: z.ZodString;
         description: z.ZodString;
@@ -50,6 +72,14 @@ declare const registrySchema: z.ZodObject<{
         framework: string;
         modes: string[];
     }[] | undefined;
+    templates?: {
+        description: string;
+        name: string;
+        url: string;
+        framework: string;
+        mode: string;
+        banner?: string | undefined;
+    }[] | undefined;
     starters?: {
         description: string;
         name: string;
@@ -66,6 +96,14 @@ declare const registrySchema: z.ZodObject<{
         framework: string;
         modes: string[];
     }[] | undefined;
+    templates?: {
+        description: string;
+        name: string;
+        url: string;
+        framework: string;
+        mode: string;
+        banner?: string | undefined;
+    }[] | undefined;
     starters?: {
         description: string;
         name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/create",
-  "version": "0.61.5",
+  "version": "0.62.0",
   "description": "TanStack Application Builder Engine",
   "type": "module",
   "main": "./dist/index.js",

package/src/config-file.ts

@@ -50,8 +50,8 @@ export async function readConfigFileFromEnvironment(
 
     // Look for markers out outdated config files and upgrade the format on the fly (it will be written in the updated version after we add add-ons)
     if (originalJSON.existingAddOns) {
-      if (originalJSON.framework === 'react') {
-        originalJSON.framework = 'react-cra'
+      if (originalJSON.framework === 'react-cra') {
+        originalJSON.framework = 'react'
       }
       originalJSON.chosenAddOns = originalJSON.existingAddOns
       delete originalJSON.existingAddOns
@@ -63,6 +63,10 @@ export async function readConfigFileFromEnvironment(
       delete originalJSON.variableValues
     }
 
+    if (originalJSON.framework === 'react-cra') {
+      originalJSON.framework = 'react'
+    }
+
     return originalJSON
   } catch {
     return null

package/src/custom-add-ons/starter.ts

@@ -21,22 +21,26 @@ import type {
   StarterInfo,
 } from '../types'
 
-const INFO_FILE = 'starter-info.json'
-const COMPILED_FILE = 'starter.json'
+const INFO_FILE = 'template-info.json'
+const LEGACY_INFO_FILE = 'starter-info.json'
+const COMPILED_FILE = 'template.json'
+const LEGACY_COMPILED_FILE = 'starter.json'
 
 export async function readOrGenerateStarterInfo(
   options: PersistedOptions,
 ): Promise<StarterInfo> {
   const info = existsSync(INFO_FILE)
     ? JSON.parse((await readFile(INFO_FILE)).toString())
+    : existsSync(LEGACY_INFO_FILE)
+      ? JSON.parse((await readFile(LEGACY_INFO_FILE)).toString())
     : {
-        id: `${options.projectName}-starter`,
-        name: `${options.projectName}-starter`,
+        id: `${options.projectName}-template`,
+        name: `${options.projectName} Template`,
         version: '0.0.1',
-        description: 'Project starter',
+        description: 'Project template',
         author: 'Jane Smith <jane.smith@example.com>',
         license: 'MIT',
-        link: `https://github.com/jane-smith/${options.projectName}-starter`,
+        link: `https://github.com/jane-smith/${options.projectName}-template`,
         shadcnComponents: [],
         framework: options.framework,
         mode: options.mode!,
@@ -75,12 +79,19 @@ async function loadCurrentStarterInfo(environment: Environment) {
 export async function updateStarterInfo(environment: Environment) {
   const { info, output } = await loadCurrentStarterInfo(environment)
 
+  const generatedPackageJson =
+    output.files['./package.json'] ?? output.files['package.json']
+  if (!generatedPackageJson) {
+    throw new Error('Unable to find generated package.json in template output')
+  }
+
   info.packageAdditions = createPackageAdditions(
-    JSON.parse(output.files['./package.json']),
+    JSON.parse(generatedPackageJson),
     JSON.parse((await readFile('package.json')).toString()),
   )
 
   writeFileSync(INFO_FILE, JSON.stringify(info, null, 2))
+  writeFileSync(LEGACY_INFO_FILE, JSON.stringify(info, null, 2))
 }
 
 export async function compileStarter(environment: Environment) {
@@ -104,6 +115,7 @@ export async function compileStarter(environment: Environment) {
   }
 
   writeFileSync(COMPILED_FILE, JSON.stringify(compiledInfo, null, 2))
+  writeFileSync(LEGACY_COMPILED_FILE, JSON.stringify(compiledInfo, null, 2))
 }
 
 export async function initStarter(environment: Environment) {
@@ -112,8 +124,16 @@ export async function initStarter(environment: Environment) {
 }
 
 export async function loadStarter(url: string): Promise<Starter> {
-  const response = await fetch(url)
-  const jsonContent = await response.json()
+  const absoluteLocalPath = resolve(process.cwd(), url)
+  const localPath = existsSync(url)
+    ? url
+    : existsSync(absoluteLocalPath)
+      ? absoluteLocalPath
+      : undefined
+
+  const jsonContent = localPath
+    ? JSON.parse((await readFile(localPath)).toString())
+    : await (await fetch(url)).json()
 
   const checked = StarterCompiledSchema.safeParse(jsonContent)
   if (!checked.success) {
@@ -121,7 +141,7 @@ export async function loadStarter(url: string): Promise<Starter> {
   }
 
   const starter = checked.data
-  starter.id = url
+  starter.id = localPath ?? url
   return {
     ...starter,
     getFiles: () => Promise.resolve(Object.keys(starter.files)),

package/src/file-helpers.ts

@@ -209,6 +209,7 @@ export async function recursivelyGatherFilesFromEnvironment(
 
 export const IGNORE_FILES = [
   '.starter',
+  '.template',
   '.add-on',
   '.cta.json',
   '.git',