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/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 new file mode 100644 index 000000000..86f07d31a --- /dev/null +++ b/src/libraries/db.tsx @@ -0,0 +1,85 @@ +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' +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: `https://github.com/${repo}/blob/main/docs/index.md`, + }, + { + icon: , + label: 'Github', + to: `https://github.com/${repo}`, + }, + ], + featureHighlights: [ + { + title: 'Collections', + icon: , + description: ( +
+ 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. +
+ ), + }, + { + title: 'Live Queries', + icon: , + description: ( +
+ Live queries run reactively against and across collections. They're + super fast, powered by differential dataflow, with support for joins, + filters and aggregates. +
+ ), + }, + { + title: 'Optimistic mutations', + icon: , + description: ( +
+ Batch and stage instant local changes across collections. Sync + transactions to the backend with automatic management of rollbacks and + optimistic state. +
+ ), + }, + ], +} satisfies Library diff --git a/src/libraries/index.tsx b/src/libraries/index.tsx index b8db4c7af..0c146a92b 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' }, @@ -54,7 +54,7 @@ export type Library = { | 'ranger' | 'store' | 'pacer' - | 'optimistic' + | 'db' | 'config' | 'react-charts' name: string @@ -107,13 +107,19 @@ export const libraries = [ pacerProject, storeProject, rangerProject, - // optimisticProject, + dbProject, configProject, ] satisfies Library[] export const librariesByGroup = { - app: [startProject, routerProject], - state: [queryProject, storeProject, pacerProject], + state: [ + startProject, + routerProject, + 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 d55d33890..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: 'Docs', - to: '/optimistic/latest/docs', - }, - { - icon: , - label: 'Examples', - to: '/optimistic/latest/docs/framework/react/examples/simple', - }, - { - 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..d36116da9 --- /dev/null +++ b/src/routes/_libraries/db.$version.index.tsx @@ -0,0 +1,187 @@ +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 +

+

+ A{' '} + + reactive client store + {' '} + for building{' '} + + super-fast + {' '} + apps +

+

+ 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 +

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

+ Sponsors +

+
+ } + children={(sponsors) => { + return + }} + /> +
+ +
+ +
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Get Started! + +
+
+
+
+ + ) +} 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 πŸ‘‡)

- + { } })() +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') {