refactor: extract shared e2e helpers and vite crypto stub plugin

- Move waitForReactMount to e2e/helpers/index.ts
- Move crypto stub plugin to scripts/vite-crypto-stub.ts
- Update both vite configs and both e2e test files to use shared utilities

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

apps/console/vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
+import { viteCryptoStub } from '../../scripts/vite-crypto-stub';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,27 +12,8 @@ export default defineConfig({
     'process.version': '"0.0.0"',
   },
 
-  // @objectstack/core@2.0.4 statically imports Node.js crypto (for plugin hashing).
-  // The code already has a browser fallback, so we provide an empty stub instead of
-  // marking it as external (which emits a bare `import 'crypto'` that browsers reject).
-  // enforce: 'pre' ensures this runs before Vite's built-in browser-external resolve.
   plugins: [
-    {
-      name: 'stub-crypto',
-      enforce: 'pre',
-      resolveId(id: string) {
-        if (id === 'crypto') return '\0crypto-stub';
-      },
-      load(id: string) {
-        if (id === '\0crypto-stub') {
-          return [
-            'export function createHash() { return { update() { return this; }, digest() { return ""; } }; }',
-            'export function createVerify() { return { update() { return this; }, end() {}, verify() { return false; } }; }',
-            'export default {};',
-          ].join('\n');
-        }
-      },
-    },
+    viteCryptoStub(),
     react(),
   ],
   resolve: {

e2e/console-rendering.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { waitForReactMount } from './helpers';
 
 /**
  * Console rendering & navigation E2E tests.
@@ -8,14 +9,6 @@ import { test, expect } from '@playwright/test';
  * the "blank page on Vercel" issue.
  */
 
-/** Wait for React to mount (at least one child inside #root). */
-async function waitForReactMount(page: import('@playwright/test').Page) {
-  await page.waitForFunction(
-    () => (document.getElementById('root')?.children.length ?? 0) > 0,
-    { timeout: 30_000 },
-  );
-}
-
 test.describe('Console Rendering', () => {
   test('should not have critical console errors during bootstrap', async ({ page }) => {
     const criticalErrors: string[] = [];

e2e/helpers/index.ts

@@ -0,0 +1,9 @@
+import type { Page } from '@playwright/test';
+
+/** Wait for React to mount (at least one child inside #root). */
+export async function waitForReactMount(page: Page) {
+  await page.waitForFunction(
+    () => (document.getElementById('root')?.children.length ?? 0) > 0,
+    { timeout: 30_000 },
+  );
+}

e2e/smoke.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { waitForReactMount } from './helpers';
 
 /**
  * Smoke tests for the console production build.
@@ -12,14 +13,6 @@ import { test, expect } from '@playwright/test';
  *   - React failing to mount into #root
  */
 
-/** Wait for React to mount (at least one child inside #root). */
-async function waitForReactMount(page: import('@playwright/test').Page) {
-  await page.waitForFunction(
-    () => (document.getElementById('root')?.children.length ?? 0) > 0,
-    { timeout: 30_000 },
-  );
-}
-
 test.describe('Console App – Smoke', () => {
   test('should load the page without JavaScript errors', async ({ page }) => {
     const errors: string[] = [];

examples/msw-todo/vite.config.ts

@@ -1,29 +1,11 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { viteCryptoStub } from '../../scripts/vite-crypto-stub';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  // @objectstack/core@2.0.4 statically imports Node.js crypto (for plugin hashing).
-  // The code already has a browser fallback, so we provide an empty stub instead of
-  // marking it as external (which emits a bare `import 'crypto'` that browsers reject).
-  // enforce: 'pre' ensures this runs before Vite's built-in browser-external resolve.
   plugins: [
-    {
-      name: 'stub-crypto',
-      enforce: 'pre',
-      resolveId(id: string) {
-        if (id === 'crypto') return '\0crypto-stub';
-      },
-      load(id: string) {
-        if (id === '\0crypto-stub') {
-          return [
-            'export function createHash() { return { update() { return this; }, digest() { return ""; } }; }',
-            'export function createVerify() { return { update() { return this; }, end() {}, verify() { return false; } }; }',
-            'export default {};',
-          ].join('\n');
-        }
-      },
-    },
+    viteCryptoStub(),
     react(),
   ],
   server: {

scripts/vite-crypto-stub.ts

@@ -0,0 +1,31 @@
+import type { Plugin } from 'vite';
+
+/**
+ * Vite plugin that stubs the Node.js `crypto` module for browser builds.
+ *
+ * @objectstack/core statically imports `createHash` from `crypto` for plugin
+ * hashing. The code already has a browser fallback, so we provide a no-op stub
+ * instead of marking it as external (which emits a bare `import 'crypto'` that
+ * browsers reject, causing a blank page).
+ *
+ * Must use `enforce: 'pre'` so it runs before Vite's built-in
+ * browser-external resolve.
+ */
+export function viteCryptoStub(): Plugin {
+  return {
+    name: 'stub-crypto',
+    enforce: 'pre',
+    resolveId(id: string) {
+      if (id === 'crypto') return '\0crypto-stub';
+    },
+    load(id: string) {
+      if (id === '\0crypto-stub') {
+        return [
+          'export function createHash() { return { update() { return this; }, digest() { return ""; } }; }',
+          'export function createVerify() { return { update() { return this; }, end() {}, verify() { return false; } }; }',
+          'export default {};',
+        ].join('\n');
+      }
+    },
+  };
+}