From 092505cb09d3d4d9386a76fdac5366ff91143bbe Mon Sep 17 00:00:00 2001 From: Carlos Vega Date: Fri, 5 Jan 2018 10:00:41 -0600 Subject: [PATCH 1/5] Renamed angular root node to avoid name collisions Angular CLI also uses `app-root` as the root node name and this could lead to weird bugs. Signed-off-by: Carlos Vega --- .../src/client/preview/angular/components/app.component.ts | 2 +- .../src/client/preview/angular/components/error.component.ts | 2 +- .../client/preview/angular/components/no-preview.component.ts | 2 +- app/angular/src/client/preview/angular/helpers.ts | 2 +- app/angular/src/server/iframe.html.ejs | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/angular/src/client/preview/angular/components/app.component.ts b/app/angular/src/client/preview/angular/components/app.component.ts index 5f9dffe3534d..ff4d463bf9ea 100644 --- a/app/angular/src/client/preview/angular/components/app.component.ts +++ b/app/angular/src/client/preview/angular/components/app.component.ts @@ -19,7 +19,7 @@ import { STORY } from '../app.token'; import { NgStory, ICollection } from '../types'; @Component({ - selector: 'app-root', + selector: 'storybook-dynamic-app-root', template: '' }) export class AppComponent implements AfterViewInit, OnDestroy { diff --git a/app/angular/src/client/preview/angular/components/error.component.ts b/app/angular/src/client/preview/angular/components/error.component.ts index 27c4b0ffb1fc..0b1bbad750d9 100644 --- a/app/angular/src/client/preview/angular/components/error.component.ts +++ b/app/angular/src/client/preview/angular/components/error.component.ts @@ -3,7 +3,7 @@ import { STORY } from "../app.token"; import { NgError } from "../types"; @Component({ - selector: "app-root", + selector: "storybook-dynamic-app-root", template: `

{{ error.message }}

diff --git a/app/angular/src/client/preview/angular/components/no-preview.component.ts b/app/angular/src/client/preview/angular/components/no-preview.component.ts index da750d633f69..784b83777b24 100644 --- a/app/angular/src/client/preview/angular/components/no-preview.component.ts +++ b/app/angular/src/client/preview/angular/components/no-preview.component.ts @@ -1,7 +1,7 @@ import { Component } from "@angular/core"; @Component({ - selector: "app-root", + selector: "storybook-dynamic-app-root", template: "

No Preview Available!

" }) export class NoPreviewComponent {} diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts index 4870f525ff13..231dd7855fea 100644 --- a/app/angular/src/client/preview/angular/helpers.ts +++ b/app/angular/src/client/preview/angular/helpers.ts @@ -186,7 +186,7 @@ const draw = (newModule: IModule, reRender: boolean = true): void => { modules.forEach(mod => mod.destroy()); const body = document.body; - const app = document.createElement('app-root'); + const app = document.createElement('storybook-dynamic-app-root'); body.appendChild(app); promises = []; promises.push(platform.bootstrapModule(newModule)); diff --git a/app/angular/src/server/iframe.html.ejs b/app/angular/src/server/iframe.html.ejs index 378b51c3476c..63dd8e6fdfa2 100644 --- a/app/angular/src/server/iframe.html.ejs +++ b/app/angular/src/server/iframe.html.ejs @@ -13,6 +13,6 @@ <%= htmlWebpackPlugin.options.data.previewHead %> - + From b1d52c3796478df920c8cc8bfb6adbde2ffda510 Mon Sep 17 00:00:00 2001 From: Carlos Vega Date: Fri, 5 Jan 2018 10:11:56 -0600 Subject: [PATCH 2/5] Update iframe.html.ejs --- app/angular/src/server/iframe.html.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/angular/src/server/iframe.html.ejs b/app/angular/src/server/iframe.html.ejs index 63dd8e6fdfa2..1115be893590 100644 --- a/app/angular/src/server/iframe.html.ejs +++ b/app/angular/src/server/iframe.html.ejs @@ -13,6 +13,6 @@ <%= htmlWebpackPlugin.options.data.previewHead %> - + From d4f4c558ba8e94fc6150adc9d8e976ba0cb5d1c4 Mon Sep 17 00:00:00 2001 From: Carlos Vega Date: Fri, 5 Jan 2018 10:42:05 -0600 Subject: [PATCH 3/5] Fixing some small tslint warnings Signed-off-by: Carlos Vega --- app/angular/tslint.json | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/app/angular/tslint.json b/app/angular/tslint.json index dd117b3871e6..d7a4fdd18456 100644 --- a/app/angular/tslint.json +++ b/app/angular/tslint.json @@ -31,8 +31,14 @@ "member-access": false, "member-ordering": [ true, - "static-before-instance", - "variables-before-functions" + { + "order": [ + "static-field", + "instance-field", + "static-method", + "instance-method" + ] + } ], "no-arg": true, "no-bitwise": true, @@ -80,6 +86,7 @@ ], "radix": true, "semicolon": [ + true, "always" ], "triple-equals": [ @@ -116,7 +123,7 @@ "component-selector": [ true, "element", - "app", + "storybook", "kebab-case" ], "use-input-property-decorator": true, From ab4364015d770787768fe0b29c1d029dcc0c4d15 Mon Sep 17 00:00:00 2001 From: Carlos Vega Date: Fri, 5 Jan 2018 10:49:08 -0600 Subject: [PATCH 4/5] Fixed some tslint issues after changing the config Signed-off-by: Carlos Vega --- .../angular/components/error.component.ts | 2 +- .../components/no-preview.component.ts | 2 +- .../src/client/preview/angular/helpers.ts | 4 ++-- .../src/client/preview/angular/types.ts | 24 +++++++++---------- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/app/angular/src/client/preview/angular/components/error.component.ts b/app/angular/src/client/preview/angular/components/error.component.ts index 0b1bbad750d9..e5c2588036d8 100644 --- a/app/angular/src/client/preview/angular/components/error.component.ts +++ b/app/angular/src/client/preview/angular/components/error.component.ts @@ -3,7 +3,7 @@ import { STORY } from "../app.token"; import { NgError } from "../types"; @Component({ - selector: "storybook-dynamic-app-root", + selector: 'storybook-dynamic-app-root', template: `

{{ error.message }}

diff --git a/app/angular/src/client/preview/angular/components/no-preview.component.ts b/app/angular/src/client/preview/angular/components/no-preview.component.ts index 784b83777b24..73a0d0c205e6 100644 --- a/app/angular/src/client/preview/angular/components/no-preview.component.ts +++ b/app/angular/src/client/preview/angular/components/no-preview.component.ts @@ -1,7 +1,7 @@ import { Component } from "@angular/core"; @Component({ - selector: "storybook-dynamic-app-root", + selector: 'storybook-dynamic-app-root', template: "

No Preview Available!

" }) export class NoPreviewComponent {} diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts index 231dd7855fea..69457a0e39c9 100644 --- a/app/angular/src/client/preview/angular/helpers.ts +++ b/app/angular/src/client/preview/angular/helpers.ts @@ -5,7 +5,7 @@ import { Component, NgModuleRef } from '@angular/core'; -import {FormsModule} from '@angular/forms' +import {FormsModule} from '@angular/forms'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; @@ -179,7 +179,7 @@ const draw = (newModule: IModule, reRender: boolean = true): void => { } catch (e) {} platform = platformBrowserDynamic(); - promises.push(platform.bootstrapModule(newModule)) + promises.push(platform.bootstrapModule(newModule)); } else { Promise.all(promises) .then((modules) => { diff --git a/app/angular/src/client/preview/angular/types.ts b/app/angular/src/client/preview/angular/types.ts index 7109bcf1226d..94ee308ae99c 100644 --- a/app/angular/src/client/preview/angular/types.ts +++ b/app/angular/src/client/preview/angular/types.ts @@ -1,28 +1,28 @@ export interface NgModuleMetadata { - declarations: Array, - imports: Array, - schemas: Array, - providers: Array, + declarations: Array; + imports: Array; + schemas: Array; + providers: Array; } -export interface ICollection {[p: string]: any} +export interface ICollection {[p: string]: any}; export interface NgStory { - component: any, - props: ICollection, - propsMeta: ICollection, + component: any; + props: ICollection; + propsMeta: ICollection; moduleMetadata?: NgModuleMetadata } export interface NgError { - message: string, - stack: string + message: string; + stack: string; } export type NgProvidedData = NgStory | NgError; export interface IContext { - [p: string]: any + [p: string]: any; } -export type IGetStoryWithContext = (context: IContext) => NgStory +export type IGetStoryWithContext = (context: IContext) => NgStory; From 846f53ff2a35526dfdae129356aa6eb4b97ec5b5 Mon Sep 17 00:00:00 2001 From: Carlos Vega Date: Fri, 5 Jan 2018 10:49:08 -0600 Subject: [PATCH 5/5] Fixed some tslint issues after changing the config Signed-off-by: Carlos Vega --- .../angular/components/error.component.ts | 2 +- .../components/no-preview.component.ts | 2 +- .../src/client/preview/angular/helpers.ts | 6 ++-- .../src/client/preview/angular/types.ts | 28 ++++++++++--------- 4 files changed, 20 insertions(+), 18 deletions(-) diff --git a/app/angular/src/client/preview/angular/components/error.component.ts b/app/angular/src/client/preview/angular/components/error.component.ts index 0b1bbad750d9..e5c2588036d8 100644 --- a/app/angular/src/client/preview/angular/components/error.component.ts +++ b/app/angular/src/client/preview/angular/components/error.component.ts @@ -3,7 +3,7 @@ import { STORY } from "../app.token"; import { NgError } from "../types"; @Component({ - selector: "storybook-dynamic-app-root", + selector: 'storybook-dynamic-app-root', template: `

{{ error.message }}

diff --git a/app/angular/src/client/preview/angular/components/no-preview.component.ts b/app/angular/src/client/preview/angular/components/no-preview.component.ts index 784b83777b24..73a0d0c205e6 100644 --- a/app/angular/src/client/preview/angular/components/no-preview.component.ts +++ b/app/angular/src/client/preview/angular/components/no-preview.component.ts @@ -1,7 +1,7 @@ import { Component } from "@angular/core"; @Component({ - selector: "storybook-dynamic-app-root", + selector: 'storybook-dynamic-app-root', template: "

No Preview Available!

" }) export class NoPreviewComponent {} diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts index 231dd7855fea..847654083b68 100644 --- a/app/angular/src/client/preview/angular/helpers.ts +++ b/app/angular/src/client/preview/angular/helpers.ts @@ -5,7 +5,7 @@ import { Component, NgModuleRef } from '@angular/core'; -import {FormsModule} from '@angular/forms' +import {FormsModule} from '@angular/forms'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; @@ -28,7 +28,7 @@ interface IModule extends Type { interface IComponent extends Type { annotations: any[]; parameters: any[]; - propsMetadata: any[] + propsMetadata: any[]; } // Taken from https://davidwalsh.name/javascript-debounce-function @@ -179,7 +179,7 @@ const draw = (newModule: IModule, reRender: boolean = true): void => { } catch (e) {} platform = platformBrowserDynamic(); - promises.push(platform.bootstrapModule(newModule)) + promises.push(platform.bootstrapModule(newModule)); } else { Promise.all(promises) .then((modules) => { diff --git a/app/angular/src/client/preview/angular/types.ts b/app/angular/src/client/preview/angular/types.ts index 7109bcf1226d..ae1501e3e995 100644 --- a/app/angular/src/client/preview/angular/types.ts +++ b/app/angular/src/client/preview/angular/types.ts @@ -1,28 +1,30 @@ export interface NgModuleMetadata { - declarations: Array, - imports: Array, - schemas: Array, - providers: Array, + declarations: Array; + imports: Array; + schemas: Array; + providers: Array; } -export interface ICollection {[p: string]: any} +export interface ICollection { + [p: string]: any; +} export interface NgStory { - component: any, - props: ICollection, - propsMeta: ICollection, - moduleMetadata?: NgModuleMetadata + component: any; + props: ICollection; + propsMeta: ICollection; + moduleMetadata?: NgModuleMetadata; } export interface NgError { - message: string, - stack: string + message: string; + stack: string; } export type NgProvidedData = NgStory | NgError; export interface IContext { - [p: string]: any + [p: string]: any; } -export type IGetStoryWithContext = (context: IContext) => NgStory +export type IGetStoryWithContext = (context: IContext) => NgStory;