@storybook/angular 9.0.0-beta.6 → 9.0.0-beta.7

package/dist/client/angular-beta/StorybookProvider.mjs

@@ -0,0 +1,22 @@
+import { InjectionToken, NgZone } from '@angular/core';
+import { Observable } from 'rxjs';
+export const STORY_PROPS = new InjectionToken('STORY_PROPS');
+export const storyPropsProvider = (storyProps$) => ({
+    provide: STORY_PROPS,
+    useFactory: storyDataFactory(storyProps$.asObservable()),
+    deps: [NgZone],
+});
+function storyDataFactory(data) {
+    return (ngZone) => new Observable((subscriber) => {
+        const sub = data.subscribe((v) => {
+            ngZone.run(() => subscriber.next(v));
+        }, (err) => {
+            ngZone.run(() => subscriber.error(err));
+        }, () => {
+            ngZone.run(() => subscriber.complete());
+        });
+        return () => {
+            sub.unsubscribe();
+        };
+    });
+}

package/dist/client/angular-beta/StorybookWrapperComponent.mjs

@@ -0,0 +1,123 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+import { ChangeDetectorRef, Component, ElementRef, Inject, NgModule, ViewChild, ViewContainerRef, } from '@angular/core';
+import { Subject } from 'rxjs';
+import { map, skip } from 'rxjs/operators';
+import { STORY_PROPS } from './StorybookProvider';
+import { getComponentInputsOutputs } from './utils/NgComponentAnalyzer';
+import { PropertyExtractor } from './utils/PropertyExtractor';
+const getNonInputsOutputsProps = (ngComponentInputsOutputs, props = {}) => {
+    const inputs = ngComponentInputsOutputs.inputs
+        .filter((i) => i.templateName in props)
+        .map((i) => i.templateName);
+    const outputs = ngComponentInputsOutputs.outputs
+        .filter((o) => o.templateName in props)
+        .map((o) => o.templateName);
+    return Object.keys(props).filter((k) => ![...inputs, ...outputs].includes(k));
+};
+/** Wraps the story template into a component */
+export const createStorybookWrapperComponent = ({ selector, template, storyComponent, styles, moduleMetadata, initialProps, analyzedMetadata, }) => {
+    // In ivy, a '' selector is not allowed, therefore we need to just set it to anything if
+    // storyComponent was not provided.
+    const viewChildSelector = storyComponent ?? '__storybook-noop';
+    const { imports, declarations, providers } = analyzedMetadata;
+    let StorybookComponentModule = class StorybookComponentModule {
+    };
+    StorybookComponentModule = __decorate([
+        NgModule({
+            declarations,
+            imports,
+            exports: [...declarations, ...imports],
+        })
+    ], StorybookComponentModule);
+    PropertyExtractor.warnImportsModuleWithProviders(analyzedMetadata);
+    let StorybookWrapperComponent = class StorybookWrapperComponent {
+        constructor(storyProps$, changeDetectorRef) {
+            this.storyProps$ = storyProps$;
+            this.changeDetectorRef = changeDetectorRef;
+            // Used in case of a component without selector
+            this.storyComponent = storyComponent ?? '';
+        }
+        ngOnInit() {
+            // Subscribes to the observable storyProps$ to keep these properties up to date
+            this.storyWrapperPropsSubscription = this.storyProps$.subscribe((storyProps = {}) => {
+                // All props are added as component properties
+                Object.assign(this, storyProps);
+                this.changeDetectorRef.detectChanges();
+                this.changeDetectorRef.markForCheck();
+            });
+        }
+        ngAfterViewInit() {
+            // Bind properties to component, if the story have component
+            if (this.storyComponentElementRef) {
+                const ngComponentInputsOutputs = getComponentInputsOutputs(storyComponent);
+                const initialOtherProps = getNonInputsOutputsProps(ngComponentInputsOutputs, initialProps);
+                // Initializes properties that are not Inputs | Outputs
+                // Allows story props to override local component properties
+                initialOtherProps.forEach((p) => {
+                    this.storyComponentElementRef[p] = initialProps[p];
+                });
+                // `markForCheck` the component in case this uses changeDetection: OnPush
+                // And then forces the `detectChanges`
+                this.storyComponentViewContainerRef.injector.get(ChangeDetectorRef).markForCheck();
+                this.changeDetectorRef.detectChanges();
+                // Once target component has been initialized, the storyProps$ observable keeps target component properties than are not Input|Output up to date
+                this.storyComponentPropsSubscription = this.storyProps$
+                    .pipe(skip(1), map((props) => {
+                    const propsKeyToKeep = getNonInputsOutputsProps(ngComponentInputsOutputs, props);
+                    return propsKeyToKeep.reduce((acc, p) => ({ ...acc, [p]: props[p] }), {});
+                }))
+                    .subscribe((props) => {
+                    // Replace inputs with new ones from props
+                    Object.assign(this.storyComponentElementRef, props);
+                    // `markForCheck` the component in case this uses changeDetection: OnPush
+                    // And then forces the `detectChanges`
+                    this.storyComponentViewContainerRef.injector.get(ChangeDetectorRef).markForCheck();
+                    this.changeDetectorRef.detectChanges();
+                });
+            }
+        }
+        ngOnDestroy() {
+            if (this.storyComponentPropsSubscription != null) {
+                this.storyComponentPropsSubscription.unsubscribe();
+            }
+            if (this.storyWrapperPropsSubscription != null) {
+                this.storyWrapperPropsSubscription.unsubscribe();
+            }
+        }
+    };
+    __decorate([
+        ViewChild(viewChildSelector, { static: true }),
+        __metadata("design:type", ElementRef)
+    ], StorybookWrapperComponent.prototype, "storyComponentElementRef", void 0);
+    __decorate([
+        ViewChild(viewChildSelector, { read: ViewContainerRef, static: true }),
+        __metadata("design:type", ViewContainerRef)
+    ], StorybookWrapperComponent.prototype, "storyComponentViewContainerRef", void 0);
+    StorybookWrapperComponent = __decorate([
+        Component({
+            selector,
+            template,
+            standalone: true,
+            imports: [StorybookComponentModule],
+            providers,
+            styles,
+            schemas: moduleMetadata.schemas,
+        }),
+        __param(0, Inject(STORY_PROPS)),
+        __param(1, Inject(ChangeDetectorRef)),
+        __metadata("design:paramtypes", [Subject,
+            ChangeDetectorRef])
+    ], StorybookWrapperComponent);
+    return StorybookWrapperComponent;
+};

