@tanstack/create 0.61.6 → 0.62.0

package/src/frameworks/react/project/base/src/routes/blog.index.tsx.ejs

@@ -0,0 +1,93 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import { allBlogs } from 'content-collections'
+import { SITE_DESCRIPTION, SITE_TITLE, SITE_URL } from '#/lib/site'
+
+const canonical = `${SITE_URL}/blog`
+const pageTitle = `Blog | ${SITE_TITLE}`
+
+export const Route = createFileRoute('/blog/')({
+  head: () => ({
+    links: [{ rel: 'canonical', href: canonical }],
+    meta: [
+      { title: pageTitle },
+      { name: 'description', content: SITE_DESCRIPTION },
+      { property: 'og:image', content: `${SITE_URL}/images/lagoon-1.svg` },
+    ],
+  }),
+  component: BlogIndex,
+})
+
+function BlogIndex() {
+  const postsByDate = Array.from(
+    new Map(
+      [...allBlogs]
+        .sort((a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf())
+        .map((post) => [post.slug, post]),
+    ).values(),
+  )
+
+  const featured = postsByDate[0]
+  const posts = postsByDate.slice(1)
+  return (
+    <main className="page-wrap px-4 pb-8 pt-14">
+      <section className="mb-4">
+        <p className="island-kicker mb-2">Latest Dispatches</p>
+        <h1 className="display-title m-0 text-4xl font-bold tracking-tight text-[var(--sea-ink)] sm:text-5xl">
+          Blog
+        </h1>
+      </section>
+
+      <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <article className="island-shell rise-in rounded-2xl p-5 sm:p-6 lg:col-span-2">
+          {featured.heroImage ? (
+            <img
+              src={featured.heroImage}
+              alt=""
+              className="mb-4 h-44 w-full rounded-xl object-cover xl:h-60"
+            />
+          ) : null}
+          <h2 className="m-0 text-2xl font-semibold text-[var(--sea-ink)]">
+            <Link
+              to="/blog/$slug"
+              params={{ slug: featured.slug }}
+              className="no-underline"
+            >
+              {featured.title}
+            </Link>
+          </h2>
+          <p className="mb-2 mt-3 text-base text-[var(--sea-ink-soft)]">
+            {featured.description}
+          </p>
+          <p className="m-0 text-xs text-[var(--sea-ink-soft)]">
+            {new Date(featured.pubDate).toLocaleDateString()}
+          </p>
+        </article>
+
+        {posts.map((post, index) => (
+          <article
+            key={post.slug}
+            className="island-shell rise-in rounded-2xl p-5 sm:last:col-span-2 lg:last:col-span-1"
+            style={{ animationDelay: `${index * 80 + 120}ms` }}
+          >
+            {post.heroImage ? (
+              <img
+                src={post.heroImage}
+                alt=""
+                className="mb-4 h-44 w-full rounded-xl object-cover"
+              />
+            ) : null}
+            <h2 className="m-0 text-2xl font-semibold text-[var(--sea-ink)]">
+              <Link to="/blog/$slug" params={{ slug: post.slug }} className="no-underline">
+                {post.title}
+              </Link>
+            </h2>
+            <p className="mb-2 mt-2 text-sm text-[var(--sea-ink-soft)]">{post.description}</p>
+            <p className="m-0 text-xs text-[var(--sea-ink-soft)]">
+              {new Date(post.pubDate).toLocaleDateString()}
+            </p>
+          </article>
+        ))}
+      </section>
+    </main>
+  )
+}

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

@@ -1,105 +1,72 @@
 import { createFileRoute } from "@tanstack/react-router";
-import {
-  Zap, Server, Route as RouteIcon, Shield, Waves, Sparkles,
-} from "lucide-react";
 
 export const Route = createFileRoute("/")({ component: App });
 
 function App() {
-  const features = [
-    {
-      icon: <Zap className="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 className="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 className="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 className="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 className="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 className="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 className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
-      <section className="relative py-20 px-6 text-center overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"></div>
-        <div className="relative max-w-5xl mx-auto">
-          <div className="flex items-center justify-center gap-6 mb-6">
-            <img
-              src="/tanstack-circle-logo.png"
-              alt="TanStack Logo"
-              className="w-24 h-24 md:w-32 md:h-32"
-            />
-            <h1 className="text-6xl md:text-7xl font-black text-white [letter-spacing:-0.08em]">
-              <span className="text-gray-300">TANSTACK</span>{" "}
-              <span className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
-                START
-              </span>
-            </h1>
-          </div>
-          <p className="text-2xl md:text-3xl text-gray-300 mb-4 font-light">
-            The framework for next generation AI applications
-          </p>
-          <p className="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 className="flex flex-col items-center gap-4">
-            <a
-              href="https://tanstack.com/start"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="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 className="text-gray-400 text-sm mt-2">
-              Begin your TanStack Start journey by editing{" "}
-              <code className="px-2 py-1 bg-slate-700 rounded text-cyan-400">
-                /src/routes/index.tsx
-              </code>
-            </p>
-          </div>
+    <main className="page-wrap px-4 pb-8 pt-14">
+      <section className="island-shell rise-in relative overflow-hidden rounded-[2rem] px-6 py-10 sm:px-10 sm:py-14">
+        <div className="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 className="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 className="island-kicker mb-3">TanStack Start Base Template</p>
+        <h1 className="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl">
+          Island hours, but for product teams.
+        </h1>
+        <p className="mb-8 max-w-2xl text-base text-[var(--sea-ink-soft)] sm:text-lg">
+          A tropical, breathable app starter with full-document SSR, server functions,
+          streaming, and type-safe routing. Calm on the eyes. Fast in production.
+        </p>
+        <div className="flex flex-wrap gap-3">
+          <a
+            href="/blog"
+            className="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)]"
+          >
+            Explore Posts
+          </a>
+          <a
+            href="https://tanstack.com/router"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="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 className="py-16 px-6 max-w-7xl mx-auto">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {features.map((feature, index) => (
-            <div
-              key={index}
-              className="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"
+      <section className="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 custom tokens.'],
+          ].map(([title, desc], index) => (
+            <article
+              key={title}
+              className="island-shell feature-card rise-in rounded-2xl p-5"
+              style={{ animationDelay: `${index * 90 + 80}ms` }}
             >
-              <div className="mb-4">{feature.icon}</div>
-              <h3 className="text-xl font-semibold text-white mb-3">
-                {feature.title}
-              </h3>
-              <p className="text-gray-400 leading-relaxed">{feature.description}</p>
-            </div>
+              <h2 className="mb-2 text-base font-semibold text-[var(--sea-ink)]">{title}</h2>
+              <p className="m-0 text-sm text-[var(--sea-ink-soft)]">{desc}</p>
+            </article>
           ))}
-        </div>
       </section>
-    </div>
+
+      <section className="island-shell mt-8 rounded-2xl p-6">
+        <p className="island-kicker mb-2">Quick Start</p>
+        <ul className="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 hero and product narrative.
+          </li>
+          <li>
+            Update <code>src/components/Header.tsx</code> and <code>src/components/Footer.tsx</code>{' '}
+            for brand links.
+          </li>
+          <li>
+            Add routes in <code>src/routes</code> and tweak visual tokens in <code>src/styles.css</code>.
+          </li>
+        </ul>
+      </section>
+    </main>
   );
 }

