feat(): generate experimental web-components.json (#1256)

src/compiler/docs/docs.ts

@@ -3,6 +3,7 @@ import { BuildContext } from '../build/build-ctx';
 import { catchError, hasError } from '../util';
 import { cleanDiagnostics } from '../../util/logger/logger-util';
 import { generateDocData } from './generate-doc-data';
+import { generateWebComponentsJson } from './generate-web-components-json';
 import { generateJsonDocs } from './generate-json-docs';
 import { generateReadmeDocs } from './generate-readme-docs';
 import { generateCustomDocs } from './generate-custom-docs';
@@ -55,31 +56,34 @@ export async function generateDocs(config: d.Config, compilerCtx: d.CompilerCtx,
   if (!config.buildDocs) {
     return;
   }
+  const distOutputTargets = config.outputTargets.filter(o => o.type === 'dist') as d.OutputTargetDist[];
   const docsOutputTargets = config.outputTargets.filter(o => {
     return o.type === 'docs' || o.type === 'docs-json' || o.type === 'docs-custom';
   });
 
-  if (docsOutputTargets.length === 0) {
-    return;
-  }
-
   const docsData = await generateDocData(config, compilerCtx, buildCtx.diagnostics);
 
   const strictCheck = (docsOutputTargets as d.OutputTargetDocsReadme[]).some(o => !!o.strict);
   if (strictCheck) {
     strickCheckDocs(config, docsData);
   }
 
+  // generate web-components.json
+  await generateWebComponentsJson(config, compilerCtx, distOutputTargets, docsData);
+
+  // generate READMEs docs
   const readmeTargets = docsOutputTargets.filter(o => o.type === 'docs') as d.OutputTargetDocsReadme[];
   if (readmeTargets.length > 0) {
     await generateReadmeDocs(config, compilerCtx, readmeTargets, docsData);
   }
 
+  // generate json docs
   const jsonTargets = docsOutputTargets.filter(o => o.type === 'docs-json') as d.OutputTargetDocsJson[];
   if (jsonTargets.length > 0) {
     await generateJsonDocs(compilerCtx, jsonTargets, docsData);
   }
 
+  // generate custom docs
   const customTargets = docsOutputTargets.filter(o => o.type === 'docs-custom') as d.OutputTargetDocsCustom[];
   if (customTargets.length > 0) {
     await generateCustomDocs(config, customTargets, docsData);

src/compiler/docs/generate-web-components-json.ts

@@ -0,0 +1,22 @@
+import * as d from '../../declarations';
+import { WEB_COMPONENTS_JSON_FILE_NAME } from '../../util/constants';
+import { normalizePath } from '../util';
+
+export async function generateWebComponentsJson(config: d.Config, compilerCtx: d.CompilerCtx, distOutputs: d.OutputTargetDist[], docsData: d.JsonDocs) {
+  const json = {
+    'tags': docsData.components.map(cmp => ({
+      'label': cmp.tag,
+      'description': cmp.readme,
+      'attributes': cmp.props.filter(p => p.attr).map(p => ({
+        'label': p.attr,
+        'description': p.docs,
+        'required': p.required
+      }))
+    }))
+  };
+  const jsonContent = JSON.stringify(json, null, 2);
+  await Promise.all(distOutputs.map(async distOutput => {
+    const filePath = normalizePath(config.sys.path.join(distOutput.buildDir, WEB_COMPONENTS_JSON_FILE_NAME));
+    await compilerCtx.fs.writeFile(filePath, jsonContent);
+  }));
+}

src/util/constants.ts

@@ -116,6 +116,7 @@ export const XML_NS = 'http://www.w3.org/XML/1998/namespace';
  */
 export const BANNER = `Built with http://stenciljs.com`;
 export const COLLECTION_MANIFEST_FILE_NAME = 'collection-manifest.json';
+export const WEB_COMPONENTS_JSON_FILE_NAME = 'web-components.json';
 export const APP_NAMESPACE_REGEX = /["']__APP__['"]/g;