enable mocks in stackblitz

Author: KurtGokhan

examples/vite/src/App.tsx

@@ -1,19 +1,14 @@
-import { setupWorker } from 'msw/browser';
-import { useRef, useState } from 'react';
-import { CommentData, PostData, baseUrl, getMockHandlers } from 'tanstack-query-builder-example-mocks';
-import './App.css';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { useRef, useState } from 'react';
+import { CommentData, PostData, baseUrl, getMockHandlers } from 'tanstack-query-builder-example-mocks';
+import { setupMSW } from 'tanstack-query-builder-example-mocks/setup-msw';
 import { HttpQueryBuilder } from 'tanstack-query-builder/http';
 import { queryClient } from './client';
+import './App.css';
 import './index.css';
 
-const isTest = import.meta.env.MODE === 'test';
-
-await setupWorker(...getMockHandlers(!isTest)).start({
-  onUnhandledRequest: 'bypass',
-  quiet: true,
-});
+await setupMSW(...getMockHandlers()).start({ onUnhandledRequest: 'bypass', quiet: true, waitUntilReady: true });
 
 const builder = new HttpQueryBuilder().withClient(queryClient).withBaseUrl(baseUrl).withTagTypes<{
   post: PostData;
@@ -22,8 +17,6 @@ const builder = new HttpQueryBuilder().withClient(queryClient).withBaseUrl(baseU
   refreshable: unknown;
 }>();
 
-console.log(builder);
-
 const resetMutation = builder.withPath('/reset').withMethod('post').withUpdates('*');
 
 const postsQuery = builder

examples/vite/tsconfig.json

@@ -15,7 +15,8 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "customConditions": ["tanstack-query-builder@dev"]
   },
   "include": ["src", "**/*.d.ts"],
   "references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.test.json" }]

examples/vite/vite.config.ts

@@ -3,10 +3,16 @@
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
+const isStackblitz = process.env.SHELL === '/bin/jsh';
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   optimizeDeps: { exclude: ['tanstack-query-builder'] },
+  server: { port: 3000 },
+  resolve: {
+    conditions: [...(isStackblitz ? ['stackblitz', 'node'] : []), 'tanstack-query-builder@dev'],
+  },
   test: {
     globals: true,
     includeTaskLocation: true,

packages/example-mocks/package.json

@@ -5,7 +5,11 @@
   "type": "module",
   "main": "./src/index.ts",
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./setup-msw": {
+      "default": "./src/setup-msw/setup.ts",
+      "stackblitz": "./src/setup-msw/setup.native.ts"
+    }
   },
   "scripts": {
     "start": "vite",

packages/example-mocks/src/mocks.ts

@@ -23,7 +23,7 @@ function createMockData() {
   return { users, posts, comments };
 }
 
-export function getMockHandlers(withLocalStorage = true) {
+export function getMockHandlers(withLocalStorage = import.meta.env.MODE !== 'test') {
   function saveMockData(saveData = { users, posts, comments }) {
     if (!withLocalStorage) return;
     localStorage.setItem('mockData', JSON.stringify(saveData));

packages/example-mocks/src/setup-msw/setup.native.ts

@@ -0,0 +1,35 @@
+import { setupServer } from 'msw/native';
+
+import type { RequestHandler } from 'msw';
+import type { SetupWorker } from 'msw/browser';
+
+export function setupMSW(...handlers: Array<RequestHandler>): SetupWorker {
+  const server = setupServer(...handlers);
+
+  return {
+    async start(options) {
+      server.listen({
+        onUnhandledRequest: options?.onUnhandledRequest || 'error',
+      });
+      return undefined;
+    },
+    stop() {
+      server.close();
+    },
+    use(...handlers) {
+      server.use(...handlers);
+    },
+    listHandlers() {
+      return server.listHandlers();
+    },
+    resetHandlers() {
+      server.resetHandlers();
+    },
+    restoreHandlers() {
+      return server.restoreHandlers;
+    },
+    get events() {
+      return server.events;
+    },
+  };
+}

packages/example-mocks/src/setup-msw/setup.ts

@@ -0,0 +1,7 @@
+import { setupWorker } from 'msw/browser';
+
+import type { RequestHandler } from 'msw';
+
+export function setupMSW(...handlers: Array<RequestHandler>) {
+  return setupWorker(...handlers);
+}

packages/example-mocks/src/vite-end.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/tanstack-query-builder/src/http/index.ts

@@ -1,2 +1,2 @@
-export * from './request';
 export * from './HttpQueryBuilder';
+export * from './request';