feat(interactive-examples): get ready for JS migration (#12570)

* correct heights * add name attribute * use old string quoting logic * log non-structured-cloneable objects better
mdn · Feb 11, 2025 · 33de34d · 33de34d
1 parent 79f6f72
commit 33de34d
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 34 deletions.
diff --git a/client/src/lit/interactive-example.global.scss b/client/src/lit/interactive-example.global.scss
@@ -1,13 +1,13 @@
 interactive-example {
   display: block;
-  height: 513px;
+  height: 444px;
   margin: 1rem 0;
 
   &[height="shorter"] {
-    height: 433px;
+    height: 364px;
   }
 
   &[height="taller"] {
-    height: 725px;
+    height: 654px;
   }
 }
diff --git a/client/src/lit/interactive-example.js b/client/src/lit/interactive-example.js
@@ -14,8 +14,17 @@ import styles from "./interactive-example.scss?css" with { type: "css" };
  */
 
 export class InteractiveExample extends GleanMixin(LitElement) {
+  static properties = {
+    name: { type: String },
+  };
+
   static styles = styles;
 
+  constructor() {
+    super();
+    this.name = "";
+  }
+
   /** @type {Ref<PlayController>} */
   _controller = createRef();
 
@@ -71,7 +80,7 @@ export class InteractiveExample extends GleanMixin(LitElement) {
     return html`
       <play-controller ${ref(this._controller)}>
         <div class="template-javascript">
-          <h4>JavaScript Demo:</h4>
+          <h4>${this.name}</h4>
           <play-editor id="editor" language="javascript"></play-editor>
           <div class="buttons">
             <button id="execute" @click=${this._run}>Run</button>

diff --git a/client/src/lit/interactive-example.scss b/client/src/lit/interactive-example.scss
@@ -49,7 +49,7 @@ play-console {
     "editor  editor"
     "buttons console";
   grid-template-columns: max-content 1fr;
-  grid-template-rows: max-content 1fr;
+  grid-template-rows: max-content 1fr 8rem;
   height: 100%;
 
   play-runner {
@@ -63,6 +63,7 @@ play-console {
       "buttons"
       "console";
     grid-template-columns: 1fr;
+    grid-template-rows: max-content 1fr max-content 8rem;
 
     .buttons {
       flex-direction: row;

diff --git a/client/src/lit/play/console-utils.js b/client/src/lit/play/console-utils.js
@@ -74,6 +74,9 @@ export function formatObject(input) {
   }
 
   if (objectName === "Object") {
+    if (input?._MDNPlaySerializedObject) {
+      return input._MDNPlaySerializedObject;
+    }
     let formattedChild = "";
     let start = true;
     for (const key in input) {

diff --git a/client/src/lit/play/console.js b/client/src/lit/play/console.js
@@ -74,10 +74,7 @@ class VirtualConsole {
     }
     this.#host._messages = [
       ...this.#host._messages,
-      (args.every((x) => typeof x === "string")
-        ? args
-        : args.map((x) => formatOutput(x))
-      ).join(" "),
+      args.map((x) => formatOutput(x)).join(" "),
     ];
   }
 

diff --git a/client/src/lit/play/console.scss b/client/src/lit/play/console.scss
@@ -4,9 +4,7 @@
   display: flex;
   flex-direction: column;
   font-size: 0.875rem;
-  height: 6rem;
   margin: 0;
-  max-height: 6rem;
   overflow: auto;
   width: 100%;
 }

diff --git a/libs/play/index.js b/libs/play/index.js
@@ -248,37 +248,35 @@ export function renderHtml(state = null) {
                     {
                       typ: "console",
                       prop,
-                      args: args.map((x) => JSON.parse(JSON.stringify(x))),
+                      args: args.map((x) => {
+                        try {
+                          window.structuredClone(x);
+                          return x;
+                        } catch {
+                          return {
+                            _MDNPlaySerializedObject: x.toString(),
+                          };
+                        }
+                      }),
                     },
                     "*"
                   );
                 } catch {
-                  try {
-                    window.parent.postMessage(
-                      {
-                        typ: "console",
-                        prop,
-                        args: args.map((x) => x.toString()),
-                      },
-                      "*"
-                    );
-                  } catch {
-                    window.parent.postMessage(
-                      {
-                        typ: "console",
-                        prop: "warn",
-                        args: [
-                          "[Playground] Unsupported console message (see browser console)",
-                        ],
-                      },
-                      "*"
-                    );
-                  }
+                  window.parent.postMessage(
+                    {
+                      typ: "console",
+                      prop: "warn",
+                      args: [
+                        "[Playground] Unsupported console message (see browser console)",
+                      ],
+                    },
+                    "*"
+                  );
                 }
               }
               target[prop](...args);
             };
-          };
+          }
           return target[prop];
         },
       });