Skip to content

Commit

Permalink
feat: load scripts via async script tag (#34)
Browse files Browse the repository at this point in the history 
    
BREAKING CHANGE: Webpack now controls async script order.
  • Loading branch information
@DylanPiercey
DylanPiercey authored Mar 16, 2020
1 parent 9c75cbd commit 3feb008
Show file tree
Hide file tree
Showing 7 changed files with 48 additions and 48 deletions.
12 changes: 6 additions & 6 deletions src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/__snapshots__/server--main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,12 @@ function renderAssets() {
__webpack_require__.p && this.script(`$mwp_testruntime=${JSON.stringify(__webpack_require__.p)}`);

if (assets.js) {
const setNonce = nonce && `.setAttribute("nonce", ${JSON.stringify(nonce)})`;
this.script(
`(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;${setNonce ? `g${setNonce};` : ""}b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,${setNonce ? `a${setNonce},` : ""}b.head.appendChild(a))})})(document,${
JSON.stringify(assets.js.map(js => __webpack_require__.p+js))
})`
);
const nonceAttr = nonce ? ` nonce=${JSON.stringify(nonce)}` : "";
assets.js.forEach(js => {
this.write(
`<script src=${JSON.stringify(__webpack_require__.p+js)}${nonceAttr} async></script>`
);
});
}

if (assets.css) {
Expand Down
12 changes: 6 additions & 6 deletions src/__tests__/fixtures/basic-template-plugin/__snapshots__/server--main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,12 @@ function renderAssets() {
__webpack_require__.p && this.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);

if (assets.js) {
const setNonce = nonce && `.setAttribute("nonce", ${JSON.stringify(nonce)})`;
this.script(
`(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;${setNonce ? `g${setNonce};` : ""}b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,${setNonce ? `a${setNonce},` : ""}b.head.appendChild(a))})})(document,${
JSON.stringify(assets.js.map(js => __webpack_require__.p+js))
})`
);
const nonceAttr = nonce ? ` nonce=${JSON.stringify(nonce)}` : "";
assets.js.forEach(js => {
this.write(
`<script src=${JSON.stringify(__webpack_require__.p+js)}${nonceAttr} async></script>`
);
});
}

if (assets.css) {
Expand Down
24 changes: 12 additions & 12 deletions src/__tests__/fixtures/multiple-entries-plugin/__snapshots__/server--main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,12 +88,12 @@ function renderAssets() {
__webpack_require__.p && this.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);

if (assets.js) {
const setNonce = nonce && `.setAttribute("nonce", ${JSON.stringify(nonce)})`;
this.script(
`(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;${setNonce ? `g${setNonce};` : ""}b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,${setNonce ? `a${setNonce},` : ""}b.head.appendChild(a))})})(document,${
JSON.stringify(assets.js.map(js => __webpack_require__.p+js))
})`
);
const nonceAttr = nonce ? ` nonce=${JSON.stringify(nonce)}` : "";
assets.js.forEach(js => {
this.write(
`<script src=${JSON.stringify(__webpack_require__.p+js)}${nonceAttr} async></script>`
);
});
}

if (assets.css) {
Expand Down Expand Up @@ -260,12 +260,12 @@ function renderAssets() {
__webpack_require__.p && this.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);

if (assets.js) {
const setNonce = nonce && `.setAttribute("nonce", ${JSON.stringify(nonce)})`;
this.script(
`(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;${setNonce ? `g${setNonce};` : ""}b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,${setNonce ? `a${setNonce},` : ""}b.head.appendChild(a))})})(document,${
JSON.stringify(assets.js.map(js => __webpack_require__.p+js))
})`
);
const nonceAttr = nonce ? ` nonce=${JSON.stringify(nonce)}` : "";
assets.js.forEach(js => {
this.write(
`<script src=${JSON.stringify(__webpack_require__.p+js)}${nonceAttr} async></script>`
);
});
}

if (assets.css) {
Expand Down
12 changes: 6 additions & 6 deletions ...tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/server--main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,12 +161,12 @@ function renderAssets() {
__webpack_require__.p && this.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);

if (assets.js) {
const setNonce = nonce && `.setAttribute("nonce", ${JSON.stringify(nonce)})`;
this.script(
`(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;${setNonce ? `g${setNonce};` : ""}b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,${setNonce ? `a${setNonce},` : ""}b.head.appendChild(a))})})(document,${
JSON.stringify(assets.js.map(js => __webpack_require__.p+js))
})`
);
const nonceAttr = nonce ? ` nonce=${JSON.stringify(nonce)}` : "";
assets.js.forEach(js => {
this.write(
`<script src=${JSON.stringify(__webpack_require__.p+js)}${nonceAttr} async></script>`
);
});
}

if (assets.css) {
Expand Down
12 changes: 6 additions & 6 deletions src/__tests__/fixtures/with-class-component-plugin/__snapshots__/server--main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,12 +154,12 @@ function renderAssets() {
__webpack_require__.p && this.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);

if (assets.js) {
const setNonce = nonce && `.setAttribute("nonce", ${JSON.stringify(nonce)})`;
this.script(
`(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;${setNonce ? `g${setNonce};` : ""}b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,${setNonce ? `a${setNonce},` : ""}b.head.appendChild(a))})})(document,${
JSON.stringify(assets.js.map(js => __webpack_require__.p+js))
})`
);
const nonceAttr = nonce ? ` nonce=${JSON.stringify(nonce)}` : "";
assets.js.forEach(js => {
this.write(
`<script src=${JSON.stringify(__webpack_require__.p+js)}${nonceAttr} async></script>`
);
});
}

if (assets.css) {
Expand Down
12 changes: 6 additions & 6 deletions src/__tests__/fixtures/with-public-path/__snapshots__/server--main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,12 @@ function renderAssets() {


if (assets.js) {
const setNonce = nonce && `.setAttribute("nonce", ${JSON.stringify(nonce)})`;
this.script(
`(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;${setNonce ? `g${setNonce};` : ""}b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,${setNonce ? `a${setNonce},` : ""}b.head.appendChild(a))})})(document,${
JSON.stringify(assets.js.map(js => __webpack_require__.p+js))
})`
);
const nonceAttr = nonce ? ` nonce=${JSON.stringify(nonce)}` : "";
assets.js.forEach(js => {
this.write(
`<script src=${JSON.stringify(__webpack_require__.p+js)}${nonceAttr} async></script>`
);
});
}

if (assets.css) {
Expand Down
12 changes: 6 additions & 6 deletions src/loader/get-asset-code.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@ static function renderAssets() {
}
if (assets.js) {
const setNonce = nonce && \`.setAttribute("nonce", \${JSON.stringify(nonce)})\`;
this.script(
\`(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;\${setNonce ? \`g\${setNonce};\` : ""}b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,\${setNonce ? \`a\${setNonce},\` : ""}b.head.appendChild(a))})})(document,\${
JSON.stringify(assets.js.map(js => __webpack_public_path__+js))
})\`
);
const nonceAttr = nonce ? \` nonce=\${JSON.stringify(nonce)}\` : "";
assets.js.forEach(js => {
this.write(
\`<script src=\${JSON.stringify(__webpack_public_path__+js)}\${nonceAttr} async></script>\`
);
});
}
if (assets.css) {
Expand Down

0 comments on commit 3feb008

Please sign in to comment.