chore(playground): migrate console to web component (#12251)

https://mozilla-hub.atlassian.net/browse/MP-1739

client/src/playground/console.js

@@ -0,0 +1,49 @@
+import { createComponent } from "@lit/react";
+import { html, LitElement } from "lit";
+import React from "react";
+
+import styles from "./console.scss?css" with { type: "css" };
+
+/** @import { VConsole } from "./types" */
+
+export class PlayConsole extends LitElement {
+  static properties = {
+    vConsole: { attribute: false },
+  };
+
+  static styles = styles;
+
+  constructor() {
+    super();
+    /** @type {VConsole[]} */
+    this.vConsole = [];
+  }
+
+  render() {
+    return html`
+      <span class="header">Console</span>
+      <ul>
+        ${this.vConsole.map(({ message }) => {
+          return html`
+            <li>
+              <code>${message}</code>
+            </li>
+          `;
+        })}
+      </ul>
+    `;
+  }
+
+  updated() {
+    const output = this.renderRoot.querySelector("ul");
+    output?.scrollTo({ top: output.scrollHeight });
+  }
+}
+
+customElements.define("play-console", PlayConsole);
+
+export const ReactPlayConsole = createComponent({
+  tagName: "play-console",
+  elementClass: PlayConsole,
+  react: React,
+});

client/src/playground/console.scss

@@ -0,0 +1,38 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--type-smaller-font-size);
+  margin: 0;
+  width: 100%;
+}
+
+.header {
+  background-color: var(--code-background-inline);
+  font-weight: 600;
+  text-align: center;
+  width: 100%;
+}
+
+ul {
+  background-color: var(--code-background-inline);
+  height: 6rem;
+  list-style: none;
+  margin: 0;
+  max-height: 6rem;
+  overflow: auto;
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  padding: 0 1rem;
+
+  &::before {
+    content: ">";
+  }
+}
+
+code {
+  font-family: var(--font-code);
+  tab-size: 4;
+}

client/src/playground/index.scss

@@ -235,37 +235,6 @@ main.play {
         height: 100%;
         width: 100%;
       }
-
-      #play-console {
-        display: flex;
-        flex-direction: column;
-        font-size: smaller;
-        margin: 0;
-        width: 100%;
-
-        > span {
-          background-color: var(--code-background-inline);
-          font-weight: 600;
-          text-align: center;
-          width: 100%;
-        }
-
-        ul {
-          background-color: var(--code-background-inline);
-          height: 6rem;
-          max-height: 6rem;
-          overflow: auto;
-          width: 100%;
-
-          li {
-            padding: 0 1rem;
-
-            &::before {
-              content: ">";
-            }
-          }
-        }
-      }
     }
   }
 }

client/src/playground/index.tsx

@@ -21,9 +21,10 @@ import {
 import "./index.scss";
 import { PLAYGROUND_BASE_HOST } from "../env";
 import { FlagForm, ShareForm } from "./forms";
-import { Console, VConsole } from "./console";
+import { ReactPlayConsole } from "./console";
 import { useGleanClick } from "../telemetry/glean-context";
 import { PLAYGROUND } from "../telemetry/constants";
+import type { VConsole } from "./types";
 
 const HTML_DEFAULT = "";
 const CSS_DEFAULT = "";
@@ -420,7 +421,7 @@ export default function Playground() {
             src={iframeSrc}
             sandbox="allow-scripts allow-same-origin allow-forms"
           ></iframe>
-          <Console vConsole={vConsole} />
+          <ReactPlayConsole vConsole={vConsole} />
           <SidePlacement extraClasses={["horizontal"]} />
         </section>
       </main>

client/src/playground/types.d.ts

@@ -0,0 +1,4 @@
+export interface VConsole {
+  prop: string;
+  message: string;
+}