fix: issues with async load) (#31)

weirdpattern · web-flow · commit 339d81706545 · 2020-06-28T00:49:24.000-05:00
diff --git a/README.md b/README.md
@@ -4,12 +4,12 @@
 [![Travis badge](https://img.shields.io/travis/weirdpattern/gatsby-remark-embed-gist.svg?branch=master&style=flat-square)](https://travis-ci.org/weirdpattern/gatsby-remark-embed-gist)
 [![codecov](https://codecov.io/gh/weirdpattern/gatsby-remark-embed-gist/branch/master/graph/badge.svg)](https://codecov.io/gh/weirdpattern/gatsby-remark-embed-gist)
 
-This plugin allows content authors to embed [Gist](https://gist.github.com/) 
+This plugin allows content authors to embed [Gist](https://gist.github.com/)
 snippets.
 
 ## Getting started
 
-To embed a Gist snippet in you markdown/remark content, simply add an inline code 
+To embed a Gist snippet in you markdown/remark content, simply add an inline code
 block using the `gist:` protocol.
 
 ```md
@@ -23,16 +23,18 @@ block using the `gist:` protocol.
 `gist:[<username>/]<gist_id>?file=<gist_file>?highlights=<number|ranges>&lines=<number|ranges>`
 ```
 
-Where:  
+Where:
+
 - **username**, represents the github handler whose gist is to be accessed.  
-Can be defaulted via configuration.
-- **gist_id**, is the id of the gist to be accessed.   
-This is the hash value in the gist url, e.g. https://gist.github.com/<username\>/`ce54fdb1e5621b5966e146026995b974`).
-- **gist_file**, is the name of the file in the gist to be accessed.  
+  Can be defaulted via configuration.
+- **gist_id**, is the id of the gist to be accessed.  
+  This is the hash value in the gist url, e.g. https://gist.github.com/<username\>/`ce54fdb1e5621b5966e146026995b974`).
+- **gist_file**, is the name of the file in the gist to be accessed.
 
 Highlights and lines can be defined using:
+
 - A single number (e.g. `highlights=1`, `lines=1`)
-- A list of numbers (e.g. `highlights=1,4`, `lines=1,4`) 
+- A list of numbers (e.g. `highlights=1,4`, `lines=1,4`)
 - A range of numbers (e.g. `highlights=1-4`, `lines=1-4`)
 - A combination of all above (e.g. `highlights=1,3,7-9`, `lines=1,3,7-9`)
 
@@ -54,11 +56,25 @@ Highlights and lines can be defined using:
           // Optional:
 
           // the github handler whose gists are to be accessed
-          username: 'weirdpattern',
+          username: "<string>",
+
+          // a flag indicating whether the github default gist css should be included or not
+          // default: true
+          // DEPRECATED (PLEASE USE gistDefaultCssInclude)
+          includeDefaultCss: true || false,
 
           // a flag indicating whether the github default gist css should be included or not
           // default: true
-          includeDefaultCss: true
+          gistDefaultCssInclude: true || false,
+
+          // a flag indicating whether the github default gist css should be preloaded or not
+          // use this if you want to load the default css asynchronously.
+          // default: false
+          gistCssPreload: true || false,
+
+          // a string that represents the github default gist css url.
+          // defaults: "https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css"
+          gistCssUrlAddress: "<string>"
         }
       }
     ]
@@ -68,45 +84,68 @@ Highlights and lines can be defined using:
 
 ## Example
 
-Turns this...  
+Turns this...
+
 ```md
 `gist:weirdpattern/ce54fdb1e5621b5966e146026995b974#syntax.text`
 ```
 
-Into this...  
+Into this...
+
 ```html
 <div id="gist90436059" class="gist">
-    <div class="gist-file">
-      <div class="gist-data">
-        <div class="js-gist-file-update-container js-task-list-container file-box">
-          <div id="file-syntax-text" class="file">
-            <div itemprop="text" class="blob-wrapper data type-text">
-              <table class="highlight tab-size js-file-line-container" data-tab-size="8">
-                <tbody>
-                  <tr>
-                    <td id="file-syntax-text-L1" class="blob-num js-line-number" data-line-number="1"></td>
-                    <td id="file-syntax-text-LC1" class="blob-code blob-code-inner js-file-line">&lt;operation&gt; [n]&gt; /dev/null [options]</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+  <div class="gist-file">
+    <div class="gist-data">
+      <div
+        class="js-gist-file-update-container js-task-list-container file-box"
+      >
+        <div id="file-syntax-text" class="file">
+          <div itemprop="text" class="blob-wrapper data type-text">
+            <table
+              class="highlight tab-size js-file-line-container"
+              data-tab-size="8"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    id="file-syntax-text-L1"
+                    class="blob-num js-line-number"
+                    data-line-number="1"
+                  ></td>
+                  <td
+                    id="file-syntax-text-LC1"
+                    class="blob-code blob-code-inner js-file-line"
+                  >
+                    &lt;operation&gt; [n]&gt; /dev/null [options]
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
       </div>
-      <div class="gist-meta">
-        <a href="https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974/raw/30a0ad953a8d79c8bcbdd76343d86a9e4bbda311/syntax.text" style="float:right">view raw</a>
-        <a href="https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974#file-syntax-text">syntax.text</a>
-        hosted with ❤ by <a href="https://github.com">GitHub</a>
-      </div>
     </div>
+    <div class="gist-meta">
+      <a
+        href="https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974/raw/30a0ad953a8d79c8bcbdd76343d86a9e4bbda311/syntax.text"
+        style="float:right"
+        >view raw</a
+      >
+      <a
+        href="https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974#file-syntax-text"
+        >syntax.text</a
+      >
+      hosted with ❤ by <a href="https://github.com">GitHub</a>
+    </div>
+  </div>
 </div>
 ```
 
 ## Notes
 
-The order of the plugins only matters when used in conjunction with 
-`gatsby-remark-prismjs`, because this plugin transforms the inline code blocks, 
-so add `gatsby-remark-embed-gist` somewhere above this plugin.  
+The order of the plugins only matters when used in conjunction with
+`gatsby-remark-prismjs`, because this plugin transforms the inline code blocks,
+so add `gatsby-remark-embed-gist` somewhere above this plugin.
 
 ## License
 
diff --git a/specs/gatsby-ssr.specs.js b/specs/gatsby-ssr.specs.js
@@ -12,13 +12,61 @@ describe("gatsby-ssr", () => {
     expect(setHeadComponents).toHaveBeenCalledTimes(1);
   });
 
+  it("executes when gistDefaultCssInclude is default", () => {
+    onRenderBody({ setHeadComponents });
+    expect(setHeadComponents).toHaveBeenCalledTimes(1);
+  });
+
   it("executes when includeDefaultCss is true", () => {
     onRenderBody({ setHeadComponents }, { includeDefaultCss: true });
     expect(setHeadComponents).toHaveBeenCalledTimes(1);
   });
 
+  it("executes when gistDefaultCssInclude is true", () => {
+    onRenderBody({ setHeadComponents }, { gistDefaultCssInclude: true });
+    expect(setHeadComponents).toHaveBeenCalledTimes(1);
+  });
+
   it("doesn't execute when includeDefaultCss is false", () => {
     onRenderBody({ setHeadComponents }, { includeDefaultCss: false });
     expect(setHeadComponents).toHaveBeenCalledTimes(0);
   });
+
+  it("doesn't execute when gistDefaultCssInclude is false", () => {
+    onRenderBody({ setHeadComponents }, { gistDefaultCssInclude: false });
+    expect(setHeadComponents).toHaveBeenCalledTimes(0);
+  });
+
+  it("executes when gistCssPreload is missing", () => {
+    onRenderBody({ setHeadComponents });
+    expect(setHeadComponents).toHaveBeenCalledTimes(1);
+  });
+
+  it("executes when gistCssPreload is false", () => {
+    onRenderBody({ setHeadComponents }, { gistCssPreload: false });
+    expect(setHeadComponents).toHaveBeenCalledTimes(1);
+  });
+
+  it("executes when gistCssPreload is true", () => {
+    onRenderBody({ setHeadComponents }, { gistCssPreload: true });
+    expect(setHeadComponents).toHaveBeenCalledTimes(1);
+    expect(setHeadComponents.mock.calls[0][0].length).toBe(3);
+  });
+
+  it("executes when gistCssPreload is true", () => {
+    onRenderBody({ setHeadComponents }, { gistCssPreload: true });
+    expect(setHeadComponents).toHaveBeenCalledTimes(1);
+    expect(setHeadComponents.mock.calls[0][0].length).toBe(3);
+  });
+
+  it("updates the url when one is provided", () => {
+    onRenderBody(
+      { setHeadComponents },
+      { gistCssPreload: true, gistCssUrlAddress: "https://test" }
+    );
+    expect(setHeadComponents).toHaveBeenCalledTimes(1);
+
+    const value = setHeadComponents.mock.calls[0][0][0];
+    expect(value.props.href === "https://test").toBeTruthy();
+  });
 });
diff --git a/src/gatsby-ssr.js b/src/gatsby-ssr.js
@@ -12,25 +12,49 @@ import React from "react";
  * @param {PluginOptions} options the options of the plugin.
  * @returns {*} rendered body.
  */
-export function onRenderBody({ setHeadComponents }, options = {}) {
-  if (options.includeDefaultCss !== false) {
-    return setHeadComponents([
-      <link
-        as="style"
-        href="https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css"
-        key="gist-embeded-b3b573358bfc66d89e1e95dbf8319c09"
-        onLoad="this.onload=null;this.rel='stylesheet'"
-        rel="preload"
-      />,
-      <noscript key="gist-embeded-noscript-b3b573358bfc66d89e1e95dbf8319c09">
-        <link
-          href="https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css"
-          key="gist-embeded-b3b573358bfc66d89e1e95dbf8319c09"
-          rel="stylesheet"
-        />
-      </noscript>
-    ]);
+export function onRenderBody(
+  { setHeadComponents },
+  options = {
+    gistCssPreload: false,
+    gistCssUrlAddress:
+      "https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css"
   }
+) {
+  let includeCss = true;
+  if (options.gistDefaultCssInclude != null) {
+    includeCss = options.gistDefaultCssInclude;
+  } else if (options.includeDefaultCss != null) {
+    includeCss = options.includeDefaultCss;
+  }
+
+  const key = "gist-embed-b3b573358bfc66d89e1e95dbf8319c09";
 
-  return null;
+  if (includeCss) {
+    setHeadComponents(
+      options.gistCssPreload
+        ? [
+            <link
+              id={key}
+              as="style"
+              href={options.gistCssUrlAddress}
+              key={key}
+              rel="preload"
+            />,
+            <noscript key={"noscript-" + key}>
+              <link href={options.gistCssUrlAddress} rel="stylesheet" />
+            </noscript>,
+            <script
+              dangerouslySetInnerHTML={{
+                __html: `
+                  var link = document.querySelector("#${key}");
+                  link.addEventListener("load", function() {
+                    this.rel = "stylesheet"
+                  });
+                `
+              }}
+            ></script>
+          ]
+        : [<link href={options.gistCssUrlAddress} rel="stylesheet" />]
+    );
+  }
 }
