cem-plugin-litelement-parts

A plugin for @custom-elements-manifest/analyzer that maps CSS Parts in Lit-based web components to the "cssParts" property of the Custom Elements Manifests without requiring JSDoc @cssPart tags.

Usage

Install:

npm i --save-dev cem-plugin-litelement-parts

Import

custom-elements-manifest.config.js:

import partsPlugin from 'cem-plugin-litelement-parts';

export default {
  plugins: [
    partsPlugin()
  ]
}

Supported syntax

@customElement('my-element')
export class MyElement extends LitElement {
  // ...

  render() {
    return [
      html`
        <!-- The part that holds the header. -->
        <div part="header"></div>
        <!-- The main body of the element. -->
        <!-- Multiple comments are supported. -->
        <!-- Multi-line
              comments
              also work,
              with all leading and trailing space trimmed.
        -->
        <div part="body"></div>
      `,
      this.renderFooter_()
    ]
  }

  private renderFooter_() {
    return html`
      <!-- An optional part that holds the footer. -->
      <div part="footer"></div>
    `
  }

  // ...
}

The plugin supports multiple web component classes per source file. Multiple html template strings can appear within a component. Caveats:

• any html template string that is defined before any web component class is ignored. To include it, move the definition to after the web component class.
• any html template string that is defined outside of a web component class is attributed to the class that immediately preceeds it. If this is a helper function that is used by multiple web component classes, use the explit JSDoc @csspart tag in earlier classes.

Expected output

The expected output for the custom elements defined above:

{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "my-element.ts",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "MyElement",
          "members": [
            {
              "kind": "method",
              "name": "renderFooter_",
              "privacy": "private"
            }
          ],
          "superclass": {
            "name": "LitElement",
            "package": "lit"
          },
+         "cssParts": [
+           {
+             "name": "header",
+             "description": "The part that holds the header."
+           },
+           {
+             "name": "body",
+             "description": "The main body of the element. Multiple comments are supported. Multi-line comments also work, with all leading and trailing space trimmed."
+           },
+           {
+             "name": "footer",
+             "description": "An optional part that holds the footer."
+           }
+         ],
          "tagName": "my-element",
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "MyElement",
          "declaration": {
            "name": "MyElement",
            "module": "my-element.ts"
          }
        },
        {
          "kind": "custom-element-definition",
          "name": "my-element",
          "declaration": {
            "name": "MyElement",
            "module": "my-element.ts"
          }
        }
      ]
    }
  ]
}