From e21590d6a887df8f7f66960a69fdace220eb514a Mon Sep 17 00:00:00 2001 From: igor-dv Date: Mon, 23 Jul 2018 20:28:07 +0300 Subject: [PATCH 1/9] Initial logic of supporting "config" and "addons" files with the different extensions --- app/angular/index.d.ts | 2 +- app/angular/src/client/preview/index.d.ts | 2 +- .../.storybook/{addons.js => addons.ts} | 0 .../.storybook/{config.js => config.ts} | 0 .../{webpack.config.js => webpack.config.ts} | 2 +- examples/angular-cli/package.json | 2 ++ .../src/{cssWarning.js => cssWarning.ts} | 0 examples/angular-cli/tsconfig.json | 1 + lib/core/src/server/config.js | 6 ++-- lib/core/src/server/config/interpret-files.js | 32 +++++++++++++++++++ lib/core/src/server/config/utils.js | 19 ++++++----- ...bel_config.js => loadCustomBabelConfig.js} | 0 .../src/server/loadCustomWebpackConfig.js | 1 + yarn.lock | 8 +++++ 14 files changed, 59 insertions(+), 16 deletions(-) rename examples/angular-cli/.storybook/{addons.js => addons.ts} (100%) rename examples/angular-cli/.storybook/{config.js => config.ts} (100%) rename examples/angular-cli/.storybook/{webpack.config.js => webpack.config.ts} (90%) rename examples/angular-cli/src/{cssWarning.js => cssWarning.ts} (100%) create mode 100644 lib/core/src/server/config/interpret-files.js rename lib/core/src/server/{babel_config.js => loadCustomBabelConfig.js} (100%) diff --git a/app/angular/index.d.ts b/app/angular/index.d.ts index 5cec2f53d5a..191d587750d 100644 --- a/app/angular/index.d.ts +++ b/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[]; } diff --git a/app/angular/src/client/preview/index.d.ts b/app/angular/src/client/preview/index.d.ts index ef89ba61ed6..32925352207 100644 --- a/app/angular/src/client/preview/index.d.ts +++ b/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; diff --git a/examples/angular-cli/.storybook/addons.js b/examples/angular-cli/.storybook/addons.ts similarity index 100% rename from examples/angular-cli/.storybook/addons.js rename to examples/angular-cli/.storybook/addons.ts diff --git a/examples/angular-cli/.storybook/config.js b/examples/angular-cli/.storybook/config.ts similarity index 100% rename from examples/angular-cli/.storybook/config.js rename to examples/angular-cli/.storybook/config.ts diff --git a/examples/angular-cli/.storybook/webpack.config.js b/examples/angular-cli/.storybook/webpack.config.ts similarity index 90% rename from examples/angular-cli/.storybook/webpack.config.js rename to examples/angular-cli/.storybook/webpack.config.ts index 4f52bb63fd2..e649449c1a5 100644 --- a/examples/angular-cli/.storybook/webpack.config.js +++ b/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: [ diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index 598b2d141e5..ee45efa32db 100644 --- a/examples/angular-cli/package.json +++ b/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", diff --git a/examples/angular-cli/src/cssWarning.js b/examples/angular-cli/src/cssWarning.ts similarity index 100% rename from examples/angular-cli/src/cssWarning.js rename to examples/angular-cli/src/cssWarning.ts diff --git a/examples/angular-cli/tsconfig.json b/examples/angular-cli/tsconfig.json index 2508424a9a7..2deb4d47d76 100644 --- a/examples/angular-cli/tsconfig.json +++ b/examples/angular-cli/tsconfig.json @@ -12,6 +12,7 @@ "experimentalDecorators": true, "target": "es5", "typeRoots": [ + "../../node_modules/@types", "node_modules/@types" ], "lib": [ diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js index 2901804c476..c7a9424fcc9 100644 --- a/lib/core/src/server/config.js +++ b/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 loadCustomConfig from './loadCustomWebpackConfig'; +import loadBabelConfig from './loadCustomBabelConfig'; +import loadCustomWebpackConfig from './loadCustomWebpackConfig'; const noopWrapper = config => config; @@ -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); diff --git a/lib/core/src/server/config/interpret-files.js b/lib/core/src/server/config/interpret-files.js new file mode 100644 index 00000000000..d6127253447 --- /dev/null +++ b/lib/core/src/server/config/interpret-files.js @@ -0,0 +1,32 @@ +import fs from 'fs'; +import interpret from 'interpret'; + +// const boost = ['.js', '.jsx', '.ts', '.tsx']; + +function getPossibleExtensions() { + return Object.keys(interpret.extensions).sort((a, b) => { + if (a === '.js') { + return -1; + } + + if (b === '.js') { + return 1; + } + + return a.length - b.length; + }); +} + +const possibleExtensions = getPossibleExtensions(); + +export function getInterpretedFile(pathToFile) { + const candidates = possibleExtensions.map(ext => `${pathToFile}${ext}`); + + return candidates.find(candidate => { + if (fs.existsSync(candidate)) { + return candidate; + } + + return null; + }); +} diff --git a/lib/core/src/server/config/utils.js b/lib/core/src/server/config/utils.js index 1fa0aa36636..d941a10e17f 100644 --- a/lib/core/src/server/config/utils.js +++ b/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,21 +40,21 @@ 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'); - if (!fs.existsSync(storybookConfigPath)) { - throw new Error(`=> Create a storybook config file in "${configDir}/config.js".`); + const storybookConfigPath = getInterpretedFile(path.resolve(configDir, 'config')); + if (!storybookConfigPath) { + 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. - const storybookCustomAddonsPath = path.resolve(configDir, 'addons.js'); - if (fs.existsSync(storybookCustomAddonsPath)) { + // Check whether addons.{ext} file exists inside the storybook. + const storybookCustomAddonsPath = getInterpretedFile(path.resolve(configDir, 'addons')); + if (storybookCustomAddonsPath) { logger.info('=> Loading custom addons config.'); manager.unshift(storybookCustomAddonsPath); } return { preview, manager }; -} +} \ No newline at end of file diff --git a/lib/core/src/server/babel_config.js b/lib/core/src/server/loadCustomBabelConfig.js similarity index 100% rename from lib/core/src/server/babel_config.js rename to lib/core/src/server/loadCustomBabelConfig.js diff --git a/lib/core/src/server/loadCustomWebpackConfig.js b/lib/core/src/server/loadCustomWebpackConfig.js index 4e3e47534d6..f0828f0d6ba 100644 --- a/lib/core/src/server/loadCustomWebpackConfig.js +++ b/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 => ({ diff --git a/yarn.lock b/yarn.lock index 24a73c22a77..4da99d11043 100644 --- a/yarn.lock +++ b/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" + "@webassemblyjs/ast@1.4.3": version "1.4.3" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.4.3.tgz#3b3f6fced944d8660273347533e6d4d315b5934a" From a05330712af94ded93bf9481a5a7aaaec801b824 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Tue, 24 Jul 2018 00:14:56 +0300 Subject: [PATCH 2/9] Make storyshots resolve config without ext --- addons/storyshots/storyshots-core/src/frameworks/configure.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/storyshots/storyshots-core/src/frameworks/configure.js b/addons/storyshots/storyshots-core/src/frameworks/configure.js index 85585e97747..ac140d0d0fb 100644 --- a/addons/storyshots/storyshots-core/src/frameworks/configure.js +++ b/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; From 6348d7a5cc0a1604af2e89e85a3b95309eb81d95 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Tue, 24 Jul 2018 00:18:23 +0300 Subject: [PATCH 3/9] Fix linter warning in utils.js --- lib/core/src/server/config/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core/src/server/config/utils.js b/lib/core/src/server/config/utils.js index d941a10e17f..de3e4ae4da0 100644 --- a/lib/core/src/server/config/utils.js +++ b/lib/core/src/server/config/utils.js @@ -57,4 +57,4 @@ export function getEntries(configDir) { } return { preview, manager }; -} \ No newline at end of file +} From 88ff35c887bf53ee861665de1a4581c56387758a Mon Sep 17 00:00:00 2001 From: igor-dv Date: Tue, 24 Jul 2018 01:03:40 +0300 Subject: [PATCH 4/9] Enable extensions boosting --- lib/core/src/server/config/interpret-files.js | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/lib/core/src/server/config/interpret-files.js b/lib/core/src/server/config/interpret-files.js index d6127253447..05876308f3d 100644 --- a/lib/core/src/server/config/interpret-files.js +++ b/lib/core/src/server/config/interpret-files.js @@ -1,23 +1,18 @@ import fs from 'fs'; -import interpret from 'interpret'; +import { extensions } from 'interpret'; -// const boost = ['.js', '.jsx', '.ts', '.tsx']; +const boost = new Set(['.js', '.jsx', '.ts', '.tsx']); -function getPossibleExtensions() { - return Object.keys(interpret.extensions).sort((a, b) => { - if (a === '.js') { - return -1; - } - - if (b === '.js') { - return 1; - } - - return a.length - b.length; - }); +function sortExtensions() { + return [ + ...Array.from(boost), + ...Object.keys(extensions) + .filter(ext => !boost.has(ext)) + .sort((a, b) => a.length - b.length), + ]; } -const possibleExtensions = getPossibleExtensions(); +const possibleExtensions = sortExtensions(); export function getInterpretedFile(pathToFile) { const candidates = possibleExtensions.map(ext => `${pathToFile}${ext}`); From 1c1fd47c9962515e6b7c9005f6b4683ff4c4355d Mon Sep 17 00:00:00 2001 From: igor-dv Date: Tue, 24 Jul 2018 01:18:37 +0300 Subject: [PATCH 5/9] Apply babel on config.ts after tsc in jest to support require.context hook --- jest.config.js | 1 + package.json | 1 + scripts/jest-ts-babel.js | 9 +++++++++ 3 files changed, 11 insertions(+) create mode 100644 scripts/jest-ts-babel.js diff --git a/jest.config.js b/jest.config.js index 4ca272a6bda..21fab503692 100644 --- a/jest.config.js +++ b/jest.config.js @@ -22,6 +22,7 @@ module.exports = { ], transform: { '^.+\\.jsx?$': 'babel-jest', + '^.+\\\\.storybook\\\\config\\.ts$': '/scripts/jest-ts-babel.js', '^.+\\.(ts|html)$': '/node_modules/jest-preset-angular/preprocessor.js', '.*\\.(vue)$': '/node_modules/jest-vue-preprocessor', }, diff --git a/package.json b/package.json index 2a90503c6a4..422c5779694 100644 --- a/package.json +++ b/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", diff --git a/scripts/jest-ts-babel.js b/scripts/jest-ts-babel.js new file mode 100644 index 00000000000..aa1a8a3d6ad --- /dev/null +++ b/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); +}; From f5c02f74a0eecda084b1b53e817b7685eb18b9dc Mon Sep 17 00:00:00 2001 From: igor-dv Date: Tue, 24 Jul 2018 01:38:21 +0300 Subject: [PATCH 6/9] Try to fix env related files separators. --- jest.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jest.config.js b/jest.config.js index 21fab503692..47443e32750 100644 --- a/jest.config.js +++ b/jest.config.js @@ -22,7 +22,7 @@ module.exports = { ], transform: { '^.+\\.jsx?$': 'babel-jest', - '^.+\\\\.storybook\\\\config\\.ts$': '/scripts/jest-ts-babel.js', + '^.+[/\\\\].storybook[/\\\\]config\\.ts$': '/scripts/jest-ts-babel.js', '^.+\\.(ts|html)$': '/node_modules/jest-preset-angular/preprocessor.js', '.*\\.(vue)$': '/node_modules/jest-vue-preprocessor', }, From d202e04d2adbb8f069999600c01f5eda881a3885 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Tue, 24 Jul 2018 02:00:28 +0300 Subject: [PATCH 7/9] Update snapshot --- addons/info/src/__snapshots__/index.test.js.snap | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index cd708d7a0a6..842fb68d013 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -123,7 +123,9 @@ exports[`addon Info should render and external markdown 1`] = ` >

- function func(x) {return x + 1;} + function func(x) { + return x + 1; + }

[object Object] @@ -1430,7 +1432,9 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)" >

