Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Babel for TypeScript instead of tsc #5109

Merged
merged 56 commits into from
Apr 4, 2019
Merged
Show file tree
Hide file tree
Changes from 55 commits
Commits
Show all changes
56 commits
Select commit Hold shift + click to select a range
2fc1518
yarn.lock
kroeder Dec 27, 2018
1a5fa4b
Using babel-typescript instead of tsc
kroeder Dec 28, 2018
8543bf0
Added decorator support for babel
kroeder Dec 28, 2018
8c8775c
Angular now gets compiled by tsc, everything else is compiled by babe…
kroeder Jan 4, 2019
a40589a
Migrated app/angular/client to TS
kroeder Jan 5, 2019
c5f4775
Migrated app/angular/server to TS; Still WIP
kroeder Jan 5, 2019
468477d
Merge branch 'next' into ts-migration/babel-typescript
ndelangen Jan 5, 2019
2da70f6
MAYBE fix build
ndelangen Jan 5, 2019
d351d87
Merge branch 'next' into ts-migration/babel-typescript
ndelangen Mar 2, 2019
4be2657
FIX circular dep
ndelangen Mar 2, 2019
b79e39a
Add demo.js to the root of the package to allow @storybook/angular/de…
kroeder Mar 3, 2019
65b8c31
Rename dev:js to dev:babel and dev:ts to dev:tsc since babel does ts-…
kroeder Mar 3, 2019
36c738e
Add index.d.ts and handle this in a separate migration
kroeder Mar 3, 2019
66b3cdb
Add index.d.ts back; was deleted accidentally
kroeder Mar 10, 2019
22b919a
Move types into typings.d.ts
kroeder Mar 10, 2019
1e0abdd
Possible fix for addon-centered
kroeder Mar 11, 2019
8616481
Merge branch 'next' into ts-migration/babel-typescript
ndelangen Mar 15, 2019
44e566f
Add check-types script for typescript type checking
kroeder Mar 16, 2019
d551fb3
Merge branch 'next' into ts-migration/babel-typescript
ndelangen Mar 19, 2019
10a530d
ADD @storybook/api to dll
ndelangen Mar 19, 2019
45dcad3
WIP
ndelangen Mar 19, 2019
14f8cbc
Merge branch 'next' into ts-migration/babel-typescript
ndelangen Mar 20, 2019
c1d2ba6
WIP
ndelangen Mar 20, 2019
f0c4cb4
Merge branch 'ts-migration/babel-typescript' of https://github.com/st…
kroeder Mar 22, 2019
161fc1f
boy-scout-rule: added types for lodash and removed the module declara…
kroeder Mar 22, 2019
7ed0898
Merge branch 'next' into ts-migration/babel-typescript
kroeder Mar 22, 2019
2f4f5b5
WIP Reverted ts migration of app/angular; fixed missing d.ts
kroeder Mar 22, 2019
3f12a74
WIP refactoring
kroeder Mar 22, 2019
2162772
fix app/angular build
kroeder Mar 23, 2019
0a9626d
fix --scope command
kroeder Mar 23, 2019
8a2919c
Remove accidentally added webstorm %NODE_DEBUG_OPTION%
kroeder Mar 23, 2019
1194c5f
Merge branch 'next' into ts-migration/babel-typescript
kroeder Mar 23, 2019
29db6ad
Set experimentalDecorators: true in root/tsconfig.json because jest f…
kroeder Mar 23, 2019
d667a92
This was changed due to yarn bootstrap --core
kroeder Mar 23, 2019
37576e5
Fix js compilation for app/angular
kroeder Mar 23, 2019
87dfbb7
Fix for AppComponent instantiation
kroeder Mar 23, 2019
6bccd3d
Make babel only transpile js in app/angular
kroeder Mar 23, 2019
aa9fa9e
Potential jest fix for app/angular
kroeder Mar 23, 2019
f19c1eb
Storyshots fix; needs refactoring
kroeder Mar 24, 2019
33d9835
Merge branch 'next' into ts-migration/babel-typescript
kroeder Mar 30, 2019
f3b83a1
Possibly fix Namespace '"/tmp/storybook/node_modules/hoist-non-react-…
kroeder Mar 30, 2019
4da6504
Workaround fix for https://github.com/DefinitelyTyped/DefinitelyTyped…
kroeder Mar 30, 2019
bfce809
Fix ts issues during yarn dev
kroeder Mar 30, 2019
4050dbc
exclude setupTests.js in tsconfig
kroeder Mar 30, 2019
4729fc4
try removing weak-package in the assumption that it is not used and m…
kroeder Mar 30, 2019
7104e93
yarn.lock
kroeder Mar 30, 2019
6e6df7c
Revert "try removing weak-package in the assumption that it is not us…
kroeder Mar 30, 2019
10ac24b
Revert "yarn.lock"
kroeder Mar 30, 2019
45f0445
Merge branch 'next' into ts-migration/babel-typescript
kroeder Mar 30, 2019
24e7eb4
Fix lint by allowing console in build-tsc.js
kroeder Mar 30, 2019
2521d2b
Update snapshot
shilman Mar 31, 2019
413438a
clean up babelrc
kroeder Mar 31, 2019
ef57974
Add skipLibCheck to make things faster
kroeder Mar 31, 2019
7237cd7
Merge branch 'ts-migration/babel-typescript' of https://github.com/st…
kroeder Mar 31, 2019
0b881e2
Resolved change requests
kroeder Apr 1, 2019
dc521ca
Add changes based on https://github.com/storybooks/storybook/pull/6415
kroeder Apr 4, 2019
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions .babelrc.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
module.exports = {
presets: [
['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage' }],
'@babel/preset-typescript',
'@babel/preset-react',
'@babel/preset-flow',
],
plugins: [
['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
'@babel/plugin-proposal-export-default-from',
'@babel/plugin-syntax-dynamic-import',
['@babel/plugin-proposal-class-properties', { loose: true }],
['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
'babel-plugin-macros',
['emotion', { sourceMap: true, autoLabel: true }],
],
Expand Down Expand Up @@ -62,6 +63,13 @@ module.exports = {
},
],
],
plugins: [
'emotion',
'babel-plugin-macros',
['@babel/plugin-proposal-class-properties', { loose: true }],
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-proposal-export-default-from',
],
},
],
};
Original file line number Diff line number Diff line change
Expand Up @@ -78,25 +78,13 @@ exports[`HighlightToggle component should match snapshot 1`] = `
"toString": [Function],
},
"hoverable": Object {
"map": undefined,
"name": "wpaw6f",
"next": undefined,
"styles": "
transition: all 150ms ease-out;
transform: translate3d(0, 0, 0);

&:hover {
transform: translate3d(0, -2px, 0);
}

&:active {
transform: translate3d(0, 0, 0);
}
",
"map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
"name": "1023qba-hoverable",
"styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);}label:hoverable;",
},
"inlineGlow": Object {
"map": undefined,
"name": "zv3h0s",
"map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
"name": "1euta6d-inlineGlow",
"next": Object {
"name": "animation-r0iffl",
"next": undefined,
Expand All @@ -105,12 +93,7 @@ exports[`HighlightToggle component should match snapshot 1`] = `
50% { opacity: .4; }
}",
},
"styles": "
animation: animation-r0iffl 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
",
"styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;label:inlineGlow;",
},
"jiggle": Object {
"anim": 1,
Expand Down
18 changes: 17 additions & 1 deletion addons/centered/angular.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
// tslint:disable-next-line:no-implicit-dependencies
import { IStory } from '@storybook/angular';
export interface ICollection {
[p: string]: any;
}

export interface NgModuleMetadata {
declarations?: any[];
entryComponents?: any[];
imports?: any[];
schemas?: any[];
providers?: any[];
}

export interface IStory {
props?: ICollection;
moduleMetadata?: Partial<NgModuleMetadata>;
component?: any;
template?: string;
}
declare module '@storybook/addon-centered/angular' {
export function centered(story: IStory): IStory;
}
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
import 'core-js';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import hasDependency from '../hasDependency';
import configure from '../configure';

function setupAngularJestPreset() {
// Needed to prevent "Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten."
require.requireActual('core-js');
require.requireActual('core-js/modules/es6.promise');
// require.requireActual('core-js/es6/reflect');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like you might be able to remove some of this now

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ndelangen you changed that, can you take a look at this?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should remove if storyshots run successfully without it

// require.requireActual('core-js/es7/reflect');

// Angular + Jest + Storyshots = Crazy Shit:
// We need to require 'jest-preset-angular/setupJest' before any storybook code
Expand Down
4 changes: 2 additions & 2 deletions addons/storyshots/storyshots-core/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
"include": [
"src/**/*.ts"
],
"compileOnSave": false,
"compilerOptions": {
"rootDir": "./src"
"rootDir": "./src",
"experimentalDecorators": true
}
}
33 changes: 31 additions & 2 deletions app/angular/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,28 @@
import { NgModuleMetadata, ICollection } from './dist/client/preview/angular/types';
export { moduleMetadata } from './dist/client/preview/angular/decorators';
/*
* ATTENTION:
* - moduleMetadata
* - NgModuleMetadata
* - ICollection
*
* These typings are coped out of decorators.d.ts and types.d.ts in order to fix a bug with tsc
* It was imported out of dist before which was not the proper way of exporting public API
*
* This can be fixed by migrating app/angular to typescript
*/
export declare const moduleMetadata: (
metadata: Partial<NgModuleMetadata>
) => (storyFn: () => any) => any;

export interface NgModuleMetadata {
declarations?: any[];
entryComponents?: any[];
imports?: any[];
schemas?: any[];
providers?: any[];
}
export interface ICollection {
[p: string]: any;
}

export interface IStorybookStory {
name: string;
Expand Down Expand Up @@ -36,10 +59,16 @@ export interface IApi {

declare module '@storybook/angular' {
export function storiesOf(kind: string, module: NodeModule): IApi;

export function setAddon(addon: any): void;

export function addDecorator(decorator: any): IApi;

export function addParameters(parameters: any): IApi;

export function configure(loaders: () => void, module: NodeModule): void;

export function getStorybook(): IStoribookSection[];

export function forceReRender(): void;
}
2 changes: 2 additions & 0 deletions app/angular/src/client/preview/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { IApi, IStoribookSection } from '../../../index';

export function storiesOf(kind: string, module: NodeModule): IApi;
export function setAddon(addon: any): void;
export function addDecorator(decorator: any): IApi;
Expand Down
Empty file modified app/angular/src/server/build.js
100755 → 100644
Empty file.
Empty file modified app/angular/src/server/index.js
100755 → 100644
Empty file.
10 changes: 9 additions & 1 deletion app/angular/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,14 @@
],
"compileOnSave": false,
"compilerOptions": {
"rootDir": "./src"
"outDir": "dist",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"declaration": true,
"rootDir": "./src",
"lib": [
"es2017",
"dom"
]
}
}
6 changes: 3 additions & 3 deletions examples/angular-cli/.storybook/webpack.config.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const path = require('path');
import { resolve } from 'path';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mixing es modules & commonjs here, is that recommended?

Copy link
Member Author

@kroeder kroeder Apr 2, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it not recommended? A common linting rule in ts is no-use-require or something like that. I can revert that if you want, it works though. I've never experienced any trouble using imports for path like that

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This post is 2 years old and maybe babel / typescript already converts my import to es5 (can't check right now)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I came across this issue yesterday itself where I was mixing the two. This led to me getting some imports inside default and some not. Not mixing them up helped me fix it. Although I am not quite sure about your usage.


module.exports = async ({ config }) => {
module.exports = async ({ config }: { config: any }) => {
config.module.rules.push({
test: [/\.stories\.tsx?$/, /index\.ts$/],
loaders: [
Expand All @@ -11,7 +11,7 @@ module.exports = async ({ config }) => {
},
},
],
include: [path.resolve(__dirname, '../src')],
include: [resolve(__dirname, '../src')],
enforce: 'pre',
});
return config;
Expand Down
2 changes: 1 addition & 1 deletion examples/angular-cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,6 @@
"jest-preset-angular": "^6.0.1",
"protractor": "~5.4.2",
"ts-node": "~8.0.3",
"typescript": "^3.3.3333"
"typescript": "^3.4.1"
}
}
1 change: 0 additions & 1 deletion examples/angular-cli/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
Expand Down
2 changes: 1 addition & 1 deletion examples/cra-ts-kitchen-sink/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,6 @@
"react-scripts": "^2.1.3",
"tslint": "^5.14.0",
"tslint-config-airbnb": "^5.11.1",
"typescript": "^3.3.3333"
"typescript": "^3.4.1"
}
}
6 changes: 4 additions & 2 deletions examples/cra-ts-kitchen-sink/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,12 @@
"strict": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
"isolatedModules": true
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

