fix(preload): prevent multiple rules in multi-instance scenario (just…

…inribeiro#69)
cshawaus · Jul 22, 2022 · e85e5b1 · e85e5b1
1 parent b255b5d
commit e85e5b1
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/lite-youtube.ts b/lite-youtube.ts
@@ -318,9 +318,6 @@ export class LiteYTEmbed extends HTMLElement {
    * Setup the placeholder image for the component
    */
   private initImagePlaceholder(): void {
-    // we don't know which image type to preload, so warm the connection
-    LiteYTEmbed.addPrefetch('preconnect', 'https://i.ytimg.com/');
-
     const posterUrlWebp = `https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`;
     const posterUrlJpeg = `https://i.ytimg.com/vi/${this.videoId}/${this.posterQuality}.jpg`;
     this.domRefImg.fallback.loading = this.posterLoading;
@@ -422,7 +419,10 @@ export class LiteYTEmbed extends HTMLElement {
    * Isolation and split caches adding serious complexity.
    */
   private static warmConnections(): void {
-    if (LiteYTEmbed.isPreconnected) return;
+    if (LiteYTEmbed.isPreconnected || window.liteYouTubeIsPreconnected) return;
+    // we don't know which image type to preload, so warm the connection
+    LiteYTEmbed.addPrefetch('preconnect', 'https://i.ytimg.com/');
+
     // Host that YT uses to serve JS needed by player, per amp-youtube
     LiteYTEmbed.addPrefetch('preconnect', 'https://s.ytimg.com');
 
@@ -441,6 +441,9 @@ export class LiteYTEmbed extends HTMLElement {
     );
     LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net');
     LiteYTEmbed.isPreconnected = true;
+
+    // multiple embeds in the same page don't check for each other
+    window.liteYouTubeIsPreconnected = true;
   }
 }
 // Register custom element
@@ -452,5 +455,6 @@ declare global {
   }
   interface Window {
     liteYouTubeNonce: string;
+    liteYouTubeIsPreconnected: boolean;
   }
 }
diff --git a/test/lite-youtube.test.ts b/test/lite-youtube.test.ts
@@ -1,13 +1,22 @@
 /* eslint-disable import/no-duplicates */
 import { html, fixture, expect } from '@open-wc/testing';
+import { fixtureCleanup } from '@open-wc/testing-helpers';
+
 import { setViewport } from '@web/test-runner-commands';
 
 import { LiteYTEmbed } from '../lite-youtube.js';
 import '../lite-youtube.js';
 
-const baseTemplate = html`<lite-youtube videoTitle="Test Me" videoid="guJLfqTFfIw"></lite-youtube>`;
+const baseTemplate = html`<lite-youtube
+  videoTitle="Test Me"
+  videoid="guJLfqTFfIw"
+></lite-youtube>`;
 
 describe('<lite-youtube>', () => {
+  afterEach(() => {
+    fixtureCleanup();
+  });
+
   it('attr sets the videoid', async () => {
     const el = await fixture<LiteYTEmbed>(baseTemplate);
     expect(el.videoId).to.equal('guJLfqTFfIw');
@@ -78,7 +87,7 @@ describe('<lite-youtube>', () => {
     );
     // this is a cheeky test by counting the test runner + the warm injector
     // TODO write a better observer
-    expect(document.head.querySelectorAll('link').length).to.be.equal(12);
+    expect(document.head.querySelectorAll('link').length).to.be.equal(1);
   });
 
   it('nocookie attr should change iframe url target', async () => {
@@ -146,21 +155,15 @@ describe('<lite-youtube>', () => {
 
   it('YouTube Short desktop check', async () => {
     const el = await fixture<LiteYTEmbed>(
-      html`<lite-youtube
-        videoid="guJLfqTFfIw"
-        short
-      ></lite-youtube>`
+      html`<lite-youtube videoid="guJLfqTFfIw" short></lite-youtube>`
     );
     expect(el['isYouTubeShort']()).to.be.equal(false);
   });
 
   it('YouTube Short mobile check', async () => {
     setViewport({ width: 360, height: 640 });
     const el = await fixture<LiteYTEmbed>(
-      html`<lite-youtube
-        videoid="guJLfqTFfIw"
-        short
-      ></lite-youtube>`
+      html`<lite-youtube videoid="guJLfqTFfIw" short></lite-youtube>`
     );
     el.click();
     expect(el['isYouTubeShort']()).to.be.equal(true);
@@ -176,6 +179,18 @@ describe('<lite-youtube>', () => {
     ).to.equal(window.liteYouTubeNonce);
   });
 
+  it('check global preconnect state', async () => {
+    const el = await fixture<LiteYTEmbed>(
+      html`<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
+        <lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
+        <lite-youtube videoid="guJLfqTFfIw"></lite-youtube>`
+    );
+    expect(window.liteYouTubeIsPreconnected).to.be.true;
+    expect(
+      document.querySelectorAll('head > link[rel=preconnect]').length
+    ).to.equal(6);
+  });
+
   it('is valid A11y via aXe', async () => {
     const el = await fixture<LiteYTEmbed>(baseTemplate);
     await expect(el).shadowDom.to.be.accessible();