From a9daa1fdb92401521bfb3e3ab4693c68957320c7 Mon Sep 17 00:00:00 2001
From: Leo McArdle <leo@mca.is>
Date: Thu, 12 Dec 2024 12:42:31 +0000
Subject: [PATCH] chore(playground): migrate console to web component (#12251)

https://mozilla-hub.atlassian.net/browse/MP-1739
---
 client/src/playground/console.js   | 49 ++++++++++++++++++++++++++++++
 client/src/playground/console.scss | 38 +++++++++++++++++++++++
 client/src/playground/console.tsx  | 30 ------------------
 client/src/playground/index.scss   | 31 -------------------
 client/src/playground/index.tsx    |  5 +--
 client/src/playground/types.d.ts   |  4 +++
 6 files changed, 94 insertions(+), 63 deletions(-)
 create mode 100644 client/src/playground/console.js
 create mode 100644 client/src/playground/console.scss
 delete mode 100644 client/src/playground/console.tsx
 create mode 100644 client/src/playground/types.d.ts

diff --git a/client/src/playground/console.js b/client/src/playground/console.js
new file mode 100644
index 000000000000..e087a7c6b7b3
--- /dev/null
+++ b/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,
+});
diff --git a/client/src/playground/console.scss b/client/src/playground/console.scss
new file mode 100644
index 000000000000..42f969410d11
--- /dev/null
+++ b/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;
+}
diff --git a/client/src/playground/console.tsx b/client/src/playground/console.tsx
deleted file mode 100644
index 6a182d441a86..000000000000
--- a/client/src/playground/console.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export interface VConsole {
-  prop: string;
-  message: string;
-}
-
-export function Console({ vConsole }: { vConsole: VConsole[] }) {
-  const consoleUl = useRef<HTMLUListElement | null>(null);
-  const scrollToBottom = () => {
-    consoleUl.current?.scrollTo({ top: consoleUl.current?.scrollHeight });
-  };
-  useEffect(() => {
-    scrollToBottom();
-  }, [vConsole]);
-  return (
-    <div id="play-console">
-      <span>Console</span>
-      <ul ref={consoleUl}>
-        {vConsole.map(({ prop, message }, i) => {
-          return (
-            <li key={i}>
-              <code>{message}</code>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-}
diff --git a/client/src/playground/index.scss b/client/src/playground/index.scss
index d4a921affbeb..8789a49388b3 100644
--- a/client/src/playground/index.scss
+++ b/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: ">";
-            }
-          }
-        }
-      }
     }
   }
 }
diff --git a/client/src/playground/index.tsx b/client/src/playground/index.tsx
index fd494c5e26af..67d54f06ab42 100644
--- a/client/src/playground/index.tsx
+++ b/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>
diff --git a/client/src/playground/types.d.ts b/client/src/playground/types.d.ts
new file mode 100644
index 000000000000..14cb634d04f2
--- /dev/null
+++ b/client/src/playground/types.d.ts
@@ -0,0 +1,4 @@
+export interface VConsole {
+  prop: string;
+  message: string;
+}