fix: avoid duplicate assets with webpack-assets tag (#51)

marko-js · Mar 18, 2021 · 57833f4 · 57833f4
1 parent 103c3be
commit 57833f4
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 23 deletions.
diff --git a/components/webpack-assets/index.marko b/components/webpack-assets/index.marko
@@ -1,16 +1,23 @@
 import manifest from "!!@marko/webpack/loader!?manifest";
 $ const { entry, scriptAttrs, styleAttrs } = input;
 $ const assets = manifest.getAssets(entry, out.global.buildName);
+$ const written = out.global.___writtenAssets || (out.global.___writtenAssets = new Set());
 
 <if(assets.js)>
   $ const nonce = out.global.cspNonce;
   <for|js| of=assets.js>
-    <script src=(__webpack_public_path__+js) nonce=nonce ...scriptAttrs />
+    <if(!written.has(js))>
+      $ written.add(js);
+      <script src=(__webpack_public_path__+js) nonce=nonce ...scriptAttrs />
+    </if>
   </for>
 </if>
 
 <if(assets.css)>
   <for|css| of=assets.css>
-    <link rel="stylesheet" href=(__webpack_public_path__+css) ...styleAttrs />
+    <if(!written.has(css))>
+      $ written.add(css);
+      <link rel="stylesheet" href=(__webpack_public_path__+css) ...styleAttrs />
+    </if>
   </for>
-</if>
+</if>
diff --git a/src/__tests__/fixtures/asset-tag/__snapshots__/webpack4/server--main.js b/src/__tests__/fixtures/asset-tag/__snapshots__/webpack4/server--main.js
@@ -121,18 +121,23 @@ _marko_template._ = marko_dist_runtime_components_renderer__WEBPACK_IMPORTED_MOD
     styleAttrs
   } = input;
   const assets = _marko_webpack_loader_manifest__WEBPACK_IMPORTED_MODULE_0__["default"].getAssets(entry, out.global.buildName);
+  const written = out.global.___writtenAssets || (out.global.___writtenAssets = new Set());
 
   if (assets.js) {
     const nonce = out.global.cspNonce;
     let _keyValue = 0;
 
     for (const js of assets.js) {
       const _keyScope = `[${_keyValue++}]`;
-      out.w(`<script${marko_dist_runtime_html_helpers_attrs__WEBPACK_IMPORTED_MODULE_2___default()({
-        "src": __webpack_require__.p + js,
-        "nonce": nonce,
-        ...scriptAttrs
-      })}></script>`);
+
+      if (!written.has(js)) {
+        written.add(js);
+        out.w(`<script${marko_dist_runtime_html_helpers_attrs__WEBPACK_IMPORTED_MODULE_2___default()({
+          "src": __webpack_require__.p + js,
+          "nonce": nonce,
+          ...scriptAttrs
+        })}></script>`);
+      }
     }
   }
 
@@ -141,11 +146,15 @@ _marko_template._ = marko_dist_runtime_components_renderer__WEBPACK_IMPORTED_MOD
 
     for (const css of assets.css) {
       const _keyScope2 = `[${_keyValue2++}]`;
-      out.w(`<link${marko_dist_runtime_html_helpers_attrs__WEBPACK_IMPORTED_MODULE_2___default()({
-        "rel": "stylesheet",
-        "href": __webpack_require__.p + css,
-        ...styleAttrs
-      })}>`);
+
+      if (!written.has(css)) {
+        written.add(css);
+        out.w(`<link${marko_dist_runtime_html_helpers_attrs__WEBPACK_IMPORTED_MODULE_2___default()({
+          "rel": "stylesheet",
+          "href": __webpack_require__.p + css,
+          ...styleAttrs
+        })}>`);
+      }
     }
   }
 }, {

diff --git a/src/__tests__/fixtures/asset-tag/__snapshots__/webpack5/server--main.js b/src/__tests__/fixtures/asset-tag/__snapshots__/webpack5/server--main.js
@@ -38,18 +38,23 @@ _marko_template._ = marko_dist_runtime_components_renderer__WEBPACK_IMPORTED_MOD
     styleAttrs
   } = input;
   const assets = _marko_webpack_loader_manifest__WEBPACK_IMPORTED_MODULE_1__.default.getAssets(entry, out.global.buildName);
+  const written = out.global.___writtenAssets || (out.global.___writtenAssets = new Set());
 
   if (assets.js) {
     const nonce = out.global.cspNonce;
     let _keyValue = 0;
 
     for (const js of assets.js) {
       const _keyScope = `[${_keyValue++}]`;
-      out.w(`<script${marko_dist_runtime_html_helpers_attrs__WEBPACK_IMPORTED_MODULE_3___default()({
-        "src": __webpack_require__.p + js,
-        "nonce": nonce,
-        ...scriptAttrs
-      })}></script>`);
+
+      if (!written.has(js)) {
+        written.add(js);
+        out.w(`<script${marko_dist_runtime_html_helpers_attrs__WEBPACK_IMPORTED_MODULE_3___default()({
+          "src": __webpack_require__.p + js,
+          "nonce": nonce,
+          ...scriptAttrs
+        })}></script>`);
+      }
     }
   }
 
@@ -58,11 +63,15 @@ _marko_template._ = marko_dist_runtime_components_renderer__WEBPACK_IMPORTED_MOD
 
     for (const css of assets.css) {
       const _keyScope2 = `[${_keyValue2++}]`;
-      out.w(`<link${marko_dist_runtime_html_helpers_attrs__WEBPACK_IMPORTED_MODULE_3___default()({
-        "rel": "stylesheet",
-        "href": __webpack_require__.p + css,
-        ...styleAttrs
-      })}>`);
+
+      if (!written.has(css)) {
+        written.add(css);
+        out.w(`<link${marko_dist_runtime_html_helpers_attrs__WEBPACK_IMPORTED_MODULE_3___default()({
+          "rel": "stylesheet",
+          "href": __webpack_require__.p + css,
+          ...styleAttrs
+        })}>`);
+      }
     }
   }
 }, {