@tanstack/create 0.61.5 → 0.62.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @tanstack/create
 
+## 0.62.0
+
+### Minor Changes
+
+- This release pulls together a large batch of improvements across the CLI and scaffolding engine since the last versioning pass. ([`154b25e`](https://github.com/TanStack/cli/commit/154b25eec9a13b9718c44cbed6cb3c8566f2fb11))
+
+  - Modernizes and refreshes the generated React/Solid template experience, including updated starter content and stronger defaults.
+  - Improves create flows with better option normalization, stronger guardrails around target directories, and clearer compatibility behavior in router-only mode.
+  - Expands scaffolding ergonomics with examples toggles, improved add-on/config handling, and reliability fixes across package-manager and cross-platform paths.
+  - Strengthens test and release confidence via e2e/release workflow hardening and broader smoke coverage.
+  - Streamlines product surface area by removing the local `create-ui` package and `--ui` command paths from the CLI; visual setup now lives at `https://tanstack.com/builder`.
+  - Cleans up docs and custom CLI examples to match the current terminal-first workflow and Builder guidance.
+
+## 0.61.6
+
+### Patch Changes
+
+- Improve the Strapi add-on scaffolding for reliability. ([#323](https://github.com/TanStack/cli/pull/323))
+
+  - Remove brittle post-create shell automation that attempted to clone and bootstrap a sibling Strapi server.
+  - Fix Strapi article detail routing to use a consistent file-based route path.
+  - Update Strapi add-on guidance to document manual/hosted Strapi setup expectations.
+
 ## 0.61.5
 
 ### Patch Changes

package/dist/config-file.js

@@ -23,8 +23,8 @@ export async function readConfigFileFromEnvironment(environment, targetDir) {
         const originalJSON = JSON.parse(config);
         // 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;
@@ -35,6 +35,9 @@ export async function readConfigFileFromEnvironment(environment, targetDir) {
             delete originalJSON.toolchain;
             delete originalJSON.variableValues;
         }
+        if (originalJSON.framework === 'react-cra') {
+            originalJSON.framework = 'react';
+        }
         return originalJSON;
     }
     catch {

package/dist/custom-add-ons/starter.js

@@ -4,33 +4,37 @@ import { resolve } from 'node:path';
 import { StarterCompiledSchema } from '../types.js';
 import { createIgnore } from '../file-helpers.js';
 import { compareFilesRecursively, createAppOptionsFromPersisted, createPackageAdditions, readCurrentProjectOptions, runCreateApp, } from './shared.js';
-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) {
     const info = existsSync(INFO_FILE)
         ? JSON.parse((await readFile(INFO_FILE)).toString())
-        : {
-            id: `${options.projectName}-starter`,
-            name: `${options.projectName}-starter`,
-            version: '0.0.1',
-            description: 'Project starter',
-            author: 'Jane Smith <jane.smith@example.com>',
-            license: 'MIT',
-            link: `https://github.com/jane-smith/${options.projectName}-starter`,
-            shadcnComponents: [],
-            framework: options.framework,
-            mode: options.mode,
-            routes: [],
-            warning: '',
-            type: 'starter',
-            packageAdditions: {
-                scripts: {},
-                dependencies: {},
-                devDependencies: {},
-            },
-            dependsOn: options.chosenAddOns,
-            typescript: true,
-        };
+        : existsSync(LEGACY_INFO_FILE)
+            ? JSON.parse((await readFile(LEGACY_INFO_FILE)).toString())
+            : {
+                id: `${options.projectName}-template`,
+                name: `${options.projectName} Template`,
+                version: '0.0.1',
+                description: 'Project template',
+                author: 'Jane Smith <jane.smith@example.com>',
+                license: 'MIT',
+                link: `https://github.com/jane-smith/${options.projectName}-template`,
+                shadcnComponents: [],
+                framework: options.framework,
+                mode: options.mode,
+                routes: [],
+                warning: '',
+                type: 'starter',
+                packageAdditions: {
+                    scripts: {},
+                    dependencies: {},
+                    devDependencies: {},
+                },
+                dependsOn: options.chosenAddOns,
+                typescript: true,
+            };
     if (!info.version) {
         info.version = '0.0.1';
     }
@@ -44,8 +48,13 @@ async function loadCurrentStarterInfo(environment) {
 }
 export async function updateStarterInfo(environment) {
     const { info, output } = await loadCurrentStarterInfo(environment);
-    info.packageAdditions = createPackageAdditions(JSON.parse(output.files['./package.json']), JSON.parse((await readFile('package.json')).toString()));
+    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(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) {
     const { info, output } = await loadCurrentStarterInfo(environment);
@@ -64,20 +73,28 @@ export async function compileStarter(environment) {
         deletedFiles,
     };
     writeFileSync(COMPILED_FILE, JSON.stringify(compiledInfo, null, 2));
+    writeFileSync(LEGACY_COMPILED_FILE, JSON.stringify(compiledInfo, null, 2));
 }
 export async function initStarter(environment) {
     await updateStarterInfo(environment);
     await compileStarter(environment);
 }
 export async function loadStarter(url) {
-    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) {
         throw new Error(`Invalid starter: ${url}`);
     }
     const starter = checked.data;
-    starter.id = url;
+    starter.id = localPath ?? url;
     return {
         ...starter,
         getFiles: () => Promise.resolve(Object.keys(starter.files)),

package/dist/file-helpers.js

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

package/dist/frameworks/react/add-ons/shadcn/assets/src/styles.css

@@ -1,24 +1,32 @@
+@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';
 
 @import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
 
-body {
-  @apply m-0;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family:
-    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-}
-
 :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);
+
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -55,6 +63,26 @@ code {
 }
 
 .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);
+
   --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.141 0.005 285.823);
@@ -90,6 +118,7 @@ code {
 }
 
 @theme inline {
+  --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -128,11 +157,191 @@ code {
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
+html,
+body,
+#app {
+  min-height: 100%;
+}
+
+body {
+  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-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;
+}
+
+.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;
+  text-decoration: none;
+  color: var(--sea-ink-soft);
+}
+
+.nav-link::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -8px;
+  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);
+}
+
+.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);
+  }
+}
+
+.site-footer {
+  border-top: 1px solid var(--line);
+  background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    background-color: var(--background);
+    color: var(--foreground);
   }
 }

