Improved logging (#162)

.changeset/fresh-yaks-beam.md

@@ -0,0 +1,5 @@
+---
+'@crackle/core': minor
+---
+
+Improved logging using [🐨 Consola](https://github.com/unjs/consola)

.changeset/poor-cups-peel.md

@@ -0,0 +1,5 @@
+---
+'@crackle/core': patch
+---
+
+Lazy load Vite to avoid the CJS warning

package.json

@@ -38,7 +38,7 @@
     "prepare-publish": "pnpm build:ci",
     "release": "pnpm prepare-publish && pnpm bootstrap:tag && changeset publish"
   },
-  "dependencies": {
+  "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.26.2",
     "@crackle-private/bootstrap": "workspace:*",
@@ -53,7 +53,7 @@
     "prettier": "^2.8.8",
     "tsx": "^4.3.0",
     "typescript": "~5.3.0",
-    "vitest": "^0.34.0",
+    "vitest": "^1.1.3",
     "wireit": "^0.14.1"
   },
   "packageManager": "[email protected]",

packages/core/entries/render/build.tsx

@@ -1,9 +1,9 @@
-import chalk from 'chalk';
 import React from 'react';
 import { renderToString } from 'react-dom/server';
 import type { Manifest } from 'vite';
 
-import { logger } from '../../logger';
+import { logger } from '@crackle/core/logger';
+
 import type { RenderAllPagesFn } from '../types';
 
 import { createRouteMap, nodePageModules, Page } from './shared';
@@ -73,7 +73,7 @@ export const renderAllPages: RenderAllPagesFn = async (
   const totalPages = Object.keys(nodePageModules).length;
   const noun = totalPages === 1 ? 'page' : 'pages';
 
-  logger.info(`🛠  Rendering ${chalk.bold(`${totalPages} ${noun}`)}...`);
+  logger.start(`Rendering \`${totalPages} ${noun}\`...`);
 
   const pageModules = [];
 
@@ -102,9 +102,7 @@ export const renderAllPages: RenderAllPagesFn = async (
 
     pageModules.push({ route, html });
 
-    logger.info(
-      `   📜 [${pageModules.length}/${totalPages}] ${chalk.bold(route)}`,
-    );
+    logger.log(`  └─ [${pageModules.length}/${totalPages}] \`${route}\``);
   }
 
   return pageModules;

packages/core/package.json

@@ -133,7 +133,7 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@vocab/webpack": "^1.2.5",
     "builtin-modules": "^3.3.0",
-    "chalk": "^4.1.2",
+    "consola": "^3.2.3",
     "dedent": "^1.5.1",
     "ensure-gitignore": "^1.2.0",
     "esbuild": "^0.19.3",
@@ -142,7 +142,6 @@
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.1.1",
     "glob-to-regexp": "^0.4.1",
-    "ink": "^3.2.0",
     "memoize": "^10.0.0",
     "mlly": "^1.4.2",
     "pretty-ms": "^7.0.1",
@@ -172,7 +171,6 @@
     "@types/semver": "^7.5.6",
     "@types/serialize-javascript": "^5.0.4",
     "@types/serve-handler": "^6.1.4",
-    "ink-testing-library": "^2.1.0",
     "memfs": "^3.6.0",
     "sync-dependencies": "^1.0.4",
     "typescript": "*",

packages/core/src/entries/build.ts

@@ -1,26 +1,21 @@
 import fs from 'fs/promises';
 import path from 'path';
+import process from 'process';
 
 import { mockAdapter, setAdapter } from '@vanilla-extract/css/adapter';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import react from '@vitejs/plugin-react-swc';
 import builtinModules from 'builtin-modules';
-import chalk from 'chalk';
 import fse from 'fs-extra';
 import type { RollupOutput } from 'rollup';
-import {
-  type UserConfig as ViteConfig,
-  type Manifest,
-  build as viteBuild,
-} from 'vite';
+import type { UserConfig as ViteConfig, Manifest } from 'vite';
 
 import type { RenderAllPagesFn } from '../../entries/types';
 import { type PartialConfig, getConfig } from '../config';
 import { clientEntry, siteBuild } from '../constants';
 import { internalPackageResolution } from '../plugins/vite/internal-package-resolution';
 import { addPageRoots } from '../plugins/vite/page-roots';
 import { stripRouteData } from '../plugins/vite/strip-route-data';
-import { renderBuildError } from '../reporters/shared';
 import {
   extractDependencyGraph,
   getSsrExternalsForCompiledDependency,
@@ -59,10 +54,12 @@ export const build = async (inlineConfig?: PartialConfig) => {
     },
   };
 
+  const { build: viteBuild } = await import('vite');
+
   const manifestPath = 'manifest.json';
 
   try {
-    logger.info(`🛠  Building ${chalk.bold('client')}...`);
+    logger.start('Building `client`...');
     await viteBuild({
       ...commonBuildConfig,
       base: config.publicPath,
@@ -74,19 +71,18 @@ export const build = async (inlineConfig?: PartialConfig) => {
       },
     });
 
-    logger.info(`✅ Successfully built ${chalk.bold('client')}!`);
+    logger.success('Successfully built `client`!\n');
   } catch (error: any) {
-    logger.errorWithExitCode(
-      renderBuildError(`Build failed for ${chalk.bold('client')}`, error),
-    );
+    logger.error('Build failed for `client`:', error);
+    process.exitCode = 1;
     return;
   }
 
   const outDir = config.resolveFromRoot(siteBuild.outDir);
   const rendererDir = config.resolveFromRoot(siteBuild.rendererDir);
 
   try {
-    logger.info(`🛠  Building ${chalk.bold('renderer')}...`);
+    logger.start('Building `renderer`...');
 
     const {
       output: [rendererOutput],
@@ -104,7 +100,7 @@ export const build = async (inlineConfig?: PartialConfig) => {
       },
     })) as RollupOutput;
 
-    logger.info(`✅ Successfully built ${chalk.bold('renderer')}!`);
+    logger.success('Successfully built `renderer`!\n');
 
     setAdapter(mockAdapter);
 
@@ -125,9 +121,10 @@ export const build = async (inlineConfig?: PartialConfig) => {
       return fs.writeFile(`${routeDir}/index.html`, html);
     });
 