- function func(x) {return x + 1;} + function func(x) { + return x + 1; + }

[object Object] From c07c47cde01b37ab71062aa1d9381ff5e9d903e7 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Tue, 24 Jul 2018 10:56:06 +0300 Subject: [PATCH 8/9] Add test for interpret-files.js --- lib/core/src/server/config/interpret-files.js | 12 ++---- .../src/server/config/interpret-files.test.js | 37 +++++++++++++++++++ 2 files changed, 40 insertions(+), 9 deletions(-) create mode 100644 lib/core/src/server/config/interpret-files.test.js diff --git a/lib/core/src/server/config/interpret-files.js b/lib/core/src/server/config/interpret-files.js index 05876308f3d..ab70ef37cf5 100644 --- a/lib/core/src/server/config/interpret-files.js +++ b/lib/core/src/server/config/interpret-files.js @@ -15,13 +15,7 @@ function sortExtensions() { const possibleExtensions = sortExtensions(); export function getInterpretedFile(pathToFile) { - const candidates = possibleExtensions.map(ext => `${pathToFile}${ext}`); - - return candidates.find(candidate => { - if (fs.existsSync(candidate)) { - return candidate; - } - - return null; - }); + return possibleExtensions + .map(ext => `${pathToFile}${ext}`) + .find(candidate => fs.existsSync(candidate)); } diff --git a/lib/core/src/server/config/interpret-files.test.js b/lib/core/src/server/config/interpret-files.test.js new file mode 100644 index 00000000000..05ff066e435 --- /dev/null +++ b/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); +}); From 12653b8a01e097dfd00be4e18572ba75b6804848 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Tue, 24 Jul 2018 16:25:49 +0300 Subject: [PATCH 9/9] Rename loadBabelConfig -> loadCustomBabelConfig --- lib/core/src/server/config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js index c7a9424fcc9..db7b5aa0491 100644 --- a/lib/core/src/server/config.js +++ b/lib/core/src/server/config.js @@ -2,7 +2,7 @@ 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 './loadCustomBabelConfig'; +import loadCustomBabelConfig from './loadCustomBabelConfig'; 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) {