Documentation on how to generate the custom-elements.json

[wimdeblauwe]

It was not clear to me how I needed to generate the custom-elements.json that this library uses. It might be handy to add some info to the README about this.

For example:

To use wc-storybook-helpers, you need to generate a Custom Elements Manifest. The easiest way to do that is adding @custom-elements-manifest/analyzer to your project:

npm i -D @custom-elements-manifest/analyzer cem-plugin-expanded-types

Create a custom-elements-manifest.config.mjs file in the root of your project similar to this:

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

export default {
    /** Globs to analyze */
    globs: ["src/components/**/*.ts"],
    /** Globs to exclude */
    exclude: ["src/**/*.stories.ts", "src/**/*.test.ts"],
    /** Directory to output CEM to */
    outdir: "/",
    /** Run in dev mode, provides extra logging */
    dev: false,
    /** Run in watch mode, runs on file changes */
    watch: false,
    /** Include third party custom elements manifests */
    dependencies: true,
    /** Output CEM path to `package.json`, defaults to true */
    packagejson: false,
    /** Enable special handling for litelement */
    litelement: true,

    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()],
};

You can update your package.json with the following scripts to generate the custom-elements.json file:

    "analyze": "cem analyze",
    "analyze:dev": "cem analyze --watch",