docs: load demo deps early on (#2119)

* docs: load demo deps early on Closes #2097 * docs: eagerly load tag definition * docs: streamline module loading try to load ssr support modules in one place only, see if that still works with webkit * docs: markdown tables ftw this commit is especially for @zeroedin's benefit
RedHat-UX · Jan 14, 2025 · f7666d7 · f7666d7
1 parent 04fc9a5
commit f7666d7
Show file tree

Hide file tree

Showing 17 changed files with 185 additions and 374 deletions.
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
@@ -31,7 +31,27 @@
       </style>
     </noscript>
 
-    {% include "../partials/javascript/global.html" %}
+    <script type="importmap">{{ importMap | dump(2) | safe }}</script>
+
+    {# ensure SSR support modules are loaded first #}
+    {% include 'partials/javascript/dsd-init.html' %}
+
+    {# load all components #}
+    {% for tag in importElements %}
+      <script type="module">import '@rhds/elements/{{tag}}/{{tag}}.js';</script>
+    {% endfor %}
+
+    {# 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';
+    </script>
+
+    <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
+
+
   </head>
 
   <body dsd-pending class="{{ extraPageClasses }}">

diff --git a/docs/_includes/layouts/pages/element.11ty.ts b/docs/_includes/layouts/pages/element.11ty.ts
@@ -89,6 +89,9 @@ export default class ElementsPage extends Renderer<Context> {
       </noscript>
 
       <script type="module" data-helmet>
+        // although we load these ssr support modules elsewhere, we still
+        // need them here to ensure no double-rendering on webkit
+        import '/assets/javascript/ssr-support.js';
         import '@uxdot/elements/uxdot-copy-button.js';
         import '@uxdot/elements/uxdot-copy-permalink.js';
         import '@uxdot/elements/uxdot-best-practice.js';
@@ -961,4 +964,3 @@ export default class ElementsPage extends Renderer<Context> {
     }
   }
 };
-
diff --git a/docs/_includes/layouts/pages/has-toc.njk b/docs/_includes/layouts/pages/has-toc.njk
@@ -12,6 +12,9 @@ layout: layouts/base.njk
       data-helmet>
 
 <script type="module" data-helmet>
+  // although we load these ssr support modules elsewhere, we still
+  // need them here to ensure no double-rendering on webkit
+  import '/assets/javascript/ssr-support.js';
   import '@uxdot/elements/uxdot-toc.js';
 </script>
 

diff --git a/docs/_includes/partials/javascript/dsd-init.html b/docs/_includes/partials/javascript/dsd-init.html
@@ -0,0 +1,13 @@
+  <script type="module">
+    // although we load these ssr support modules elsewhere, we still
+    // need them here to ensure no double-rendering on webkit
+    import '/assets/javascript/ssr-support.js';
+    // 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';
+    import '@rhds/elements/rh-tag/rh-tag.js';
+  </script>
diff --git a/docs/_includes/partials/javascript/global.html b/docs/_includes/partials/javascript/global.html
diff --git a/docs/about/roadmap.md b/docs/about/roadmap.md
@@ -5,10 +5,12 @@ order: 20
 bodyClasses: page-docs
 tags:
   - about
-importElements:
-  - rh-tile
 ---
 
+<script type="module" data-helmet>
+  import '@rhds/elements/rh-tile/rh-tile.js';
+</script>
+
 <link data-helmet rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css">
 
 <style data-helmet>

diff --git a/docs/accessibility/accessibility-tools.md b/docs/accessibility/accessibility-tools.md
@@ -5,10 +5,12 @@ permalink: /accessibility/accessibility-tools/index.html
 tags:
   - accessibility
 order: 10
-importElements:
-  - rh-blockquote
 ---
 
+<script type="module" data-helmet>
+  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
+</script>
+
 ## Automated Accessibility Tools
 
 Automated tools can help you quickly identify many potential high-impact accessibility issues. Among such tools are free browser extensions like:

diff --git a/docs/accessibility/content.md b/docs/accessibility/content.md
@@ -3,16 +3,18 @@ title: Content
 tags:
   - accessibility
 order: 40
-importElements:
-  - rh-code-block
-  - rh-blockquote
-  - rh-table
 ---
 
 <link data-helmet
       rel="stylesheet"
       href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
 
+<script type="module" data-helmet>
+  import '@rhds/elements/rh-code-block/rh-code-block.js';
+  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
+  import '@rhds/elements/rh-table/rh-table.js';
+</script>
+
 <style data-helmet>
   rh-blockquote {
     display: block;

diff --git a/docs/accessibility/index.md b/docs/accessibility/index.md
@@ -3,10 +3,12 @@ title: Fundamentals
 tags:
   - accessibility
 order: 75
-importElements:
-  - rh-blockquote
 ---
 
+<script type="module" data-helmet>
+  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
+</script>
+
 <style>
   rh-blockquote {
     display: block;

diff --git a/docs/accessibility/screen-readers.md b/docs/accessibility/screen-readers.md
@@ -5,10 +5,12 @@ permalink: /accessibility/screen-readers/index.html
 tags:
   - accessibility
 order: 100
-importElements:
-  - rh-tile
 ---
 
+<script type="module" data-helmet>
+  import '@rhds/elements/rh-tile/rh-tile.js';
+</script>
+
 <link rel="stylesheet"
       data-helmet
       href="/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css">

diff --git a/docs/assets/javascript/ssr-support.js b/docs/assets/javascript/ssr-support.js
@@ -0,0 +1,5 @@
+// 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';
diff --git a/docs/elements/demo.html b/docs/elements/demo.html
@@ -23,15 +23,11 @@
     <link rel="stylesheet" href="/styles/demo/styles.css" media="all">
 
     <script type="importmap">{{ importMap | dump(2) | safe }}</script>
+
+    {# ensure SSR support modules are loaded first #}
+    {% 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';

diff --git a/docs/get-started/developers/index.md b/docs/get-started/developers/index.md
@@ -11,11 +11,13 @@ subnav:
   collection: sortedDevelopers
   order: 00
 order: 20
-importElements:
-  - rh-card
-  - rh-cta
 ---
 
+<script type="module" data-helmet>
+  import '@rhds/elements/rh-card/rh-card.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+</script>
+
 <style data-helmet>
   .grid > rh-card {
     display: grid;

diff --git a/docs/get-started/index.md b/docs/get-started/index.md
@@ -4,12 +4,14 @@ title: Overview
 order: 00
 tags:
   - getstarted
-importElements:
-  - rh-tile
 ---
 
 <link data-helmet rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css">
 
+<script type="module" data-helmet>
+  import '@rhds/elements/rh-tile/rh-tile.js';
+</script>
+
 <style data-helmet>
   #get-started-nav {
     margin-block-start: var(--rh-space-2xl, 32px);

diff --git a/docs/patterns/logo-wall/examples.md b/docs/patterns/logo-wall/examples.md
@@ -9,12 +9,11 @@ tags:
 subnav:
   collection: logowallPatterns
   order: 4
-importElements:
-  - rh-cta
-  - rh-surface
 ---
 
 <script type="module" data-helmet>
+  import '@rhds/elements/rh-surface/rh-surface.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
   import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
 </script>