package/dist/client/angular-beta/__testfixtures__/input.component.mjs

@@ -0,0 +1,73 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+export const exportedConstant = 'An exported constant';
+export var ButtonAccent;
+(function (ButtonAccent) {
+    ButtonAccent["Normal"] = "Normal";
+    ButtonAccent["High"] = "High";
+})(ButtonAccent || (ButtonAccent = {}));
+let InputComponent = class InputComponent {
+    constructor() {
+        /** Appearance style of the button. */
+        this.appearance = 'secondary';
+        /** Sets the button to a disabled state. */
+        this.isDisabled = false;
+        this.onClick = new EventEmitter();
+        this.dashOut = new EventEmitter();
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], InputComponent.prototype, "appearance", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], InputComponent.prototype, "counter", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], InputComponent.prototype, "accent", void 0);
+__decorate([
+    Input('color'),
+    __metadata("design:type", String)
+], InputComponent.prototype, "foregroundColor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], InputComponent.prototype, "isDisabled", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], InputComponent.prototype, "label", void 0);
+__decorate([
+    Input('aria-label'),
+    __metadata("design:type", String)
+], InputComponent.prototype, "ariaLabel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], InputComponent.prototype, "someDataObject", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], InputComponent.prototype, "onClick", void 0);
+__decorate([
+    Output('dash-out'),
+    __metadata("design:type", Object)
+], InputComponent.prototype, "dashOut", void 0);
+InputComponent = __decorate([
+    Component({
+        selector: 'doc-button',
+        template: '<button>{{ label }}</button>',
+    })
+], InputComponent);
+export { InputComponent };

package/dist/client/angular-beta/__testfixtures__/test.module.mjs

@@ -0,0 +1,17 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+let WithOfficialModule = class WithOfficialModule {
+};
+WithOfficialModule = __decorate([
+    NgModule({
+        imports: [CommonModule, HttpClientModule],
+    })
+], WithOfficialModule);
+export { WithOfficialModule };

package/dist/client/angular-beta/utils/BootstrapQueue.mjs

@@ -0,0 +1,49 @@
+const queue = [];
+let isProcessing = false;
+/**
+ * Reset compiled components because we often want to compile the same component with more than one
+ * NgModule.
+ */
+const 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 import('@angular/core');
+        ɵresetCompiledComponents();
+    }
+    catch (e) {
+        /** Noop catch This means angular removed or modified ɵresetCompiledComponents */
+    }
+};
+/**
+ * Queue bootstrapping, so that only one application can be bootstrapped at a time.
+ *
+ * Bootstrapping multiple applications at once can cause Angular to throw an error that a component
+ * is declared in multiple modules. This avoids two stories confusing the Angular compiler, by
+ * bootstrapping more that one application at a time.
+ *
+ * @param fn Callback that should complete the bootstrap process
+ * @returns ApplicationRef from the completed bootstrap process
+ */
+export const queueBootstrapping = (fn) => {
+    return new Promise((resolve, reject) => {
+        queue.push(() => fn().then(resolve).catch(reject));
+        if (!isProcessing) {
+            processQueue();
+        }
+    });
+};
+const processQueue = async () => {
+    isProcessing = true;
+    while (queue.length > 0) {
+        const bootstrappingFn = queue.shift();
+        if (bootstrappingFn) {
+            await bootstrappingFn();
+            await resetCompiledComponents();
+        }
+    }
+    isProcessing = false;
+};

