@storybook/angular 0.0.0-pr-23609-sha-f47ef339

package/dist/builders/start-storybook/schema.json

@@ -0,0 +1,198 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "title": "Start Storybook",
+    "description": "Serve up storybook in development mode.",
+    "type": "object",
+    "properties": {
+        "browserTarget": {
+            "type": "string",
+            "description": "Build target to be served in project-name:builder:config format. Should generally target on the builder: '@angular-devkit/build-angular:browser'. Useful for Storybook to use options (styles, assets, ...).",
+            "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$",
+            "default": null
+        },
+        "tsConfig": {
+            "type": "string",
+            "description": "The full path for the TypeScript configuration file, relative to the current workspace."
+        },
+        "port": {
+            "type": "number",
+            "description": "Port to listen on.",
+            "default": 9009
+        },
+        "host": {
+            "type": "string",
+            "description": "Host to listen on.",
+            "default": "localhost"
+        },
+        "configDir": {
+            "type": "string",
+            "description": "Directory where to load Storybook configurations from.",
+            "default": ".storybook"
+        },
+        "https": {
+            "type": "boolean",
+            "description": "Serve Storybook over HTTPS. Note: You must provide your own certificate information.",
+            "default": false
+        },
+        "sslCa": {
+            "type": "string",
+            "description": "Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)."
+        },
+        "sslCert": {
+            "type": "string",
+            "description": "Provide an SSL certificate. (Required with --https)."
+        },
+        "sslKey": {
+            "type": "string",
+            "description": "SSL key to use for serving HTTPS."
+        },
+        "smokeTest": {
+            "type": "boolean",
+            "description": "Exit after successful start.",
+            "default": false
+        },
+        "ci": {
+            "type": "boolean",
+            "description": "CI mode (skip interactive prompts, don't open browser).",
+            "default": false
+        },
+        "open": {
+            "type": "boolean",
+            "description": "Whether to open Storybook automatically in the browser.",
+            "default": true
+        },
+        "quiet": {
+            "type": "boolean",
+            "description": "Suppress verbose build output.",
+            "default": false
+        },
+        "enableProdMode": {
+            "type": "boolean",
+            "description": "Disable Angular's development mode, which turns off assertions and other checks within the framework.",
+            "default": false
+        },
+        "docs": {
+            "type": "boolean",
+            "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
+            "default": false
+        },
+        "compodoc": {
+            "type": "boolean",
+            "description": "Execute compodoc before.",
+            "default": true
+        },
+        "compodocArgs": {
+            "type": "array",
+            "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
+            "default": ["-e", "json"],
+            "items": {
+                "type": "string"
+            }
+        },
+        "styles": {
+            "type": "array",
+            "description": "Global styles to be included in the build.",
+            "items": {
+                "$ref": "#/definitions/styleElement"
+            },
+            "default": ""
+        },
+        "stylePreprocessorOptions": {
+            "description": "Options to pass to style preprocessors.",
+            "type": "object",
+            "properties": {
+                "includePaths": {
+                    "description": "Paths to include. Paths will be resolved to workspace root.",
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    }
+                }
+            },
+            "additionalProperties": false,
+            "default": ""
+        },
+        "assets": {
+            "type": "array",
+            "description": "List of static application assets.",
+            "default": [],
+            "items": {
+                "$ref": "#/definitions/assetPattern"
+            }
+        },
+        "initialPath": {
+            "type": "string",
+            "description": "URL path to be appended when visiting Storybook for the first time"
+        }
+    },
+    "additionalProperties": false,
+    "definitions": {
+        "assetPattern": {
+            "oneOf": [
+                {
+                    "type": "object",
+                    "properties": {
+                        "followSymlinks": {
+                            "type": "boolean",
+                            "default": false,
+                            "description": "Allow glob patterns to follow symlink directories. This allows subdirectories of the symlink to be searched."
+                        },
+                        "glob": {
+                            "type": "string",
+                            "description": "The pattern to match."
+                        },
+                        "input": {
+                            "type": "string",
+                            "description": "The input directory path in which to apply 'glob'. Defaults to the project root."
+                        },
+                        "ignore": {
+                            "description": "An array of globs to ignore.",
+                            "type": "array",
+                            "items": {
+                                "type": "string"
+                            }
+                        },
+                        "output": {
+                            "type": "string",
+                            "description": "Absolute path within the output."
+                        }
+                    },
+                    "additionalProperties": false,
+                    "required": ["glob", "input", "output"]
+                },
+                {
+                    "type": "string"
+                }
+            ]
+        },
+        "styleElement": {
+            "oneOf": [
+                {
+                    "type": "object",
+                    "properties": {
+                        "input": {
+                            "type": "string",
+                            "description": "The file to include."
+                        },
+                        "bundleName": {
+                            "type": "string",
+                            "pattern": "^[\\w\\-.]*$",
+                            "description": "The bundle name for this extra entry point."
+                        },
+                        "inject": {
+                            "type": "boolean",
+                            "description": "If the bundle will be referenced in the HTML file.",
+                            "default": true
+                        }
+                    },
+                    "additionalProperties": false,
+                    "required": ["input"]
+                },
+                {
+                    "type": "string",
+                    "description": "The file to include."
+                }
+            ]
+        }
+    }
+}

