npm - @tanstack/create - Versions diffs - 0.62.0 → 0.62.3 - Mend

@tanstack/create 0.62.0 → 0.62.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

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

@@ -27,8 +27,7 @@ import "@fontsource/inter/400.css"
 import { HydrationScript } from 'solid-js/web'
 import { Suspense } from 'solid-js'
-<% if (addOns.length || integrations.length || routes.length) { %>import Header from '../components/Header'
-<% } %>
+import Header from '../components/Header'
 <% for(const addOn of addOns) {
   for(const init of addOn.main?.initialize || []) { %>
   <%- init %>
@@ -52,9 +51,7 @@ function RootComponent() {
         <body>
           <HeadContent />
           <Suspense>
-            <% if (addOns.length || integrations.length || routes.length) { %>
-              <Header />
-            <% } %>
+            <Header />
             <Outlet />
             <TanStackRouterDevtools />
             <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>

package/src/frameworks/solid/project/base/src/routes/about.tsx.ejs ADDED Viewed

@@ -0,0 +1,22 @@
+import { createFileRoute } from '@tanstack/solid-router'
+export const Route = createFileRoute('/about')({
+  component: About,
+})
+function About() {
+  return (
+    <main class="page-wrap px-4 py-12">
+      <section class="island-shell rounded-2xl p-6 sm:p-8">
+        <p class="island-kicker mb-2">About</p>
+        <h1 class="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
+          A small starter with room to grow.
+        </h1>
+        <p class="m-0 max-w-3xl text-base leading-8 text-[var(--sea-ink-soft)]">
+          TanStack Start gives you type-safe routing, server functions, and modern SSR defaults.
+          Use this as a clean foundation, then layer in your own routes, styling, and add-ons.
+        </p>
+      </section>
+    </main>
+  )
+}

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

@@ -1,103 +1,68 @@
-import { createFileRoute } from "@tanstack/solid-router";
-import { For } from "solid-js"
-import {
-  Zap, Server, Route as RouteIcon, Shield, Waves, Sparkles,
-} from "lucide-solid";
+import { createFileRoute } from '@tanstack/solid-router'
-export const Route = createFileRoute("/")({ component: App });
+export const Route = createFileRoute('/')({ component: App })
 function App() {
-  const features = [
-    {
-      icon: <Zap class="w-12 h-12 text-cyan-400" />,
-      title: "Powerful Server Functions",
-      description: "Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.",
-    },
-    {
-      icon: <Server class="w-12 h-12 text-cyan-400" />,
-      title: "Flexible Server Side Rendering",
-      description: "Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.",
-    },
-    {
-      icon: <RouteIcon class="w-12 h-12 text-cyan-400" />,
-      title: "API Routes",
-      description: "Build type-safe API endpoints alongside your application. No separate backend needed.",
-    },
-    {
-      icon: <Shield class="w-12 h-12 text-cyan-400" />,
-      title: "Strongly Typed Everything",
-      description: "End-to-end type safety from server to client. Catch errors before they reach production.",
-    },
-    {
-      icon: <Waves class="w-12 h-12 text-cyan-400" />,
-      title: "Full Streaming Support",
-      description: "Stream data from server to client progressively. Perfect for AI applications and real-time updates.",
-    },
-    {
-      icon: <Sparkles class="w-12 h-12 text-cyan-400" />,
-      title: "Next Generation Ready",
-      description: "Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.",
-    },
-  ];
   return (
-    <div class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
-      <section class="relative py-20 px-6 text-center overflow-hidden">
-        <div class="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"></div>
-        <div class="relative max-w-5xl mx-auto">
-          <div class="flex items-center justify-center gap-6 mb-6">
-            <img
-              src="/logo192.png"
-              alt="TanStack Logo"
-              class="w-24 h-24 md:w-32 md:h-32"
-            />
-            <h1 class="text-6xl md:text-7xl font-black text-white [letter-spacing:-0.08em]">
-              <span class="text-gray-300">TANSTACK</span>{" "}
-              <span class="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
-                START
-              </span>
-            </h1>
-          </div>
-          <p class="text-2xl md:text-3xl text-gray-300 mb-4 font-light">
-            The framework for next generation AI applications
-          </p>
-          <p class="text-lg text-gray-400 max-w-3xl mx-auto mb-8">
-            Full-stack framework powered by TanStack Router for React and Solid.
-            Build modern applications with server functions, streaming, and type
-            safety.
-          </p>
-          <div class="flex flex-col items-center gap-4">
-            <a
-              href="https://tanstack.com/start"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50"
-            >
-              Documentation
-            </a>
-            <p class="text-gray-400 text-sm mt-2">
-              Begin your TanStack Start journey by editing{" "}
-              <code class="px-2 py-1 bg-slate-700 rounded text-cyan-400">
-                /src/routes/index.tsx
-              </code>
-            </p>
-          </div>
+    <main class="page-wrap px-4 pb-8 pt-14">
+      <section class="island-shell rise-in relative overflow-hidden rounded-[2rem] px-6 py-10 sm:px-10 sm:py-14">
+        <div class="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.32),transparent_66%)]" />
+        <div class="pointer-events-none absolute -bottom-20 -right-20 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(47,106,74,0.18),transparent_66%)]" />
+        <p class="island-kicker mb-3">TanStack Start Base Template</p>
+        <h1 class="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl">
+          Start simple, ship quickly.
+        </h1>
+        <p class="mb-8 max-w-2xl text-base text-[var(--sea-ink-soft)] sm:text-lg">
+          This base starter intentionally keeps things light: two routes, clean structure,
+          and the essentials you need to build from scratch.
+        </p>
+        <div class="flex flex-wrap gap-3">
+          <a
+            href="/about"
+            class="rounded-full border border-[rgba(50,143,151,0.3)] bg-[rgba(79,184,178,0.14)] px-5 py-2.5 text-sm font-semibold text-[var(--lagoon-deep)] no-underline transition hover:-translate-y-0.5 hover:bg-[rgba(79,184,178,0.24)]"
+          >
+            About This Starter
+          </a>
+          <a
+            href="https://tanstack.com/router"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="rounded-full border border-[rgba(23,58,64,0.2)] bg-white/50 px-5 py-2.5 text-sm font-semibold text-[var(--sea-ink)] no-underline transition hover:-translate-y-0.5 hover:border-[rgba(23,58,64,0.35)]"
+          >
+            Router Guide
+          </a>
         </div>
       </section>
-      <section class="py-16 px-6 max-w-7xl mx-auto">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <For each={features}>
-            {(feature) => (
-              <div 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">
-                <div class="mb-4">{feature.icon}</div>
-                <h3 class="text-xl font-semibold text-white mb-3">{feature.title}</h3>
-                <p class="text-gray-400 leading-relaxed">{feature.description}</p>
-              </div>
-            )}
-          </For>
-        </div>
+      <section class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {[
+          ['Type-Safe Routing', 'Routes and links stay in sync across every page.'],
+          ['Server Functions', 'Call server code from your UI without creating API boilerplate.'],
+          ['Streaming by Default', 'Ship progressively rendered responses for faster experiences.'],
+          ['Tailwind Native', 'Design quickly with utility-first styling and reusable tokens.'],
+        ].map(([title, desc], index) => (
+          <article
+            class="island-shell feature-card rise-in rounded-2xl p-5"
+            style={{ 'animation-delay': `${index * 90 + 80}ms` }}
+          >
+            <h2 class="mb-2 text-base font-semibold text-[var(--sea-ink)]">{title}</h2>
+            <p class="m-0 text-sm text-[var(--sea-ink-soft)]">{desc}</p>
+          </article>
+        ))}
+      </section>
+      <section class="island-shell mt-8 rounded-2xl p-6">
+        <p class="island-kicker mb-2">Quick Start</p>
+        <ul class="m-0 list-disc space-y-2 pl-5 text-sm text-[var(--sea-ink-soft)]">
+          <li>Edit <code>src/routes/index.tsx</code> to customize the home page.</li>
+          <li>
+            Update <code>src/components/Header.tsx</code> for navigation and product links.
+          </li>
+          <li>
+            Add routes in <code>src/routes</code> and tweak visual tokens in <code>src/styles.css</code>.
+          </li>
+        </ul>
       </section>
-    </div>
-  );
+    </main>
+  )
 }

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

@@ -1,15 +1,195 @@
-@import "tailwindcss";
+@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';
+: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);
+}
+* {
+  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: 'Manrope', ui-sans-serif, system-ui, sans-serif;
+  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;
 }
