From b71eac3e402daa1d80a41163d19ca3fb25e303cd Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Tue, 13 May 2025 15:22:38 -0600 Subject: [PATCH 1/5] initial go at adding tanstack/db --- src/libraries/db.tsx | 75 ++++++++ src/libraries/index.tsx | 30 +-- src/libraries/optimistic.tsx | 101 ---------- src/routeTree.gen.ts | 36 ++++ src/routes/_libraries/db.$version.index.tsx | 198 ++++++++++++++++++++ 5 files changed, 324 insertions(+), 116 deletions(-) create mode 100644 src/libraries/db.tsx delete mode 100644 src/libraries/optimistic.tsx create mode 100644 src/routes/_libraries/db.$version.index.tsx diff --git a/src/libraries/db.tsx b/src/libraries/db.tsx new file mode 100644 index 000000000..7e1e9836f --- /dev/null +++ b/src/libraries/db.tsx @@ -0,0 +1,75 @@ +import { VscPreview, VscWand } from 'react-icons/vsc' +import { Library } from '.' +import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' +import { BiBookAlt } from 'react-icons/bi' +import { twMerge } from 'tailwind-merge' + +const repo = 'tanstack/db' + +const textStyles = `text-orange-600 dark:text-orange-500` + +export const dbProject = { + id: 'db', + name: 'TanStack DB', + cardStyles: `shadow-xl shadow-orange-700/20 dark:shadow-lg dark:shadow-orange-500/20 text-orange-500 dark:text-orange-400 border-2 border-transparent hover:border-current`, + to: '/db', + tagline: `A reactive client store for building super fast apps on sync`, + description: `TanStack DB extends TanStack Query with collections, live queries and optimistic mutations that keep your UI reactive, consistent and blazing fast πŸ”₯`, + ogImage: + 'https://github.com/tanstack/db/raw/main/media/repo-header.png', + badge: 'soon', + bgStyle: `bg-orange-700`, + textStyle: `text-orange-500`, + repo, + latestBranch: 'main', + latestVersion: 'v0', + availableVersions: ['v0'], + colorFrom: `from-orange-500`, + colorTo: `to-orange-700`, + textColor: `text-orange-700`, + frameworks: ['react', 'solid'], + scarfId: '302d0fef-cb3f-43c6-b45c-f055b9745edb', + defaultDocs: 'overview', + menu: [ + { + icon: , + label: 'Examples', + to: '/db/latest/docs/framework/react/examples/simple', + }, + { + icon: , + label: 'Docs', + to: '/db/latest/docs', + }, + { + icon: , + label: 'Github', + to: `https://github.com/${repo}`, + }, + ], + featureHighlights: [ + { + title: 'Collections', + icon: , + description: ( +
Typed sets of objects that can mirror a backend table or be populated with a filtered view or result set, such as pendingTodos or decemberNewTodos. + Collections are just JavaScript data β€” load them on demand and define as many as you need. +
+ ), + }, + { + title: 'Live Queries', + icon: , + description: ( +
Queries run reactively against and across collections with support for joins, filters and aggregates. They're powered by differential dataflow: query results update incrementally, not by re-running the whole query.
+ ), + }, + { + title: 'Transactional mutators', + icon: , + description: ( +
Batch and stage local changes across collections with immediate application of local optimistic updates. Then sync transactions to the backend with automatic rollbacks and management of optimistic state.
+ ), + }, + ], +} satisfies Library diff --git a/src/libraries/index.tsx b/src/libraries/index.tsx index b8db4c7af..f273570b2 100644 --- a/src/libraries/index.tsx +++ b/src/libraries/index.tsx @@ -17,7 +17,7 @@ import { virtualProject } from './virtual' import { rangerProject } from './ranger' import { storeProject } from './store' import { pacerProject } from './pacer' -// import { optimisticProject } from './optimistic' +import { dbProject } from './db' export const frameworkOptions = [ { label: 'React', value: 'react', logo: reactLogo, color: 'bg-blue-500' }, @@ -45,18 +45,18 @@ export type Framework = (typeof frameworkOptions)[number]['value'] export type Library = { id: - | 'start' - | 'router' - | 'query' - | 'table' - | 'form' - | 'virtual' - | 'ranger' - | 'store' - | 'pacer' - | 'optimistic' - | 'config' - | 'react-charts' + | 'start' + | 'router' + | 'query' + | 'table' + | 'form' + | 'virtual' + | 'ranger' + | 'store' + | 'pacer' + | 'db' + | 'config' + | 'react-charts' name: string cardStyles: string to: string @@ -107,13 +107,13 @@ export const libraries = [ pacerProject, storeProject, rangerProject, - // optimisticProject, + dbProject, configProject, ] satisfies Library[] export const librariesByGroup = { app: [startProject, routerProject], - state: [queryProject, storeProject, pacerProject], + state: [queryProject, dbProject, storeProject, pacerProject], headlessUI: [tableProject, formProject, virtualProject, rangerProject], other: [configProject], } diff --git a/src/libraries/optimistic.tsx b/src/libraries/optimistic.tsx deleted file mode 100644 index 2c2e137ca..000000000 --- a/src/libraries/optimistic.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { VscPreview, VscWand } from 'react-icons/vsc' -import { Library } from '.' -import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' -import { BiBookAlt } from 'react-icons/bi' -import { twMerge } from 'tailwind-merge' - -const repo = 'tanstack/optimistic' - -const textStyles = `text-orange-600 dark:text-orange-500` - -export const optimisticProject = { - id: 'optimistic', - name: 'TanStack Optimistic', - cardStyles: `shadow-xl shadow-orange-700/20 dark:shadow-lg dark:shadow-orange-500/20 text-orange-500 dark:text-orange-400 border-2 border-transparent hover:border-current`, - to: '/optimistic', - tagline: `Framework agnostic debouncing, throttling, and queueing utilities`, - description: `Set the pace of interactions in your applications. Limit the rate at which functions can fire, or intelligently queue long-running tasks with Concurrency Control.`, - ogImage: - 'https://github.com/tanstack/optimistic/raw/main/media/repo-header.png', - badge: 'soon', - bgStyle: `bg-orange-700`, - textStyle: `text-orange-500`, - repo, - latestBranch: 'main', - latestVersion: 'v0', - availableVersions: ['v0'], - colorFrom: `from-orange-500`, - colorTo: `to-orange-700`, - textColor: `text-orange-700`, - frameworks: ['react', 'solid'], - scarfId: '302d0fef-cb3f-43c6-b45c-f055b9745edb', - defaultDocs: 'overview', - menu: [ - { - icon: , - label: 'Examples', - to: '/optimistic/latest/docs/framework/react/examples/simple', - }, - { - icon: , - label: 'Docs', - to: '/optimistic/latest/docs', - }, - { - icon: , - label: 'Github', - to: `https://github.com/${repo}`, - }, - ], - featureHighlights: [ - { - title: 'Framework Agnostic & Type-Safe', - icon: , - description: ( -
- TanStack Optimistic provides an intuitive and flexible API that works - across any JavaScript framework.{' '} - - Every utility is fully type-safe with reactive framework adapters - {' '} - that seamlessly connect to your state management of choice. Choose - from multiple layers of abstraction to confidently control timing in - your applications. -
- ), - }, - { - title: 'Flexible Rate Limiting Controls', - icon: , - description: ( -
- Take control of your application's timing with powerful utilities for{' '} - - rate limiting, throttling, and debouncing - - . Leverage built-in cleanup and cancellation capabilities to help you - manage execution timing with precision while preventing memory leaks. - Flexible configuration options let you fine-tune the behavior to match - your needs. -
- ), - }, - { - title: 'Async/Sync Queue Management', - icon: , - description: ( -
- Handle complex asynchronous workflows with intelligent queuing and - concurrency control.{' '} - - Manage long-running tasks with FIFO/LIFO ordering, priority queuing, - and parallel execution - - . Built-in pause, resume and cancel capabilities give you complete - control over your queue's lifecycle. Perfect for managing API calls, - animations, and other sequential operations. -
- ), - }, - ], -} satisfies Library diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index d10cd3664..15f7e0cc8 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -43,6 +43,7 @@ import { Route as LibrariesRangerVersionIndexRouteImport } from './routes/_libra import { Route as LibrariesQueryVersionIndexRouteImport } from './routes/_libraries/query.$version.index' import { Route as LibrariesPacerVersionIndexRouteImport } from './routes/_libraries/pacer.$version.index' import { Route as LibrariesFormVersionIndexRouteImport } from './routes/_libraries/form.$version.index' +import { Route as LibrariesDbVersionIndexRouteImport } from './routes/_libraries/db.$version.index' import { Route as LibrariesConfigVersionIndexRouteImport } from './routes/_libraries/config.$version.index' import { Route as LibraryIdVersionDocsIndexRouteImport } from './routes/$libraryId/$version.docs.index' import { Route as LibraryIdVersionDocsSplatRouteImport } from './routes/$libraryId/$version.docs.$' @@ -242,6 +243,12 @@ const LibrariesFormVersionIndexRoute = getParentRoute: () => LibrariesRouteRoute, } as any) +const LibrariesDbVersionIndexRoute = LibrariesDbVersionIndexRouteImport.update({ + id: '/db/$version/', + path: '/db/$version/', + getParentRoute: () => LibrariesRouteRoute, +} as any) + const LibrariesConfigVersionIndexRoute = LibrariesConfigVersionIndexRouteImport.update({ id: '/config/$version/', @@ -463,6 +470,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof LibrariesConfigVersionIndexRouteImport parentRoute: typeof LibrariesRouteRouteImport } + '/_libraries/db/$version/': { + id: '/_libraries/db/$version/' + path: '/db/$version' + fullPath: '/db/$version' + preLoaderRoute: typeof LibrariesDbVersionIndexRouteImport + parentRoute: typeof LibrariesRouteRouteImport + } '/_libraries/form/$version/': { id: '/_libraries/form/$version/' path: '/form/$version' @@ -775,6 +789,15 @@ declare module './routes/_libraries/config.$version.index' { FileRoutesByPath['/_libraries/config/$version/']['fullPath'] > } +declare module './routes/_libraries/db.$version.index' { + const createFileRoute: CreateFileRoute< + '/_libraries/db/$version/', + FileRoutesByPath['/_libraries/db/$version/']['parentRoute'], + FileRoutesByPath['/_libraries/db/$version/']['id'], + FileRoutesByPath['/_libraries/db/$version/']['path'], + FileRoutesByPath['/_libraries/db/$version/']['fullPath'] + > +} declare module './routes/_libraries/form.$version.index' { const createFileRoute: CreateFileRoute< '/_libraries/form/$version/', @@ -969,6 +992,7 @@ interface LibrariesRouteRouteChildren { LibrariesTermsRoute: typeof LibrariesTermsRoute LibrariesIndexRoute: typeof LibrariesIndexRoute LibrariesConfigVersionIndexRoute: typeof LibrariesConfigVersionIndexRoute + LibrariesDbVersionIndexRoute: typeof LibrariesDbVersionIndexRoute LibrariesFormVersionIndexRoute: typeof LibrariesFormVersionIndexRoute LibrariesPacerVersionIndexRoute: typeof LibrariesPacerVersionIndexRoute LibrariesQueryVersionIndexRoute: typeof LibrariesQueryVersionIndexRoute @@ -990,6 +1014,7 @@ const LibrariesRouteRouteChildren: LibrariesRouteRouteChildren = { LibrariesTermsRoute: LibrariesTermsRoute, LibrariesIndexRoute: LibrariesIndexRoute, LibrariesConfigVersionIndexRoute: LibrariesConfigVersionIndexRoute, + LibrariesDbVersionIndexRoute: LibrariesDbVersionIndexRoute, LibrariesFormVersionIndexRoute: LibrariesFormVersionIndexRoute, LibrariesPacerVersionIndexRoute: LibrariesPacerVersionIndexRoute, LibrariesQueryVersionIndexRoute: LibrariesQueryVersionIndexRoute, @@ -1030,6 +1055,7 @@ export interface FileRoutesByFullPath { '/$libraryId/$version/docs/$': typeof LibraryIdVersionDocsSplatRoute '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute '/config/$version': typeof LibrariesConfigVersionIndexRoute + '/db/$version': typeof LibrariesDbVersionIndexRoute '/form/$version': typeof LibrariesFormVersionIndexRoute '/pacer/$version': typeof LibrariesPacerVersionIndexRoute '/query/$version': typeof LibrariesQueryVersionIndexRoute @@ -1066,6 +1092,7 @@ export interface FileRoutesByTo { '/$libraryId/$version/docs/$': typeof LibraryIdVersionDocsSplatRoute '/$libraryId/$version/docs': typeof LibraryIdVersionDocsIndexRoute '/config/$version': typeof LibrariesConfigVersionIndexRoute + '/db/$version': typeof LibrariesDbVersionIndexRoute '/form/$version': typeof LibrariesFormVersionIndexRoute '/pacer/$version': typeof LibrariesPacerVersionIndexRoute '/query/$version': typeof LibrariesQueryVersionIndexRoute @@ -1107,6 +1134,7 @@ export interface FileRoutesById { '/$libraryId/$version/docs/$': typeof LibraryIdVersionDocsSplatRoute '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute '/_libraries/config/$version/': typeof LibrariesConfigVersionIndexRoute + '/_libraries/db/$version/': typeof LibrariesDbVersionIndexRoute '/_libraries/form/$version/': typeof LibrariesFormVersionIndexRoute '/_libraries/pacer/$version/': typeof LibrariesPacerVersionIndexRoute '/_libraries/query/$version/': typeof LibrariesQueryVersionIndexRoute @@ -1149,6 +1177,7 @@ export interface FileRouteTypes { | '/$libraryId/$version/docs/$' | '/$libraryId/$version/docs/' | '/config/$version' + | '/db/$version' | '/form/$version' | '/pacer/$version' | '/query/$version' @@ -1184,6 +1213,7 @@ export interface FileRouteTypes { | '/$libraryId/$version/docs/$' | '/$libraryId/$version/docs' | '/config/$version' + | '/db/$version' | '/form/$version' | '/pacer/$version' | '/query/$version' @@ -1223,6 +1253,7 @@ export interface FileRouteTypes { | '/$libraryId/$version/docs/$' | '/$libraryId/$version/docs/' | '/_libraries/config/$version/' + | '/_libraries/db/$version/' | '/_libraries/form/$version/' | '/_libraries/pacer/$version/' | '/_libraries/query/$version/' @@ -1300,6 +1331,7 @@ export const routeTree = rootRoute "/_libraries/terms", "/_libraries/", "/_libraries/config/$version/", + "/_libraries/db/$version/", "/_libraries/form/$version/", "/_libraries/pacer/$version/", "/_libraries/query/$version/", @@ -1408,6 +1440,10 @@ export const routeTree = rootRoute "filePath": "_libraries/config.$version.index.tsx", "parent": "/_libraries" }, + "/_libraries/db/$version/": { + "filePath": "_libraries/db.$version.index.tsx", + "parent": "/_libraries" + }, "/_libraries/form/$version/": { "filePath": "_libraries/form.$version.index.tsx", "parent": "/_libraries" diff --git a/src/routes/_libraries/db.$version.index.tsx b/src/routes/_libraries/db.$version.index.tsx new file mode 100644 index 000000000..4c8af46ca --- /dev/null +++ b/src/routes/_libraries/db.$version.index.tsx @@ -0,0 +1,198 @@ +import { CgSpinner } from 'react-icons/cg' +import * as React from 'react' +import { Link, getRouteApi } from '@tanstack/react-router' +import { Footer } from '~/components/Footer' +import { FaCheckCircle } from 'react-icons/fa' +import SponsorPack from '~/components/SponsorPack' +import { dbProject } from '~/libraries/db' +import { Await } from '@tanstack/react-router' +import { seo } from '~/utils/seo' +import { twMerge } from 'tailwind-merge' +import { getLibrary } from '~/libraries' +import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights' +import { partners } from '~/utils/partners' +import LandingPageGad from '~/components/LandingPageGad' + +export const Route = createFileRoute({ + component: DBVersionIndex, + head: () => ({ + meta: seo({ + title: dbProject.name, + description: dbProject.description, + }), + }), +}) + +const librariesRouteApi = getRouteApi('/_libraries') +const library = getLibrary('db') + +export default function DBVersionIndex() { + const { sponsorsPromise } = librariesRouteApi.useLoaderData() + const { version } = Route.useParams() + + const gradientText = `pr-1 inline-block text-transparent bg-clip-text bg-gradient-to-r ${dbProject.colorFrom} ${dbProject.colorTo}` + + return ( + <> +
+
+

+ TanStack + DB +

+

+ + Reactive, Normalized, Transactional + {' '} + state engine that extends TanStack Query. +

+

+ TanStack DB gives you: +

    +
  • πŸ” Collections with live queries
    • +
  • ⚑️ Sub-millisecond incremental updates (via differential dataflow!)
    • +
  • 🧠 Fine-grained reactivity for minimal re-renders
    • +
  • πŸ›  Robust optimistic transactions with sync lifecycle support
    • +
  • 🧱 Normalized data by default
    • +
+ +

+
+ +
+

+ Partners +

+
+
+ {partners + .filter((d) => d.libraries?.includes('db')) + .map((partner) => { + return ( + +
+ {partner.homepageImg} +
+
+ {partner.content} +
+ + ) + })} +
+
+ +
+

+ Sponsors +

+
+ } + children={(sponsors) => { + return + }} + /> +
+ +
+ + + + {/*
+
+

+ Take it for a spin! +

+

+ With just a few lines of code, you can start using powerful rate + limiting, throttling, debouncing, and queueing utilities. +

+
+ {( + [ + { label: 'React', value: 'react' }, + // More adapters coming soon + // { label: 'Solid', value: 'solid' }, + // { label: 'Svelte', value: 'svelte' }, + // { label: 'Vue', value: 'vue' }, + // { label: 'Vanilla', value: 'vanilla' }, + ] as const + ).map((item) => ( + + ))} +
+
+
+ +
+ +
*/} + + {/*
*/} + {/*
*/} + {/* Wow, you've come a long way! */} + {/*
*/} + {/*
*/} + {/* Only one thing left to do... */} + {/*
*/} + {/*
*/} + {/* */} + {/* Get Started! */} + {/* */} + {/*
*/} + {/*
*/} +
+
+ + ) +} + From e5da7e2d6d3fa8064fcebaf584d8e36541b50a8c Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Tue, 13 May 2025 18:06:37 -0500 Subject: [PATCH 2/5] combine library layout on home page --- src/libraries/index.tsx | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/src/libraries/index.tsx b/src/libraries/index.tsx index f273570b2..0c146a92b 100644 --- a/src/libraries/index.tsx +++ b/src/libraries/index.tsx @@ -45,18 +45,18 @@ export type Framework = (typeof frameworkOptions)[number]['value'] export type Library = { id: - | 'start' - | 'router' - | 'query' - | 'table' - | 'form' - | 'virtual' - | 'ranger' - | 'store' - | 'pacer' - | 'db' - | 'config' - | 'react-charts' + | 'start' + | 'router' + | 'query' + | 'table' + | 'form' + | 'virtual' + | 'ranger' + | 'store' + | 'pacer' + | 'db' + | 'config' + | 'react-charts' name: string cardStyles: string to: string @@ -112,8 +112,14 @@ export const libraries = [ ] satisfies Library[] export const librariesByGroup = { - app: [startProject, routerProject], - state: [queryProject, dbProject, storeProject, pacerProject], + state: [ + startProject, + routerProject, + queryProject, + dbProject, + storeProject, + pacerProject, + ], headlessUI: [tableProject, formProject, virtualProject, rangerProject], other: [configProject], } From 7b12328176ccfcd801fd09429aec84208eaf08a3 Mon Sep 17 00:00:00 2001 From: James Arthur Date: Wed, 21 May 2025 13:05:16 +0200 Subject: [PATCH 3/5] docs: finish up coming soon page. --- src/images/electric-dark.svg | 13 ++ src/images/electric-light.svg | 13 ++ src/libraries/db.tsx | 48 ++++--- src/routes/_libraries/db.$version.index.tsx | 149 +++++++++----------- src/utils/partners.tsx | 46 ++++++ 5 files changed, 170 insertions(+), 99 deletions(-) create mode 100644 src/images/electric-dark.svg create mode 100644 src/images/electric-light.svg diff --git a/src/images/electric-dark.svg b/src/images/electric-dark.svg new file mode 100644 index 000000000..9efc58213 --- /dev/null +++ b/src/images/electric-dark.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/electric-light.svg b/src/images/electric-light.svg new file mode 100644 index 000000000..0639e4b08 --- /dev/null +++ b/src/images/electric-light.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/libraries/db.tsx b/src/libraries/db.tsx index 7e1e9836f..d14f92ce4 100644 --- a/src/libraries/db.tsx +++ b/src/libraries/db.tsx @@ -1,4 +1,5 @@ -import { VscPreview, VscWand } from 'react-icons/vsc' +import { BsCollectionFill } from 'react-icons/bs' +import { VscPreview, VscWand } from 'react-icons/co' import { Library } from '.' import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' import { BiBookAlt } from 'react-icons/bi' @@ -15,8 +16,7 @@ export const dbProject = { to: '/db', tagline: `A reactive client store for building super fast apps on sync`, description: `TanStack DB extends TanStack Query with collections, live queries and optimistic mutations that keep your UI reactive, consistent and blazing fast πŸ”₯`, - ogImage: - 'https://github.com/tanstack/db/raw/main/media/repo-header.png', + ogImage: 'https://github.com/tanstack/db/raw/main/media/repo-header.png', badge: 'soon', bgStyle: `bg-orange-700`, textStyle: `text-orange-500`, @@ -31,16 +31,16 @@ export const dbProject = { scarfId: '302d0fef-cb3f-43c6-b45c-f055b9745edb', defaultDocs: 'overview', menu: [ - { - icon: , - label: 'Examples', - to: '/db/latest/docs/framework/react/examples/simple', - }, - { - icon: , - label: 'Docs', - to: '/db/latest/docs', - }, + // { + // icon: , + // label: 'Examples', + // to: '/db/latest/docs/framework/react/examples/simple', + // }, + // { + // icon: , + // label: 'Docs', + // to: '/db/latest/docs', + // }, { icon: , label: 'Github', @@ -50,10 +50,12 @@ export const dbProject = { featureHighlights: [ { title: 'Collections', - icon: , + icon: , description: ( -
Typed sets of objects that can mirror a backend table or be populated with a filtered view or result set, such as pendingTodos or decemberNewTodos. - Collections are just JavaScript data β€” load them on demand and define as many as you need. +
+ Collections are typed sets of objects. Sync or load data into them. + Query across them with live queries and write locally to them using + optimistic mutations.
), }, @@ -61,14 +63,22 @@ export const dbProject = { title: 'Live Queries', icon: , description: ( -
Queries run reactively against and across collections with support for joins, filters and aggregates. They're powered by differential dataflow: query results update incrementally, not by re-running the whole query.
+
+ Live queries run reactively against and across collections. They're + super fast, powered by differential dataflow, with support for joins, + filters and aggregates. +
), }, { - title: 'Transactional mutators', + title: 'Optimistic mutations', icon: , description: ( -
Batch and stage local changes across collections with immediate application of local optimistic updates. Then sync transactions to the backend with automatic rollbacks and management of optimistic state.
+
+ Batch and stage instant local changes across collections. Sync + transactions to the backend with automatic management of rollbacks and + optimistic state. +
), }, ], diff --git a/src/routes/_libraries/db.$version.index.tsx b/src/routes/_libraries/db.$version.index.tsx index 4c8af46ca..d36116da9 100644 --- a/src/routes/_libraries/db.$version.index.tsx +++ b/src/routes/_libraries/db.$version.index.tsx @@ -45,29 +45,69 @@ export default function DBVersionIndex() { md:text-3xl lg:text-5xl lg:max-w-2xl" > + A{' '} - Reactive, Normalized, Transactional + reactive client store {' '} - state engine that extends TanStack Query. + for building{' '} + + super-fast + {' '} + apps -

- TanStack DB gives you: -

    -
  • πŸ” Collections with live queries
    • -
  • ⚑️ Sub-millisecond incremental updates (via differential dataflow!)
    • -
  • 🧠 Fine-grained reactivity for minimal re-renders
    • -
  • πŸ›  Robust optimistic transactions with sync lifecycle support
    • -
  • 🧱 Normalized data by default
    • -
- +

+ TanStack DB extends TanStack Query with collections, live queries + and optimistic mutations that keep your app reactive, consistent + and blazing fast πŸ”₯

+ + Coming soon » +
+
+
+

+ Blazing fast apps πŸ”₯ +

+

+ Built on a{' '} + + Typescript implementation of differential dataflow + + , TanStack DB gives you real-time sync, live queries and local + writes. With no stale data, super fast re-rendering and + sub-millisecond cross-collection queries β€” even for large complex + apps. +

+
+
+
+

πŸ”₯ Blazing fast query engine

+

For sub-millisecond live queries.

+
+
+

⚑ Instant local writes

+

With sync and lifecycle support.

+
+
+

🎯 Fine-grained reactivity

+

To minimize component re-rendering.

+
+
+

🌟 Normalized data

+

To keep your backend simple and fast.

+
+
+

Partners @@ -96,7 +136,6 @@ export default function DBVersionIndex() { })}