package/dist/builders/utils/error-handler.d.ts

@@ -0,0 +1,2 @@
+export declare const printErrorDetails: (error: any) => void;
+export declare const errorSummary: (error: any) => string;

package/dist/builders/utils/error-handler.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.errorSummary = exports.printErrorDetails = void 0;
+const node_logger_1 = require("@storybook/node-logger");
+const ts_dedent_1 = require("ts-dedent");
+const printErrorDetails = (error) => {
+    // Duplicate code for Standalone error handling
+    // Source: https://github.com/storybookjs/storybook/blob/39c7ba09ad84fbd466f9c25d5b92791a5450b9f6/lib/core-server/src/build-dev.ts#L136
+    node_logger_1.instance.heading = '';
+    if (error instanceof Error) {
+        if (error.error) {
+            node_logger_1.logger.error(error.error);
+        }
+        else if (error.stats && error.stats.compilation.errors) {
+            error.stats.compilation.errors.forEach((e) => node_logger_1.logger.plain(e));
+        }
+        else {
+            node_logger_1.logger.error(error);
+        }
+    }
+    else if (error.compilation?.errors) {
+        error.compilation.errors.forEach((e) => node_logger_1.logger.plain(e));
+    }
+    node_logger_1.logger.line();
+};
+exports.printErrorDetails = printErrorDetails;
+const errorSummary = (error) => {
+    return error.close
+        ? (0, ts_dedent_1.dedent) `
+      FATAL broken build!, will close the process,
+      Fix the error below and restart storybook.
+    `
+        : (0, ts_dedent_1.dedent) `
+      Broken build, fix the error above.
+      You may need to refresh the browser.
+    `;
+};
+exports.errorSummary = errorSummary;

package/dist/builders/utils/run-compodoc.d.ts

@@ -0,0 +1,6 @@
+import { BuilderContext } from '@angular-devkit/architect';
+import { Observable } from 'rxjs';
+export declare const runCompodoc: ({ compodocArgs, tsconfig }: {
+    compodocArgs: string[];
+    tsconfig: string;
+}, context: BuilderContext) => Observable<void>;

package/dist/builders/utils/run-compodoc.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runCompodoc = void 0;
+const rxjs_1 = require("rxjs");
+const path = __importStar(require("path"));
+const cli_1 = require("@storybook/cli");
+const hasTsConfigArg = (args) => args.indexOf('-p') !== -1;
+const hasOutputArg = (args) => args.indexOf('-d') !== -1 || args.indexOf('--output') !== -1;
+// path.relative is necessary to workaround a compodoc issue with
+// absolute paths on windows machines
+const toRelativePath = (pathToTsConfig) => {
+    return path.isAbsolute(pathToTsConfig) ? path.relative('.', pathToTsConfig) : pathToTsConfig;
+};
+const runCompodoc = ({ compodocArgs, tsconfig }, context) => {
+    return new rxjs_1.Observable((observer) => {
+        const tsConfigPath = toRelativePath(tsconfig);
+        const finalCompodocArgs = [
+            ...(hasTsConfigArg(compodocArgs) ? [] : ['-p', tsConfigPath]),
+            ...(hasOutputArg(compodocArgs) ? [] : ['-d', `${context.workspaceRoot || '.'}`]),
+            ...compodocArgs,
+        ];
+        const packageManager = cli_1.JsPackageManagerFactory.getPackageManager();
+        try {
+            const stdout = packageManager.runPackageCommandSync('compodoc', finalCompodocArgs, context.workspaceRoot, 'inherit');
+            context.logger.info(stdout);
+            observer.next();
+            observer.complete();
+        }
+        catch (e) {
+            context.logger.error(e);
+            observer.error();
+        }
+    });
+};
+exports.runCompodoc = runCompodoc;

