adding onLoad attribute to <link> tag

nfl · Oct 12, 2017 · 99e4554 · 99e4554
1 parent 86276f3
commit 99e4554
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -228,6 +228,10 @@ function HTML () {
         }
     `}</script>
 
+    {/* link elements */}
+    <link onLoad="doSomethingInteresting()" rel="stylesheet" media="all" type="text/css" href="critical-style.css" />
+    <link onLoad="if(media!='all')media='all'" rel="stylesheet" media="none" type="text/css" href="non-critical-style.css" />
+
     {/* noscript elements */}
     <noscript>{`
         <link rel="stylesheet" type="text/css" href="foo.css" />

diff --git a/src/Helmet.js b/src/Helmet.js
@@ -20,7 +20,7 @@ const Helmet = Component =>
      * @param {Boolean} defer: true
      * @param {Boolean} encodeSpecialCharacters: true
      * @param {Object} htmlAttributes: {"lang": "en", "amp": undefined}
-     * @param {Array} link: [{"rel": "canonical", "href": "http://mysite.com/example"}]
+     * @param {Array} link: [{"rel": "canonical", "href": "http://mysite.com/example", "onLoad": "functionCall()"}]
      * @param {Array} meta: [{"name": "description", "content": "Test description"}]
      * @param {Array} noscript: [{"innerHTML": "<img src='http://mysite.com/js/test.js'"}]
      * @param {Function} onChangeClientState: "(newState) => console.log(newState)"

diff --git a/src/HelmetConstants.js b/src/HelmetConstants.js
@@ -31,7 +31,8 @@ export const TAG_PROPERTIES = {
     NAME: "name",
     PROPERTY: "property",
     REL: "rel",
-    SRC: "src"
+    SRC: "src",
+    ONLOAD: "onload"
 };
 
 export const REACT_TAG_MAP = {

diff --git a/src/HelmetUtils.js b/src/HelmetUtils.js
@@ -211,7 +211,7 @@ const reducePropsToState = propsList => ({
     htmlAttributes: getAttributesFromPropsList(ATTRIBUTE_NAMES.HTML, propsList),
     linkTags: getTagsFromPropsList(
         TAG_NAMES.LINK,
-        [TAG_PROPERTIES.REL, TAG_PROPERTIES.HREF],
+        [TAG_PROPERTIES.REL, TAG_PROPERTIES.HREF, TAG_PROPERTIES.ONLOAD],
         propsList
     ),
     metaTags: getTagsFromPropsList(

diff --git a/test/HelmetDeclarativeTest.js b/test/HelmetDeclarativeTest.js
@@ -2058,6 +2058,51 @@ describe("Helmet - Declarative API", () => {
                     done();
                 });
             });
+
+            it("renders tag when onload attribute is present", (done) => {
+                ReactDOM.render(
+                    <Helmet>
+                        <link onLoad="functionCall()" rel="stylesheet" media="all" type="text/css" href="http://localhost/critical-style.css" />
+                        <link onLoad="if(media!='all')media='all'" rel="stylesheet" media="none" type="text/css" href="http://localhost/non-critical-style.css" />
+                    </Helmet>,
+                    container
+                );
+
+                requestIdleCallback(() => {
+                    const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`);
+                    const existingTags = Array.prototype.slice.call(tagNodes);
+                    const firstTag = existingTags[0];
+
+                    expect(existingTags).to.not.equal(undefined);
+                    expect(existingTags.length).to.be.equal(2);
+
+                    expect(existingTags)
+                        .to.have.deep.property("[0]")
+                        .that.is.an.instanceof(Element);
+                    expect(firstTag).to.have.property("getAttribute");
+                    expect(firstTag.getAttribute("rel")).to.equal("stylesheet");
+                    expect(firstTag.getAttribute("media")).to.equal("all");
+                    expect(firstTag.getAttribute("type")).to.equal("text/css");
+                    expect(firstTag.getAttribute("onload")).to.equal("functionCall()");
+                    expect(firstTag.getAttribute("href")).to.equal("http://localhost/critical-style.css");
+                    expect(firstTag.outerHTML).to.equal(`<link onload="functionCall()" rel="stylesheet" media="all" type="text/css" href="http://localhost/critical-style.css" ${HELMET_ATTRIBUTE}="true">`);
+
+                    const secondTag = existingTags[1];
+
+                    expect(existingTags)
+                        .to.have.deep.property("[1]")
+                        .that.is.an.instanceof(Element);
+                    expect(secondTag).to.have.property("getAttribute");
+                    expect(secondTag.getAttribute("rel")).to.equal("stylesheet");
+                    expect(secondTag.getAttribute("media")).to.equal("none");
+                    expect(secondTag.getAttribute("type")).to.equal("text/css");
+                    expect(secondTag.getAttribute("onload")).to.equal("if(media!='all')media='all'");
+                    expect(secondTag.getAttribute("href")).to.equal("http://localhost/non-critical-style.css");
+                    expect(secondTag.outerHTML).to.equal(`<link onload="if(media!='all')media='all'" rel="stylesheet" media="none" type="text/css" href="http://localhost/non-critical-style.css" ${HELMET_ATTRIBUTE}="true">`);
+
+                    done();
+                });
+            });
         });
 
         describe("script tags", () => {