<html lang="en">
<head></head>
<body>

<form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
<input type="hidden" name="project[files][README.md]" value="# Basic

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.5.

## Development server

To start a local development server, run:

```bash
ng serve
```

Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the project run:

```bash
ng build
```

This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.

## Running unit tests

To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
">
<input type="hidden" name="project[files][angular.json]" value="{
  &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
  &quot;version&quot;: 1,
  &quot;cli&quot;: {
    &quot;packageManager&quot;: &quot;npm&quot;,
    &quot;analytics&quot;: false
  },
  &quot;newProjectRoot&quot;: &quot;projects&quot;,
  &quot;projects&quot;: {
    &quot;basic&quot;: {
      &quot;projectType&quot;: &quot;application&quot;,
      &quot;schematics&quot;: {},
      &quot;root&quot;: &quot;&quot;,
      &quot;sourceRoot&quot;: &quot;src&quot;,
      &quot;prefix&quot;: &quot;app&quot;,
      &quot;architect&quot;: {
        &quot;build&quot;: {
          &quot;builder&quot;: &quot;@angular/build:application&quot;,
          &quot;options&quot;: {
            &quot;browser&quot;: &quot;src/main.ts&quot;,
            &quot;tsConfig&quot;: &quot;tsconfig.app.json&quot;,
            &quot;assets&quot;: [
              {
                &quot;glob&quot;: &quot;**/*&quot;,
                &quot;input&quot;: &quot;public&quot;
              }
            ],
            &quot;styles&quot;: [&quot;src/styles.css&quot;]
          },
          &quot;configurations&quot;: {
            &quot;production&quot;: {
              &quot;budgets&quot;: [
                {
                  &quot;type&quot;: &quot;initial&quot;,
                  &quot;maximumWarning&quot;: &quot;500kB&quot;,
                  &quot;maximumError&quot;: &quot;1MB&quot;
                },
                {
                  &quot;type&quot;: &quot;anyComponentStyle&quot;,
                  &quot;maximumWarning&quot;: &quot;4kB&quot;,
                  &quot;maximumError&quot;: &quot;8kB&quot;
                }
              ],
              &quot;outputHashing&quot;: &quot;all&quot;
            },
            &quot;development&quot;: {
              &quot;optimization&quot;: false,
              &quot;extractLicenses&quot;: false,
              &quot;sourceMap&quot;: true
            }
          },
          &quot;defaultConfiguration&quot;: &quot;production&quot;
        },
        &quot;serve&quot;: {
          &quot;builder&quot;: &quot;@angular/build:dev-server&quot;,
          &quot;configurations&quot;: {
            &quot;production&quot;: {
              &quot;buildTarget&quot;: &quot;basic:build:production&quot;
            },
            &quot;development&quot;: {
              &quot;buildTarget&quot;: &quot;basic:build:development&quot;
            }
          },
          &quot;defaultConfiguration&quot;: &quot;development&quot;
        },
        &quot;test&quot;: {
          &quot;builder&quot;: &quot;@angular/build:unit-test&quot;
        }
      }
    }
  }
}
">
<input type="hidden" name="project[files][eslint.config.js]" value="// @ts-check

import rootConfig from &#39;../../../eslint.config.js&#39;

/** @type {import(&#39;eslint&#39;).Linter.Config[]} */
export default [
  ...rootConfig,
  {
    languageOptions: {
      parserOptions: {
        project: &#39;./tsconfig.app.json&#39;,
      },
    },
  },
]
">
<input type="hidden" name="project[files][package.json]" value="{
  &quot;name&quot;: &quot;@tanstack/pacer-example-angular-inject-queuer&quot;,
  &quot;scripts&quot;: {
    &quot;ng&quot;: &quot;ng&quot;,
    &quot;start&quot;: &quot;ng serve&quot;,
    &quot;build&quot;: &quot;ng build&quot;,
    &quot;watch&quot;: &quot;ng build --watch --configuration development&quot;,
    &quot;test&quot;: &quot;ng test&quot;,
    &quot;test:e2e&quot;: &quot;PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts&quot;
  },
  &quot;prettier&quot;: {
    &quot;printWidth&quot;: 100,
    &quot;singleQuote&quot;: true,
    &quot;overrides&quot;: [
      {
        &quot;files&quot;: &quot;*.html&quot;,
        &quot;options&quot;: {
          &quot;parser&quot;: &quot;angular&quot;
        }
      }
    ]
  },
  &quot;private&quot;: true,
  &quot;packageManager&quot;: &quot;pnpm@12.6.0&quot;,
  &quot;dependencies&quot;: {
    &quot;@angular/common&quot;: &quot;^22.2.0&quot;,
    &quot;@angular/compiler&quot;: &quot;^22.2.0&quot;,
    &quot;@angular/core&quot;: &quot;^22.2.0&quot;,
    &quot;@angular/forms&quot;: &quot;^22.2.0&quot;,
    &quot;@angular/platform-browser&quot;: &quot;^22.2.0&quot;,
    &quot;@angular/router&quot;: &quot;^22.2.0&quot;,
    &quot;@tanstack/angular-pacer&quot;: &quot;https://pkg.pr.new/TanStack/pacer/@tanstack/angular-pacer@8777955&quot;,
    &quot;rxjs&quot;: &quot;~7.8.2&quot;,
    &quot;tslib&quot;: &quot;^2.8.1&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@angular/build&quot;: &quot;^22.2.0&quot;,
    &quot;@angular/cli&quot;: &quot;^22.2.0&quot;,
    &quot;@angular/compiler-cli&quot;: &quot;^22.2.0&quot;,
    &quot;jsdom&quot;: &quot;^30.1.1&quot;,
    &quot;typescript&quot;: &quot;6.0.3&quot;,
    &quot;vitest&quot;: &quot;^5.0.1&quot;
  }
}">
<input type="hidden" name="project[files][tsconfig.app.json]" value="/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
  &quot;extends&quot;: &quot;./tsconfig.json&quot;,
  &quot;compilerOptions&quot;: {
    &quot;outDir&quot;: &quot;./out-tsc/app&quot;,
    &quot;types&quot;: []
  },
  &quot;include&quot;: [&quot;./src/**/*.ts&quot;],
  &quot;exclude&quot;: [&quot;./src/**/*.spec.ts&quot;]
}
">
<input type="hidden" name="project[files][tsconfig.json]" value="/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
  &quot;compileOnSave&quot;: false,
  &quot;compilerOptions&quot;: {
    &quot;strict&quot;: true,
    &quot;noImplicitOverride&quot;: true,
    &quot;noPropertyAccessFromIndexSignature&quot;: true,
    &quot;noImplicitReturns&quot;: true,
    &quot;noFallthroughCasesInSwitch&quot;: true,
    &quot;skipLibCheck&quot;: true,
    &quot;isolatedModules&quot;: true,
    &quot;experimentalDecorators&quot;: true,
    &quot;importHelpers&quot;: true,
    &quot;target&quot;: &quot;ES2022&quot;,
    &quot;module&quot;: &quot;preserve&quot;
  },
  &quot;angularCompilerOptions&quot;: {
    &quot;enableI18nLegacyMessageIdFormat&quot;: false,
    &quot;strictInjectionParameters&quot;: true,
    &quot;strictInputAccessModifiers&quot;: true,
    &quot;strictTemplates&quot;: true
  },
  &quot;files&quot;: [],
  &quot;references&quot;: [
    {
      &quot;path&quot;: &quot;./tsconfig.app.json&quot;
    },
    {
      &quot;path&quot;: &quot;./tsconfig.spec.json&quot;
    }
  ]
}
">
<input type="hidden" name="project[files][tsconfig.spec.json]" value="/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
  &quot;extends&quot;: &quot;./tsconfig.json&quot;,
  &quot;compilerOptions&quot;: {
    &quot;outDir&quot;: &quot;./out-tsc/spec&quot;,
    &quot;types&quot;: [&quot;vitest/globals&quot;]
  },
  &quot;include&quot;: [&quot;src/**/*.d.ts&quot;, &quot;src/**/*.spec.ts&quot;]
}
">
<input type="hidden" name="project[files][public/favicon.ico]" value="https://pkg.pr.new/template/73616746-67ea-4ea9-ae02-9ccd08f71bf1">
<input type="hidden" name="project[files][src/index.html]" value="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;title&gt;Basic&lt;/title&gt;
    &lt;base href=&quot;/&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
    &lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot; /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
&lt;/html&gt;
">
<input type="hidden" name="project[files][src/main.ts]" value="import { bootstrapApplication } from &#39;@angular/platform-browser&#39;
import { appConfig } from &#39;./app/app.config&#39;
import { App } from &#39;./app/app&#39;

bootstrapApplication(App, appConfig).catch((err) =&gt; console.error(err))
">
<input type="hidden" name="project[files][src/styles.css]" value="/* You can add global styles to this file, and also import other style files */
">
<input type="hidden" name="project[files][src/app/app.config.ts]" value="import { ApplicationConfig, provideBrowserGlobalErrorListeners } from &#39;@angular/core&#39;
import { provideRouter } from &#39;@angular/router&#39;

import { routes } from &#39;./app.routes&#39;

export const appConfig: ApplicationConfig = {
  providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)],
}
">
<input type="hidden" name="project[files][src/app/app.css]" value=":host {
  display: block;
  padding: 2rem;
  max-width: 600px;
  margin: 0 auto;
}

