Merge branch 'main' into MP-1798-limit-deployer-comment

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;
+}

package.json

@@ -77,10 +77,10 @@
     "@inquirer/prompts": "^7.2.0",
     "@lit/react": "^1.0.6",
     "@mdn/bcd-utils-api": "^0.0.7",
-    "@mdn/browser-compat-data": "^5.6.22",
+    "@mdn/browser-compat-data": "^5.6.23",
     "@mdn/rari": "^0.1.2",
     "@mozilla/glean": "5.0.3",
-    "@sentry/node": "^8.43.0",
+    "@sentry/node": "^8.44.0",
     "@stripe/stripe-js": "^5.2.0",
     "@use-it/interval": "^1.0.0",
     "@vscode/ripgrep": "^1.15.9",

yarn.lock

@@ -2200,10 +2200,10 @@
   resolved "https://registry.yarnpkg.com/@mdn/bcd-utils-api/-/bcd-utils-api-0.0.7.tgz#555e80c33df520df068943e6b18ebc07f0e24d19"
   integrity sha512-IHkkypEjlIkBkx4mJ2//Xbzog9M/Lzne1Sl8db2cIHJ/5pe3NCqSLwSchmqzcUN+/WJr/U+V3tNAbWunk2xZcA==
 
-"@mdn/browser-compat-data@^5.6.22":
-  version "5.6.22"
-  resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.6.22.tgz#d1c675eda679473c1f8777de2d8a49335cae143a"
-  integrity sha512-tssmUJmywWtEEhCoY9GMPCm9chGWwCytYrlbBaIFgePs6Ui5IBsTPiOyYocRApvC+wFoCjnxhPMYdz51if8Nlg==
+"@mdn/browser-compat-data@^5.6.23":
+  version "5.6.23"
+  resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.6.23.tgz#6ff21c5b1075039cf9f69e2a14807a64edb960c5"
+  integrity sha512-6h/L/id7JiuCcLKNZSliMfl9S159/ditQ/wc4TPlHJ/gcqoo4PNGggVaY6VcvVef9VFGuhh+UW27iAnEzQn+Kw==
 
 "@mdn/dinocons@^0.5.5":
   version "0.5.5"
@@ -2720,15 +2720,15 @@
   resolved "https://registry.yarnpkg.com/@sec-ant/readable-stream/-/readable-stream-0.4.1.tgz#60de891bb126abfdc5410fdc6166aca065f10a0c"
   integrity sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==
 
-"@sentry/core@8.43.0":
-  version "8.43.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-8.43.0.tgz#e96a489e87a9999199f5ac27d8860da37c1fa8b4"
-  integrity sha512-ktyovtjkTMNud+kC/XfqHVCoQKreIKgx/hgeRvzPwuPyd1t1KzYmRL3DBkbcWVnyOPpVTHn+RsEI1eRcVYHtvw==
+"@sentry/core@8.44.0":
+  version "8.44.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-8.44.0.tgz#3b6da46df7dfb638dcb35b9823300273a1fd7477"
+  integrity sha512-C43eW9Mr1WGpxCeI6pXUl7TeTwR2TwWhuU8wHx2s5eoATDQwbjz9l+JXXjVJf5YXXEwNOZL2WAx/f0diLA5rTQ==
 
-"@sentry/node@^8.43.0":
-  version "8.43.0"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-8.43.0.tgz#e7417a6c262f9492f68b522934bb75201b84abe1"
-  integrity sha512-qCQU9vFxf03ejw1h+qWJXCf0erV56HBi5xgi262lHiBLcRtuwj1xjufMVKOWX0sQEvAxzqpMZmqRE64lXLY4Ig==
+"@sentry/node@^8.44.0":
+  version "8.44.0"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-8.44.0.tgz#6323e9236b67c4781a1b9ed2893fbb985f73818c"
+  integrity sha512-mONfSnPwbkQEr0o5mhuJdLbxeEjyjt9VbYYXmXvHF/gQD7nzLYKkc6mA2rl74ITBZdyyKOTO7OmsSHMfD0f+ZA==
   dependencies:
     "@opentelemetry/api" "^1.9.0"
     "@opentelemetry/context-async-hooks" "^1.29.0"
@@ -2762,16 +2762,16 @@
     "@opentelemetry/sdk-trace-base" "^1.29.0"
     "@opentelemetry/semantic-conventions" "^1.28.0"
     "@prisma/instrumentation" "5.19.1"
-    "@sentry/core" "8.43.0"
-    "@sentry/opentelemetry" "8.43.0"
+    "@sentry/core" "8.44.0"
+    "@sentry/opentelemetry" "8.44.0"
     import-in-the-middle "^1.11.2"
 
-"@sentry/opentelemetry@8.43.0":
-  version "8.43.0"
-  resolved "https://registry.yarnpkg.com/@sentry/opentelemetry/-/opentelemetry-8.43.0.tgz#9823a3e4162bf464c12092149fe714ba5e5ba0b9"
-  integrity sha512-Ey+z1+JuMsb+LNY5MddJhjJpCnmkVwGZwoc5T/wWfh+5WKnvZ5RSNwaUl71Ho0lpVhhejwuUtaNxc4Ilk1KjhA==
+"@sentry/opentelemetry@8.44.0":
+  version "8.44.0"
+  resolved "https://registry.yarnpkg.com/@sentry/opentelemetry/-/opentelemetry-8.44.0.tgz#560e2cdd404136f45b0e4d7094e5e6613c0d252b"
+  integrity sha512-zOqDrsLJr6femKKs7Sp00FvsiextrDWNzNfNab3RACCmK3Ezj37Eoag23FHbxjCDuPouqIxLy3cxOygwnb/IoQ==
   dependencies:
-    "@sentry/core" "8.43.0"
+    "@sentry/core" "8.44.0"
 
 "@sidvind/[email protected]":
   version "3.0.1"