Merge pull request #851 from lit/mwc-home-page-perf

Author: e111077

Diff for: packages/lit-dev-content/.eleventy.js

@@ -33,7 +33,6 @@ const luxon = require('luxon');
 const crypto = require('crypto');
 const pluginRss = require('@11ty/eleventy-plugin-rss');
 const litPlugin = require('@lit-labs/eleventy-plugin-lit');
-const {componentsToSSR} = require('./src/components/ssr.js');
 
 // Use the same slugify as 11ty for markdownItAnchor. It's similar to Jekyll,
 // and preserves the existing URL fragments
@@ -77,9 +76,8 @@ module.exports = function (eleventyConfig) {
     '../lit-dev-content/samples/tutorials/**/tutorial.json'
   );
   eleventyConfig.addWatchTarget('../lit-dev-content/samples/tutorials/**/*.md');
-  for (const component of componentsToSSR) {
-    eleventyConfig.addWatchTarget(component);
-  }
+  eleventyConfig.addWatchTarget('../lit-dev-content/rollupout/server/*');
+  eleventyConfig.addWatchTarget('../lit-dev-content/lib/components/ssr.js');
 
   // Placeholder shortcode for TODOs
   // Formatting is intentional: outdenting the HTML causes the
@@ -539,12 +537,13 @@ ${content}
         return 0;
       });
   });