input {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

p {
  margin-top: 1rem;
  color: #666;
}
">
<input type="hidden" name="project[files][src/app/app.html]" value="&lt;h1&gt;TanStack Pacer injectQueuer Example&lt;/h1&gt;
&lt;section&gt;
  &lt;h2&gt;Number queue&lt;/h2&gt;
  &lt;button type=&quot;button&quot; (click)=&quot;addNumber()&quot; [disabled]=&quot;numberQueue.state().isFull&quot;&gt;
    Add Number
  &lt;/button&gt;
  &lt;p&gt;Queue Size: {{ numberQueue.state().size }}&lt;/p&gt;
  &lt;p&gt;Queue Full: {{ numberQueue.state().isFull }}&lt;/p&gt;
  &lt;p&gt;Queue Empty: {{ numberQueue.state().isEmpty }}&lt;/p&gt;
  &lt;p&gt;Queue Idle: {{ numberQueue.state().isIdle }}&lt;/p&gt;
  &lt;p&gt;Status: {{ numberQueue.state().status }}&lt;/p&gt;
  &lt;p&gt;Items Processed: {{ numberQueue.state().executionCount }}&lt;/p&gt;
  &lt;p&gt;Queue Items: {{ numberQueue.state().items.join(&quot;, &quot;) }}&lt;/p&gt;
  &lt;p&gt;Queue Peek: {{ numberQueue.peekNextItem() ?? &quot;None&quot; }}&lt;/p&gt;
  &lt;button type=&quot;button&quot; (click)=&quot;numberQueue.execute()&quot; [disabled]=&quot;numberQueue.state().isEmpty&quot;&gt;
    Process Next
  &lt;/button&gt;
  &lt;button type=&quot;button&quot; (click)=&quot;numberQueue.clear()&quot; [disabled]=&quot;numberQueue.state().isEmpty&quot;&gt;
    Clear Queue
  &lt;/button&gt;
  &lt;button type=&quot;button&quot; (click)=&quot;numberQueue.reset()&quot; [disabled]=&quot;numberQueue.state().isEmpty&quot;&gt;
    Reset Queue
  &lt;/button&gt;
  &lt;button type=&quot;button&quot; (click)=&quot;numberQueue.start()&quot; [disabled]=&quot;numberQueue.state().isRunning&quot;&gt;
    Start Processing
  &lt;/button&gt;
  &lt;button type=&quot;button&quot; (click)=&quot;numberQueue.stop()&quot; [disabled]=&quot;!numberQueue.state().isRunning&quot;&gt;
    Stop Processing
  &lt;/button&gt;
  &lt;button type=&quot;button&quot; (click)=&quot;numberQueue.flush()&quot; [disabled]=&quot;numberQueue.state().isEmpty&quot;&gt;
    Flush Queue
  &lt;/button&gt;
  &lt;pre&gt;{{ numberQueue.state() | json }}&lt;/pre&gt;
&lt;/section&gt;
&lt;section&gt;
  &lt;h2&gt;Queued range&lt;/h2&gt;
  &lt;label
    &gt;Current Range
    &lt;input
      type=&quot;range&quot;
      min=&quot;0&quot;
      max=&quot;100&quot;
      [value]=&quot;currentValue()&quot;
      (input)=&quot;onRange($any($event.target).valueAsNumber)&quot;
  /&gt;&lt;/label&gt;
  &lt;p&gt;Instant Value: {{ currentValue() }}&lt;/p&gt;
  &lt;label
    &gt;Queued Range &lt;input type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot; [value]=&quot;rangeValue()&quot; disabled
  /&gt;&lt;/label&gt;
  &lt;p&gt;Queued Value: {{ rangeValue() }}&lt;/p&gt;
  &lt;p&gt;Values Submitted: {{ instantExecutions() }}&lt;/p&gt;
  &lt;p&gt;Pending Items: {{ rangeQueue.state().size }}&lt;/p&gt;
  &lt;p&gt;Queue Full: {{ rangeQueue.state().isFull }}&lt;/p&gt;
  &lt;p&gt;Queue Empty: {{ rangeQueue.state().isEmpty }}&lt;/p&gt;
  &lt;p&gt;Queue Idle: {{ rangeQueue.state().isIdle }}&lt;/p&gt;
  &lt;p&gt;Status: {{ rangeQueue.state().status }}&lt;/p&gt;
  &lt;p&gt;Items Processed: {{ rangeQueue.state().executionCount }}&lt;/p&gt;
  &lt;p&gt;Queue Items: {{ rangeQueue.state().items.join(&quot;, &quot;) }}&lt;/p&gt;
  &lt;p&gt;Queue Peek: {{ rangeQueue.peekNextItem() ?? &quot;None&quot; }}&lt;/p&gt;
  &lt;button type=&quot;button&quot; (click)=&quot;rangeQueue.flush()&quot; [disabled]=&quot;rangeQueue.state().isEmpty&quot;&gt;
    Flush Queue
  &lt;/button&gt;
  &lt;pre&gt;{{ rangeQueue.state() | json }}&lt;/pre&gt;
&lt;/section&gt;
">
<input type="hidden" name="project[files][src/app/app.routes.ts]" value="import type { Routes } from &#39;@angular/router&#39;

export const routes: Routes = []
">
<input type="hidden" name="project[files][src/app/app.spec.ts]" value="import { vi } from &#39;vitest&#39;
import { TestBed } from &#39;@angular/core/testing&#39;
import { App } from &#39;./app&#39;

describe(&#39;App&#39;, () =&gt; {
  beforeEach(async () =&gt; {
    await TestBed.configureTestingModule({
      imports: [App],
    }).compileComponents()
  })

  it(&#39;should create the app&#39;, () =&gt; {
    const fixture = TestBed.createComponent(App)
    const app = fixture.componentInstance
    expect(app).toBeTruthy()
  })

  it(&#39;should render title&#39;, async () =&gt; {
    const fixture = TestBed.createComponent(App)
    await fixture.whenStable()
    const compiled = fixture.nativeElement as HTMLElement
    expect(compiled.querySelector(&#39;h1&#39;)?.textContent).toContain(
      &#39;TanStack Pacer injectQueuer Example&#39;,
    )
  })
})

