refactor(publish): update release and build scripts to make them work…

…space-friendly (#251)

package.json

@@ -22,6 +22,7 @@
     "dev:transpile": "tsc --project tsconfig.dev.json --watch --preserveWatchOutput",
     "dev": "pnpm clear:dist && pnpm dev:transpile & wds",
     "build:packages": "pnpm run -r --parallel build",
+    "release:packages": "pnpm run -r release",
     "test": "pnpm run -r --parallel test",
     "lint:ts": "tsc --project tsconfig.json",
     "lint:ecma": "eslint packages/*/src/**/* --fix",

packages/icons/package.json

@@ -25,6 +25,6 @@
   },
   "scripts": {
     "build": "tsx ./scripts/build.ts",
-    "release": "pnpm publish ./dist --tag latest --access public"
+    "release": "pnpm publish . --tag latest --access public"
   }
 }

packages/icons/scripts/build.ts

@@ -4,16 +4,19 @@ import Mustache from "mustache";
 import { exec } from "node:child_process";
 import * as fs from "node:fs/promises";
 import * as path from "node:path";
-import { fileURLToPath } from "node:url";
 import { promisify } from "node:util";
-import { ensureDirExists } from "../../../scripts/utils";
+import {
+  createModulePackages,
+  ensureDirExists,
+  getFileMeta,
+  toPascalCase,
+} from "../../../scripts/utils";
 
 const execCmd = promisify(exec);
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const { dirname } = getFileMeta(import.meta.url);
 
-const packageDir = path.resolve(__dirname, "..");
+const packageDir = path.resolve(dirname, "..");
 const iconsDir = path.join(packageDir, "src");
 const distDir = path.join(packageDir, "dist");
 const templatesDir = path.join(packageDir, "templates");
@@ -36,24 +39,6 @@ type SVGIconInfo = {
   paths: SVGPathInfo[];
 };
 
