@yabbadabbadev/pepito 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [0.2.0](https://github.com/yabbadabbadev/pepito/compare/v0.1.1...v0.2.0) (2026-09-02)
+
+
+### Features
+
+* framework-agnostic core + subpath adapters for /react, /vue, /svelte ([#9](https://github.com/yabbadabbadev/pepito/issues/9)) ([2a1ab74](https://github.com/yabbadabbadev/pepito/commit/2a1ab74274d8c8ac03980f368cde8260c7330f3a))
+
+## [0.1.1](https://github.com/yabbadabbadev/pepito/compare/v0.1.0...v0.1.1) (2026-08-20)
+
+Nothing changed for consumers of this package: no new API, no fix, no
+behaviour change. `0.1.1` exists to exercise the publishing path end to end,
+and it is the first release published from a public repository, so it is the
+first to carry a provenance attestation.
+
+If you are on `0.1.0`, there is no reason to upgrade beyond wanting the
+attestation.
+
 ## 0.1.0 — 2026-08-14
 
 First release: `setupNetwork`, `mount`, request descriptors (`get`, `post`,

package/README.md

@@ -6,28 +6,22 @@ doesn't abstract MSW — handlers are still declared with the usual
 `http.get(...)` — it only provides the startup, the traffic registry and the
 matchers to query it.
 
-Published on npm as `@yabbadabbadev/pepito`; `pepito` remains the project's
-code-name and this directory's name. See `CONTRIBUTING.md` to run the tests
-and publish a version, and `ROADMAP.md` for what's out of scope for this
-version.
-
 ## 1. Install and start
 
-`react`, `react-dom`, `vitest`, `msw` and `vitest-browser-react` are
-**peerDependencies**: install them if your project doesn't already have
-them.
+`vitest` and `msw` are **peerDependencies**: install them if your project
+doesn't already have them.
+
+### Core (any framework)
+
+The core — `setupNetwork`, matchers, request descriptors, `network.log()` —
+works without any framework adapter.
 
 ```bash
-npm i -D @yabbadabbadev/pepito msw vitest-browser-react
+npm i -D @yabbadabbadev/pepito msw
 npx msw init public --save
 ```
 
-`npx msw init public --save` generates the service worker MSW needs in
-browser mode (`public/mockServiceWorker.js`); it's a one-off, not a
-day-to-day step — it's only repeated when upgrading MSW's version.
-
-Call `setupNetwork` once, in a `setupFiles` file of `vitest.config` — never
-inside a test:
+Call `setupNetwork` once, in a `setupFiles` file of `vitest.config`:
 
 ```ts
 // vitest.setup.ts
@@ -47,6 +41,70 @@ export default defineConfig({
 })
 ```
 
+### React
+
+```bash
+npm i -D @yabbadabbadev/pepito msw vitest-browser-react
+npx msw init public --save
+```
+
+```tsx
+import { mount } from '@yabbadabbadev/pepito/react'
+import { App } from '../src/App'
+
+const screen = await mount(<App />, { path: '/products' })
+```
+
+### Vue
+
+```bash
+npm i -D @yabbadabbadev/pepito msw vitest-browser-vue
+npx msw init public --save
+```
+
+```ts
+import { mount } from '@yabbadabbadev/pepito/vue'
+import App from '../src/App.vue'
+
+const screen = await mount(App, { path: '/products' })
+```
+
+### Svelte
+
+```bash
+npm i -D @yabbadabbadev/pepito msw vitest-browser-svelte
+npx msw init public --save
+```
+
+```ts
+import { mount } from '@yabbadabbadev/pepito/svelte'
+import App from '../src/App.svelte'
+
+const screen = await mount(App, { path: '/products' })
+```
+
+### Custom framework adapter
+
+If you use a framework without an official subpath (Lit, Preact, Angular,
+Solid, …), build your own adapter with `mountCore`:
+
+```ts
+import { render } from 'vitest-browser-lit'
+import { mountCore } from '@yabbadabbadev/pepito'
+
+export function mount(
+  component: unknown,
+  options?: Parameters<typeof mountCore>[2],
+) {
+  return mountCore(component, (c) => render(c as any), options)
+}
+```
+
+`mountCore` applies `pushState` for routing and registers test-specific
+MSW handlers before calling your `render` function. Its return type is
+generic: it infers the full typed result from whatever your `render`
+returns.
+
 `setupNetwork`'s second argument passes straight through to
 `worker.start()`, with no wrapper of its own — for example, to make a
 request with no handler fail the test instead of just warning on the
@@ -60,23 +118,26 @@ import { handlers } from './handlers'
 setupNetwork(handlers, { onUnhandledRequest: 'error' })
 ```
 
-Importing anything from `pepito` — here, `setupNetwork` — already brings the
-network matchers along as `expect` types: there's no separate type
-registration. If your test `tsconfig` doesn't include the setup file, `tsc`
-won't see the augmentation and `expect(...).toHaveBeenRequested()` will
-raise `TS2339` even though the test passes at runtime.
+Importing anything from `pepito` — even just `setupNetwork` — already
+brings the network matchers along as `expect` types: there's no separate
+type registration. If your test `tsconfig` doesn't include the setup
+file, `tsc` won't see the augmentation and
+`expect(...).toHaveBeenRequested()` will raise `TS2339` even though the
+test passes at runtime.
 
 ## 2. Mount the application
 
-`mount` mounts with `vitest-browser-react` and returns its `screen`
-unwrapped. It requires `setupNetwork` to have run first (section 1), **even
-for a test with no network**: the coupling is deliberate — `mount` also
-installs URL and storage cleanup between tests, not just the network — and
-if it's missing, it fails immediately with a fix instruction.
+`mount` (from `@yabbadabbadev/pepito/react`) mounts with
+`vitest-browser-react` and returns its `screen` unwrapped. It requires
+`setupNetwork` to have run first (section 1), **even for a test with no
+network**: the coupling is deliberate — `mount` also installs URL and
+storage cleanup between tests, not just the network — and if it's missing,
+it fails immediately with a fix instruction.
 
 ```tsx
 import { http, HttpResponse } from 'msw'
-import { mount, get } from '@yabbadabbadev/pepito'
+import { get } from '@yabbadabbadev/pepito'
+import { mount } from '@yabbadabbadev/pepito/react'
 import { App } from '../src/App'
 import { ProductListMother } from '../test/mothers/product-list-mother'
 
@@ -107,7 +168,7 @@ route, and `setupNetwork()` undoes them afterwards in its `afterEach`.
 Neither option is required — `mount(<App />)` on its own just mounts:
 
 ```tsx
-import { mount } from '@yabbadabbadev/pepito'
+import { mount } from '@yabbadabbadev/pepito/react'
 import { App } from '../src/App'
 
 test('mounts with no path or network of its own', async () => {
@@ -129,6 +190,16 @@ await expect.element(screen.getByText('hash: #detail')).toBeVisible()
 
 ## 3. Assert a request
 
+The five matchers, at a glance:
+
+| Matcher                     | What it asserts                                                         |
+| --------------------------- | ----------------------------------------------------------------------- |
+| `toHaveBeenRequested`       | The application made the request                                        |
+| `toHaveBeenRequestedTimes`  | Exactly `count` matching requests were made                             |
+| `toHaveBeenIntercepted`     | One of your handlers produced the response                              |
+| `toHaveRespondedWith`       | The intercepted response has the expected status/body                   |
+| `toHaveNoUnhandledRequests` | No observed request was left without a handler (via `expect.network()`) |
+
 ```ts
 import { get, post } from '@yabbadabbadev/pepito'
 
@@ -199,14 +270,8 @@ happened.
 
 ## 4. Intercepted or escaped
 
-`toHaveBeenRequested` and `toHaveBeenIntercepted` assert different things:
-
-| Matcher                 | What it asserts                            |
-| ----------------------- | ------------------------------------------ |
-| `toHaveBeenRequested`   | The application made the request           |
-| `toHaveBeenIntercepted` | One of your handlers produced the response |
-
-A handler with `passthrough()` satisfies the first and not the second: the
+`toHaveBeenRequested` and `toHaveBeenIntercepted` assert different things
+(see the table in section 3). A handler with `passthrough()` satisfies the first and not the second: the
 response came from the real network, not from your mock.
 
 ```ts
@@ -315,198 +380,19 @@ the product and are tested like any other output (see `CONTRIBUTING.md`).
 
 ## 7. Recipes
 
-**Different responses across successive calls.** No `pepito` API is needed
-for this: it's plain MSW, with chained handlers. The first one that matches
-wins, and if it carries `{ once: true }` it deactivates after that first
-time, so the request falls through to the next handler in the list:
-
-```tsx
-import { http, HttpResponse } from 'msw'
-import { get, mount } from '@yabbadabbadev/pepito'
-import { App } from '../src/App'
-import { ProductListMother } from '../test/mothers/product-list-mother'
-
-test('the second visit already sees the cached catalog', async () => {
-  await mount(<App />, {
-    network: [
-      http.get(
-        '/api/products',
-        () => HttpResponse.json(ProductListMother.empty()),
-        { once: true },
-      ),
-      http.get('/api/products', () =>
-        HttpResponse.json(ProductListMother.catalog()),
-      ),
-    ],
-  })
-
-  await fetch('/api/products') // 1st: the once handler responds and is spent
-  await fetch('/api/products') // 2nd: falls through to the handler below
-  await fetch('/api/products') // 3rd: the one below isn't once, keeps responding
+Task-oriented answers for what `pepito` deliberately doesn't wrap in its own
+API: chaining handlers for successive responses, seeding storage before
+mounting, the Mothers pattern for fixtures, cross-origin handlers, and
+waiting for the network to settle before a screenshot. See
+[`docs/recipes.md`](docs/recipes.md).
 
-  await expect(get('/api/products')).toHaveBeenRequestedTimes(3)
-  await expect(get('/api/products')).toHaveRespondedWith({
-    status: 200,
-    body: ProductListMother.empty(),
-  })
-  await expect(get('/api/products')).toHaveRespondedWith({
-    status: 200,
-    body: ProductListMother.catalog(),
-  })
-})
-```
-
-Verified in this repo: first call → empty catalog, second and third → full
-catalog (X→Y→Y). `setupNetwork()` undoes the test handlers in its
-`afterEach` with `worker.resetHandlers()`, so every following test sees a
-fresh `once` again, with no exhaustion carrying over between tests.
-
-Each `toHaveRespondedWith` above finds its own entry in the registry — one
-matches the empty response, the other the catalog — regardless of the order
-the `expect`s are written in. What `pepito` doesn't have yet is a matcher
-that asserts the ORDER between two identical requests (for example, "the
-empty one before the catalog"): it's in `ROADMAP.md`, because the registry
-is already chronological and only needs exposing.
-
-For sequences odder than `once` can express well (three different
-responses, or a condition that isn't "the first time"), a counter closure
-declared inside the test itself is the alternative — with no changes to
-`pepito`:
-
-```ts
-test('three different responses for the same route', async () => {
-  let callCount = 0
-
-  await mount(<App />, {
-    network: [
-      http.get('/api/products', () => {
-        callCount += 1
-        if (callCount === 1) return HttpResponse.json([], { status: 202 })
-        if (callCount === 2) return HttpResponse.json([], { status: 500 })
-        return HttpResponse.json(ProductListMother.catalog())
-      }),
-    ],
-  })
-
-  await fetch('/api/products')
-  await fetch('/api/products')
-  await fetch('/api/products')
-
-  await expect(get('/api/products')).toHaveRespondedWith(202)
-  await expect(get('/api/products')).toHaveRespondedWith(500)
-})
-```
-
-**Seeding `localStorage`/cookies before mounting.** The browser's storage is
-real; no `mount` option is needed for this, a plain `setItem` before `await
-mount(...)` is enough:
-
-```ts
-test('the catalog respects the saved filter', async () => {
-  localStorage.setItem('favoriteFilter', 'bread')
-  document.cookie = 'session=abc'
-
-  const screen = await mount(<App />)
-
-  await expect.element(screen.getByText('filter: bread')).toBeVisible()
-})
-```
-
-**Fixtures with Mothers.** Mocked response payloads follow the house's
-Mother/Builder pattern — each Mother models the shape of one endpoint's
-response, with named factories for its variants; no loose literals and no
-`structuredClone` with mutation, not even in examples copied from here:
-
-```ts
-// test/mothers/product-list-mother.ts
-interface ProductResponse {
-  id: number
-  product_name: string
-}
-
-const milk = { id: 1, product_name: 'Whole milk' } satisfies ProductResponse
-const bread = { id: 2, product_name: 'Country bread' } satisfies ProductResponse
-
-export const ProductListMother = {
-  catalog: (): ProductResponse[] => [milk, bread],
-  empty: (): ProductResponse[] => [],
-}
-```
-
-```ts
-http.get('/api/products', () => HttpResponse.json(ProductListMother.catalog()))
-```
-
-An incidental payload that isn't an entity (`{ ok: true }`) doesn't need a
-Mother. `pepito` doesn't export fixture infrastructure — Mothers belong to
-each project's own domain.
-
-**The API's host goes in the handler, not in the configuration.** There's no
-`defaultHost`: the service worker intercepts cross-origin the same as
-same-origin, so the host is a detail of the handler's URL.
-
-```ts
-http.get('https://api.example.com/products', () =>
-  HttpResponse.json(ProductListMother.catalog()),
-)
-// or with a wildcard:
-http.get('*/products', () => HttpResponse.json(ProductListMother.catalog()))
-```
-
-`mount({ path })`, by contrast, does require same-origin — a different
-origin there throws with an instruction, because `path` moves the test
-document's URL, not the request you want to mock.
-
-**Waiting for the network to settle before capturing.**
-`toMatchScreenshot`'s native stabilizer waits for the frame to stop
-changing, but a static `<p>Loading…</p>` is also a stable capture: without
-waiting for the network, the baseline is the loading screen, not the real
-content. Measured in the evaluation repo's
-`docs/knowledge/regresion-visual-browser-mode.md`: 0 failures across 17
-local runs + 3 in CI waiting for calm this way, with
-baselines byte-identical to the ones anchored by `expect.element` to a
-specific text. `network.idle()` waits with the same mechanism the network
-matchers use, without asserting anything:
-
-```tsx
-import { mount, network } from '@yabbadabbadev/pepito'
-import { App } from '../src/App'
-
-test('the catalog does not change visually', async () => {
-  const screen = await mount(<App />)
+## About the name
 
-  await network.idle()
-
-  await expect.element(screen.getByRole('main')).toMatchScreenshot('catalog')
-})
-```
+Published on npm as `@yabbadabbadev/pepito`; `pepito` remains the project's
+code-name and this directory's name. See `CONTRIBUTING.md` to run the tests
+and publish a version, and `ROADMAP.md` for what's out of scope for this
+version.
 
-## 8. Cheat sheet
+## License
 
-```ts
-request('QUERY', '/api/products') // any method, including ones with no shortcut
-get('/api/products', { searchParams: { filter: 'bread' } }) // subset of searchParams
-post('/api/products', { body: { product_name: 'Whole milk' } }) // subset of body
-put('/api/products/1', { body: { stock: 3 }, exact: true }) // strict equality
-patch('/api/products/1', { body: { stock: 3 } })
-del('/api/products/1')
-query('/api/products', { searchParams: { filter: 'bread' } })
-
-await expect(get('/api/products')).toHaveBeenRequested() // the app made the request
-await expect(get('/api/products')).not.toHaveBeenRequested() // waits for calm first
-await expect(get('/api/products')).toHaveBeenRequestedTimes(2) // exact count, network settled
-await expect(get('/api/products')).toHaveBeenIntercepted() // one of your handlers responded
-await expect(get('/api/products')).toHaveRespondedWith(500) // shorthand for { status: 500 }
-await expect(get('/api/products')).toHaveRespondedWith({
-  status: 200,
-  body: { total: 2 }, // subset
-})
-await expect(get('/api/products')).toHaveRespondedWith({
-  status: 200,
-  body: { total: 2 },
-  exact: true, // strict equality
-})
-await expect.network().toHaveNoUnhandledRequests() // guardrail: nothing without a handler
-await network.log() // dumps the observed traffic, without asserting
-await network.idle() // waits for calm, without asserting — before capturing in visual regression
-```
+MIT, see [`LICENSE`](LICENSE).

package/dist/index.d.ts

@@ -3,5 +3,5 @@ import './matcher-types';
 export * from './request-descriptors';
 export { setupNetwork } from './setup-network';
 export { network } from './network';
-export { mount } from './mount';
-export type { MountOptions } from './mount';
+export { mountCore } from './mount-core';
+export type { MountOptions, MountResult } from './mount-core';

package/dist/index.js

@@ -3,4 +3,4 @@ import './matcher-types';
 export * from './request-descriptors';
 export { setupNetwork } from './setup-network';
 export { network } from './network';
-export { mount } from './mount';
+export { mountCore } from './mount-core';

package/dist/mount-core.d.ts

@@ -0,0 +1,38 @@
+import type { RequestHandler } from 'msw';
+/** Options for {@link mountCore}. Both are optional. */
+export interface MountOptions {
+    /**
+     * Same-origin URI starting with `/`, query and hash included (for example
+     * `/products?filter=bread#detail`). Applied with `history.pushState`
+     * before render so the application's router reads it on mount.
+     */
+    path?: string;
+    /**
+     * MSW handlers of this test's own. Installed with `worker.use()` before
+     * render, so they take priority over the suite's for the same route, and
+     * `setupNetwork()` undoes them in its `afterEach`.
+     */
+    network?: RequestHandler[];
+}
+/** The minimal contract every `vitest-browser-*` render result satisfies. */
+export interface MountResult {
+    container: Element;
+}
+/**
+ * Framework-agnostic mount: applies `pushState` (if `path`), registers
+ * test-specific MSW handlers (if `network`), then calls `render(component)`.
+ *
+ * The `render` function is provided by the caller — each framework subpath
+ * (`/react`, `/vue`, `/svelte`) wraps this with its own `vitest-browser-*`
+ * render. See the "Custom framework adapter" section in the README for
+ * building your own.
+ *
+ * @example
+ * ```ts
+ * import { render } from 'vitest-browser-lit'
+ * import { mountCore } from '@yabbadabbadev/pepito'
+ *
+ * const screen = await mountCore(MyComponent, (c) => render(c as any))
+ * ```
+ */
+export declare function mountCore<T extends MountResult>(component: unknown, render: (component: unknown) => T | Promise<T>, options?: MountOptions): Promise<T>;

package/dist/mount-core.js

@@ -0,0 +1,44 @@
+import { requireNetworkContext } from './network-singleton';
+function isSameOriginPath(path) {
+    if (!path.startsWith('/'))
+        return false;
+    try {
+        return new URL(path, location.origin).origin === location.origin;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Framework-agnostic mount: applies `pushState` (if `path`), registers
+ * test-specific MSW handlers (if `network`), then calls `render(component)`.
+ *
+ * The `render` function is provided by the caller — each framework subpath
+ * (`/react`, `/vue`, `/svelte`) wraps this with its own `vitest-browser-*`
+ * render. See the "Custom framework adapter" section in the README for
+ * building your own.
+ *
+ * @example
+ * ```ts
+ * import { render } from 'vitest-browser-lit'
+ * import { mountCore } from '@yabbadabbadev/pepito'
+ *
+ * const screen = await mountCore(MyComponent, (c) => render(c as any))
+ * ```
+ */
+export async function mountCore(component, render, options = {}) {
+    const { worker } = requireNetworkContext('mountCore');
+    const { path, network: testHandlers } = options;
+    if (path !== undefined && !isSameOriginPath(path)) {
+        throw new Error(`pepito: path must be a same-origin URI that starts with '/'; ` +
+            `received: ${path}. A different origin is mocked in the MSW ` +
+            `handlers, not in the mount.`);
+    }
+    if (path !== undefined) {
+        history.pushState({}, '', path);
+    }
+    if (testHandlers !== undefined && testHandlers.length > 0) {
+        worker.use(...testHandlers);
+    }
+    return await Promise.resolve(render(component));
+}

package/dist/network.d.ts

@@ -34,7 +34,7 @@ export declare const network: {
      * absence of future traffic: the same practical blind window remains as
      * for the rest of the mechanism — a request fired in the same tick as the
      * call, before crossing the real round trip to the service worker (1–6 ms
-     * measured; see `.claude/docs/references/measured-foundations.md`), may
+     * measured; see `.agents/docs/references/measured-foundations.md`), may
      * not be in the registry yet when `network.idle()` resolves.
      *
      * Meant for visual regression: capturing right after mounting, with a
@@ -42,7 +42,7 @@ export declare const network: {
      * native stabilizer of `toMatchScreenshot` doesn't catch it because
      * "Loading…" is also a capture that stops changing between frames
      * (measured: 0 failures across 17 local runs + 3 in CI waiting for calm
-     * this way — see `.claude/docs/references/measured-foundations.md`).
+     * this way — see `.agents/docs/references/measured-foundations.md`).
      * Before this, the only public way to wait for calm on its own was to
      * divert `expect.network().toHaveNoUnhandledRequests()` from its actual
      * purpose (detecting traffic without a handler). It works just as well as a

package/dist/network.js

@@ -45,7 +45,7 @@ export const network = {
      * absence of future traffic: the same practical blind window remains as
      * for the rest of the mechanism — a request fired in the same tick as the
      * call, before crossing the real round trip to the service worker (1–6 ms
-     * measured; see `.claude/docs/references/measured-foundations.md`), may
+     * measured; see `.agents/docs/references/measured-foundations.md`), may
      * not be in the registry yet when `network.idle()` resolves.
      *
      * Meant for visual regression: capturing right after mounting, with a
@@ -53,7 +53,7 @@ export const network = {
      * native stabilizer of `toMatchScreenshot` doesn't catch it because
      * "Loading…" is also a capture that stops changing between frames
      * (measured: 0 failures across 17 local runs + 3 in CI waiting for calm
-     * this way — see `.claude/docs/references/measured-foundations.md`).
+     * this way — see `.agents/docs/references/measured-foundations.md`).
      * Before this, the only public way to wait for calm on its own was to
      * divert `expect.network().toHaveNoUnhandledRequests()` from its actual
      * purpose (detecting traffic without a handler). It works just as well as a

package/dist/react.d.ts

@@ -0,0 +1,28 @@
+import type { ReactElement } from 'react';
+import { type RenderResult } from 'vitest-browser-react';
+import type { MountOptions } from './mount-core';
+/**
+ * Mounts a React element with `vitest-browser-react`, optionally on a real
+ * document route and with test-specific MSW handlers.
+ *
+ * `path`, if given, has to be a same-origin URI starting with `/`: it's
+ * applied with `history.pushState` BEFORE render because the application's
+ * `BrowserRouter` reads the URL on mount and only listens to `popstate`
+ * afterwards. The URI can carry query and hash: they flow through the router
+ * the same as the path. `setupNetwork()` restores the original URL in its
+ * `afterEach`, so every test starts from the same route regardless of what
+ * the previous one mounted.
+ *
+ * `network`, if given, is registered with `worker.use()` before render: its
+ * handlers take priority over the suite's for this request, with the same
+ * resolution rules as MSW.
+ *
+ * @example
+ * ```tsx
+ * import { mount } from '@yabbadabbadev/pepito/react'
+ *
+ * const screen = await mount(<App />, { path: '/products?filter=bread' })
+ * await expect.element(screen.getByText('filter: bread')).toBeVisible()
+ * ```
+ */
+export declare function mount(ui: ReactElement, options?: MountOptions): Promise<RenderResult>;

package/dist/react.js

@@ -0,0 +1,29 @@
+import { render } from 'vitest-browser-react';
+import { mountCore } from './mount-core';
+/**
+ * Mounts a React element with `vitest-browser-react`, optionally on a real
+ * document route and with test-specific MSW handlers.
+ *
+ * `path`, if given, has to be a same-origin URI starting with `/`: it's
+ * applied with `history.pushState` BEFORE render because the application's
+ * `BrowserRouter` reads the URL on mount and only listens to `popstate`
+ * afterwards. The URI can carry query and hash: they flow through the router
+ * the same as the path. `setupNetwork()` restores the original URL in its
+ * `afterEach`, so every test starts from the same route regardless of what
+ * the previous one mounted.
+ *
+ * `network`, if given, is registered with `worker.use()` before render: its
+ * handlers take priority over the suite's for this request, with the same
+ * resolution rules as MSW.
+ *
+ * @example
+ * ```tsx
+ * import { mount } from '@yabbadabbadev/pepito/react'
+ *
+ * const screen = await mount(<App />, { path: '/products?filter=bread' })
+ * await expect.element(screen.getByText('filter: bread')).toBeVisible()
+ * ```
+ */
+export async function mount(ui, options) {
+    return mountCore(ui, (c) => render(c), options);
+}

package/dist/setup-network.d.ts

@@ -4,7 +4,7 @@ import type { SetupWorker, StartOptions } from 'msw/browser';
  * Starts the MSW worker and hooks up the traffic registry, leaving the
  * between-test cleanup installed in `afterEach`: registry, hot handlers,
  * document URL and origin storage all return to their pre-test state
- * (measured — see `.claude/docs/references/measured-foundations.md`).
+ * (measured — see `.agents/docs/references/measured-foundations.md`).
  *
  * Called once per test file, typically from a `setupFiles` entry in
  * `vitest.config`, never from inside a test.
@@ -14,7 +14,7 @@ import type { SetupWorker, StartOptions } from 'msw/browser';
  * survives between tests — see `clearOriginStorage` in storage-cleanup.ts.
  * A cookie without an explicit `path` does get cleared, including one set
  * while `mount` was simulating being on a nested route (measured — see
- * `.claude/docs/references/measured-foundations.md`).
+ * `.agents/docs/references/measured-foundations.md`).
  *
  * @param handlers - Initial MSW handlers, the same ones `setupWorker` would take.
  * @param startOptions - Passed through to `worker.start()` as-is; no wrapper of its own.

package/dist/setup-network.js

@@ -8,7 +8,7 @@ import { resetTraffic } from './traffic-registry';
  * Starts the MSW worker and hooks up the traffic registry, leaving the
  * between-test cleanup installed in `afterEach`: registry, hot handlers,
  * document URL and origin storage all return to their pre-test state
- * (measured — see `.claude/docs/references/measured-foundations.md`).
+ * (measured — see `.agents/docs/references/measured-foundations.md`).
  *
  * Called once per test file, typically from a `setupFiles` entry in
  * `vitest.config`, never from inside a test.
@@ -18,7 +18,7 @@ import { resetTraffic } from './traffic-registry';
  * survives between tests — see `clearOriginStorage` in storage-cleanup.ts.
  * A cookie without an explicit `path` does get cleared, including one set
  * while `mount` was simulating being on a nested route (measured — see
- * `.claude/docs/references/measured-foundations.md`).
+ * `.agents/docs/references/measured-foundations.md`).
  *
  * @param handlers - Initial MSW handlers, the same ones `setupWorker` would take.
  * @param startOptions - Passed through to `worker.start()` as-is; no wrapper of its own.

package/dist/storage-cleanup.d.ts

@@ -3,7 +3,7 @@
  * land on the same worker: `localStorage`, `sessionStorage` and cookies
  * belong to the origin, not the document, so they survive per-file
  * isolation (measured — see
- * `.claude/docs/references/measured-foundations.md`).
+ * `.agents/docs/references/measured-foundations.md`).
  *
  * Each cookie is expired twice per name: once with `path=/` (the one most
  * application code sets) and once with no `path` attribute, in case one was
@@ -16,7 +16,7 @@
  *
  * Measured that it doesn't, in this harness (Chromium via Playwright,
  * `vitest@4.1.10`): the order has no observable effect today — full
- * evidence in `.claude/docs/references/measured-foundations.md`. The order
+ * evidence in `.agents/docs/references/measured-foundations.md`. The order
  * is kept anyway, at no cost, in case some future runner or browser does
  * follow the simulated URL.
  *

package/dist/storage-cleanup.js

@@ -3,7 +3,7 @@
  * land on the same worker: `localStorage`, `sessionStorage` and cookies
  * belong to the origin, not the document, so they survive per-file
  * isolation (measured — see
- * `.claude/docs/references/measured-foundations.md`).
+ * `.agents/docs/references/measured-foundations.md`).
  *
  * Each cookie is expired twice per name: once with `path=/` (the one most
  * application code sets) and once with no `path` attribute, in case one was