using isolatedModules in all our tsconfigs could improve tsc performance

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we also add declaration: false here?! I'm not sure what is the best way to make sure this one won't emit any typed files. If we want an emission, then this have to be set to false. See this issue on TS repo here.

Copy link
Member Author

@kroeder kroeder Apr 1, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isolatedModules: true

real    0m18.465s
user    0m0.045s
sys     0m0.045s

isolatedModules: false

real    0m18.345s
user    0m0.030s
sys     0m0.091s

Why should it be faster? What does this option even do? I tried to find more accurate documentation than "exports every file as separate module"

Also keep in mind that this is an example app and depends on the decisions a project owner makes, not storybook.

@ndelangen you added isolatedModules: true - Were you just playing around with the options or was this on purpose?

Copy link
Member

@benoitdion benoitdion Apr 1, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it could/should be faster because tsc doesn't need cross-file information to emit. Doesn't look like it makes any difference for us though.

I would still recommend adding it in because it helps enforce rules around "Babel's single file emit architecture". See the caveats section at https://devblogs.microsoft.com/typescript/typescript-and-babel-7/

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just found out: TS5053: Option 'declaration' cannot be specified with option 'isolatedModules'. 🐙

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is why I suggest to add declaration: false together with isolatedModules, maybe with a comment? In my own project, I have tsc --isolatedModules --noEmit --watch for type checking, and tsc --declaration --removeComments --emitDeclarationOnly for type emission. The rest of them goes through babel.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm with @leoyli on this one, sounds like that's what we want?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm question:

  • You start yarn dev and yarn dev:tsc needs to create declaration files for other internal packages that rely on that package: How can I do declaration: false here
  • You start yarn bootstrap --core and internally packages again rely on the d.ts files of other packages: How can I do declaration: false

