@storybook/angular 8.0.0-alpha.2 → 8.0.0-alpha.4

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

@@ -4,6 +4,13 @@ type StoryRenderInfo = {
     storyFnAngular: StoryFnAngularReturnType;
     moduleMetadataSnapshot: string;
 };
+/**
+ * Attribute name for the story UID that may be written to the targetDOMNode.
+ *
+ * If a target DOM node has a story UID attribute, it will be used as part of
+ * the selector for the Angular component.
+ */
+export declare const STORY_UID_ATTRIBUTE = "data-sb-story-uid";
 export declare abstract class AbstractRenderer {
     /**
      * Wait and destroy the platform
@@ -47,6 +54,9 @@ export declare abstract class AbstractRenderer {
      * @memberof AbstractRenderer
      */
     protected generateTargetSelectorFromStoryId(id: string): string;
+    /**
+     * Adds DOM element that angular will use as bootstrap component.
+     */
     protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string): void;
     private fullRendererRequired;
 }

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

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AbstractRenderer = void 0;
+exports.AbstractRenderer = exports.STORY_UID_ATTRIBUTE = void 0;
 const core_1 = require("@angular/core");
 const platform_browser_1 = require("@angular/platform-browser");
 const rxjs_1 = require("rxjs");
@@ -34,6 +34,13 @@ const StorybookProvider_1 = require("./StorybookProvider");
 const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
 const PropertyExtractor_1 = require("./utils/PropertyExtractor");
 const applicationRefs = new Map();
+/**
+ * Attribute name for the story UID that may be written to the targetDOMNode.
+ *
+ * If a target DOM node has a story UID attribute, it will be used as part of
+ * the selector for the Angular component.
+ */
+exports.STORY_UID_ATTRIBUTE = 'data-sb-story-uid';
 class AbstractRenderer {
     /**
      * Wait and destroy the platform
@@ -90,10 +97,16 @@ class AbstractRenderer {
         this.storyProps$ = newStoryProps$;
         this.initAngularRootElement(targetDOMNode, targetSelector);
         const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor(storyFnAngular.moduleMetadata, component);
+        const storyUid = targetDOMNode.getAttribute(exports.STORY_UID_ATTRIBUTE);
+        const componentSelector = storyUid !== null ? `${targetSelector}[${storyUid}]` : targetSelector;
+        if (storyUid !== null) {
+            const element = targetDOMNode.querySelector(targetSelector);
+            element.toggleAttribute(storyUid, true);
+        }
         const application = (0, StorybookModule_1.getApplication)({
             storyFnAngular,
             component,
-            targetSelector,
+            targetSelector: componentSelector,
             analyzedMetadata,
         });
         const applicationRef = await (0, platform_browser_1.bootstrapApplication)(application, {
@@ -124,8 +137,10 @@ class AbstractRenderer {
         const storyIdIsInvalidHtmlTagName = invalidHtmlTag.test(id);
         return storyIdIsInvalidHtmlTagName ? `sb-${id.replace(invalidHtmlTag, '')}-component` : id;
     }
+    /**
+     * Adds DOM element that angular will use as bootstrap component.
+     */
     initAngularRootElement(targetDOMNode, targetSelector) {
-        // Adds DOM element that angular will use as bootstrap component
         // eslint-disable-next-line no-param-reassign
         targetDOMNode.innerHTML = '';
         targetDOMNode.appendChild(document.createElement(targetSelector));

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

@@ -10,4 +10,5 @@ export declare class DocsRenderer extends AbstractRenderer {
     }): Promise<void>;
     beforeFullRender(domNode?: HTMLElement): Promise<void>;
     afterFullRender(): Promise<void>;
+    protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string): void;
 }

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DocsRenderer = void 0;
 const preview_api_1 = require("@storybook/preview-api");
 const core_events_1 = require("@storybook/core-events");