@@ -16,7 +16,7 @@
  *
  * Measured that it doesn't, in this harness (Chromium via Playwright,
  * `vitest@4.1.10`): the order has no observable effect today — full
- * evidence in `.claude/docs/references/measured-foundations.md`. The order
+ * evidence in `.agents/docs/references/measured-foundations.md`. The order
  * is kept anyway, at no cost, in case some future runner or browser does
  * follow the simulated URL.
  *

package/dist/svelte.d.ts

@@ -0,0 +1,23 @@
+import { render, type RenderResult } from 'vitest-browser-svelte';
+import type { MountOptions } from './mount-core';
+/**
+ * Mounts a Svelte component with `vitest-browser-svelte`, optionally on a
+ * real document route and with test-specific MSW handlers.
+ *
+ * `path`, if given, has to be a same-origin URI starting with `/`: it's
+ * applied with `history.pushState` BEFORE render so the application's
+ * router reads it on mount. `setupNetwork()` restores the original URL
+ * in its `afterEach`.
+ *
+ * `network`, if given, is registered with `worker.use()` before render.
+ *
+ * @example
+ * ```ts
+ * import { mount } from '@yabbadabbadev/pepito/svelte'
+ * import App from './App.svelte'
+ *
+ * const screen = await mount(App, { path: '/products' })
+ * await expect.element(screen.getByText('Products')).toBeVisible()
+ * ```
+ */
+export declare function mount(component: Parameters<typeof render>[0], options?: MountOptions): Promise<RenderResult<any>>;

