@storybook/angular 7.0.2 → 7.1.0-alpha.1

package/README.md

@@ -27,12 +27,12 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-angular-app
-npx storybook init
+npx storybook@latest init
 ```
 
 ## Setup Storybook for your Angular projects
 
-Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `.storybook` folder will be created and the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this:
+Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook@latest init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `.storybook` folder will be created and the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this:
 
 ```json
 // angular.json

package/dist/client/angular-beta/AbstractRenderer.d.ts

@@ -9,16 +9,16 @@ export declare abstract class AbstractRenderer {
     /**
      * Wait and destroy the platform
      */
-    static resetApplications(): void;
+    static resetApplications(domNode?: HTMLElement): void;
     /**
      * Reset compiled components because we often want to compile the same component with
      * more than one NgModule.
      */
     protected static resetCompiledComponents: () => Promise<void>;
-    protected previousStoryRenderInfo: StoryRenderInfo;
+    protected previousStoryRenderInfo: Map<HTMLElement, StoryRenderInfo>;
     protected storyProps$: Subject<ICollection | undefined>;
     constructor(storyId: string);
-    protected abstract beforeFullRender(): Promise<void>;
+    protected abstract beforeFullRender(domNode?: HTMLElement): Promise<void>;
     protected abstract afterFullRender(): Promise<void>;
     /**
      * Bootstrap main angular module with main component or send only new `props` with storyProps$

package/dist/client/angular-beta/AbstractRenderer.js

@@ -33,21 +33,22 @@ const StorybookModule_1 = require("./StorybookModule");
 const StorybookProvider_1 = require("./StorybookProvider");
 const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
 const PropertyExtractor_1 = require("./utils/PropertyExtractor");
-const applicationRefs = new Set();
+const applicationRefs = new Map();
 class AbstractRenderer {
     /**
      * Wait and destroy the platform
      */
-    static resetApplications() {
+    static resetApplications(domNode) {
         StorybookWrapperComponent_1.componentNgModules.clear();
-        applicationRefs.forEach((appRef) => {
-            if (!appRef.destroyed) {
+        applicationRefs.forEach((appRef, appDOMNode) => {
+            if (!appRef.destroyed && (!domNode || appDOMNode === domNode)) {
                 appRef.destroy();
             }
         });
     }
     constructor(storyId) {
         this.storyId = storyId;
+        this.previousStoryRenderInfo = new Map();
         if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {
             try {
                 // platform should be set after enableProdMode()
@@ -73,6 +74,7 @@ class AbstractRenderer {
         const targetSelector = this.generateTargetSelectorFromStoryId(targetDOMNode.id);
         const newStoryProps$ = new rxjs_1.BehaviorSubject(storyFnAngular.props);
         if (!this.fullRendererRequired({
+            targetDOMNode,
             storyFnAngular,
             moduleMetadata: {
                 ...storyFnAngular.moduleMetadata,
@@ -82,7 +84,7 @@ class AbstractRenderer {
             this.storyProps$.next(storyFnAngular.props);
             return;
         }
-        await this.beforeFullRender();
+        await this.beforeFullRender(targetDOMNode);
         // Complete last BehaviorSubject and set a new one for the current module
         if (this.storyProps$) {
             this.storyProps$.complete();
@@ -104,7 +106,7 @@ class AbstractRenderer {
                 ...(storyFnAngular.applicationConfig?.providers ?? []),
             ],
         });
-        applicationRefs.add(applicationRef);
+        applicationRefs.set(targetDOMNode, applicationRef);
         await this.afterFullRender();
     }
     /**
@@ -130,13 +132,13 @@ class AbstractRenderer {
         targetDOMNode.innerHTML = '';
         targetDOMNode.appendChild(document.createElement(targetSelector));
     }
-    fullRendererRequired({ storyFnAngular, moduleMetadata, forced, }) {
-        const { previousStoryRenderInfo } = this;
+    fullRendererRequired({ targetDOMNode, storyFnAngular, moduleMetadata, forced, }) {
+        const previousStoryRenderInfo = this.previousStoryRenderInfo.get(targetDOMNode);
         const currentStoryRender = {
             storyFnAngular,
             moduleMetadataSnapshot: (0, telejson_1.stringify)(moduleMetadata),
         };
-        this.previousStoryRenderInfo = currentStoryRender;
+        this.previousStoryRenderInfo.set(targetDOMNode, currentStoryRender);
         if (
         // check `forceRender` of story RenderContext
         !forced ||

package/dist/client/angular-beta/DocsRenderer.d.ts

@@ -8,6 +8,6 @@ export declare class DocsRenderer extends AbstractRenderer {
         parameters: Parameters;
         targetDOMNode: HTMLElement;
     }): Promise<void>;
-    beforeFullRender(): Promise<void>;
+    beforeFullRender(domNode?: HTMLElement): Promise<void>;
     afterFullRender(): Promise<void>;
 }

package/dist/client/angular-beta/DocsRenderer.js

@@ -30,8 +30,8 @@ class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
         });
         await super.render({ ...options, forced: false });
     }
-    async beforeFullRender() {
-        DocsRenderer.resetApplications();
+    async beforeFullRender(domNode) {
+        DocsRenderer.resetApplications(domNode);
     }
     async afterFullRender() {
         await AbstractRenderer_1.AbstractRenderer.resetCompiledComponents();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.0.2",
+  "version": "7.1.0-alpha.1",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -36,20 +36,20 @@
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.2",
-    "@storybook/cli": "7.0.2",
-    "@storybook/client-logger": "7.0.2",
-    "@storybook/core-client": "7.0.2",
-    "@storybook/core-common": "7.0.2",
-    "@storybook/core-events": "7.0.2",
-    "@storybook/core-server": "7.0.2",
-    "@storybook/core-webpack": "7.0.2",
-    "@storybook/docs-tools": "7.0.2",
+    "@storybook/builder-webpack5": "7.1.0-alpha.1",
+    "@storybook/cli": "7.1.0-alpha.1",
+    "@storybook/client-logger": "7.1.0-alpha.1",
+    "@storybook/core-client": "7.1.0-alpha.1",
+    "@storybook/core-common": "7.1.0-alpha.1",
+    "@storybook/core-events": "7.1.0-alpha.1",
+    "@storybook/core-server": "7.1.0-alpha.1",
+    "@storybook/core-webpack": "7.1.0-alpha.1",
+    "@storybook/docs-tools": "7.1.0-alpha.1",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.2",
-    "@storybook/node-logger": "7.0.2",
-    "@storybook/preview-api": "7.0.2",
-    "@storybook/types": "7.0.2",
+    "@storybook/manager-api": "7.1.0-alpha.1",
+    "@storybook/node-logger": "7.1.0-alpha.1",
+    "@storybook/preview-api": "7.1.0-alpha.1",
+    "@storybook/types": "7.1.0-alpha.1",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
@@ -123,5 +123,5 @@
   "bundler": {
     "tsConfig": "tsconfig.build.json"
   },
-  "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a"
+  "gitHead": "48a1df25493b1cc26a405096e723301f4bb04b4e"
 }

package/template/cli/Button.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import Button from './button.component';
 
-// More on how to set up stories at: https://storybook.js.org/docs/7.0/angular/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
 const meta: Meta<Button> = {
   title: 'Example/Button',
   component: Button,
@@ -22,7 +22,7 @@ const meta: Meta<Button> = {
 export default meta;
 type Story = StoryObj<Button>;
 
-// More on writing stories with args: https://storybook.js.org/docs/7.0/angular/writing-stories/args
+// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
 export const Primary: Story = {
   args: {
     primary: true,

package/template/cli/Header.stories.ts

@@ -8,7 +8,7 @@ import Header from './header.component';
 const meta: Meta<Header> = {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/angular/writing-docs/docs-page
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/angular/writing-docs/autodocs
   tags: ['autodocs'],
   render: (args) => ({ props: args }),
   decorators: [
@@ -18,7 +18,7 @@ const meta: Meta<Header> = {
     }),
   ],
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/7.0/angular/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/angular/configure/story-layout
     layout: 'fullscreen',
   },
 };

package/template/cli/Page.stories.ts

@@ -11,7 +11,7 @@ const meta: Meta<Page> = {
   title: 'Example/Page',
   component: Page,
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/7.0/angular/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/angular/configure/story-layout
     layout: 'fullscreen',
   },
   decorators: [
@@ -31,7 +31,7 @@ export const LoggedOut: Story = {
   }),
 };
 
-// More on interaction testing: https://storybook.js.org/docs/7.0/angular/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/angular/writing-tests/interaction-testing
 export const LoggedIn: Story = {
   render: (args: Page) => ({
     props: args,