Angular - Avoid component redeclaration without additional configuration

addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { Component, Type } from '@angular/core';
+import { Component, Type, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
@@ -30,26 +30,73 @@ const createComponentFromTemplate = (template: string) => {
     template,
   })(componentClass);
 };
+const extractNgModuleMetadata = (importItem: any): NgModule => {
+  const decoratorKey = '__annotations__';
+  const decorators: any[] =
+    Reflect && Reflect.getOwnPropertyDescriptor
+      ? Reflect.getOwnPropertyDescriptor(importItem, decoratorKey).value
+      : importItem[decoratorKey];
+
+  if (!decorators || decorators.length === 0) {
+    return null;
+  }
+
+  const ngModuleDecorator: NgModule | undefined = decorators.find(
+    decorator => decorator instanceof NgModule
+  );
+  if (!ngModuleDecorator) {
+    return null;
+  }
+  return ngModuleDecorator;
+};
+
+const getExistenceOfComponentInModules = (
+  component: any,
+  declarations: any[],
+  imports: any[]
+): boolean => {
+  if (declarations && declarations.some(declaration => declaration === component)) {
+    // Found component in declarations array
+    return true;
+  }
+  if (!imports) {
+    return false;
+  }
+
+  return imports.some(importItem => {
+    const extractedNgModuleMetadata = extractNgModuleMetadata(importItem);
+    if (!extractedNgModuleMetadata) {
+      // Not an NgModule
+      return false;
+    }
+    return getExistenceOfComponentInModules(
+      component,
+      extractedNgModuleMetadata.declarations,
+      extractedNgModuleMetadata.imports
+    );
+  });
+};
 
 export const initModuleData = (storyObj: NgStory): any => {
-  const {
-    component,
-    template,
-    props,
-    moduleMetadata = {},
-    requiresComponentDeclaration = true,
-  } = storyObj;
+  const { component, template, props, moduleMetadata = {} } = storyObj;
 
   const isCreatingComponentFromTemplate = Boolean(template);
 
   const AnnotatedComponent = isCreatingComponentFromTemplate
     ? createComponentFromTemplate(template)
     : component;
 
-  const componentDeclarations =
-    isCreatingComponentFromTemplate || requiresComponentDeclaration
-      ? [AppComponent, AnnotatedComponent]
-      : [AppComponent];
+  const componentRequiesDeclaration =
+    isCreatingComponentFromTemplate ||
+    !getExistenceOfComponentInModules(
+      component,
+      moduleMetadata.declarations,
+      moduleMetadata.imports
+    );
+
+  const componentDeclarations = componentRequiesDeclaration
+    ? [AppComponent, AnnotatedComponent]
+    : [AppComponent];
 
   const story = {
     component: AnnotatedComponent,

addons/storyshots/storyshots-core/src/frameworks/angular/types.ts

@@ -12,7 +12,6 @@ export interface ICollection {
 
 export interface NgStory {
   component?: any;
-  requiresComponentDeclaration?: boolean;
   props: ICollection;
   propsMeta?: ICollection;
   moduleMetadata?: NgModuleMetadata;

app/angular/index.d.ts

@@ -45,7 +45,6 @@ export interface IStory {
   props?: ICollection;
   moduleMetadata?: Partial<NgModuleMetadata>;
   component?: any;
-  requiresComponentDeclaration?: boolean;
   template?: string;
 }
 

app/angular/src/client/preview/angular/helpers.ts

@@ -47,27 +47,74 @@ const createComponentFromTemplate = (template: string, styles: string[]) => {
   })(componentClass);
 };
 
+const extractNgModuleMetadata = (importItem: any): NgModule => {
+  const decoratorKey = '__annotations__';
+  const decorators: any[] =
+    Reflect && Reflect.getOwnPropertyDescriptor
+      ? Reflect.getOwnPropertyDescriptor(importItem, decoratorKey).value
+      : importItem[decoratorKey];
+
+  if (!decorators || decorators.length === 0) {
+    return null;
+  }
+
+  const ngModuleDecorator: NgModule | undefined = decorators.find(
+    decorator => decorator instanceof NgModule
+  );
+  if (!ngModuleDecorator) {
+    return null;
+  }
+  return ngModuleDecorator;
+};
+
+const getExistenceOfComponentInModules = (
+  component: any,
+  declarations: any[],
+  imports: any[]
+): boolean => {
+  if (declarations && declarations.some(declaration => declaration === component)) {
+    // Found component in declarations array
+    return true;
+  }
+  if (!imports) {
+    return false;
+  }
+
+  return imports.some(importItem => {
+    const extractedNgModuleMetadata = extractNgModuleMetadata(importItem);
+    if (!extractedNgModuleMetadata) {
+      // Not an NgModule
+      return false;
+    }
+    return getExistenceOfComponentInModules(
+      component,
+      extractedNgModuleMetadata.declarations,
+      extractedNgModuleMetadata.imports
+    );
+  });
+};
+
 const initModule = (storyFn: IStoryFn) => {
   const storyObj = storyFn();
-  const {
-    component,
-    template,
-    props,
-    styles,
-    moduleMetadata = {},
-    requiresComponentDeclaration = true,
-  } = storyObj;
+  const { component, template, props, styles, moduleMetadata = {} } = storyObj;
 
   const isCreatingComponentFromTemplate = Boolean(template);
 
   const AnnotatedComponent = isCreatingComponentFromTemplate
     ? createComponentFromTemplate(template, styles)
     : component;
 
-  const componentDeclarations =
-    isCreatingComponentFromTemplate || requiresComponentDeclaration
-      ? [AppComponent, AnnotatedComponent]
-      : [AppComponent];
+  const componentRequiesDeclaration =
+    isCreatingComponentFromTemplate ||
+    !getExistenceOfComponentInModules(
+      component,
+      moduleMetadata.declarations,
+      moduleMetadata.imports
+    );
+
+  const componentDeclarations = componentRequiesDeclaration
+    ? [AppComponent, AnnotatedComponent]
+    : [AppComponent];
 
   const story = {
     component: AnnotatedComponent,

app/angular/src/client/preview/angular/types.ts

@@ -12,7 +12,6 @@ export interface ICollection {
 
 export interface NgStory {
   component?: any;
-  requiresComponentDeclaration?: boolean;
   props: ICollection;
   propsMeta?: ICollection;
   moduleMetadata?: NgModuleMetadata;

examples/angular-cli/src/stories/module-context/module-context.stories.ts

@@ -33,17 +33,12 @@ storiesOf('Custom|Feature Module as Context', module)
       };
       return {
         component: ChipsGroupComponent,
-        requiresComponentDeclaration: false,
         props,
       };
     },
     {
-      notes: `
-        This component includes a child component, a pipe, and a default provider, all which come from 
-        the specified feature module.
-
-        This behavior is possible by setting the "requiresComponentDeclaration" flag to false.
-      `.replace(/ {1,}/g, ' '),
+      notes: `This component includes a child component, a pipe, and a default provider, all which come from 
+        the specified feature module.`,
     }
   )
   .add('Component with default providers', () => {
@@ -53,7 +48,6 @@ storiesOf('Custom|Feature Module as Context', module)
     };
     return {
       component: ChipComponent,
-      requiresComponentDeclaration: false,
       props,
     };
   })
@@ -72,7 +66,6 @@ storiesOf('Custom|Feature Module as Context', module)
           },
         ],
       },
-      requiresComponentDeclaration: false,
       props,
     };
   });