package/dist/client/angular-beta/utils/BootstrapQueue.test.mjs

@@ -0,0 +1,162 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Subject, lastValueFrom } from 'rxjs';
+import { queueBootstrapping } from './BootstrapQueue';
+const instantWaitFor = (fn) => {
+    return vi.waitFor(fn, {
+        interval: 0,
+        timeout: 10000,
+    });
+};
+describe('BootstrapQueue', { retry: 3 }, () => {
+    beforeEach(async () => {
+        vi.spyOn(console, 'log').mockImplementation(() => { });
+    });
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    it('@flaky should wait until complete', async () => {
+        const pendingSubject = new Subject();
+        const bootstrapApp = vi.fn().mockImplementation(async () => {
+            return lastValueFrom(pendingSubject);
+        });
+        const bootstrapAppFinished = vi.fn();
+        queueBootstrapping(bootstrapApp).then(() => {
+            bootstrapAppFinished();
+        });
+        await instantWaitFor(() => {
+            if (bootstrapApp.mock.calls.length !== 1) {
+                throw new Error('bootstrapApp should not have been called yet');
+            }
+        });
+        expect(bootstrapApp).toHaveBeenCalled();
+        expect(bootstrapAppFinished).not.toHaveBeenCalled();
+        pendingSubject.next();
+        pendingSubject.complete();
+        await instantWaitFor(() => {
+            if (bootstrapAppFinished.mock.calls.length !== 1) {
+                throw new Error('bootstrapApp should have been called once');
+            }
+        });
+        expect(bootstrapAppFinished).toHaveBeenCalled();
+    });
+    it('should prevent following tasks, until the preview tasks are complete', async () => {
+        const pendingSubject = new Subject();
+        const bootstrapApp = vi.fn().mockImplementation(async () => {
+            return lastValueFrom(pendingSubject);
+        });
+        const bootstrapAppFinished = vi.fn();
+        const pendingSubject2 = new Subject();
+        const bootstrapApp2 = vi.fn().mockImplementation(async () => {
+            return lastValueFrom(pendingSubject2);
+        });
+        const bootstrapAppFinished2 = vi.fn();
+        const pendingSubject3 = new Subject();
+        const bootstrapApp3 = vi.fn().mockImplementation(async () => {
+            return lastValueFrom(pendingSubject3);
+        });
+        const bootstrapAppFinished3 = vi.fn();
+        queueBootstrapping(bootstrapApp).then(bootstrapAppFinished);
+        queueBootstrapping(bootstrapApp2).then(bootstrapAppFinished2);
+        queueBootstrapping(bootstrapApp3).then(bootstrapAppFinished3);
+        await instantWaitFor(() => {
+            if (bootstrapApp.mock.calls.length !== 1) {
+                throw new Error('bootstrapApp should have been called once');
+            }
+        });
+        expect(bootstrapApp).toHaveBeenCalled();
+        expect(bootstrapAppFinished).not.toHaveBeenCalled();
+        expect(bootstrapApp2).not.toHaveBeenCalled();
+        expect(bootstrapAppFinished2).not.toHaveBeenCalled();
+        expect(bootstrapApp3).not.toHaveBeenCalled();
+        expect(bootstrapAppFinished3).not.toHaveBeenCalled();
+        pendingSubject.next();
+        pendingSubject.complete();
+        await instantWaitFor(() => {
+            if (bootstrapApp2.mock.calls.length !== 1) {
+                throw new Error('bootstrapApp2 should have been called once');
+            }
+        });
+        expect(bootstrapApp).toHaveReturnedTimes(1);
+        expect(bootstrapAppFinished).toHaveBeenCalled();
+        expect(bootstrapApp2).toHaveBeenCalled();
+        expect(bootstrapAppFinished2).not.toHaveBeenCalled();
+        expect(bootstrapApp3).not.toHaveBeenCalled();
+        expect(bootstrapAppFinished3).not.toHaveBeenCalled();
+        pendingSubject2.next();
+        pendingSubject2.complete();
+        await instantWaitFor(() => {
+            if (bootstrapApp3.mock.calls.length !== 1) {
+                throw new Error('bootstrapApp3 should have been called once');
+            }
+        });
+        expect(bootstrapApp).toHaveReturnedTimes(1);
+        expect(bootstrapAppFinished).toHaveBeenCalled();
+        expect(bootstrapApp2).toHaveReturnedTimes(1);
+        expect(bootstrapAppFinished2).toHaveBeenCalled();
+        expect(bootstrapApp3).toHaveBeenCalled();
+        expect(bootstrapAppFinished3).not.toHaveBeenCalled();
+        pendingSubject3.next();
+        pendingSubject3.complete();
+        await instantWaitFor(() => {
+            if (bootstrapAppFinished3.mock.calls.length !== 1) {
+                throw new Error('bootstrapAppFinished3 should have been called once');
+            }
+        });
+        expect(bootstrapApp).toHaveReturnedTimes(1);
+        expect(bootstrapAppFinished).toHaveBeenCalled();
+        expect(bootstrapApp2).toHaveReturnedTimes(1);
+        expect(bootstrapAppFinished2).toHaveBeenCalled();
+        expect(bootstrapApp3).toHaveReturnedTimes(1);
+        expect(bootstrapAppFinished3).toHaveBeenCalled();
+    });
+    it('should throw and continue next bootstrap on error', async () => {
+        const pendingSubject = new Subject();
+        const bootstrapApp = vi.fn().mockImplementation(async () => {
+            return lastValueFrom(pendingSubject);
+        });
+        const bootstrapAppFinished = vi.fn();
+        const bootstrapAppError = vi.fn();
+        const pendingSubject2 = new Subject();
+        const bootstrapApp2 = vi.fn().mockImplementation(async () => {
+            return lastValueFrom(pendingSubject2);
+        });
+        const bootstrapAppFinished2 = vi.fn();
+        const bootstrapAppError2 = vi.fn();
+        queueBootstrapping(bootstrapApp).then(bootstrapAppFinished).catch(bootstrapAppError);
+        queueBootstrapping(bootstrapApp2).then(bootstrapAppFinished2).catch(bootstrapAppError2);
+        await instantWaitFor(() => {
+            if (bootstrapApp.mock.calls.length !== 1) {
+                throw new Error('bootstrapApp should have been called once');
+            }
+        });
+        expect(bootstrapApp).toHaveBeenCalledTimes(1);
+        expect(bootstrapAppFinished).not.toHaveBeenCalled();
+        expect(bootstrapApp2).not.toHaveBeenCalled();
+        pendingSubject.error(new Error('test error'));
+        await instantWaitFor(() => {
+            if (bootstrapAppError.mock.calls.length !== 1) {
+                throw new Error('bootstrapAppError should have been called once');
+            }
+        });
+        expect(bootstrapApp).toHaveBeenCalledTimes(1);
+        expect(bootstrapAppFinished).not.toHaveBeenCalled();
+        expect(bootstrapAppError).toHaveBeenCalledTimes(1);
+        expect(bootstrapApp2).toHaveBeenCalledTimes(1);
+        expect(bootstrapAppFinished2).not.toHaveBeenCalled();
+        expect(bootstrapAppError2).not.toHaveBeenCalled();
+        pendingSubject2.next();
+        pendingSubject2.complete();
+        await instantWaitFor(() => {
+            if (bootstrapAppFinished2.mock.calls.length !== 1) {
+                throw new Error('bootstrapAppFinished2 should have been called once');
+            }
+        });
+        expect(bootstrapApp).toHaveBeenCalledTimes(1);
+        expect(bootstrapAppFinished).not.toHaveBeenCalled();
+        expect(bootstrapAppError).toHaveBeenCalledTimes(1);
+        expect(bootstrapApp2).toHaveBeenCalledTimes(1);
+        expect(bootstrapAppFinished2).toHaveBeenCalledTimes(1);
+        expect(bootstrapAppError2).not.toHaveBeenCalled();
+    });
+});