+const StoryUID_1 = require("./utils/StoryUID");
 const AbstractRenderer_1 = require("./AbstractRenderer");
 class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
     async render(options) {
@@ -36,5 +37,9 @@ class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
     async afterFullRender() {
         await AbstractRenderer_1.AbstractRenderer.resetCompiledComponents();
     }
+    initAngularRootElement(targetDOMNode, targetSelector) {
+        super.initAngularRootElement(targetDOMNode, targetSelector);
+        targetDOMNode.setAttribute(AbstractRenderer_1.STORY_UID_ATTRIBUTE, (0, StoryUID_1.getNextStoryUID)(targetDOMNode.id));
+    }
 }
 exports.DocsRenderer = DocsRenderer;

package/dist/client/angular-beta/RendererFactory.test.js

@@ -17,10 +17,12 @@ describe('RendererFactory', () => {
     let rendererFactory;
     let rootTargetDOMNode;
     let rootDocstargetDOMNode;
+    let storyInDocstargetDOMNode;
     beforeEach(async () => {
         rendererFactory = new RendererFactory_1.RendererFactory();
         document.body.innerHTML =
-            '<div id="storybook-root"></div><div id="root-docs"><div id="story-in-docs"></div></div>';
+            '<div id="storybook-root"></div><div id="root-docs"><div id="story-in-docs"></div></div>' +
+                '<div id="storybook-docs"></div>';
         rootTargetDOMNode = global.document.getElementById('storybook-root');
         rootDocstargetDOMNode = global.document.getElementById('root-docs');
         platform_browser_dynamic_1.platformBrowserDynamic.mockImplementation(testing_1.platformBrowserDynamicTesting);
@@ -160,5 +162,39 @@ describe('RendererFactory', () => {
             const render = await rendererFactory.getRendererInstance(rootDocstargetDOMNode);
             expect(render).toBeInstanceOf(DocsRenderer_1.DocsRenderer);
         });
+        describe('when multiple story for the same component', () => {
+            it('should render both stories', async () => {
+                let FooComponent = class FooComponent {
+                };
+                FooComponent = __decorate([
+                    (0, core_1.Component)({ selector: 'foo', template: '🦊' })
+                ], FooComponent);
+                const render = await rendererFactory.getRendererInstance(global.document.getElementById('storybook-docs'));
+                const targetDOMNode1 = global.document.createElement('div');
+                targetDOMNode1.id = 'story-1';
+                global.document.getElementById('storybook-docs').appendChild(targetDOMNode1);
+                await render?.render({
+                    storyFnAngular: {
+                        props: {},
+                    },
+                    forced: false,
+                    component: FooComponent,
+                    targetDOMNode: targetDOMNode1,
+                });
+                const targetDOMNode2 = global.document.createElement('div');
+                targetDOMNode2.id = 'story-1';
+                global.document.getElementById('storybook-docs').appendChild(targetDOMNode2);
+                await render?.render({
+                    storyFnAngular: {
+                        props: {},
+                    },
+                    forced: false,
+                    component: FooComponent,
+                    targetDOMNode: targetDOMNode2,
+                });
+                expect(global.document.querySelectorAll('#story-1 > story-1')[0].innerHTML).toBe('<foo>🦊</foo><!--container-->');
+                expect(global.document.querySelectorAll('#story-1 > story-1')[1].innerHTML).toBe('<foo>🦊</foo><!--container-->');
+            });
+        });
     });
 });

package/dist/client/angular-beta/utils/StoryUID.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Increments the count for a storyId and returns the next UID.
+ *
+ * When a story is bootstrapped, the storyId is used as the element tag. That
+ * becomes an issue when a story is rendered multiple times in the same docs
+ * page. This function returns a UID that is appended to the storyId to make
+ * it unique.
+ *
+ * @param storyId id of a story
+ * @returns uid of a story
+ */
+export declare const getNextStoryUID: (storyId: string) => string;
+/**
+ * Clears the storyId counts.
+ *
+ * Can be useful for testing, where you need predictable increments, without
+ * reloading the global state.
+ *
+ * If onlyStoryId is provided, only that storyId is cleared.
+ *
+ * @param onlyStoryId id of a story
+ */
+export declare const clearStoryUIDs: (onlyStoryId?: string) => void;

