custom-elements-manifest.js

import { jsxTypesPlugin } from '@wc-toolkit/jsx-types';
import { parse } from 'comment-parser';
import { customElementSolidJsPlugin } from 'custom-element-solidjs-integration';
import { readFileSync } from 'fs';

const packageData = JSON.parse(readFileSync('./package.json', 'utf8'));
const { name, description, version, author, homepage, license } = packageData;
const outdir = 'dist';

export default {
  globs: ['src/components/**/*.ts'],
  exclude: ['**/*.styles.ts', '**/*.test.ts'],
  litelement: true,
  outdir,
  packagejson: false,
  plugins: [
    // Append package data
    {
      name: 'append-package-data',
      packageLinkPhase({ customElementsManifest }) {
        customElementsManifest.package = { name, description, version, author, homepage, license };
      }
    },

    // Parse custom jsDoc tags
    {
      name: 'parse-custom-tags',
      analyzePhase({ ts, node, moduleDoc }) {
        switch (node.kind) {
          case ts.SyntaxKind.ClassDeclaration: {
            const className = node.name.getText();
            const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
            const customTags = ['dependency', 'documentation', 'since', 'status', 'title'];
            let customComments = '/**';

            node.jsDoc?.forEach(jsDoc => {
              jsDoc?.tags?.forEach(tag => {
                const tagName = tag.tagName.getText();

                if (customTags.includes(tagName)) {
                  customComments += `\n * @${tagName} ${tag.comment}`;
                }
              });
            });

            const parsed = parse(`${customComments}\n */`);
            parsed[0].tags?.forEach(t => {
              switch (t.tag) {
                // Dependencies
                case 'dependency':
                  if (!Array.isArray(classDoc['dependencies'])) {
                    classDoc['dependencies'] = [];
                  }
                  classDoc['dependencies'].push(t.name);
                  break;

                // Value-only metadata tags
                case 'documentation':
                case 'since':
                case 'status':
                  classDoc[t.tag] = t.name;
                  break;

                // All other tags
                default:
                  if (!Array.isArray(classDoc[t.tag])) {
                    classDoc[t.tag] = [];
                  }

                  classDoc[t.tag].push({
                    name: t.name,
                    description: t.description,
                    type: t.type || undefined
                  });
              }
            });
          }
        }
      }
    },

    // The analyzer eagerly looks for any `this.dispatchEvent()` and populates events with ones we don't actually want
    // in the docs. This removes any event that doesn't have a name or description.
    {
      name: 'filter-events',
      packageLinkPhase({ customElementsManifest }) {
        customElementsManifest.modules?.forEach(module => {
          module.declarations?.forEach(declaration => {
            if (declaration.events) {
              declaration.events = declaration.events.filter(event => event.name && event.description);
            }
          });
        });
      }
    },

    // Generate JSX types (see https://wc-toolkit.com/integrations/jsx/)
    jsxTypesPlugin({
      fileName: 'custom-elements-jsx.d.ts',
      outdir,
      componentTypePath: (_name, _tag, modulePath) => {
        return `.${modulePath.replace(/^src/, '')}`;
      }
    }),

    // Generate Solid.js types (see https://github.com/break-stuff/cem-tools/tree/main/packages/solidjs-integration)
    customElementSolidJsPlugin({
      fileName: 'solid-integration.d.ts',
      outdir
    })
  ]
};