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:
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:Create a
custom-elements-manifest.config.mjs
file in the root of your project similar to this:You can update your
package.json
with the following scripts to generate thecustom-elements.json
file: