Merge pull request #3913 from storybooks/support-different-config-files-exts

Support different extensions for "config" and "addons" files

addons/info/src/__snapshots__/index.test.js.snap

@@ -123,7 +123,9 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
           >
             <div>
               <h1>
-                function func(x) {return x + 1;}
+                function func(x) {
+          return x + 1;
+        }
               </h1>
               <h2>
                 [object Object]
@@ -1430,7 +1432,9 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
           >
             <div>
               <h1>
-                function func(x) {return x + 1;}
+                function func(x) {
+          return x + 1;
+        }
               </h1>
               <h2>
                 [object Object]

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

@@ -5,7 +5,7 @@ function getConfigPathParts(configPath) {
   const resolvedConfigPath = path.resolve(configPath);
 
   if (fs.lstatSync(resolvedConfigPath).isDirectory()) {
-    return path.join(resolvedConfigPath, 'config.js');
+    return path.join(resolvedConfigPath, 'config');
   }
 
   return resolvedConfigPath;

app/angular/index.d.ts

@@ -39,6 +39,6 @@ declare module '@storybook/angular' {
   export function setAddon(addon: any): void;
   export function addDecorator(decorator: any): IApi;
   export function addParameters(parameters: any): IApi;
-  export function configure(loaders: () => NodeRequire, module: NodeModule): void;
+  export function configure(loaders: () => void, module: NodeModule): void;
   export function getStorybook(): IStoribookSection[];
 }

app/angular/src/client/preview/index.d.ts

@@ -1,6 +1,6 @@
 export function storiesOf(kind: string, module: NodeModule): IApi;
 export function setAddon(addon: any): void;
 export function addDecorator(decorator: any): IApi;
-export function configure(loaders: () => NodeRequire, module: NodeModule): void;
+export function configure(loaders: () => void, module: NodeModule): void;
 export function getStorybook(): IStoribookSection[];
 export function clearDecorators(): void;

examples/angular-cli/.storybook/webpack.config.ts

@@ -1,6 +1,6 @@
 const path = require('path');
 
-module.exports = baseConfig => {
+module.exports = (baseConfig: any) => {
   baseConfig.module.rules.push({
     test: [/\.stories\.tsx?$/, /index\.ts$/],
     loaders: [

examples/angular-cli/package.json

@@ -70,6 +70,8 @@
     "@types/jasminewd2": "^2.0.3",
     "@types/jest": "^22.2.3",
     "@types/node": "~9.6.20",
+    "@types/storybook__addon-options": "^3.2.2",
+    "@types/webpack-env": "^1.13.6",
     "babel-core": "^6.26.3",
     "global": "^4.3.2",
     "jasmine-core": "~3.1.0",

examples/angular-cli/tsconfig.json

@@ -12,6 +12,7 @@
     "experimentalDecorators": true,
     "target": "es5",
     "typeRoots": [
+      "../../node_modules/@types",
       "node_modules/@types"
     ],
     "lib": [

jest.config.js

@@ -22,6 +22,7 @@ module.exports = {
   ],
   transform: {
     '^.+\\.jsx?$': 'babel-jest',
+    '^.+[/\\\\].storybook[/\\\\]config\\.ts$': '<rootDir>/scripts/jest-ts-babel.js',
     '^.+\\.(ts|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
     '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
   },

lib/core/src/server/config.js

@@ -2,8 +2,8 @@ import findCacheDir from 'find-cache-dir';
 import { logger } from '@storybook/node-logger';
 import { createDefaultWebpackConfig } from './config/defaults/webpack.config';
 import devBabelConfig from './config/babel';
-import loadBabelConfig from './babel_config';
+import loadCustomBabelConfig from './loadCustomBabelConfig';
-import loadCustomConfig from './loadCustomWebpackConfig';
+import loadCustomWebpackConfig from './loadCustomWebpackConfig';
 
 const noopWrapper = config => config;
 
@@ -14,7 +14,7 @@ function getBabelConfig({
   wrapBabelConfig = noopWrapper,
 }) {
   const defaultConfig = wrapDefaultBabelConfig(defaultBabelConfig);
-  return wrapBabelConfig(loadBabelConfig(configDir, defaultConfig));
+  return wrapBabelConfig(loadCustomBabelConfig(configDir, defaultConfig));
 }
 
 function mergeConfigs(config, customConfig) {
@@ -84,7 +84,7 @@ export default options => {
 
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
-  const customConfig = loadCustomConfig(configDir);
+  const customConfig = loadCustomWebpackConfig(configDir);
 
   if (customConfig === null) {
     informAboutCustomConfig(defaultConfigName);

lib/core/src/server/config/interpret-files.js

@@ -0,0 +1,21 @@
+import fs from 'fs';
+import { extensions } from 'interpret';
+
+const boost = new Set(['.js', '.jsx', '.ts', '.tsx']);
+
+function sortExtensions() {
+  return [
+    ...Array.from(boost),
+    ...Object.keys(extensions)
+      .filter(ext => !boost.has(ext))
+      .sort((a, b) => a.length - b.length),
+  ];
+}
+
+const possibleExtensions = sortExtensions();
+
+export function getInterpretedFile(pathToFile) {
+  return possibleExtensions
+    .map(ext => `${pathToFile}${ext}`)
+    .find(candidate => fs.existsSync(candidate));
+}

lib/core/src/server/config/interpret-files.test.js

@@ -0,0 +1,37 @@
+import mock from 'mock-fs';
+import { getInterpretedFile } from './interpret-files';
+
+describe('interpret-files', () => {
+  it('will interpret file as file.ts when it exists in fs', () => {
+    mock({
+      'path/to/file.ts': 'ts file contents',
+    });
+
+    const file = getInterpretedFile('path/to/file');
+
+    expect(file).toEqual('path/to/file.ts');
+  });
+
+  it('will interpret file as file.js when both are in fs', () => {
+    mock({
+      'path/to/file.js': 'js file contents',
+      'path/to/file.ts': 'ts file contents',
+    });
+
+    const file = getInterpretedFile('path/to/file');
+
+    expect(file).toEqual('path/to/file.js');
+  });
+
+  it('will return undefined if there is no candidate of a file in fs', () => {
+    mock({
+      'path/to/file.js': 'js file contents',
+    });
+
+    const file = getInterpretedFile('path/to/file2');
+
+    expect(file).toBeUndefined();
+  });
+
+  afterEach(mock.restore);
+});

lib/core/src/server/config/utils.js

@@ -1,7 +1,6 @@
-import fs from 'fs';
 import path from 'path';
-
 import { logger } from '@storybook/node-logger';
+import { getInterpretedFile } from './interpret-files';
 
 export const includePaths = [path.resolve('./')];
 
@@ -41,18 +40,18 @@ export function getEntries(configDir) {
   const preview = [require.resolve('./polyfills'), require.resolve('./globals')];
   const manager = [require.resolve('./polyfills'), require.resolve('../../client/manager')];
 
-  // Check whether a config.js file exists inside the storybook
+  // Check whether a config.{ext} file exists inside the storybook
   // config directory and throw an error if it's not.
-  const storybookConfigPath = path.resolve(configDir, 'config.js');
+  const storybookConfigPath = getInterpretedFile(path.resolve(configDir, 'config'));
-  if (!fs.existsSync(storybookConfigPath)) {
+  if (!storybookConfigPath) {
-    throw new Error(`=> Create a storybook config file in "${configDir}/config.js".`);
+    throw new Error(`=> Create a storybook config file in "${configDir}/config.{ext}".`);
   }
 
   preview.push(require.resolve(storybookConfigPath));
 
-  // Check whether addons.js file exists inside the storybook.
+  // Check whether addons.{ext} file exists inside the storybook.
-  const storybookCustomAddonsPath = path.resolve(configDir, 'addons.js');
+  const storybookCustomAddonsPath = getInterpretedFile(path.resolve(configDir, 'addons'));
-  if (fs.existsSync(storybookCustomAddonsPath)) {
+  if (storybookCustomAddonsPath) {
     logger.info('=> Loading custom addons config.');
     manager.unshift(storybookCustomAddonsPath);
   }

lib/core/src/server/loadCustomWebpackConfig.js

@@ -58,6 +58,7 @@ export default configDir => {
     }
     return a.length - b.length;
   });
+
   const customConfigCandidates = ['webpack.config', 'webpackfile']
     .map(filename =>
       extensions.map(ext => ({

package.json

@@ -50,6 +50,7 @@
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
+    "babel-jest": "^22.4.4",
     "babel-plugin-emotion": "^9.1.2",
     "babel-plugin-macros": "^2.2.2",
     "babel-plugin-require-context-hook": "^1.0.0",

scripts/jest-ts-babel.js

@@ -0,0 +1,9 @@
+const tsTransformer = require('jest-preset-angular/preprocessor');
+const babelTransformer = require('babel-jest');
+
+module.exports.process = function transform(src, path, config, transformOptions) {
+  const tsResult = tsTransformer.process(src, path, config, transformOptions);
+  const jsPath = path.replace('.ts', '.js');
+
+  return babelTransformer.process(tsResult, jsPath, config, transformOptions);
+};

yarn.lock

@@ -476,6 +476,14 @@
   version "2.53.43"
   resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz#2de3d718819bc20165754c4a59afb7e9833f6707"
 
+"@types/storybook__addon-options@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@types/storybook__addon-options/-/storybook__addon-options-3.2.2.tgz#f42f81414fa9692cf20d947e9b49c60c4bdfbc4d"
+
+"@types/webpack-env@^1.13.6":
+  version "1.13.6"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.6.tgz#128d1685a7c34d31ed17010fc87d6a12c1de6976"
+
 "@vue/component-compiler-utils@^2.0.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-2.1.0.tgz#8331eadc8acdbc35aace5a61d2153e6f6434bfe2"