refactor: move metadata to web-components package

Author: amir78729

.gitignore

@@ -75,3 +75,7 @@ test-results/
 playwright-report/
 blob-report/
 playwright/.cache/
+
+# Web components metadata
+packages/web-components/components-metadata.json
+packages/web-components/custom-elements.json

docs/components/[component].paths.ts

@@ -16,8 +16,7 @@ export default {
 
     const docsDir = path.resolve(dirname, "..");
     const workspaceDir = path.join(docsDir, "..");
-    const distDir = path.join(workspaceDir, "dist");
-    const metadataFile = path.join(distDir, "components-metadata.json");
+    const metadataFile = path.join(workspaceDir, "packages/web-components/components-metadata.json");
 
     const metadata = JSON.parse(
       fs.readFileSync(metadataFile).toString(),

docs/sidebar.ts

@@ -7,8 +7,7 @@ import { type Metadata } from "../types/docs.ts";
 const { dirname } = getFileMeta(import.meta.url);
 
 const workspaceDir = path.join(dirname, "..");
-const distDir = path.join(workspaceDir, "dist");
-const metadataFile = path.join(distDir, "components-metadata.json");
+const metadataFile = path.join(workspaceDir, "packages/web-components/components-metadata.json");
 
 const getSidebarItems = (): DefaultTheme.Sidebar => {
   return (

package.json

@@ -40,7 +40,7 @@
     "docs:dev": "run-s gen:metadata docs:vitepress:dev",
     "docs:build": "run-s gen:metadata docs:vitepress:build",
     "docs:preview": "run-s docs:vitepress:preview",
-    "gen:metadata": "tsx ./scripts/generate-metadata.ts"
+    "gen:metadata": "pnpm --filter @tapsioss/web-components run gen:metadata"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.2",

packages/react-components/scripts/generate.ts

@@ -19,18 +19,13 @@ const LIT_REACT_NAMESPACE = "LitReact";
 const { dirname } = getFileMeta(import.meta.url);
 
 const packageDir = path.resolve(dirname, "..");
-const workspaceDir = path.resolve(packageDir, "../../");
 const srcDir = path.join(packageDir, "src");
 const templatesDir = path.join(packageDir, "templates");
 
 const barrelFilePath = path.join(srcDir, "index.ts");
-const metadataGeneratorPath = path.join(
-  workspaceDir,
-  "scripts/generate-metadata.ts",
-);
 
 const componentTemplatePath = path.join(templatesDir, "component.txt");
-const metadataPath = path.join(workspaceDir, "dist/components-metadata.json");
+const metadataPath = path.resolve(packageDir, "../web-components/components-metadata.json");
 
 const START_COMMENT = "/* START: AUTO-GENERATED [DO_NOT_REMOVE] */";
 const END_COMMENT = "/* END: AUTO-GENERATED [DO_NOT_REMOVE] */";
@@ -203,7 +198,7 @@ const transformToComponentModule = new Transform({
 void (async () => {
   console.time("generate");
   const { stdout, stderr } = await asyncExec(
-    ["tsx", metadataGeneratorPath].join(" "),
+    "pnpm --filter @tapsioss/web-components run gen:metadata",
   );
 
   if (stderr) console.error(stderr);

packages/web-components/package.json

@@ -3,9 +3,8 @@
   "version": "0.8.0",
   "type": "module",
   "files": [
-    "./dist/**/*.js",
-    "./dist/**/*.d.ts",
-    "./dist/**/package.json"
+    "./dist",
+    "custom-elements.json"
   ],
   "exports": {
     "./*": {
@@ -16,11 +15,13 @@
   "scripts": {
     "clear": "shx rm -rf dist",
     "prebuild": "pnpm run clear",
-    "build": "tsc --project ./tsconfig.build.json",
+    "build": "run-p gen:metadata bulld:compile",
+    "bulld:compile": "tsc --project ./tsconfig.build.json",
     "predev": "pnpm run clear",
     "test": "playwright test",
     "dev": "tsc --watch --project ./tsconfig.dev.json",
-    "release": "pnpm publish . --tag latest --access public"
+    "release": "pnpm publish . --tag latest --access public",
+    "gen:metadata": "tsx scripts/generate-metadata.ts"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.11",
@@ -30,5 +31,6 @@
   },
   "devDependencies": {
     "@internals/test-helpers": "workspace:*"
-  }
+  },
+  "customElements": "custom-elements.json"
 }

scripts/generate-metadata.ts packages/web-components/scripts/generate-metadata.ts

@@ -7,73 +7,47 @@ import {
 import { exec } from "node:child_process";
 import * as fs from "node:fs";
 import * as path from "node:path";
-import { cwd } from "node:process";
 import { promisify } from "node:util";
 import { type DefaultTheme } from "vitepress";
-import type { Component, ImportPaths } from "../types/docs.ts";
-import { getFileMeta } from "./utils.ts";
+import { getFileMeta } from "../../../scripts/utils.ts";
+import type { Component, ImportPaths, Metadata } from "../../../types/docs.ts";
 
 const asyncExec = promisify(exec);
 
 const { dirname } = getFileMeta(import.meta.url);
-const workspaceDir = path.resolve(dirname, "..");
-const webComponentsSrcDir = path.join(
-  workspaceDir,
-  "packages/web-components/src",
-);
+const packageDir = path.join(dirname, "..");
+const packageSrcDir = path.join(packageDir, "src");
 
-const workspaceDistDir = path.join(workspaceDir, "dist");
-const metadataFile = path.join(workspaceDistDir, "components-metadata.json");
+const metadataFile = path.join(packageDir, "components-metadata.json");
 
 const generateCem = async (): Promise<Package> => {
-  const entrypoint = path.resolve(
-    workspaceDir,
-    "./packages/web-components/src",
-  );
-
-  const distDir = path.relative(cwd(), path.join(workspaceDir, "dist"));
-
   const globs: string[] = [
-    `${entrypoint}/**/index.ts`,
-    `${entrypoint}/**/*/index.ts`,
-    `!${entrypoint}/utils/**`,
-    `!${entrypoint}/internals/**`,
+    `${packageSrcDir}/**/index.ts`,
+    `${packageSrcDir}/**/*/index.ts`,
+    `!${packageSrcDir}/utils/**`,
+    `!${packageSrcDir}/internals/**`,
   ];
 
-  await asyncExec(`shx rm -rf ${distDir}`);
   const { stderr: cemAnalyzeStderr, stdout: cemAnalyzeStdout } =
     await asyncExec(
       [
         "cem",
         "analyze",
         "--litelement",
-        "--outdir",
-        distDir,
+        "--packagejson",
         globs.map(g => `--globs ${g}`).join(" "),
       ].join(" "),
     );
 
   if (cemAnalyzeStdout) console.log(cemAnalyzeStdout);
   if (cemAnalyzeStderr) console.error(cemAnalyzeStderr);
 
-  const cemFile = path.join(workspaceDistDir, "custom-elements.json");
+  const cemFile = path.join(packageDir, "custom-elements.json");
 
   return JSON.parse(fs.readFileSync(cemFile, "utf8")) as Package;
 };
 
-const getKebabCaseComponentName = (component: Declaration) => {
-  if (!("tagName" in component) || !component.tagName) return null;
-
-  const tagName = component.tagName;
-
-  return tagName.replace("tapsi-", "");
-};
-
-void (async () => {
-  console.log("🧩 generating metadata...");
-
-  const cem = await generateCem();
-
+const generateMetadataFromCem = async (cem: Package): Promise<Metadata> => {
   const sidebarItemsMap: Record<string, DefaultTheme.SidebarItem> = {};
   const components: Component[] = [];
 
@@ -89,7 +63,7 @@ void (async () => {
   filteredModules.forEach(module => {
     const moduleSrc = module.path;
     const moduleDir = path.dirname(moduleSrc);
-    const relativePath = path.relative(webComponentsSrcDir, moduleDir);
+    const relativePath = path.relative(packageSrcDir, moduleDir);
 
     if (!relativePath) return;
 
@@ -199,17 +173,27 @@ void (async () => {
 
   const sidebarItems = [iconsSidebarItem, componentSidebarItems];
 
-  fs.writeFileSync(
-    metadataFile,
-    JSON.stringify(
-      {
-        components,
-        sidebarItems,
-      },
-      null,
-      2,
-    ),
-  );
+  return {
+    sidebarItems,
+    components,
+  };
+};
+
+const getKebabCaseComponentName = (component: Declaration) => {
+  if (!("tagName" in component) || !component.tagName) return null;
+
+  const tagName = component.tagName;
+
+  return tagName.replace("tapsi-", "");
+};
+
+void (async () => {
+  console.log("🧩 generating metadata...");
+
+  const cem = await generateCem();
+  const metadata = await generateMetadataFromCem(cem);
+
+  fs.writeFileSync(metadataFile, JSON.stringify(metadata, null, 2));
 
   console.log("✅ docs metadata generated.");
 })();