Skip to content

Commit

Permalink
refactor(dom-queue): merge dom read and write queues (#1970)
Browse files Browse the repository at this point in the history 
[skip ci]

BREAKING CHANGE: platform.domWriteQueue and platform.domReadQueue now point to platform.domQueue
  • Loading branch information
@bigopon
bigopon committed May 15, 2024
1 parent f8ed38d commit 3a63cde
Show file tree
Hide file tree
Showing 94 changed files with 669 additions and 693 deletions.
3 changes: 1 addition & 2 deletions docs/user-docs/developer-guides/cheat-sheet.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -769,8 +769,7 @@ export class MyComponent {
// Await all pending tasks, sync or async (useful in unit, integration and e2e tests or generally figuring out when the app is "idle")
await Promise.all([
PLATFORM.taskQueue.yield(),
PLATFORM.domReadQueue.yield(),
PLATFORM.domWriteQueue.yield(),
platform.domQueue.yield(),
]);
```

Expand Down
4 changes: 2 additions & 2 deletions docs/user-docs/getting-to-know-aurelia/task-queue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ For tasks that need to synchronize with the browser's repaint, `domWriteQueue` i
```typescript
import { PLATFORM } from 'aurelia';

PLATFORM.domWriteQueue.queueTask(() => {
platform.domQueue.queueTask(() => {
// Update styles or DOM
applyStyles();
});
Expand All @@ -102,7 +102,7 @@ For continuous animations, the TaskQueue can be used to create a loop, similar t
```typescript
import { PLATFORM } from 'aurelia';

const task = PLATFORM.domWriteQueue.queueTask(() => {
const task = platform.domQueue.queueTask(() => {
// Update animation properties in each frame
updateAnimationProps();
}, { persistent: true });
Expand Down
2 changes: 1 addition & 1 deletion examples/1kcomponents/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ const App = CustomElement.define(
attaching() {
this.count = 2700;
// this.scheduler.enqueueRAF(Point.update, Point, Priority.preempt);
this.platform.domWriteQueue.queueTask(
this.platform.domQueue.queueTask(
() => {
Point.update();
this.points.forEach(point => point.flushRAF());
Expand Down
2 changes: 1 addition & 1 deletion examples/realworld-advanced/e2e/auth.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ describe('register', function () {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const p = (document.querySelector('app-root') as INode).$au!['au:resource:custom-element']!.container.get(IPlatform);
await p.taskQueue.yield();
await p.domWriteQueue.yield();
await p.domQueue.yield();
});
}

Expand Down
2 changes: 1 addition & 1 deletion examples/realworld/e2e/auth.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ describe('register', function () {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const p = (document.querySelector('app-root') as INode).$au!['au:resource:custom-element']!.container.get(IPlatform);
await p.taskQueue.yield();
await p.domWriteQueue.yield();
await p.domQueue.yield();
});
}

Expand Down
2 changes: 1 addition & 1 deletion packages-tooling/rollup-utils.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export function getRollupConfig(pkg, configure = identity) {
input: inputFile,
external: Object.keys(pkg.dependencies ?? {})
.concat(Object.keys(pkg.devDependencies ?? {}))
.concat('os', 'path', 'fs', 'http', 'https', 'http2', 'url', 'stream')
.concat('os', 'path', 'fs', 'http', 'https', 'http2', 'url', 'stream', 'module')
.concat('node:module', 'node:path'),
output: [
{
Expand Down
2 changes: 1 addition & 1 deletion packages/__tests__/src/2-runtime/ast.integration.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ describe('2-runtime/ast.integration.spec.ts', function () {
{ state: 0 },
container,
observerLocator,
container.get(IPlatform).domWriteQueue,
container.get(IPlatform).domQueue,
conditionalExpr,
target,
'value',
Expand Down
4 changes: 2 additions & 2 deletions packages/__tests__/src/2-runtime/scheduler.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ describe('2-runtime/scheduler.spec.ts', function () {

const prioritySpecs = [
{
sut: platform.domWriteQueue,
sut: platform.domQueue,
name: 'domWriteQueue',
},
{
Expand All @@ -87,7 +87,7 @@ describe('2-runtime/scheduler.spec.ts', function () {
name: 'domReadQueue',
},
{
sut: platform.domWriteQueue,
sut: platform.domQueue,
name: 'domWriteQueue',
},
{
Expand Down
6 changes: 3 additions & 3 deletions packages/__tests__/src/3-runtime-html/array-index-observer.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ describe('3-runtime-html/array-index-observer.spec.ts', function () {
assert.strictEqual(inputEl.checked, false);

component.itemNames.splice(0, 1, true as any);
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.strictEqual(inputEl.checked, true, 'should have been checked');

inputEl.checked = false;
Expand Down Expand Up @@ -115,7 +115,7 @@ describe('3-runtime-html/array-index-observer.spec.ts', function () {

component.itemNames.splice(0, 1, 'i-2');
assert.strictEqual(selectEl.value, 'i-1');
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.strictEqual(selectEl.value, 'i-2');
}
},
Expand Down Expand Up @@ -161,7 +161,7 @@ describe('3-runtime-html/array-index-observer.spec.ts', function () {

component.itemNames.splice(0, 1, '00');
assert.html.textContent(host, 'i-0', `#3`);
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.html.textContent(host, '00', `#4`);
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/__tests__/src/3-runtime-html/attr-syntax-extension.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ describe('3-runtime-html/attr-syntax-extension.spec.ts', function () {

component.option = '3';
assert.strictEqual(selectEl.value, '2');
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.strictEqual(selectEl.value, '3');

await tearDown();
Expand Down
26 changes: 13 additions & 13 deletions packages/__tests__/src/3-runtime-html/au-compose.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ describe('3-runtime-html/au-compose.spec.ts', function () {
component.message = 'hello';

assert.strictEqual(appHost.textContent, 'hello');
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.strictEqual(appHost.textContent, 'hello');

await tearDown();
Expand All @@ -69,7 +69,7 @@ describe('3-runtime-html/au-compose.spec.ts', function () {
component.message = 'hello';

assert.strictEqual(appHost.textContent, 'hello world');
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.strictEqual(appHost.textContent, 'hello');

await tearDown();
Expand All @@ -93,12 +93,12 @@ describe('3-runtime-html/au-compose.spec.ts', function () {
component.message = 'hello';

assert.strictEqual(appHost.textContent, '');
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.strictEqual(appHost.textContent, '');

component.composition.controller.scope.bindingContext['message'] = 'hello';
assert.strictEqual(appHost.textContent, '');
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.strictEqual(appHost.textContent, 'hello');

await tearDown();
Expand Down Expand Up @@ -126,12 +126,12 @@ describe('3-runtime-html/au-compose.spec.ts', function () {
component.message = 'hello';

assert.strictEqual(appHost.textContent, '');
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.strictEqual(appHost.textContent, '');

component.composition.controller.scope.bindingContext['message'] = 'hello';
assert.strictEqual(appHost.textContent, '');
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.strictEqual(appHost.textContent, 'hello');

await tearDown();
Expand Down Expand Up @@ -304,7 +304,7 @@ describe('3-runtime-html/au-compose.spec.ts', function () {
models1.push(model);
component.model = model;

ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.strictEqual(constructorCallCount, 1);
assert.strictEqual(models2.length, 2);
assert.deepStrictEqual(models1, models2);
Expand Down Expand Up @@ -469,7 +469,7 @@ describe('3-runtime-html/au-compose.spec.ts', function () {
assert.strictEqual(child.node, childElHost);

component.El = Parent;
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.visibleTextEqual(appHost, 'Hello world from Parent');
assert.html.innerEqual(appHost, '<parent><div>Hello world from Parent</div></parent>');
const parentElHost = appHost.querySelector('parent');
Expand Down Expand Up @@ -664,7 +664,7 @@ describe('3-runtime-html/au-compose.spec.ts', function () {
assert.html.innerEqual(appHost, '<child><div>Hello world from Child</div></child>');

component.El = Parent;
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.visibleTextEqual(appHost, 'Hello world from Parent');
assert.html.innerEqual(appHost, '<parent><div>Hello world from Parent</div></parent>');

Expand Down Expand Up @@ -699,17 +699,17 @@ describe('3-runtime-html/au-compose.spec.ts', function () {
assert.html.innerEqual(appHost, '<div>Hello world from POJO</div>');

component.El = Parent;
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.visibleTextEqual(appHost, 'Hello world from Parent');
assert.html.innerEqual(appHost, '<parent><div>Hello world from Parent</div></parent>');

component.El = { message: 'POJO2' };
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.visibleTextEqual(appHost, 'Hello world from POJO2');
assert.html.innerEqual(appHost, '<div>Hello world from POJO2</div>');

component.El = Child;
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.visibleTextEqual(appHost, 'Hello world from Child');
assert.strictEqual(appHost.innerHTML, '<!--au-start--><child><div>Hello world from Child</div></child><!--au-end-->');

Expand All @@ -730,7 +730,7 @@ describe('3-runtime-html/au-compose.spec.ts', function () {

component.El = { text: 'Hello 22' };
component.El = { text: 'Hello 33' };
ctx.platform.domWriteQueue.flush();
ctx.platform.domQueue.flush();
assert.visibleTextEqual(appHost, 'Hello 33');
assert.html.innerEqual(appHost, '<div>Hello 33</div>');
});
Expand Down
36 changes: 18 additions & 18 deletions packages/__tests__/src/3-runtime-html/au-slot.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
const vm: MyElement = CustomElement.for<MyElement>(el).viewModel;

vm.showS1 = true;
platform.domWriteQueue.flush();
platform.domQueue.flush();

assert.html.innerEqual(el, `static default <div>p11</div><div>p12</div> <div>p20</div><div>p21</div>`, 'my-element.innerHTML');
},
Expand Down Expand Up @@ -286,7 +286,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {

vm1.showS1 = !vm1.showS1;
vm2.showS1 = !vm2.showS1;
platform.domWriteQueue.flush();
platform.domQueue.flush();

assert.html.innerEqual(el1, `static default <div>p11</div>`, 'my-element.innerHTML');
assert.html.innerEqual(el2, `static default <div>p22</div>`, 'my-element+my-element.innerHTML');
Expand Down Expand Up @@ -469,7 +469,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
{ 'my-element': [`<h4>First Name</h4><h4>Last Name</h4> <div>John</div><div>Doe</div> <div>Max</div><div>Mustermann</div>`, new AuSlotsInfo([])] },
async function ({ app, host, platform }) {
app.people.push(new Person('Jane', 'Doe', []));
platform.domWriteQueue.flush();
platform.domQueue.flush();
assert.html.innerEqual(
'my-element',
`<h4>First Name</h4><h4>Last Name</h4> <div>John</div><div>Doe</div> <div>Max</div><div>Mustermann</div> <div>Jane</div><div>Doe</div>`,
Expand Down Expand Up @@ -1568,7 +1568,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
assert.contains(tab3.classList, 'active');

tab2.click();
platform.domWriteQueue.flush();
platform.domQueue.flush();
assert.notContains(tab1.classList, 'active');
assert.contains(tab2.classList, 'active');
assert.contains(tab3.classList, 'active');
Expand Down Expand Up @@ -1599,7 +1599,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
assert.strictEqual(input.value, "foo");

vm.foo = "bar";
platform.domWriteQueue.flush();
platform.domQueue.flush();
assert.strictEqual(input.value, "bar");
}
);
Expand All @@ -1617,7 +1617,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
assert.strictEqual(input.value, app.people[0].firstName);

app.people[0].firstName = "Jane";
platform.domWriteQueue.flush();
platform.domQueue.flush();
assert.strictEqual(input.value, "Jane");
}
);
Expand All @@ -1638,7 +1638,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
[MyElementUser, createMyElement('<au-slot></au-slot>')],
{},
async function ({ host, platform }) {
platform.domWriteQueue.flush();
platform.domQueue.flush();
const meu = host.querySelector('my-element-user');
const me = host.querySelector('my-element');
assert.html.innerEqual(meu, `<my-element><div>${fooValue}</div></my-element>`, 'my-element-user.innerHtml');
Expand Down Expand Up @@ -1670,7 +1670,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
[MyElementUser, MyElement],
{},
async function ({ host, platform }) {
platform.domWriteQueue.flush();
platform.domQueue.flush();
const meu = host.querySelector('my-element-user');
const me = host.querySelector('my-element');
assert.html.innerEqual(meu, `<my-element><div>${fooValue}</div></my-element>`, 'my-element-user.innerHtml');
Expand Down Expand Up @@ -1806,7 +1806,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
const input = host.querySelector('input');
input.value = 'hello';
input.dispatchEvent(new platform.CustomEvent('change'));
platform.domWriteQueue.flush();
platform.domQueue.flush();
assert.strictEqual(host.querySelector('div').textContent, 'hello');
}
);
Expand All @@ -1822,7 +1822,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
const input = host.querySelector('input');
input.value = 'hello';
input.dispatchEvent(new platform.CustomEvent('change'));
platform.domWriteQueue.flush();
platform.domQueue.flush();
assert.strictEqual(host.querySelector('my-element').textContent, 'hello');
}
);
Expand All @@ -1843,7 +1843,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
},
function ({ host, platform }) {
host.querySelector<HTMLElement>('mdc-tab').click();
platform.domWriteQueue.flush();
platform.domQueue.flush();
assert.html.innerEqual(host.querySelector('mdc-tab'), '<button>1Tab</button>');
}
);
Expand Down Expand Up @@ -1877,12 +1877,12 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
},
function ({ host, platform }) {
host.querySelector<HTMLElement>('#mdc-0').click();
platform.domWriteQueue.flush();
platform.domQueue.flush();
assert.html.innerEqual(host.querySelector('#mdc-0'), '<button>1Tab</button>');
assert.html.innerEqual(host.querySelector('#mdc-1'), '<button>0Tab</button>');

host.querySelector<HTMLElement>('#mdc-1').click();
platform.domWriteQueue.flush();
platform.domQueue.flush();
assert.html.innerEqual(host.querySelector('#mdc-0'), '<button>1Tab</button>');
assert.html.innerEqual(host.querySelector('#mdc-1'), '<button>1Tab</button>');
},
Expand Down Expand Up @@ -1922,7 +1922,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
const [tab00, tab01, tab02, tab10, tab11, tab12] = Array.from(host.querySelectorAll<HTMLElement>('mdc-tab'));

tab00.click();
platform.domWriteQueue.flush();
platform.domQueue.flush();
assert.html.innerEqual(tab00, '<button>1Tab</button>');
assert.html.innerEqual(tab01, '<button>2Tab</button>');
assert.html.innerEqual(tab02, '<button>3Tab</button>');
Expand All @@ -1931,7 +1931,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
assert.html.innerEqual(tab12, '<button>2Tab</button>');

tab10.click();
platform.domWriteQueue.flush();
platform.domQueue.flush();
assert.html.innerEqual(tab00, '<button>1Tab</button>');
assert.html.innerEqual(tab01, '<button>2Tab</button>');
assert.html.innerEqual(tab02, '<button>3Tab</button>');
Expand Down Expand Up @@ -2018,7 +2018,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
const ce = host.querySelector('my-element');
const button = ce.querySelector('button');
button.click();
platform.domWriteQueue.flush();
platform.domQueue.flush();
assert.equal(CustomElement.for<MyElement>(ce).viewModel.callCount, 1);
assert.equal(app.callCount, 0);
},
Expand All @@ -2029,7 +2029,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
const ce = host.querySelector('my-element');
const button = ce.querySelector('button');
button.click();
platform.domWriteQueue.flush();
platform.domQueue.flush();
assert.equal(CustomElement.for<MyElement>(ce).viewModel.callCount, 1);
assert.equal(app.callCount, 0);
},
Expand All @@ -2040,7 +2040,7 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
const ce = host.querySelector('my-element');
const button = ce.querySelector('button');
button.click();
platform.domWriteQueue.flush();
platform.domQueue.flush();
assert.equal(CustomElement.for<MyElement>(ce).viewModel.callCount, 0);
assert.equal(app.callCount, 1);
},
Expand Down
Loading

0 comments on commit 3a63cde

Please sign in to comment.