cem-plugin-expanded-types

CEM Analyzer Expanded Types

This is a plugin expands types for your component attributes and properties in Custom Elements Manifest using the Custom Element Manifest Analyzer.

This plugin will not overwrite the existing property, but will create a new property with the extended type value.

// my-component.ts

type Target = '_blank' | '_self' | '_parent' | '_top';

export default MyElement extends HTMLElement {
  public target?: Target;
}

{
  "kind": "field",
  "name": "target",
  "description": "A lookup type for example",
  "attribute": "target",
  "type": {
    "text": "Target | undefined"
  },
  "expandedType": {
    "text": "'_blank' | '_self' | '_parent' | '_top' | undefined"
  }
}

Usage

Pre-installation

Ensure the following steps have been taken in your component library prior to using this plugin:

• Install and set up the Custom Elements Manifest Analyzer
• Create a config file

Install

npm i -D cem-plugin-expanded-types

Implementation

Before you can use the plugin, you need to set the TypeScript typeChecker. To help with this, the package provides a getTsProgram helper that you can call in the overrideModuleCreation function in the CEM Analyzer.

// custom-elements-manifest.config.js

import { getTsProgram, expandTypesPlugin } from "cem-plugin-expanded-types";

export default {
  ...
  overrideModuleCreation: ({ts, globs}) => {
    const program = getTsProgram(ts, globs, "tsconfig.json");
    return program
      .getSourceFiles()
      .filter((sf) => globs.find((glob) => sf.fileName.includes(glob)));
  },

  /** Provide custom plugins */
  plugins: [expandTypesPlugin()],
};

Configuration

You have the ability to change the property name that is assigned to the expanded type. By default it is expandedType, but if you wanted to save it as something like parsedType, you can set that as part of the plugin options.

// custom-elements-manifest.config.js

export default {
  ...

  /** Provide custom plugins */
  plugins: [expandTypesPlugin({ propertyName: "parsedType" })],
};

Once that has been updated, the expanded type will appear under the new property name.

{
  "kind": "field",
  "name": "target",
  "description": "A lookup type for example",
  "attribute": "target",
  "type": {
    "text": "Target | undefined"
  },
  "parsedType": {
    "text": "'_blank' | '_self' | '_parent' | '_top' | undefined"
  }
}

NOTE: As you can see in the example above, the structure will follow the same pattern as the type object in that your custom name will have a property called text.