Is there something I don't get or is this a misunderstanding? 🙂

Copy link
Member Author

@kroeder kroeder Apr 2, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean, yes - it won't fail but at least your IDE will mark those imports red because they are missing - Isn't it confusing if you get red lines in your IDE?

🤔 or are internal packages not red because the IDE can handle this...

},
"include": [
"src"
],
"exclude": [
"src/setupTests.js"
]
}
Original file line number Diff line number Diff line change
Expand Up @@ -7891,7 +7891,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
.emotion-11.emotion-11 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -7924,7 +7923,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
.emotion-19.emotion-19 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -7957,7 +7955,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
.emotion-27.emotion-27 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -7990,7 +7987,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
.emotion-31.emotion-31 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -8254,7 +8250,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
.emotion-11.emotion-11 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -8287,7 +8282,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
.emotion-19.emotion-19 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -8320,7 +8314,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
.emotion-27.emotion-27 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -8353,7 +8346,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
.emotion-31.emotion-31 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -12939,7 +12931,6 @@ exports[`Storyshots UI|Sidebar/SidebarItem loading 1`] = `
.emotion-3.emotion-3 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -13044,7 +13035,6 @@ exports[`Storyshots UI|Sidebar/SidebarItem loading 1`] = `
.emotion-3.emotion-3 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -15154,7 +15144,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
.emotion-3.emotion-3 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -15187,7 +15176,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
.emotion-11.emotion-11 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -15220,7 +15208,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
.emotion-19.emotion-19 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -15253,7 +15240,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
.emotion-23.emotion-23 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -15366,7 +15352,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
.emotion-3.emotion-3 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -15399,7 +15384,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
.emotion-11.emotion-11 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -15432,7 +15416,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
.emotion-19.emotion-19 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down Expand Up @@ -15465,7 +15448,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
.emotion-23.emotion-23 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
background: rgba(0,0,0,.1);
color: transparent;
cursor: progress;
}
Expand Down
Loading