package/dist/svelte.js

@@ -0,0 +1,25 @@
+import { render } from 'vitest-browser-svelte';
+import { mountCore } from './mount-core';
+/**
+ * Mounts a Svelte component with `vitest-browser-svelte`, optionally on a
+ * real document route and with test-specific MSW handlers.
+ *
+ * `path`, if given, has to be a same-origin URI starting with `/`: it's
+ * applied with `history.pushState` BEFORE render so the application's
+ * router reads it on mount. `setupNetwork()` restores the original URL
+ * in its `afterEach`.
+ *
+ * `network`, if given, is registered with `worker.use()` before render.
+ *
+ * @example
+ * ```ts
+ * import { mount } from '@yabbadabbadev/pepito/svelte'
+ * import App from './App.svelte'
+ *
+ * const screen = await mount(App, { path: '/products' })
+ * await expect.element(screen.getByText('Products')).toBeVisible()
+ * ```
+ */
+export async function mount(component, options) {
+    return mountCore(component, (c) => render(c), options);
+}

package/dist/traffic-registry.d.ts

@@ -1,7 +1,7 @@
 /**
  * Traffic entry as it lives in the registry while the test runs: `body` and
  * `responseBody` are promises because they can only be read once (measured
- * — see `.claude/docs/references/measured-foundations.md`) and are stored
+ * — see `.agents/docs/references/measured-foundations.md`) and are stored
  * without awaiting, so as not to block the `request:start` listener that
  * opens them.
  */
