Using Babel for TypeScript instead of tsc #5109
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,22 @@ | ||
| // tslint:disable-next-line:no-implicit-dependencies | ||
| 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 |
|---|---|---|
|
|
@@ -3,8 +3,8 @@ | |
| "include": [ | ||
| "src/**/*.ts" | ||
| ], | ||
| "compilerOptions": { | ||
| "rootDir": "./src", | ||
| "experimentalDecorators": true | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| import { resolve } from 'path'; | ||
|
There was a problem hiding this comment. mixing es modules & commonjs here, is that recommended? There was a problem hiding this comment. Is it not recommended? A common linting rule in There was a problem hiding this comment. webpack/webpack#4039 (comment) There was a problem hiding this comment. This post is 2 years old and maybe babel / typescript already converts my import to es5 (can't check right now) There was a problem hiding this comment. I came across this issue yesterday itself where I was mixing the two. This led to me getting some imports inside |
||
|
|
||
| module.exports = async ({ config }: { config: any }) => { | ||
| config.module.rules.push({ | ||
| test: [/\.stories\.tsx?$/, /index\.ts$/], | ||
| loaders: [ | ||
|
|
@@ -11,7 +11,7 @@ module.exports = async ({ config }) => { | |
| }, | ||
| }, | ||
| ], | ||
| include: [resolve(__dirname, '../src')], | ||
| enforce: 'pre', | ||
| }); | ||
| return config; | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -57,6 +57,6 @@ | |
| "jest-preset-angular": "^6.0.1", | ||
| "protractor": "~5.4.2", | ||
| "ts-node": "~8.0.3", | ||
| "typescript": "^3.4.1" | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -39,6 +39,6 @@ | |
| "react-scripts": "^2.1.3", | ||
| "tslint": "^5.14.0", | ||
| "tslint-config-airbnb": "^5.11.1", | ||
| "typescript": "^3.4.1" | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,10 +12,12 @@ | |
| "strict": true, | ||
| "forceConsistentCasingInFileNames": true, | ||
| "resolveJsonModule": true, | ||
| "isolatedModules": true | ||
|
There was a problem hiding this comment. using There was a problem hiding this comment. should we also add There was a problem hiding this comment. isolatedModules: true isolatedModules: false 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 There was a problem hiding this comment. 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/ There was a problem hiding this comment. I just found out: There was a problem hiding this comment. That is why I suggest to add There was a problem hiding this comment. I'm with @leoyli on this one, sounds like that's what we want? There was a problem hiding this comment. Hm question:
Is there something I don't get or is this a misunderstanding? 🙂 There was a problem hiding this comment. 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" | ||
| ] | ||
| } | ||
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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