// Exercise the real adapter and component with a deterministic clock.
describe(&#39;example behavior&#39;, () =&gt; {
  beforeEach(async () =&gt; {
    await TestBed.configureTestingModule({ imports: [App] }).compileComponents()
  })
  afterEach(() =&gt; {
    TestBed.resetTestingModule()
    vi.clearAllTimers()
    vi.useRealTimers()
    vi.restoreAllMocks()
  })
  it(&#39;processes a stopped preloaded queue and displays pending items&#39;, async () =&gt; {
    vi.useFakeTimers({ toFake: [&#39;setTimeout&#39;, &#39;clearTimeout&#39;, &#39;Date&#39;] })
    const fixture = TestBed.createComponent(App)
    const app = fixture.componentInstance
    fixture.detectChanges()
    TestBed.tick()
    expect(app.numberQueue.state().items).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
    expect(app.numberQueue.state().isRunning).toBe(false)
    app.numberQueue.execute()
    expect(app.numberQueue.state().executionCount).toBe(1)
    expect(app.numberQueue.state().items).toEqual([2, 3, 4, 5, 6, 7, 8, 9, 10])
    app.numberQueue.clear()
    expect(app.numberQueue.state().isEmpty).toBe(true)
  })
})
">
<input type="hidden" name="project[files][src/app/app.ts]" value="import { Component, signal } from &#39;@angular/core&#39;
import { JsonPipe } from &#39;@angular/common&#39;
import { injectQueuer } from &#39;@tanstack/angular-pacer&#39;

@Component({
  selector: &#39;app-root&#39;,
  templateUrl: &#39;./app.html&#39;,
  imports: [JsonPipe],
})
export class App {
  readonly currentValue = signal(50)
  readonly rangeValue = signal(50)
  readonly instantExecutions = signal(1)
  readonly processed = signal&lt;Array&lt;number&gt;&gt;([])
  readonly numberQueue = injectQueuer(
    (item: number) =&gt; this.processed.update((items) =&gt; [...items, item]),
    {
      maxSize: 25,
      initialItems: Array.from({ length: 10 }, (_, index) =&gt; index + 1),
      started: false,
      wait: 1000,
    },
    (state) =&gt; state,
  )
  readonly rangeQueue = injectQueuer(
    (item: number) =&gt; this.rangeValue.set(item),
    { maxSize: 100, wait: 100, initialItems: [50] },
    (state) =&gt; state,
  )
  addNumber(): void {
    const items = this.numberQueue.peekAllItems()
    this.numberQueue.addItem(items.length ? items[items.length - 1]! + 1 : 1)
  }
  onRange(value: number): void {
    this.currentValue.set(value)
    this.instantExecutions.update((count) =&gt; count + 1)
    this.rangeQueue.addItem(value)
  }
}
">
<input type="hidden" name="project[files][tests/e2e/smoke.spec.mts]" value="import { expect, test } from &#39;../../../../../tests/e2e/helpers/fixtures&#39;

test.beforeEach(async ({ page, exampleUrl }) =&gt; {
  await page.clock.install()
  await page.goto(exampleUrl)
  await expect(
    page.getByRole(&#39;heading&#39;, {
      name: &#39;TanStack Pacer injectQueuer Example&#39;,
      exact: true,
    }),
  ).toBeVisible()
  // Let Angular bootstrap before pausing timers; runFor also advances render frames.
  await page.clock.pauseAt(await page.evaluate(() =&gt; Date.now() + 100))
})