@@ -26,7 +26,7 @@ export interface ResolvedRequest extends Omit<ObservedRequest, 'body' | 'respons
 }
 /**
  * Opens a traffic entry with what can only be read at `request:start`
- * (measured — see `.claude/docs/references/measured-foundations.md`) and
+ * (measured — see `.agents/docs/references/measured-foundations.md`) and
  * marks it in flight.
  * `watchNetwork` (msw-events.ts) is the only caller.
  */
@@ -73,7 +73,7 @@ export declare const QUIESCENCE_TIMEOUT_MS = 4000;
  * in the same tick as the call hasn't yet crossed the real round trip to
  * the service worker that registers its `request:start`, so this function
  * reads the counter at zero by construction, not by actual absence (see
- * `.claude/docs/references/measured-foundations.md`). Whoever needs to
+ * `.agents/docs/references/measured-foundations.md`). Whoever needs to
  * assert an absence or count with precision must go through
  * `snapshotAfterIdle` in `pepito/src/matchers.ts`, which closes that window
  * with a two-observation stability condition; calling this function

package/dist/traffic-registry.js

@@ -6,7 +6,7 @@ const traffic = new Map();
 const pending = new Set();
 /**
  * Opens a traffic entry with what can only be read at `request:start`
- * (measured — see `.claude/docs/references/measured-foundations.md`) and
+ * (measured — see `.agents/docs/references/measured-foundations.md`) and
  * marks it in flight.
  * `watchNetwork` (msw-events.ts) is the only caller.
  */