package/dist/client/angular-beta/utils/StoryUID.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clearStoryUIDs = exports.getNextStoryUID = void 0;
+/**
+ * Count of stories for each storyId.
+ */
+const storyCounts = new Map();
+/**
+ * Increments the count for a storyId and returns the next UID.
+ *
+ * When a story is bootstrapped, the storyId is used as the element tag. That
+ * becomes an issue when a story is rendered multiple times in the same docs
+ * page. This function returns a UID that is appended to the storyId to make
+ * it unique.
+ *
+ * @param storyId id of a story
+ * @returns uid of a story
+ */
+const getNextStoryUID = (storyId) => {
+    if (!storyCounts.has(storyId)) {
+        storyCounts.set(storyId, -1);
+    }
+    const count = storyCounts.get(storyId) + 1;
+    storyCounts.set(storyId, count);
+    return `${storyId}-${count}`;
+};
+exports.getNextStoryUID = getNextStoryUID;
+/**
+ * Clears the storyId counts.
+ *
+ * Can be useful for testing, where you need predictable increments, without
+ * reloading the global state.
+ *
+ * If onlyStoryId is provided, only that storyId is cleared.
+ *
+ * @param onlyStoryId id of a story
+ */
+const clearStoryUIDs = (onlyStoryId) => {
+    if (onlyStoryId !== undefined && onlyStoryId !== null) {
+        storyCounts.delete(onlyStoryId);
+    }
+    else {
+        storyCounts.clear();
+    }
+};
+exports.clearStoryUIDs = clearStoryUIDs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.4",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -37,19 +37,19 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "8.0.0-alpha.2",
-    "@storybook/cli": "8.0.0-alpha.2",
-    "@storybook/client-logger": "8.0.0-alpha.2",
-    "@storybook/core-common": "8.0.0-alpha.2",
-    "@storybook/core-events": "8.0.0-alpha.2",
-    "@storybook/core-server": "8.0.0-alpha.2",
-    "@storybook/core-webpack": "8.0.0-alpha.2",
-    "@storybook/docs-tools": "8.0.0-alpha.2",
+    "@storybook/builder-webpack5": "8.0.0-alpha.4",
+    "@storybook/cli": "8.0.0-alpha.4",
+    "@storybook/client-logger": "8.0.0-alpha.4",
+    "@storybook/core-common": "8.0.0-alpha.4",
+    "@storybook/core-events": "8.0.0-alpha.4",
+    "@storybook/core-server": "8.0.0-alpha.4",
+    "@storybook/core-webpack": "8.0.0-alpha.4",
+    "@storybook/docs-tools": "8.0.0-alpha.4",
     "@storybook/global": "^5.0.0",
-    "@storybook/node-logger": "8.0.0-alpha.2",
-    "@storybook/preview-api": "8.0.0-alpha.2",
-    "@storybook/telemetry": "8.0.0-alpha.2",
-    "@storybook/types": "8.0.0-alpha.2",
+    "@storybook/node-logger": "8.0.0-alpha.4",
+    "@storybook/preview-api": "8.0.0-alpha.4",
+    "@storybook/telemetry": "8.0.0-alpha.4",
+    "@storybook/types": "8.0.0-alpha.4",
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
@@ -111,7 +111,7 @@
     }
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "publishConfig": {
     "access": "public"

package/template/cli/button.component.ts

@@ -3,6 +3,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'storybook-button',
+  standalone: true,
   imports: [CommonModule],
   template: ` <button
     type="button"
@@ -14,7 +15,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   </button>`,
   styleUrls: ['./button.css'],
 })
