creevey 0.10.0-beta.44 → 0.10.0-beta.46

package/src/server/master/api.ts

@@ -1,25 +1,28 @@
-import Runner from './runner.js';
-import { Request, Response, CreeveyUpdate } from '../../types.js';
+import { Data, WebSocket, WebSocketServer } from 'ws';
+import type { Request, Response, CreeveyUpdate } from '../../types.js';
+import type { TestsManager } from './testsManager.js';
+import type Runner from './runner.js';
 import { logger } from '../logger.js';
-import { TestsManager } from './testsManager.js';
-import HyperExpress from 'hyper-express';
 
-interface CustomWSServer {
-  clients: Set<HyperExpress.Websocket>;
-  publish: (message: string) => void;
+function broadcast(wss: WebSocketServer, message: Response): void {
+  wss.clients.forEach((ws) => {
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(message));
+    }
+  });
 }
 
-// Helper function for HyperExpress WebSocket broadcasting
-function broadcastHyperExpress(wss: CustomWSServer, message: Response): void {
-  const serializedMessage = JSON.stringify(message);
-  wss.publish(serializedMessage);
+function send(ws: WebSocket, message: Response): void {
+  if (ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(message));
+  }
 }
 
-// The class-based implementation of CreeveyApi
+// The class-based implementation of CreeveyApi for native WebSockets
 export class CreeveyApi {
   private runner: Runner | null = null;
   private testsManager: TestsManager;
-  private wss: CustomWSServer | null = null;
+  private wss: WebSocketServer | null = null;
 
   constructor(testsManager: TestsManager, runner?: Runner) {
     this.testsManager = testsManager;
@@ -30,7 +33,7 @@ export class CreeveyApi {
     }
   }
 
-  subscribe(wss: CustomWSServer): void {
+  subscribe(wss: WebSocketServer): void {
     this.wss = wss;
 
     // If we have a runner, subscribe to its updates
@@ -46,26 +49,20 @@ export class CreeveyApi {
     }
   }
 
-  handleMessage(ws: HyperExpress.Websocket, message: string | Buffer): void {
+  handleMessage(ws: WebSocket, message: Data): void {
     if (typeof message != 'string') {
-      if (Buffer.isBuffer(message)) {
-        message = message.toString('utf-8');
-      } else {
-        logger().info('unhandled message', message);
-        return;
-      }
+      logger().info('unhandled message', message);
+      return;
     }
 
     const command = JSON.parse(message) as Request;
-    const sendResponse = (response: Response) => {
-      ws.send(JSON.stringify(response));
-    };
 
     if (this.runner) {
       // Normal mode handling with runner
       switch (command.type) {
         case 'status': {
-          sendResponse({ type: 'status', payload: this.runner.status });
+          const status = this.runner.status;
+          send(ws, { type: 'status', payload: status });
           return;
         }
         case 'start': {
@@ -98,7 +95,7 @@ export class CreeveyApi {
         }
         case 'status': {
           // In update mode, respond with static status including tests data
-          sendResponse({
+          send(ws, {
             type: 'status',
             payload: {
               isRunning: false,
@@ -123,6 +120,6 @@ export class CreeveyApi {
 
     const message: Response = { type: 'update', payload };
 
-    broadcastHyperExpress(this.wss, message);
+    broadcast(this.wss, message);
   }
 }

package/src/server/master/handlers/capture-handler.ts

@@ -1,39 +1,20 @@
-import { Request, Response } from 'hyper-express';
 import cluster from 'cluster';
 import { subscribeOnWorker, sendStoriesMessage } from '../../messages.js';
 import { CaptureOptions, isDefined } from '../../../types.js';
 
-export async function captureHandler(request: Request, response: Response): Promise<void> {
-  const { workerId, options } = await request.json<
-    { workerId: number; options?: CaptureOptions },
-    {
-      workerId: number;
-      options?: CaptureOptions;
-    }
-  >({
-    workerId: 0,
-    options: undefined,
-  });
-
+export function captureHandler({ workerId, options }: { workerId: number; options?: CaptureOptions }): void {
   const worker = Object.values(cluster.workers ?? {})
     .filter(isDefined)
     .find((worker) => worker.process.pid == workerId);
 
   // NOTE: Hypothetical case when someone send to us capture req and we don't have a worker with browser session for it
   if (!worker) {
-    response.send();
     return;
   }
 
-  await new Promise<void>((resolve) => {
-    const unsubscribe = subscribeOnWorker(worker, 'stories', (message) => {
-      if (message.type != 'capture') return;
-      unsubscribe();
-      resolve();
-    });
-    sendStoriesMessage(worker, { type: 'capture', payload: options });
+  const unsubscribe = subscribeOnWorker(worker, 'stories', (message) => {
+    if (message.type != 'capture') return;
+    unsubscribe();
   });
-
-  // TODO Pass screenshot result to show it in inspector
-  response.send('Ok');
+  sendStoriesMessage(worker, { type: 'capture', payload: options });
 }

package/src/server/master/handlers/ping-handler.ts

@@ -1,5 +1,6 @@
-import { Request, Response } from 'hyper-express';
+import { IncomingMessage, ServerResponse } from 'http';
 
-export function pingHandler(_request: Request, response: Response): void {
-  response.send('pong');
+export function pingHandler(_request: IncomingMessage, response: ServerResponse): void {
+  response.setHeader('Content-Type', 'text/plain');
+  response.end('pong');
 }

package/src/server/master/handlers/static-handler.ts

@@ -1,29 +1,18 @@
-import { Request, Response } from 'hyper-express';
 import path from 'path';
 import fs from 'fs';
-import { logger } from '../../logger.js';
 
-export function createStaticFileHandler(baseDir: string, pathPrefix?: string) {
-  return (request: Request, response: Response): void => {
-    try {
-      const decodedPath = decodeURIComponent(request.path);
-      const relativePath = pathPrefix ? decodedPath.replace(pathPrefix, '') : decodedPath;
-      let filePath = path.join(baseDir, relativePath || 'index.html');
+export function staticHandler(baseDir: string, pathPrefix?: string) {
+  return (requestedPath: string): string | undefined => {
+    const relativePath = pathPrefix ? requestedPath.replace(pathPrefix, '') : requestedPath;
+    let filePath = path.join(baseDir, relativePath || 'index.html');
 
-      // If the path points to a directory, append index.html
-      if (fs.existsSync(filePath) && fs.statSync(filePath).isDirectory()) {
-        filePath = path.join(filePath, 'index.html');
-      }
-
-      if (!fs.existsSync(filePath)) {
-        response.status(404).send('File not found');
-        return;
-      }
+    // If the path points to a directory, append index.html
+    if (fs.existsSync(filePath) && fs.statSync(filePath).isDirectory()) {
+      filePath = path.join(filePath, 'index.html');
+    }
 
-      response.sendFile(filePath);
-    } catch (error) {
-      logger().error('Error serving file', error);
-      response.status(500).send('Internal server error');
+    if (!fs.existsSync(filePath)) {
+      return undefined;
     }
   };
 }

package/src/server/master/handlers/stories-handler.ts

@@ -1,48 +1,20 @@
-import { Request, Response } from 'hyper-express';
 import cluster from 'cluster';
 import { emitStoriesMessage, sendStoriesMessage } from '../../messages.js';
 import { isDefined, StoryInput } from '../../../types.js';
 import { deserializeStory } from '../../../shared/index.js';
 
-export function createStoriesHandler() {
-  let setStoriesCounter = 0;
+export function storiesHandler({ stories }: { stories: [string, StoryInput[]][] }): void {
+  const deserializedStories = stories.map<[string, StoryInput[]]>(([file, stories]) => [
+    file,
+    stories.map(deserializeStory),
+  ]);
 
-  // TODO We need this handler for getting stories updates from a browser
-  return async (request: Request, response: Response): Promise<void> => {
-    const { setStoriesCounter: counter, stories } = await request.json<
-      {
-        setStoriesCounter: number;
-        stories: [string, StoryInput[]][];
-      },
-      {
-        setStoriesCounter: number;
-        stories: [string, StoryInput[]][];
-      }
-    >({
-      setStoriesCounter: 0,
-      stories: [],
-    });
-
-    if (setStoriesCounter >= counter) {
-      response.send();
-      return;
-    }
-
-    const deserializedStories = stories.map<[string, StoryInput[]]>(([file, stories]) => [
-      file,
-      stories.map(deserializeStory),
-    ]);
+  emitStoriesMessage({ type: 'update', payload: deserializedStories });
 
-    setStoriesCounter = counter;
-    emitStoriesMessage({ type: 'update', payload: deserializedStories });
-
-    Object.values(cluster.workers ?? {})
-      .filter(isDefined)
-      .filter((worker) => worker.isConnected())
-      .forEach((worker) => {
-        sendStoriesMessage(worker, { type: 'update', payload: deserializedStories });
-      });
-
-    response.send();
-  };
+  Object.values(cluster.workers ?? {})
+    .filter(isDefined)
+    .filter((worker) => worker.isConnected())
+    .forEach((worker) => {
+      sendStoriesMessage(worker, { type: 'update', payload: deserializedStories });
+    });
 }

package/src/server/master/server.ts

@@ -1,121 +1,237 @@
+import fs from 'fs';
+import url from 'url';
 import path from 'path';
-import HyperExpress from 'hyper-express';
+import { IncomingMessage, ServerResponse, createServer } from 'http';
+import { WebSocketServer, WebSocket, RawData } from 'ws';
 import { fileURLToPath, pathToFileURL } from 'url';
-import { CreeveyApi } from './api.js';
+import { shutdownOnException } from '../utils.js';
 import { subscribeOn } from '../messages.js';
 import { noop } from '../../types.js';
 import { logger } from '../logger.js';
-import { pingHandler, createStoriesHandler, captureHandler, createStaticFileHandler } from './handlers/index.js';
+import { CreeveyApi } from './api.js';
+import { pingHandler, captureHandler, storiesHandler, staticHandler } from './handlers/index.js';
 
-const importMetaUrl = pathToFileURL(__filename).href;
+function json<T = unknown>(
+  handler: (data: T) => void,
+  defaultValue: T,
+): (request: IncomingMessage, response: ServerResponse) => void {
+  return (request: IncomingMessage, response: ServerResponse) => {
+    const chunks: Buffer[] = [];
 
-export function start(reportDir: string, port: number, ui: boolean): (api: CreeveyApi) => void {
-  let resolveApi: (api: CreeveyApi) => void = noop;
-  const creeveyApi = new Promise<CreeveyApi>((resolve) => (resolveApi = resolve));
+    request.on('data', (chunk: Buffer) => {
+      chunks.push(chunk);
+    });
 
-  // Create HyperExpress server instance
-  const server = new HyperExpress.Server();
+    request.on('end', () => {
+      try {
+        const body = Buffer.concat(chunks);
+        const value = body.length === 0 ? defaultValue : (JSON.parse(body.toString('utf-8')) as T);
 
-  // Store active WebSocket connections
-  const activeConnections = new Set<HyperExpress.Websocket>();
+        handler(value);
+        response.end();
+      } catch (error) {
+        logger().error('Failed to parse JSON', error);
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        response.statusCode = 500;
+        response.setHeader('Content-Type', 'text/plain');
+        response.end(`Failed to parse JSON: ${errorMessage}`);
+      }
+    });
 
-  // Enable CORS for all routes
-  server.use((request, response, next) => {
-    response.header('Access-Control-Allow-Origin', '*');
-    response.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
-    response.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
+    request.on('error', (error) => {
+      logger().error('Failed to parse JSON', error);
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      response.statusCode = 500;
+      response.setHeader('Content-Type', 'text/plain');
+      response.end(`Failed to parse JSON: ${errorMessage}`);
+    });
+  };
+}
 
-    if (request.method === 'OPTIONS') {
-      return response.status(200).send();
+function file(handler: (requestedPath: string) => string | undefined) {
+  return (request: IncomingMessage, response: ServerResponse) => {
+    const parsedUrl = url.parse(request.url ?? '/', true);
+    const requestedPath = parsedUrl.pathname ?? '/';
+
+    try {
+      const filePath = handler(requestedPath);
+      if (filePath) {
+        const stat = fs.statSync(filePath);
+        // Set appropriate MIME type
+        const ext = path.extname(filePath).toLowerCase();
+        const mimeTypes: Record<string, string> = {
+          '.html': 'text/html',
+          '.js': 'application/javascript',
+          '.css': 'text/css',
+          '.json': 'application/json',
+          '.png': 'image/png',
+          '.jpg': 'image/jpeg',
+          '.jpeg': 'image/jpeg',
+          '.gif': 'image/gif',
+          '.svg': 'image/svg+xml',
+          '.ico': 'image/x-icon',
+        };
+
+        const contentType = mimeTypes[ext] || 'application/octet-stream';
+
+        response.statusCode = 200;
+        response.setHeader('Content-Type', contentType);
+        response.setHeader('Content-Length', stat.size);
+
+        // Stream the file
+        const stream = fs.createReadStream(filePath);
+        stream.pipe(response);
+
+        stream.on('error', (error) => {
+          logger().error('Error streaming file', error);
+          if (!response.headersSent) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            response.statusCode = 500;
+            response.setHeader('Content-Type', 'text/plain');
+            response.end(`Internal server error: ${errorMessage}`);
+          }
+        });
+      } else {
+        logger().error('File not found', requestedPath);
+        response.statusCode = 404;
+        response.setHeader('Content-Type', 'text/plain');
+        response.end('File not found');
+      }
+    } catch (error) {
+      logger().error('Failed to serve file', error);
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      response.statusCode = 500;
+      response.setHeader('Content-Type', 'text/plain');
+      response.end(`Failed to serve file: ${errorMessage}`);
     }
+  };
+}
 
-    next();
-  });
-
-  // Health check endpoint
-  server.get('/ping', pingHandler);
-
-  // Stories endpoint
-  server.post('/stories', createStoriesHandler());
-
-  // Capture endpoint
-  server.post('/capture', captureHandler);
+const importMetaUrl = pathToFileURL(__filename).href;
 
-  // Serve report files
-  server.get('/report/*', createStaticFileHandler(reportDir, '/report/'));
+export function start(reportDir: string, port: number, ui: boolean): (api: CreeveyApi) => void {
+  let wss: WebSocketServer | null = null;
+  let creeveyApi: CreeveyApi | null = null;
+  let resolveApi: (api: CreeveyApi) => void = noop;
 
-  // Serve static files
   const webDir = path.join(path.dirname(fileURLToPath(importMetaUrl)), '../../client/web');
-  server.get('/*', createStaticFileHandler(webDir));
-
-  // If UI mode, wait for CreeveyApi to be resolved
-  if (ui) {
-    // Create a custom broadcast function that works with our connections
-    const broadcast = (message: string) => {
-      for (const connection of activeConnections) {
-        connection.send(message);
+  const server = createServer();
+
+  const routes = [
+    {
+      path: '/ping',
+      method: 'GET',
+      handler: pingHandler,
+    },
+    {
+      path: '/stories',
+      method: 'POST',
+      handler: json(storiesHandler, { stories: [] }),
+    },
+    {
+      path: '/capture',
+      method: 'POST',
+      handler: json(captureHandler, { workerId: 0, options: undefined }),
+    },
+    {
+      path: '/report/',
+      method: 'GET',
+      handler: file(staticHandler(reportDir, '/report/')),
+    },
+    {
+      path: '/',
+      method: 'GET',
+      handler: file(staticHandler(webDir)),
+    },
+  ];
+
+  const router = (request: IncomingMessage, response: ServerResponse): void => {
+    const parsedUrl = url.parse(request.url ?? '/', true);
+    const path = parsedUrl.pathname ?? '/';
+    const method = request.method ?? 'GET';
+
+    try {
+      const route = routes.find((route) => path.startsWith(route.path) && route.method === method);
+      if (route) {
+        route.handler(request, response);
+      } else {
+        response.statusCode = 404;
+        response.setHeader('Content-Type', 'text/plain');
+        response.end('Not Found');
       }
-    };
-
-    // Create a custom WebSocket server that simulates the standard behavior
-    const customWsServer = {
-      clients: activeConnections,
-      publish: broadcast,
-    };
+    } catch (error) {
+      logger().error('Request handling error', error);
+      response.statusCode = 500;
+      response.setHeader('Content-Type', 'text/plain');
+      response.end('Internal Server Error');
+    }
+  };
 
-    let api: CreeveyApi | null = null;
+  server.on('request', (request: IncomingMessage, response: ServerResponse): void => {
+    response.setHeader('Access-Control-Allow-Origin', '*');
+    response.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    response.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
 
-    server.use(async (request, _response, next) => {
-      if (!api && request.path === '/') {
-        api = await creeveyApi;
-        api.subscribe(customWsServer);
-      }
-      next();
-    });
+    if (request.method === 'OPTIONS') {
+      response.statusCode = 200;
+      response.end();
+      return;
+    }
 
-    // Create WebSocket listener
-    server.ws('/', (ws) => {
-      // Add connection to the set of active connections
-      activeConnections.add(ws);
+    router(request, response);
+  });
 
-      // Handle message events
-      ws.on('message', (message: string | Buffer) => {
-        api?.handleMessage(ws, message);
+  if (ui) {
+    wss = new WebSocketServer({ server });
+    wss.on('connection', (ws: WebSocket) => {
+      ws.on('message', (message: RawData, isBinary: boolean) => {
+        if (creeveyApi) {
+          // NOTE Text messages are passed as Buffer https://github.com/websockets/ws/releases/tag/8.0.0
+          // eslint-disable-next-line @typescript-eslint/no-base-to-string
+          creeveyApi.handleMessage(ws, isBinary ? message : message.toString('utf-8'));
+          return;
+        }
       });
 
-      // Handle close events to clean up connections
-      ws.on('close', () => {
-        activeConnections.delete(ws);
+      ws.on('error', (error) => {
+        logger().error('WebSocket error', error);
       });
     });
+
+    wss.on('error', (error) => {
+      logger().error('WebSocket error', error);
+    });
   }
 
-  // Shutdown handling
   subscribeOn('shutdown', () => {
-    // Close all WebSocket connections
-    for (const connection of activeConnections) {
-      try {
-        connection.close();
-      } catch (error) {
-        logger().error('Error closing WebSocket connection', error);
-      }
+    if (wss) {
+      wss.clients.forEach((ws) => {
+        ws.close();
+      });
+      wss.close();
     }
 
-    // Close the server
     server.close();
   });
 
-  // Start server
   server
-    .listen(port)
-    .then(() => {
+    .listen(port, () => {
       logger().info(`Server starting on port ${port}`);
     })
-    .catch((error: unknown) => {
+    .on('error', (error: unknown) => {
       logger().error('Failed to start server', error);
       process.exit(1);
     });
 
+  void new Promise<CreeveyApi>((resolve) => (resolveApi = resolve))
+    .then((api) => {
+      creeveyApi = api;
+      if (wss) {
+        creeveyApi.subscribe(wss);
+      }
+    })
+    .catch(shutdownOnException);
+
   // Return the function to resolve the API
   return resolveApi;
 }

package/src/server/playwright/docker-file.ts

@@ -1,7 +1,7 @@
 import { readFile } from 'fs/promises';
 import { pathToFileURL } from 'url';
 import semver from 'semver';
-import { exec } from 'shelljs';
+import sh from 'shelljs';
 
 const importMetaUrl = pathToFileURL(__filename).href;
 
@@ -11,7 +11,7 @@ export async function playwrightDockerFile(browser: string, version: string): Pr
 
   let npmRegistry;
   try {
-    npmRegistry = exec('npm config get registry', { silent: true }).stdout.trim();
+    npmRegistry = sh.exec('npm config get registry', { silent: true }).stdout.trim();
   } catch {
     /* noop */
   }

package/src/server/playwright/internal.ts

@@ -439,7 +439,9 @@ export class InternalBrowser {
   }
 
   private async resolveCreeveyHost(): Promise<void> {
-    const addresses = getAddresses();
+    const storybookUrl = this.#page.url();
+    const storybookHost = new URL(storybookUrl).hostname;
+    const addresses = [storybookHost, ...getAddresses()];
 
     this.#serverHost = await this.#page.evaluate(
       ([hosts, port]) => {

package/src/server/selenium/internal.ts

@@ -591,7 +591,9 @@ export class InternalBrowser {
   }
 
   private async resolveCreeveyHost(): Promise<void> {
-    const addresses = getAddresses();
+    const storybookUrl = await this.#browser.getCurrentUrl();
+    const storybookHost = new URL(storybookUrl).hostname;
+    const addresses = [storybookHost, ...getAddresses()];
 
     this.#serverHost = await this.#browser.executeAsyncScript(
       function (hosts: string[], port: number, callback: (host?: string | null) => void) {