Merge pull request #3757 from storybooks/storyshots-remove-require-context

Storyshots - Replace require_context.js with babel-plugin-require-context-hook

.babelrc

@@ -1,6 +1,9 @@
 {
   "presets": ["env", "stage-0", "react"],
   "env": {
+    "test": {
+      "plugins": ["require-context-hook"]
+    },
     "plugins": [
       "emotion",
       "babel-plugin-macros",

MIGRATION.md

@@ -6,7 +6,6 @@
     -   [Keyboard shortcuts moved](#keyboard-shortcuts-moved)
     -   [Removed addWithInfo](#removed-add-with-info)
     -   [Removed RN addons](#removed-rn-addons)
-    -   [Storyshots imageSnapshot test function moved to a separate package](#storyshots-imagesnapshot-moved)
     -   [Storyshots changes](#storyshots-changes)
 -   [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
 -   [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
@@ -44,8 +43,16 @@ The `@storybook/react-native` had built-in addons (`addon-actions` and `addon-li
 
 ### Storyshots Changes
 
-1. `imageSnapshot` test function was extracted from `addon-storyshots` and moved to a new package - `addon-storyshots-puppeteer` that now will be dependant on puppeteer
-2. `getSnapshotFileName` export was replaced with the `Stories2SnapsConverter` class that now can be overridden for a custom implementation of the snapshot-name generation
+1. `imageSnapshot` test function was extracted from `addon-storyshots` 
+and moved to a new package - `addon-storyshots-puppeteer` that now will 
+be dependant on puppeteer. [README](https://github.com/storybooks/storybook/tree/master/addons/storyshots/storyshots-puppeteer)
+2. `getSnapshotFileName` export was replaced with the `Stories2SnapsConverter` 
+class that now can be overridden for a custom implementation of the 
+snapshot-name generation. [README](https://github.com/storybooks/storybook/tree/master/addons/storyshots/storyshots-core#stories2snapsconverter)
+3. Storybook that was configured with Webpack's `require.context()` feature 
+will need to add a babel plugin to polyfill this functionality. 
+A possible plugin might be [babel-plugin-require-context-hook](https://github.com/smrq/babel-plugin-require-context-hook).
+[README](https://github.com/storybooks/storybook/tree/master/addons/storyshots/storyshots-core#configure-jest-to-work-with-webpacks-requirecontext)
 
 ## From version 3.3.x to 3.4.x
 

addons/storyshots/storyshots-core/README.md

@@ -38,6 +38,54 @@ If you aren't familiar with Jest, here are some resources:
 
 > Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039).
 
+### Configure Jest to work with Webpack's [require.context()](https://webpack.js.org/guides/dependency-management/#require-context)
+
+Sometimes it's useful to configure Storybook with Webpack's require.context feature:
+
+```js
+import { configure } from '@storybook/react';
+
+const req = require.context('../stories', true, /.stories.js$/); // <- import all the stories at once
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);
+```
+
+The problem here is that it will work only during the build with webpack, 
+other tools may lack this feature. Since Storyshot is running under Jest, 
+we need to polyfill this functionality to work with Jest. The easiest 
+way is to integrate it to babel. One of the possible babel plugins to 
+polyfill this functionality might be 
+[babel-plugin-require-context-hook](https://github.com/smrq/babel-plugin-require-context-hook).
+
+To register it, add the following to your jest setup:
+
+```js
+import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
+registerRequireContextHook();
+```
+
+And after, add the plugin to `.babelrc`:
+
+```json
+{
+  "presets": ["..."],
+  "plugins": ["..."],
+  "env": {
+    "test": {
+      "plugins": ["require-context-hook"]
+    }
+  }
+}
+```
+
+Make sure **not** to include this babel plugin in the config 
+environment that applies to webpack, otherwise it may 
+replace a real `require.context` functionality.
+
 ### Configure Jest for React
 StoryShots addon for React is dependent on [react-test-renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer), but
 [doesn't](#deps-issue) install it, so you need to install it separately.

addons/storyshots/storyshots-core/package.json

@@ -17,7 +17,6 @@
   },
   "dependencies": {
     "@storybook/addons": "4.0.0-alpha.9",
-    "@storybook/core": "4.0.0-alpha.9",
     "babel-runtime": "^6.26.0",
     "glob": "^7.1.2",
     "global": "^4.3.2",
@@ -31,8 +30,5 @@
     "@storybook/react": "4.0.0-alpha.9",
     "enzyme-to-json": "^3.3.4",
     "react": "^16.4.0"
-  },
-  "peerDependencies": {
-    "babel-core": "^6.26.0 || ^7.0.0-0"
   }
 }

addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.js

@@ -0,0 +1,46 @@
+import { snapshotWithOptions } from '../test-bodies';
+import Stories2SnapsConverter from '../Stories2SnapsConverter';
+
+const ignore = ['**/node_modules/**'];
+const defaultStories2SnapsConverter = new Stories2SnapsConverter();
+
+function getIntegrityOptions({ integrityOptions }) {
+  if (integrityOptions === false) {
+    return false;
+  }
+
+  if (typeof integrityOptions !== 'object') {
+    return false;
+  }
+
+  return {
+    ...integrityOptions,
+    ignore: [...ignore, ...(integrityOptions.ignore || [])],
+    absolute: true,
+  };
+}
+
+function ensureOptionsDefaults(options) {
+  const {
+    suite = 'Storyshots',
+    storyNameRegex,
+    storyKindRegex,
+    renderer,
+    serializer,
+    stories2snapsConverter = defaultStories2SnapsConverter,
+    test: testMethod = snapshotWithOptions({ renderer, serializer }),
+  } = options;
+
+  const integrityOptions = getIntegrityOptions(options);
+
+  return {
+    suite,
+    storyNameRegex,
+    storyKindRegex,
+    stories2snapsConverter,
+    testMethod,
+    integrityOptions,
+  };
+}
+
+export default ensureOptionsDefaults;

addons/storyshots/storyshots-core/src/api/getIntegrityOptions.js

@@ -1,19 +0,0 @@
-const ignore = ['**/node_modules/**'];
-
-export default function getIntegrityOptions(options) {
-  const { integrityOptions } = options;
-
-  if (integrityOptions === false) {
-    return false;
-  }
-
-  if (typeof integrityOptions !== 'object') {
-    return false;
-  }
-
-  return {
-    ...integrityOptions,
-    ignore: [...ignore, ...(integrityOptions.ignore || [])],
-    absolute: true,
-  };
-}

addons/storyshots/storyshots-core/src/api/index.js

@@ -1,40 +1,14 @@
 import global, { describe } from 'global';
 import addons, { mockChannel } from '@storybook/addons';
+import ensureOptionsDefaults from './ensureOptionsDefaults';
 import snapshotsTests from './snapshotsTestsTemplate';
 import integrityTest from './integrityTestTemplate';
-import getIntegrityOptions from './getIntegrityOptions';
 import loadFramework from '../frameworks/frameworkLoader';
-import Stories2SnapsConverter from '../Stories2SnapsConverter';
-import { snapshotWithOptions } from '../test-bodies';
 
 global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};
 
-const defaultStories2SnapsConverter = new Stories2SnapsConverter();
 const methods = ['beforeAll', 'beforeEach', 'afterEach', 'afterAll'];
 
-function ensureOptionsDefaults(options) {
-  const {
-    suite = 'Storyshots',
-    storyNameRegex,
-    storyKindRegex,
-    renderer,
-    serializer,
-    stories2snapsConverter = defaultStories2SnapsConverter,
-    test: testMethod = snapshotWithOptions({ renderer, serializer }),
-  } = options;
-
-  const integrityOptions = getIntegrityOptions(options);
-
-  return {
-    suite,
-    storyNameRegex,
-    storyKindRegex,
-    stories2snapsConverter,
-    testMethod,
-    integrityOptions,
-  };
-}
-
 function callTestMethodGlobals(testMethod) {
   methods.forEach(method => {
     if (typeof testMethod[method] === 'function') {

addons/storyshots/storyshots-core/src/frameworks/angular/loader.js

@@ -20,10 +20,9 @@ function load(options) {
   setupAngularJestPreset();
 
   const { configPath, config } = options;
-  const frameworkOptions = '@storybook/angular/options';
   const storybook = require.requireActual('@storybook/angular');
 
-  configure({ configPath, config, frameworkOptions, storybook });
+  configure({ configPath, config, storybook });
 
   return {
     framework: 'angular',

addons/storyshots/storyshots-core/src/frameworks/config-loader.js

@@ -1,43 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { getBabelConfig } from '@storybook/core/server';
-
-const babel = require('babel-core');
-
-function getConfigContent({ resolvedConfigDirPath, resolvedConfigPath, appOptions }) {
-  const babelConfig = getBabelConfig({
-    ...appOptions,
-    configDir: resolvedConfigDirPath,
-  });
-  return babel.transformFileSync(resolvedConfigPath, babelConfig).code;
-}
-
-function getConfigPathParts(configPath) {
-  const resolvedConfigPath = path.resolve(configPath);
-
-  if (fs.lstatSync(resolvedConfigPath).isDirectory()) {
-    return {
-      resolvedConfigDirPath: resolvedConfigPath,
-      resolvedConfigPath: path.join(resolvedConfigPath, 'config.js'),
-    };
-  }
-
-  return {
-    resolvedConfigDirPath: path.dirname(resolvedConfigPath),
-    resolvedConfigPath,
-  };
-}
-
-function load({ configPath, appOptions }) {
-  const { resolvedConfigPath, resolvedConfigDirPath } = getConfigPathParts(configPath);
-
-  const content = getConfigContent({ resolvedConfigDirPath, resolvedConfigPath, appOptions });
-  const contextOpts = { filename: resolvedConfigPath, dirname: resolvedConfigDirPath };
-
-  return {
-    content,
-    contextOpts,
-  };
-}
-
-export default load;

addons/storyshots/storyshots-core/src/frameworks/configure.js

@@ -1,22 +1,27 @@
-import loadConfig from './config-loader';
-import runWithRequireContext from './require_context';
+import fs from 'fs';
+import path from 'path';
+
+function getConfigPathParts(configPath) {
+  const resolvedConfigPath = path.resolve(configPath);
+
+  if (fs.lstatSync(resolvedConfigPath).isDirectory()) {
+    return path.join(resolvedConfigPath, 'config.js');
+  }
+
+  return resolvedConfigPath;
+}
 
 function configure(options) {
-  const { configPath = '.storybook', config, frameworkOptions, storybook } = options;
+  const { configPath = '.storybook', config, storybook } = options;
 
   if (config && typeof config === 'function') {
     config(storybook);
     return;
   }
 
-  const appOptions = require.requireActual(frameworkOptions).default;
+  const resolvedConfigPath = getConfigPathParts(configPath);
 
-  const { content, contextOpts } = loadConfig({
-    configPath,
-    appOptions,
-  });
-
-  runWithRequireContext(content, contextOpts);
+  require.requireActual(resolvedConfigPath);
 }
 
 export default configure;

addons/storyshots/storyshots-core/src/frameworks/html/loader.js

@@ -9,10 +9,9 @@ function load(options) {
   global.STORYBOOK_ENV = 'html';
 
   const { configPath, config } = options;
-  const frameworkOptions = '@storybook/html/options';
   const storybook = require.requireActual('@storybook/html');
 
-  configure({ configPath, config, frameworkOptions, storybook });
+  configure({ configPath, config, storybook });
 
   return {
     framework: 'html',

addons/storyshots/storyshots-core/src/frameworks/react/loader.js

@@ -7,10 +7,9 @@ function test(options) {
 
 function load(options) {
   const { configPath, config } = options;
-  const frameworkOptions = '@storybook/react/options';
   const storybook = require.requireActual('@storybook/react');
 
-  configure({ configPath, config, frameworkOptions, storybook });
+  configure({ configPath, config, storybook });
 
   return {
     framework: 'react',

addons/storyshots/storyshots-core/src/frameworks/require_context.js

@@ -1,81 +0,0 @@
-import { process } from 'global';
-import vm from 'vm';
-import fs from 'fs';
-import path from 'path';
-import moduleSystem from 'module';
-
-function requireModules(keys, root, directory, regExp, recursive) {
-  const files = fs.readdirSync(path.join(root, directory));
-
-  files.forEach(filename => {
-    // webpack adds a './' to the begining of the key
-    // TODO: Check this in windows
-    const entryKey = `./${path.join(directory, filename)}`;
-    if (regExp.test(entryKey)) {
-      keys[entryKey] = require(path.join(root, directory, filename)); // eslint-disable-line
-      return;
-    }
-
-    if (!recursive) {
-      return;
-    }
-
-    if (fs.statSync(path.join(root, directory, filename)).isDirectory()) {
-      requireModules(keys, root, path.join(directory, filename), regExp, recursive);
-    }
-  });
-}
-
-function isRelativeRequest(request) {
-  if (request.charCodeAt(0) !== 46) {
-    /* . */ return false;
-  }
-
-  if (request === '.' || '..') {
-    return true;
-  }
-
-  return (
-    request.charCodeAt(1) === 47 /* / */ ||
-    (request.charCodeAt(1) === 46 /* . */ && request.charCodeAt(2) === 47) /* / */
-  );
-}
-
-function getFullPath(dirname, request) {
-  if (isRelativeRequest(request) || !process.env.NODE_PATH) {
-    return path.resolve(dirname, request);
-  }
-
-  return path.resolve(process.env.NODE_PATH, request);
-}
-
-export default function runWithRequireContext(content, options) {
-  const { filename, dirname } = options;
-
-  const newRequire = request => {
-    if (isRelativeRequest(request)) {
-      return require(path.resolve(dirname, request)); // eslint-disable-line
-    }
-
-    return require(request); // eslint-disable-line
-  };
-
-  newRequire.resolve = require.resolve;
-  newRequire.extensions = require.extensions;
-  newRequire.main = require.main;
-  newRequire.cache = require.cache;
-
-  newRequire.context = (directory, useSubdirectories = false, regExp = /^\.\//) => {
-    const fullPath = getFullPath(dirname, directory);
-
-    const keys = {};
-    requireModules(keys, fullPath, '.', regExp, useSubdirectories);
-
-    const req = f => keys[f];
-    req.keys = () => Object.keys(keys);
-    return req;
-  };
-
-  const compiledModule = vm.runInThisContext(moduleSystem.wrap(content));
-  compiledModule(module.exports, newRequire, module, filename, dirname);
-}

addons/storyshots/storyshots-core/src/frameworks/vue/loader.js

@@ -15,10 +15,9 @@ function load(options) {
   mockVueToIncludeCompiler();
 
   const { configPath, config } = options;
-  const frameworkOptions = '@storybook/vue/options';
   const storybook = require.requireActual('@storybook/vue');
 
-  configure({ configPath, config, frameworkOptions, storybook });
+  configure({ configPath, config, storybook });
 
   return {
     framework: 'vue',

app/angular/options.js

@@ -1 +0,0 @@
-module.exports = require('./dist/server/options');

app/html/options.js

@@ -1 +0,0 @@
-module.exports = require('./dist/server/options');

app/marko/options.js

@@ -1 +0,0 @@
-module.exports = require('./dist/server/options');

app/mithril/options.js

@@ -1 +0,0 @@
-module.exports = require('./dist/server/options');

app/polymer/options.js

@@ -1 +0,0 @@
-module.exports = require('./dist/server/options');

app/react/options.js

@@ -1 +0,0 @@
-module.exports = require('./dist/server/options');

app/vue/options.js

@@ -1 +0,0 @@
-module.exports = require('./dist/server/options');

examples/vue-kitchen-sink/.babelrc

@@ -6,7 +6,8 @@
   ],
   "env": {
     "test": {
-      "presets": ["env"]
+      "presets": ["env"],
+      "plugins": ["require-context-hook"]
     }
   }
 }

lib/core/server.js

@@ -1,6 +1,5 @@
 const assign = require('babel-runtime/core-js/object/assign').default;
 const defaultWebpackConfig = require('./dist/server/config/defaults/webpack.config');
-const { getBabelConfig } = require('./dist/server/config');
 const serverUtils = require('./dist/server/utils');
 const buildStatic = require('./dist/server/build-static');
 const buildDev = require('./dist/server/build-dev');
@@ -8,5 +7,4 @@ const buildDev = require('./dist/server/build-dev');
 module.exports = assign({}, defaultWebpackConfig, buildStatic, buildDev, serverUtils, {
   indexHtmlPath: require.resolve('./src/server/index.html.ejs'),
   iframeHtmlPath: require.resolve('./src/server/iframe.html.ejs'),
-  getBabelConfig,
 });

lib/core/src/server/config.js

@@ -9,7 +9,7 @@ import loadBabelConfig from './babel_config';
 
 const noopWrapper = config => config;
 
-export function getBabelConfig({
+function getBabelConfig({
   configDir,
   defaultBabelConfig = devBabelConfig,
   wrapDefaultBabelConfig = noopWrapper,

package.json

@@ -50,6 +50,7 @@
     "babel-eslint": "^8.2.3",
     "babel-plugin-emotion": "^9.1.2",
     "babel-plugin-macros": "^2.2.2",
+    "babel-plugin-require-context-hook": "^1.0.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",

scripts/jest.init.js

@@ -7,6 +7,10 @@ import Adapter from 'enzyme-adapter-react-16';
 import * as emotion from 'emotion';
 import { createSerializer } from 'jest-emotion';
 
+import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
+
+registerRequireContextHook();
+
 expect.addSnapshotSerializer(createSerializer(emotion));
 // mock console.info calls for cleaner test execution
 global.console.info = jest.fn().mockImplementation(() => {});

yarn.lock

@@ -2011,6 +2011,10 @@ babel-plugin-react-transform@^3.0.0:
   dependencies:
     lodash "^4.6.1"
 
+babel-plugin-require-context-hook@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-require-context-hook/-/babel-plugin-require-context-hook-1.0.0.tgz#3f0e7cce87c338f53639b948632fd4e73834632d"
+
 babel-plugin-syntax-async-functions@^6.13.0, babel-plugin-syntax-async-functions@^6.5.0, babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"