diff --git a/src/libraries/pacer.tsx b/src/libraries/pacer.tsx index 45d1d640..6561b479 100644 --- a/src/libraries/pacer.tsx +++ b/src/libraries/pacer.tsx @@ -1,8 +1,10 @@ import { VscPreview, VscWand } from 'react-icons/vsc' import { Library } from '.' -import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa' +import { FaGithub } from 'react-icons/fa' import { BiBookAlt } from 'react-icons/bi' +import { GiF1Car } from 'react-icons/gi' import { twMerge } from 'tailwind-merge' +import { FaTimeline } from 'react-icons/fa6' const repo = 'tanstack/pacer' @@ -13,8 +15,8 @@ export const pacerProject = { name: 'TanStack Pacer', cardStyles: `shadow-xl shadow-lime-700/20 dark:shadow-lg dark:shadow-lime-500/20 text-lime-500 dark:text-lime-400 border-2 border-transparent hover:border-current`, to: '/pacer', - 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.`, + tagline: `Framework agnostic debouncing, throttling, rate limiting, queuing, and batching utilities`, + description: `Optimize your application's performance with TanStack Pacer's core primitives: Debouncing, Throttling, Rate Limiting, Queuing, and Batching.`, ogImage: 'https://github.com/tanstack/pacer/raw/main/media/repo-header.png', badge: 'alpha', bgStyle: `bg-lime-700`, @@ -26,7 +28,7 @@ export const pacerProject = { colorFrom: `from-lime-500`, colorTo: `to-lime-700`, textColor: `text-lime-700`, - frameworks: ['react', 'solid'], + frameworks: ['react', 'solid', 'vue'], scarfId: '302d0fef-cb3f-43c6-b45c-f055b9745edb', defaultDocs: 'overview', menu: [ @@ -48,7 +50,7 @@ export const pacerProject = { ], featureHighlights: [ { - title: 'Framework Agnostic & Type-Safe', + title: 'Flexible & Type-Safe', icon: , description: (
@@ -64,35 +66,35 @@ export const pacerProject = { ), }, { - title: 'Flexible Rate Limiting Controls', - icon: , + title: 'Optimize Performance', + icon: , description: (
- Take control of your application's timing with powerful utilities for{' '} + Enhance your application's efficiency with flexible utilities for{' '} - rate limiting, throttling, and debouncing + throttling, debouncing, queuing, and batching - . 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. + . Reduce unnecessary operations and resource consumption while + maintaining smooth user experiences. Built-in cleanup and cancellation + capabilities help prevent memory leaks and optimize resource usage. + Fine-tune behavior with flexible configuration options to match your + specific performance needs.
), }, { - title: 'Async/Sync Queue Management', - icon: , + title: 'Async or Sync', + icon: , description: (
- Handle complex asynchronous workflows with intelligent queuing and - concurrency control.{' '} + Choose between async or sync execution for each utility based on your + needs.{' '} - Manage long-running tasks with FIFO/LIFO ordering, priority queuing, - and parallel execution + Track success and error states with comprehensive event handling and + status reporting - . 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. + . Perfect for handling both simple synchronous operations and complex + task pooling workflows with with or without concurrency control.
), }, diff --git a/src/routes/_libraries/pacer.$version.index.tsx b/src/routes/_libraries/pacer.$version.index.tsx index c660e5ea..39f3c34a 100644 --- a/src/routes/_libraries/pacer.$version.index.tsx +++ b/src/routes/_libraries/pacer.$version.index.tsx @@ -1,9 +1,6 @@ import { CgSpinner } from 'react-icons/cg' -import * as React from 'react' import { Link, getRouteApi } from '@tanstack/react-router' -import { Carbon } from '~/components/Carbon' import { Footer } from '~/components/Footer' -import { TbHeartHandshake } from 'react-icons/tb' import { FaCheckCircle } from 'react-icons/fa' import SponsorPack from '~/components/SponsorPack' import { pacerProject } from '~/libraries/pacer' @@ -42,31 +39,50 @@ export default function PacerVersionIndex() { TanStack Pacer +
+ STATUS: ALPHA +

- Framework agnostic + Flexible {' '} - type-safe rate-limiting and queueing utilities + type-safe throttling and queuing utilities

- Take control of your application's timing with TanStack Pacer's{' '} - rate limiting, throttling, and debouncing utilities - . Manage complex async workflows using{' '} - intelligent queuing and concurrency controls while - maintaining full control with built-in pause, resume, and cancel - capabilities. + Optimize your application's performance with TanStack Pacer's core + primitives:{' '} + + Debouncing, Throttling, Rate Limiting, Queuing, and Batching + + . +

+

+ Choose from multiple layers of abstraction using high-level + pre-built hooks or low-level primitives that you can connect to your + own state management solutions of choice.

Get Started @@ -94,14 +110,15 @@ export default function PacerVersionIndex() { 'Rate Limiting', 'Throttling', 'Debouncing', - 'Queueing', + 'Queuing', + 'Batching', 'LIFO/FIFO/Dequeue Ordering', 'Concurrency Control', 'Queue Prioritization', 'Pause/Resume Controls', 'Cancellation', 'Abort Controller Support', - 'Promise Integration', + 'Async/Sync Execution', 'Multiple Layers of Abstraction', ].map((d, i) => { return ( @@ -172,52 +189,6 @@ export default function PacerVersionIndex() { - {/*
-
-

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