-const toPascalCase = (str: string, splitRegex: RegExp | string) => {
-  const baseCase = str.split(splitRegex);
-
-  return baseCase
-    .map(part => part.charAt(0).toUpperCase() + part.substring(1))
-    .join("");
-};
-
-const doesFileExist = async (filePath: string) => {
-  try {
-    await fs.stat(filePath);
-
-    return true;
-  } catch {
-    return false;
-  }
-};
-
 const extractPathsInfo = (svgData: string) => {
   const paths = svgData
     // Remove the opening <svg> tag
@@ -145,40 +130,11 @@ const generatePaths = async () => {
   await execCmd(["shx", "rm", entryFile].join(" "));
 };
 
-const createModulePackages = async () => {
-  console.log("> creating module packages...");
-
-  const moduleDirectories = globAsync
-    .sync(path.join(distDir, "**/index.js"))
-    .map(p => path.dirname(p));
-
-  for (const moduleDirectory of moduleDirectories) {
-    const typesPath = path.join(moduleDirectory, "index.d.ts");
-    const typesExist = await doesFileExist(typesPath);
-
-    const packageJsonPath = path.join(moduleDirectory, "package.json");
-
-    await fs.writeFile(
-      packageJsonPath,
-      JSON.stringify(
-        {
-          sideEffects: false,
-          types: typesExist ? "./index.d.ts" : undefined,
-          main: "./index.js",
-          type: "module",
-        },
-        null,
-        2,
-      ),
-    );
-  }
-};
-
 void (async () => {
   console.time("build");
   await execCmd(["shx", "rm", "-rf", distDir].join(" "));
   await generatePaths();
-  await createModulePackages();
+  await createModulePackages(distDir);
   console.timeEnd("build");
 })();
 /* eslint-enable no-console */

packages/react-icons/package.json

@@ -25,7 +25,7 @@
   },
   "scripts": {
     "build": "tsx ./scripts/build.ts",
-    "release": "pnpm publish ./dist --tag latest --access public"
+    "release": "pnpm publish . --tag latest --access public"
   },
   "dependencies": {
     "@tapsioss/rasti-icons": "workspace:*"

packages/react-icons/scripts/build.ts

@@ -1,37 +1,28 @@
 /* eslint-disable no-console */
 import icons from "@tapsioss/rasti-icons";
-import globAsync from "fast-glob";
 import Mustache from "mustache";
 import { exec } from "node:child_process";
 import * as fs from "node:fs/promises";
 import * as path from "node:path";
-import { fileURLToPath } from "node:url";
 import { promisify } from "node:util";
-import { ensureDirExists } from "../../../scripts/utils";
+import {
+  createModulePackages,
+  ensureDirExists,
+  getFileMeta,
+} from "../../../scripts/utils";
 
 const execCmd = promisify(exec);
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const { dirname } = getFileMeta(import.meta.url);
 
-const packageDir = path.resolve(__dirname, "..");
+const packageDir = path.resolve(dirname, "..");
 const distDir = path.join(packageDir, "dist");
 const templatesDir = path.join(packageDir, "templates");
 
 const iconTemplate = path.join(templatesDir, "react-icon.txt");
 const tsconfigFile = path.join(packageDir, "tsconfig.build.json");
 const baseIconFile = path.join(packageDir, "src/base-icon.tsx");
 
-const doesFileExist = async (filePath: string) => {
-  try {
-    await fs.stat(filePath);
-
-    return true;
-  } catch {
-    return false;
-  }
-};
-
 const generateComponents = async () => {
   console.log("> generating web components...");
 
@@ -94,40 +85,11 @@ const generateComponents = async () => {
   await execCmd(`shx ls ${distDir}/*.tsx | xargs rm`);
 };
 
-const createModulePackages = async () => {
-  console.log("> creating module packages...");
-
-  const moduleDirectories = globAsync
-    .sync(path.join(distDir, "**/index.js"))
-    .map(p => path.dirname(p));
-
-  for (const moduleDirectory of moduleDirectories) {
-    const typesPath = path.join(moduleDirectory, "index.d.ts");
-    const typesExist = await doesFileExist(typesPath);
-
-    const packageJsonPath = path.join(moduleDirectory, "package.json");
-
-    await fs.writeFile(
-      packageJsonPath,
-      JSON.stringify(
-        {
-          sideEffects: false,
-          types: typesExist ? "./index.d.ts" : undefined,
-          main: "./index.js",
-          type: "module",
-        },
-        null,
-        2,
-      ),
-    );
-  }
-};
-
 void (async () => {
   console.time("build");
   await execCmd(["shx", "rm", "-rf", distDir].join(" "));
   await generateComponents();
-  await createModulePackages();
+  await createModulePackages(distDir);
   console.timeEnd("build");
 })();
 /* eslint-enable no-console */

packages/theme/.npmignore

@@ -0,0 +1,9 @@
+src
+templates
+scripts
+node_modules
+
+tsconfig.*
+
+dist/*.ts
+!dist/*.d.ts

packages/theme/package.json

@@ -5,8 +5,17 @@
   "engines": {
     "node": ">=20"
   },
+  "files": [
+    "./dist/**/*.css"
+  ],
+  "main": "./dist/index.css",
+  "exports": {
+    ".": {
+      "default": "./dist/index.css"
+    }
+  },
   "scripts": {
     "build": "tsx ./scripts/build.ts",
-    "release": "pnpm publish ./dist --tag latest --access public"
+    "release": "pnpm publish . --tag latest --access public"
   }
 }

packages/theme/scripts/build.ts

@@ -2,19 +2,13 @@
 import { exec } from "node:child_process";
 import * as path from "node:path";
 import { promisify } from "node:util";
-import { fileURLToPath } from "url";
-import {
-  createMainPackage,
-  createNPMRC,
-  ensureDirExists,
-} from "../../../scripts/utils";
+import { ensureDirExists, getFileMeta } from "../../../scripts/utils";
 
 const execCmd = promisify(exec);
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const { dirname } = getFileMeta(import.meta.url);
 
-const packageDir = path.resolve(__dirname, "..");
+const packageDir = path.resolve(dirname, "..");
 const distPath = path.join(packageDir, "dist");
 const entryPoint = path.join(packageDir, "src/index.css");
 const outputPath = path.join(distPath, "index.css");
