fixup! feat(angular): use new targetDOMNode to render docs

storybookjs · May 31, 2021 · dc6cf48 · dc6cf48
1 parent 9dda9a5
commit dc6cf48
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 146 deletions.
diff --git a/addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.ts b/addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.ts
@@ -5,7 +5,6 @@ import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/t
 import { addSerializer } from 'jest-specific-snapshot';
 import { getStorybookModuleMetadata } from '@storybook/angular/renderer';
 import { BehaviorSubject } from 'rxjs';
-import { getPlatform } from '@angular/core';
 
 addSerializer(HTMLCommentSerializer);
 addSerializer(AngularSnapshotSerializer);

diff --git a/app/angular/src/client/preview/angular-beta/AbstractRenderer.ts b/app/angular/src/client/preview/angular-beta/AbstractRenderer.ts
@@ -25,9 +25,8 @@ export abstract class AbstractRenderer {
   /**
    * Wait and destroy the platform
    */
-  protected static resetPlatformBrowserDynamic() {
+  public static resetPlatformBrowserDynamic() {
     return new Promise<void>((resolve) => {
-      resolve();
       if (platformRef && !platformRef.destroyed) {
         platformRef.onDestroy(async () => {
           await AbstractRenderer.resetCompiledComponents();
@@ -70,7 +69,7 @@ export abstract class AbstractRenderer {
   // Observable to change the properties dynamically without reloading angular module&component
   protected storyProps$: Subject<ICollection | undefined>;
 
-  constructor(public storyId: string, public targetDOMNode: HTMLElement) {
+  constructor(public storyId: string) {
     if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {
       try {
         // platform should be set after enableProdMode()
@@ -84,10 +83,6 @@ export abstract class AbstractRenderer {
 
   protected abstract beforeFullRender(): Promise<void>;
 
-  protected get targetSelector(): string {
-    return `${this.targetDOMNode.id}`;
-  }
-
   /**
    * Bootstrap main angular module with main component or send only new `props` with storyProps$
    *
@@ -101,14 +96,18 @@ export abstract class AbstractRenderer {
     storyFnAngular,
     forced,
     parameters,
+    targetDOMNode,
   }: {
     storyFnAngular: StoryFnAngularReturnType;
     forced: boolean;
     parameters: Parameters;
+    targetDOMNode: HTMLElement;
   }) {
+    const targetSelector = `${this.storyId}`;
+
     const newStoryProps$ = new BehaviorSubject<ICollection>(storyFnAngular.props);
     const moduleMetadata = getStorybookModuleMetadata(
-      { storyFnAngular, parameters, targetSelector: this.targetSelector },
+      { storyFnAngular, parameters, targetSelector },
       newStoryProps$
     );
 
@@ -131,15 +130,16 @@ export abstract class AbstractRenderer {
     }
     this.storyProps$ = newStoryProps$;
 
-    this.initAngularRootElement();
+    this.initAngularRootElement(targetDOMNode, targetSelector);
 
     await getPlatform().bootstrapModule(createStorybookModule(moduleMetadata));
   }
 
-  protected initAngularRootElement() {
+  protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string) {
     // Adds DOM element that angular will use as bootstrap component
-    this.targetDOMNode.innerHTML = '';
-    this.targetDOMNode.appendChild(document.createElement(this.targetSelector));
+    // eslint-disable-next-line no-param-reassign
+    targetDOMNode.innerHTML = '';
+    targetDOMNode.appendChild(document.createElement(targetSelector));
   }
 
   protected reset(): void {

diff --git a/app/angular/src/client/preview/angular-beta/CanvasRenderer.ts b/app/angular/src/client/preview/angular-beta/CanvasRenderer.ts
@@ -7,6 +7,7 @@ export class CanvasRenderer extends AbstractRenderer {
     storyFnAngular: StoryFnAngularReturnType;
     forced: boolean;
     parameters: Parameters;
+    targetDOMNode: HTMLElement;
   }) {
     await super.render(options).then(async () => {
       await CanvasRenderer.resetCompiledComponents();

diff --git a/app/angular/src/client/preview/angular-beta/DocsRenderer.ts b/app/angular/src/client/preview/angular-beta/DocsRenderer.ts
@@ -9,6 +9,7 @@ export class DocsRenderer extends AbstractRenderer {
     storyFnAngular: StoryFnAngularReturnType;
     forced: boolean;
     parameters: Parameters;
+    targetDOMNode: HTMLElement;
   }) {
     // Note : no optimization on rendering when only args change
     // the doc empties the html container every time, so we have to reset renderer
@@ -30,7 +31,7 @@ export class DocsRenderer extends AbstractRenderer {
       await DocsRenderer.resetPlatformBrowserDynamic();
     });
 
-    await super.render(options);
+    await super.render({ ...options, forced: false });
   }
 
   async beforeFullRender(): Promise<void> {