@@ -99,7 +99,7 @@ export const QUIESCENCE_TIMEOUT_MS = 4000;
  * in the same tick as the call hasn't yet crossed the real round trip to
  * the service worker that registers its `request:start`, so this function
  * reads the counter at zero by construction, not by actual absence (see
- * `.claude/docs/references/measured-foundations.md`). Whoever needs to
+ * `.agents/docs/references/measured-foundations.md`). Whoever needs to
  * assert an absence or count with precision must go through
  * `snapshotAfterIdle` in `pepito/src/matchers.ts`, which closes that window
  * with a two-observation stability condition; calling this function

package/dist/vue.d.ts

@@ -0,0 +1,23 @@
+import { render, type RenderResult } from 'vitest-browser-vue';
+import type { MountOptions } from './mount-core';
+/**
+ * Mounts a Vue component with `vitest-browser-vue`, optionally on a real
+ * document route and with test-specific MSW handlers.
+ *
+ * `path`, if given, has to be a same-origin URI starting with `/`: it's
+ * applied with `history.pushState` BEFORE render so the application's
+ * router reads it on mount. `setupNetwork()` restores the original URL
+ * in its `afterEach`.
+ *
+ * `network`, if given, is registered with `worker.use()` before render.
+ *
+ * @example
+ * ```ts
+ * import { mount } from '@yabbadabbadev/pepito/vue'
+ * import App from './App.vue'
+ *
+ * const screen = await mount(App, { path: '/products' })
+ * await expect.element(screen.getByText('Products')).toBeVisible()
+ * ```
+ */
+export declare function mount(component: Parameters<typeof render>[0], options?: MountOptions): Promise<RenderResult<Record<string, unknown>>>;