+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;
+}
+.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);
+}
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  border-bottom: 1px solid var(--line);
+  background: var(--header-bg);
+  backdrop-filter: blur(10px);
+}
+.nav-shell {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+  padding: 0.75rem 0;
+}
+.brand-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 999px;
+  border: 1px solid var(--chip-line);
+  background: var(--chip-bg);
+  padding: 0.5rem 0.875rem;
+  color: var(--sea-ink);
+  text-decoration: none;
+  box-shadow: 0 8px 24px rgba(30, 90, 72, 0.08);
+}
+.brand-dot {
+  height: 0.5rem;
+  width: 0.5rem;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #56c6be, #7ed3bf);
+}
+.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;
+  color: var(--sea-ink-soft);
+  text-decoration: none;
+}
+.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);
+}
+.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/src/frameworks/solid/project/base/vite.config.ts.ejs CHANGED Viewed

@@ -10,10 +10,9 @@ import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
 import solidPlugin from 'vite-plugin-solid';
 <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportContent(integration) %>
 <% } %>
-import lucidePreprocess from "vite-plugin-lucide-preprocess";
 export default defineConfig({
-  plugins: [lucidePreprocess(), devtools(), <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
+  plugins: [devtools(), <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
     // this is the plugin that enables path aliases
     viteTsConfigPaths({
       projects: ['./tsconfig.json'],

package/src/package-json.ts CHANGED Viewed

@@ -7,7 +7,7 @@ export function mergePackageJSON(
   packageJSON: Record<string, any>,
   overlayPackageJSON?: Record<string, any>,
 ) {
-  return {
+  const mergedPackageJSON: Record<string, any> = {
     ...packageJSON,
     ...(overlayPackageJSON || {}),
     dependencies: {
@@ -23,6 +23,37 @@ export function mergePackageJSON(
       ...(overlayPackageJSON?.scripts || {}),
     },
   }
+  const baseOnlyBuiltDependencies = Array.isArray(
+    packageJSON.pnpm?.onlyBuiltDependencies,
+  )
+    ? packageJSON.pnpm.onlyBuiltDependencies
+    : []
+  const overlayOnlyBuiltDependencies = Array.isArray(
+    overlayPackageJSON?.pnpm?.onlyBuiltDependencies,
+  )
+    ? overlayPackageJSON.pnpm.onlyBuiltDependencies
+    : []
+  const onlyBuiltDependencies = [
+    ...new Set([
+      ...baseOnlyBuiltDependencies,
+      ...overlayOnlyBuiltDependencies,
+    ]),
+  ]
+  if (packageJSON.pnpm || overlayPackageJSON?.pnpm) {
+    mergedPackageJSON.pnpm = {
+      ...packageJSON.pnpm,
+      ...overlayPackageJSON?.pnpm,
+    }
+    if (onlyBuiltDependencies.length) {
+      mergedPackageJSON.pnpm.onlyBuiltDependencies = onlyBuiltDependencies
+    }
+  }
+  return mergedPackageJSON
 }
 export function createPackageJSON(options: Options) {

package/tests/package-json.test.ts CHANGED Viewed

@@ -92,6 +92,38 @@ describe('createPackageJSON', () => {
     })
   })
+  it('should merge pnpm onlyBuiltDependencies from base and add-ons', () => {
+    const packageJSON = createPackageJSON({
+      chosenAddOns: [
+        {
+          packageTemplate:
+            '{"pnpm": {"onlyBuiltDependencies": ["better-sqlite3"]}}',
+        },
+      ],
+      addOnOptions: {},
+      mode: 'file-router',
+      typescript: true,
+      tailwind: true,
+      projectName: 'test',
+      framework: {
+        basePackageJSON: {
+          pnpm: {
+            onlyBuiltDependencies: ['esbuild', 'lightningcss'],
+          },
+        },
+        optionalPackages: {
+          typescript: {},
+          tailwindcss: {},
+          'file-router': {},
+        },
+      } as unknown as Framework,
+    } as unknown as Options)
+    expect(packageJSON.pnpm).toEqual({
+      onlyBuiltDependencies: ['esbuild', 'lightningcss', 'better-sqlite3'],
+    })
+  })
   it('should provide execute command helper in package templates', () => {
     const packageJSON = createPackageJSON({
       chosenAddOns: [

package/dist/frameworks/react/project/base/content/blog/fifth-post.mdx.ejs DELETED Viewed

@@ -1,54 +0,0 @@
----
-title: 'Velvet Runtime Notes'
-description: 'Use color tokens to keep light and dark themes aligned.'
-pubDate: 'Aug 05 2024'
-heroImage: '/images/lagoon-5.svg'
----
-Semantic tokens keep your UI stable while the brand evolves.
-Instead of hard-coding one-off colors in components, shape a small set of
-variables and map all surfaces to those variables.
-## Why this matters
-- You can restyle the app in minutes instead of days
-- Light and dark themes stay behaviorally consistent
-- Add-on pages inherit your visual identity by default
-<MdxCallout title="MDX Component Demo">
-  This callout is rendered from JSX inside an MDX post. It is useful for
-  release notes, warnings, and migration tips where you want stronger visual
-  emphasis than plain markdown blocks.
-</MdxCallout>
-<MdxMetrics
-  items={[
-    { label: 'Token count', value: '12 core vars' },
-    { label: 'Theme modes', value: 'light + dark + auto' },
-    { label: 'Restyle time', value: '< 30 min' },
-  ]}
-/>
-### Token-to-component mapping
-| Token | Typical usage |
-| --- | --- |
-| `--surface` | Card backgrounds |
-| `--line` | Borders and separators |
-| `--lagoon-deep` | Links and active nav |
-Keep the mapping documented and your team will make fewer ad-hoc styling calls.
-### Example: deriving UI from semantic tokens
-```tsx
-const button = {
-  color: 'var(--sea-ink)',
-  background: 'var(--surface)',
-  borderColor: 'var(--line)',
-}
-```
-MDX is useful here because you can interleave narrative, tables, code blocks,
-and custom JSX components in one authoring surface.

package/dist/frameworks/react/project/base/content/blog/first-post.md.ejs DELETED Viewed

@@ -1,47 +0,0 @@
----
-title: 'Neon Mango Protocol'
-description: 'A quick walkthrough of the starter foundations.'
-pubDate: 'Jul 08 2024'
-heroImage: '/images/lagoon-3.svg'
----
-This starter ships with routes, SSR, and a calm visual system out of the box.
-Start by editing route files, then layer in add-ons as needed.
-## What you get on day one
-- Full-document SSR using TanStack Start
-- Type-safe file routing with generated route types
-- A reusable design token system for light and dark themes
-The goal is simple: let teams ship product pages and APIs without spending the
-first week wiring framework internals.
-### Suggested order of operations
-1. Make the home route feel like your product
-2. Add one feature route and one API route
-3. Introduce add-ons only after your core UX is clear
-> Keep the first commit boring. Reliable defaults beat clever setup code.
-## Baseline delivery checklist
-Before introducing custom infra, confirm these are green:
-- `pnpm dev` starts cleanly
-- one server route returns typed data
-- one API route validates input/output
-- one integration test exercises a full page render
-When these are in place, you can iterate quickly without losing confidence.
-### Example request flow
-1. Client navigation enters route loader
-2. Loader calls server function
-3. Server function reads data source and returns typed payload
-4. Route component renders immediately with stable shape
-That flow is simple, predictable, and easy to debug.

package/dist/frameworks/react/project/base/content/blog/fourth-post.md.ejs DELETED Viewed

@@ -1,42 +0,0 @@
----
-title: 'Static Tide Almanac'
-description: 'Dial in layout polish and image rhythm across cards.'
-pubDate: 'Jul 29 2024'
-heroImage: '/images/lagoon-1.svg'
----
-As your app grows, visual rhythm matters as much as feature scope.
-Use larger feature cards to call attention to primary content, then support with
-smaller cards for secondary updates.
-## Practical layout pattern
-Use one featured card followed by standard cards in a responsive grid:
-- `lg:col-span-2` for the featured story
-- regular span for supporting posts
-- consistent card media height below `lg`
-That gives you hierarchy without reinventing every breakpoint.
-### A quick spacing rule
-Pair spacing in steps of 4 (`p-4`, `p-8`, `gap-4`, `gap-8`) and only break that
-rule for hero sections.
-## Card hierarchy recipe
-For content-heavy indexes, this sequence works well:
-1. One featured card with expanded width
-2. Three to six standard cards for breadth
-3. Optional utility card for onboarding links
-Keep title sizes mostly consistent and let width + image treatment carry
-hierarchy. That avoids jarring jumps as breakpoints shift.
-### Avoiding layout drift
-If cards start to look uneven, check image heights first, then paragraph length.
-Consistency there usually fixes 80% of visual noise.