test(&#39;renders the ten seeded items and stopped queue&#39;, async ({ page }) =&gt; {
  const queue = page.locator(&#39;section&#39;).filter({
    has: page.getByRole(&#39;heading&#39;, { name: &#39;Number queue&#39;, exact: true }),
  })
  await expect(queue.getByText(&#39;Queue Size: 10&#39;, { exact: true })).toBeVisible()
  await expect(
    queue.getByText(&#39;Queue Items: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10&#39;, {
      exact: true,
    }),
  ).toBeVisible()
  await expect(queue.getByRole(&#39;button&#39;, { name: &#39;Start Processing&#39;, exact: true })).toBeEnabled()
})

test(&#39;adds an item, executes the first item, then clears the remaining queue&#39;, async ({ page }) =&gt; {
  const queue = page.locator(&#39;section&#39;).filter({
    has: page.getByRole(&#39;heading&#39;, { name: &#39;Number queue&#39;, exact: true }),
  })
  await queue.getByRole(&#39;button&#39;, { name: &#39;Add Number&#39;, exact: true }).click()
  await page.clock.runFor(32)
  await expect(
    queue.getByText(&#39;Queue Items: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11&#39;, {
      exact: true,
    }),
  ).toBeVisible()
  await queue.getByRole(&#39;button&#39;, { name: &#39;Process Next&#39;, exact: true }).click()
  await page.clock.runFor(32)
  await expect(queue.getByText(&#39;Queue Peek: 2&#39;, { exact: true })).toBeVisible()
  await expect(queue.getByText(&#39;Items Processed: 1&#39;, { exact: true })).toBeVisible()
  await queue.getByRole(&#39;button&#39;, { name: &#39;Clear Queue&#39;, exact: true }).click()
  await page.clock.runFor(32)
  await expect(queue.getByText(&#39;Queue Size: 0&#39;, { exact: true })).toBeVisible()
  await expect(queue.getByText(&#39;Items Processed: 1&#39;, { exact: true })).toBeVisible()
})
">
<input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
<input type="hidden" name="project[template]" value="node">
<input type="hidden" name="project[title]" value="@tanstack/pacer-example-angular-inject-queuer">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>