-  let componentModules = componentsToSSR;
+
+  let componentModules = ['lib/components/ssr.js'];
 
   // In prod SSR should use the lit templates run through the minifier.
   if (!DEV) {
-    componentModules = componentsToSSR.map((componentPath) =>
-      componentPath.replace(/^lib\//, 'rollupout/')
+    componentModules = componentModules.map((componentPath) =>
+      componentPath.replace('lib/components', 'rollupout/server')
     );
   }
 

Diff for: packages/lit-dev-content/package-lock.json

@@ -199,8 +199,6 @@
     "@material/mwc-dialog": "^0.25.1",
     "@material/mwc-drawer": "^0.25.1",
     "@material/mwc-formfield": "^0.25.1",
-    "@material/mwc-icon-button": "^0.25.1",
-    "@material/mwc-icon-button-toggle": "^0.25.1",
     "@material/mwc-snackbar": "^0.25.1",
     "@material/mwc-textfield": "^0.25.1",
     "lit": "^2.1.0",

Diff for: packages/lit-dev-content/package.json

@@ -30,28 +30,24 @@ const terserOptions = {
 
 export default [
   {
+    name: 'client',
     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/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',
@@ -101,6 +97,27 @@ export default [
       }),
     ],
   },
+  {
+    name: 'SSR',
+    input: [
+      // A separate bundle is made for the server so that we do not modify the
+      // client module graph just to SSR a component.
+      'lib/components/ssr.js',
+    ],
+    output: {
+      dir: 'rollupout/server',
+      format: 'esm',
+    },
+    plugins: [
+      resolve(),
+      minifyHTML(),
+      terser(terserOptions),
+      summary({
+        // Already minified.
+        showMinifiedSize: false,
+      }),
+    ],
+  },
 
   // These scripts are inlined and must run before first render because they set
   // global CSS classes/attributes that would otherwise cause restyle/relayout.

Diff for: packages/lit-dev-content/rollup.config.js

@@ -8,15 +8,24 @@
     <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">
+    <link rel="modulepreload" href="{{ site.baseurl }}/js/tslib.js">
+    {% if not env.DEV %}
+    <link rel="modulepreload" href="{{ site.baseurl }}/js/lit.js">
+    {% endif %}
+    <link rel="modulepreload" href="{{ site.baseurl }}/js/global/hydrate-common-components.js">
 
     {% inlinecss "global.css" %}
 
     {% inlinecss "mods.css" %}
     {% inlinejs "global/apply-mods.js" %}
     {% inlinejs "global/initialize-typescript-attribute.js" %}
     {% inlinejs "global/mobile-drawer.js" %}
-    <script type="module" src="{{ site.baseurl }}/js/global/lit-hydrate-support.js"></script>
+    {% if env.DEV %}
+      <script type="module" src="{{ site.baseurl }}/js/global/lit-hydrate-support.js"></script>
+    {% else %}
+      <!-- Loads lit-hydration since we manually chunk this -->
+      <script type="module" href="{{ site.baseurl }}/js/lit.js"></script>
+    {% endif %}
     {% inlinejs "global/dsd-polyfill.js" %}
 
     {% if selectedVersion !== latestVersion %}
@@ -26,7 +35,6 @@
 
     <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>
     {% if not noaside %}
       <script type="module" src="{{ site.baseurl }}/js/components/litdev-aside.js"></script>
     {% endif %}
@@ -35,8 +43,6 @@
          isn't yet supported in Firefox or Safari. -->
     {% if not env.DEV %}
       <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>
     {% endif %}
 
     <link rel="preconnect" href="https://fonts.gstatic.com">

Diff for: packages/lit-dev-content/site/_includes/default.html

@@ -8,13 +8,13 @@
       {% include 'site-nav.html' %}
     </ol>
 
-    <mwc-icon-button
+    <litdev-ripple-icon-button
       id="mobileMenuButton"
       label="Open menu"
     >
       <svg height="24" width="24" fill="currentcolor">
         <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
       </svg>
-    </mwc-icon-button>
+    </litdev-ripple-icon-button>
   </nav>
 </header>

Diff for: packages/lit-dev-content/site/_includes/header.html

@@ -82,9 +82,4 @@ header > nav {
   header {
     padding: 0 0.5em;
   }
-
-  /* Eliminate sizing FOUC before menu button upgrades. */
-  header mwc-icon-button:not(:defined) {
-    padding: 12px;
-  }
 }

Diff for: packages/lit-dev-content/site/css/header.css

@@ -102,7 +102,7 @@ litdev-tutorial {
   align-items: center;
 }
 
-#tutorialHeader .lhs mwc-icon-button {
+#tutorialHeader .lhs litdev-ripple-icon-button {
   margin-inline-end: .5em;
 }
 

Diff for: packages/lit-dev-content/site/css/tutorial.css

@@ -8,7 +8,7 @@ import {LitElement, html, css} from 'lit';
 import {property} from 'lit/decorators.js';
 import {copyIcon} from '../icons/copy-icon.js';
 
-import '@material/mwc-icon-button';
+import './litdev-ripple-icon-button.js';
 
 /**
  * A button that copies some text when clicked.
@@ -25,13 +25,12 @@ export class CopyButton extends LitElement {
   text?: string;
 
   render() {
-    return html`<mwc-icon-button
-      outlined
+    return html`<litdev-ripple-icon-button
       @click=${this._click}
-      aria-label="Copy to clipboard"
+      label="Copy to clipboard"
     >
       ${copyIcon}
-    </mwc-icon-button>`;
+    </litdev-ripple-icon-button>`;
   }
 
   private _click() {

Diff for: packages/lit-dev-content/src/components/copy-button.ts

@@ -6,6 +6,7 @@
 
 import {css, html, LitElement, nothing, PropertyValues} from 'lit';
 import {customElement, property, state, query} from 'lit/decorators.js';
+import {onIdle} from '../util/hydration-helpers';
 
 /**
  * Strategies for loading the SVG. idle, waits for the idle callback, eager
@@ -100,7 +101,7 @@ export default class LazySvg extends LitElement {
   updated(changed: PropertyValues<this>) {
     if (changed.has('loading')) {
       if (this.loading === 'idle') {
-        this._idleLoad();
+        onIdle(this._onIdle);
       } else if (this.loading === 'visible') {
         // Must happen in `updated` because in non-SSR the DOM is not ready
         this._visibleLoad();
@@ -110,16 +111,9 @@ export default class LazySvg extends LitElement {
     super.updated(changed);
   }
 
-  private _idleLoad() {
-    if ('requestIdleCallback' in window) {
-      (window as any).requestIdleCallback(() => (this._shouldLoad = true));
-    } else {
-      // Safari doesn't have idle callback so just wait 200ms
-      setTimeout(() => {
-        this._shouldLoad = true;
-      }, 200);
-    }
-  }
+  private _onIdle = () => {
+    this._shouldLoad = true;
+  };
 
   private _visibleLoad() {
     const observer = new IntersectionObserver(

Diff for: packages/lit-dev-content/src/components/lazy-svg.ts

@@ -14,7 +14,40 @@
 
 import {LitElement, html, css} from 'lit';
 import {property, customElement} from 'lit/decorators.js';
-import '@material/mwc-icon-button-toggle';
+import './litdev-ripple-icon-button.js';
+
+// https://material.io/resources/icons/?icon=close
+const closeIcon = html` <svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="currentcolor"
+>
+  <path
+    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+  />
+</svg>`;
+
+// Source: https://material.io/resources/icons/?icon=menu_book
+const bookIcon = html` <svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="currentcolor"
+>
+  <path
+    d="M21,5c-1.11-0.35-2.33-0.5-3.5-0.5c-1.95,0-4.05,0.4-5.5,1.5c-1.45-1.1-3.55-1.5-5.5-1.5S2.45,4.9,1,6v14.65 c0,0.25,0.25,0.5,0.5,0.5c0.1,0,0.15-0.05,0.25-0.05C3.1,20.45,5.05,20,6.5,20c1.95,0,4.05,0.4,5.5,1.5c1.35-0.85,3.8-1.5,5.5-1.5 c1.65,0,3.35,0.3,4.75,1.05c0.1,0.05,0.15,0.05,0.25,0.05c0.25,0,0.5-0.25,0.5-0.5V6C22.4,5.55,21.75,5.25,21,5z M21,18.5 c-1.1-0.35-2.3-0.5-3.5-0.5c-1.7,0-4.15,0.65-5.5,1.5V8c1.35-0.85,3.8-1.5,5.5-1.5c1.2,0,2.4,0.15,3.5,0.5V18.5z"
+  />
+  <path
+    d="M17.5,10.5c0.88,0,1.73,0.09,2.5,0.26V9.24C19.21,9.09,18.36,9,17.5,9c-1.7,0-3.24,0.29-4.5,0.83v1.66 C14.13,10.85,15.7,10.5,17.5,10.5z"
+  />
+  <path
+    d="M13,12.49v1.66c1.13-0.64,2.7-0.99,4.5-0.99c0.88,0,1.73,0.09,2.5,0.26V11.9c-0.79-0.15-1.64-0.24-2.5-0.24 C15.8,11.66,14.26,11.96,13,12.49z"
+  />
+  <path
+    d="M17.5,14.33c-1.7,0-3.24,0.29-4.5,0.83v1.66c1.13-0.64,2.7-0.99,4.5-0.99c0.88,0,1.73,0.09,2.5,0.26v-1.52 C19.21,14.41,18.36,14.33,17.5,14.33z"
+  />
+</svg>`;
 
 /**
  * A drawer that expands and collapses.
@@ -66,6 +99,9 @@ export class LitDevDrawer extends LitElement {
     }
 
     #openCloseButton {
+      width: 37px;
+      height: 37px;
+      padding: 4px;
       position: absolute;
       /* Align close icon to content, accounting for larger touch target */
       right: 0;
@@ -114,47 +150,13 @@ export class LitDevDrawer extends LitElement {
       <div id="header" part="header">
         <slot name="header"></slot>
 
-        <mwc-icon-button-toggle
+        <litdev-ripple-icon-button
           id="openCloseButton"
           aria-label="Open or close examples drawer"
-          .on=${!this.open}
           @click=${this._onClickToggleButton}
         >
-          <!-- Source: https://material.io/resources/icons/?icon=close --->
-          <svg
-            slot="offIcon"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="currentcolor"
-          >
-            <path
-              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-            />
-          </svg>
-
-          <!-- Source: https://material.io/resources/icons/?icon=menu_book --->
-          <svg
-            slot="onIcon"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="currentcolor"
-          >
-            <path
-              d="M21,5c-1.11-0.35-2.33-0.5-3.5-0.5c-1.95,0-4.05,0.4-5.5,1.5c-1.45-1.1-3.55-1.5-5.5-1.5S2.45,4.9,1,6v14.65 c0,0.25,0.25,0.5,0.5,0.5c0.1,0,0.15-0.05,0.25-0.05C3.1,20.45,5.05,20,6.5,20c1.95,0,4.05,0.4,5.5,1.5c1.35-0.85,3.8-1.5,5.5-1.5 c1.65,0,3.35,0.3,4.75,1.05c0.1,0.05,0.15,0.05,0.25,0.05c0.25,0,0.5-0.25,0.5-0.5V6C22.4,5.55,21.75,5.25,21,5z M21,18.5 c-1.1-0.35-2.3-0.5-3.5-0.5c-1.7,0-4.15,0.65-5.5,1.5V8c1.35-0.85,3.8-1.5,5.5-1.5c1.2,0,2.4,0.15,3.5,0.5V18.5z"
-            />
-            <path
-              d="M17.5,10.5c0.88,0,1.73,0.09,2.5,0.26V9.24C19.21,9.09,18.36,9,17.5,9c-1.7,0-3.24,0.29-4.5,0.83v1.66 C14.13,10.85,15.7,10.5,17.5,10.5z"
-            />
-            <path
-              d="M13,12.49v1.66c1.13-0.64,2.7-0.99,4.5-0.99c0.88,0,1.73,0.09,2.5,0.26V11.9c-0.79-0.15-1.64-0.24-2.5-0.24 C15.8,11.66,14.26,11.96,13,12.49z"
-            />
-            <path
-              d="M17.5,14.33c-1.7,0-3.24,0.29-4.5,0.83v1.66c1.13-0.64,2.7-0.99,4.5-0.99c0.88,0,1.73,0.09,2.5,0.26v-1.52 C19.21,14.41,18.36,14.33,17.5,14.33z"
-            />
-          </svg>
-        </mwc-icon-button-toggle>
+          ${this.open ? closeIcon : bookIcon}
+        </litdev-ripple-icon-button>
       </div>
 
       <div id="content">