From b6b87c826a777e4861869492c08062c1423cfa46 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Sat, 7 Jun 2025 17:31:24 -0500 Subject: [PATCH 1/4] add vue-pacer adapter and update pacer marketing --- src/libraries/pacer.tsx | 46 +++++----- .../_libraries/pacer.$version.index.tsx | 91 +++++++------------ 2 files changed, 55 insertions(+), 82 deletions(-) diff --git a/src/libraries/pacer.tsx b/src/libraries/pacer.tsx index 45d1d6407..6561b4799 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 c660e5eab..39f3c34a3 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! From 07766e1287b20f622d89d5a17105b19f80f29b17 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Thu, 10 Jul 2025 00:41:18 -0500 Subject: [PATCH 2/4] update pacer copy --- src/components/Markdown.tsx | 2 +- src/libraries/pacer.tsx | 4 ++-- src/routes/_libraries/pacer.$version.index.tsx | 16 ++++++++++++++++ 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx index 85c6795c3..9aa92c36f 100644 --- a/src/components/Markdown.tsx +++ b/src/components/Markdown.tsx @@ -41,7 +41,7 @@ const makeHeading = ) diff --git a/src/libraries/pacer.tsx b/src/libraries/pacer.tsx index 6561b4799..caf34d48a 100644 --- a/src/libraries/pacer.tsx +++ b/src/libraries/pacer.tsx @@ -72,7 +72,7 @@ export const pacerProject = {
Enhance your application's efficiency with flexible utilities for{' '} - throttling, debouncing, queuing, and batching + debouncing, throttling, rate limiting, queuing, and batching . Reduce unnecessary operations and resource consumption while maintaining smooth user experiences. Built-in cleanup and cancellation @@ -94,7 +94,7 @@ export const pacerProject = { status reporting . Perfect for handling both simple synchronous operations and complex - task pooling workflows with with or without concurrency control. + task pooling workflows with or without concurrency control.
), }, diff --git a/src/routes/_libraries/pacer.$version.index.tsx b/src/routes/_libraries/pacer.$version.index.tsx index 39f3c34a3..b97a0e37a 100644 --- a/src/routes/_libraries/pacer.$version.index.tsx +++ b/src/routes/_libraries/pacer.$version.index.tsx @@ -79,6 +79,19 @@ export default function PacerVersionIndex() { pre-built hooks or low-level primitives that you can connect to your own state management solutions of choice.

+

+ TanStack Pacer is built on top of{' '} + {/* @ts-ignore */} + + TanStack Store + {' '} + with reactive and subscribable state to make interacting with your + state management or persistence solution of choice a breeze, no + matter which framework you're using. +

Date: Thu, 10 Jul 2025 00:42:44 -0500 Subject: [PATCH 3/4] remove vue from pacer for now --- src/libraries/pacer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libraries/pacer.tsx b/src/libraries/pacer.tsx index caf34d48a..4258095bc 100644 --- a/src/libraries/pacer.tsx +++ b/src/libraries/pacer.tsx @@ -28,7 +28,7 @@ export const pacerProject = { colorFrom: `from-lime-500`, colorTo: `to-lime-700`, textColor: `text-lime-700`, - frameworks: ['react', 'solid', 'vue'], + frameworks: ['react', 'solid'], scarfId: '302d0fef-cb3f-43c6-b45c-f055b9745edb', defaultDocs: 'overview', menu: [ From 25c746bd263fd627f257cc168c43058cd5373a1c Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Thu, 10 Jul 2025 00:56:30 -0500 Subject: [PATCH 4/4] format --- src/routes/_libraries/pacer.$version.index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/routes/_libraries/pacer.$version.index.tsx b/src/routes/_libraries/pacer.$version.index.tsx index b97a0e37a..c8e409607 100644 --- a/src/routes/_libraries/pacer.$version.index.tsx +++ b/src/routes/_libraries/pacer.$version.index.tsx @@ -83,8 +83,7 @@ export default function PacerVersionIndex() { className="text opacity-90 max-w-[500px] lg:text-xl lg:max-w-[800px]" > - TanStack Pacer is built on top of{' '} - {/* @ts-ignore */} + TanStack Pacer is built on top of {/* @ts-ignore */} TanStack Store {' '}