package/src/frameworks/react/project/base/src/routes/rss[.]xml.ts.ejs

@@ -0,0 +1,35 @@
+<% if (routerOnly) { ignoreFile() } %>
+import { createFileRoute } from '@tanstack/react-router'
+import { allBlogs } from 'content-collections'
+import { SITE_DESCRIPTION, SITE_TITLE, SITE_URL } from '#/lib/site'
+
+export const Route = createFileRoute('/rss.xml')({
+  server: {
+    handlers: {
+      GET: () => {
+        const posts = Array.from(
+          new Map(
+            [...allBlogs]
+              .sort((a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf())
+              .map((post) => [post.slug, post]),
+          ).values(),
+        )
+
+        const items = posts
+          .map((post) => {
+            const url = `${SITE_URL}/blog/${post.slug}`
+            return `<item><title><![CDATA[${post.title}]]></title><description><![CDATA[${post.description}]]></description><link>${url}</link><guid>${url}</guid><pubDate>${new Date(post.pubDate).toUTCString()}</pubDate></item>`
+          })
+          .join('')
+
+        const xml = `<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"><channel><title><![CDATA[${SITE_TITLE}]]></title><description><![CDATA[${SITE_DESCRIPTION}]]></description><link>${SITE_URL}</link>${items}</channel></rss>`
+
+        return new Response(xml, {
+          headers: {
+            'Content-Type': 'application/rss+xml; charset=utf-8',
+          },
+        })
+      },
+    },
+  },
+})

package/src/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/src/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/src/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/src/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/src/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/src/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}`)
+})