Morph within an animation frame

phlex-ruby · Mar 8, 2024 · 146300c · 146300c
1 parent f4b35b0
commit 146300c
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 2 deletions.
diff --git a/dist/morphlex.js b/dist/morphlex.js
diff --git a/src/morphlex.ts b/src/morphlex.ts
@@ -120,7 +120,9 @@ class Morph {
 			this.#mapSensivity(node);
 		}
 
-		this.#morphNode(node, reference);
+		requestAnimationFrame(() => {
+			this.#morphNode(node, reference);
+		});
 	}
 
 	#mapSensivity(node: ReadonlyNode<ParentNode>): void {

diff --git a/test/alpine-morph.test.js b/test/alpine-morph.test.js
@@ -1,5 +1,6 @@
 import { fixture, html, expect } from "@open-wc/testing";
 import { morph } from "../";
+import { nextFrame } from "./helpers";
 
 // adapted from: https://github.com/alpinejs/alpine/blob/891d68503960a39826e89f2f666d9b1e7ce3f0c9/tests/jest/morph/external.spec.js
 describe("alpine-morph", () => {
@@ -9,6 +10,8 @@ describe("alpine-morph", () => {
 
 		morph(a, b);
 
+		await nextFrame();
+
 		expect(a.outerHTML).to.equal(b.outerHTML);
 	});
 
@@ -18,6 +21,8 @@ describe("alpine-morph", () => {
 
 		morph(a, b);
 
+		await nextFrame();
+
 		expect(a.outerHTML).to.equal(b.outerHTML);
 	});
 
@@ -32,6 +37,8 @@ describe("alpine-morph", () => {
 
 		morph(a, b);
 
+		await nextFrame();
+
 		expect(a.outerHTML).to.equal(b.outerHTML);
 	});
 
@@ -46,6 +53,8 @@ describe("alpine-morph", () => {
 
 		morph(a, b);
 
+		await nextFrame();
+
 		expect(a.outerHTML).to.equal(b.outerHTML);
 	});
 
@@ -55,6 +64,8 @@ describe("alpine-morph", () => {
 
 		morph(a, b);
 
+		await nextFrame();
+
 		expect(a.outerHTML).to.equal(b.outerHTML);
 	});
 
@@ -64,6 +75,8 @@ describe("alpine-morph", () => {
 
 		morph(a, b);
 
+		await nextFrame();
+
 		expect(a.outerHTML).to.equal(b.outerHTML);
 	});
 
@@ -73,6 +86,8 @@ describe("alpine-morph", () => {
 
 		morph(a, b);
 
+		await nextFrame();
+
 		expect(a.outerHTML).to.equal(b.outerHTML);
 	});
 });
diff --git a/test/helpers.js b/test/helpers.js
@@ -0,0 +1,7 @@
+export function nextFrame() {
+	return new Promise((resolve) => {
+		requestAnimationFrame(() => {
+			resolve();
+		});
+	});
+}
diff --git a/test/morphdom.test.js b/test/morphdom.test.js
@@ -1,5 +1,6 @@
 import { fixture, html, expect } from "@open-wc/testing";
 import { morph } from "../";
+import { nextFrame } from "./helpers";
 
 // adapted from: https://github.com/patrick-steele-idem/morphdom/blob/e98d69e125cda814dd6d1ba71d6c7c9d93edc01e/test/browser/test.js
 describe("morphdom", () => {
@@ -8,6 +9,7 @@ describe("morphdom", () => {
 		const b = await fixture(html`<div class="bar"></div>`);
 
 		morph(a, b);
+		await nextFrame();
 
 		expect(a.outerHTML).to.equal(b.outerHTML);
 		expect(a.className).to.equal("bar");
@@ -23,6 +25,7 @@ describe("morphdom", () => {
 		const b = await fixture(html`<body></body>`);
 
 		morph(a, b);
+		await nextFrame();
 
 		expect(a.outerHTML).to.equal(b.outerHTML);
 		expect(a.nodeName).to.equal("BODY");
@@ -34,6 +37,7 @@ describe("morphdom", () => {
 		const b = await fixture(html`<div id="el-1" class="bar"><div id="el-1">B</div></div>`);
 
 		morph(a, b);
+		await nextFrame();
 
 		expect(a.outerHTML).to.equal(b.outerHTML);
 		expect(a.className).to.equal("bar");
@@ -47,6 +51,7 @@ describe("morphdom", () => {
 		const b = await fixture(html`<div id="el-1" class="zoo"><div id="el-inner">B</div></div>`);
 
 		morph(a, b);
+		await nextFrame();
 
 		expect(a.outerHTML).to.equal(b.outerHTML);
 		expect(a.className).to.equal("zoo");
@@ -67,6 +72,7 @@ describe("morphdom", () => {
 		const b = await fixture(html`<div><p id="hi" class="foo">A</p></div>`);
 
 		morph(a, b);
+		await nextFrame();
 
 		expect(a.outerHTML).to.equal(b.outerHTML);
 		expect(a.children.length).to.equal(2);
@@ -89,6 +95,7 @@ describe("morphdom", () => {
 		const b = await fixture(html`<div><h1 id="matching" class="baz">C</h1></div>`);
 
 		morph(a, b);
+		await nextFrame();
 
 		expect(a.outerHTML).to.equal(b.outerHTML);
 		expect(a.children.length).to.equal(1);
@@ -102,6 +109,7 @@ describe("morphdom", () => {
 		const b = await fixture(html`<input type="text" value="Hello World 2" />`);
 
 		morph(a, b);
+		await nextFrame();
 
 		expect(a.outerHTML).to.equal(b.outerHTML);
 		expect(a.value).to.equal("Hello World 2");
@@ -113,6 +121,7 @@ describe("morphdom", () => {
 		const b = await fixture(html`<input type="text" checked="" />`);
 
 		morph(a, b);
+		await nextFrame();
 
 		expect(a.outerHTML).to.equal(b.outerHTML);
 		expect(a.checked).to.equal(true);
@@ -126,6 +135,7 @@ describe("morphdom", () => {
 		b.checked = true;
 
 		morph(a, b);
+		await nextFrame();
 
 		expect(a.outerHTML).to.equal(b.outerHTML);
 		expect(a.checked).to.equal(true);

diff --git a/test/morphlex.test.js b/test/morphlex.test.js
@@ -1,5 +1,6 @@
 import { fixture, html, expect } from "@open-wc/testing";
 import { morph } from "../";
+import { nextFrame } from "./helpers";
 
 describe("morph", () => {
 	it("doesn't cause iframes to reload", async () => {
@@ -19,6 +20,9 @@ describe("morph", () => {
 
 		const originalIframe = original.querySelector("iframe");
 		morph(original, reference);
+
+		await nextFrame();
+
 		expect(original.outerHTML).to.equal(reference.outerHTML);
 	});
 
@@ -34,6 +38,8 @@ describe("morph", () => {
 
 		morph(original, eventual);
 
+		await nextFrame();
+
 		expect(original.textContent).to.equal("Hello Joel");
 	});
 
@@ -47,6 +53,8 @@ describe("morph", () => {
 
 		morph(a, b);
 
+		await nextFrame();
+
 		expect(a.textContent).to.equal(b.textContent);
 	});
 
@@ -56,6 +64,8 @@ describe("morph", () => {
 
 		morph(a, b);
 
+		await nextFrame();
+
 		expect(a.outerHTML).to.equal(b.outerHTML);
 	});
 });