@@ -46,10 +40,6 @@ const compile = async () => {
 void (async () => {
   console.time("build");
   await compile();
-  await createMainPackage(packageDir, distPath, {
-    main: "index.css",
-  });
-  await createNPMRC(distPath);
   console.timeEnd("build");
 })();
 /* eslint-enable no-console */

packages/web-components/.npmignore

@@ -0,0 +1,9 @@
+src
+templates
+scripts
+node_modules
+
+tsconfig.*
+
+dist/*.ts
+!dist/*.d.ts

packages/web-components/package.json

@@ -5,9 +5,20 @@
   "engines": {
     "node": ">=20"
   },
+  "files": [
+    "./dist/**/*.js",
+    "./dist/**/*.d.ts",
+    "./dist/**/package.json"
+  ],
+  "exports": {
+    "./*": {
+      "types": "./dist/*/index.d.ts",
+      "default": "./dist/*/index.js"
+    }
+  },
   "scripts": {
     "build": "tsx ./scripts/build.ts",
-    "release": "pnpm publish ./dist --tag latest --access public"
+    "release": "pnpm publish . --tag latest --access public"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.11",

packages/web-components/scripts/build.ts

@@ -1,78 +1,35 @@
 /* eslint-disable no-console */
-import glob from "fast-glob";
 import { exec } from "node:child_process";
-import * as fs from "node:fs/promises";
 import * as path from "node:path";
-import { fileURLToPath } from "node:url";
 import { promisify } from "node:util";
-import { createMainPackage, createNPMRC } from "../../../scripts/utils";
+import { createModulePackages, getFileMeta } from "../../../scripts/utils";
 
 const execCmd = promisify(exec);
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const { dirname } = getFileMeta(import.meta.url);
 
-const packageDir = path.resolve(__dirname, "..");
+const packageDir = path.resolve(dirname, "..");
 const distPath = path.join(packageDir, "dist");
 
-const moduleDirectories = glob
-  .sync(path.join(distPath, "**/index.js"))
-  .map(p => path.dirname(p));
-
-const doesFileExist = async (filePath: string) => {
-  try {
-    await fs.stat(filePath);
-
-    return true;
-  } catch {
-    return false;
-  }
-};
-
 const transpile = async () => {
   console.log("> transpiling...");
 
-  const configPath = path.resolve(packageDir, "tsconfig.build.json");
+  const tsconfigPath = path.resolve(packageDir, "tsconfig.build.json");
 
   await execCmd(["shx", "rm", "-rf", distPath].join(" "));
 
   const { stderr, stdout } = await execCmd(
-    ["tsc", "--project", configPath].join(" "),
+    ["tsc", "--project", tsconfigPath].join(" "),
   );
 
   if (stdout) console.log(stdout);
   if (stderr) console.error(stderr);
 };
 
-const createModulePackages = async () => {
-  console.log("> creating module packages...");
-  for (const moduleDirectory of moduleDirectories) {
-    const typesPath = path.join(moduleDirectory, "index.d.ts");
-    const typesExist = await doesFileExist(typesPath);
-
-    const packageJsonPath = path.join(moduleDirectory, "package.json");
-
-    await fs.writeFile(
-      packageJsonPath,
-      JSON.stringify(
-        {
-          sideEffects: false,
-          types: typesExist ? "./index.d.ts" : undefined,
-          main: "./index.js",
-        },
-        null,
-        2,
-      ),
-    );
-  }
-};
-
 void (async () => {
   console.time("build");
   await transpile();
-  await createModulePackages();
-  await createMainPackage(packageDir, distPath);
-  await createNPMRC(distPath);
+  await createModulePackages(distPath);
   console.timeEnd("build");
 })();
 /* eslint-enable no-console */

packages/web-components/src/badge-wrapper/index.ts

@@ -9,7 +9,7 @@ export { Slots } from "./constants";
  *
  * @prop {"rectangle" | "circle" | "pill"} [anchor-shape="rectangle"] - The shape of the anchor.
  * @prop {"left" | "right"} [badge-side="right"] - The horizontal placement of the badge.
- * @prop {"top" | "middle"} [badge-alignment="alignment"] - The vertical alignment of the badge.
+ * @prop {"top" | "middle"} [badge-alignment="top"] - The vertical alignment of the badge.
  *
  * @slot - The default slot for the anchor element.
  * @slot badge - The slot for the badge to be positioned.