docs(changeset): added boxes for build logging to make it prettier

nksaraf · Nov 4, 2023 · cbd8d4c · cbd8d4c
1 parent b0029a2
commit cbd8d4c
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 94 deletions.
diff --git a/.changeset/neat-hotels-drive.md b/.changeset/neat-hotels-drive.md
@@ -0,0 +1,5 @@
+---
+"vinxi": patch
+---
+
+added boxes for build logging to make it prettier
diff --git a/packages/vinxi/bin/cli.mjs b/packages/vinxi/bin/cli.mjs
@@ -13,8 +13,6 @@ async function main() {
 	const command = args._[0];
 	const rootDir = resolve(args._[1] || ".");
 
-	console.log(args);
-
 	const configFile = args.config;
 	globalThis.MANIFEST = {};
 	const app = await loadApp(configFile, args);

diff --git a/packages/vinxi/lib/app.js b/packages/vinxi/lib/app.js
@@ -47,7 +47,11 @@ export function createApp({
 		const output = result.args[0].router
 			? [c.yellow(result.args[0].router?.name), result.name]
 			: [result.name];
-		consola.log(c.blue("vinxi"), c.green("hook"), ...output);
+		consola.log(
+			c.dim(c.blue("vinxi")),
+			c.dim(c.green("hook")),
+			...output.map(c.dim),
+		);
 	});
 	// if (devtools) {
 	// 	routers = [devtoolsClient(), devtoolsRpc(), ...routers];

diff --git a/packages/vinxi/lib/build.js b/packages/vinxi/lib/build.js
@@ -1,3 +1,4 @@
+import boxen from "boxen";
 import { mkdir, rm, writeFile } from "fs/promises";
 import { H3Event, createApp } from "h3";
 import { createRequire } from "module";
@@ -9,7 +10,7 @@ import { pathToFileURL } from "node:url";
 import { chunksServerVirtualModule } from "./chunks.js";
 import { createIncomingMessage, createServerResponse } from "./http-stream.js";
 import invariant from "./invariant.js";
-import { consola, withLogger } from "./logger.js";
+import { c, consola, log, withLogger } from "./logger.js";
 import { createSPAManifest } from "./manifest/spa-manifest.js";
 import {
 	handlerModule,
@@ -34,6 +35,12 @@ const require = createRequire(import.meta.url);
  * @param {BuildConfig} buildConfig
  */
 export async function createBuild(app, buildConfig) {
+	console.log("\n");
+	console.log(
+		boxen(`⚙  ${c.green("Building your app...")}`, {
+			padding: { left: 1, right: 4 },
+		}),
+	);
 	await app.hooks.callHook("app:build:start", { app, buildConfig });
 	const { existsSync, promises: fsPromises, readFileSync } = await import("fs");
 	const { join } = await import("./path.js");
@@ -266,6 +273,13 @@ export async function createBuild(app, buildConfig) {
 		},
 	});
 
+	console.log("\n");
+	console.log(
+		boxen(`⚙  ${c.green(`Preparing app for ${nitro.options.preset}...`)}`, {
+			padding: { left: 1, right: 4 },
+		}),
+	);
+
 	nitro.options.appConfigFiles = [];
 	nitro.logger = consola.withTag(app.config.name);
 
@@ -308,6 +322,12 @@ async function createViteBuild(config) {
  * @param {import("./router-mode.js").Router} router
  */
 async function createRouterBuild(app, router) {
+	console.log("\n");
+	console.log(
+		boxen(c.green(`📦 Compiling ${router.name} router...`), {
+			padding: { left: 1, right: 4 },
+		}),
+	);
 	await app.hooks.callHook("app:build:router:start", { app, router });
 	let buildRouter = router;
 	if (router.mode === "spa" && !router.handler.endsWith(".html")) {
@@ -375,7 +395,7 @@ async function createRouterBuild(app, router) {
 		};
 	}
 
-	console.log(`building router ${router.name} in ${router.mode} mode`);
+	log(`building router ${router.name} in ${router.mode} mode`);
 
 	const viteBuildConfig = {
 		router: buildRouter,

diff --git a/packages/vinxi/lib/load-app.js b/packages/vinxi/lib/load-app.js
@@ -1,8 +1,8 @@
 import { loadConfig } from "c12";
-import chokidar from "chokidar";
 import { fileURLToPath } from "url";
 
 import { createApp } from "./app.js";
+import { log } from "./logger.js";
 
 /**
  *
@@ -11,7 +11,6 @@ import { createApp } from "./app.js";
  */
 export async function loadApp(configFile = undefined, args = {}) {
 	const stacks = typeof args.s === "string" ? [args.s] : args.s ?? [];
-	console.log(stacks);
 	/** @type {{ config: import("./app.js").App }}*/
 	try {
 		let { config: app } = await loadConfig(
@@ -42,14 +41,15 @@ export async function loadApp(configFile = undefined, args = {}) {
 			});
 
 			if (config.config) {
-				console.warn("Found vite.config.js with app config");
+				log("Found vite.config.js with app config");
 				// @ts-expect-error trying to send c12's config as app
 				//
 				return config;
 			} else {
-				console.warn("No app config found. Assuming SPA app.");
+				log("No app config found. Assuming SPA app.");
 
 				if (stacks.length) {
+					log("Applying stacks:", ...stacks);
 					return applyStacks(createApp({}), stacks);
 				}
 
@@ -98,8 +98,6 @@ async function applyStacks(app, s) {
 		}),
 	);
 
-	console.log(stacks);
-
 	for (const stack of stacks) {
 		await app.stack(stack);
 	}

diff --git a/packages/vinxi/package.json b/packages/vinxi/package.json
@@ -3,7 +3,15 @@
   "version": "0.0.43",
   "type": "module",
   "author": "Nikhil Saraf <nsaraf98@gmail.com>",
-  "files": ["bin", "lib", "public", "runtime", "types", "dist/types", "*.d.ts"],
+  "files": [
+    "bin",
+    "lib",
+    "public",
+    "runtime",
+    "types",
+    "dist/types",
+    "*.d.ts"
+  ],
   "scripts": {
     "types": "npm run tsc",
     "tsc": "rm -rf dist/types && tsc; cp -r types dist/types/types"
@@ -78,20 +86,48 @@
   },
   "typesVersions": {
     "*": {
-      ".": ["./dist/types/lib/index.d.ts"],
-      "dev-server": ["./dist/types/lib/dev-server.d.ts"],
-      "server": ["./dist/types/runtime/server.d.ts"],
-      "party": ["./dist/types/runtime/party.d.ts"],
-      "css": ["./dist/types/runtime/style.d.ts"],
-      "client": ["./dist/types/runtime/client.d.ts"],
-      "fs-router": ["./dist/types/lib/fs-router.d.ts"],
-      "types/server": ["./types/server.d.ts"],
-      "types/client": ["./types/client.d.ts"],
-      "routes": ["./types/routes.d.ts"],
-      "lib/invariant": ["./dist/types/lib/invariant.d.ts"],
-      "plugins/config": ["./dist/types/lib/plugins/config.d.ts"],
-      "plugins/virtual": ["./dist/types/lib/plugins/virtual.d.ts"],
-      "lib/path": ["./dist/types/lib/path.d.ts"]
+      ".": [
+        "./dist/types/lib/index.d.ts"
+      ],
+      "dev-server": [
+        "./dist/types/lib/dev-server.d.ts"
+      ],
+      "server": [
+        "./dist/types/runtime/server.d.ts"
+      ],
+      "party": [
+        "./dist/types/runtime/party.d.ts"
+      ],
+      "css": [
+        "./dist/types/runtime/style.d.ts"
+      ],
+      "client": [
+        "./dist/types/runtime/client.d.ts"
+      ],
+      "fs-router": [
+        "./dist/types/lib/fs-router.d.ts"
+      ],
+      "types/server": [
+        "./types/server.d.ts"
+      ],
+      "types/client": [
+        "./types/client.d.ts"
+      ],
+      "routes": [
+        "./types/routes.d.ts"
+      ],
+      "lib/invariant": [
+        "./dist/types/lib/invariant.d.ts"
+      ],
+      "plugins/config": [
+        "./dist/types/lib/plugins/config.d.ts"
+      ],
+      "plugins/virtual": [
+        "./dist/types/lib/plugins/virtual.d.ts"
+      ],
+      "lib/path": [
+        "./dist/types/lib/path.d.ts"
+      ]
     }
   },
   "dependencies": {
@@ -103,6 +139,7 @@
     "@types/ws": "^8.5.5",
     "@vinxi/devtools": "workspace:^",
     "@vinxi/listhen": "^1.5.5",
+    "boxen": "^7.1.1",
     "c12": "^1.4.2",
     "chokidar": "^3.5.3",
     "consola": "^3.2.3",