From fb930edec0f78c350a71bd0ea12228736ca155c0 Mon Sep 17 00:00:00 2001 From: igor Date: Sun, 7 Jan 2018 11:06:24 +0200 Subject: [PATCH 1/3] Add ability to load a custom tsconfig.json in the storybook config dir. --- app/angular/src/server/config.js | 4 +++ .../src/server/config/webpack.config.js | 7 ++++- app/angular/src/server/index.js | 2 -- app/angular/src/server/ts_config.js | 27 +++++++++++++++++++ examples/angular-cli/.storybook/tsconfig.json | 10 +++++++ 5 files changed, 47 insertions(+), 3 deletions(-) create mode 100644 app/angular/src/server/ts_config.js create mode 100644 examples/angular-cli/.storybook/tsconfig.json diff --git a/app/angular/src/server/config.js b/app/angular/src/server/config.js index abe4257095bc..dcf9e41ee5be 100644 --- a/app/angular/src/server/config.js +++ b/app/angular/src/server/config.js @@ -2,6 +2,7 @@ import fs from 'fs'; import path from 'path'; import loadBabelConfig from './babel_config'; +import loadTsConfig from './ts_config'; // avoid ESLint errors const logger = console; @@ -15,6 +16,9 @@ export default function(configType, baseConfig, configDir) { const babelConfig = loadBabelConfig(configDir); config.module.rules[0].query = babelConfig; + const tsOptions = loadTsConfig(configDir); + config.module.rules[1].loaders[0].options = tsOptions; + // Check whether a config.js file exists inside the storybook // config directory and throw an error if it's not. const storybookConfigPath = path.resolve(configDir, 'config.js'); diff --git a/app/angular/src/server/config/webpack.config.js b/app/angular/src/server/config/webpack.config.js index 00a6b4b78bb4..87c5dc92ad3d 100644 --- a/app/angular/src/server/config/webpack.config.js +++ b/app/angular/src/server/config/webpack.config.js @@ -64,7 +64,12 @@ export default function(configDir) { }, { test: /\.ts?$/, - loaders: [require.resolve('ts-loader'), require.resolve('angular2-template-loader')], + loaders: [ + { + loader: require.resolve('ts-loader'), + }, + require.resolve('angular2-template-loader'), + ], }, { test: /\.(html|css)$/, diff --git a/app/angular/src/server/index.js b/app/angular/src/server/index.js index 9b82e9ac7a68..96234d9e0f83 100755 --- a/app/angular/src/server/index.js +++ b/app/angular/src/server/index.js @@ -120,8 +120,6 @@ if (!hasCustomFavicon) { app.use(favicon(path.resolve(__dirname, 'public/favicon.ico'))); } -// Build the webpack configuration using the `baseConfig` -// custom `.babelrc` file and `webpack.config.js` files const configDir = program.configDir || './.storybook'; // The repository info is sent to the storybook while running on diff --git a/app/angular/src/server/ts_config.js b/app/angular/src/server/ts_config.js new file mode 100644 index 000000000000..cdf1106a2f3e --- /dev/null +++ b/app/angular/src/server/ts_config.js @@ -0,0 +1,27 @@ +import fs from 'fs'; +import path from 'path'; + +// avoid ESLint errors +const logger = console; + +function resolveTsConfig(tsConfigPath) { + if (!fs.existsSync(tsConfigPath)) { + return null; + } + + logger.info('=> Found custom tsconfig.json'); + + return tsConfigPath; +} + +export default function(configDir) { + const configFile = resolveTsConfig(path.resolve(configDir, 'tsconfig.json')); + + if (!configFile) { + return {}; + } + + return { + configFile, + }; +} diff --git a/examples/angular-cli/.storybook/tsconfig.json b/examples/angular-cli/.storybook/tsconfig.json new file mode 100644 index 000000000000..de9e409b5fbd --- /dev/null +++ b/examples/angular-cli/.storybook/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../tsconfig.json", + "exclude": [ + "../src/test.ts", + "../src/**/*.spec.ts" + ], + "include": [ + "../src/**/*" + ] +} From 13951107f62b244d9c837beb3038cbad933f7203 Mon Sep 17 00:00:00 2001 From: igor Date: Sun, 7 Jan 2018 12:04:01 +0200 Subject: [PATCH 2/3] Use extended loader syntax for ts loader in webpack.config.prod.js --- app/angular/src/server/config/webpack.config.prod.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/angular/src/server/config/webpack.config.prod.js b/app/angular/src/server/config/webpack.config.prod.js index d1b69c809efb..843a1137a1e0 100644 --- a/app/angular/src/server/config/webpack.config.prod.js +++ b/app/angular/src/server/config/webpack.config.prod.js @@ -73,7 +73,12 @@ export default function(configDir) { }, { test: /\.ts?$/, - loaders: [require.resolve('ts-loader'), require.resolve('angular2-template-loader')], + loaders: [ + { + loader: require.resolve('ts-loader'), + }, + require.resolve('angular2-template-loader'), + ], }, { test: /\.(html|css)$/, From 9a9ddad0cdf2192b06ae163271a5d124ce4c3404 Mon Sep 17 00:00:00 2001 From: igor Date: Sun, 7 Jan 2018 12:39:18 +0200 Subject: [PATCH 3/3] Add test for ts_config --- app/angular/src/server/ts_config.test.js | 32 ++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 app/angular/src/server/ts_config.test.js diff --git a/app/angular/src/server/ts_config.test.js b/app/angular/src/server/ts_config.test.js new file mode 100644 index 000000000000..2a00d1d212c5 --- /dev/null +++ b/app/angular/src/server/ts_config.test.js @@ -0,0 +1,32 @@ +import loadTsConfig from './ts_config'; + +// eslint-disable-next-line global-require +jest.mock('fs', () => require('../../../../__mocks__/fs')); +jest.mock('path', () => ({ + resolve: () => 'tsconfig.json', +})); + +const setupFiles = files => { + // eslint-disable-next-line no-underscore-dangle, global-require + require('fs').__setMockFiles(files); +}; + +describe('ts_config', () => { + it('should return the config with the path to the tsconfig.json', () => { + setupFiles({ 'tsconfig.json': '{}' }); + + const config = loadTsConfig('.foo'); + + expect(config).toEqual({ + configFile: 'tsconfig.json', + }); + }); + + it('should return empty object when there is no tsconfig.json', () => { + setupFiles({}); + + const config = loadTsConfig('.foo'); + + expect(config).toEqual({}); + }); +});