move drupal js loading to head, reload scripts

components/_meta/_00-head.twig

@@ -4,10 +4,20 @@
     <title>{{ title }}</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width" />
-    
+
     <!-- Component styles -->
     <link rel="stylesheet" href="../../../../dist/style.css?{{ cacheBuster }}" media="all" />
 
+    <!-- Drupal-specific usage -->
+    <!-- example using symlinking -->
+    <!-- cd web/themes/custom/emulsify/components/js -->
+    <!-- ln -s ../../../../../core/assets/vendor/domready/ready.min.js ./ -->
+    <!-- ln -s ../../../../../core/misc/drupal.js ./ -->
+
+    <!-- UNCOMMENT AS NECESSARY -->
+    <!-- <script src="../../js/ready.min.js"></script> -->
+    <!-- <script src="../../js/drupal.js"></script> -->
+
     <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
     {{ patternLabHead | raw }}
     <!-- End Pattern Lab -->

components/_meta/_01-foot.twig

@@ -2,18 +2,11 @@
   <!--DO NOT REMOVE-->
   {{ patternLabFoot | raw }}
 
-  <!-- Drupal-specific usage -->
-  <!-- example using symlinking -->
-  <!-- cd web/themes/custom/emulsify/components/js -->
-  <!-- ln -s ../../../../../core/assets/vendor/domready/ready.min.js ./ -->
-  <!-- ln -s ../../../../../core/misc/drupal.js ./ -->
-
-  <!-- UNCOMMENT AS NECESSARY -->
-  <!-- <script src="../../js/ready.min.js"></script> -->
-  <!-- <script src="../../js/drupal.js"></script> -->
-
   <!-- If using Drupal.behaviors, uncomment for them to work in Pattern Lab -->
   <!-- <script>Drupal.attachBehaviors();</script> -->
 
+  <!-- This makes attach_library work wherever it is in the document flow. -->
+  <script src="../../js/reload-scripts.js"></script>
+
   </body>
 </html>

components/js/reload-scripts.js

@@ -0,0 +1,21 @@
+/*
+* Reload Scripts on page (required for attach_library)
+*
+*/
+
+// Get body tag.
+const head = document.getElementsByTagName('body')[0];
+// Get scripts within the body.
+const scripts = head.querySelectorAll('script');
+
+scripts.forEach((element) => {
+  // If the script has the data-name attribute.
+  if (element.dataset.name) {
+    // Create new script element.
+    const script = document.createElement('script');
+    // Set src to script above.
+    script.src = element.dataset.src;
+    // Append to head.
+    head.appendChild(script);
+  }
+});