GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-08 04:01:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Re-emit story data in ngZone

Browse Source
This commit is contained in:
Mark Berry 2020-11-18 00:56:42 -06:00
parent 6f8e63e1c0
commit 915f16fd03
2 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/angular/src/client/preview/angular/components/app.component.ts
View File

@ -15,7 +15,6 @@ import {
SimpleChanges, SimpleChanges,
SimpleChange, SimpleChange,
ChangeDetectorRef, ChangeDetectorRef,
NgZone,
} from '@angular/core'; } from '@angular/core';
import { Observable, Subscription } from 'rxjs'; import { Observable, Subscription } from 'rxjs';
import { first } from 'rxjs/operators'; import { first } from 'rxjs/operators';
@ -39,7 +38,6 @@ export class AppComponent implements OnInit, OnDestroy {
constructor( constructor(
private cfr: ComponentFactoryResolver, private cfr: ComponentFactoryResolver,
private changeDetectorRef: ChangeDetectorRef, private changeDetectorRef: ChangeDetectorRef,
private ngZone: NgZone,
@Inject(STORY) private data: Observable<StoryFnAngularReturnType> @Inject(STORY) private data: Observable<StoryFnAngularReturnType>
) {} ) {}
@ -55,7 +53,7 @@ export class AppComponent implements OnInit, OnDestroy {
); );
this.subscription = this.data.subscribe((newData) => { this.subscription = this.data.subscribe((newData) => {
this.ngZone.run(() => this.setProps(instance, newData)); this.setProps(instance, newData);
childChangeDetectorRef.markForCheck(); childChangeDetectorRef.markForCheck();
// Must detect changes on the current component in order to update any changes in child component's @HostBinding properties (angular/angular#22560) // Must detect changes on the current component in order to update any changes in child component's @HostBinding properties (angular/angular#22560)
this.changeDetectorRef.detectChanges(); this.changeDetectorRef.detectChanges();

27
app/angular/src/client/preview/angular/helpers.ts
View File

@ -1,10 +1,10 @@
// @ts-ignore // @ts-ignore
import { document } from 'global'; import { document } from 'global';
import { enableProdMode, NgModule, Component, NgModuleRef, Type } from '@angular/core'; import { enableProdMode, NgModule, Component, NgModuleRef, Type, NgZone } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { ReplaySubject } from 'rxjs'; import { Observable, ReplaySubject, Subscriber } from 'rxjs';
import { StoryFn } from '@storybook/addons'; import { StoryFn } from '@storybook/addons';
import { AppComponent } from './components/app.component'; import { AppComponent } from './components/app.component';
import { STORY } from './app.token'; import { STORY } from './app.token';
@ -18,13 +18,27 @@ declare global {
let platform: any = null; let platform: any = null;
let promises: Promise<NgModuleRef<any>>[] = []; let promises: Promise<NgModuleRef<any>>[] = [];
let storyData = new ReplaySubject(1); let storyData = new ReplaySubject<StoryFnAngularReturnType>(1);
const moduleClass = class DynamicModule {}; const moduleClass = class DynamicModule {};
const componentClass = class DynamicComponent {}; const componentClass = class DynamicComponent {};
type DynamicComponentType = typeof componentClass; type DynamicComponentType = typeof componentClass;
function storyDataFactory<T>(storyData: Observable<T>) {
return (ngZone: NgZone) => new Observable((subscriber: Subscriber<T>) => {
const sub = storyData.subscribe(
(v: T) => { ngZone.run(() => subscriber.next(v)); },
(err) => { ngZone.run(() => subscriber.error(err)); },
() => { ngZone.run(() => subscriber.complete()); }
);
return () => {
sub.unsubscribe();
};
});
};
const getModule = ( const getModule = (
declarations: (Type<any> | any[])[], declarations: (Type<any> | any[])[],
entryComponents: (Type<any> | any[])[], entryComponents: (Type<any> | any[])[],
@ -34,13 +48,16 @@ const getModule = (
) => { ) => {
// Complete last ReplaySubject and create a new one for the current module // Complete last ReplaySubject and create a new one for the current module
storyData.complete(); storyData.complete();
storyData = new ReplaySubject(1); storyData = new ReplaySubject<StoryFnAngularReturnType>(1);
storyData.next(data); storyData.next(data);
const moduleMeta = { const moduleMeta = {
declarations: [...declarations, ...(moduleMetadata.declarations || [])], declarations: [...declarations, ...(moduleMetadata.declarations || [])],
imports: [BrowserModule, FormsModule, ...(moduleMetadata.imports || [])], imports: [BrowserModule, FormsModule, ...(moduleMetadata.imports || [])],
providers: [{ provide: STORY, useValue: storyData }, ...(moduleMetadata.providers || [])], providers: [
{ provide: STORY, useFactory: storyDataFactory(storyData.asObservable()), deps: [ NgZone ] },
...(moduleMetadata.providers || [])
],
entryComponents: [...entryComponents, ...(moduleMetadata.entryComponents || [])], entryComponents: [...entryComponents, ...(moduleMetadata.entryComponents || [])],
schemas: [...(moduleMetadata.schemas || [])], schemas: [...(moduleMetadata.schemas || [])],
bootstrap: [...bootstrap], bootstrap: [...bootstrap],