<link rel="stylesheet" href="/_merged_assets/_static/search/noscript.css">
Custom Elements Manifest Custom Elements Manifest Analyzer Blog Playground Toggle darkmode

Configuration

CLI Options

Command/optionTypeDescriptionExample
analyzeAnalyze your components
--configstringPath to custom config location`--config "../custom-elements-manifest.config.js"`
--globsstring[]Globs to analyze`--globs "foo.js"`
--excludestring[]Globs to exclude`--exclude "foo.js"`
--outdirstringDirectory to output the Manifest to`--outdir dist`
--watchbooleanEnables watch mode, generates a new manifest on file change`--watch`
--devbooleanEnables extra logging for debugging`--dev`
--litelementbooleanEnable special handling for LitElement syntax`--litelement`
--fastbooleanEnable special handling for FASTElement syntax`--fast`
--stencilbooleanEnable special handling for Stencil syntax`--stencil`
--catalystbooleanEnable special handling for Catalyst syntax`--catalyst`

Config File

You can specify a custom custom-elements-manifest.config.mjs configuration file that allows the following properties:

custom-elements-manifest.config.mjs:

import { myAwesomePlugin } from 'awesome-plugin';

export default {
  /** Globs to analyze */
  globs: ['src/**/*.js'],
  /** Globs to exclude */
  exclude: ['src/foo.js'],
  /** Directory to output CEM to */
  outdir: 'dist',
  /** Run in dev mode, provides extra logging */
  dev: true,
  /** Run in watch mode, runs on file changes */
  watch: true,
  /** Enable special handling for litelement */
  litelement: true,
  /** Enable special handling for catalyst */
  catalyst: false,
  /** Enable special handling for fast */
  fast: false,
  /** Enable special handling for stencil */
  stencil: false,
  /** Provide custom plugins */
  plugins: [
    myAwesomePlugin()
  ],

  /** Overrides default module creation: */
  overrideModuleCreation: ({ts, globs}) => {
    const program = ts.createProgram(globs, defaultCompilerOptions);
    const typeChecker = program.getTypeChecker();

    return program.getSourceFiles().filter(sf => globs.find(glob => sf.fileName.includes(glob)));
  },
}

Config types:

interface userConfigOptions {
  globs: string[],
  exclude: string[],
  outdir: string,
  dev: boolean,
  watch: boolean,

  litelement: boolean,
  catalyst: boolean,
  fast: boolean,
  stencil: boolean,
  
  plugins: Array<() => Plugin>,
  overrideModuleCreation: ({ts: TypeScript, globs: string[]}) => SourceFile[]
}

Custom config location

Using the --config flag in the CLI you can supply a custom path to your configuration file as follows:

cem analyze --config "../configs/custom-elements-manifest.js"