package/dist/vue.js

@@ -0,0 +1,25 @@
+import { render } from 'vitest-browser-vue';
+import { mountCore } from './mount-core';
+/**
+ * Mounts a Vue component with `vitest-browser-vue`, optionally on a real
+ * document route and with test-specific MSW handlers.
+ *
+ * `path`, if given, has to be a same-origin URI starting with `/`: it's
+ * applied with `history.pushState` BEFORE render so the application's
+ * router reads it on mount. `setupNetwork()` restores the original URL
+ * in its `afterEach`.
+ *
+ * `network`, if given, is registered with `worker.use()` before render.
+ *
+ * @example
+ * ```ts
+ * import { mount } from '@yabbadabbadev/pepito/vue'
+ * import App from './App.vue'
+ *
+ * const screen = await mount(App, { path: '/products' })
+ * await expect.element(screen.getByText('Products')).toBeVisible()
+ * ```
+ */
+export async function mount(component, options) {
+    return mountCore(component, (c) => render(c), options);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yabbadabbadev/pepito",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Network test utilities for Vitest browser mode: application mounting and matchers over the traffic observed by MSW",
   "type": "module",
   "license": "MIT",
@@ -26,6 +26,18 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "default": "./dist/vue.js"
+    },
+    "./svelte": {
+      "types": "./dist/svelte.d.ts",
+      "default": "./dist/svelte.js"
     }
   },
   "files": [
@@ -51,13 +63,11 @@
   },
   "peerDependencies": {
     "msw": "^2.15.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "vitest": "^4.0.0",
-    "vitest-browser-react": "^2.0.0"
+    "vitest": "^4.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.5",
+    "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
     "@typescript-eslint/eslint-plugin": "^8.67.0",
@@ -80,9 +90,13 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-router": "^8.3.0",
+    "svelte": "^5.57.0",
     "typescript": "^6.0.3",
     "vitest": "^4.1.10",
-    "vitest-browser-react": "^2.2.0"
+    "vitest-browser-react": "^2.2.0",
+    "vitest-browser-svelte": "^3.0.0",
+    "vitest-browser-vue": "^2.1.0",
+    "vue": "^3.5.42"
   },
   "msw": {
     "workerDirectory": [

package/dist/mount.d.ts

@@ -1,45 +0,0 @@
-import type { ReactElement } from 'react';
-import type { RequestHandler } from 'msw';
-import { type RenderResult } from 'vitest-browser-react';
-/** Options for {@link mount}. Both are optional: `mount(<App />)` alone just mounts. */
-export interface MountOptions {
-    /**
-     * Same-origin URI starting with `/`, query and hash included (for example
-     * `/products?filter=bread#detail`). Applied with `history.pushState`
-     * before render so the application's router reads it on mount.
-     */
-    path?: string;
-    /**
-     * MSW handlers of this test's own. Installed with `worker.use()` before
-     * render, so they take priority over the suite's for the same route, and
-     * `setupNetwork()` undoes them in its `afterEach`.
-     */
-    network?: RequestHandler[];
-}
-/**
- * Mounts `ui` with `vitest-browser-react`, optionally on a real document
- * route and with test-specific MSW handlers.
- *
- * `path`, if given, has to be a same-origin URI starting with `/`: it's
- * applied with `history.pushState` BEFORE render because the application's
- * `BrowserRouter` reads the URL on mount and only listens to `popstate`
- * afterwards (measured — see
- * `.claude/docs/references/measured-foundations.md`). The URI can carry
- * query and hash: they flow through the router the same as the path.
- * `setupNetwork()` restores the original URL in its `afterEach`, so every
- * test starts from the same route regardless of what the previous one
- * mounted.
- *
- * `network`, if given, is registered with `worker.use()` before render: its
- * handlers take priority over the suite's for this request, with the same
- * resolution rules as MSW.
- *
- * @example
- * ```tsx
- * import { mount } from '@yabbadabbadev/pepito'
- *
- * const screen = await mount(<App />, { path: '/products?filter=bread' })
- * await expect.element(screen.getByText('filter: bread')).toBeVisible()
- * ```
- */
-export declare function mount(ui: ReactElement, options?: MountOptions): Promise<RenderResult>;

package/dist/mount.js

@@ -1,61 +0,0 @@
-import { render } from 'vitest-browser-react';
-import { requireNetworkContext } from './network-singleton';
-// The '/' prefix alone isn't enough: '//evil.com' is protocol-relative and
-// WHATWG also treats '/\' as introducing an authority, so both would pass
-// it and pushState would be the one throwing the raw SecurityError further
-// down.
-function isSameOriginPath(path) {
-    if (!path.startsWith('/'))
-        return false;
-    try {
-        return new URL(path, location.origin).origin === location.origin;
-    }
-    catch {
-        return false;
-    }
-}
-/**
- * Mounts `ui` with `vitest-browser-react`, optionally on a real document
- * route and with test-specific MSW handlers.
- *
- * `path`, if given, has to be a same-origin URI starting with `/`: it's
- * applied with `history.pushState` BEFORE render because the application's
- * `BrowserRouter` reads the URL on mount and only listens to `popstate`
- * afterwards (measured — see
- * `.claude/docs/references/measured-foundations.md`). The URI can carry
- * query and hash: they flow through the router the same as the path.
- * `setupNetwork()` restores the original URL in its `afterEach`, so every
- * test starts from the same route regardless of what the previous one
- * mounted.
- *
- * `network`, if given, is registered with `worker.use()` before render: its
- * handlers take priority over the suite's for this request, with the same
- * resolution rules as MSW.
- *
- * @example
- * ```tsx
- * import { mount } from '@yabbadabbadev/pepito'
- *
- * const screen = await mount(<App />, { path: '/products?filter=bread' })
- * await expect.element(screen.getByText('filter: bread')).toBeVisible()
- * ```
- */
-export async function mount(ui, options = {}) {
-    const { worker } = requireNetworkContext('mount');
-    const { path, network: testHandlers } = options;
-    if (path !== undefined && !isSameOriginPath(path)) {
-        throw new Error(`pepito: path must be a same-origin URI that starts with '/'; ` +
-            `received: ${path}. A different origin is mocked in the MSW ` +
-            `handlers, not in the mount.`);
-    }
-    // Before render: the app's router reads the URL on mount and only
-    // listens to popstate afterwards. See
-    // docs/knowledge/url-navegacion-browser-mode.md.
-    if (path !== undefined) {
-        history.pushState({}, '', path);
-    }
-    if (testHandlers !== undefined && testHandlers.length > 0) {
-        worker.use(...testHandlers);
-    }
-    return render(ui);
-}