package/dist/client/angular-beta/utils/NgComponentAnalyzer.mjs

@@ -0,0 +1,84 @@
+import { Component, Directive, Input, Output, Pipe, ɵReflectionCapabilities as ReflectionCapabilities, } from '@angular/core';
+const reflectionCapabilities = new ReflectionCapabilities();
+/** Returns component Inputs / Outputs by browsing these properties and decorator */
+export const getComponentInputsOutputs = (component) => {
+    const componentMetadata = getComponentDecoratorMetadata(component);
+    const componentPropsMetadata = getComponentPropsDecoratorMetadata(component);
+    const initialValue = {
+        inputs: [],
+        outputs: [],
+    };
+    // Adds the I/O present in @Component metadata
+    if (componentMetadata && componentMetadata.inputs) {
+        initialValue.inputs.push(...componentMetadata.inputs.map((i) => ({
+            propName: typeof i === 'string' ? i : i.name,
+            templateName: typeof i === 'string' ? i : i.alias,
+        })));
+    }
+    if (componentMetadata && componentMetadata.outputs) {
+        initialValue.outputs.push(...componentMetadata.outputs.map((i) => ({ propName: i, templateName: i })));
+    }
+    if (!componentPropsMetadata) {
+        return initialValue;
+    }
+    // Browses component properties to extract I/O
+    // Filters properties that have the same name as the one present in the @Component property
+    return Object.entries(componentPropsMetadata).reduce((previousValue, [propertyName, values]) => {
+        const value = values.find((v) => v instanceof Input || v instanceof Output);
+        if (value instanceof Input) {
+            const inputToAdd = {
+                propName: propertyName,
+                templateName: value.bindingPropertyName ?? value.alias ?? propertyName,
+            };
+            const previousInputsFiltered = previousValue.inputs.filter((i) => i.templateName !== propertyName);
+            return {
+                ...previousValue,
+                inputs: [...previousInputsFiltered, inputToAdd],
+            };
+        }
+        if (value instanceof Output) {
+            const outputToAdd = {
+                propName: propertyName,
+                templateName: value.bindingPropertyName ?? value.alias ?? propertyName,
+            };
+            const previousOutputsFiltered = previousValue.outputs.filter((i) => i.templateName !== propertyName);
+            return {
+                ...previousValue,
+                outputs: [...previousOutputsFiltered, outputToAdd],
+            };
+        }
+        return previousValue;
+    }, initialValue);
+};
+export const isDeclarable = (component) => {
+    if (!component) {
+        return false;
+    }
+    const decorators = reflectionCapabilities.annotations(component);
+    return !!(decorators || []).find((d) => d instanceof Directive || d instanceof Pipe || d instanceof Component);
+};
+export const isComponent = (component) => {
+    if (!component) {
+        return false;
+    }
+    const decorators = reflectionCapabilities.annotations(component);
+    return (decorators || []).some((d) => d instanceof Component);
+};
+export const isStandaloneComponent = (component) => {
+    if (!component) {
+        return false;
+    }
+    const decorators = reflectionCapabilities.annotations(component);
+    // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
+    // Angular deps are updated to v14.x.x.
+    return (decorators || []).some((d) => (d instanceof Component || d instanceof Directive || d instanceof Pipe) && d.standalone);
+};
+/** Returns all component decorator properties is used to get all `@Input` and `@Output` Decorator */
+export const getComponentPropsDecoratorMetadata = (component) => {
+    return reflectionCapabilities.propMetadata(component);
+};
+/** Returns component decorator `@Component` */
+export const getComponentDecoratorMetadata = (component) => {
+    const decorators = reflectionCapabilities.annotations(component);
+    return decorators.reverse().find((d) => d instanceof Component);
+};