/cem-plugin-template

Starter repo for developing custom element analyzer plugins

Primary LanguageJavaScript

cem-plugin-template

This is a starter repository to easily get set up to write custom plugins for @custom-elements-manifest/analyzer. For more information on authoring custom plugins, see the authoring plugins documentation.

Development

# install dependencies
npm install

# start local development
npm start

# run tests
npm test

TIP: When writing custom plugins, ASTExplorer is your friend 🙂

Usage

Install:

npm i -D cem-plugin-<pluginname>

Import

custom-elements-manifest.config.js:

import myPlugin from 'cem-plugin-template';

export default {
  plugins: [
    myPlugin()
  ]
}

Supported syntax

Document an example of the syntax your plugin supports

export class MyElement extends HTMLElement {
  /**
   * @foo Some custom information!
   */ 
  message = ''
}

Expected output

Document an example of the expected output custom elements manifest

{
  "schemaVersion": "0.1.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "my-element.js",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "MyElement",
          "members": [
            {
              "kind": "field",
              "name": "message",
              "default": "",
+             "foo": "Some custom information!"
            }
          ],
          "superclass": {
            "name": "HTMLElement"
          },
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "MyElement",
          "declaration": {
            "name": "MyElement",
            "module": "my-element.js"
          }
        }
      ]
    }
  ]
}