-    logger.info('✅ Rendered all pages');
+    logger.success('Rendered all pages');
   } catch (error: any) {
-    logger.errorWithExitCode(renderBuildError(`Render pages failed`, error));
+    logger.error(error);
+    process.exitCode = 1;
   } finally {
     await fs.rm(rendererDir, {
       recursive: true,

packages/core/src/entries/clean.ts

@@ -1,5 +1,3 @@
-import chalk from 'chalk';
-
 import { type PartialConfig, getConfig } from '../config';
 import {
   cleanPackageEntryPoints,
@@ -14,6 +12,8 @@ export const clean = async (inlineConfig?: PartialConfig) => {
   const entries = await getPackageEntryPoints(config.root);
 
   await cleanPackageEntryPoints(entries, (entryPoint) => {
-    logger.info(`🧹  Cleaning ${chalk.bold(entryPoint.entryName)}`);
+    logger.info(`Cleaning \`${entryPoint.entryName}\``);
   });
+
+  logger.success('Done!');
 };

packages/core/src/entries/fix.ts

@@ -1,10 +1,12 @@
 import { type PartialConfig, getConfig } from '../config';
-import { type PackageDiffDetails, renderApp } from '../reporters/fix';
+import { type PackageDiffDetails, renderDiffs } from '../reporters/fix';
 import { getPackageEntryPoints, getPackages } from '../utils/entry-points';
 import { updateGitignore } from '../utils/gitignore';
 import { promiseMap } from '../utils/promise-map';
 import { fixPackageJson } from '../utils/setup-package-json';
 
+import { logger } from './logger';
+
 export const fix = async (inlineConfig?: PartialConfig) => {
   const config = getConfig(inlineConfig);
   const packages = await getPackages(config);
@@ -23,5 +25,10 @@ export const fix = async (inlineConfig?: PartialConfig) => {
     await updateGitignore(pkg.root, entries);
   });
 
-  renderApp(packageDiffs);
+  if (packageDiffs.length === 0) {
+    logger.info('Nothing to fix');
+  } else {
+    logger.info(renderDiffs(packageDiffs));
+    logger.success('`crackle fix` completed successfully');
+  }
 };

packages/core/src/entries/logger.ts

@@ -1,14 +1,7 @@
-/* eslint-disable no-console */
+import { createConsola } from 'consola';
 
-const isDebug = process.env.DEBUG != null;
+export { colors } from 'consola/utils';
 
-export const logger = {
-  debug: (msg: string) => isDebug && console.info(msg),
-  info: (msg: string) => console.info(msg),
-  warn: (msg: string) => console.warn(msg),
-  error: (msg: string) => console.error(msg),
-  errorWithExitCode: (msg: string) => {
-    console.error(msg);
-    process.exitCode = 1;
-  },
-};
+export const logger = createConsola({
+  formatOptions: { date: false },
+});

packages/core/src/entries/package.ts

@@ -1,15 +1,14 @@
 import fs from 'fs/promises';
 import path from 'path';
+import process from 'process';
 
-import chalk from 'chalk';
 import type { Rollup } from 'vite';
 
 import { type EnhancedConfig, type PartialConfig, getConfig } from '../config';
 import { distDir } from '../constants';
 import { createBundle } from '../package-utils/bundle';
 import { createDtsBundle } from '../package-utils/dts';
 import { renderPackageJsonValidationError } from '../reporters/package';
-import { renderBuildError } from '../reporters/shared';
 import type { PackageJson } from '../types';
 import {
   cleanPackageEntryPoints,
@@ -47,28 +46,35 @@ const build = async (config: EnhancedConfig, packageName: string) => {
   if (diffs.length) {
     if (config.fix) {
       await fix(config);
+      logger.log('');
     } else {
-      logger.errorWithExitCode(
-        renderPackageJsonValidationError(packageName, diffs),
-      );
+      logger.box({
+        title: `\`${packageName}\``,
+        message: renderPackageJsonValidationError(diffs),
+        style: {
+          borderColor: 'red',
+          padding: 1,
+        },
+      });
+      process.exitCode = 1;
       return;
     }
   }
 
-  logger.info(`🛠  Building ${chalk.bold.green(packageName)}...`);
+  logger.start(`Building \`${packageName}\`...`);
 
   if (config.clean) {
-    logger.info('🧹 Cleaning output directories...');
+    logger.info('Cleaning output directories...');
     await cleanPackageEntryPoints(entries);
   }
 
   const withLogging = async (
     bundle: typeof createBundle | typeof createDtsBundle,
     label: string,
   ) => {
-    logger.info(`⚙️  Creating ${chalk.bold(label)} bundle...`);
+    logger.info(`Creating _${label}_ bundle...`);
     const result = await bundle(config, entries);
-    logger.info(`⚙️  Finished creating ${chalk.bold(label)} bundle`);
+    logger.info(`Finished creating _${label}_ bundle`);
     return result;
   };
 
@@ -89,7 +95,7 @@ const build = async (config: EnhancedConfig, packageName: string) => {
 
   await updatePackageJsonExports(config.root, cssExports);
 
-  logger.info(`✅ Successfully built ${chalk.bold.green(packageName)}!`);
+  logger.success(`Finished building \`${packageName}\`!`);
 };
 
 export const buildPackage = async (partialConfig?: PartialConfig) => {
@@ -99,6 +105,7 @@ export const buildPackage = async (partialConfig?: PartialConfig) => {
   try {
     await build(config, packageName);
   } catch (err: any) {
-    logger.errorWithExitCode(renderBuildError(packageName, err));
+    logger.error(err);
+    process.exitCode = 1;
   }
 };

packages/core/src/entries/resolve-config.ts

@@ -6,6 +6,10 @@ import _eval from 'eval';
 
 import type { PartialConfig } from '../config';
 
+import { logger } from './logger';
+
+const localLogger = logger.withDefaults({ tag: 'config' });
+
 const evaluateConfig = (
   configFilePath: string,
   configSource: string,
@@ -33,7 +37,7 @@ export const resolveConfig = async ({
   // eslint-disable-next-line no-sync
   if (!fs.existsSync(configFilePath)) {
     // eslint-disable-next-line no-console
-    console.log(
+    localLogger.debug(
       'No crackle.config.ts file found, using default configuration.',
     );
     return { root: cwd };

packages/core/src/entries/start.ts

@@ -6,7 +6,6 @@ import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import react from '@vitejs/plugin-react-swc';
 import builtinModules from 'builtin-modules';
 import express from 'express';
-import { createServer as createViteServer } from 'vite';
 
 import type { RenderDevPageFn } from '../../entries/types';
 import { type PartialConfig, getConfig } from '../config';
@@ -42,6 +41,8 @@ export const start = async (
   const app = express();
   const connections = new Map<string, Socket>();
 
+  const { createServer: createViteServer } = await import('vite');
+
   const vite = await createViteServer({
     ...commonViteConfig(config),
     appType: 'custom',