3869242514

Build Type

github

Committed by GitHub

Commit Message

Merge 42f03d580 into 6db0bffc8

Pull Request Pull Request #527: feat: upgrade to Angular 15 and enable partial compilation

Run Details

523 of 649 branches covered (80.59%)

Branch coverage included in aggregate %.

1349 of 1446 relevant lines covered (93.29%)

114.11 hits per line

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

95.83

/packages/infinitegrid/src/Renderer/Renderer.ts

import Component from "@egjs/component";
import { diff, DiffResult } from "@egjs/list-differ";
import { toArray } from "../utils";

export interface RendererItem {
  key: string | number;
  renderKey?: string;
  element?: Element | null;
}

export interface OnRendererUpdated<T extends RendererItem = RendererItem> {
  items: T[];
  elements: Element[];
  isChanged: boolean;
  isItemChanged: boolean;
  state: Record<string, any>;
  diffResult: DiffResult<T>;
}

export interface OnRendererUpdate {
  state: Record<string, any>;
}
export interface RendererEvents<T extends RendererItem = RendererItem> {
  update: OnRendererUpdate;
  updated: OnRendererUpdated<T>;
  requestUpdate: OnRendererUpdate;
}

export class Renderer<Item extends RendererItem = RendererItem> extends Component<RendererEvents> {
  protected items: Item[] = [];
  protected container: Element | null = null;
  protected rendererKey = 0;
  private _diffResult: DiffResult<Item>;
  private _updateTimer = 0;
  private _state: Record<string, any> = {};
  private _isItemChanged = false;

  public updateKey() {
    this.rendererKey = Date.now();
  }

  public getItems() {
    return this.items;
  }
  public setContainer(container: Element) {
    this.container = container;
  }
  public render(nextItems: Item[], state?: Record<string, any>) {
    return this.syncItems(nextItems, state);
  }
  public update(state: Record<string, any> = {}) {
    this._state = { ...this._state, ...state };
    this.trigger("update", {
      state,
    });

    clearTimeout(this._updateTimer);
    this._updateTimer = window.setTimeout(() => {
      this.trigger("requestUpdate", {
        state,
      });
    });
  }
  public updated(nextElements: ArrayLike<Element> = this.container?.children ?? []) {
    const diffResult = this._diffResult;
    const isChanged = !!(diffResult.added.length || diffResult.removed.length || diffResult.changed.length);
    const state = this._state;
    const isItemChanged = this._isItemChanged;
    const nextItems = diffResult.list;


    this._isItemChanged = false;
    this._state = {};
    this.items = nextItems;
    nextItems.forEach((item, i) => {
      item.element = nextElements[i];
    });


    this.trigger("updated", {
      items: nextItems,
      elements: toArray(nextElements),
      diffResult: this._diffResult,
      state,
      isItemChanged,
      isChanged,
    });

    return isChanged;
  }
  public syncItems(items: Item[], state: Record<string, any> = {}) {
    const rendererKey = this.rendererKey;
    const prevItems = this.items;
    const nextItems = items.map((item) => ({
      ...item,
      renderKey: `${rendererKey}_${item.key}`,
    }));
    const result = diff(prevItems, nextItems, (item) => item.renderKey!);

    this._isItemChanged = !!result.added.length || !!result.removed.length || !!result.changed.length;
    this._state = { ...this._state, ...state };
    this._diffResult = result;

    return result;
  }
  public destroy() {
    this.off();
  }
}

1	import Component from "@egjs/component";	1✔
2	import { diff, DiffResult } from "@egjs/list-differ";	1✔
3	import { toArray } from "../utils";	1✔
4
5	export interface RendererItem {
6	key: string \| number;
7	renderKey?: string;
8	element?: Element \| null;
9	}
10
11	export interface OnRendererUpdated<T extends RendererItem = RendererItem> {
12	items: T[];
13	elements: Element[];
14	isChanged: boolean;
15	isItemChanged: boolean;
16	state: Record<string, any>;
17	diffResult: DiffResult<T>;
18	}
19
20	export interface OnRendererUpdate {
21	state: Record<string, any>;
22	}
23	export interface RendererEvents<T extends RendererItem = RendererItem> {
24	update: OnRendererUpdate;
25	updated: OnRendererUpdated<T>;
26	requestUpdate: OnRendererUpdate;
27	}
28
29	export class Renderer<Item extends RendererItem = RendererItem> extends Component<RendererEvents> {	70✔
30	protected items: Item[] = [];	68✔
31	protected container: Element \| null = null;	68✔
32	protected rendererKey = 0;	68✔
33	private _diffResult: DiffResult<Item>;
34	private _updateTimer = 0;	68✔
35	private _state: Record<string, any> = {};	68✔
36	private _isItemChanged = false;	68✔
37
38	public updateKey() {	1✔
39	this.rendererKey = Date.now();	13✔
40	}
41
42	public getItems() {	1✔
43	return this.items;	×
44	}
45	public setContainer(container: Element) {	1✔
46	this.container = container;	65✔
47	}
48	public render(nextItems: Item[], state?: Record<string, any>) {	1✔
49	return this.syncItems(nextItems, state);	196✔
50	}
51	public update(state: Record<string, any> = {}) {	154✔
52	this._state = { ...this._state, ...state };	152✔
53	this.trigger("update", {	152✔
54	state,
55	});
56
57	clearTimeout(this._updateTimer);	152✔
58	this._updateTimer = window.setTimeout(() => {	152✔
59	this.trigger("requestUpdate", {	109✔
60	state,
61	});
62	});
63	}
64	public updated(nextElements: ArrayLike<Element> = this.container?.children ?? []) {	204!
65	const diffResult = this._diffResult;	199✔
66	const isChanged = !!(diffResult.added.length \|\| diffResult.removed.length \|\| diffResult.changed.length);	199✔
67	const state = this._state;	199✔
68	const isItemChanged = this._isItemChanged;	199✔
69	const nextItems = diffResult.list;	199✔
70
71
72	this._isItemChanged = false;	199✔
73	this._state = {};	199✔
74	this.items = nextItems;	199✔
75	nextItems.forEach((item, i) => {	199✔
76	item.element = nextElements[i];	1,148✔
77	});
78
79
80	this.trigger("updated", {	199✔
81	items: nextItems,
82	elements: toArray(nextElements),
83	diffResult: this._diffResult,
84	state,
85	isItemChanged,
86	isChanged,
87	});
88
89	return isChanged;	199✔
90	}
91	public syncItems(items: Item[], state: Record<string, any> = {}) {	401✔
92	const rendererKey = this.rendererKey;	201✔
93	const prevItems = this.items;	201✔
94	const nextItems = items.map((item) => ({	1,160✔
95	...item,
96	renderKey: `${rendererKey}_${item.key}`,
97	}));
98	const result = diff(prevItems, nextItems, (item) => item.renderKey!);	1,879✔
99
100	this._isItemChanged = !!result.added.length \|\| !!result.removed.length \|\| !!result.changed.length;	201✔
101	this._state = { ...this._state, ...state };	201✔
102	this._diffResult = result;	201✔
103
104	return result;	201✔
105	}
106	public destroy() {	1✔
107	this.off();	60✔
108	}
109	}	1✔

naver / egjs-infinitegrid / 3869242514

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