docs: load demo deps early on

Closes #2097
RedHat-UX · Jan 13, 2025 · 0acb0cf · 0acb0cf
1 parent 1a839fe
commit 0acb0cf
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/docs/_includes/partials/javascript/dsd-init.html b/docs/_includes/partials/javascript/dsd-init.html
@@ -0,0 +1,14 @@
+  <script type="module">
+    // dsd polyfill needs to happen before hydration attempts
+    // lit-element-hydrate-support needs to be included before lit is loaded
+    import '/assets/javascript/dsd-polyfill.js';
+    import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
+    import 'element-internals-polyfill';
+    // include these, which are often internal to elements,
+    // and are definitely required by context-picker and context-demo
+    // to avoid SSR defer-hydration bugs and SSR double-rendering bugs
+    import '@rhds/elements/rh-icon/rh-icon.js';
+    import '@rhds/elements/rh-surface/rh-surface.js';
+    import '@rhds/elements/rh-button/rh-button.js';
+    import '@rhds/elements/rh-tooltip/rh-tooltip.js';
+  </script>
diff --git a/docs/_includes/partials/javascript/global.html b/docs/_includes/partials/javascript/global.html
@@ -1,14 +1,6 @@
   <script type="importmap">{{ importMap | dump(2) | safe }}</script>
 
-  {# dsd polyfill needs to happen before hydration attempts #}
-  <script type="module">
-    import '/assets/javascript/dsd-polyfill.js';
-  </script>
-
-  {# lit-element-hydrate-support needs to be included before lit is loaded #}
-  <script type="module">
-    import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
-  </script>
+  {% include 'partials/javascript/dsd-init.html' %}
 
   {# load all components #}
   {% for tag in importElements %}
@@ -17,6 +9,7 @@
 
   {# only load components that need hydrated (aka interactivity) #}
   <script type="module">
+    import '@rhds/elements/rh-button/rh-button.js';
     import '@uxdot/elements/uxdot-copy-permalink.js';
     import '@uxdot/elements/uxdot-sidenav.js';
     import '@uxdot/elements/uxdot-example.js';

diff --git a/docs/elements/demo.html b/docs/elements/demo.html
@@ -23,15 +23,8 @@
     <link rel="stylesheet" href="/styles/demo/styles.css" media="all">
 
     <script type="importmap">{{ importMap | dump(2) | safe }}</script>
+    {% include 'partials/javascript/dsd-init.html' %}
     <script type="module">
-      // dsd polyfill needs to happen before hydration attempts
-      // lit-element-hydrate-support needs to be included before lit is loaded
-      import '/assets/javascript/dsd-polyfill.js';
-      import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
-      import 'element-internals-polyfill';
-      // include these, which are often internal to elements, to avoid SSR defer-hydration bugs
-      import '@rhds/elements/rh-icon/rh-icon.js';
-      import '@rhds/elements/rh-surface/rh-surface.js';
       // load up the demo and picker
       import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
       import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';