Support for custom-elements.json File Generation for StencilJS Components

customElementDocGenerator.ts

/**
 * Stencil Doc Outputs don't seem to support custom-elements.json as suggested
 * here: https://github.com/w3c/webcomponents/issues/776#issuecomment-536749457.
 * This generator implements this standard, which is used by Storybook to display
 * documentation.
 */
export async function generateJsonDocs(config, compilerCtx, _buildCtx, docsData) {
  const jsonOutputTargets = config.outputTargets.filter(isOutputTargetCustomElementDocsJson);
  const { components, ...docsDataWithoutComponents } = docsData;
  const json = {
    ...docsDataWithoutComponents,
    tags: components.map(cmp => ({
      filePath: cmp.filePath,
      encapsulation: cmp.encapsulation,
      tag: cmp.tag,
      name: cmp.tag,
      readme: cmp.readme,
      description: cmp.docs,
      docsTags: cmp.docsTags,
      usage: cmp.usage,
      properties: cmp.props.map(prop => ({
        ...prop,
        description: prop.docs,
      })),
      attributes: cmp.props.map(prop => ({
        ...prop,
        name: prop.attr,
        description: prop.docs,
      })),
      methods: cmp.methods,
      events: cmp.events.map(e => ({
        ...e,
        name: e.event,
        description: e.docs,
        type: e.detail,
      })),
      styles: cmp.styles,
      slots: cmp.slots,
      dependents: cmp.dependents,
      dependencies: cmp.dependencies,
      dependencyGraph: cmp.dependencyGraph,
      deprecation: cmp.deprecation,
    }))
  };
  const jsonContent = JSON.stringify(json, null, 2);
  await Promise.all(
    jsonOutputTargets.map(() => {
      return writeDocsOutput(compilerCtx, jsonContent, config.rootDir);
    })
  );
}

function isOutputTargetCustomElementDocsJson(o) {
  return o.name === 'custom-element-docs';
}

export async function writeDocsOutput(compilerCtx, jsonContent: string, root: string) {
  return compilerCtx.fs.writeFile(`${root}/dist/docs/custom-elements.json`, jsonContent);
}

stencil.config.ts

import { Config } from '@stencil/core'
import { generateJsonDocs } from './src/customElementDocGenerator';

export const config: Config = {
  ...
  outputTargets: [
    {
      type: 'custom',
      generator: generateJsonDocs,
      name: 'custom-element-docs'
    },
    ...
  ],
  ...
}

Implements StencilJS custom-elements.json creation at the root of project, as outlined here: WICG/webcomponents#776 (comment)

This is especially useful if you are trying to setup @storybook/web-components DocsPage.