Skip to content

Commit

Permalink
Merge pull request #4118 from kroeder/angular-build-time-optimization
Browse files Browse the repository at this point in the history
Angular build time optimization
  • Loading branch information
igor-dv authored Sep 20, 2018
2 parents a6697e4 + 6070cb8 commit 71fb0da
Show file tree
Hide file tree
Showing 10 changed files with 130 additions and 26 deletions.
1 change: 1 addition & 0 deletions app/angular/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"@storybook/core": "4.0.0-alpha.22",
"@storybook/node-logger": "4.0.0-alpha.22",
"angular2-template-loader": "^0.6.2",
"fork-ts-checker-webpack-plugin": "^0.4.9",
"core-js": "^2.5.7",
"global": "^4.3.2",
"react": "^16.4.2",
Expand Down
13 changes: 13 additions & 0 deletions app/angular/src/server/create-fork-ts-checker-plugin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import { logger } from '@storybook/node-logger';

export default function(tsLoaderOptions) {
if (tsLoaderOptions && tsLoaderOptions.configFile) {
return new ForkTsCheckerWebpackPlugin({
tsconfig: tsLoaderOptions.configFile,
});
}

logger.info('=> Using default options for ForkTsCheckerWebpackPlugin');
return new ForkTsCheckerWebpackPlugin();
}
31 changes: 31 additions & 0 deletions app/angular/src/server/create-fork-ts-checker-plugin.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import getTsLoaderOptions from './ts_config';
import createForkTsCheckerInstance from './create-fork-ts-checker-plugin';

// 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('create-fork-ts-checker-plugin.test', () => {
it('should create a ForkTsCheckerWebpackPlugin instance', () => {
setupFiles({ 'tsconfig.json': '{}' });

const tsLoaderOptions = getTsLoaderOptions('.foo');
const instance = createForkTsCheckerInstance(tsLoaderOptions);

expect(instance).toBeInstanceOf(ForkTsCheckerWebpackPlugin);
expect(instance.tsconfig).toEqual(tsLoaderOptions.configFile);
});

it('should create a ForkTsCheckerWebpackPlugin instance without passing options', () => {
const instance = createForkTsCheckerInstance({});
expect(instance).toBeInstanceOf(ForkTsCheckerWebpackPlugin);
});
});
7 changes: 5 additions & 2 deletions app/angular/src/server/framework-preset-angular.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import path from 'path';
import { ContextReplacementPlugin } from 'webpack';
import loadTsConfig from './ts_config';
import getTsLoaderOptions from './ts_config';
import createForkTsCheckerInstance from './create-fork-ts-checker-plugin';

