From d4d581e4fbacce98384e1106db8a373512429e1b Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 28 Jun 2021 09:43:55 -0400
Subject: [PATCH] fix metadata fetch bug

---
 docs/assets/plugins/metadata/metadata.js | 70 +++++++++---------------
 docs/resources/changelog.md              |  1 +
 2 files changed, 28 insertions(+), 43 deletions(-)

diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js
index b3ceb3fe5..11983dadb 100644
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/docs/assets/plugins/metadata/metadata.js
@@ -1,5 +1,7 @@
 (() => {
-  let metadataStore;
+  const customElements = fetch('/dist/custom-elements.json')
+    .then(res => res.json())
+    .catch(err => console.error(err));
 
   function createPropsTable(props) {
     const table = document.createElement('table');
@@ -266,58 +268,40 @@
     return getAllComponents(metadata).find(component => component.tagName === tagName);
   }
 
-  function getMetadata() {
-    return new Promise((resolve, reject) => {
-      // Simple caching to prevent multiple XHR requests
-      if (metadataStore) {
-        return resolve(metadataStore);
-      }
-
-      fetch('/dist/custom-elements.json')
-        .then(res => res.json())
-        .then(data => {
-          metadataStore = data;
-          resolve(metadataStore);
-        })
-        .catch(err => console.error(err));
-    });
-  }
-
   if (!window.$docsify) {
     throw new Error('Docsify must be loaded before installing this plugin.');
   }
 
   window.$docsify.plugins.push((hook, vm) => {
-    hook.mounted(function () {
-      getMetadata().then(metadata => {
-        const target = document.querySelector('.app-name');
+    hook.mounted(async function () {
+      const metadata = await customElements;
+      const target = document.querySelector('.app-name');
 
-        // Add version
-        const version = document.createElement('div');
-        version.classList.add('sidebar-version');
-        version.textContent = metadata.package.version;
-        target.appendChild(version);
+      // Add version
+      const version = document.createElement('div');
+      version.classList.add('sidebar-version');
+      version.textContent = metadata.package.version;
+      target.appendChild(version);
 
-        // Add repo buttons
-        const buttons = document.createElement('div');
-        buttons.classList.add('sidebar-buttons');
-        buttons.innerHTML = `
-            <a class="repo-button repo-button--small repo-button--sponsor" href="https://github.com/sponsors/claviska" rel="noopener" target="_blank">
-              <sl-icon name="heart"></sl-icon> Sponsor
-            </a>
-            <a class="repo-button repo-button--small repo-button--github" href="https://github.com/shoelace-style/shoelace/stargazers" rel="noopener" target="_blank">
-              <sl-icon name="github"></sl-icon> <span class="github-star-count">Star</span>
-            </a>
-            <a class="repo-button repo-button--small repo-button--twitter" href="https://twitter.com/shoelace_style" rel="noopener" target="_blank">
-              <sl-icon name="twitter"></sl-icon> Follow
-            </a>
-          `;
-        target.appendChild(buttons);
-      });
+      // Add repo buttons
+      const buttons = document.createElement('div');
+      buttons.classList.add('sidebar-buttons');
+      buttons.innerHTML = `
+          <a class="repo-button repo-button--small repo-button--sponsor" href="https://github.com/sponsors/claviska" rel="noopener" target="_blank">
+            <sl-icon name="heart"></sl-icon> Sponsor
+          </a>
+          <a class="repo-button repo-button--small repo-button--github" href="https://github.com/shoelace-style/shoelace/stargazers" rel="noopener" target="_blank">
+            <sl-icon name="github"></sl-icon> <span class="github-star-count">Star</span>
+          </a>
+          <a class="repo-button repo-button--small repo-button--twitter" href="https://twitter.com/shoelace_style" rel="noopener" target="_blank">
+            <sl-icon name="twitter"></sl-icon> Follow
+          </a>
+        `;
+      target.appendChild(buttons);
     });
 
     hook.beforeEach(async function (content, next) {
-      const metadata = await getMetadata();
+      const metadata = await customElements;
 
       // Replace %VERSION% placeholders
       content = content.replace(/%VERSION%/g, metadata.package.version);
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 7c3418f5c..efebde46c 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -21,6 +21,7 @@ The docs have been updated to use the new `custom-elements.json` file. If you're
 - Added `dialog.denyClose` and `drawer.denyClose` animations
 - Fixed a bug in `sl-color-picker` where setting `value` immediately wouldn't trigger an update
 - Fixed a bug that resulted in form controls having incorrect validity when `disabled` was initially set [#473](https://github.com/shoelace-style/shoelace/issues/473)
+- Fixed a bug in the docs that caused the metadata file to be requested twice
 - Updated the docs to use the new `custom-elements.json` for component metadata
 
 ## 2.0.0-beta.44