@tanstack/create 0.68.0 → 0.68.2

package/src/frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi.tsx

@@ -14,18 +14,14 @@ function RouteComponent() {
   const strapiArticles = Route.useLoaderData()
 
   return (
-    <div class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-      <div class="max-w-7xl mx-auto">
-        <h1 class="text-4xl font-bold mb-8 text-white">
-          <span class="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
-            Strapi
-          </span>{' '}
-          <span class="text-gray-300">Articles</span>
-        </h1>
+    <main class="demo-page demo-page-wide">
+      <div>
+        <p class="island-kicker mb-2">CMS</p>
+        <h1 class="demo-title mb-8">Strapi Articles</h1>
 
         <Show
           when={strapiArticles() && strapiArticles().length > 0}
-          fallback={<p class="text-gray-400">No articles found.</p>}
+          fallback={<p class="demo-muted">No articles found.</p>}
         >
           <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
             <For each={strapiArticles()}>
@@ -35,25 +31,25 @@ function RouteComponent() {
                   params={{ articleId: article.documentId }}
                   class="block"
                 >
-                  <article class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10 cursor-pointer h-full">
-                    <h2 class="text-xl font-semibold text-white mb-3">
+                  <article class="demo-card h-full cursor-pointer transition hover:-translate-y-0.5">
+                    <h2 class="mb-3 text-xl font-semibold">
                       {article.title || 'Untitled'}
                     </h2>
 
                     {article.description && (
-                      <p class="text-gray-400 mb-4 leading-relaxed">
+                      <p class="demo-muted mb-4 leading-relaxed">
                         {article.description}
                       </p>
                     )}
 
                     {article.content && (
-                      <p class="text-gray-400 line-clamp-3 leading-relaxed">
+                      <p class="demo-muted line-clamp-3 leading-relaxed">
                         {article.content}
                       </p>
                     )}
 
                     {article.createdAt && (
-                      <p class="text-sm text-cyan-400/70 mt-4">
+                      <p class="demo-muted mt-4 text-sm">
                         {new Date(article.createdAt).toLocaleDateString()}
                       </p>
                     )}
@@ -64,6 +60,6 @@ function RouteComponent() {
           </div>
         </Show>
       </div>
-    </div>
+    </main>
   )
 }

package/src/frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi_.$articleId.tsx

@@ -13,12 +13,9 @@ function RouteComponent() {
   const article = Route.useLoaderData()
 
   return (
-    <div class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-      <div class="max-w-4xl mx-auto">
-        <Link
-          to="/demo/strapi"
-          class="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
-        >
+    <main class="demo-page">
+      <div class="mx-auto max-w-4xl">
+        <Link to="/demo/strapi" class="mb-6 inline-flex items-center">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-5 w-5 mr-2"
@@ -34,13 +31,11 @@ function RouteComponent() {
           Back to Articles
         </Link>
 
-        <article class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-8">
-          <h1 class="text-4xl font-bold text-white mb-4">
-            {article()?.title || 'Untitled'}
-          </h1>
+        <article class="demo-panel">
+          <h1 class="demo-title mb-4">{article()?.title || 'Untitled'}</h1>
 
           {article()?.createdAt && (
-            <p class="text-sm text-cyan-400/70 mb-6">
+            <p class="demo-muted mb-6 text-sm">
               Published on{' '}
               {new Date(
                 article()?.createdAt || article()?.attributes?.createdAt,
@@ -54,10 +49,8 @@ function RouteComponent() {
 
           {article()?.description && (
             <div class="mb-6">
-              <h2 class="text-xl font-semibold text-gray-300 mb-3">
-                Description
-              </h2>
-              <p class="text-gray-400 leading-relaxed">
+              <h2 class="demo-section-title mb-3">Description</h2>
+              <p class="demo-muted leading-relaxed">
                 {article()?.description || article()?.attributes?.description}
               </p>
             </div>
@@ -65,14 +58,14 @@ function RouteComponent() {
 
           {article()?.content && (
             <div>
-              <h2 class="text-xl font-semibold text-gray-300 mb-3">Content</h2>
-              <div class="text-gray-400 leading-relaxed whitespace-pre-wrap">
+              <h2 class="demo-section-title mb-3">Content</h2>
+              <div class="demo-muted whitespace-pre-wrap leading-relaxed">
                 {article()?.content}
               </div>
             </div>
           )}
         </article>
       </div>
-    </div>
+    </main>
   )
 }

package/src/frameworks/solid/project/base/package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite dev --port 3000",
+    "generate-routes": "tsr generate",
     "build": "vite build",
     "start": "node .output/server/index.mjs",
     "preview": "vite preview",

package/src/frameworks/solid/project/base/src/styles.css.ejs

@@ -120,6 +120,209 @@ code {
     0 4px 14px rgba(23, 58, 64, 0.06);
 }
 
+.demo-page {
+  width: min(1080px, calc(100% - 2rem));
+  margin-inline: auto;
+  padding-block: clamp(2.25rem, 6vw, 4.5rem);
+  color: var(--sea-ink);
+}
+
+.demo-page-wide {
+  width: min(1280px, calc(100% - 2rem));
+}
+
+.demo-center {
+  min-height: calc(100vh - 13rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.demo-panel,
+.demo-card {
+  border: 1px solid var(--line);
+  background: linear-gradient(165deg, var(--surface-strong), 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);
+  backdrop-filter: blur(4px);
+}
+
+.demo-panel {
+  border-radius: 1.25rem;
+  padding: clamp(1.25rem, 4vw, 2rem);
+}
+
+.demo-card {
+  border-radius: 1rem;
+  padding: 1rem;
+}
+
+.demo-title {
+  margin: 0;
+  color: var(--sea-ink);
+  font-size: clamp(1.75rem, 4vw, 2.75rem);
+  line-height: 1.05;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.demo-section-title {
+  margin: 0;
+  color: var(--sea-ink);
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.demo-muted {
+  color: var(--sea-ink-soft);
+}
+
+.demo-input,
+.demo-select,
+.demo-textarea {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 0.75rem;
+  background: color-mix(in oklab, var(--surface-strong) 88%, white 12%);
+  color: var(--sea-ink);
+  outline: none;
+  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
+}
+
+.demo-input,
+.demo-select {
+  padding: 0.7rem 0.9rem;
+}
+
+.demo-input-fit {
+  width: auto;
+}
+
+.demo-textarea {
+  min-height: 7rem;
+  padding: 0.8rem 0.9rem;
+  resize: vertical;
+}
+
+.demo-input:focus,
+.demo-select:focus,
+.demo-textarea:focus {
+  border-color: color-mix(in oklab, var(--lagoon-deep) 58%, var(--line));
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--lagoon) 24%, transparent);
+}
+
+.demo-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px solid color-mix(in oklab, var(--lagoon-deep) 34%, var(--line));
+  border-radius: 0.85rem;
+  background: color-mix(in oklab, var(--lagoon) 22%, var(--surface-strong));
+  color: var(--sea-ink);
+  padding: 0.72rem 1rem;
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.demo-button:hover {
+  transform: translateY(-1px);
+  background: color-mix(in oklab, var(--lagoon) 30%, var(--surface-strong));
+}
+
+.demo-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+  transform: none;
+}
+
+.demo-button-secondary {
+  border-color: var(--line);
+  background: color-mix(in oklab, var(--surface-strong) 74%, transparent);
+  color: var(--sea-ink-soft);
+}
+
+.demo-button-danger {
+  border-color: rgba(196, 71, 71, 0.28);
+  background: rgba(196, 71, 71, 0.1);
+  color: #9f3030;
+}
+
+.demo-list-item {
+  border: 1px solid var(--line);
+  border-radius: 0.9rem;
+  background: color-mix(in oklab, var(--chip-bg) 82%, transparent);
+  padding: 0.9rem 1rem;
+}
+
+.demo-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 1px solid var(--chip-line);
+  border-radius: 999px;
+  background: var(--chip-bg);
+  color: var(--sea-ink-soft);
+  padding: 0.35rem 0.65rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.demo-alert {
+  border: 1px solid rgba(193, 126, 42, 0.3);
+  border-radius: 1rem;
+  background: rgba(193, 126, 42, 0.1);
+  color: var(--sea-ink);
+  padding: 1rem;
+}
+
+.demo-alert-danger {
+  border-color: rgba(196, 71, 71, 0.3);
+  background: rgba(196, 71, 71, 0.1);
+}
+
+.demo-code-block {
+  border: 1px solid var(--line);
+  border-radius: 1rem;
+  background: color-mix(in oklab, var(--chip-bg) 88%, transparent);
+  color: var(--sea-ink);
+  padding: 1rem;
+}
+
+.demo-table-shell {
+  overflow-x: auto;
+  border: 1px solid var(--line);
+  border-radius: 1rem;
+  background: color-mix(in oklab, var(--surface-strong) 78%, transparent);
+}
+
+.demo-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--sea-ink);
+}
+
+.demo-table th,
+.demo-table td {
+  border-bottom: 1px solid var(--line);
+  padding: 0.75rem 1rem;
+  text-align: left;
+}
+
+.demo-table th {
+  background: color-mix(in oklab, var(--chip-bg) 88%, transparent);
+  color: var(--sea-ink);
+  font-weight: 700;
+}
+
+.demo-table tr:hover td {
+  background: color-mix(in oklab, var(--lagoon) 8%, transparent);
+}
+
 .site-header {
   position: sticky;
   top: 0;

package/src/frameworks/solid/project/base/tsr.config.json

@@ -0,0 +1,3 @@
+{
+  "target": "solid"
+}

package/src/frameworks/solid/project/packages.json

@@ -11,6 +11,9 @@
     }
   },
   "file-router": {
+    "devDependencies": {
+      "@tanstack/router-cli": "^1.133.21"
+    },
     "dependencies": {
       "@tanstack/router-plugin": "^1.133.21"
     }

package/tests/create-app.test.ts

@@ -4,8 +4,7 @@ import { resolve } from 'node:path'
 import { createApp } from '../src/create-app.js'
 
 import { createMemoryEnvironment } from '../src/environment.js'
-import { FILE_ROUTER } from '../src/constants.js'
-import { AddOn, Options } from '../src/types.js'
+import type { AddOn, Options } from '../src/types.js'
 
 const simpleOptions = {
   projectName: 'test',
@@ -43,7 +42,7 @@ const simpleOptions = {
   packageManager: 'pnpm',
   typescript: true,
   tailwind: true,
-  mode: FILE_ROUTER,
+  mode: 'file-router',
   variableValues: {},
 } as unknown as Options
 
@@ -88,6 +87,43 @@ describe('createApp', () => {
     expect(output.commands.some(({ command }) => command === 'echo')).toBe(true)
   })
 
+  it.each(['react', 'solid'])(
+    'generates routes for %s file-router apps after install',
+    async (frameworkId) => {
+      const { environment, output } = createMemoryEnvironment()
+      await createApp(environment, {
+        ...simpleOptions,
+        framework: {
+          ...simpleOptions.framework,
+          id: frameworkId,
+        },
+        install: true,
+      } as Options)
+
+      expect(output.commands).toContainEqual({
+        command: 'pnpm',
+        args: ['generate-routes'],
+      })
+    },
+  )
+
+  it('skips route generation when dependency install is skipped', async () => {
+    const { environment, output } = createMemoryEnvironment()
+    await createApp(environment, {
+      ...simpleOptions,
+      framework: {
+        ...simpleOptions.framework,
+        id: 'react',
+      },
+      install: false,
+    })
+
+    expect(output.commands).not.toContainEqual({
+      command: 'pnpm',
+      args: ['generate-routes'],
+    })
+  })
+
   it('should create an app - with a add-on', async () => {
     const { environment, output } = createMemoryEnvironment()
     await createApp(environment, {

package/tests/framework-template.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+
+import { createFrameworkDefinition as createReactFrameworkDefinition } from '../src/frameworks/react/index.js'
+import { createFrameworkDefinition as createSolidFrameworkDefinition } from '../src/frameworks/solid/index.js'
+
+describe('framework templates', () => {
+  it.each([
+    ['React', createReactFrameworkDefinition],
+    ['Solid', createSolidFrameworkDefinition],
+  ])(
+    '%s gitignore does not exclude the generated route tree',
+    (_, createDefinition) => {
+      const framework = createDefinition()
+
+      expect(framework.base._dot_gitignore).not.toContain(
+        'src/routeTree.gen.ts',
+      )
+    },
+  )
+
+  it.each([
+    ['React', createReactFrameworkDefinition],
+    ['Solid', createSolidFrameworkDefinition],
+  ])('%s includes route generation tooling', (_, createDefinition) => {
+    const framework = createDefinition()
+
+    expect(framework.base['package.json']).toContain(
+      '"generate-routes": "tsr generate"',
+    )
+    expect(
+      framework.optionalPackages['file-router'].devDependencies,
+    ).toHaveProperty('@tanstack/router-cli')
+  })
+})