export function webpack(config, { configDir }) {
const tsLoaderOptions = getTsLoaderOptions(configDir);
return {
...config,
module: {
Expand All @@ -14,7 +16,7 @@ export function webpack(config, { configDir }) {
use: [
{
loader: require.resolve('ts-loader'),
options: loadTsConfig(configDir),
options: tsLoaderOptions,
},
require.resolve('angular2-template-loader'),
],
Expand Down Expand Up @@ -45,6 +47,7 @@ export function webpack(config, { configDir }) {
/@angular(\\|\/)core(\\|\/)fesm5/,
path.resolve(__dirname, '..')
),
createForkTsCheckerInstance(tsLoaderOptions),
],
};
}
13 changes: 7 additions & 6 deletions app/angular/src/server/ts_config.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,14 @@ function resolveTsConfig(tsConfigPath) {
}

export default function(configDir) {
const configFile = resolveTsConfig(path.resolve(configDir, 'tsconfig.json'));
const tsLoaderOptions = {
transpileOnly: true,
};
const configFilePath = resolveTsConfig(path.resolve(configDir, 'tsconfig.json'));

if (!configFile) {
return {};
if (configFilePath) {
tsLoaderOptions.configFile = configFilePath;
}

return {
configFile,
};
return tsLoaderOptions;
}
13 changes: 8 additions & 5 deletions app/angular/src/server/ts_config.test.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import loadTsConfig from './ts_config';
import getTsLoaderOptions from './ts_config';

// eslint-disable-next-line global-require
jest.mock('fs', () => require('../../../../__mocks__/fs'));
Expand All @@ -15,18 +15,21 @@ describe('ts_config', () => {
it('should return the config with the path to the tsconfig.json', () => {
setupFiles({ 'tsconfig.json': '{}' });

const config = loadTsConfig('.foo');
const config = getTsLoaderOptions('.foo');

expect(config).toEqual({
transpileOnly: true,
configFile: 'tsconfig.json',
});
});

it('should return empty object when there is no tsconfig.json', () => {
it('should return object with transpileOnly: true when there is no tsconfig.json', () => {
setupFiles({});

const config = loadTsConfig('.foo');
const config = getTsLoaderOptions('.foo');

expect(config).toEqual({});
expect(config).toEqual({
transpileOnly: true,
});
});
});
25 changes: 25 additions & 0 deletions docs/src/pages/basics/guide-angular/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,31 @@ That'll load stories in `../src/stories/index.ts`.

Just like that, you can load stories from wherever you want to.

## Storybook TypeScript configuration

**Note:** You only need this if you are using Storybook `>= 4.0.0-alpha.23`.

`@storybook/angular` is using [ForkTsCheckerWebpackPlugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) to boost the build performance.
This makes it necessary to create a `tsconfig.json` file at `.storybook/tsconfig.json` with the following content:

```json
{
"extends": "../tsconfig.json",
"exclude": [
"../src/test.ts",
"../src/**/*.spec.ts",
"../projects/**/*.spec.ts"
],
"include": [
"../src/**/*",
"../projects/**/*"
]
}
```

> Only files that are included in the `include` or `files` section are checked for semantic TypeScript errors.
> For more information visit the [ForkTsCheckerWebpackPlugin documentation](https://github.com/Realytics/fork-ts-checker-webpack-plugin#modules-resolution).
## Write your stories

Now you can write some stories inside the `../src/stories/index.ts` file, like this:
Expand Down
2 changes: 0 additions & 2 deletions examples/angular-cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,6 @@
"@storybook/addon-storysource": "4.0.0-alpha.22",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/angular": "4.0.0-alpha.22",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "^2.0.3",
"@types/jest": "^23.3.1",
"@types/node": "~10.9.2",
"@types/storybook__addon-options": "^3.2.2",
Expand Down
12 changes: 12 additions & 0 deletions lib/cli/generators/ANGULAR/template/.storybook/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"extends": "../tsconfig.json",
"exclude": [
"../src/test.ts",
"../src/**/*.spec.ts",
"../projects/**/*.spec.ts"
],
"include": [
"../src/**/*",
"../projects/**/*"
]
}
39 changes: 28 additions & 11 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1747,16 +1747,6 @@
version "0.0.38"
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.38.tgz#c1be40aa933723c608820a99a373a16d215a1ca2"

"@types/jasmine@*", "@types/jasmine@~2.8.8":
version "2.8.8"
resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.8.8.tgz#bf53a7d193ea8b03867a38bfdb4fbb0e0bf066c9"

"@types/jasminewd2@^2.0.3":
version "2.0.3"
resolved "https://registry.yarnpkg.com/@types/jasminewd2/-/jasminewd2-2.0.3.tgz#0d2886b0cbdae4c0eeba55e30792f584bf040a95"
dependencies:
"@types/jasmine" "*"

"@types/jest@^23.3.1":
version "23.3.1"
resolved "https://registry.yarnpkg.com/@types/jest/-/jest-23.3.1.tgz#a4319aedb071d478e6f407d1c4578ec8156829cf"
Expand Down Expand Up @@ -5051,7 +5041,7 @@ chokidar@^1.4.2, chokidar@^1.4.3, chokidar@^1.5.1:
optionalDependencies:
fsevents "^1.0.0"

chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.3:
chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.3, chokidar@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.4.tgz#356ff4e2b0e8e43e322d18a372460bbcf3accd26"
dependencies:
Expand Down Expand Up @@ -8068,6 +8058,21 @@ forever-agent@~0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"

fork-ts-checker-webpack-plugin@^0.4.9:
version "0.4.9"
resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-0.4.9.tgz#78607899d4411fdc6faeca5b4db7654c9d8d28a2"
dependencies:
babel-code-frame "^6.22.0"
chalk "^2.4.1"
chokidar "^2.0.4"
lodash.endswith "^4.2.1"
lodash.isfunction "^3.0.8"
lodash.isstring "^4.0.1"
lodash.startswith "^4.2.1"
minimatch "^3.0.4"
resolve "^1.5.0"
tapable "^1.0.0"

form-data@~2.1.1:
version "2.1.4"
resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
Expand Down Expand Up @@ -11537,6 +11542,10 @@ lodash.defaults@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"

lodash.endswith@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/lodash.endswith/-/lodash.endswith-4.2.1.tgz#fed59ac1738ed3e236edd7064ec456448b37bc09"

lodash.escape@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
Expand Down Expand Up @@ -11584,6 +11593,10 @@ lodash.isequal@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"

lodash.isfunction@^3.0.8:
version "3.0.9"
resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051"

lodash.isinteger@^4.0.4:
version "4.0.4"
resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343"
Expand Down Expand Up @@ -11668,6 +11681,10 @@ lodash.sortby@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"

lodash.startswith@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/lodash.startswith/-/lodash.startswith-4.2.1.tgz#c598c4adce188a27e53145731cdc6c0e7177600c"

lodash.tail@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
Expand Down

0 comments on commit 71fb0da

Please sign in to comment.