BRIKEV
diff --git a/‎CHANGELOG.md‎
Lines changed: 21 additions & 0 deletions b/‎CHANGELOG.md‎
Lines changed: 21 additions & 0 deletions
diff --git a/‎README.md‎
Lines changed: 36 additions & 16 deletions b/‎README.md‎
Lines changed: 36 additions & 16 deletions
diff --git a/‎docs/.vitepress/theme/components/HomePage.vue‎
Lines changed: 8 additions & 8 deletions b/‎docs/.vitepress/theme/components/HomePage.vue‎
Lines changed: 8 additions & 8 deletions
diff --git a/‎docs/ai-remote-testing.md‎
Lines changed: 10 additions & 4 deletions b/‎docs/ai-remote-testing.md‎
Lines changed: 10 additions & 4 deletions
diff --git a/‎docs/api-mocking.md‎
Lines changed: 35 additions & 15 deletions b/‎docs/api-mocking.md‎
Lines changed: 35 additions & 15 deletions
@@ -1,3 +1,24 @@
+## <small>1.8.0 (2026-05-01)</small>
+
+* feat(plugin): export twd from twd-js/vite-plugin ([9c90803](https://github.com/BRIKEV/twd/commit/9c90803))
+* feat(plugin): inject virtual init script via transformIndexHtml ([4cdc7e5](https://github.com/BRIKEV/twd/commit/4cdc7e5))
+* feat(plugin): add virtual module for twd init ([4674cdb](https://github.com/BRIKEV/twd/commit/4674cdb))
+* feat(plugin): scaffold twd Vite plugin (name + apply: serve) ([7da3ccd](https://github.com/BRIKEV/twd/commit/7da3ccd))
+* feat: add Contacts page with pagination and loader functionality (#239) ([d22b144](https://github.com/BRIKEV/twd/commit/d22b144)), closes [#239](https://github.com/BRIKEV/twd/issues/239)
+* fix(examples): alias twd-js/bundled to dist (not source) in test app ([75f2e0d](https://github.com/BRIKEV/twd/commit/75f2e0d))
+* docs: lead with twd() Vite plugin across docs site and README ([55e1d72](https://github.com/BRIKEV/twd/commit/55e1d72))
+* docs: add better tests for pagination example ([0276d05](https://github.com/BRIKEV/twd/commit/0276d05))
+* docs: add design spec for TWD Vite plugin auto-init POC ([f89ace4](https://github.com/BRIKEV/twd/commit/f89ace4))
+* docs: use absolute GitHub URLs for README images and examples link ([b4278d4](https://github.com/BRIKEV/twd/commit/b4278d4))
+* chore(deps): bump lint-staged to 17 and typescript-eslint patch ([b9a6daa](https://github.com/BRIKEV/twd/commit/b9a6daa))
+* chore: switch tsconfig moduleResolution to Bundler ([69b2861](https://github.com/BRIKEV/twd/commit/69b2861))
+* chore(examples): adopt twd() plugin in tutorial and vue examples ([4cd58f3](https://github.com/BRIKEV/twd/commit/4cd58f3))
+* chore(examples): switch twd-test-app to twd() Vite plugin ([5377325](https://github.com/BRIKEV/twd/commit/5377325))
+* chore(deps-dev): bump @eslint/js from 9.39.4 to 10.0.1 (#236) ([4147382](https://github.com/BRIKEV/twd/commit/4147382)), closes [#236](https://github.com/BRIKEV/twd/issues/236)
+* chore(deps-dev): bump eslint from 9.39.4 to 10.3.0 (#237) ([14348da](https://github.com/BRIKEV/twd/commit/14348da)), closes [#237](https://github.com/BRIKEV/twd/issues/237)
+* test(plugin): cover custom options + testFilePattern round-trip ([6adc100](https://github.com/BRIKEV/twd/commit/6adc100))
+
+
 ## <small>1.7.3 (2026-05-01)</small>
 
 * feat: add hidden assertion and improve test coverage (#232) ([425dd66](https://github.com/BRIKEV/twd/commit/425dd66), closes [#232](https://github.com/BRIKEV/twd/issues/232)
 
@@ -36,25 +36,26 @@ pnpm add twd-js
 
 ## Quick Start
 
-### React / Vue / Angular / Other Frameworks (Bundled / recommended)
+### Vite-based projects (React, Vue, Solid, and more)
 
-TWD now supports any framework via its bundled version.
+Add the `twd()` plugin to your `vite.config.ts`. The plugin auto-loads the sidebar and discovers test files in dev — no entry-file changes required.
 
 ```ts
-// Only load the test sidebar and tests in development mode
-if (import.meta.env.DEV) {
-  const { initTWD } = await import('twd-js/bundled');
-  const tests = import.meta.glob("./**/*.twd.test.ts");
-  
-  // Initialize TWD with tests and optional configuration
-  // Request mocking is automatically initialized by default
-  initTWD(tests, { 
-    open: true, 
-    position: 'left',
-    serviceWorker: true,           // Enable request mocking (default: true)
-    serviceWorkerUrl: '/mock-sw.js' // Custom service worker path (default: '/mock-sw.js')
-  });
-}
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react'; // or vue, solid, etc.
+import { twd } from 'twd-js/vite-plugin';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    twd({
+      testFilePattern: '/**/*.twd.test.{ts,tsx}',
+      open: true,
+      position: 'left',
+    }),
+  ],
+});
 ```
 
 ### Set Up Mock Service Worker
@@ -65,6 +66,25 @@ If you plan to use API mocking, set up the mock service worker:
 npx twd-js init public
 ```
 
+### Non-Vite projects (Angular, Webpack, etc.)
+
+If your project doesn't use Vite, initialize TWD manually in your dev entry point:
+
+```ts
+// Only load the test sidebar and tests in development mode
+if (import.meta.env.DEV) {
+  const { initTWD } = await import('twd-js/bundled');
+  const tests = import.meta.glob('./**/*.twd.test.ts');
+
+  initTWD(tests, {
+    open: true,
+    position: 'left',
+    serviceWorker: true,             // Enable request mocking (default: true)
+    serviceWorkerUrl: '/mock-sw.js', // Custom service worker path (default: '/mock-sw.js')
+  });
+}
+```
+
 Check the [Framework Integration Guide](https://brikev.github.io/twd/frameworks) for more details.
 
 ## Writing Tests
 
@@ -249,19 +249,19 @@ const faqs = [
               <span class="step-line"></span>
             </div>
             <div class="step-content">
-              <h3 class="step-title">Install and add to your entry point</h3>
+              <h3 class="step-title">Install and add the Vite plugin</h3>
               <div class="code-block">
                 <div class="code-header"><span class="code-dot"></span><span class="code-dot"></span><span class="code-dot"></span><span class="code-filename">terminal</span></div>
                 <pre><code>npm install twd-js</code></pre>
               </div>
               <div class="code-block">
-                <div class="code-header"><span class="code-dot"></span><span class="code-dot"></span><span class="code-dot"></span><span class="code-filename">src/main.tsx</span></div>
-                <pre><code><span class="hl-comment">// Only load TWD in development</span>
-<span class="hl-keyword">if</span> (<span class="hl-meta">import.meta.env.DEV</span>) {
-  <span class="hl-keyword">const</span> { initTWD } = <span class="hl-keyword">await</span> <span class="hl-keyword">import</span>(<span class="hl-string">'twd-js/bundled'</span>);
-  <span class="hl-keyword">const</span> tests = <span class="hl-meta">import.meta.glob</span>(<span class="hl-string">"./**/*.twd.test.ts"</span>);
-  <span class="hl-func">initTWD</span>(tests, { <span class="hl-prop">open</span>: <span class="hl-keyword">true</span> });
-}</code></pre>
+                <div class="code-header"><span class="code-dot"></span><span class="code-dot"></span><span class="code-dot"></span><span class="code-filename">vite.config.ts</span></div>
+                <pre><code><span class="hl-keyword">import</span> { defineConfig } <span class="hl-keyword">from</span> <span class="hl-string">'vite'</span>;
+<span class="hl-keyword">import</span> { twd } <span class="hl-keyword">from</span> <span class="hl-string">'twd-js/vite-plugin'</span>;
+
+<span class="hl-keyword">export default</span> <span class="hl-func">defineConfig</span>({
+  <span class="hl-prop">plugins</span>: [<span class="hl-func">twd</span>({ <span class="hl-prop">open</span>: <span class="hl-keyword">true</span> })],
+});</code></pre>
               </div>
             </div>
           </div>
 
@@ -56,16 +56,20 @@ npm install --save-dev twd-relay
 
 ### Option A: Vite Plugin (recommended)
 
-If you already use Vite, attach the relay to your dev server — the WebSocket runs on the same host/port:
+If you already use Vite, attach the relay to your dev server alongside the `twd()` plugin — the WebSocket runs on the same host/port:
 
 ```ts
 // vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { twd } from 'twd-js/vite-plugin';
 import { twdRemote } from 'twd-relay/vite';
 
 export default defineConfig({
   plugins: [
     react(),
-    twdRemote(),  // adds /__twd/ws to your dev server
+    twd(),         // sidebar + test discovery
+    twdRemote(),   // adds /__twd/ws to your dev server
   ],
 });
 ```
@@ -76,8 +80,10 @@ Then connect the browser client in your app entry:
 // main.ts
 import { createBrowserClient } from 'twd-relay/browser';
 
-const client = createBrowserClient();
-client.connect();
+if (import.meta.env.DEV) {
+  const client = createBrowserClient();
+  client.connect();
+}
 ```
 
 When using the Vite plugin the URL is auto-detected — no configuration needed.
 
@@ -30,13 +30,13 @@ The service worker file (`mock-sw.js`) is only needed during development for API
 ```ts
 // vite.config.ts
 import { defineConfig } from 'vite';
-import { removeMockServiceWorker } from 'twd-js';
+import { twd, removeMockServiceWorker } from 'twd-js/vite-plugin';
 
 export default defineConfig({
   plugins: [
-    // ... other plugins
-    removeMockServiceWorker()
-  ]
+    twd(), // dev: discovery + sidebar + request mocking
+    removeMockServiceWorker(), // build: strip mock-sw.js from prod dist
+  ],
 });
 ```
 
@@ -48,26 +48,46 @@ The plugin only runs during build time (`apply: 'build'`) and will not affect yo
 
 ### 3. Initialize Mocking
 
-Initialize request mocking in your main entry file using the standard TWD setup:
+The `twd()` Vite plugin (recommended) initializes request mocking automatically — no entry-file changes required. Mocking is enabled by default (`serviceWorker: true`).
 
 ```ts
-// src/main.tsx (or your main entry file)
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { twd } from 'twd-js/vite-plugin';
+
+export default defineConfig({
+  plugins: [
+    twd({
+      serviceWorker: true,             // default — request mocking enabled
+      serviceWorkerUrl: '/mock-sw.js', // default
+    }),
+  ],
+});
+```
+
+For non-Vite projects, initialize manually in your entry file. Both `initTWD` and the standard setup register the service worker for you:
+
+```ts
+// Bundled (recommended for non-Vite projects)
+if (import.meta.env.DEV) {
+  const { initTWD } = await import('twd-js/bundled');
+  const tests = import.meta.glob('./**/*.twd.test.ts');
+  initTWD(tests, { serviceWorker: true });
+}
+```
+
+```ts
+// Standard (React-only, full control)
 if (import.meta.env.DEV) {
-  const testModules = import.meta.glob("./**/*.twd.test.ts");
+  const testModules = import.meta.glob('./**/*.twd.test.ts');
   const { initTests, twd, TWDSidebar } = await import('twd-js');
   initTests(testModules, <TWDSidebar open={true} position="left" />, createRoot);
-  twd.initRequestMocking()
-    .then(() => {
-      console.log("Request mocking initialized");
-    })
-    .catch((err) => {
-      console.error("Error initializing request mocking:", err);
-    });
+  twd.initRequestMocking().catch(console.error);
 }
 ```
 
 ::: tip
-You only need to call `initRequestMocking()` once in your main entry file, not in individual tests.
+You only need to register request mocking once (via the plugin or `initTWD`/`initRequestMocking`), not per test.
 :::
 
 ## Basic Mocking