From 0acb0cfb9d43d340a4253323372ac0fff4ddcf36 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Mon, 13 Jan 2025 17:06:07 +0200
Subject: [PATCH] docs: load demo deps early on

Closes #2097
---
 docs/_includes/partials/javascript/dsd-init.html | 14 ++++++++++++++
 docs/_includes/partials/javascript/global.html   | 11 ++---------
 docs/elements/demo.html                          |  9 +--------
 3 files changed, 17 insertions(+), 17 deletions(-)
 create mode 100644 docs/_includes/partials/javascript/dsd-init.html

diff --git a/docs/_includes/partials/javascript/dsd-init.html b/docs/_includes/partials/javascript/dsd-init.html
new file mode 100644
index 0000000000..020d018c5e
--- /dev/null
+++ 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
index 28f7044e6c..1fc0b8907d 100644
--- 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
index 10e9764ccf..bd94eb4988 100644
--- 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';