-export default class ButtonComponent {
+export class ButtonComponent {
   /**
    * Is this the principal call to action on the page?
    */

package/template/cli/{Button.stories.ts → button.stories.ts}

@@ -1,12 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import Button from './button.component';
+
+import { ButtonComponent } from './button.component';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const meta: Meta<Button> = {
+const meta: Meta<ButtonComponent> = {
   title: 'Example/Button',
-  component: Button,
+  component: ButtonComponent,
   tags: ['autodocs'],
-  render: (args: Button) => ({
+  render: (args: ButtonComponent) => ({
     props: {
       backgroundColor: null,
       ...args,
@@ -20,7 +21,7 @@ const meta: Meta<Button> = {
 };
 
 export default meta;
-type Story = StoryObj<Button>;
+type Story = StoryObj<ButtonComponent>;
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {

package/template/cli/header.component.ts

@@ -1,8 +1,13 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import type { User } from './User';
+import { CommonModule } from '@angular/common';
+
+import { ButtonComponent } from './button.component';
+import type { User } from './user';
 
 @Component({
   selector: 'storybook-header',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
   template: `<header>
     <div class="storybook-header">
       <div>
@@ -47,9 +52,8 @@ import type { User } from './User';
           ></storybook-button>
           <storybook-button
             *ngIf="!user"
-            primary
             size="small"
-            primary="true"
+            [primary]="true"
             class="margin-left"
             (onClick)="onCreateAccount.emit($event)"
             label="Sign up"
@@ -60,7 +64,7 @@ import type { User } from './User';
   </header>`,
   styleUrls: ['./header.css'],
 })
-export default class HeaderComponent {
+export class HeaderComponent {
   @Input()
   user: User | null = null;
 

package/template/cli/{Header.stories.ts → header.stories.ts}

@@ -1,22 +1,12 @@
-import { moduleMetadata } from '@storybook/angular';
 import type { Meta, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
 
-import Button from './button.component';
-import Header from './header.component';
+import { HeaderComponent } from './header.component';
 
-const meta: Meta<Header> = {
+const meta: Meta<HeaderComponent> = {
   title: 'Example/Header',
-  component: Header,
+  component: HeaderComponent,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  render: (args) => ({ props: args }),
-  decorators: [
-    moduleMetadata({
-      declarations: [Button],
-      imports: [CommonModule],
-    }),
-  ],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
@@ -24,7 +14,7 @@ const meta: Meta<Header> = {
 };
 
 export default meta;
-type Story = StoryObj<Header>;
+type Story = StoryObj<HeaderComponent>;
 
 export const LoggedIn: Story = {
   args: {

package/template/cli/page.component.ts

@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
-import type { User } from './User';
+import { CommonModule } from '@angular/common';
+
+import { HeaderComponent } from './header.component';
+import type { User } from './user';
 
 @Component({
   selector: 'storybook-page',
+  standalone: true,
+  imports: [CommonModule, HeaderComponent],
   template: `<article>
     <storybook-header
       [user]="user"
@@ -60,7 +65,7 @@ import type { User } from './User';
   </article>`,
   styleUrls: ['./page.css'],
 })
-export default class PageComponent {
+export class PageComponent {
   user: User | null = null;
 
   doLogout() {

package/template/cli/{Page.stories.ts → page.stories.ts}

@@ -1,41 +1,24 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
 import { within, userEvent, expect } from '@storybook/test';
 
-import Button from './button.component';
-import Header from './header.component';
-import Page from './page.component';
+import { PageComponent } from './page.component';
 
-const meta: Meta<Page> = {
+const meta: Meta<PageComponent> = {
   title: 'Example/Page',
-  component: Page,
+  component: PageComponent,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
-  decorators: [
-    moduleMetadata({
-      declarations: [Button, Header],
-      imports: [CommonModule],
-    }),
-  ],
 };
 
 export default meta;
-type Story = StoryObj<Page>;
+type Story = StoryObj<PageComponent>;
 
-export const LoggedOut: Story = {
-  render: (args: Page) => ({
-    props: args,
-  }),
-};
+export const LoggedOut: Story = {};
 
 // More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
 export const LoggedIn: Story = {
-  render: (args: Page) => ({
-    props: args,
-  }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const loginButton = canvas.getByRole('button', { name: /Log in/i });

package/template/cli/user.ts

@@ -0,0 +1,3 @@
+export interface User {
+  name: string;
+}

package/template/cli/User.ts

@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface User {}