commit staged work

sandbox/all-event-types/index.html

@@ -0,0 +1,54 @@
+<script type="module">
+const EVENTS = [
+  "keydown",
+  "keyup",
+  "keypress",
+//   "pointerdown",
+//   "pointerup",
+  "pointercancel",
+  "touchstart",
+  "touchend",
+  "touchcancel",
+//   "mousedown",
+//   "mouseup",
+  "gotpointercapture",
+  "lostpointercapture",
+//   "click",
+  "dblclick",
+  "auxclick",
+  "contextmenu",
+  "pointerleave",
+  "pointerout",
+  "pointerover",
+  "pointerenter",
+  "mouseout",
+  "mouseover",
+  "mouseleave",
+  "mouseenter",
+  "lostpointercapture",
+  "dragstart",
+  "dragend",
+  "dragenter",
+  "dragleave",
+  "dragover",
+  "drop",
+  "beforeinput",
+  "input",
+  "compositionstart",
+  "compositionupdate",
+  "compositionend",
+];
+
+function block(ms) {
+	const target = performance.now() + ms;
+	while(performance.now() < target);
+}
+
+EVENTS.forEach(type => {
+	document.addEventListener(type, e => {
+		console.log(`Event type: ${type}`);
+		block(20);
+	});
+});
+
+</script>

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,25 +38,25 @@ 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(); }
 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);
+// 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();
+});

sandbox/presentation-delay-marks-examples/index.html

@@ -1,4 +1,17 @@
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<style>
+button:active {
+	background-color: red;
+}
+</style>
+
 <script type="module">
+import { onLCP, onINP, onCLS } from 'https://unpkg.com/web-vitals@next/attribution?module';
+onINP((metric) => {
+	console.log('web-vitals.js@next', metric.value, metric.attribution);
+}, { reportAllChanges: true });
+
 function block(ms) {
 	const target = performance.now() + ms;
 	while(performance.now() < target);
@@ -15,20 +28,35 @@
 
 
 function updateUI() {
-	console.log('Button clicked');
+	console.log('Update UI');
+	// Just block enough to trigger Event Timing
+	block(20);
 }
 
 function updateExpensiveAnalytics() {
 	console.log('Update expensive analytics');
 	block(1000);
 }
 
-document.getElementById('myButton').addEventListener('click', async () => {
+function startPrerender() {
+	console.log('Start prerender');
+	block(1000);
+}
+
+const button = document.getElementById('myButton');
+
+button.addEventListener('click', async () => {
 	updateUI();
 	await scheduler.yield();
 	updateExpensiveAnalytics()
 });
 
+// button.addEventListener('pointerenter', async () => {
+// 	updateUI();
+// 	await scheduler.yield();
+// 	startPrerender();
+// });
+
 </script>
 
 <button id="myButton">Click me</button>

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);