chore: Migrate to the new documenter API (#22)

Author: taheramr

scripts/docs.js

@@ -2,49 +2,21 @@
 // SPDX-License-Identifier: Apache-2.0
 import path from "node:path";
 
-import { documentComponents, documentTestUtils } from "@cloudscape-design/documenter";
+import { documentTestUtils, writeComponentsDocumentation } from "@cloudscape-design/documenter";
 
-import { dashCase, listPublicDirs, writeSourceFile } from "./utils.js";
+import { writeSourceFile } from "./utils.js";
 
-const publicDirs = listPublicDirs("src");
 const targetDir = "lib/components/internal/api-docs";
 
 componentDocs();
 testUtilDocs();
 
-function validatePublicFiles(definitionFiles) {
-  for (const publicDir of publicDirs) {
-    if (!definitionFiles.includes(publicDir)) {
-      throw new Error(`Directory src/${publicDir} does not have a corresponding API definition`);
-    }
-  }
-}
-
 function componentDocs() {
-  const definitions = documentComponents({
+  writeComponentsDocumentation({
+    outDir: path.join(targetDir, "components"),
     tsconfigPath: path.resolve("tsconfig.json"),
     publicFilesGlob: "src/*/index.tsx",
   });
-  const outDir = path.join(targetDir, "components");
-  const fileNames = definitions
-    .filter((definition) => {
-      const fileName = dashCase(definition.name);
-      if (!publicDirs.includes(fileName)) {
-        console.warn(`Excluded "${fileName}" from components definitions.`);
-        return false;
-      }
-      return true;
-    })
-    .map((definition) => {
-      const fileName = dashCase(definition.name);
-      writeSourceFile(path.join(outDir, fileName + ".js"), `module.exports = ${JSON.stringify(definition, null, 2)};`);
-      return fileName;
-    });
-  validatePublicFiles(fileNames);
-  const indexContent = `module.exports = {
-    ${fileNames.map((name) => `${JSON.stringify(name)}:require('./${name}')`).join(",\n")}
-  }`;
-  writeSourceFile(path.join(outDir, "index.js"), indexContent);
 }
 
 function testUtilDocs() {

src/__tests__/documenter.test.ts

@@ -2,15 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 import { expect, test } from "vitest";
 
-import { getAllComponents, requireComponentDefinition } from "./utils";
-
+import componentDefinitions from "../../lib/components/internal/api-docs/components";
+import { getAllComponents } from "./utils";
 test.each<string>(getAllComponents())(`definition for %s matches the snapshot`, (componentName: string) => {
-  const definition = requireComponentDefinition(componentName);
+  const definition = componentDefinitions[componentName];
 
   // overriding with a fake value so that when there are icon changes in components this test doesn't block it
-  const iconNameDefinition = definition.properties.filter(({ name }: { name: string }) => name === "iconName");
-  if (iconNameDefinition && iconNameDefinition[0]) {
-    iconNameDefinition[0].inlineType.values = "comes from @cloudscape-design/components";
+  const iconNameDefinition = definition.properties.find(({ name }: { name: string }) => name === "iconName");
+  if (iconNameDefinition && iconNameDefinition.inlineType?.type === "union") {
+    iconNameDefinition.inlineType.values = ["comes from @cloudscape-design/components"];
   }
   expect(definition).toMatchSnapshot(componentName);
 });

src/__tests__/utils.ts

@@ -6,7 +6,6 @@ import * as fs from "node:fs";
 import * as path from "node:path";
 
 const componentsDir = path.resolve(__dirname, "../../lib/components");
-const definitionsDir = path.resolve(__dirname, "../../lib/components/internal/api-docs/components");
 
 export function getAllComponents(): string[] {
   return fs
@@ -21,11 +20,6 @@ export function getAllComponents(): string[] {
     );
 }
 
-export function requireComponentDefinition(componentName: string) {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  return require(path.join(definitionsDir, componentName));
-}
-
 export async function requireComponent(componentName: string) {
   // eslint-disable-next-line no-unsanitized/method
   const { default: Component } = await import(path.join(componentsDir, componentName));