Move documentReady to async utils

Author: LeaVerou

src/auto-start.ts

@@ -1,5 +1,6 @@
 import Prism from './global';
 import autoloader from './plugins/autoloader/prism-autoloader';
+import { documentReady } from './util/async';
 
 Prism.components.add(autoloader);
 
@@ -22,7 +23,6 @@ export const PrismConfig = {
 	 * ```
 	 *
 	 * @default false
-	 * @public
 	 */
 	manual: false,
 };
@@ -34,29 +34,11 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
 		PrismConfig.manual = true;
 	}
 
-	const highlightAutomaticallyCallback = () => {
+	void documentReady().then(() => {
 		if (!PrismConfig.manual) {
 			Prism.highlightAll();
 		}
-	};
-
-	// If the document state is "loading", then we'll use DOMContentLoaded.
-	// If the document state is "interactive" and the prism.js script is deferred, then we'll also use the
-	// DOMContentLoaded event because there might be some plugins or languages which have also been deferred and they
-	// might take longer one animation frame to execute which can create a race condition where only some plugins have
-	// been loaded when Prism.highlightAll() is executed, depending on how fast resources are loaded.
-	// See https://github.com/PrismJS/prism/issues/2102
-	// See https://github.com/PrismJS/prism/issues/3535
-	const readyState = document.readyState;
-	if (
-		readyState === 'loading' ||
-		(readyState === 'interactive' && script && script.defer && !script.async)
-	) {
-		document.addEventListener('DOMContentLoaded', highlightAutomaticallyCallback);
-	}
-	else {
-		window.requestAnimationFrame(highlightAutomaticallyCallback);
-	}
+	});
 }
 else {
 	PrismConfig.manual = true;

src/util/async.ts

@@ -0,0 +1,26 @@
+export function documentReady (document = globalThis.document) {
+	const script = document.currentScript as HTMLScriptElement | null;
+
+	if (!document) {
+		return Promise.reject();
+	}
+
+	// If the document state is "loading", then we'll use DOMContentLoaded.
+	// If the document state is "interactive" and the prism.js script is deferred, then we'll also use the
+	// DOMContentLoaded event because there might be some plugins or languages which have also been deferred and they
+	// might take longer one animation frame to execute which can create a race condition where only some plugins have
+	// been loaded when Prism.highlightAll() is executed, depending on how fast resources are loaded.
+	// See https://github.com/PrismJS/prism/issues/2102
+	// See https://github.com/PrismJS/prism/issues/3535
+	const readyState = document.readyState;
+	if (
+		readyState === 'loading' ||
+		(readyState === 'interactive' && script && script.defer && !script.async)
+	) {
+		return new Promise(resolve => {
+			document.addEventListener('DOMContentLoaded', resolve, { once: true });
+		});
+	}
+
+	return Promise.resolve();
+}