@mdn/fred 0.1.0 → 0.2.0

package/components/scrim-inline/global.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "BarlowCondensed-SemiBold";
-  font-weight: 600;
+  font-weight: var(--font-weight-bold);
 
   src:
     local("BarlowCondensed-SemiBold"),

package/components/search-button/element.css

@@ -10,11 +10,17 @@
   padding-left: 0.75rem;
   margin: 0;
 
+  color: var(--color-text-primary);
+
   cursor: pointer;
 
   background-color: var(--color-background-page);
   border: 1px solid var(--color-border-primary);
-  border-radius: calc(infinity * 1px);
+  border-radius: var(--radius-full);
+
+  &:hover {
+    background-color: var(--color-background-secondary);
+  }
 
   &::before {
     width: 15px;

package/components/search-modal/element.css

@@ -6,47 +6,74 @@
 
 dialog {
   padding: 0;
+  border: 0;
 
-  background-color: var(--color-background-primary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 0.5rem;
-
-  /* Desktop menu */
-  @media (width > 1006px) {
+  @media (--screen-menu-full) {
     width: calc(var(--layout-content-max) + 1rem);
     max-height: calc(100% - var(--sticky-header-height) - 2rem);
+
     margin: calc(var(--sticky-header-height) + 1rem) auto 1rem;
+
+    font-size: var(--font-size-large);
+
+    background-color: var(--color-background-primary);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 0.5rem;
+
+    &::backdrop {
+      background-color: light-dark(
+        var(--color-white-alpha-75),
+        var(--color-black-alpha-75)
+      );
+      backdrop-filter: blur(3px);
+    }
   }
 
-  /* Mobile menu */
-  @media (width <= 1006px) {
+  @media (--screen-menu-hamburger) {
     width: 100%;
-    max-height: calc(100% - 2rem);
-    margin: 1rem auto;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+
+    margin: 0;
+
+    font-size: var(--font-size-normal);
   }
 
   &[open] {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+
+    grid-template-areas:
+      "search   close"
+      "progress progress"
+      "results  results";
+    grid-template-rows: var(--navigation-height) min-content min-content;
+    grid-template-columns: 1fr min-content;
   }
+}
+
+progress {
+  grid-area: progress;
+  margin: 0 1rem 0.5rem;
 
-  &::backdrop {
-    background-color: light-dark(
-      var(--color-white-alpha-75),
-      var(--color-black-alpha-75)
-    );
-    backdrop-filter: blur(3px);
+  @media (--screen-menu-hamburger) {
+    margin-inline: 0.3rem;
   }
 }
 
-progress {
-  width: calc(100% - 2rem);
-  margin: 0 auto 0.5rem;
+.close {
+  grid-area: close;
+  font-size: 1.37rem;
+
+  @media (--screen-menu-full) {
+    display: none;
+  }
 }
 
 form {
   display: grid;
 
+  grid-area: search;
   grid-template-columns: min-content 1fr;
 
   gap: 0.5rem;
@@ -54,7 +81,16 @@ form {
 
   padding: 1rem;
 
-  font-size: var(--font-size-large);
+  @media (--screen-menu-hamburger) {
+    align-self: center;
+
+    padding: 0.5rem;
+    margin-left: 0.3rem;
+
+    background-color: var(--color-background-primary);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 0.5rem;
+  }
 
   &::before {
     width: 1em;
@@ -88,6 +124,8 @@ input {
 }
 
 ul {
+  grid-area: results;
+
   padding: 0;
   margin: 0;
 
@@ -129,10 +167,6 @@ a {
   }
 }
 
-.title {
-  font-size: var(--font-size-large);
-}
-
 .slug {
   font-size: var(--font-size-small);
   color: var(--color-text-secondary);
@@ -140,5 +174,5 @@ a {
 
 mark {
   color: var(--color-text-primary);
-  background-color: light-dark(var(--color-yellow-80), var(--color-yellow-20));
+  background-color: var(--color-background-yellow);
 }

package/components/search-modal/element.js

@@ -5,6 +5,8 @@ import { L10nMixin } from "../../l10n/mixin.js";
 
 import { mdnUrl2Breadcrumb } from "../../utils/mdn-url2breadcrumb.js";
 
+import exitIcon from "../icon/cancel.svg?lit";
+
 import styles from "./element.css?lit";
 
 export class MDNSearchModal extends L10nMixin(LitElement) {
@@ -164,6 +166,10 @@ export class MDNSearchModal extends L10nMixin(LitElement) {
     },
   });
 
+  _close() {
+    this.shadowRoot?.querySelector("dialog")?.close();
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this._globalKeydown = this._globalKeydown.bind(this);
@@ -198,6 +204,14 @@ export class MDNSearchModal extends L10nMixin(LitElement) {
             aria-label=${this.l10n`Search`}
           />
         </form>
+        <mdn-button
+          class="close"
+          variant="plain"
+          icon-only
+          .icon=${exitIcon}
+          @click=${this._close}
+          >${this.l10n`Exit search`}</mdn-button
+        >
         ${this._queryIndex.render({
           initial: this._renderLoadingSearchIndex.bind(this),
           pending: this._renderLoadingSearchIndex.bind(this),

package/components/sidebar-filter/element.css

@@ -57,7 +57,7 @@
   color: var(--color-text-primary);
 
   border: 1px solid var(--color-border-primary);
-  border-radius: calc(infinity * 1px);
+  border-radius: var(--radius-full);
 
   &::placeholder {
     color: var(--color-text-secondary);

package/components/site-search/element.css

@@ -1,3 +1,5 @@
+@import url("../global/global.css");
+
 :host {
   line-height: var(--font-line-content);
 
@@ -13,10 +15,7 @@
   a:active {
     text-decoration: none;
   }
-  --color-highlight-background: light-dark(
-    var(--color-yellow-80),
-    var(--color-yellow-20)
-  );
+  --color-highlight-background: var(--color-background-yellow);
 }
 
 .site-search__options {
@@ -56,7 +55,7 @@
   h2 {
     display: inline;
     font-size: var(--font-size-small);
-    font-weight: 600;
+    font-weight: var(--font-weight-bold);
   }
 
   ul {
@@ -95,7 +94,7 @@
 
 .site-search-results__title {
   font-size: var(--font-size-large);
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
 }
 
 .site-search-suggestions__list {
@@ -163,7 +162,7 @@
 
 .site-search-form__input {
   font-size: var(--font-size-large);
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
 
   outline: none;
 

package/components/specifications-list/index.js

@@ -1,4 +1,4 @@
-import { html, nothing } from "lit";
+import { html } from "lit";
 import { join } from "lit/directives/join.js";
 
 /**
@@ -18,31 +18,23 @@ export function SpecificationsList(context, specifications) {
     urlsByTitle.set(title, urls);
   }
 
-  return html`<p>
-      ${context.l10n`This feature is defined in the following specifications`}:
-    </p>
-    ${specifications.length > 1
-      ? urlsByTitle.entries().map(([title, urls]) => {
-          return html`<details
-            class="specifications-list"
-            ?open=${specifications.length <= 3}
-          >
-            <summary>${title}</summary>
-            <ul>
-              ${urls.map((url) => html`<li>${SpecificationLink(url)}</li>`)}
-            </ul>
-          </details>`;
-        })
-      : specifications[0]
-        ? html`<ul class="specifications-list">
-            <li>
-              ${SpecificationLink(
-                specifications[0].bcdSpecificationURL,
-                specifications[0].title,
-              )}
-            </li>
-          </ul>`
-        : nothing}`;
+  return html`<table>
+    <thead>
+      <tr>
+        <th scope="col">${context.l10n`Specification`}</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${urlsByTitle.entries().map(([title, urls]) =>
+        urls.map(
+          (url) =>
+            html`<tr>
+              <td>${SpecificationLink(url, title)}</td>
+            </tr>`,
+        ),
+      )}
+    </tbody>
+  </table>`;
 }
 
 /**

package/components/switch/element.css

@@ -34,7 +34,7 @@
   background-repeat: no-repeat;
   background-position: var(--switch-position) 0%;
   background-size: var(--switch-size);
-  border-radius: calc(infinity * 1px);
+  border-radius: var(--radius-full);
 
   transition: --switch-position 0.2s;
 

package/components/user-menu/base.css

@@ -1,12 +1,5 @@
 /* Base */
 
-/* Login link */
-
-.user-menu__login {
-  color: inherit;
-  white-space: nowrap;
-}
-
 /* User menu dropdown */
 
 .user-menu__button {

package/components/user-menu/desktop.css

@@ -1,10 +1,22 @@
 /* Desktop */
 
-@media (width > 1006px) {
+@media (--screen-menu-full) {
   .user-menu {
     position: relative;
-    width: 34px;
-    height: 34px;
+  }
+
+  .user-menu__login {
+    width: 100%;
+    height: 100%;
+
+    &::part(label) {
+      position: absolute;
+
+      width: 0;
+      height: 0;
+
+      overflow: hidden;
+    }
   }
 
   /* User menu dropdown */

package/components/user-menu/element.js

@@ -6,11 +6,14 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { L10nMixin } from "../../l10n/mixin.js";
 
 import { FXA_SIGNIN_URL, FXA_SIGNOUT_URL } from "../env/index.js";
+import logInIcon from "../icon/log-in.svg?lit";
 import { globalUser } from "../user/context.js";
 
 import styles from "./element.css?lit";
 import { getLinks } from "./links.js";
 
+import "../button/element.js";
+
 export class MDNUserMenu extends L10nMixin(LitElement) {
   static styles = styles;
 
@@ -116,9 +119,14 @@ export class MDNUserMenu extends L10nMixin(LitElement) {
                 </div>
               `
             : html`
-                <a class="user-menu__login" href=${this.#loginUrl()}>
+                <mdn-button
+                  class="user-menu__login"
+                  href=${this.#loginUrl()}
+                  .icon=${logInIcon}
+                  variant="plain"
+                >
                   ${this.l10n("login")}
-                </a>
+                </mdn-button>
               `;
         },
     });

package/components/user-menu/mobile.css

@@ -1,21 +1,10 @@
 /* Mobile */
 
-@media (width <= 1006px) {
+@media (--screen-menu-hamburger) {
   /* Login link */
 
   .user-menu__login {
-    display: block;
-
-    padding: 0.9rem 0.7rem;
-
-    line-height: 1.25rem;
-
-    border-top: 1px solid var(--color-border-primary);
-
-    &:hover {
-      color: var(--color-text-blue);
-      background-color: var(--color-background-blue);
-    }
+    padding: 0.45rem 0;
   }
 
   /* User menu dropdown */
@@ -31,7 +20,6 @@
 
     background-color: transparent;
     border: none;
-    border-top: 1px solid var(--color-border-primary);
 
     &::before,
     &::after {

package/components/utils/index.js

@@ -0,0 +1,9 @@
+/**
+ * Used to generate a random element id by combining a prefix with a random string.
+ *
+ * @param {string} prefix
+ * @returns {string}
+ */
+export function randomIdString(prefix = "id-") {
+  return Math.random().toString(36).replace("0.", prefix);
+}

package/components/vars/global.css

@@ -1,7 +1,7 @@
 :root {
   --top-banner-height: 3.375rem;
   --sticky-header-height: calc(
-    var(--top-nav-height) + var(--breadcrumbs-bar-height)
+    var(--navigation-height) + var(--breadcrumbs-bar-height)
   );
 
   --z-index-sticky-header: 100;

package/components/writer-open-editor/element.js

@@ -0,0 +1,31 @@
+import { LitElement, html } from "lit";
+
+import { L10nMixin } from "../../l10n/mixin.js";
+
+import "../button/element.js";
+
+export class MDNWriterOpenEditor extends L10nMixin(LitElement) {
+  static properties = {
+    filepath: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.filepath = "";
+  }
+
+  async _open() {
+    const params = new URLSearchParams({
+      filepath: this.filepath,
+    });
+    await fetch(`/_open?${params}`);
+  }
+
+  render() {
+    return html`<mdn-button @click=${this._open} variant="plain">
+      ${this.l10n`Open in editor`}
+    </mdn-button>`;
+  }
+}
+
+customElements.define("mdn-writer-open-editor", MDNWriterOpenEditor);

package/components/writer-toolbar/server.css

@@ -0,0 +1,11 @@
+.writer-toolbar {
+  display: flex;
+
+  flex-wrap: wrap;
+
+  margin-top: 1.5rem;
+
+  background: var(--color-background-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 0.25rem;
+}

package/components/writer-toolbar/server.js

@@ -0,0 +1,27 @@
+import { html, nothing } from "lit";
+
+import { Button } from "../button/server.js";
+import { ServerComponent } from "../server/index.js";
+
+export class WriterToolbar extends ServerComponent {
+  /**
+   * @param {import("@fred").Context<import("@rari").DocPage>} context
+   */
+  render(context) {
+    const prodUrl = new URL(context.url, "https://developer.mozilla.org");
+    const { folder, filename } = context.doc.source;
+
+    return html`<div class="writer-toolbar">
+      ${Button.render(context, {
+        label: context.l10n`View on MDN`,
+        href: prodUrl.toString(),
+        variant: "plain",
+      })}
+      ${context.localServer
+        ? html`<mdn-writer-open-editor
+            filepath=${`${folder}/${filename}`}
+          ></mdn-writer-open-editor>`
+        : nothing}
+    </div>`;
+  }
+}

package/dist/client/{1048.7f6f1de50a1fda0d.js → 1048.9db1491a9a9f26c3.js}

@@ -6,5 +6,5 @@ export const __webpack_ids__=["1048"];export const __webpack_modules__={4976:fun
             </li>
           `)}
       </ul>
-    `}updated(){this.scrollTo({top:this.scrollHeight})}};customElements.define("mdn-play-console",MDNPlayConsole)},14164:function(e,t,r){r.d(t,{Z:()=>a});var o=r(14703),s=r(8081),n=r.n(s),i=r(23645),l=r.n(i)()(n());l.push([e.id,':host{background-color:var(--color-background-secondary);box-sizing:border-box;display:flex;flex-direction:column;font-size:.875rem;margin:0;overflow:auto;width:100%}ul{list-style:none;margin:0;padding:0}li{padding:0 .5em}li:before{content:">"}code{font-family:var(--font-family-code);tab-size:4}',""]);let a=(0,o.iv)([l.toString()])}};
-//# sourceMappingURL=1048.7f6f1de50a1fda0d.js.map
+    `}updated(){this.scrollTo({top:this.scrollHeight})}};customElements.define("mdn-play-console",MDNPlayConsole)},14164:function(e,t,r){r.d(t,{Z:()=>a});var o=r(14703),s=r(8081),n=r.n(s),i=r(23645),l=r.n(i)()(n());l.push([e.id,':host{background-color:var(--color-background-secondary);box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--font-size-small);margin:0;overflow:auto;width:100%}ul{list-style:none;margin:0;padding:0}li{padding:0 .5em}li:before{content:">"}code{font-family:var(--font-family-code);tab-size:4}',""]);let a=(0,o.iv)([l.toString()])}};
+//# sourceMappingURL=1048.9db1491a9a9f26c3.js.map

package/dist/client/{1048.7f6f1de50a1fda0d.js.map → 1048.9db1491a9a9f26c3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"1048.7f6f1de50a1fda0d.js","sources":["webpack://@mdn/fred/./components/play-console/utils.js","webpack://@mdn/fred/./components/play-console/element.js","webpack://@mdn/fred/./components/play-console/element.css"],"sourcesContent":["// Copied from https://github.com/mdn/bob/blob/9da42cd641d7f2a9796bf3406e74cad411ce9438/editor/js/editor-libs/console-utils.ts\n/**\n * Formats arrays:\n * - quotes around strings in arrays\n * - square brackets around arrays\n * - adds commas appropriately (with spacing)\n * - identifies empty slots\n * designed to be used recursively\n * @param {any} input - The output to log.\n * @returns Formatted output as a string.\n */\nexport function formatArray(input) {\n  let output = \"\";\n  for (let i = 0, l = input.length; i < l; i++) {\n    if (typeof input[i] === \"string\") {\n      output += '\"' + input[i] + '\"';\n    } else if (Array.isArray(input[i])) {\n      output += \"Array [\";\n      output += formatArray(input[i]);\n      output += \"]\";\n    } else if (Object.prototype.hasOwnProperty.call(input, i)) {\n      output += formatOutput(input[i]);\n    } else {\n      let emptyCount = 1;\n      while (i + 1 < l && !Object.prototype.hasOwnProperty.call(input, i + 1)) {\n        emptyCount++;\n        i++;\n      }\n      output +=\n        emptyCount === 1 ? \"<1 empty slot>\" : `<${emptyCount} empty slots>`;\n    }\n\n    if (i < input.length - 1) {\n      output += \", \";\n    }\n  }\n  return output;\n}\n\n/**\n * Formats objects:\n * ArrayBuffer, DataView, SharedArrayBuffer,\n * Int8Array, Int16Array, Int32Array,\n * Uint8Array, Uint16Array, Uint32Array,\n * Uint8ClampedArray, Float32Array, Float64Array\n * Symbol\n * @param {any} input - The output to log.\n * @returns Formatted output as a string.\n */\nexport function formatObject(input) {\n  const bufferDataViewRegExp = /^(ArrayBuffer|SharedArrayBuffer|DataView)$/;\n  const complexArrayRegExp =\n    /^(Int8Array|Int16Array|Int32Array|Uint8Array|Uint16Array|Uint32Array|Uint8ClampedArray|Float32Array|Float64Array|BigInt64Array|BigUint64Array)$/;\n\n  const objectName = input.constructor ? input.constructor.name : input;\n\n  if (objectName === \"String\") {\n    // String object\n    return `String { \"${input.valueOf()}\" }`;\n  }\n\n  if (input === JSON) {\n    // console.log(JSON) is output as \"JSON {}\" in browser console\n    return `JSON {}`;\n  }\n\n  if (objectName.match && bufferDataViewRegExp.test(objectName)) {\n    return objectName + \" {}\";\n  }\n\n  if (objectName.match && complexArrayRegExp.test(objectName)) {\n    const arrayLength = input.length;\n\n    return arrayLength > 0\n      ? objectName + \" [\" + formatArray(input) + \"]\"\n      : objectName + \" []\";\n  }\n\n  if (objectName === \"Symbol\" && input !== undefined) {\n    return input.toString();\n  }\n\n  if (objectName === \"Object\") {\n    if (input?._MDNPlaySerializedObject) {\n      return input._MDNPlaySerializedObject;\n    }\n    let formattedChild = \"\";\n    let start = true;\n    for (const key in input) {\n      if (Object.prototype.hasOwnProperty.call(input, key)) {\n        if (start) {\n          start = false;\n        } else {\n          formattedChild = formattedChild + \", \";\n        }\n        formattedChild = formattedChild + key + \": \" + formatOutput(input[key]);\n      }\n    }\n    return objectName + \" { \" + formattedChild + \" }\";\n  }\n\n  // Special object created with `OrdinaryObjectCreate(null)` returned by, for\n  // example, named capture groups in https://mzl.la/2RERfQL\n  // @see https://github.com/mdn/bob/issues/574#issuecomment-858213621\n  if (!input.constructor && !input.prototype) {\n    let formattedChild = \"\";\n    let start = true;\n    for (const key in input) {\n      if (start) {\n        start = false;\n      } else {\n        formattedChild = formattedChild + \", \";\n      }\n      formattedChild = formattedChild + key + \": \" + formatOutput(input[key]);\n    }\n    return \"Object { \" + formattedChild + \" }\";\n  }\n\n  return input;\n}\n\n/**\n * Formats output to indicate its type:\n * - quotes around strings\n * - single quotes around strings containing double quotes\n * - square brackets around arrays\n * (also copes with arrays of arrays)\n * does NOT detect Int32Array etc\n * @param {any} input - The output to log.\n * @returns Formatted output as a string.\n */\nexport function formatOutput(input) {\n  if (input === undefined || input === null || typeof input === \"boolean\") {\n    return String(input);\n  } else if (typeof input === \"number\") {\n    // Negative zero\n    if (Object.is(input, -0)) {\n      return \"-0\";\n    }\n    return String(input);\n  } else if (typeof input === \"bigint\") {\n    return String(input) + \"n\";\n  } else if (typeof input === \"string\") {\n    // string literal\n    return input.includes('\"') ? \"'\" + input + \"'\" : '\"' + input + '\"';\n  } else if (Array.isArray(input)) {\n    // check the contents of the array\n    return \"Array [\" + formatArray(input) + \"]\";\n  } else {\n    return formatObject(input);\n  }\n}\n","import { LitElement, html } from \"lit\";\n\nimport styles from \"./element.css?lit\";\nimport { formatOutput } from \"./utils.js\";\n\n/** @import { VConsole } from \"./types.js\" */\n\n/** @implements {Partial<Console>} */\nclass VirtualConsole {\n  #host;\n\n  /** @param {MDNPlayConsole} host  */\n  constructor(host) {\n    this.#host = host;\n  }\n\n  clear() {\n    this.#host._messages = [];\n  }\n\n  /** @param {...any} args */\n  debug(...args) {\n    return this.log(...args);\n  }\n\n  /** @param {...any} args */\n  error(...args) {\n    return this.log(...args);\n  }\n\n  /** @param {...any} args */\n  info(...args) {\n    return this.log(...args);\n  }\n\n  /** @param {...any} args */\n  log(...args) {\n    if (args.length > 1 && typeof args[0] === \"string\") {\n      // https://developer.mozilla.org/en-US/docs/Web/API/console#using_string_substitutions\n      // TODO: add unit testing of this\n      args[0] = args[0].replaceAll(\n        /%(?:\\.([0-9]+))?(.)/g,\n        (match, formatArg, format) => {\n          switch (format) {\n            case \"o\":\n            case \"O\": {\n              const O = args.splice(1, 1)[0];\n              return formatOutput(O);\n            }\n            case \"d\":\n            case \"i\": {\n              const i = args.splice(1, 1)[0];\n              return Math.trunc(i).toFixed(0).padStart(formatArg, \"0\");\n            }\n            case \"s\": {\n              const s = args.splice(1, 1)[0];\n              return s.toString();\n            }\n            case \"f\": {\n              const f = args.splice(1, 1)[0];\n              return (typeof f === \"number\" ? f : Number.parseFloat(f)).toFixed(\n                formatArg ?? 6,\n              );\n            }\n            case \"c\":\n              // TODO: Not implemented yet, so just remove the argument\n              args.splice(1, 1);\n              return \"\";\n            case \"%\":\n              return \"%\";\n            default:\n              return match;\n          }\n        },\n      );\n    }\n    this.#host._messages = [\n      ...this.#host._messages,\n      args.map((x) => formatOutput(x)).join(\" \"),\n    ];\n  }\n\n  /** @param {...any} args */\n  warn(...args) {\n    return this.log(...args);\n  }\n}\n\nexport class MDNPlayConsole extends LitElement {\n  static properties = {\n    _messages: { state: true },\n  };\n\n  static styles = styles;\n\n  constructor() {\n    super();\n    this.vconsole = new VirtualConsole(this);\n    /** @type {string[]} */\n    this._messages = [];\n  }\n\n  /** @param {CustomEvent<VConsole>} e */\n  onConsole({ detail }) {\n    if (detail.prop in this.vconsole) {\n      const prop = /** @type {keyof typeof this.vconsole} */ (detail.prop);\n      detail.args ? this.vconsole[prop](...detail.args) : this.vconsole[prop]();\n    } else {\n      this.vconsole.warn(\n        \"[Playground] Unsupported console message (see browser console)\",\n      );\n    }\n  }\n\n  render() {\n    return html`\n      <ul>\n        ${this._messages.map((message) => {\n          return html`\n            <li>\n              <code>${message}</code>\n            </li>\n          `;\n        })}\n      </ul>\n    `;\n  }\n\n  updated() {\n    this.scrollTo({ top: this.scrollHeight });\n  }\n}\n\ncustomElements.define(\"mdn-play-console\", MDNPlayConsole);\n","import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{background-color:var(--color-background-secondary);box-sizing:border-box;display:flex;flex-direction:column;font-size:.875rem;margin:0;overflow:auto;width:100%}ul{list-style:none;margin:0;padding:0}li{padding:0 .5em}li:before{content:\">\"}code{font-family:var(--font-family-code);tab-size:4}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["Array","Object","String","JSON","VirtualConsole","Math","Number","MDNPlayConsole","s","customElements"],"mappings":"yKAWO,SAAS,EAAY,CAAK,EAC/B,IAAI,EAAS,GACb,IAAK,IAAI,EAAI,EAAG,EAAI,EAAM,MAAM,CAAE,EAAI,EAAG,IAAK,CAC5C,GAAI,AAAoB,UAApB,OAAO,CAAK,CAAC,EAAE,CACjB,GAAU,IAAM,CAAK,CAAC,EAAE,CAAG,SACtB,GAAIA,MAAM,OAAO,CAAC,CAAK,CAAC,EAAE,EAC/B,GAAU,UACV,GAAU,EAAY,CAAK,CAAC,EAAE,EAC9B,GAAU,SACL,GAAIC,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,EAAO,GACrD,GAAU,EAAa,CAAK,CAAC,EAAE,MAC1B,CACL,IAAI,EAAa,EACjB,KAAO,EAAI,EAAI,GAAK,CAACA,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,EAAO,EAAI,IACnE,IACA,IAEF,GACE,AAAe,IAAf,EAAmB,iBAAmB,CAAC,CAAC,EAAE,EAAW,aAAa,CAAC,AACvE,CAEI,EAAI,EAAM,MAAM,CAAG,GACrB,IAAU,IAAG,CAEjB,CACA,OAAO,CACT,CA8FO,SAAS,EAAa,CAAK,EAChC,GAAI,SAAyC,AAAiB,WAAjB,OAAO,EAClD,OAAOC,OAAO,GACT,GAAI,AAAiB,UAAjB,OAAO,SAEhB,AAAID,OAAO,EAAE,CAAC,EAAO,IACZ,KAEFC,OAAO,GACT,GAAI,AAAiB,UAAjB,OAAO,EAChB,OAAOA,OAAO,GAAS,IAClB,GAAI,AAAiB,UAAjB,OAAO,EAEhB,OAAO,EAAM,QAAQ,CAAC,KAAO,IAAM,EAAQ,IAAM,IAAM,EAAQ,IAC1D,GAAIF,MAAM,OAAO,CAAC,GAEvB,MAAO,UAAY,EAAY,GAAS,SAExC,OAAO,AApGJ,SAAsB,CAAK,EAKhC,IAAM,EAAa,EAAM,WAAW,CAAG,EAAM,WAAW,CAAC,IAAI,CAAG,EAEhE,GAAI,AAAe,WAAf,EAEF,MAAO,CAAC,UAAU,EAAE,EAAM,OAAO,GAAG,GAAG,CAAC,CAG1C,GAAI,IAAUG,KAEZ,MAAO,UAGT,GAAI,EAAW,KAAK,EAAI,AAhBK,6CAgBgB,IAAI,CAAC,GAChD,OAAO,EAAa,MAGtB,GAAI,EAAW,KAAK,EAAI,AAlBtB,kJAkByC,IAAI,CAAC,GAG9C,OAAO,AAFa,EAAM,MAAM,CAEX,EACjB,EAAa,KAAO,EAAY,GAAS,IACzC,EAAa,MAGnB,GAAI,AAAe,WAAf,GAA2B,AAAU,SAAV,EAC7B,OAAO,EAAM,QAAQ,GAGvB,GAAI,AAAe,WAAf,EAAyB,CAC3B,GAAI,GAAO,yBACT,OAAO,EAAM,wBAAwB,CAEvC,IAAI,EAAiB,GACjB,EAAQ,GACZ,IAAK,IAAM,KAAO,EACZF,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,EAAO,KAC1C,EACF,EAAQ,GAER,GAAkC,KAEpC,EAAiB,EAAiB,EAAM,KAAO,EAAa,CAAK,CAAC,EAAI,GAG1E,OAAO,EAAa,MAAQ,EAAiB,IAC/C,CAKA,GAAI,CAAC,EAAM,WAAW,EAAI,CAAC,EAAM,SAAS,CAAE,CAC1C,IAAI,EAAiB,GACjB,EAAQ,GACZ,IAAK,IAAM,KAAO,EACZ,EACF,EAAQ,GAER,GAAkC,KAEpC,EAAiB,EAAiB,EAAM,KAAO,EAAa,CAAK,CAAC,EAAI,EAExE,MAAO,YAAc,EAAiB,IACxC,CAEA,OAAO,CACT,EA8BwB,EAExB,CC/IA,IAAMG,eAAN,MAAMA,eACJ,EAAK,AAAC,AAGN,aAAY,CAAI,CAAE,CAChB,IAAI,CAAC,EAAK,CAAG,CACf,CAEA,OAAQ,CACN,IAAI,CAAC,EAAK,CAAC,SAAS,CAAG,EAAE,AAC3B,CAGA,MAAM,GAAG,CAAI,CAAE,CACb,OAAO,IAAI,CAAC,GAAG,IAAI,EACrB,CAGA,MAAM,GAAG,CAAI,CAAE,CACb,OAAO,IAAI,CAAC,GAAG,IAAI,EACrB,CAGA,KAAK,GAAG,CAAI,CAAE,CACZ,OAAO,IAAI,CAAC,GAAG,IAAI,EACrB,CAGA,IAAI,GAAG,CAAI,CAAE,CACP,EAAK,MAAM,CAAG,GAAK,AAAmB,UAAnB,OAAO,CAAI,CAAC,EAAE,EAGnC,EAAI,CAAC,EAAE,CAAG,CAAI,CAAC,EAAE,CAAC,UAAU,CAC1B,uBACA,CAAC,EAAO,EAAW,KACjB,OAAQ,GACN,IAAK,IACL,IAAK,IAEH,OAAO,EADG,EAAK,MAAM,CAAC,EAAG,EAAE,CAAC,EAAE,CAGhC,KAAK,IACL,IAAK,IAEH,OAAOC,KAAK,KAAK,CADP,EAAK,MAAM,CAAC,EAAG,EAAE,CAAC,EAAE,EACT,OAAO,CAAC,GAAG,QAAQ,CAAC,EAAW,IAEtD,KAAK,IAEH,OAAO,AADG,EAAK,MAAM,CAAC,EAAG,EAAE,CAAC,EAAE,CACrB,QAAQ,EAEnB,KAAK,IAAK,CACR,IAAM,EAAI,EAAK,MAAM,CAAC,EAAG,EAAE,CAAC,EAAE,CAC9B,MAAO,AAAC,CAAa,UAAb,OAAO,EAAiB,EAAIC,OAAO,UAAU,CAAC,EAAC,EAAG,OAAO,CAC/D,GAAa,EAEjB,CACA,IAAK,IAGH,OADA,EAAK,MAAM,CAAC,EAAG,GACR,EACT,KAAK,IACH,MAAO,GACT,SACE,OAAO,CACX,CACF,EACF,EAEF,IAAI,CAAC,EAAK,CAAC,SAAS,CAAG,IAClB,IAAI,CAAC,EAAK,CAAC,SAAS,CACvB,EAAK,GAAG,CAAC,AAAC,GAAM,EAAa,IAAI,IAAI,CAAC,KACvC,AACH,CAGA,KAAK,GAAG,CAAI,CAAE,CACZ,OAAO,IAAI,CAAC,GAAG,IAAI,EACrB,CACF,EAEO,IAAMC,eAAN,MAAMA,uBAAuB,IAAU,CAC5C,OAAO,WAAa,CAClB,UAAW,CAAE,MAAO,EAAK,CAC3B,CAAE,AAEF,QAAO,OAASC,EAAA,CAAM,AAAC,AAEvB,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,QAAQ,CAAG,IAAIJ,eAAe,IAAI,EAEvC,IAAI,CAAC,SAAS,CAAG,EAAE,AACrB,CAGA,UAAU,CAAE,QAAM,CAAE,CAAE,CACpB,GAAI,EAAO,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAE,CAChC,IAAM,EAAkD,EAAO,IAAI,AACnE,GAAO,IAAI,CAAG,IAAI,CAAC,QAAQ,CAAC,EAAK,IAAI,EAAO,IAAI,EAAI,IAAI,CAAC,QAAQ,CAAC,EAAK,EACzE,MACE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAChB,iEAGN,CAEA,QAAS,CACP,MAAO,QAAI,CAAC;;QAER,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,AAAC,GACb,QAAI,CAAC;;oBAEF,EAAE,EAAQ;;UAEpB,CAAC,EACA;;IAEP,CAAC,AACH,CAEA,SAAU,CACR,IAAI,CAAC,QAAQ,CAAC,CAAE,IAAK,IAAI,CAAC,YAAY,AAAC,EACzC,CACF,EAEAK,eAAe,MAAM,CAAC,mBAAoBF,e,sFCjItC,EAA0B,A,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,2SAA4S,GAAG,EAExV,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C"}
+{"version":3,"file":"1048.9db1491a9a9f26c3.js","sources":["webpack://@mdn/fred/./components/play-console/utils.js","webpack://@mdn/fred/./components/play-console/element.js","webpack://@mdn/fred/./components/play-console/element.css"],"sourcesContent":["// Copied from https://github.com/mdn/bob/blob/9da42cd641d7f2a9796bf3406e74cad411ce9438/editor/js/editor-libs/console-utils.ts\n/**\n * Formats arrays:\n * - quotes around strings in arrays\n * - square brackets around arrays\n * - adds commas appropriately (with spacing)\n * - identifies empty slots\n * designed to be used recursively\n * @param {any} input - The output to log.\n * @returns Formatted output as a string.\n */\nexport function formatArray(input) {\n  let output = \"\";\n  for (let i = 0, l = input.length; i < l; i++) {\n    if (typeof input[i] === \"string\") {\n      output += '\"' + input[i] + '\"';\n    } else if (Array.isArray(input[i])) {\n      output += \"Array [\";\n      output += formatArray(input[i]);\n      output += \"]\";\n    } else if (Object.prototype.hasOwnProperty.call(input, i)) {\n      output += formatOutput(input[i]);\n    } else {\n      let emptyCount = 1;\n      while (i + 1 < l && !Object.prototype.hasOwnProperty.call(input, i + 1)) {\n        emptyCount++;\n        i++;\n      }\n      output +=\n        emptyCount === 1 ? \"<1 empty slot>\" : `<${emptyCount} empty slots>`;\n    }\n\n    if (i < input.length - 1) {\n      output += \", \";\n    }\n  }\n  return output;\n}\n\n/**\n * Formats objects:\n * ArrayBuffer, DataView, SharedArrayBuffer,\n * Int8Array, Int16Array, Int32Array,\n * Uint8Array, Uint16Array, Uint32Array,\n * Uint8ClampedArray, Float32Array, Float64Array\n * Symbol\n * @param {any} input - The output to log.\n * @returns Formatted output as a string.\n */\nexport function formatObject(input) {\n  const bufferDataViewRegExp = /^(ArrayBuffer|SharedArrayBuffer|DataView)$/;\n  const complexArrayRegExp =\n    /^(Int8Array|Int16Array|Int32Array|Uint8Array|Uint16Array|Uint32Array|Uint8ClampedArray|Float32Array|Float64Array|BigInt64Array|BigUint64Array)$/;\n\n  const objectName = input.constructor ? input.constructor.name : input;\n\n  if (objectName === \"String\") {\n    // String object\n    return `String { \"${input.valueOf()}\" }`;\n  }\n\n  if (input === JSON) {\n    // console.log(JSON) is output as \"JSON {}\" in browser console\n    return `JSON {}`;\n  }\n\n  if (objectName.match && bufferDataViewRegExp.test(objectName)) {\n    return objectName + \" {}\";\n  }\n\n  if (objectName.match && complexArrayRegExp.test(objectName)) {\n    const arrayLength = input.length;\n\n    return arrayLength > 0\n      ? objectName + \" [\" + formatArray(input) + \"]\"\n      : objectName + \" []\";\n  }\n\n  if (objectName === \"Symbol\" && input !== undefined) {\n    return input.toString();\n  }\n\n  if (objectName === \"Object\") {\n    if (input?._MDNPlaySerializedObject) {\n      return input._MDNPlaySerializedObject;\n    }\n    let formattedChild = \"\";\n    let start = true;\n    for (const key in input) {\n      if (Object.prototype.hasOwnProperty.call(input, key)) {\n        if (start) {\n          start = false;\n        } else {\n          formattedChild = formattedChild + \", \";\n        }\n        formattedChild = formattedChild + key + \": \" + formatOutput(input[key]);\n      }\n    }\n    return objectName + \" { \" + formattedChild + \" }\";\n  }\n\n  // Special object created with `OrdinaryObjectCreate(null)` returned by, for\n  // example, named capture groups in https://mzl.la/2RERfQL\n  // @see https://github.com/mdn/bob/issues/574#issuecomment-858213621\n  if (!input.constructor && !input.prototype) {\n    let formattedChild = \"\";\n    let start = true;\n    for (const key in input) {\n      if (start) {\n        start = false;\n      } else {\n        formattedChild = formattedChild + \", \";\n      }\n      formattedChild = formattedChild + key + \": \" + formatOutput(input[key]);\n    }\n    return \"Object { \" + formattedChild + \" }\";\n  }\n\n  return input;\n}\n\n/**\n * Formats output to indicate its type:\n * - quotes around strings\n * - single quotes around strings containing double quotes\n * - square brackets around arrays\n * (also copes with arrays of arrays)\n * does NOT detect Int32Array etc\n * @param {any} input - The output to log.\n * @returns Formatted output as a string.\n */\nexport function formatOutput(input) {\n  if (input === undefined || input === null || typeof input === \"boolean\") {\n    return String(input);\n  } else if (typeof input === \"number\") {\n    // Negative zero\n    if (Object.is(input, -0)) {\n      return \"-0\";\n    }\n    return String(input);\n  } else if (typeof input === \"bigint\") {\n    return String(input) + \"n\";\n  } else if (typeof input === \"string\") {\n    // string literal\n    return input.includes('\"') ? \"'\" + input + \"'\" : '\"' + input + '\"';\n  } else if (Array.isArray(input)) {\n    // check the contents of the array\n    return \"Array [\" + formatArray(input) + \"]\";\n  } else {\n    return formatObject(input);\n  }\n}\n","import { LitElement, html } from \"lit\";\n\nimport styles from \"./element.css?lit\";\nimport { formatOutput } from \"./utils.js\";\n\n/** @import { VConsole } from \"./types.js\" */\n\n/** @implements {Partial<Console>} */\nclass VirtualConsole {\n  #host;\n\n  /** @param {MDNPlayConsole} host  */\n  constructor(host) {\n    this.#host = host;\n  }\n\n  clear() {\n    this.#host._messages = [];\n  }\n\n  /** @param {...any} args */\n  debug(...args) {\n    return this.log(...args);\n  }\n\n  /** @param {...any} args */\n  error(...args) {\n    return this.log(...args);\n  }\n\n  /** @param {...any} args */\n  info(...args) {\n    return this.log(...args);\n  }\n\n  /** @param {...any} args */\n  log(...args) {\n    if (args.length > 1 && typeof args[0] === \"string\") {\n      // https://developer.mozilla.org/en-US/docs/Web/API/console#using_string_substitutions\n      // TODO: add unit testing of this\n      args[0] = args[0].replaceAll(\n        /%(?:\\.([0-9]+))?(.)/g,\n        (match, formatArg, format) => {\n          switch (format) {\n            case \"o\":\n            case \"O\": {\n              const O = args.splice(1, 1)[0];\n              return formatOutput(O);\n            }\n            case \"d\":\n            case \"i\": {\n              const i = args.splice(1, 1)[0];\n              return Math.trunc(i).toFixed(0).padStart(formatArg, \"0\");\n            }\n            case \"s\": {\n              const s = args.splice(1, 1)[0];\n              return s.toString();\n            }\n            case \"f\": {\n              const f = args.splice(1, 1)[0];\n              return (typeof f === \"number\" ? f : Number.parseFloat(f)).toFixed(\n                formatArg ?? 6,\n              );\n            }\n            case \"c\":\n              // TODO: Not implemented yet, so just remove the argument\n              args.splice(1, 1);\n              return \"\";\n            case \"%\":\n              return \"%\";\n            default:\n              return match;\n          }\n        },\n      );\n    }\n    this.#host._messages = [\n      ...this.#host._messages,\n      args.map((x) => formatOutput(x)).join(\" \"),\n    ];\n  }\n\n  /** @param {...any} args */\n  warn(...args) {\n    return this.log(...args);\n  }\n}\n\nexport class MDNPlayConsole extends LitElement {\n  static properties = {\n    _messages: { state: true },\n  };\n\n  static styles = styles;\n\n  constructor() {\n    super();\n    this.vconsole = new VirtualConsole(this);\n    /** @type {string[]} */\n    this._messages = [];\n  }\n\n  /** @param {CustomEvent<VConsole>} e */\n  onConsole({ detail }) {\n    if (detail.prop in this.vconsole) {\n      const prop = /** @type {keyof typeof this.vconsole} */ (detail.prop);\n      detail.args ? this.vconsole[prop](...detail.args) : this.vconsole[prop]();\n    } else {\n      this.vconsole.warn(\n        \"[Playground] Unsupported console message (see browser console)\",\n      );\n    }\n  }\n\n  render() {\n    return html`\n      <ul>\n        ${this._messages.map((message) => {\n          return html`\n            <li>\n              <code>${message}</code>\n            </li>\n          `;\n        })}\n      </ul>\n    `;\n  }\n\n  updated() {\n    this.scrollTo({ top: this.scrollHeight });\n  }\n}\n\ncustomElements.define(\"mdn-play-console\", MDNPlayConsole);\n","import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{background-color:var(--color-background-secondary);box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--font-size-small);margin:0;overflow:auto;width:100%}ul{list-style:none;margin:0;padding:0}li{padding:0 .5em}li:before{content:\">\"}code{font-family:var(--font-family-code);tab-size:4}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n"],"names":["Array","Object","String","JSON","VirtualConsole","Math","Number","MDNPlayConsole","s","customElements"],"mappings":"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"}