-

Sponsors @@ -124,75 +163,25 @@ export default function DBVersionIndex() {

- - - {/*
-
-

- Take it for a spin! -

-

- With just a few lines of code, you can start using powerful rate - limiting, throttling, debouncing, and queueing utilities. -

-
- {( - [ - { label: 'React', value: 'react' }, - // More adapters coming soon - // { label: 'Solid', value: 'solid' }, - // { label: 'Svelte', value: 'svelte' }, - // { label: 'Vue', value: 'vue' }, - // { label: 'Vanilla', value: 'vanilla' }, - ] as const - ).map((item) => ( - - ))} -
+
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Get Started! +
- -
- -
*/} - - {/*
*/} - {/*
*/} - {/* Wow, you've come a long way! */} - {/*
*/} - {/*
*/} - {/* Only one thing left to do... */} - {/*
*/} - {/*
*/} - {/* */} - {/* Get Started! */} - {/* */} - {/*
*/} - {/*
*/}
) } - diff --git a/src/utils/partners.tsx b/src/utils/partners.tsx index a355be182..0df1d0083 100644 --- a/src/utils/partners.tsx +++ b/src/utils/partners.tsx @@ -21,6 +21,8 @@ import neonLightSvg from '~/images/neon-light.svg' import neonDarkSvg from '~/images/neon-dark.svg' import unkeyBlackSvg from '~/images/unkey-black.svg' import unkeyWhiteSvg from '~/images/unkey-white.svg' +import electricDarkSvg from '~/images/electric-dark.svg' +import electricLightSvg from '~/images/electric-light.svg' import { Library } from '~/libraries' type Partner = { @@ -525,6 +527,49 @@ const unkey = (() => { } })() +const electric = (() => { + const href = 'https://electric-sql.com' + + return { + name: 'Electric', + id: 'electric', + libraries: ['db'], + sidebarImgLight: electricLightSvg, + sidebarImgDark: electricDarkSvg, + sidebarImgClass: 'py-4 scale-[1]', + href, + homepageImg: ( +
+ Unkey + Unkey +
+ ), + content: ( + <> +
+ Electric and TanStack are teaming up on TanStack DB to bring sync to + mainstream application developers. +
+ + Learn More + + + ), + } +})() + // const vercel = (() => { // const href = 'https://vercel.com?utm_source=tanstack' @@ -581,6 +626,7 @@ export const partners: Partner[] = [ unkey, uiDev, nozzle, + electric, ] if (typeof window !== 'undefined') { From c9d48e2621b2eafb31e6b3811f877ae5d0e6e03b Mon Sep 17 00:00:00 2001 From: James Arthur Date: Wed, 21 May 2025 18:47:54 +0200 Subject: [PATCH 4/5] db: link to docs. --- src/libraries/db.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/libraries/db.tsx b/src/libraries/db.tsx index d14f92ce4..86f07d31a 100644 --- a/src/libraries/db.tsx +++ b/src/libraries/db.tsx @@ -36,11 +36,11 @@ export const dbProject = { // label: 'Examples', // to: '/db/latest/docs/framework/react/examples/simple', // }, - // { - // icon: , - // label: 'Docs', - // to: '/db/latest/docs', - // }, + { + icon: , + label: 'Docs', + to: `https://github.com/${repo}/blob/main/docs/index.md`, + }, { icon: , label: 'Github', From 37d55cbe46048acacc7f6a463c02054372ff692d Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Sat, 24 May 2025 19:33:34 -0500 Subject: [PATCH 5/5] run format --- src/components/DocsCalloutQueryGG.tsx | 3 +-- src/routes/_libraries/query.$version.index.tsx | 2 +- src/utils/documents.server.ts | 4 ++-- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/DocsCalloutQueryGG.tsx b/src/components/DocsCalloutQueryGG.tsx index d8c10c9ed..1e0643c1f 100644 --- a/src/components/DocsCalloutQueryGG.tsx +++ b/src/components/DocsCalloutQueryGG.tsx @@ -23,8 +23,7 @@ export function DocsCalloutQueryGG() { β€”Tanner Linsley -
-
+
{ppp && ( <> diff --git a/src/routes/_libraries/query.$version.index.tsx b/src/routes/_libraries/query.$version.index.tsx index a0f474e51..6c2b4a31c 100644 --- a/src/routes/_libraries/query.$version.index.tsx +++ b/src/routes/_libraries/query.$version.index.tsx @@ -84,7 +84,7 @@ export default function VersionIndex() {

(or chek out our official course πŸ‘‡)

- +