diff --git a/sandbox/all-event-types/index.html b/sandbox/all-event-types/index.html new file mode 100644 index 0000000..b1a97b6 --- /dev/null +++ b/sandbox/all-event-types/index.html @@ -0,0 +1,54 @@ + \ No newline at end of file diff --git a/sandbox/force-mutation-observers/index.js b/sandbox/force-mutation-observers/index.js index a94d04b..a53f2ec 100644 --- a/sandbox/force-mutation-observers/index.js +++ b/sandbox/force-mutation-observers/index.js @@ -19,17 +19,13 @@ async function prefetch() { } -function triggerMutationObserver(cb) { +function addMutationObserverAndModifyDOMToTriggerIt(cb) { const targetNode = document.createElement('div'); const observer = new MutationObserver(cb); - // for (const mutation of mutationList) { - // console.log('Mutation detected:', mutation.type); - // } observer.observe(targetNode, { childList: true }); const dummyNode = document.createElement('span'); targetNode.appendChild(dummyNode); - // targetNode.removeChild(dummyNode); } function a() { @@ -42,7 +38,7 @@ function b() { } function c() { block(BLOCK); - triggerMutationObserver(function afterMutation() { block(BLOCK); }); + addMutationObserverAndModifyDOMToTriggerIt(function afterMutation() { block(BLOCK); }); } async function dontAwaitFirstDoAwaitBetween() { a(); await 0; block(BLOCK); a(); } @@ -50,17 +46,17 @@ async function doAwaitFirstDoAwaitBetween() { a(); await 0; block(BLOCK); a(); } async function dontAwaitFirstDontAwaitBetween() { a(); block(BLOCK); a(); } async function doAwaitFirstDontAwaitBetween() { await 0; a(); block(BLOCK); a(); } -scheduler.postTask(dontAwaitFirstDoAwaitBetween); -scheduler.postTask(doAwaitFirstDoAwaitBetween); -scheduler.postTask(dontAwaitFirstDontAwaitBetween); -scheduler.postTask(doAwaitFirstDontAwaitBetween); +// scheduler.postTask(dontAwaitFirstDoAwaitBetween); +// scheduler.postTask(doAwaitFirstDoAwaitBetween); +// scheduler.postTask(dontAwaitFirstDontAwaitBetween); +// scheduler.postTask(doAwaitFirstDontAwaitBetween); async function testFetch() { block(BLOCK); triggerSyncFetch(function afterFetch() { block(BLOCK); }); } -scheduler.postTask(testFetch); +// scheduler.postTask(testFetch); async function testPrefetch() { @@ -74,4 +70,35 @@ async function testPrefetch() { }); } -scheduler.postTask(testPrefetch); \ No newline at end of file +// scheduler.postTask(testPrefetch); + + + + +function updateColorTo(color) { + console.log(color); + document.body.style.backgroundColor = color; + block(BLOCK); +} + + +async function testMutationObserverAndYield() { + updateColorTo('red'); + + requestAnimationFrame(() => { + updateColorTo('green'); + }); + + addMutationObserverAndModifyDOMToTriggerIt((mutationList) => { + for (const mutation of mutationList) { + // console.log('Mutation detected:', mutation.type); + } + updateColorTo('blue'); + }); + + await scheduler.yield(); +} + +document.body.addEventListener('click', () => { + testMutationObserverAndYield(); +}); \ No newline at end of file diff --git a/sandbox/presentation-delay-marks-examples/index.html b/sandbox/presentation-delay-marks-examples/index.html index afe7601..32b982a 100644 --- a/sandbox/presentation-delay-marks-examples/index.html +++ b/sandbox/presentation-delay-marks-examples/index.html @@ -1,4 +1,17 @@ + + + + \ No newline at end of file diff --git a/sandbox/web-vitals.js-experiment/index.js b/sandbox/web-vitals.js-experiment/index.js index a279713..b77e42f 100644 --- a/sandbox/web-vitals.js-experiment/index.js +++ b/sandbox/web-vitals.js-experiment/index.js @@ -1,4 +1,4 @@ -import { onLCP, onINP, onCLS } from 'https://unpkg.com/web-vitals?module'; +import { onLCP, onINP, onCLS } from 'https://unpkg.com/web-vitals@next/attribution?module'; function reportWebVitals(url, result) { console.log(url, result);