package/dist/builders/utils/run-compodoc.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/builders/utils/run-compodoc.spec.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const operators_1 = require("rxjs/operators");
+const { runCompodoc } = require('./run-compodoc');
+const mockRunScript = jest.fn();
+jest.mock('@storybook/cli', () => ({
+    JsPackageManagerFactory: {
+        getPackageManager: () => ({
+            runPackageCommandSync: mockRunScript,
+        }),
+    },
+}));
+const builderContextLoggerMock = {
+    createChild: jest.fn(),
+    log: jest.fn(),
+    debug: jest.fn(),
+    info: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+    fatal: jest.fn(),
+};
+describe('runCompodoc', () => {
+    afterEach(() => {
+        mockRunScript.mockClear();
+    });
+    it('should run compodoc with tsconfig from context', async () => {
+        runCompodoc({
+            compodocArgs: [],
+            tsconfig: 'path/to/tsconfig.json',
+        }, {
+            workspaceRoot: 'path/to/project',
+            logger: builderContextLoggerMock,
+        })
+            .pipe((0, operators_1.take)(1))
+            .subscribe();
+        expect(mockRunScript).toHaveBeenCalledWith('compodoc', ['-p', 'path/to/tsconfig.json', '-d', 'path/to/project'], 'path/to/project', 'inherit');
+    });
+    it('should run compodoc with tsconfig from compodocArgs', async () => {
+        runCompodoc({
+            compodocArgs: ['-p', 'path/to/tsconfig.stories.json'],
+            tsconfig: 'path/to/tsconfig.json',
+        }, {
+            workspaceRoot: 'path/to/project',
+            logger: builderContextLoggerMock,
+        })
+            .pipe((0, operators_1.take)(1))
+            .subscribe();
+        expect(mockRunScript).toHaveBeenCalledWith('compodoc', ['-d', 'path/to/project', '-p', 'path/to/tsconfig.stories.json'], 'path/to/project', 'inherit');
+    });
+    it('should run compodoc with default output folder.', async () => {
+        runCompodoc({
+            compodocArgs: [],
+            tsconfig: 'path/to/tsconfig.json',
+        }, {
+            workspaceRoot: 'path/to/project',
+            logger: builderContextLoggerMock,
+        })
+            .pipe((0, operators_1.take)(1))
+            .subscribe();
+        expect(mockRunScript).toHaveBeenCalledWith('compodoc', ['-p', 'path/to/tsconfig.json', '-d', 'path/to/project'], 'path/to/project', 'inherit');
+    });
+    it('should run with custom output folder specified with --output compodocArgs', async () => {
+        runCompodoc({
+            compodocArgs: ['--output', 'path/to/customFolder'],
+            tsconfig: 'path/to/tsconfig.json',
+        }, {
+            workspaceRoot: 'path/to/project',
+            logger: builderContextLoggerMock,
+        })
+            .pipe((0, operators_1.take)(1))
+            .subscribe();
+        expect(mockRunScript).toHaveBeenCalledWith('compodoc', ['-p', 'path/to/tsconfig.json', '--output', 'path/to/customFolder'], 'path/to/project', 'inherit');
+    });
+    it('should run with custom output folder specified with -d compodocArgs', async () => {
+        runCompodoc({
+            compodocArgs: ['-d', 'path/to/customFolder'],
+            tsconfig: 'path/to/tsconfig.json',
+        }, {
+            workspaceRoot: 'path/to/project',
+            logger: builderContextLoggerMock,
+        })
+            .pipe((0, operators_1.take)(1))
+            .subscribe();
+        expect(mockRunScript).toHaveBeenCalledWith('compodoc', ['-p', 'path/to/tsconfig.json', '-d', 'path/to/customFolder'], 'path/to/project', 'inherit');
+    });
+});

package/dist/builders/utils/standalone-options.d.ts

@@ -0,0 +1,15 @@
+import { BuilderContext } from '@angular-devkit/architect';
+import { AssetPattern, StyleElement, StylePreprocessorOptions } from '@angular-devkit/build-angular/src/builders/browser/schema';
+import { LoadOptions, CLIOptions, BuilderOptions } from '@storybook/types';
+export type StandaloneOptions = CLIOptions & LoadOptions & BuilderOptions & {
+    mode?: 'static' | 'dev';
+    enableProdMode: boolean;
+    angularBrowserTarget?: string | null;
+    angularBuilderOptions?: Record<string, any> & {
+        styles?: StyleElement[];
+        stylePreprocessorOptions?: StylePreprocessorOptions;
+        assets?: AssetPattern[];
+    };
+    angularBuilderContext?: BuilderContext | null;
+    tsConfig?: string;
+};

