Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the ArrayObserver to better account for sort and reverse #7062

Merged
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "Update the ArrayObserver to better account for sort and reverse",
"packageName": "@microsoft/fast-element",
"email": "[email protected]",
"dependentChangeType": "none"
}
20 changes: 19 additions & 1 deletion packages/web-components/fast-element/docs/api-report.api.md
Original file line number Diff line number Diff line change
@@ -19,15 +19,18 @@ export type AddViewBehaviorFactory = (factory: ViewBehaviorFactory) => string;

// @public
export interface ArrayObserver extends SubscriberSet {
addSort(sort: Sort): void;
addSplice(splice: Splice): void;
flush(): void;
readonly lengthObserver: LengthObserver;
reset(oldCollection: any[] | undefined): void;
readonly sortObserver: SortObserver;
strategy: SpliceStrategy | null;
}

// @public
export const ArrayObserver: Readonly<{
readonly sorted: 0;
readonly enable: () => void;
}>;

@@ -774,7 +777,7 @@ export function repeat<TSource = any, TArray extends ReadonlyArray<any> = Readon
export class RepeatBehavior<TSource = any> implements ViewBehavior, Subscriber {
constructor(directive: RepeatDirective);
bind(controller: ViewController): void;
handleChange(source: any, args: Splice[] | ExpressionObserver): void;
handleChange(source: any, args: Splice[] | Sort[] | ExpressionObserver): void;
unbind(): void;
// @internal (undocumented)
views: SyntheticView[];
@@ -822,6 +825,21 @@ export class SlottedDirective extends NodeObservationDirective<SlottedDirectiveO
export interface SlottedDirectiveOptions<T = any> extends NodeBehaviorOptions<T>, AssignedNodesOptions {
}

// @public
export class Sort {
constructor(sorted?: number[] | undefined);
// (undocumented)
sorted?: number[] | undefined;
}

// @public
export function sortedCount<T>(array: readonly T[]): number;

// @public
export interface SortObserver extends Subscriber {
sorted: number;
}

// @public
export const SourceLifetime: Readonly<{
readonly unknown: undefined;
2 changes: 1 addition & 1 deletion packages/web-components/fast-element/src/debug.ts
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ const FAST: FASTGlobal = globalThis.FAST;

const debugMessages = {
[1101 /* needsArrayObservation */]:
"Must call enableArrayObservation before observing arrays.",
"Must call ArrayObserver.enable() before observing arrays.",
[1201 /* onlySetDOMPolicyOnce */]: "The DOM Policy can only be set once.",
[1202 /* bindingInnerHTMLRequiresTrustedTypes */]:
"To bind innerHTML, you must use a TrustedTypesPolicy.",
3 changes: 3 additions & 0 deletions packages/web-components/fast-element/src/index.ts
Original file line number Diff line number Diff line change
@@ -39,6 +39,9 @@ export {
Splice,
SpliceStrategy,
SpliceStrategySupport,
Sort,
SortObserver,
sortedCount,
} from "./observation/arrays.js";
export { UpdateQueue, Updates } from "./observation/update-queue.js";

Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { expect } from "chai";
import { Observable } from "./observable.js";
import { ArrayObserver, lengthOf, Splice } from "./arrays.js";
import { ArrayObserver, lengthOf, Splice, Sort } from "./arrays.js";
import { SubscriberSet } from "./notifier.js";
import { Updates } from "./update-queue.js";

@@ -146,7 +146,7 @@ describe("The ArrayObserver", () => {
expect(array).members([1, 2, 3, 4]);

const observer = Observable.getNotifier<ArrayObserver>(array);
let changeArgs: Splice[] | null = null;
let changeArgs: Sort[] | null = null;

observer.subscribe({
handleChange(array, args) {
@@ -160,18 +160,29 @@ describe("The ArrayObserver", () => {
await Updates.next();

expect(changeArgs).length(1);
expect(changeArgs![0].addedCount).equal(0);
expect(changeArgs![0].removed).members([]);
expect(changeArgs![0].index).equal(0);
expect(changeArgs![0].reset).equal(true);

Array.prototype.reverse.call(array);
expect(changeArgs![0].sorted).to.have.ordered.members(
[
3,
2,
1,
0
]
);
changeArgs = null;
array.reverse();
expect(array).members([1, 2, 3, 4]);

await Updates.next();

expect(changeArgs).length(1);
expect(changeArgs![0].addedCount).equal(0);
expect(changeArgs![0].removed).members([]);
expect(changeArgs![0].index).equal(0);
expect(changeArgs![0].reset).equal(true);
expect(changeArgs![0].sorted).to.have.ordered.members(
[
3,
2,
1,
0
]
);
});

it("observes shifts", async () => {
@@ -216,16 +227,17 @@ describe("The ArrayObserver", () => {

it("observes sorts", async () => {
ArrayObserver.enable();
let array = [1, 2, 3, 4];
let array = [1, 3, 2, 4];

array.sort((a, b) => b - a);
expect(array).members([4, 3, 2, 1]);

Array.prototype.sort.call(array, (a, b) => a - b);
expect(array).members([1, 2, 3, 4]);

array = [1, 3, 2, 4];
const observer = Observable.getNotifier<ArrayObserver>(array);
let changeArgs: Splice[] | null = null;
let changeArgs: Sort[] | null = null;

observer.subscribe({
handleChange(array, args) {
@@ -239,21 +251,14 @@ describe("The ArrayObserver", () => {
await Updates.next();

expect(changeArgs).length(1);
expect(changeArgs![0].addedCount).equal(0);
expect(changeArgs![0].removed).members([]);
expect(changeArgs![0].index).equal(0);
expect(changeArgs![0].reset).equal(true);

Array.prototype.sort.call(array, (a, b) => a - b);
expect(array).members([1, 2, 3, 4]);

await Updates.next();

expect(changeArgs).length(1);
expect(changeArgs![0].addedCount).equal(0);
expect(changeArgs![0].removed).members([]);
expect(changeArgs![0].index).equal(0);
expect(changeArgs![0].reset).equal(true);
expect(changeArgs![0].sorted).to.have.ordered.members(
[
3,
1,
2,
0
]
);
});

it("observes splices", async () => {
Loading