From 7b12328176ccfcd801fd09429aec84208eaf08a3 Mon Sep 17 00:00:00 2001 From: James Arthur Date: Wed, 21 May 2025 13:05:16 +0200 Subject: [PATCH 1/2] 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 2/2] 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',