package/dist/builders/utils/standalone-options.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,53 @@
+import { Subject } from 'rxjs';
+import { ICollection, StoryFnAngularReturnType } from '../types';
+type StoryRenderInfo = {
+    storyFnAngular: StoryFnAngularReturnType;
+    moduleMetadataSnapshot: string;
+};
+export declare abstract class AbstractRenderer {
+    /**
+     * Wait and destroy the platform
+     */
+    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: Map<HTMLElement, StoryRenderInfo>;
+    protected storyProps$: Subject<ICollection | undefined>;
+    constructor();
+    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$
+     *
+     * @param storyFnAngular {StoryFnAngularReturnType}
+     * @param forced {boolean} If :
+     * - true render will only use the StoryFn `props' in storyProps observable that will update sotry's component/template properties. Improves performance without reloading the whole module&component if props changes
+     * - false fully recharges or initializes angular module & component
+     * @param component {Component}
+     */
+    render({ storyFnAngular, forced, component, targetDOMNode, }: {
+        storyFnAngular: StoryFnAngularReturnType;
+        forced: boolean;
+        component?: any;
+        targetDOMNode: HTMLElement;
+    }): Promise<void>;
+    /**
+     * Only ASCII alphanumerics can be used as HTML tag name.
+     * https://html.spec.whatwg.org/#elements-2
+     *
+     * Therefore, stories break when non-ASCII alphanumerics are included in target selector.
+     * https://github.com/storybookjs/storybook/issues/15147
+     *
+     * This method returns storyId when it doesn't contain any non-ASCII alphanumerics.
+     * Otherwise, it generates a valid HTML tag name from storyId by removing non-ASCII alphanumerics from storyId, prefixing "sb-", and suffixing "-component"
+     * @protected
+     * @memberof AbstractRenderer
+     */
+    protected generateTargetSelectorFromStoryId(id: string): string;
+    protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string): void;
+    private fullRendererRequired;
+}
+export {};

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

@@ -0,0 +1,180 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AbstractRenderer = void 0;
+const core_1 = require("@angular/core");
+const platform_browser_1 = require("@angular/platform-browser");
+const rxjs_1 = require("rxjs");
+const telejson_1 = require("telejson");
+const StorybookModule_1 = require("./StorybookModule");
+const StorybookProvider_1 = require("./StorybookProvider");
+const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
+const PropertyExtractor_1 = require("./utils/PropertyExtractor");
+const applicationRefs = new Map();
+class AbstractRenderer {
+    /**
+     * Wait and destroy the platform
+     */
+    static resetApplications(domNode) {
+        StorybookWrapperComponent_1.componentNgModules.clear();
+        applicationRefs.forEach((appRef, appDOMNode) => {
+            if (!appRef.destroyed && (!domNode || appDOMNode === domNode)) {
+                appRef.destroy();
+            }
+        });
+    }
+    constructor() {
+        this.previousStoryRenderInfo = new Map();
+        if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {
+            try {
+                // platform should be set after enableProdMode()
+                (0, core_1.enableProdMode)();
+            }
+            catch (e) {
+                // eslint-disable-next-line no-console
+                console.debug(e);
+            }
+        }
+    }
+    /**
+     * Bootstrap main angular module with main component or send only new `props` with storyProps$
+     *
+     * @param storyFnAngular {StoryFnAngularReturnType}
+     * @param forced {boolean} If :
+     * - true render will only use the StoryFn `props' in storyProps observable that will update sotry's component/template properties. Improves performance without reloading the whole module&component if props changes
+     * - false fully recharges or initializes angular module & component
+     * @param component {Component}
+     */
+    async render({ storyFnAngular, forced, component, targetDOMNode, }) {
+        const targetSelector = this.generateTargetSelectorFromStoryId(targetDOMNode.id);
+        const newStoryProps$ = new rxjs_1.BehaviorSubject(storyFnAngular.props);
+        if (!this.fullRendererRequired({
+            targetDOMNode,
+            storyFnAngular,
+            moduleMetadata: {
+                ...storyFnAngular.moduleMetadata,
+            },
+            forced,
+        })) {
+            this.storyProps$.next(storyFnAngular.props);
+            return;
+        }
+        await this.beforeFullRender(targetDOMNode);
+        // Complete last BehaviorSubject and set a new one for the current module
+        if (this.storyProps$) {
+            this.storyProps$.complete();
+        }
+        this.storyProps$ = newStoryProps$;
+        this.initAngularRootElement(targetDOMNode, targetSelector);
+        const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor(storyFnAngular.moduleMetadata, component);
+        const application = (0, StorybookModule_1.getApplication)({
+            storyFnAngular,
+            component,
+            targetSelector,
+            analyzedMetadata,
+        });
+        const applicationRef = await (0, platform_browser_1.bootstrapApplication)(application, {
+            ...storyFnAngular.applicationConfig,
+            providers: [
+                (0, StorybookProvider_1.storyPropsProvider)(newStoryProps$),
+                ...analyzedMetadata.applicationProviders,
+                ...(storyFnAngular.applicationConfig?.providers ?? []),
+            ],
+        });
+        applicationRefs.set(targetDOMNode, applicationRef);
+        await this.afterFullRender();
+    }
+    /**
+     * Only ASCII alphanumerics can be used as HTML tag name.
+     * https://html.spec.whatwg.org/#elements-2
+     *
+     * Therefore, stories break when non-ASCII alphanumerics are included in target selector.
+     * https://github.com/storybookjs/storybook/issues/15147
+     *
+     * This method returns storyId when it doesn't contain any non-ASCII alphanumerics.
+     * Otherwise, it generates a valid HTML tag name from storyId by removing non-ASCII alphanumerics from storyId, prefixing "sb-", and suffixing "-component"
+     * @protected
+     * @memberof AbstractRenderer
+     */
+    generateTargetSelectorFromStoryId(id) {
+        const invalidHtmlTag = /[^A-Za-z0-9-]/g;
+        const storyIdIsInvalidHtmlTagName = invalidHtmlTag.test(id);
+        return storyIdIsInvalidHtmlTagName ? `sb-${id.replace(invalidHtmlTag, '')}-component` : id;
+    }
+    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));
+    }
+    fullRendererRequired({ targetDOMNode, storyFnAngular, moduleMetadata, forced, }) {
+        const previousStoryRenderInfo = this.previousStoryRenderInfo.get(targetDOMNode);
+        const currentStoryRender = {
+            storyFnAngular,
+            moduleMetadataSnapshot: (0, telejson_1.stringify)(moduleMetadata),
+        };
+        this.previousStoryRenderInfo.set(targetDOMNode, currentStoryRender);
+        if (
+        // check `forceRender` of story RenderContext
+        !forced ||
+            // if it's the first rendering and storyProps$ is not init
+            !this.storyProps$) {
+            return true;
+        }
+        // force the rendering if the template has changed
+        const hasChangedTemplate = !!storyFnAngular?.template &&
+            previousStoryRenderInfo?.storyFnAngular?.template !== storyFnAngular.template;
+        if (hasChangedTemplate) {
+            return true;
+        }
+        // force the rendering if the metadata structure has changed
+        const hasChangedModuleMetadata = currentStoryRender.moduleMetadataSnapshot !== previousStoryRenderInfo?.moduleMetadataSnapshot;
+        return hasChangedModuleMetadata;
+    }
+}
+_a = AbstractRenderer;
+/**
+ * Reset compiled components because we often want to compile the same component with
+ * more than one NgModule.
+ */
+AbstractRenderer.resetCompiledComponents = async () => {
+    try {
+        // Clear global Angular component cache in order to be able to re-render the same component across multiple stories
+        //
+        // References:
+        // https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/webpack/plugins/hmr/hmr-accept.ts#L50
+        // https://github.com/angular/angular/blob/2ebe2bcb2fe19bf672316b05f15241fd7fd40803/packages/core/src/render3/jit/module.ts#L377-L384
+        const { ɵresetCompiledComponents } = await Promise.resolve().then(() => __importStar(require('@angular/core')));
+        ɵresetCompiledComponents();
+    }
+    catch (e) {
+        /**
+         * noop catch
+         * This means angular removed or modified ɵresetCompiledComponents
+         */
+    }
+};
+exports.AbstractRenderer = AbstractRenderer;

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

@@ -0,0 +1,13 @@
+import { AbstractRenderer } from './AbstractRenderer';
+import { StoryFnAngularReturnType, Parameters } from '../types';
+export declare class CanvasRenderer extends AbstractRenderer {
+    render(options: {
+        storyFnAngular: StoryFnAngularReturnType;
+        forced: boolean;
+        parameters: Parameters;
+        component: any;
+        targetDOMNode: HTMLElement;
+    }): Promise<void>;
+    beforeFullRender(): Promise<void>;
+    afterFullRender(): Promise<void>;
+}