Defer render to requestAnimationFrame() to avoid unnecessary rerenders

index.js

@@ -71,6 +71,11 @@ export default function(opts) {
 					this.shadowRoot.appendChild(link);
 				}
 			}
+
+			// Pending render in requestAnimationFrame(). Useful since there's no point in rendering more than once prior to
+			// paint if we can help it. This is particularly useful when nesting (which triggers connects/disconnects) or
+			// during early execution while parsing (i.e. via iife/umd) which will have mutations.
+			this.renderQueue = false;
 		}
 
 		/**
@@ -198,7 +203,28 @@ export default function(opts) {
 		 * of how it depends on current internal state and how it alters internal state. Be sure to study how it's called
 		 * before calling it yourself externally. 🔥🐉
 		 */
-		_renderSvelteComponent() {
+		_renderSvelteComponent(force = false) {
+			if (!force) {
+				if (this.renderQueue) {
+					this._debug('renderSvelteComponent(): Skipping, already queued for update...');
+					return;
+				} else {
+					this._debug('renderSvelteComponent(): Queueing for update.');
+					this.renderQueue = true;
+					requestAnimationFrame(() => {
+						this._renderSvelteComponent(true);
+					});
+					return;
+				}
+			}
+
+			if (!this.isConnected) {
+				this._debug('renderSvelteComponent(): Bailing: No longer connected.');
+				return;
+			}
+
+			this.renderQueue = false;
+
 			this._debug('renderSvelteComponent()');
 
 			// Fetch the latest set of available slot elements to use in the render. For light DOM, this must be done prior

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-retag",
-  "version": "1.0.2",
+  "version": "1.1.0-alpha.1",
   "description": "Light DOM custom element wrapper for Svelte 3 with Vite HMR support",
   "main": "index.js",
   "scripts": {

tests/Simple.iife.test.js

@@ -1,4 +1,4 @@
-import { describe, beforeAll, afterEach, test, expect } from 'vitest';
+import { describe, beforeAll, beforeEach, afterEach, test, expect, vi } from 'vitest';
 import Simple from './Simple.svelte';
 import svelteRetag from '../index';
 import { setReadyState } from './test-utils.js';
@@ -13,10 +13,16 @@ describe('IIFE: Early execution tests (light DOM only)', () => {
 		svelteRetag({ component: Simple, tagname: 'simple-tag', shadow: false, debugMode });
 	});
 
+	beforeEach(() => {
+		vi.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
+	});
+
 	afterEach(() => {
 		if (el) {
 			el.remove();
 		}
+
+		window.requestAnimationFrame.mockRestore();
 	});
 
 	// When render is loading: Test to validate that newly added slots affect rendered component content

tests/Simple.light-dom-whitespace.test.js

@@ -1,4 +1,4 @@
-import { describe, beforeAll, afterEach, test, expect } from 'vitest';
+import { describe, beforeAll, beforeEach, afterEach, test, expect, vi } from 'vitest';
 import Simple from './Simple.svelte';
 import svelteRetag from '../index';
 import { normalizeWhitespace } from './test-utils.js';
@@ -12,10 +12,16 @@ describe('<simple-tag> (Light DOM)', () => {
 		svelteRetag({ component: Simple, tagname: 'simple-tag', shadow: false, debugMode });
 	});
 
+	beforeEach(() => {
+		vi.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
+	});
+
 	afterEach(() => {
 		if (el) {
 			el.remove();
 		}
+
+		window.requestAnimationFrame.mockRestore();
 	});
 
 	const unmodifiedOutput = '<simple-tag><svelte-retag>Initial 1 Initial Initial 2<!--<Simple>--></svelte-retag></simple-tag>';

tests/TestAttributes.test.js

@@ -1,4 +1,4 @@
-import { describe, beforeAll, afterEach, test, expect } from 'vitest';
+import { describe, beforeAll, beforeEach, afterEach, test, expect, vi } from 'vitest';
 import TestAttributes from './TestAttributes.svelte';
 import svelteRetag from '../index';
 import { normalizeWhitespace } from './test-utils.js';
@@ -10,10 +10,16 @@ describe('Test custom element attributes', () => {
 		svelteRetag({ component: TestAttributes, tagname: 'test-attribs', shadow: false });
 	});
 
+	beforeEach(() => {
+		vi.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
+	});
+
 	afterEach(() => {
 		if (el) {
 			el.remove();
 		}
+
+		window.requestAnimationFrame.mockRestore();
 	});
 
 	let allSetOutput = `

tests/TestTag.light-dom.test.js

@@ -1,4 +1,4 @@
-import { describe, beforeAll, afterEach, test, expect } from 'vitest';
+import { describe, beforeAll, beforeEach, afterEach, test, expect, vi } from 'vitest';
 import TestTag from './TestTag.svelte';
 import svelteRetag from '../index';
 import { normalizeWhitespace } from './test-utils.js';
@@ -15,8 +15,14 @@ describe('<test-tag> (Light DOM)', () => {
 		svelteRetag({ component: TestTag, tagname: 'test-tag', shadow: false });
 	});
 
+	beforeEach(() => {
+		vi.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
+	});
+
 	afterEach(() => {
 		el.remove();
+
+		window.requestAnimationFrame.mockRestore();
 	});
 
 	test('without slots', async () => {

tests/TestTag.shadow-dom.test.js

@@ -1,4 +1,4 @@
-import { beforeAll, describe, expect, test } from 'vitest';
+import { afterEach, beforeAll, beforeEach, describe, expect, test, vi } from 'vitest';
 import svelteRetag from '../index.js';
 import TestTag from './TestTag.svelte';
 import { tick } from 'svelte';
@@ -15,6 +15,16 @@ describe('<test-tag> (Shadow DOM)', () => {
 		svelteRetag({ component: TestTag, tagname: 'test-shad', shadow: true });
 	});
 
+	beforeEach(() => {
+		vi.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
+	});
+
+	afterEach(() => {
+		el.remove();
+
+		window.requestAnimationFrame.mockRestore();
+	});
+
 	test('without slots', () => {
 		el = document.createElement('div');
 		el.innerHTML = '<test-shad></test-shad>';