🔨 Use a script to build the CLI in ESM and CJS formats

libs/create-qwikdev-astro/.npmignore

@@ -1,2 +1,3 @@
+scripts/
 src/
 tsconfig.json

libs/create-qwikdev-astro/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@qwikdev/create-astro",
-  "type": "module",
   "license": "MIT",
   "version": "0.1.2",
   "description": "Interactive CLI for create @QwikDev/astro projects.",
   "scripts": {
-    "build": "rimraf dist && tsc --build"
+    "build": "rimraf dist && tsc --build && tsm scripts/build.ts"
   },
   "contributors": [
     {
@@ -69,7 +68,10 @@
   "devDependencies": {
     "@types/which-pm-runs": "^1.0.2",
     "@types/yargs": "^17.0.32",
+    "esbuild": "^0.23.0",
+    "globby": "^14.0.2",
     "rimraf": "^5.0.5",
+    "tsm": "^2.3.0",
     "typescript": "^5.4.5"
   }
 }

libs/create-qwikdev-astro/scripts/build.ts

@@ -0,0 +1,98 @@
+import fs from "node:fs";
+import path from "node:path";
+import zlib from "node:zlib";
+import esbuild, { type BuildOptions } from "esbuild";
+import { globbySync } from "globby";
+import tsconfig from "../tsconfig.json";
+
+export type Target = BuildOptions["target"] | "default";
+export type Format = BuildOptions["format"];
+export type Platform = BuildOptions["platform"];
+
+const entryPoints = globbySync(tsconfig.include, {
+  gitignore: true,
+  ignore: tsconfig.exclude
+});
+
+const outdir = tsconfig.compilerOptions.outDir;
+const target = tsconfig.compilerOptions.target || "default";
+const watch = process.argv.includes("--watch");
+
+build(entryPoints, outdir, target, [undefined, "cjs", "esm"], true, watch);
+
+const files = fs.readdirSync(outdir);
+for (const file of files) {
+  const filePath = path.join(outdir, file);
+  await outputSize(filePath);
+}
+
+function getBuildOptions(
+  { format, minify, ...options }: BuildOptions,
+  watch: boolean
+): BuildOptions {
+  const define = {
+    CDN: "true",
+    "process.env.NODE_ENV": watch ? '"development"' : '"production"'
+  };
+
+  return {
+    ...options,
+    platform: "node",
+    bundle: true,
+    minify,
+    format: format ?? format,
+    sourcemap: !minify,
+    outExtension:
+      format === "cjs"
+        ? { ".js": ".cjs" }
+        : format === "esm"
+          ? { ".js": ".mjs" }
+          : { ".js": ".js" },
+    define
+  };
+}
+
+async function build(
+  entryPoints: string[],
+  outdir: string,
+  target: Target,
+  formats: Format[] = ["cjs", "esm"],
+  minify = false,
+  watch = false
+) {
+  for (const format of formats) {
+    const options = getBuildOptions(
+      {
+        entryPoints,
+        outdir,
+        target,
+        format,
+        minify
+      },
+      watch
+    );
+    await (watch
+      ? esbuild.context(options).then((ctx) => ctx.watch())
+      : esbuild.build(options));
+  }
+}
+
+async function outputSize(file: string) {
+  const content = fs.readFileSync(file);
+  const bytes = zlib.brotliCompressSync(content).length;
+  const size = bytesToSize(bytes);
+
+  console.log("\x1b[32m", `${file} bundle size: ${size}`);
+}
+
+function bytesToSize(bytes: number): string {
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  if (bytes === 0) {
+    return "n/a";
+  }
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  if (i === 0) {
+    return `${bytes} ${sizes[i]}`;
+  }
+  return `${(bytes / 1024 ** i).toFixed(1)} ${sizes[i]}`;
+}

libs/create-qwikdev-astro/src/index.ts

@@ -4,7 +4,6 @@ import fs from "node:fs";
 import os from "node:os";
 import path, { join, resolve, relative } from "node:path";
 import process from "node:process";
-import { fileURLToPath } from "node:url";
 import {
   cancel,
   confirm,
@@ -31,9 +30,6 @@ import {
 import detectPackageManager from "which-pm-runs";
 import yargs from "yargs";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
 export function isHome(dir: string): boolean {
   return dir.startsWith("~/");
 }

libs/create-qwikdev-astro/tsconfig.json

@@ -8,7 +8,7 @@
     "outDir": "./dist",
     "declaration": true,
     "declarationDir": "./dist",
-    "emitDeclarationOnly": false,
+    "emitDeclarationOnly": true,
     "module": "ESNext",
     "target": "ESNext",
     "moduleResolution": "Bundler",