adding new test and committing old code

mmocny · Mar 7, 2024 · be16656 · be16656
1 parent 594bf86
commit be16656
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 21 deletions.
diff --git a/fps-meter/bak/main.mjs b/fps-meter/bak/main.mjs
@@ -1,5 +1,5 @@
-import { FpsTracker } from '../FpsTracker.mjs';
-import { CanvasFps } from '../CanvasFps.mjs';
+import { FpsTracker } from '../FpsTracker.js';
+import { CanvasFps } from './CanvasFps.js';
 import { ThreadLocalRAFIterator, SendPostMessageRAF } from '../AnimationFrameIterator.js';
 
 

diff --git a/fps-meter/fps-meter.js b/fps-meter/fps-meter.js
diff --git a/lib/raf.js b/lib/raf.js
diff --git a/lib/scheduling-utils.js b/lib/scheduling-utils.js
@@ -0,0 +1,64 @@
+export async function raf(signal) {
+	return new Promise((resolve, reject) => {
+		// TODO: Alternative: if signal.aborted reject(signal.reason)
+		signal?.throwIfAborted();
+
+		// TODO: is it needed to remove abort eventlistener after successful resolve?
+		const rafid = requestAnimationFrame(resolve);
+
+		signal?.addEventListener('abort', (ev) => {
+			cancelAnimationFrame(rafid);
+			// TODO: Is this useful?
+			reject(signal.reason);
+		}, { once: true });
+	});
+}
+
+export async function afterNextPaint() {
+	// TODO: experiment with scheduler.render() when available
+	await raf();
+	// TODO: polyfill as needed
+	await scheduler.yield();
+}
+
+export async function delay(ms) {
+	return new Promise(resolve => {
+		setTimeout(resolve, ms);
+	});
+}
+
+export function block(ms) {
+	const taget = performance.now() + ms;
+	while (performance.now() < taget);
+}
+
+export async function waitForEvent(target, eventName) {
+	return new Promise(resolve => {
+		target.addEventListener(eventName, resolve, { once: true });
+	});
+}
+
+export async function idleUntilBeforeRender(opts = {}) {
+	// Default to highest priority, but you may want to use background
+	opts = {
+		priority: 'user-blocking',
+		...opts,
+	};
+	return new Promise(resolve => {
+		const contoller = new AbortController();
+
+		const rafid = requestAnimationFrame(() => {
+			contoller.abort();
+			resolve();
+		});
+
+		const taskid = scheduler.postTask(() => {
+			cancelAnimationFrame(rafid);
+			resolve();
+		}, {
+			priority: 'user-blocking',
+			signal: contoller.signal,
+		});
+	});
+}
+
diff --git a/live-expressions/lib/once-per-pageload.js b/live-expressions/lib/once-per-pageload.js
@@ -1,4 +1,4 @@
-import sha256 from "./str-to-hash";
+import sha256 from "../../lib/str-to-hash";
 
 // This is mostly useful for DevTools live expressions
 export default function oncePerPageload(callback) {

diff --git a/live-expressions/web-mightals.js b/live-expressions/web-mightals.js
@@ -1,4 +1,4 @@
-import { webMightals$ } from '../web-mightals.js';
+import { webMightals$ } from '../sandbox/web-mightals.js/index.js';
 import oncePerPageload from "./lib/once-per-pageload.js";
 
 function main() {

diff --git a/sandbox/react-flushSync/hooks/useAbortSignallingTransition.js b/sandbox/react-flushSync/hooks/useAbortSignallingTransition.js
@@ -3,18 +3,22 @@ import useAwaitableTransition from "./useAwaitableTransition";
 
 export default function useAbortSignallingTransition() {
 	const [isPending, startAwaitableTransition] = useAwaitableTransition();
-	const abortController = useRef();
+	const abortController = useRef(new AbortController);
 
 	const startAbortSignallingTransition = useCallback(async (callback) => {
-		abortController.current = new AbortController;
+		let prevAC = abortController.current;
+		let nextAC = new AbortController();
+		abortController.current = nextAC;
 
 		try {
 			await startAwaitableTransition(callback);
 		} catch(ex) {
-			abortController.current.abort();
+			// abortController.current has already been updated by the time we catch,
+			// so use the previously saved `prevAC` value
+			prevAC.abort();
 			// throw ex;
 		}
 	}, [startAwaitableTransition]);
 
-	return [isPending, startAbortSignallingTransition, abortController.signal];
+	return [isPending, startAbortSignallingTransition, abortController.current.signal];
 };
diff --git a/sandbox/soft-nav-test-dom-edit-append-tree/index.html b/sandbox/soft-nav-test-dom-edit-append-tree/index.html
@@ -0,0 +1,55 @@
+
+<body>
+	<button id="dom_mod">Dom Mod</button>
+	<button id="inner_html">Inner HTML</button>
+	<button id="clone_template">Clone Template</button>
+	<button id="detached_doc">Detached Doc</button>
+	<main id="main">Content</main>
+</body>
+
+<script type="module">
+
+function update_dom_mod(target) {
+	const content = document.createElement('div');
+	target.replaceChildren(content);
+	content.textContent = 'Hi ';
+	const table = document.createElement('table');
+	content.appendChild(table);
+	const tr = document.createElement('tr');
+	table.appendChild(tr);
+	const td = document.createElement('td');
+	tr.appendChild(td);
+	td.textContent = 'DOM MOD';
+}
+
+function update_inner_html(target) {
+	target.innerHTML = '<div>Hi <table><tr><td>INNER HTML</td></tr></table></div>';
+}
+
+function update_clone_template(target) {
+	const template = document.createElement('template');
+	template.innerHTML = '<div>Hi <table><tr><td>CLONE TEMPLATE</td></tr></table></div>';
+	const content = template.content.cloneNode(true);
+	target.replaceChildren(content);
+}
+
+function update_detached_doc(target) {
+	const doc = document.implementation.createHTMLDocument('');
+	doc.open();
+	doc.write('<div>Hi <table><tr><td>DETACHED DOC</td></tr></table></div>');
+	const content = doc.body.firstChild;
+	target.replaceChildren(content);
+}
+
+dom_mod.addEventListener('click', event => update_dom_mod(main));
+inner_html.addEventListener('click', event => update_inner_html(main));
+clone_template.addEventListener('click', event => update_clone_template(main));
+detached_doc.addEventListener('click', event => update_detached_doc(main));
+
+document.addEventListener('click', event => {
+	setTimeout(() => {
+		history.pushState(null, '', event.target.id);
+	}, 1000);
+})
+
+</script>
diff --git a/.../apps/web-vitals.js-experiment/index.html → sandbox/web-vitals.js-experiment/index.html b/.../apps/web-vitals.js-experiment/index.html → sandbox/web-vitals.js-experiment/index.html
diff --git a/...js/apps/web-vitals.js-experiment/index.js → sandbox/web-vitals.js-experiment/index.js b/...js/apps/web-vitals.js-experiment/index.js → sandbox/web-vitals.js-experiment/index.js