Moves embed-optimizer-lazy-load script to js file

WordPress · Oct 17, 2024 · 6bc9408 · 6bc9408
1 parent ecceec8
commit 6bc9408
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 36 deletions.
diff --git a/plugins/embed-optimizer/embed-optimizer-lazy-load.js b/plugins/embed-optimizer/embed-optimizer-lazy-load.js
@@ -0,0 +1,52 @@
+/**
+ * Lazy load embeds
+ *
+ * When an embed block is lazy loaded, the script tag is replaced with a script tag that has the original attributes
+ */
+
+const lazyEmbedsScripts = document.querySelectorAll(
+ 'script[type="application/vnd.embed-optimizer.javascript"]'
+);
+const lazyEmbedScriptsByParents = new Map();
+
+const lazyEmbedObserver = new IntersectionObserver(
+ ( entries ) => {
+ for ( const entry of entries ) {
+ if ( entry.isIntersecting ) {
+ const lazyEmbedParent = entry.target;
+ const lazyEmbedScript =
+ /** @type {HTMLScriptElement} */ lazyEmbedScriptsByParents.get(
+ lazyEmbedParent
+ );
+ const embedScript = document.createElement( 'script' );
+ for ( const attr of lazyEmbedScript.attributes ) {
+ if ( attr.nodeName === 'type' ) {
+ // Omit type=application/vnd.embed-optimizer.javascript type.
+ continue;
+ }
+ embedScript.setAttribute(
+ attr.nodeName === 'data-original-type'
+ ? 'type'
+ : attr.nodeName,
+ attr.nodeValue
+ );
+ }
+ lazyEmbedScript.replaceWith( embedScript );
+ lazyEmbedObserver.unobserve( lazyEmbedParent );
+ }
+ }
+ },
+ {
+ rootMargin: '100% 0% 100% 0%',
+ threshold: 0,
+ }
+);
+
+for ( const lazyEmbedScript of lazyEmbedsScripts ) {
+ const lazyEmbedParent =
+ /** @type {HTMLElement} */ lazyEmbedScript.parentNode;
+ if ( lazyEmbedParent instanceof HTMLElement ) {
+ lazyEmbedScriptsByParents.set( lazyEmbedParent, lazyEmbedScript );
+ lazyEmbedObserver.observe( lazyEmbedParent );
+ }
+}
diff --git a/plugins/embed-optimizer/hooks.php b/plugins/embed-optimizer/hooks.php
@@ -325,44 +325,13 @@ function embed_optimizer_lazy_load_scripts(): void {
  * @since 0.2.0
  */
 function embed_optimizer_get_lazy_load_script(): string {
- return <<<JS
- const lazyEmbedsScripts = document.querySelectorAll( 'script[type="application/vnd.embed-optimizer.javascript"]' );
- const lazyEmbedScriptsByParents = new Map();
+ $script = file_get_contents( __DIR__ . '/embed-optimizer-lazy-load.js.js' ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- It's a local filesystem path not a remote request.
 
- const lazyEmbedObserver = new IntersectionObserver(
- ( entries ) => {
- for ( const entry of entries ) {
- if ( entry.isIntersecting ) {
- const lazyEmbedParent = entry.target;
- const lazyEmbedScript = /** @type {HTMLScriptElement} */ lazyEmbedScriptsByParents.get( lazyEmbedParent );
- const embedScript = document.createElement( 'script' );
- for ( const attr of lazyEmbedScript.attributes ) {
- if ( attr.nodeName === 'type' ) {
- // Omit type=application/vnd.embed-optimizer.javascript type.
- continue;
- }
- embedScript.setAttribute(
- attr.nodeName === 'data-original-type' ? 'type' : attr.nodeName,
- attr.nodeValue
- );
- }
- lazyEmbedScript.replaceWith( embedScript );
- lazyEmbedObserver.unobserve( lazyEmbedParent );
- }
- }
- },
- {
- rootMargin: '100% 0% 100% 0%',
- threshold: 0
- }
- );
+ if ( false === $script ) {
+ return '';
+ }
 
- for ( const lazyEmbedScript of lazyEmbedsScripts ) {
- const lazyEmbedParent = /** @type {HTMLElement} */ lazyEmbedScript.parentNode;
- lazyEmbedScriptsByParents.set( lazyEmbedParent, lazyEmbedScript );
- lazyEmbedObserver.observe( lazyEmbedParent );
- }
-JS;
+ return $script;
 }
 
 /**