apollo-elements/apollo-elements

View on GitHub
docs/_assets/_static/json-viewer.js.map

Summary

Maintainability
Test Coverage
{
  "version": 3,
  "sources": ["../../../node_modules/@power-elements/json-viewer/json-viewer.js"],
  "sourcesContent": ["const compose =\n  (...fns) =>\n    fns.reduce((f, g) =>\n      (...args) =>\n        f(g(...args)));\n\nconst isString =\n  x =>\n    typeof x === 'string';\n\nconst trim =\n  s =>\n    s.trim();\n\nconst isObject =\n  x =>\n    x !== null &&\n    `${x}` === '[object Object]';\n\nconst replace =\n  (...args) => s =>\n    s.replace(...args);\n\nconst isAllStrings =\n  xs =>\n    Array.isArray(xs) &&\n    xs.every(isString);\n\nconst fromEntries =\n  xs =>\n      Object.fromEntries ? Object.fromEntries(xs)\n    : xs.reduce((o, [k, v]) => ({ [k]: v, ...o }), {});\n\nconst flatMap =\n  f => xs =>\n  'flatMap' in Array.prototype ?\n    xs.flatMap(f)\n    : xs.reduce((acc, x) => acc.concat(f(x)), []);\n\nconst pick =\n  (keys, element) =>\n    keys.reduce((pojo, key) =>\n      Object.assign(pojo, { [key]: element[key] }), {});\n\nconst stripUndefinedVals =\n  flatMap(([k, v]) => v === undefined ? [] : [[k, v]]);\n\nconst stripUndefined =\n  compose(fromEntries, stripUndefinedVals, Object.entries);\n\nconst mark = x =>\n    x instanceof Element ? `<mark part='string'>${x.outerHTML.replace(/</g, '&lt;').replace(/\"/g, '\\'')}</mark>`\n  : isObject(x) || Array.isArray(x) ? x\n  : `<mark part='${x === null ? 'null' : typeof x}'>${x}</mark>`;\n\nconst replacer =\n  (k, v) =>\n    k === '' ? v : mark(v);\n\nconst pretty =\n  o =>\n    JSON.stringify(o, replacer, 2);\n\nconst markKeys =\n  replace(/\"(.*)\":/g, (_, key) =>\n    `<mark part=\"key\">\"${key}\"</mark>:`);\n\nconst wrapStrings =\n  replace(/\"<mark(.*)>(.*)<\\/mark>\"/g, (_, attrs, content) =>\n    `<mark${attrs}>${attrs.includes('string') ? `\"${content}\"` : content}</mark>`);\n\nconst json =\n  compose(wrapStrings, markKeys, pretty, stripUndefined);\n\nconst toStringList =\n  string =>\n    (string || '')\n      .split(',')\n      .map(trim)\n      .filter(Boolean);\n\nconst css = /* css */`\n[hidden],\n:host([hidden]) {\n  display: none !important;\n}\n\n:host {\n  display: block;\n  position: relative;\n  color: var(--json-viewer-color, currentColor);\n}\n\ncode { white-space: pre; }\nmark { background: none; }\n\n@media (prefers-color-scheme: dark), (prefers-color-scheme: no-preference) {\n  :host { background: var(--json-viewer-background, #212529); }\n  [part=\"key\"] { color: var(--json-viewer-key-color, #ff922b); }\n  [part=\"boolean\"] { color: var(--json-viewer-boolean-color, #22b8cf); }\n  [part=\"number\"] { color: var(--json-viewer-number-color, #51cf66); }\n  [part=\"null\"] { color: var(--json-viewer-null-color, #ff6b6b); }\n  [part=\"string\"] { color: var(--json-viewer-string-color, #22b8cf); }\n}\n\n@media (prefers-color-scheme: light) {\n  :host { background: var(--json-viewer-background, white); }\n  [part=\"key\"] { color: var(--json-viewer-key-color, #f76707); }\n  [part=\"boolean\"] { color: var(--json-viewer-boolean-color, #0c8599); }\n  [part=\"number\"] { color: var(--json-viewer-number-color, #0ca678); }\n  [part=\"null\"] { color: var(--json-viewer-null-color, #e03131); }\n  [part=\"string\"] { color: var(--json-viewer-string-color, #0c8599); }\n}\n`;\n\nconst template =\n  document.createElement('template');\n\ntemplate.innerHTML =\n  `<code hidden part=\"code\"></code>`;\n\nconst AL_ATTR = 'allowlist';\nconst OBJECT_ATTR = 'object';\n\n/**\n * Custom Element that shows a JavaScript object's properties as syntax-highlighted JSON.\n *\n * The element will respect `prefers-color-scheme` by default, but if you use the\n * CSS Custom Properties listed below, you should customize both light and dark themes.\n *\n * \u2764\uFE0F Proudly uses [open-wc](https://open-wc.org) tools and recommendations.\n *\n * @example\n * ```javascript\n * import '/path/to/json-viewer.js';\n\n * const viewer = document.createElement('json-viewer');\n *       viewer.allowlist = ['foo', 'bar'];\n *       viewer.object = {\n *         foo: 'foo',\n *         bar: 'bar',\n *         baz: 'baz',\n *       };\n * ```\n *\n * @example\n * ```html\n * <script type=\"module\" src=\"/path/to/json-viewer.js\"></script>\n *\n * <json-viewer allowlist=\"meenie,minie\">\n *   <script type=\"application/json\">\n *     {\n *       \"eenie\": 1,\n *       \"meenie\": true,\n *       \"minie\": [{ \"mo\": \"catch a tiger by the toe\" }]\n *     }\n *   </script>\n * </json-viewer>\n * ```\n *\n * ![Example Markup](example.png)\n *\n * @cssprop --json-viewer-color - Color for generic text. Light white, Dark #212121\n * @cssprop --json-viewer-background - Color for generic text. Light #212121, Dark white\n * @cssprop --json-viewer-key-color - Color for keys. Light #f76707, Dark #ff922b\n * @cssprop --json-viewer-boolean-color - Color for booleans. Light #f76707, Dark #22b8cf\n * @cssprop --json-viewer-number-color - Color for numbers. Light #0ca678, Dark #51cf66\n * @cssprop --json-viewer-null-color - Color for nulls. Light #e03131, Dark #ff6b6b\n * @cssprop --json-viewer-string-color - Color for strings. Light #0c8599, Dark #22b8cf\n *\n * @csspart code - the wrapping `<code>` element\n *\n * @csspart key - property keys\n * @csspart boolean - boolean property values\n * @csspart number - number property values\n * @csspart null - null property values\n * @csspart string - string property values\n *\n * @fires json-parse-error when JSON parse fails\n *\n * @slot - JSON scripts or JSON strings appended as text nodes will be parsed and displayed\n */\nexport class JsonViewer extends HTMLElement {\n  static get is() {\n    return 'json-viewer';\n  }\n\n  static get observedAttributes() {\n    return [AL_ATTR, OBJECT_ATTR];\n  }\n\n  /**\n   * JavaScript Object to display\n   * Setting this property will override `<script type=\"application/json\">` children\n   *\n   * @type {string|object}\n   * @attr\n   */\n  get object() {\n    return this.__object;\n  }\n\n  set object(val) {\n    if (val && typeof val === 'string')\n      val = this.tryParse(val);\n    this.__object = val;\n    this.render();\n  }\n\n  /**\n   * User-defined allowlist of top-level keys for the object.\n   * Optional for plain objects,\n   * Required when setting `object` to a non-serializable object (e.g. an HTMLElement)\n   * Property is an Array of strings\n   * Attribute is a comma-separated string\n   *\n   * @type {string[]}\n   * @attr\n   */\n  get allowlist() {\n    return this.__allowlist;\n  }\n\n  set allowlist(val) {\n    if (!isAllStrings(val))\n      throw new Error('allowlist must be an array of strings');\n\n    this.__allowlist = val;\n    const attr = val.join(',');\n    if (attr)\n      this.setAttribute(AL_ATTR, attr);\n    this.render();\n  }\n\n  /**\n   * JSON.parse error\n   *\n   * @type {Error}\n   */\n  get error() {\n    return this.__error;\n  }\n\n  set error(error) {\n    this.__error = error;\n    if (error instanceof Error)\n      this.dispatchEvent(new CustomEvent('json-parse-error'));\n  }\n\n  constructor() {\n    super();\n    this.__error = null;\n    this.__allowlist = [];\n    this.__mo = new MutationObserver(this.parse.bind(this));\n    this.__mo.observe(this, { subtree: true, characterData: true, childList: true });\n    this.attachShadow({ mode: 'open' });\n    if ('adoptedStyleSheets' in Document.prototype) {\n      const styles = new CSSStyleSheet();\n      // @ts-expect-error: proposal spec\n      styles.replaceSync(css);\n      // @ts-expect-error: proposal spec\n      this.shadowRoot.adoptedStyleSheets = [styles];\n    } else\n      this.shadowRoot.innerHTML = `<style>${css}</style>`;\n\n    this.shadowRoot.append(template.content.cloneNode(true));\n  }\n\n  /** @private */\n  connectedCallback() {\n    this.parse();\n    if (this.object && this.shadowRoot.querySelector('code').hidden)\n      this.render();\n  }\n\n  /**\n   * @private\n   * @param {string} name\n   * @param {string} oldVal\n   * @param {string} newVal\n   * @return {void}\n   */\n  attributeChangedCallback(name, oldVal, newVal) {\n    switch (name) {\n      case AL_ATTR: return this.allowlistAttrChanged(newVal, oldVal);\n      case OBJECT_ATTR: return this.objectAttrChanged(newVal, oldVal);\n    }\n  }\n\n  /**\n   * @private\n   * @param {string} allowlist new value of allowlist.\n   * @param {string} [oldVal] previous value of allowlist.\n   */\n  allowlistAttrChanged(allowlist, oldVal) {\n    const previous = this.allowlist;\n    const next = allowlist;\n    if (previous.join(',') === next) return;\n    this.allowlist = toStringList(next);\n  }\n\n  /**\n   * @private\n   * @param {string} objectAttr\n   * @param {string} oldVal\n   */\n  objectAttrChanged(objectAttr, oldVal) {\n    if (objectAttr !== oldVal)\n      this.object = this.tryParse(objectAttr);\n  }\n\n  /**\n   * @private\n   * @return {string} syntax-highlighted HTML string\n   */\n  getHighlightedDomString() {\n    const { allowlist, object } = this;\n    if (object === undefined) return '';\n    const hasAllowList = Array.isArray(allowlist) && allowlist.length;\n    const objectToRender = hasAllowList ? pick(allowlist, object) : object;\n    return json(objectToRender);\n  }\n\n  /** @private */\n  render() {\n    const highlighted = this.getHighlightedDomString();\n    this.shadowRoot.querySelector('code').hidden = !highlighted;\n    this.shadowRoot.querySelector('code').innerHTML = highlighted;\n  }\n\n  /** @private */\n  parse() {\n    const parent =\n      this.querySelector('script[type=\"application/json\"]') ||\n      this.querySelector('script[type=\"application/ld+json\"]') ||\n      this;\n    const { textContent = '' } = parent;\n    if (!textContent.trim()) return;\n    this.object = this.tryParse(textContent);\n  }\n\n  /**\n   * @private\n   * @param {string} string string to parse\n   * @return {object}\n   */\n  tryParse(string) {\n    let object;\n    try {\n      object = JSON.parse(string);\n    } catch (error) {\n      const { name, message } = error;\n      object = { name, message, string };\n      this.error = error;\n    }\n    return object;\n  }\n}\n\ncustomElements.define(JsonViewer.is, JsonViewer);\n"],
  "mappings": "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",
  "names": []
}