Merge pull request #850 from lit/ssr-search

Author: e111077

packages/lit-dev-content/package-lock.json

@@ -191,7 +191,6 @@
     "slugify": "^1.3.6"
   },
   "dependencies": {
-    "@lion/combobox": "^0.8.3",
     "@lit-labs/motion": "^1.0.1",
     "@lit-labs/task": "^1.0.0",
     "@lit/localize": "^0.10.0",

packages/lit-dev-content/package.json

@@ -31,27 +31,31 @@ const terserOptions = {
 export default [
   {
     input: [
+      // lit-hydrate-support MUST be loaded first to make sure lit hydration
+      // helpers are bundled before LitElement attempts to use hydration support
+      'lib/global/lit-hydrate-support.js',
       'lib/components/copy-button.js',
+      'lib/components/lazy-svg.js',
       'lib/components/litdev-aside.js',
       'lib/components/litdev-banner.js',
       'lib/components/litdev-version-selector.js',
       'lib/components/litdev-drawer.js',
       'lib/components/litdev-example.js',
       'lib/components/ts-js.js',
+      'lib/components/litdev-search.js',
       'lib/components/litdev-switchable-sample.js',
       'lib/components/litdev-tutorial.js',
       'lib/components/litdev-tutorial-card.js',
-      'lib/components/litdev-search.js',
       'lib/components/playground-elements.js',
       'lib/components/resize-bar.js',
       'lib/components/litdev-playground-page.js',
       'lib/github/github-signin-receiver-page.js',
+      'lib/global/hydrate-common-components.js',
       'lib/global/mobile-nav.js',
       'lib/pages/docs.js',
       'lib/pages/home.js',
       'lib/pages/home-components.js',
       'lib/pages/playground-inline.js',
-      'lib/global/lit-hydrate-support.js',
       'lib/global/dsd-polyfill.js',
     ],
     output: {

packages/lit-dev-content/rollup.config.js

@@ -8,38 +8,32 @@
     <meta name="description" content="Simple. Fast. Web Components.">
     <link rel="icon" href="{{ site.baseurl }}/images/flame-favicon.svg">
     <link rel="mask-icon" href="{{ site.baseurl }}/images/flame-favicon.svg" color="#324fff">
+    <link rel="modulepreload" href="{{ site.baseurl }}/js/global/lit-hydrate-support.js">
 
     {% inlinecss "global.css" %}
 
     {% inlinecss "mods.css" %}
     {% inlinejs "global/apply-mods.js" %}
     {% inlinejs "global/initialize-typescript-attribute.js" %}
     {% inlinejs "global/mobile-drawer.js" %}
-    {% if ssr %}
-      {% if not nohydrate %}
-        <script type="module" src="{{ site.baseurl }}/js/global/lit-hydrate-support.js"></script>
-      {% endif %}
-      {% inlinejs "global/dsd-polyfill.js" %}
-    {% endif %}
+    <script type="module" src="{{ site.baseurl }}/js/global/lit-hydrate-support.js"></script>
+    {% inlinejs "global/dsd-polyfill.js" %}
 
     {% if selectedVersion !== latestVersion %}
       <link rel="canonical" href="{{ versions[latestVersion].path }}/{{ versionLinks[latestVersion] }}">
       {% inlinejs "components/litdev-banner.js" %}
     {% endif %}
 
-    <!-- We need to load litdev-search first because @lion/core loads the
-         scoped-custom-element-registry polyfill. If MWC components are loaded
-         first the polyfill currently throws errors. -->
-    <script type="module" src="{{ site.baseurl }}/js/components/litdev-search.js"></script>
+    <script type="module" src="{{ site.baseurl }}/js/global/hydrate-common-components.js"></script>
 
     <script type="module" src="{{ site.baseurl }}/js/global/mobile-nav.js"></script>
-    <script type="module" src="{{ site.baseurl }}/js/components/litdev-version-selector.js"></script>
-    <script type="module" src="{{ site.baseurl }}/js/components/litdev-aside.js"></script>
+    {% if not noaside %}
+      <script type="module" src="{{ site.baseurl }}/js/components/litdev-aside.js"></script>
+    {% endif %}
 
     <!-- Preload common chunks we always need. Note <link rel="modulepreload">
          isn't yet supported in Firefox or Safari. -->
     {% if not env.DEV %}
-      <script type="module" src="{{ site.baseurl }}/js/lit.js"></script>
       <script type="module" src="{{ site.baseurl }}/js/tslib.js"></script>
       <script type="module" src="{{ site.baseurl }}/js/mwc-base.js"></script>
       <script type="module" src="{{ site.baseurl }}/js/mwc-icon-button.js"></script>
@@ -48,9 +42,10 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
 
     <link href="/blog/atom.xml" rel="alternate" type="application/atom+xml" title="Lit Blog feed">
+    <noscript><style>body[dsd-pending] {display: block !important;}</style></noscript>
     {% block head %}{% endblock %}
   </head>
-  <body {% if ssr %}dsd-pending{% endif %}>
+  <body dsd-pending>
     <mwc-drawer type="modal" id="mobileDrawer">
       <nav>
         <div id="mobileSiteNav">