Use MWC for search input

packages/site-client/package.json

@@ -87,6 +87,7 @@
   },
   "dependencies": {
     "@lit-labs/task": "^2.0.0",
+    "@material/web": "^1.0.0-pre.1",
     "@webcomponents/catalog-api": "^0.0.0",
     "lit": "^2.6.0",
     "lit-analyzer": "^1.2.1"

packages/site-client/src/pages/catalog/wco-catalog-search.ts

@@ -6,6 +6,12 @@
 
 import {html, css, LitElement} from 'lit';
 import {customElement, query, state} from 'lit/decorators.js';
+
+import '@material/web/textfield/outlined-text-field.js';
+import type {MdOutlinedTextField} from '@material/web/textfield/outlined-text-field.js';
+
+import '@material/web/icon/icon.js';
+
 import type {CustomElement} from '@webcomponents/catalog-api/lib/schema.js';
 
 import './wco-element-card.js';
@@ -27,17 +33,30 @@ export class WCOCatalogSearch extends LitElement {
       grid-auto-rows: 200px;
       gap: 8px;
     }
+
+    md-outlined-text-field {
+      width: 40em;
+      --md-outlined-field-container-shape-start-start: 28px;
+      --md-outlined-field-container-shape-start-end: 28px;
+      --md-outlined-field-container-shape-end-start: 28px;
+      --md-outlined-field-container-shape-end-end: 28px;
+    }
   `;
 
-  @query('input')
-  private _search!: HTMLInputElement;
+  @query('#search')
+  private _search!: MdOutlinedTextField;
 
   @state()
   private _elements: Array<CustomElement> | undefined;
 
   render() {
     return html`
-      <p>Search: <input id="search" @change=${this._onChange} /></p>
+      <section id="search-panel">
+        <h2>Web Components.org Catalog</h2>
+        <md-outlined-text-field id="search" @change=${this._onChange}
+          ><md-icon slot="leadingicon">search</md-icon></md-outlined-text-field
+        >
+      </section>
       <div>
         ${this._elements?.map(
           (e) => html`<wco-element-card .element=${e}></wco-element-card>`

packages/site-server/src/lib/catalog/routes/catalog-page.ts

@@ -11,8 +11,105 @@ import {html} from 'lit';
 import {Readable} from 'stream';
 import Router from '@koa/router';
 
+import {LitElementRenderer} from '@lit-labs/ssr/lib/lit-element-renderer.js';
+import {ElementRenderer} from '@lit-labs/ssr/lib/element-renderer.js';
+
 import '@webcomponents/internal-site-client/lib/pages/catalog/wco-catalog-page.js';
 
+type Interface<T> = {
+  [P in keyof T]: T[P];
+};
+
+// TODO (justinfagnani): Update Lit SSR to use this type for
+// ElementRendererConstructor
+export type ElementRendererConstructor = (new (
+  tagName: string
+) => Interface<ElementRenderer>) &
+  typeof ElementRenderer;
+
+// Excludes the given tag names from being handled by the given renderer.
+// Returns a subclass of the renderer that returns `false` for matches()
+// for any element in the list of tag names.
+const excludeElements = (
+  renderer: ElementRendererConstructor,
+  excludedTagNames: Array<string>
+) => {
+  return class ExcludeElementRenderer extends renderer {
+    static matchesClass(
+      ceClass: typeof HTMLElement,
+      tagName: string,
+      attributes: Map<string, string>
+    ) {
+      console.log('matchesClass', tagName, !excludedTagNames.includes(tagName));
+      return excludedTagNames.includes(tagName)
+        ? false
+        : super.matchesClass(ceClass, tagName, attributes);
+    }
+  };
+};
+
+const replacements = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  // Note &apos; was not defined in the HTML4 spec, and is not supported by very
+  // old browsers like IE8, so a codepoint entity is used instead.
+  "'": '&#39;',
+};
+
+/**
+ * Replaces characters which have special meaning in HTML (&<>"') with escaped
+ * HTML entities ("&amp;", "&lt;", etc.).
+ */
+const escapeHtml = (str: string) =>
+  str.replace(
+    /[&<>"']/g,
+    (char) => replacements[char as keyof typeof replacements]
+  );
+
+// The built-in FallbackRenderer incorrectly causes a
+// shadow root to be rendered, which breaks hydration
+class FallbackRenderer extends ElementRenderer {
+  static matchesClass(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _ceClass: typeof HTMLElement,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _tagName: string,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _attributes: Map<string, string>
+  ) {
+    return true;
+  }
+  private readonly _attributes: {[name: string]: string} = {};
+
+  override setAttribute(name: string, value: string) {
+    this._attributes[name] = value;
+  }
+
+  override *renderAttributes() {
+    for (const [name, value] of Object.entries(this._attributes)) {
+      if (value === '' || value === undefined || value === null) {
+        yield ` ${name}`;
+      } else {
+        yield ` ${name}="${escapeHtml(value)}"`;
+      }
+    }
+  }
+
+  connectedCallback() {
+    // do nothing
+  }
+  attributeChangedCallback() {
+    // do nothing
+  }
+  *renderLight() {
+    // do nothing
+  }
+
+  declare renderShadow: ElementRenderer['renderShadow'];
+}
+
 export const handleCatalogRoute = async (
   context: ParameterizedContext<
     DefaultState,
@@ -25,11 +122,19 @@ export const handleCatalogRoute = async (
   globalThis.location = new URL(context.URL.href) as unknown as Location;
 
   context.body = Readable.from(
-    renderPage({
-      title: `Web Components Catalog`,
-      initScript: '/js/catalog/boot.js',
-      content: html`<wco-catalog-page></wco-catalog-page>`,
-    })
+    renderPage(
+      {
+        title: `Web Components Catalog`,
+        initScript: '/js/catalog/boot.js',
+        content: html`<wco-catalog-page></wco-catalog-page>`,
+      },
+      {
+        elementRenderers: [
+          excludeElements(LitElementRenderer, ['md-outlined-text-field']),
+          FallbackRenderer,
+        ],
+      }
+    )
   );
   context.type = 'html';
   context.status = 200;

packages/site-server/src/lib/dev-server.ts

@@ -29,6 +29,8 @@ startDevServer({
       router.routes() as Middleware<DefaultState, DefaultContext, unknown>,
     ],
     watch: true,
-    nodeResolve: true,
+    nodeResolve: {
+      exportConditions: ['development'],
+    },
   },
 });

packages/site-server/src/test/catalog/search_test.ts

@@ -34,4 +34,13 @@ test('Finds a button', async () => {
   assert.ok(result.elements.length > 2);
 });
 
+test('Search page SSRs', async () => {
+  const response = await request('/catalog');
+  assert.equal(response.status, 200);
+  const result = await response.text();
+
+  // If the page SSR's, we'll have declarative shadow roots in it.
+  assert.match(result, '<template shadowroot="open">');
+});
+
 test.run();

packages/site-templates/src/base.ts

@@ -14,6 +14,15 @@ import {escapeHTML} from './escape-html.js';
 export {unsafeHTML} from 'lit/directives/unsafe-html.js';
 export {html} from 'lit';
 
+// These are needed to load MWC components
+// See https://github.com/material-components/material-web/issues/3733
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).FormData = class FormData {};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).FormDataEvent = class FormDataEvent extends Event {};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).HTMLInputElement = class HTMLInputElement {};
+
 export function* renderPage(
   data: {
     scripts?: Array<string>;