@cell-x/caniuse-embed-element/custom-elements.json

A custom web component that embeds caniuse.com browser compatibility data for a specific feature.

{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "dist/caniuse-embed-element.iife.js",
      "declarations": [
        {
          "kind": "variable",
          "name": "t"
        }
      ],
      "exports": [
        {
          "kind": "custom-element-definition",
          "name": "r",
          "declaration": {
            "name": "t",
            "module": "dist/caniuse-embed-element.iife.js"
          }
        },
        {
          "kind": "custom-element-definition",
          "name": "r",
          "declaration": {
            "name": "t",
            "module": "dist/caniuse-embed-element.iife.js"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "dist/caniuse-embed-element.js",
      "declarations": [
        {
          "kind": "variable",
          "name": "t"
        },
        {
          "kind": "variable",
          "name": "h",
          "default": "class extends C { constructor() { super(...arguments), this.feature = \"\", this.past = 2, this.future = 1, this.baseline = !1, this.origin = \"https://caniuse.lruihao.cn\", this.theme = \"auto\", this.loading = \"lazy\", this.meta = Math.random().toString(36).slice(2), this.loaded = !1, this._iframeHeight = this.baseline ? 150 : 300, this.handleMessage = (i) => { const t = this.parseData(i.data), { type: e, payload: s = {} } = t; e === H && s.feature === this.feature && s.meta === this.meta && (this._iframeHeight = Math.ceil(s.height), this.requestUpdate()); }, this.handleIframeLoad = () => { this.loaded = !0; }; } /** * Called when the element is added to the DOM. * Sets up the message listener for iframe communication. */ connectedCallback() { super.connectedCallback(), this.setupMessageListener(); } /** * Called when the element is removed from the DOM. * Cleans up the message event listener to prevent memory leaks. */ disconnectedCallback() { super.disconnectedCallback(), window.removeEventListener(\"message\", this.handleMessage); } /** * Sets up the global message event listener for iframe communication. * This allows the component to receive height updates from the embedded iframe. * @private */ setupMessageListener() { window.addEventListener(\"message\", this.handleMessage); } /** * Safely parses incoming message data, handling both string and object formats. * @param data - The raw data from a postMessage event * @returns Parsed data object or empty object if parsing fails * @private */ parseData(i) { try { return typeof i == \"string\" ? JSON.parse(i) : i; } catch { return {}; } } /** * Generates the iframe source URL based on current component properties. * Constructs the URL with feature, meta, theme, and past version parameters. * @returns The complete URL for the iframe source, or empty string if no feature is specified * @private */ generateSource() { if (!this.feature) return \"\"; const i = [ `meta=${this.meta}`, `past=${this.past}`, `future=${this.future}`, `theme=${this.theme}` ]; return `${this.origin}/${this.feature}${this.baseline ? \"/baseline\" : \"\"}#${i.join(\"&\")}`; } /** * Renders the component's HTML template. * Shows either an iframe with caniuse data or a placeholder message when no feature is specified. * @returns The HTML template for this component */ render() { const i = this.generateSource(); return i ? b`<iframe class=\"ciu-embed-iframe\" src=\"${i}\" height=\"${this._iframeHeight}\" allow=\"fullscreen\" loading=\"${this.loading}\" @load=\"${this.handleIframeLoad}\"></iframe>` : (this.loaded = !0, b`<p class=\"ciu-embed-empty\"><span>Data on support for the features across the major browsers from <a href=\"https://caniuse.com\" target=\"_blank\">caniuse.com</a>.</span><br><span>[ The feature parameter is required! ]</span></p>`); } }"
        },
        {
          "kind": "variable",
          "name": "i",
          "type": {
            "text": "array"
          },
          "default": "[ `meta=${this.meta}`, `past=${this.past}`, `future=${this.future}`, `theme=${this.theme}` ]"
        }
      ],
      "exports": [
        {
          "kind": "custom-element-definition",
          "name": "i",
          "declaration": {
            "name": "t",
            "module": "dist/caniuse-embed-element.js"
          }
        },
        {
          "kind": "custom-element-definition",
          "name": "i",
          "declaration": {
            "name": "t",
            "module": "dist/caniuse-embed-element.js"
          }
        },
        {
          "kind": "js",
          "name": "CaniuseEmbedElement",
          "declaration": {
            "name": "h",
            "module": "dist/caniuse-embed-element.js"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "dist/caniuse-embed-element.umd.cjs",
      "declarations": [
        {
          "kind": "variable",
          "name": "t"
        }
      ],
      "exports": [
        {
          "kind": "custom-element-definition",
          "name": "r",
          "declaration": {
            "name": "t",
            "module": "dist/caniuse-embed-element.umd.cjs"
          }
        },
        {
          "kind": "custom-element-definition",
          "name": "r",
          "declaration": {
            "name": "t",
            "module": "dist/caniuse-embed-element.umd.cjs"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/caniuse-embed-element.ts",
      "declarations": [
        {
          "kind": "class",
          "description": "A custom web component that embeds caniuse.com browser compatibility data for a specific feature.\n\nThis element displays an interactive iframe showing browser support information from caniuse.com.\nIt dynamically adjusts its height based on the content and provides customization options for\ntheme, time range, and data source.",
          "name": "CaniuseEmbedElement",
          "members": [
            {
              "kind": "field",
              "name": "feature",
              "type": {
                "text": "string"
              },
              "default": "''",
              "description": "The name of the feature to display browser compatibility data for.\nThis should match a feature identifier from caniuse.com.",
              "attribute": "feature"
            },
            {
              "kind": "field",
              "name": "past",
              "type": {
                "text": "0 | 1 | 2 | 3 | 4 | 5"
              },
              "default": "2",
              "description": "Number of past major browser versions to display in the compatibility table.\nControls how far back in browser history the data extends.",
              "attribute": "past"
            },
            {
              "kind": "field",
              "name": "future",
              "type": {
                "text": "0 | 1 | 2 | 3"
              },
              "default": "1",
              "description": "Number of future major browser versions to display in the compatibility table.\nControls how far into future browser versions the data extends.",
              "attribute": "future"
            },
            {
              "kind": "field",
              "name": "baseline",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "description": "Whether to use baseline (simplified) view for the compatibility data.\nWhen true, shows a more compact version of the data.",
              "attribute": "baseline"
            },
            {
              "kind": "field",
              "name": "origin",
              "default": "DEFAULT_ORIGIN",
              "description": "The base URL of the caniuse embed service.\nCan be customized to use a different caniuse mirror or service.",
              "attribute": "origin"
            },
            {
              "kind": "field",
              "name": "theme",
              "type": {
                "text": "'auto' | 'light' | 'dark'"
              },
              "default": "'auto'",
              "description": "The color theme for the embedded content.\n- 'auto': Follows system preference\n- 'light': Light theme\n- 'dark': Dark theme",
              "attribute": "theme"
            },
            {
              "kind": "field",
              "name": "loading",
              "type": {
                "text": "'eager' | 'lazy'"
              },
              "default": "'lazy'",
              "description": "The loading strategy for the embedded iframe.\n- 'eager': Loads immediately\n- 'lazy': Loads when in viewport",
              "attribute": "loading"
            },
            {
              "kind": "field",
              "name": "meta",
              "description": "A unique identifier for this embed instance.\nUsed to match messages from the iframe to this specific component instance.\nAutomatically generated on creation.",
              "attribute": "meta"
            },
            {
              "kind": "field",
              "name": "loaded",
              "type": {
                "text": "boolean"
              },
              "privacy": "private",
              "default": "false",
              "description": "Indicates whether the iframe content has finished loading.\nUsed to control the visibility of loading state and iframe content.\nThis property is used via CSS attribute selectors through the reflect: true option.",
              "attribute": "loaded",
              "reflects": true
            },
            {
              "kind": "field",
              "name": "_iframeHeight",
              "privacy": "private",
              "description": "The current height of the embedded iframe in pixels.\nAutomatically updated based on content size via postMessage communication."
            },
            {
              "kind": "method",
              "name": "setupMessageListener",
              "privacy": "private",
              "description": "Sets up the global message event listener for iframe communication.\nThis allows the component to receive height updates from the embedded iframe."
            },
            {
              "kind": "field",
              "name": "handleMessage",
              "privacy": "private",
              "description": "Handles incoming postMessage events from the embedded iframe.\nUpdates the iframe height when a valid message is received from the correct iframe instance.",
              "parameters": [
                {
                  "description": "The MessageEvent containing data from the iframe",
                  "name": "ev"
                }
              ]
            },
            {
              "kind": "field",
              "name": "handleIframeLoad",
              "privacy": "private",
              "description": "Handles iframe load event as a fallback for setting loaded state."
            },
            {
              "kind": "method",
              "name": "parseData",
              "privacy": "private",
              "return": {
                "type": {
                  "text": ""
                }
              },
              "parameters": [
                {
                  "name": "data",
                  "type": {
                    "text": "unknown"
                  },
                  "description": "The raw data from a postMessage event"
                }
              ],
              "description": "Safely parses incoming message data, handling both string and object formats."
            },
            {
              "kind": "method",
              "name": "generateSource",
              "privacy": "private",
              "return": {
                "type": {
                  "text": ""
                }
              },
              "description": "Generates the iframe source URL based on current component properties.\nConstructs the URL with feature, meta, theme, and past version parameters."
            }
          ],
          "attributes": [
            {
              "name": "feature",
              "type": {
                "text": "string"
              },
              "default": "''",
              "description": "The name of the feature to display browser compatibility data for.\nThis should match a feature identifier from caniuse.com.",
              "fieldName": "feature"
            },
            {
              "name": "past",
              "type": {
                "text": "0 | 1 | 2 | 3 | 4 | 5"
              },
              "default": "2",
              "description": "Number of past major browser versions to display in the compatibility table.\nControls how far back in browser history the data extends.",
              "fieldName": "past"
            },
            {
              "name": "future",
              "type": {
                "text": "0 | 1 | 2 | 3"
              },
              "default": "1",
              "description": "Number of future major browser versions to display in the compatibility table.\nControls how far into future browser versions the data extends.",
              "fieldName": "future"
            },
            {
              "name": "baseline",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "description": "Whether to use baseline (simplified) view for the compatibility data.\nWhen true, shows a more compact version of the data.",
              "fieldName": "baseline"
            },
            {
              "name": "origin",
              "default": "DEFAULT_ORIGIN",
              "description": "The base URL of the caniuse embed service.\nCan be customized to use a different caniuse mirror or service.",
              "fieldName": "origin"
            },
            {
              "name": "theme",
              "type": {
                "text": "'auto' | 'light' | 'dark'"
              },
              "default": "'auto'",
              "description": "The color theme for the embedded content.\n- 'auto': Follows system preference\n- 'light': Light theme\n- 'dark': Dark theme",
              "fieldName": "theme"
            },
            {
              "name": "loading",
              "type": {
                "text": "'eager' | 'lazy'"
              },
              "default": "'lazy'",
              "description": "The loading strategy for the embedded iframe.\n- 'eager': Loads immediately\n- 'lazy': Loads when in viewport",
              "fieldName": "loading"
            },
            {
              "name": "meta",
              "description": "A unique identifier for this embed instance.\nUsed to match messages from the iframe to this specific component instance.\nAutomatically generated on creation.",
              "fieldName": "meta"
            },
            {
              "name": "loaded",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "description": "Indicates whether the iframe content has finished loading.\nUsed to control the visibility of loading state and iframe content.\nThis property is used via CSS attribute selectors through the reflect: true option.",
              "fieldName": "loaded"
            }
          ],
          "superclass": {
            "name": "LitElement",
            "package": "lit"
          },
          "tagName": "caniuse-embed",
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "CaniuseEmbedElement",
          "declaration": {
            "name": "CaniuseEmbedElement",
            "module": "src/caniuse-embed-element.ts"
          }
        },
        {
          "kind": "custom-element-definition",
          "name": "caniuse-embed",
          "declaration": {
            "name": "CaniuseEmbedElement",
            "module": "src/caniuse-embed-element.ts"
          }
        }
      ]
    }
  ]
}