package/dist/frameworks/react/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/react/add-ons/store/assets/src/routes/demo/store.tsx.ejs

@@ -39,7 +39,7 @@ function LastName() {
 }
 
 function FullName() {
-  const fName = useStore(fullName)
+  const fName = useStore(fullName, (state) => state)
   return (
     <div className="bg-white/10 rounded-lg px-4 py-2 outline-none ">
       {fName}

package/dist/frameworks/react/add-ons/store/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@tanstack/store": "^0.8.0",
-    "@tanstack/react-store": "^0.8.0"
+    "@tanstack/store": "^0.9.1",
+    "@tanstack/react-store": "^0.9.1"
   },
   "devDependencies": {
     "@tanstack/devtools-event-client": "^0.4.0"

package/dist/frameworks/react/add-ons/strapi/README.md

@@ -1,14 +1,164 @@
-## Setting up Strapi
+## Strapi CMS Integration
 
-The current setup shows an example of how to use Strapi with an articles collection which is part of the example structure & data.
+This add-on integrates Strapi CMS with your TanStack Start application using the official Strapi Client SDK.
 
-- Create a local running copy of the strapi admin
+### Features
 
+- Article listing with search and pagination
+- Article detail pages with dynamic block rendering
+- Rich text, quotes, media, and image slider blocks
+- Markdown content rendering with GitHub Flavored Markdown
+- Responsive image handling with error fallbacks
+- URL-based search and pagination (shareable/bookmarkable)
+- Graceful error handling with helpful setup instructions
+
+### Project Structure
+
+```
+parent/
+├── client/                 # TanStack Start frontend (your project name)
+│   ├── src/
+│   │   ├── components/
+│   │   │   ├── blocks/     # Block rendering components
+│   │   │   ├── markdown-content.tsx
+│   │   │   ├── pagination.tsx
+│   │   │   ├── search.tsx
+│   │   │   └── strapi-image.tsx
+│   │   ├── data/
+│   │   │   ├── loaders/    # Server functions
+│   │   │   └── strapi-sdk.ts
+│   │   ├── lib/
+│   │   │   └── strapi-utils.ts
+│   │   ├── routes/demo/
+│   │   │   ├── strapi.tsx              # Articles list
+│   │   │   └── strapi.$articleId.tsx   # Article detail
+│   │   └── types/
+│   │       └── strapi.ts
+│   ├── .env.local
+│   └── package.json
+└── server/                 # Strapi CMS backend (create manually or use hosted Strapi)
+    ├── src/api/            # Content types
+    ├── config/             # Strapi configuration
+    └── package.json
+```
+
+### Quick Start
+
+Create your Strapi project separately (or use an existing hosted Strapi instance), then point this app to it with `VITE_STRAPI_URL`.
+
+**1. Set up Strapi:**
+
+Follow the Strapi quick-start guide to create a local project, or use your existing Strapi deployment:
+
+- https://docs.strapi.io/dev-docs/quick-start
+
+If you created a local Strapi project in a sibling `server` directory, continue with:
+
+```bash
+cd ../server
+npm install    # or pnpm install / yarn install
+```
+
+**2. Start the Strapi server:**
+
+```bash
+npm run develop    # Starts at http://localhost:1337
+```
+
+**3. Create an admin account:**
+
+Open http://localhost:1337/admin and create your first admin user.
+
+**4. Create content:**
+
+In the Strapi admin panel, go to Content Manager > Article and create some articles.
+
+**5. Start your TanStack app (in another terminal):**
+
+```bash
+cd ../client   # or your project name
+npm run dev    # Starts at http://localhost:3000
+```
+
+**6. View the demo:**
+
+Navigate to http://localhost:3000/demo/strapi to see your articles.
+
+### Environment Variables
+
+The following environment variable is pre-configured in `.env.local`:
+
+```bash
+VITE_STRAPI_URL="http://localhost:1337"
+```
+
+For production, update this to your deployed Strapi URL.
+
+### Demo Pages
+
+| URL | Description |
+|-----|-------------|
+| `/demo/strapi` | Articles list with search and pagination |
+| `/demo/strapi/:articleId` | Article detail with block rendering |
+
+### Search and Pagination
+
+- **Search**: Type in the search box to filter articles by title or description
+- **Pagination**: Navigate between pages using the pagination controls
+- **URL State**: Search and page are stored in the URL (`?query=term&page=2`)
+
+### Block Types Supported
+
+| Block | Component | Description |
+|-------|-----------|-------------|
+| `shared.rich-text` | RichText | Markdown content |
+| `shared.quote` | Quote | Blockquote with author |
+| `shared.media` | Media | Single image/video |
+| `shared.slider` | Slider | Image gallery grid |
+
+### Dependencies
+
+| Package | Purpose |
+|---------|---------|
+| `@strapi/client` | Official Strapi SDK |
+| `react-markdown` | Markdown rendering |
+| `remark-gfm` | GitHub Flavored Markdown |
+| `use-debounce` | Debounced search input |
+
+### Running Both Servers
+
+Open two terminal windows from the parent directory:
+
+**Terminal 1 - Strapi:**
 ```bash
-pnpm dlx create-strapi@latest my-strapi-project
-cd my-strapi-project
-pnpm dev
+cd server && npm run develop
 ```
 
-- Login and publish the example articles to see them on the strapi demo page.
-- Set the `VITE_STRAPI_URL` environment variable in your `.env.local`. (For local it should be http://localhost:1337/api)
+**Terminal 2 - TanStack Start:**
+```bash
+cd client && npm run dev   # or your project name
+```
+
+### Customization
+
+**Change page size:**
+Edit `src/data/loaders/articles.ts` and modify `PAGE_SIZE`.
+
+**Add new block types:**
+1. Create component in `src/components/blocks/`
+2. Export from `src/components/blocks/index.ts`
+3. Add case to `block-renderer.tsx` switch statement
+4. Update populate in articles loader
+
+**Add new content types:**
+1. Add types to `src/types/strapi.ts`
+2. Create loader in `src/data/loaders/`
+3. Create route in `src/routes/demo/`
+
+### Learn More
+
+- [Strapi Documentation](https://docs.strapi.io/)
+- [Strapi Client SDK](https://www.npmjs.com/package/@strapi/client)
+- [Strapi Cloud Template Blog](https://github.com/strapi/strapi-cloud-template-blog)
+- [TanStack Start Documentation](https://tanstack.com/start/latest)
+- [TanStack Router Search Params](https://tanstack.com/router/latest/docs/framework/react/guide/search-params)

package/dist/frameworks/react/add-ons/strapi/assets/_dot_env.local.append

@@ -1,2 +1,2 @@
 # Strapi configuration
-VITE_STRAPI_URL="http://localhost:1337/api"
+VITE_STRAPI_URL="http://localhost:1337"