Merge pull request #2657 from storybooks/renaming-angular-root-node

Renamed angular root node to avoid name collisions
storybookjs · Jan 5, 2018 · f74f032 · f74f032
2 parents 994539d + 59559c1
commit f74f032
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 24 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
@@ -19,7 +19,7 @@ import { STORY } from '../app.token';
 import { NgStory, ICollection } from '../types';
 
 @Component({
-  selector: 'app-root',
+  selector: 'storybook-dynamic-app-root',
   template: '<ng-template #target></ng-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
@@ -3,7 +3,7 @@ import { STORY } from "../app.token";
 import { NgError } from "../types";
 
 @Component({
-  selector: "app-root",
+  selector: 'storybook-dynamic-app-root',
   template: `
     <div class="main">
       <h1>{{ error.message }}</h1>

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
@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";
 
 @Component({
-  selector: "app-root",
+  selector: 'storybook-dynamic-app-root',
   template: "<p>No Preview Available!</p>"
 })
 export class NoPreviewComponent {}
diff --git 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<any> {
 interface IComponent extends Type<any> {
   annotations: any[];
   parameters: any[];
-  propsMetadata: any[]
+  propsMetadata: any[];
 }
 
 // Taken from https://davidwalsh.name/javascript-debounce-function
@@ -179,14 +179,14 @@ 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) => {
         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/client/preview/angular/types.ts b/app/angular/src/client/preview/angular/types.ts
@@ -1,28 +1,30 @@
 export interface NgModuleMetadata {
-    declarations: Array<any>,
-    imports: Array<any>,
-    schemas: Array<any>,
-    providers: Array<any>,
+    declarations: Array<any>;
+    imports: Array<any>;
+    schemas: Array<any>;
+    providers: Array<any>;
 }
 
-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;
diff --git a/app/angular/src/server/iframe.html.ejs b/app/angular/src/server/iframe.html.ejs
@@ -14,6 +14,6 @@
     <%= htmlWebpackPlugin.options.data.previewHead %>
 </head>
 <body>
-    <app-root></app-root>
+    <storybook-dynamic-app-root></storybook-dynamic-app-root>
 </body>
 </html>
diff --git 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,