3096397237

Build Type

push

github

Committed by GitHub

Commit Message

fix(ngx-flicking): do not schedule promise within the Angular zone (#729)

Run Details

4348 of 7089 branches covered (61.33%)

Branch coverage included in aggregate %.

5 of 7 new or added lines in 1 file covered. (71.43%)

1 existing line in 1 file now uncovered.

7868 of 8406 relevant lines covered (93.6%)

136.53 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

75.68

/packages/ngx-flicking/projects/ngx-flicking/src/lib/ngx-flicking.component.ts

/**
 * Copyright (c) 2015 NAVER Corp.
 * egjs projects are licensed under the MIT license
 */
import {
  Component,
  Input,
  AfterViewInit,
  ElementRef,
  OnChanges,
  Output,
  EventEmitter,
  OnDestroy,
  ViewEncapsulation,
  QueryList,
  ContentChildren,
  Renderer2,
  HostBinding,
  Inject,
  PLATFORM_ID,
  NgZone
} from "@angular/core";
import { isPlatformBrowser } from "@angular/common";
import { fromEvent, Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import VanillaFlicking, {
  FlickingOptions,
  FlickingEvents,
  sync,
  getDefaultCameraTransform,
  Plugin,
  Status,
  SelectEvent,
  NeedPanelEvent,
  VisibleChangeEvent,
  HoldStartEvent,
  HoldEndEvent,
  MoveStartEvent,
  MoveEvent,
  MoveEndEvent,
  WillChangeEvent,
  ChangedEvent,
  WillRestoreEvent,
  RestoredEvent,
  ReadyEvent,
  BeforeResizeEvent,
  AfterResizeEvent,
  ReachEdgeEvent,
  PanelChangeEvent,
  VirtualRenderingStrategy,
  NormalRenderingStrategy,
  range,
  CLASS
} from "@egjs/flicking";
import ListDiffer from "@egjs/list-differ";
import { ComponentEvent } from "@egjs/component";

import { EVENT_NAMES } from "./consts";
import FlickingInterface from "./FlickingInterface";
import { NgxFlickingPanel } from "./ngx-flicking-panel.directive";
import NgxRenderer, { NgxRendererOptions } from "./NgxRenderer";
import NgxElementProvider from "./NgxElementProvider";

@Component({
  selector: "ngx-flicking, [NgxFlicking]",
  template: `
    <div [ngClass]="_cameraElClass" [ngStyle]="cameraStyleBeforeInit">
      <ng-content></ng-content>
    </div>
    <ng-content select="[in-viewport]"></ng-content>`,
  host: {
    class: "flicking-viewport",
    style: "display: block;"
  },
  styleUrls: [
    "../../node_modules/@egjs/flicking/dist/flicking.css"
  ],
  encapsulation: ViewEncapsulation.None
})
export class NgxFlickingComponent extends FlickingInterface
  implements AfterViewInit, OnDestroy, OnChanges {
  @Input() public options: Partial<FlickingOptions> = {};
  @Input() public plugins: Plugin[] = [];
  @Input() public status: Status;
  @Input() public cameraClass: string;
  @Input() public hideBeforeInit: boolean = false;
  @Input() public firstPanelSize: string;
  @Output() public ready: EventEmitter<ReadyEvent<NgxFlickingComponent>>;
  @Output() public beforeResize: EventEmitter<BeforeResizeEvent<NgxFlickingComponent>>;
  @Output() public afterResize: EventEmitter<AfterResizeEvent<NgxFlickingComponent>>;
  @Output() public holdStart: EventEmitter<HoldStartEvent<NgxFlickingComponent>>;
  @Output() public holdEnd: EventEmitter<HoldEndEvent<NgxFlickingComponent>>;
  @Output() public moveStart: EventEmitter<MoveStartEvent<NgxFlickingComponent>>;
  @Output() public move: EventEmitter<MoveEvent<NgxFlickingComponent>>;
  @Output() public moveEnd: EventEmitter<MoveEndEvent<NgxFlickingComponent>>;
  @Output() public willChange: EventEmitter<WillChangeEvent<NgxFlickingComponent>>;
  @Output() public changed: EventEmitter<ChangedEvent<NgxFlickingComponent>>;
  @Output() public willRestore: EventEmitter<WillRestoreEvent<NgxFlickingComponent>>;
  @Output() public restored: EventEmitter<RestoredEvent<NgxFlickingComponent>>;
  @Output() public select: EventEmitter<SelectEvent<NgxFlickingComponent>>;
  @Output() public needPanel: EventEmitter<NeedPanelEvent<NgxFlickingComponent>>;
  @Output() public visibleChange: EventEmitter<VisibleChangeEvent<NgxFlickingComponent>>;
  @Output() public reachEdge: EventEmitter<ReachEdgeEvent<NgxFlickingComponent>>;
  @Output() public panelChange: EventEmitter<PanelChangeEvent<NgxFlickingComponent>>;

  @HostBinding("class.vertical") public get isVertical() {
    return this.options.horizontal === false;
  }

  @HostBinding("class.flicking-hidden") public get isHiddenBeforeInit() {
    const initialized = this._vanillaFlicking && this._vanillaFlicking.initialized;
    return this.hideBeforeInit && !initialized;
  }

  public get cameraStyleBeforeInit() {
    const initialized = this._vanillaFlicking && this._vanillaFlicking.initialized;
    return !initialized && this.firstPanelSize
      ? { transform: getDefaultCameraTransform(this.options.align, this.options.horizontal, this.firstPanelSize) }
      : {};
  }

  @ContentChildren(NgxFlickingPanel) private _ngxPanels: QueryList<NgxFlickingPanel>;
  private _pluginsDiffer: ListDiffer<Plugin> = new ListDiffer<Plugin>();

  public get ngxPanels() { return this._ngxPanels; }
  public get _cameraElClass() { return `flicking-camera ${this.cameraClass ?? ""}`.trim(); }
  
  private _destroy$ = new Subject<void>();

  public constructor(
    private _elRef: ElementRef<HTMLElement>,
    private _ngxRenderer: Renderer2,
    @Inject(PLATFORM_ID) private _platformId: string,
    private _ngZone: NgZone,
  ) {
    super();

    this._vanillaFlicking = null;

    EVENT_NAMES.forEach(evtName => {
      this[evtName] = new EventEmitter();
    });
  }

  public ngAfterViewInit() {
    if (!isPlatformBrowser(this._platformId)) return;

    const options = this.options;
    const viewportEl = this._elRef.nativeElement;
    const virtual = options.virtual && options.panelsPerView > 0;
    const rendererOptions: NgxRendererOptions = {
      ngxFlicking: this,
      align: options.align,
      ngxRenderer: this._ngxRenderer,
      strategy: virtual
        ? new VirtualRenderingStrategy()
        : new NormalRenderingStrategy({
          providerCtor: NgxElementProvider
        })
    };

    if (virtual) {
      this._initVirtualElements();
    }

    // Initialize `VanillaFlicking` outside of the Angular zone so it will set up `mousedown`
    // and `mousemove` event listeners within the root zone, and it won't trigger change detection
    // every time the user moves the mouse.
    const flicking = this._ngZone.runOutsideAngular(() => new VanillaFlicking(viewportEl, {
      ...this.options,
      externalRenderer: new NgxRenderer(rendererOptions)
    }));
    this._vanillaFlicking = flicking;

    const elementDiffer = new ListDiffer(this._ngxPanels.toArray());

    this._bindEvents();
    this._checkPlugins();

    if (this.status) {
      flicking.setStatus(this.status);
    }

    this._ngxPanels.changes.subscribe(() => {
      const panels = this._ngxPanels.toArray();
      const diffResult = elementDiffer.update(panels);

      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      sync(flicking, diffResult, [...diffResult.maintained.map(([_, idx]) => diffResult.list[idx]), ...diffResult.added.map(idx => diffResult.list[idx])]);
    });
  }

  public ngOnDestroy() {
    this._destroy$.next();
    if (!this._vanillaFlicking) return;
    this._vanillaFlicking.destroy();
  }

  public ngOnChanges() {
    const flicking = this._vanillaFlicking;
    if (!flicking) return;

    this._ngZone.runOutsideAngular(() =>
      flicking.renderer.forceRenderAllPanels()
    );
    this._checkPlugins();
  }

  private _bindEvents() {
    const flicking = this._vanillaFlicking!;

    EVENT_NAMES.forEach(evtName => {
      // `fromEvent` supports passing `JQueryStyleEventEmitter`
      // (an object with `on` and `off` methods). `flicking` acts as a
      // jQuery event emitter since it has both methods.
      fromEvent<ComponentEvent>(flicking, evtName)
        .pipe(takeUntil(this._destroy$))
        .subscribe((e) => {
          // Style guide: Event - https://angular.io/guide/styleguide#dont-prefix-output-properties
          const emitter = this[evtName] as EventEmitter<
            FlickingEvents[typeof evtName]
          >;

          e.currentTarget = this;

          if (emitter && emitter.observers.length > 0) {
            this._ngZone.run(() => emitter.emit(e as FlickingEvents[typeof evtName]));
          }
        });
    });
  }

  private _checkPlugins() {
    const flicking = this._vanillaFlicking;
    if (!flicking) return;

    const { list, added, removed, prevList } = this._pluginsDiffer.update(this.plugins);

    flicking.addPlugins(...added.map(index => list[index]));
    flicking.removePlugins(...removed.map(index => prevList[index]));
  }

  private _initVirtualElements() {
    const options = this.options;
    const renderer = this._ngxRenderer;
    const cameraElement = this._elRef.nativeElement.firstElementChild;
    const panelsPerView = options.panelsPerView!;
    const virtual = options.virtual!;
    const fragment = document.createDocumentFragment();

    const newElements = range(panelsPerView + 1).map(idx => {
      const panelEl = renderer.createElement("div");
      panelEl.className = virtual.panelClass ?? CLASS.DEFAULT_VIRTUAL;
      panelEl.dataset.elementIndex = idx.toString();
      return panelEl;
    });

    newElements.forEach(el => {
      fragment.appendChild(el);
    });

    renderer.appendChild(cameraElement, fragment);
  }
}

1	/**
2	* Copyright (c) 2015 NAVER Corp.
3	* egjs projects are licensed under the MIT license
4	*/
5	import {	5✔
6	Component,
7	Input,
8	AfterViewInit,
9	ElementRef,
10	OnChanges,
11	Output,
12	EventEmitter,
13	OnDestroy,
14	ViewEncapsulation,
15	QueryList,
16	ContentChildren,
17	Renderer2,
18	HostBinding,
19	Inject,
20	PLATFORM_ID,
21	NgZone
22	} from "@angular/core";
23	import { isPlatformBrowser } from "@angular/common";	5✔
24	import { fromEvent, Subject } from "rxjs";	5✔
25	import { takeUntil } from "rxjs/operators";	5✔
26	import VanillaFlicking, {	5✔
27	FlickingOptions,
28	FlickingEvents,
29	sync,
30	getDefaultCameraTransform,
31	Plugin,
32	Status,
33	SelectEvent,
34	NeedPanelEvent,
35	VisibleChangeEvent,
36	HoldStartEvent,
37	HoldEndEvent,
38	MoveStartEvent,
39	MoveEvent,
40	MoveEndEvent,
41	WillChangeEvent,
42	ChangedEvent,
43	WillRestoreEvent,
44	RestoredEvent,
45	ReadyEvent,
46	BeforeResizeEvent,
47	AfterResizeEvent,
48	ReachEdgeEvent,
49	PanelChangeEvent,
50	VirtualRenderingStrategy,
51	NormalRenderingStrategy,
52	range,
53	CLASS
54	} from "@egjs/flicking";
55	import ListDiffer from "@egjs/list-differ";	5✔
56	import { ComponentEvent } from "@egjs/component";
57
58	import { EVENT_NAMES } from "./consts";	5✔
59	import FlickingInterface from "./FlickingInterface";	5✔
60	import { NgxFlickingPanel } from "./ngx-flicking-panel.directive";	5✔
61	import NgxRenderer, { NgxRendererOptions } from "./NgxRenderer";	5✔
62	import NgxElementProvider from "./NgxElementProvider";	5✔
63
64	@Component({
65	selector: "ngx-flicking, [NgxFlicking]",
66	template: `
67	<div [ngClass]="_cameraElClass" [ngStyle]="cameraStyleBeforeInit">
68	<ng-content></ng-content>
69	</div>
70	<ng-content select="[in-viewport]"></ng-content>`,
71	host: {
72	class: "flicking-viewport",
73	style: "display: block;"
74	},
75	styleUrls: [
76	"../../node_modules/@egjs/flicking/dist/flicking.css"
77	],
78	encapsulation: ViewEncapsulation.None
79	})
80	export class NgxFlickingComponent extends FlickingInterface	5✔
81	implements AfterViewInit, OnDestroy, OnChanges {
82	@Input() public options: Partial<FlickingOptions> = {};	14✔
83	@Input() public plugins: Plugin[] = [];	14✔
84	@Input() public status: Status;	5✔
85	@Input() public cameraClass: string;	5✔
86	@Input() public hideBeforeInit: boolean = false;	14✔
87	@Input() public firstPanelSize: string;	5✔
88	@Output() public ready: EventEmitter<ReadyEvent<NgxFlickingComponent>>;	5✔
89	@Output() public beforeResize: EventEmitter<BeforeResizeEvent<NgxFlickingComponent>>;	5✔
90	@Output() public afterResize: EventEmitter<AfterResizeEvent<NgxFlickingComponent>>;	5✔
91	@Output() public holdStart: EventEmitter<HoldStartEvent<NgxFlickingComponent>>;	5✔
92	@Output() public holdEnd: EventEmitter<HoldEndEvent<NgxFlickingComponent>>;	5✔
93	@Output() public moveStart: EventEmitter<MoveStartEvent<NgxFlickingComponent>>;	5✔
94	@Output() public move: EventEmitter<MoveEvent<NgxFlickingComponent>>;	5✔
95	@Output() public moveEnd: EventEmitter<MoveEndEvent<NgxFlickingComponent>>;	5✔
96	@Output() public willChange: EventEmitter<WillChangeEvent<NgxFlickingComponent>>;	5✔
97	@Output() public changed: EventEmitter<ChangedEvent<NgxFlickingComponent>>;	5✔
98	@Output() public willRestore: EventEmitter<WillRestoreEvent<NgxFlickingComponent>>;	5✔
99	@Output() public restored: EventEmitter<RestoredEvent<NgxFlickingComponent>>;	5✔
100	@Output() public select: EventEmitter<SelectEvent<NgxFlickingComponent>>;	5✔
101	@Output() public needPanel: EventEmitter<NeedPanelEvent<NgxFlickingComponent>>;	5✔
102	@Output() public visibleChange: EventEmitter<VisibleChangeEvent<NgxFlickingComponent>>;	5✔
103	@Output() public reachEdge: EventEmitter<ReachEdgeEvent<NgxFlickingComponent>>;	5✔
104	@Output() public panelChange: EventEmitter<PanelChangeEvent<NgxFlickingComponent>>;	5✔
105
106	@HostBinding("class.vertical") public get isVertical() {	10✔
107	return this.options.horizontal === false;	28✔
108	}
109
110	@HostBinding("class.flicking-hidden") public get isHiddenBeforeInit() {	10✔
111	const initialized = this._vanillaFlicking && this._vanillaFlicking.initialized;	28✔
112	return this.hideBeforeInit && !initialized;	28!
113	}
114
115	public get cameraStyleBeforeInit() {	5✔
116	const initialized = this._vanillaFlicking && this._vanillaFlicking.initialized;	28✔
117	return !initialized && this.firstPanelSize	28!
118	? { transform: getDefaultCameraTransform(this.options.align, this.options.horizontal, this.firstPanelSize) }
119	: {};
120	}
121
122	@ContentChildren(NgxFlickingPanel) private _ngxPanels: QueryList<NgxFlickingPanel>;	5✔
123	private _pluginsDiffer: ListDiffer<Plugin> = new ListDiffer<Plugin>();	14✔
124
125	public get ngxPanels() { return this._ngxPanels; }	14✔
126	public get _cameraElClass() { return `flicking-camera ${this.cameraClass ?? ""}`.trim(); }	28!
127
128	private _destroy$ = new Subject<void>();	14✔
129
130	public constructor(
131	private _elRef: ElementRef<HTMLElement>,	14✔
132	private _ngxRenderer: Renderer2,	14✔
133	@Inject(PLATFORM_ID) private _platformId: string,	14✔
134	private _ngZone: NgZone,	14✔
135	) {
136	super();	14✔
137
138	this._vanillaFlicking = null;	14✔
139
140	EVENT_NAMES.forEach(evtName => {	14✔
141	this[evtName] = new EventEmitter();	238✔
142	});
143	}
144
145	public ngAfterViewInit() {	14✔
146	if (!isPlatformBrowser(this._platformId)) return;	14!
147
148	const options = this.options;	14✔
149	const viewportEl = this._elRef.nativeElement;	14✔
150	const virtual = options.virtual && options.panelsPerView > 0;	14!
151	const rendererOptions: NgxRendererOptions = {	14✔
152	ngxFlicking: this,
153	align: options.align,
154	ngxRenderer: this._ngxRenderer,
155	strategy: virtual	14!
156	? new VirtualRenderingStrategy()
157	: new NormalRenderingStrategy({
158	providerCtor: NgxElementProvider
159	})
160	};
161
162	if (virtual) {	14!
163	this._initVirtualElements();	×
164	}
165
166	// Initialize `VanillaFlicking` outside of the Angular zone so it will set up `mousedown`
167	// and `mousemove` event listeners within the root zone, and it won't trigger change detection
168	// every time the user moves the mouse.
169	const flicking = this._ngZone.runOutsideAngular(() => new VanillaFlicking(viewportEl, {	14✔
170	...this.options,
171	externalRenderer: new NgxRenderer(rendererOptions)
172	}));
173	this._vanillaFlicking = flicking;	14✔
174
175	const elementDiffer = new ListDiffer(this._ngxPanels.toArray());	14✔
176
177	this._bindEvents();	14✔
178	this._checkPlugins();	14✔
179
180	if (this.status) {	14!
181	flicking.setStatus(this.status);	×
182	}
183
184	this._ngxPanels.changes.subscribe(() => {	14✔
185	const panels = this._ngxPanels.toArray();	×
186	const diffResult = elementDiffer.update(panels);	×
187
188	// eslint-disable-next-line @typescript-eslint/no-unused-vars
189	sync(flicking, diffResult, [...diffResult.maintained.map(([_, idx]) => diffResult.list[idx]), ...diffResult.added.map(idx => diffResult.list[idx])]);	×
190	});
191	}
192
193	public ngOnDestroy() {	5✔
194	this._destroy$.next();	9✔
195	if (!this._vanillaFlicking) return;	9!
196	this._vanillaFlicking.destroy();	9✔
197	}
198
199	public ngOnChanges() {	5✔
200	const flicking = this._vanillaFlicking;	14✔
201	if (!flicking) return;	14✔
202
NEW 203	this._ngZone.runOutsideAngular(() =>	×
NEW 204	flicking.renderer.forceRenderAllPanels()	×
205	);
UNCOV 206	this._checkPlugins();	×
207	}
208
209	private _bindEvents() {	14✔
210	const flicking = this._vanillaFlicking!;	14✔
211
212	EVENT_NAMES.forEach(evtName => {	14✔
213	// `fromEvent` supports passing `JQueryStyleEventEmitter`
214	// (an object with `on` and `off` methods). `flicking` acts as a
215	// jQuery event emitter since it has both methods.
216	fromEvent<ComponentEvent>(flicking, evtName)	238✔
217	.pipe(takeUntil(this._destroy$))
218	.subscribe((e) => {
219	// Style guide: Event - https://angular.io/guide/styleguide#dont-prefix-output-properties
220	const emitter = this[evtName] as EventEmitter<	455✔
221	FlickingEvents[typeof evtName]
222	>;
223
224	e.currentTarget = this;	455✔
225
226	if (emitter && emitter.observers.length > 0) {	455✔
227	this._ngZone.run(() => emitter.emit(e as FlickingEvents[typeof evtName]));	3✔
228	}
229	});
230	});
231	}
232
233	private _checkPlugins() {	5✔
234	const flicking = this._vanillaFlicking;	14✔
235	if (!flicking) return;	14!
236
237	const { list, added, removed, prevList } = this._pluginsDiffer.update(this.plugins);	14✔
238
239	flicking.addPlugins(...added.map(index => list[index]));	14✔
240	flicking.removePlugins(...removed.map(index => prevList[index]));	14✔
241	}
242
243	private _initVirtualElements() {	5✔
244	const options = this.options;	×
245	const renderer = this._ngxRenderer;	×
246	const cameraElement = this._elRef.nativeElement.firstElementChild;	×
247	const panelsPerView = options.panelsPerView!;	×
248	const virtual = options.virtual!;	×
249	const fragment = document.createDocumentFragment();	×
250
251	const newElements = range(panelsPerView + 1).map(idx => {	×
252	const panelEl = renderer.createElement("div");	×
253	panelEl.className = virtual.panelClass ?? CLASS.DEFAULT_VIRTUAL;	×
254	panelEl.dataset.elementIndex = idx.toString();	×
255	return panelEl;	×
256	});
257
258	newElements.forEach(el => {	×
259	fragment.appendChild(el);	×
260	});
261
262	renderer.appendChild(cameraElement, fragment);	×
263	}
264	}	5✔

naver / egjs-flicking / 3096397237

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous