creevey 0.7.39 → 0.9.0-beta.0

package/lib/esm/server/loaders/babel/register.js

@@ -5,7 +5,7 @@ import { addHook } from 'pirates';
 import { isDefined } from '../../../types';
 import { extensions } from '../../utils';
 import plugin from './creevey-plugin';
-import { hasDocsAddon, hasSvelteCSFAddon } from '../../storybook/helpers';
+import { hasDocsAddon, hasSvelteCSFAddon, isStorybookVersionLessThan } from '../../storybook/helpers';
 let parents = null;
 let story = null; //@ts-expect-error private field doesn't have types
 // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
@@ -69,7 +69,8 @@ function getRequireContext(rootDir) {
 }
 
 export default async function register(config, debug = false) {
-  const requireContext = getRequireContext(config.storybookDir);
+  const rootDir = isStorybookVersionLessThan(6, 4) ? config.storybookDir : process.cwd();
+  const requireContext = getRequireContext(rootDir);
   const preview = resolve(config.storybookDir, 'preview');
   if (hasDocsAddon()) await (await import('../hooks/mdx')).addMDXHook(() => story);
   if (hasSvelteCSFAddon()) await (await import('../hooks/svelte')).addSvelteHook(() => story); // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call

package/lib/esm/server/master/index.js

@@ -1,10 +1,10 @@
 import path from 'path';
-import { writeFileSync, copyFile, readdir, mkdir, readdirSync, existsSync } from 'fs';
+import { writeFileSync, copyFile, readdir, mkdir, existsSync } from 'fs';
 import { promisify } from 'util';
 import master from './master';
 import creeveyApi from './api';
 import { isDefined } from '../../types';
-import { shutdown, shutdownWorkers, testsToImages } from '../utils';
+import { shutdown, shutdownWorkers, testsToImages, readDirRecursive } from '../utils';
 import { subscribeOn } from '../messages';
 import { logger } from '../logger';
 const copyFileAsync = promisify(copyFile);
@@ -37,12 +37,6 @@ function reportDataModule(data) {
 `;
 }
 
-function readDirRecursive(dirPath) {
-  return [].concat(...readdirSync(dirPath, {
-    withFileTypes: true
-  }).map(dirent => dirent.isDirectory() ? readDirRecursive(`${dirPath}/${dirent.name}`) : [`${dirPath}/${dirent.name}`]));
-}
-
 function outputUnnecessaryImages(imagesDir, images) {
   if (!existsSync(imagesDir)) return;
   const unnecessaryImages = readDirRecursive(imagesDir).map(imagePath => path.posix.relative(imagesDir, imagePath)).filter(imagePath => !images.has(imagePath));
@@ -86,9 +80,9 @@ export default async function (config, options, resolveApi) {
   });
   runner = await master(config, {
     watch: options.ui,
-    debug: options.debug
+    debug: options.debug,
+    port: options.port
   });
-  await runner.init();
 
   if (options.saveReport) {
     await copyStatics(config.reportDir);

package/lib/esm/server/master/master.js

@@ -27,6 +27,7 @@ export default async function master(config, options) {
   } catch (error) {// Ignore error
   }
 
+  await runner.init();
   const tests = await loadTestsFromStories(Object.keys(config.browsers), listener => config.storiesProvider(config, options, listener), testsDiff => {
     runner.updateTests(testsDiff);
     saveTestsJson(runner.tests, config.reportDir);

package/lib/esm/server/master/pool.js

@@ -2,8 +2,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import cluster from 'cluster';
 import { EventEmitter } from 'events';
-import { isWorkerMessage, isTestMessage } from '../../types';
-import { sendTestMessage, sendShutdownMessage } from '../messages';
+import { isWorkerMessage } from '../../types';
+import { sendTestMessage, sendShutdownMessage, subscribeOnWorker } from '../messages';
 import { isShuttingDown } from '../utils';
 const FORK_RETRIES = 5;
 export default class Pool extends EventEmitter {
@@ -151,37 +151,37 @@ export default class Pool extends EventEmitter {
     return test.retries < this.maxRetries && !this.forcedStop;
   }
 
+  handleTestResult(worker, test, result) {
+    const shouldRetry = result.status == 'failed' && this.shouldRetry(test);
+
+    if (shouldRetry) {
+      test.retries += 1;
+      this.queue[this.failFast ? 'unshift' : 'push'](test);
+    }
+
+    this.sendStatus({
+      id: test.id,
+      status: shouldRetry ? 'retrying' : result.status,
+      result
+    });
+    worker.isRunning = false;
+    setImmediate(() => this.process());
+  }
+
   subscribe(worker, test) {
-    worker.once('message', message => {
-      if (!isWorkerMessage(message) && !isTestMessage(message)) return;
-      if (message.type != 'end' && message.type != 'error') return;
-      let result;
-
-      if (message.type == 'error') {
-        this.gracefullyKill(worker);
-        result = {
-          status: 'failed',
-          ...message.payload
-        };
-      } else {
-        result = message.payload;
-      }
-
-      const shouldRetry = result.status == 'failed' && this.shouldRetry(test);
-
-      if (shouldRetry) {
-        test.retries += 1;
-        this.queue[this.failFast ? 'unshift' : 'push'](test);
-      }
-
-      this.sendStatus({
-        id: test.id,
-        status: shouldRetry ? 'retrying' : result.status,
-        result
+    const subscriptions = [subscribeOnWorker(worker, 'worker', message => {
+      if (message.type != 'error') return;
+      subscriptions.forEach(unsubscribe => unsubscribe());
+      this.gracefullyKill(worker);
+      this.handleTestResult(worker, test, {
+        status: 'failed',
+        ...message.payload
       });
-      worker.isRunning = false;
-      this.process();
-    });
+    }), subscribeOnWorker(worker, 'test', message => {
+      if (message.type != 'end') return;
+      subscriptions.forEach(unsubscribe => unsubscribe());
+      this.handleTestResult(worker, test, message.payload);
+    })];
   }
 
 }

package/lib/esm/server/master/server.js

@@ -1,22 +1,90 @@
 import path from 'path';
 import http from 'http';
+import cluster from 'cluster';
 import Koa from 'koa';
+import cors from '@koa/cors';
 import serve from 'koa-static';
 import mount from 'koa-mount';
+import body from 'koa-bodyparser';
 import WebSocket from 'ws';
-import { subscribeOn } from '../messages';
-import { noop } from '../../types';
+import { emitStoriesMessage, sendStoriesMessage, subscribeOn, subscribeOnWorker } from '../messages';
+import { isDefined, noop } from '../../types';
 import { logger } from '../logger';
-export default function server(reportDir, port) {
+import { deserializeStory } from '../../shared';
+export default function server(reportDir, port, ui) {
   let resolveApi = noop;
+  let setStoriesCounter = 0;
   const creeveyApi = new Promise(resolve => resolveApi = resolve);
   const app = new Koa();
   const server = http.createServer(app.callback());
   const wss = new WebSocket.Server({
     server
   });
-  app.use(async (_, next) => {
-    await creeveyApi;
+  app.use(cors());
+  app.use(body());
+  app.use(async (ctx, next) => {
+    if (ctx.method == 'GET' && ctx.path == '/ping') {
+      ctx.body = 'pong';
+      return;
+    }
+
+    await next();
+  });
+
+  if (ui) {
+    app.use(async (_, next) => {
+      await creeveyApi;
+      await next();
+    });
+  }
+
+  app.use(async (ctx, next) => {
+    if (ctx.method == 'POST' && ctx.path == '/stories') {
+      const {
+        setStoriesCounter: counter,
+        stories
+      } = ctx.request.body;
+      if (setStoriesCounter >= counter) return;
+      const deserializedStories = stories.map(([file, stories]) => [file, stories.map(deserializeStory)]);
+      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
+      }));
+      return;
+    }
+
+    await next();
+  });
+  app.use(async (ctx, next) => {
+    if (ctx.method == 'POST' && ctx.path == '/capture') {
+      const {
+        workerId,
+        options
+      } = ctx.request.body;
+      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) return;
+      await new Promise(resolve => {
+        const unsubscribe = subscribeOnWorker(worker, 'stories', message => {
+          if (message.type != 'capture') return;
+          unsubscribe();
+          resolve();
+        });
+        sendStoriesMessage(worker, {
+          type: 'capture',
+          payload: options
+        });
+      }); // TODO Pass screenshot result to show it in inspector
+
+      ctx.body = 'Ok';
+      return;
+    }
+
     await next();
   });
   app.use(serve(path.join(__dirname, '../../client/web')));

package/lib/esm/server/messages.js

@@ -14,6 +14,12 @@ export function emitWorkerMessage(message) {
     ...message
   });
 }
+export function emitStoriesMessage(message) {
+  return emitMessage({
+    scope: 'stories',
+    ...message
+  });
+}
 export function emitTestMessage(message) {
   return emitMessage({
     scope: 'test',
@@ -37,19 +43,28 @@ export function emitShutdownMessage() {
     scope: 'shutdown'
   });
 }
-const handlers = Object.assign(Object.create(null), {
-  worker: new Set(),
-  test: new Set(),
-  webpack: new Set(),
-  docker: new Set(),
-  shutdown: new Set()
-});
+
+function createHandlers() {
+  return Object.assign(Object.create(null), {
+    worker: new Set(),
+    stories: new Set(),
+    test: new Set(),
+    webpack: new Set(),
+    docker: new Set(),
+    shutdown: new Set()
+  });
+}
+
+const handlers = createHandlers();
 
 const handler = message => {
   switch (message.scope) {
     case 'worker':
       return handlers.worker.forEach(h => h(message));
 
+    case 'stories':
+      return handlers.stories.forEach(h => h(message));
+
     case 'test':
       return handlers.test.forEach(h => h(message));
 
@@ -65,26 +80,34 @@ const handler = message => {
 };
 
 process.on('message', handler);
-export function sendTestMessage(target, message) {
+export function sendStoriesMessage(target, message) {
   var _target$send;
 
   (_target$send = target.send) === null || _target$send === void 0 ? void 0 : _target$send.call(target, {
-    scope: 'test',
+    scope: 'stories',
     ...message
   });
 }
-export function sendDockerMessage(target, message) {
+export function sendTestMessage(target, message) {
   var _target$send2;
 
   (_target$send2 = target.send) === null || _target$send2 === void 0 ? void 0 : _target$send2.call(target, {
-    scope: 'docker',
+    scope: 'test',
     ...message
   });
 }
-export function sendShutdownMessage(target) {
+export function sendDockerMessage(target, message) {
   var _target$send3;
 
   (_target$send3 = target.send) === null || _target$send3 === void 0 ? void 0 : _target$send3.call(target, {
+    scope: 'docker',
+    ...message
+  });
+}
+export function sendShutdownMessage(target) {
+  var _target$send4;
+
+  (_target$send4 = target.send) === null || _target$send4 === void 0 ? void 0 : _target$send4.call(target, {
     scope: 'shutdown'
   });
 }
@@ -97,6 +120,13 @@ export function subscribeOn(scope, handler) {
         return () => handlers.worker.delete(workerHandler);
       }
 
+    case 'stories':
+      {
+        const storiesHandler = handler;
+        handlers.stories.add(storiesHandler);
+        return () => handlers.stories.delete(storiesHandler);
+      }
+
     case 'test':
       {
         const testHandler = handler;
@@ -125,4 +155,80 @@ export function subscribeOn(scope, handler) {
         return () => handlers.shutdown.delete(shutdownHandler);
       }
   }
+}
+const workers = new Map();
+export function subscribeOnWorker(worker, scope, handler) {
+  var _workers$get;
+
+  const workerHandlers = (_workers$get = workers.get(worker)) !== null && _workers$get !== void 0 ? _workers$get : createHandlers();
+
+  if (!workers.has(worker)) {
+    workers.set(worker, workerHandlers);
+    worker.once('exit', () => workers.delete(worker));
+    worker.on('message', message => {
+      switch (message.scope) {
+        case 'worker':
+          return workerHandlers.worker.forEach(h => h(message));
+
+        case 'stories':
+          return workerHandlers.stories.forEach(h => h(message));
+
+        case 'test':
+          return workerHandlers.test.forEach(h => h(message));
+
+        case 'webpack':
+          return workerHandlers.webpack.forEach(h => h(message));
+
+        case 'docker':
+          return workerHandlers.docker.forEach(h => h(message));
+
+        case 'shutdown':
+          return workerHandlers.shutdown.forEach(h => h(message));
+      }
+    });
+  }
+
+  switch (scope) {
+    case 'worker':
+      {
+        const workerHandler = handler;
+        workerHandlers.worker.add(workerHandler);
+        return () => workerHandlers.worker.delete(workerHandler);
+      }
+
+    case 'stories':
+      {
+        const storiesHandler = handler;
+        workerHandlers.stories.add(storiesHandler);
+        return () => workerHandlers.stories.delete(storiesHandler);
+      }
+
+    case 'test':
+      {
+        const testHandler = handler;
+        workerHandlers.test.add(testHandler);
+        return () => workerHandlers.test.delete(testHandler);
+      }
+
+    case 'webpack':
+      {
+        const webpackHandler = handler;
+        workerHandlers.webpack.add(webpackHandler);
+        return () => workerHandlers.webpack.delete(webpackHandler);
+      }
+
+    case 'docker':
+      {
+        const dockerHandler = handler;
+        workerHandlers.docker.add(dockerHandler);
+        return () => workerHandlers.docker.delete(dockerHandler);
+      }
+
+    case 'shutdown':
+      {
+        const shutdownHandler = handler;
+        workerHandlers.shutdown.add(shutdownHandler);
+        return () => workerHandlers.shutdown.delete(shutdownHandler);
+      }
+  }
 }

package/lib/esm/server/parser.js

@@ -0,0 +1,63 @@
+import { toId, storyNameFromExport } from '@storybook/csf';
+export default async function parse(files) {
+  result = {}; // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+
+  (await import('@babel/register')).default({
+    babelrc: false,
+    rootMode: 'upward-optional',
+    ignore: [/node_modules/],
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    plugins: [['@babel/plugin-transform-runtime']],
+    presets: ['@babel/preset-typescript', ['@babel/preset-env', {
+      targets: {
+        node: '10'
+      }
+    }]]
+  });
+  await Promise.all(files.map(async file => import(file)));
+  return result;
+}
+let result = {};
+let kindTitle = '';
+let storyTitle = '';
+let storyParams = null;
+
+const setStoryParameters = params => {
+  storyParams = params;
+};
+
+const getStoryId = (kindTitle, storyTitle) => {
+  return toId(kindTitle, storyNameFromExport(storyTitle));
+};
+
+export const kind = (title, kindFn) => {
+  kindTitle = title;
+  kindFn();
+  kindTitle = '';
+};
+export const story = (title, storyFn) => {
+  var _result$storyId;
+
+  storyTitle = title;
+  storyParams = null;
+  storyFn({
+    setStoryParameters
+  });
+  const storyId = getStoryId(kindTitle, storyTitle);
+  result[storyId] = Object.assign({}, storyParams, {
+    tests: (_result$storyId = result[storyId]) === null || _result$storyId === void 0 ? void 0 : _result$storyId.tests
+  });
+  storyTitle = '';
+  storyParams = null;
+};
+export const test = (title, testFn) => {
+  const storyId = getStoryId(kindTitle, storyTitle);
+
+  if (!result[storyId]) {
+    result[storyId] = {};
+  }
+
+  result[storyId].tests = Object.assign({}, result[storyId].tests, {
+    [title]: testFn
+  });
+};