Skip to content

add vue-pacer adapter and update pacer marketing #424

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

add vue-pacer adapter and update pacer marketing #424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b6b87c8
add vue-pacer adapter and update pacer marketing
KevinVandy Jun 7, 2025
b1cc001
Merge branch 'main' into pacer-updates
KevinVandy Jun 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 24 additions & 22 deletions src/libraries/pacer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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`,
Expand All @@ -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: [
Expand All @@ -48,7 +50,7 @@ export const pacerProject = {
],
featureHighlights: [
{
title: 'Framework Agnostic & Type-Safe',
title: 'Flexible & Type-Safe',
icon: <VscWand className={twMerge(textStyles)} />,
description: (
<div>
Expand All @@ -64,35 +66,35 @@ export const pacerProject = {
),
},
{
title: 'Flexible Rate Limiting Controls',
icon: <FaBolt className={twMerge(textStyles)} />,
title: 'Optimize Performance',
icon: <GiF1Car className={twMerge(textStyles)} />,
description: (
<div>
Take control of your application's timing with powerful utilities for{' '}
Enhance your application's efficiency with flexible utilities for{' '}
<span className={twMerge('font-semibold', textStyles)}>
rate limiting, throttling, and debouncing
throttling, debouncing, queuing, and batching
</span>
. 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.
</div>
),
},
{
title: 'Async/Sync Queue Management',
icon: <FaCogs className={twMerge(textStyles)} />,
title: 'Async or Sync',
icon: <FaTimeline className={twMerge(textStyles)} />,
description: (
<div>
Handle complex asynchronous workflows with intelligent queuing and
concurrency control.{' '}
Choose between async or sync execution for each utility based on your
needs.{' '}
<span className={twMerge('font-semibold', textStyles)}>
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
</span>
. 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.
</div>
),
},
Expand Down
91 changes: 31 additions & 60 deletions src/routes/_libraries/pacer.$version.index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -42,31 +39,50 @@ export default function PacerVersionIndex() {
<span>TanStack</span>
<span className={twMerge(gradientText)}>Pacer</span>
</h1>
<div
className={twMerge(
'text-sm',
'md:text-base font-black',
'lg:text-lg align-super text-white animate-bounce uppercase',
'dark:text-black bg-black dark:bg-white shadow-xl shadow-black/30 px-2 py-1 rounded-md',
'leading-none whitespace-nowrap'
)}
>
STATUS: ALPHA
</div>
<h2
className="font-bold text-2xl max-w-md
md:text-3xl
lg:text-5xl lg:max-w-2xl"
>
<span className="underline decoration-dashed decoration-gray-500 decoration-3 underline-offset-2">
Framework agnostic
Flexible
</span>{' '}
type-safe rate-limiting and queueing utilities
type-safe throttling and queuing utilities
</h2>
<p
className="text opacity-90 max-w-[500px]
lg:text-xl lg:max-w-[800px]"
>
Take control of your application's timing with TanStack Pacer's{' '}
<strong>rate limiting, throttling, and debouncing utilities</strong>
. Manage complex async workflows using{' '}
<strong>intelligent queuing and concurrency controls</strong> while
maintaining full control with built-in pause, resume, and cancel
capabilities.
Optimize your application's performance with TanStack Pacer's core
primitives:{' '}
<strong>
Debouncing, Throttling, Rate Limiting, Queuing, and Batching
</strong>
.
</p>
<p
className="text opacity-90 max-w-[500px]
lg:text-xl lg:max-w-[800px]"
>
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.
</p>
<Link
to="/$libraryId/$version/docs"
params={{ libraryId: library.id, version }}
className={`py-2 px-4 bg-stone-600 text-white rounded uppercase font-extrabold`}
className={`py-2 px-4 bg-lime-600 hover:bg-lime-700 text-white rounded uppercase font-extrabold transition-colors`}
>
Get Started
</Link>
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -172,52 +189,6 @@ export default function PacerVersionIndex() {

<LandingPageGad />

{/* <div className="flex flex-col gap-4">
<div className="px-4 sm:px-6 lg:px-8 mx-auto container max-w-3xl sm:text-center">
<h3 className="text-3xl text-center leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-2">
Take it for a spin!
</h3>
<p className="my-4 text-xl leading-7 text-gray-600">
With just a few lines of code, you can start using powerful rate
limiting, throttling, debouncing, and queueing utilities.
</p>
<div className="flex flex-wrap gap-2 justify-center">
{(
[
{ 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) => (
<button
key={item.value}
className={`inline-block py-2 px-4 rounded text-white uppercase font-extrabold bg-stone-600`}
>
{item.label}
</button>
))}
</div>
</div>
</div>

<div className="bg-white dark:bg-black">
<iframe
src={`https://stackblitz.com/github/${pacerProject.repo}/tree/main/examples/react/useDebouncer?embed=1&theme=dark&preset=node&file=src/main.tsx`}
title="tanstack/pacer: useDebouncer"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
className="shadow-2xl"
loading="lazy"
style={{
width: '100%',
height: '80vh',
border: '0',
}}
></iframe>
</div> */}

<div className="flex flex-col gap-4 items-center">
<div className="font-extrabold text-xl lg:text-2xl">
Wow, you've come a long way!
Expand Down
Loading