chore: Migrate to the new documenter API

scripts/docs.js

@@ -2,41 +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 { 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");
-  for (const definition of definitions) {
-    writeSourceFile(
-      path.join(outDir, definition.dashCaseName + ".js"),
-      `module.exports = ${JSON.stringify(definition, null, 2)};`,
-    );
-  }
-  const indexContent = `module.exports = {
-    ${definitions.map((definition) => `${JSON.stringify(definition.dashCaseName)}:require('./${definition.dashCaseName}')`).join(",\n")}
-  }`;
-  writeSourceFile(path.join(outDir, "index.js"), indexContent);
-  validatePublicFiles(definitions.map((def) => def.dashCaseName));
 }
 
 function testUtilDocs() {

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`definition for 'code-view' matches the snapshot 1`] = `
+exports[`definition for code-view matches the snapshot > code-view 1`] = `
 {
   "dashCaseName": "code-view",
   "events": [],

src/__tests__/documenter.test.ts

@@ -2,9 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 import { expect, test } from "vitest";
 
-// @ts-expect-error no types here
-import apiDocs from "../../lib/components/internal/api-docs/components";
+import componentDefinitions from "../../lib/components/internal/api-docs/components";
+import { getAllComponents } from "./utils";
 
-test.each(Object.entries(apiDocs))("definition for $0 matches the snapshot", (name, definition) => {
-  expect(definition).toMatchSnapshot();
+test.each<string>(getAllComponents())(`definition for %s matches the snapshot`, (componentName: string) => {
+  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.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

@@ -0,0 +1,27 @@
+/* eslint-env node */
+/* eslint-disable header/header */
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+const componentsDir = path.resolve(__dirname, "../../lib/components");
+
+export function getAllComponents(): string[] {
+  return fs
+    .readdirSync(componentsDir)
+    .filter(
+      (name) =>
+        name !== "internal" &&
+        name !== "test-utils" &&
+        !name.includes(".") &&
+        !name.includes("LICENSE") &&
+        !name.includes("NOTICE"),
+    );
+}
+
+export async function requireComponent(componentName: string) {
+  // eslint-disable-next-line no-unsanitized/method
+  const { default: Component } = await import(path.join(componentsDir, componentName));
+  return Component;
+}