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,47 @@ 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>
+    ) {
+      return excludedTagNames.includes(tagName)
+        ? false
+        : super.matchesClass(ceClass, tagName, attributes);
+    }
+
+    // This tells SSR to not render a shadow root.
+    // renderShadow _can_ be undefined in lit-html's render-value.ts
+    // We should make it optional in ElementRenderer.
+    renderShadow = undefined as unknown as ElementRenderer['renderShadow'];
+  };
+};
+
 export const handleCatalogRoute = async (
   context: ParameterizedContext<
     DefaultState,
@@ -25,11 +64,18 @@ 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']),
+        ],
+      }
+    )
   );
   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-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>;