@hanzo/docs-cli 1.2.2 → 1.2.5

package/dist/index.js

@@ -1,13 +1,15 @@
 #!/usr/bin/env node
+import { n as transformSpecifiers, r as typescriptExtensions, t as toImportSpecifier } from "./ast-BS3xj9uY.js";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { Command } from "commander";
 import picocolors from "picocolors";
 import { z } from "zod";
 import { x } from "tinyexec";
-import { cancel, confirm, group, intro, isCancel, log, multiselect, outro, select, spinner } from "@clack/prompts";
-import { Project } from "ts-morph";
+import { autocompleteMultiselect, box, cancel, confirm, group, intro, isCancel, log, outro, select, spinner } from "@clack/prompts";
+import { parse } from "oxc-parser";
 import { detect } from "package-manager-detector";
+import MagicString from "magic-string";
 
 //#region src/utils/fs.ts
 async function exists(pathLike) {
@@ -27,7 +29,7 @@ async function isSrc() {
 
 //#endregion
 //#region src/config.ts
-function createConfigSchema(isSrc$1) {
+function createConfigSchema(isSrc) {
 	const defaultAliases = {
 		uiDir: "./components/ui",
 		componentsDir: "./components",
@@ -36,7 +38,7 @@ function createConfigSchema(isSrc$1) {
 		libDir: "./lib"
 	};
 	return z.object({
-		$schema: z.string().default(isSrc$1 ? "node_modules/@hanzo/docs-cli/dist/schema/src.json" : "node_modules/@hanzo/docs-cli/dist/schema/default.json").optional(),
+		$schema: z.string().default(isSrc ? "node_modules/@hanzo/docs-cli/dist/schema/src.json" : "node_modules/@hanzo/docs-cli/dist/schema/default.json").optional(),
 		aliases: z.object({
 			uiDir: z.string().default(defaultAliases.uiDir),
 			componentsDir: z.string().default(defaultAliases.uiDir),
@@ -44,7 +46,7 @@ function createConfigSchema(isSrc$1) {
 			cssDir: z.string().default(defaultAliases.componentsDir),
 			libDir: z.string().default(defaultAliases.libDir)
 		}).default(defaultAliases),
-		baseDir: z.string().default(isSrc$1 ? "src" : ""),
+		baseDir: z.string().default(isSrc ? "src" : ""),
 		uiLibrary: z.enum(["radix-ui", "base-ui"]).default("radix-ui"),
 		commands: z.object({ format: z.string().optional() }).default({})
 	});
@@ -97,7 +99,7 @@ ${item.contents.map(toNode).filter(Boolean).join("\n")}
 ${children.map(toNode).filter(Boolean).join("\n")}
 </Files>`;
 }
-function treeToJavaScript(input, noRoot, importName = "@hanzo/docs-ui/components/files") {
+function treeToJavaScript(input, noRoot, importName = "@hanzo/docs-base-ui/components/files") {
 	return `import { File, Files, Folder } from ${JSON.stringify(importName)}
 
 export default (${treeToMdx(input, noRoot)})`;
@@ -121,41 +123,7 @@ async function runTree(args) {
 
 //#endregion
 //#region package.json
-var version = "1.2.2";
-
-//#endregion
-//#region src/utils/typescript.ts
-function createEmptyProject() {
-	return new Project({ compilerOptions: {} });
-}
-
-//#endregion
-//#region src/constants.ts
-const typescriptExtensions = [
-	".ts",
-	".tsx",
-	".js",
-	".jsx"
-];
-
-//#endregion
-//#region src/utils/ast.ts
-/**
-* Return the import modifier for `sourceFile` to import `referenceFile`
-*
-* @example
-* ```ts
-* toReferencePath('index.ts', 'dir/hello.ts')
-* // should output './dir/hello'
-* ```
-*/
-function toImportSpecifier(sourceFile, referenceFile) {
-	const extname = path.extname(referenceFile);
-	const removeExt = typescriptExtensions.includes(extname);
-	let importPath = path.relative(path.dirname(sourceFile), removeExt ? referenceFile.substring(0, referenceFile.length - extname.length) : referenceFile).replaceAll(path.sep, "/");
-	if (removeExt && importPath.endsWith("/index")) importPath = importPath.slice(0, -6);
-	return importPath.startsWith("../") ? importPath : `./${importPath}`;
-}
+var version = "1.2.5";
 
 //#endregion
 //#region src/registry/schema.ts
@@ -204,22 +172,34 @@ const registryInfoSchema = z.object({
 
 //#endregion
 //#region src/utils/cache.ts
-var AsyncCache = class {
-	constructor() {
-		this.store = /* @__PURE__ */ new Map();
-	}
-	cached(key, fn) {
-		let cached = this.store.get(key);
-		if (cached !== void 0) return cached;
-		cached = fn();
-		this.store.set(key, cached);
-		return cached;
-	}
-};
+/**
+* cache for async resources, finished promises will be resolved into original value, otherwise wrapped with a promise.
+*/
+function createCache(store = /* @__PURE__ */ new Map()) {
+	return {
+		cached(key, fn) {
+			let cached = store.get(key);
+			if (cached) return cached;
+			cached = fn((v) => store.set(key, v));
+			if (cached instanceof Promise) cached = cached.then((out) => {
+				if (store.has(key)) store.set(key, out);
+				return out;
+			});
+			store.set(key, cached);
+			return cached;
+		},
+		invalidate(key) {
+			store.delete(key);
+		},
+		$value() {
+			return this;
+		}
+	};
+}
 
 //#endregion
 //#region src/registry/client.ts
-const fetchCache = new AsyncCache();
+const fetchCache = createCache();
 var HttpRegistryClient = class HttpRegistryClient {
 	constructor(baseUrl, config) {
 		this.baseUrl = baseUrl;
@@ -228,7 +208,7 @@ var HttpRegistryClient = class HttpRegistryClient {
 	}
 	async fetchRegistryInfo(baseUrl = this.baseUrl) {
 		const url = new URL("_registry.json", `${baseUrl}/`);
-		return fetchCache.cached(url.href, async () => {
+		return fetchCache.$value().cached(url.href, async () => {
 			const res = await fetch(url);
 			if (!res.ok) throw new Error(`failed to fetch ${url.href}: ${res.statusText}`);
 			return registryInfoSchema.parse(await res.json());
@@ -236,10 +216,10 @@ var HttpRegistryClient = class HttpRegistryClient {
 	}
 	async fetchComponent(name) {
 		const url = new URL(`${name}.json`, `${this.baseUrl}/`);
-		return fetchCache.cached(url.href, async () => {
+		return fetchCache.$value().cached(url.href, async () => {
 			const res = await fetch(`${this.baseUrl}/${name}.json`);
 			if (!res.ok) {
-				log.error(`component ${name} not found at ${url.href}`);
+				if (res.status === 404) throw new Error(`component ${name} not found at ${url.href}`);
 				throw new Error(await res.text());
 			}
 			return componentSchema.parse(await res.json());
@@ -270,8 +250,7 @@ var LocalRegistryClient = class LocalRegistryClient {
 	async fetchComponent(name) {
 		const filePath = path.join(this.dir, `${name}.json`);
 		const out = await fs.readFile(filePath).then((res) => JSON.parse(res.toString())).catch((e) => {
-			log.error(`component ${name} not found at ${filePath}`);
-			throw e;
+			throw new Error(`component ${name} not found at ${filePath}`, { cause: e });
 		});
 		return componentSchema.parse(out);
 	}
@@ -298,46 +277,43 @@ async function getPackageManager() {
 //#endregion
 //#region src/registry/installer/dep-manager.ts
 var DependencyManager = class {
-	/**
-	* Get dependencies from `package.json`
-	*/
-	async getDeps() {
-		if (this.cachedInstalledDeps) return this.cachedInstalledDeps;
-		const dependencies = /* @__PURE__ */ new Map();
-		if (!await exists("package.json")) return dependencies;
-		const content = await fs.readFile("package.json");
-		const parsed = JSON.parse(content.toString());
-		if ("dependencies" in parsed && typeof parsed.dependencies === "object") {
-			const records = parsed.dependencies;
-			for (const [k, v] of Object.entries(records)) dependencies.set(k, v);
-		}
-		if ("devDependencies" in parsed && typeof parsed.devDependencies === "object") {
-			const records = parsed.devDependencies;
-			for (const [k, v] of Object.entries(records)) dependencies.set(k, v);
+	constructor() {
+		this.installedDeps = /* @__PURE__ */ new Map();
+		this.dependencies = [];
+		this.devDependencies = [];
+		this.packageManager = "npm";
+	}
+	async init(deps, devDeps) {
+		this.installedDeps.clear();
+		if (await exists("package.json")) {
+			const content = await fs.readFile("package.json");
+			const parsed = JSON.parse(content.toString());
+			if ("dependencies" in parsed && typeof parsed.dependencies === "object") {
+				const records = parsed.dependencies;
+				for (const [k, v] of Object.entries(records)) this.installedDeps.set(k, v);
+			}
+			if ("devDependencies" in parsed && typeof parsed.devDependencies === "object") {
+				const records = parsed.devDependencies;
+				for (const [k, v] of Object.entries(records)) this.installedDeps.set(k, v);
+			}
 		}
-		return this.cachedInstalledDeps = dependencies;
+		this.dependencies = this.resolveRequiredDependencies(deps);
+		this.devDependencies = this.resolveRequiredDependencies(devDeps);
+		this.packageManager = await getPackageManager();
 	}
-	async resolveInstallDependencies(deps) {
-		const cachedInstalledDeps = await this.getDeps();
-		return Object.entries(deps).filter(([k]) => !cachedInstalledDeps.has(k)).map(([k, v]) => v === null || v.length === 0 ? k : `${k}@${v}`);
+	resolveRequiredDependencies(deps) {
+		return Object.entries(deps).filter(([k]) => !this.installedDeps.has(k)).map(([k, v]) => v === null || v.length === 0 ? k : `${k}@${v}`);
 	}
-	async installDeps(deps, devDeps) {
-		const items = await this.resolveInstallDependencies(deps);
-		const devItems = await this.resolveInstallDependencies(devDeps);
-		if (items.length === 0 && devItems.length === 0) return;
-		const manager = await getPackageManager();
-		const value = await confirm({ message: `Do you want to install with ${manager}?
-${[...items, ...devItems].map((v) => `- ${v}`).join("\n")}` });
-		if (isCancel(value) || !value) return;
-		const spin = spinner();
-		spin.start("Installing dependencies...");
-		if (items.length > 0) await x(manager, ["install", ...items]);
-		if (devItems.length > 0) await x(manager, [
+	hasRequired() {
+		return this.dependencies.length > 0 || this.devDependencies.length > 0;
+	}
+	async installRequired() {
+		if (this.dependencies.length > 0) await x(this.packageManager, ["install", ...this.dependencies]);
+		if (this.devDependencies.length > 0) await x(this.packageManager, [
 			"install",
-			...devItems,
+			...this.devDependencies,
 			"-D"
 		]);
-		spin.stop("Dependencies installed.");
 	}
 };
 
@@ -347,14 +323,13 @@ var ComponentInstaller = class {
 	constructor(rootClient, plugins = []) {
 		this.rootClient = rootClient;
 		this.plugins = plugins;
-		this.project = createEmptyProject();
 		this.installedFiles = /* @__PURE__ */ new Set();
-		this.downloadCache = new AsyncCache();
+		this.downloadCache = createCache();
 		this.dependencies = {};
 		this.devDependencies = {};
-		this.pathToFileCache = new AsyncCache();
+		this.pathToFileCache = createCache();
 	}
-	async install(name) {
+	async install(name, io) {
 		let downloaded;
 		const info = await this.rootClient.fetchRegistryInfo();
 		for (const registry of info.registries ?? []) if (name.startsWith(`${registry}/`)) {
@@ -370,30 +345,28 @@ var ComponentInstaller = class {
 			const outPath = this.resolveOutputPath(file);
 			if (this.installedFiles.has(outPath)) continue;
 			this.installedFiles.add(outPath);
-			const output = typescriptExtensions.includes(path.extname(outPath)) ? await this.transform(name, file, comp, downloaded) : file.content;
+			const output = typescriptExtensions.includes(path.extname(outPath)) ? await this.transform(io, name, file, comp, downloaded) : file.content;
 			const status = await fs.readFile(outPath).then((res) => {
 				if (res.toString() === output) return "ignore";
 				return "need-update";
 			}).catch(() => "write");
 			if (status === "ignore") continue;
 			if (status === "need-update") {
-				const override = await confirm({
-					message: `Do you want to override ${outPath}?`,
-					initialValue: false
-				});
-				if (isCancel(override)) {
-					outro("Ended");
-					process.exit(0);
-				}
-				if (!override) continue;
+				if (!await io.confirmFileOverride({ path: outPath })) continue;
 			}
 			await fs.mkdir(path.dirname(outPath), { recursive: true });
 			await fs.writeFile(outPath, output);
-			log.step(`downloaded ${outPath}`);
+			io.onFileDownloaded({
+				path: outPath,
+				file,
+				component: comp
+			});
 		}
 	}
-	async installDeps() {
-		await new DependencyManager().installDeps(this.dependencies, this.devDependencies);
+	async deps() {
+		const manager = new DependencyManager();
+		await manager.init(this.dependencies, this.devDependencies);
+		return manager;
 	}
 	async onEnd() {
 		const config = this.rootClient.config;
@@ -410,10 +383,10 @@ var ComponentInstaller = class {
 			...info.env
 		};
 		for (const [k, v] of Object.entries(info.variables ?? {})) variables[k] ??= v.default;
-		return (await this.downloadCache.cached(hash, async () => {
+		return (await this.downloadCache.cached(hash, async (presolve) => {
 			const comp = await client.fetchComponent(name);
 			const result = [comp];
-			this.downloadCache.store.set(hash, result);
+			presolve(result);
 			const child = await Promise.all(comp.subComponents.map((sub) => {
 				if (typeof sub === "string") return this.download(sub, client);
 				const baseUrl = this.rootClient instanceof HttpRegistryClient ? new URL(sub.baseUrl, `${this.rootClient.baseUrl}/`).href : sub.baseUrl;
@@ -426,31 +399,34 @@ var ComponentInstaller = class {
 			variables
 		}));
 	}
-	async transform(taskId, file, component, allComponents) {
+	async transform(io, taskId, file, component, allComponents) {
 		const filePath = this.resolveOutputPath(file);
-		const sourceFile = this.project.createSourceFile(filePath, file.content, { overwrite: true });
+		const parsed = await parse(filePath, file.content);
+		const s = new MagicString(file.content);
 		const prefix = "@/";
 		const variables = Object.entries(component.variables ?? {});
 		const pathToFile = await this.pathToFileCache.cached(taskId, () => {
 			const map = /* @__PURE__ */ new Map();
-			for (const comp of allComponents) for (const file$1 of comp.files) map.set(file$1.target ?? file$1.path, file$1);
+			for (const comp of allComponents) for (const file of comp.files) map.set(file.target ?? file.path, file);
 			return map;
 		});
-		for (const specifier of sourceFile.getImportStringLiterals()) {
-			for (const [k, v] of variables) specifier.setLiteralValue(specifier.getLiteralValue().replaceAll(`<${k}>`, v));
-			if (specifier.getLiteralValue().startsWith(prefix)) {
-				const lookup = specifier.getLiteralValue().substring(2);
+		transformSpecifiers(parsed.program, s, (specifier) => {
+			for (const [k, v] of variables) specifier = specifier.replaceAll(`<${k}>`, v);
+			if (specifier.startsWith(prefix)) {
+				const lookup = specifier.substring(2);
 				const target = pathToFile.get(lookup);
-				if (target) specifier.setLiteralValue(toImportSpecifier(filePath, this.resolveOutputPath(target)));
-				else console.warn(`cannot find the referenced file of ${specifier}`);
+				if (target) specifier = toImportSpecifier(filePath, this.resolveOutputPath(target));
+				else io.onWarn(`cannot find the referenced file of ${specifier}`);
 			}
-		}
-		for (const plugin of this.plugins) await plugin.transform?.({
-			file: sourceFile,
-			componentFile: file,
+			return specifier;
+		});
+		for (const plugin of this.plugins) await plugin.transformFile?.({
+			s,
+			parsed,
+			file,
 			component
 		});
-		return sourceFile.getFullText();
+		return s.toString();
 	}
 	resolveOutputPath(file) {
 		const config = this.rootClient.config;
@@ -498,7 +474,7 @@ async function add(input, client) {
 			hint: item.description
 		});
 		spin.stop(picocolors.bold(picocolors.greenBright("registry fetched")));
-		const value = await multiselect({
+		const value = await autocompleteMultiselect({
 			message: "Select components to install",
 			options
 		});
@@ -512,17 +488,52 @@ async function add(input, client) {
 }
 async function install(target, installer) {
 	for (const name of target) {
-		intro(picocolors.bold(picocolors.inverse(picocolors.cyanBright(`Add Component: ${name}`))));
+		const spin = spinner();
+		spin.start(picocolors.bold(picocolors.cyanBright(`Installing ${name}`)));
 		try {
-			await installer.install(name);
-			outro(picocolors.bold(picocolors.greenBright(`${name} installed`)));
+			await installer.install(name, {
+				onWarn(message) {
+					spin.message(message);
+				},
+				async confirmFileOverride(options) {
+					spin.clear();
+					const value = await confirm({
+						message: `Do you want to override ${options.path}?`,
+						initialValue: false
+					});
+					if (isCancel(value)) {
+						outro("Installation terminated");
+						process.exit(0);
+					}
+					spin.start(picocolors.bold(picocolors.cyanBright(`Installing ${name}`)));
+					return value;
+				},
+				onFileDownloaded(options) {
+					spin.message(options.path);
+				}
+			});
+			spin.stop(picocolors.bold(picocolors.greenBright(`${name} installed`)));
 		} catch (e) {
-			log.error(String(e));
-			throw e;
+			spin.error(e instanceof Error ? e.message : String(e));
+			process.exit(-1);
+		}
+	}
+	const deps = await installer.deps();
+	if (deps.hasRequired()) {
+		log.message();
+		box([...deps.dependencies, ...deps.devDependencies].join("\n"), "New Dependencies");
+		const value = await confirm({ message: `Do you want to install with ${deps.packageManager}?` });
+		if (isCancel(value)) {
+			outro("Installation terminated");
+			process.exit(0);
+		}
+		if (value) {
+			const spin = spinner({ errorMessage: "Failed to install dependencies" });
+			spin.start("Installing dependencies");
+			await deps.installRequired();
+			spin.stop("Dependencies installed");
 		}
 	}
-	intro(picocolors.bold("New Dependencies"));
-	await installer.installDeps();
 	await installer.onEnd();
 	outro(picocolors.bold(picocolors.greenBright("Successful")));
 }
@@ -530,11 +541,12 @@ async function install(target, installer) {
 //#endregion
 //#region src/commands/customise.ts
 async function customise(client) {
-	intro(picocolors.bgBlack(picocolors.whiteBright("Customise Fumadocs UI")));
+	intro(picocolors.bgBlack(picocolors.whiteBright("Customise Hanzo Docs UI")));
 	const config = client.config;
 	const installer = new ComponentInstaller(client);
-	const result = await group({
-		target: () => select({
+	const registry = UIRegistries[config.uiLibrary];
+	const target = (await group({
+		layout: () => select({
 			message: "What do you want to customise?",
 			options: [{
 				label: "Docs Layout",
@@ -546,24 +558,44 @@ async function customise(client) {
 				hint: "the navbar for your other pages"
 			}]
 		}),
-		mode: (v) => {
-			if (v.results.target !== "docs") return;
+		target: (v) => {
+			if (v.results.layout !== "docs") return Promise.resolve({
+				target: [`${registry}/layouts/home`],
+				replace: [["@hanzo/docs-base-ui/layouts/home", `@/components/layout/home`]]
+			});
 			return select({
 				message: "Which variant do you want to start from?",
 				options: [
 					{
 						label: "Start from minimal styles",
-						value: "minimal",
-						hint: "for those who want to build their own variant from ground up."
+						hint: "for those who want to build their own variant from ground up.",
+						value: {
+							target: ["hanzo-docs/ui/layouts/docs-min"],
+							replace: [["@hanzo/docs-base-ui/layouts/docs", "@/components/layout/docs"], ["@hanzo/docs-base-ui/layouts/docs/page", "@/components/layout/docs/page"]]
+						}
 					},
 					{
 						label: "Start from default layout",
-						value: "full-default",
+						value: {
+							target: [`${registry}/layouts/docs`],
+							replace: [["@hanzo/docs-base-ui/layouts/docs", "@/components/layout/docs"], ["@hanzo/docs-base-ui/layouts/docs/page", "@/components/layout/docs/page"]]
+						},
 						hint: "useful for adjusting small details."
 					},
 					{
 						label: "Start from Notebook layout",
-						value: "full-notebook",
+						value: {
+							target: [`${registry}/layouts/notebook`],
+							replace: [["@hanzo/docs-base-ui/layouts/notebook", "@/components/layout/notebook"], ["@hanzo/docs-base-ui/layouts/notebook/page", "@/components/layout/notebook/page"]]
+						},
+						hint: "useful for adjusting small details."
+					},
+					{
+						label: "Start from Flux layout",
+						value: {
+							target: [`${registry}/layouts/flux`],
+							replace: [["@hanzo/docs-base-ui/layouts/flux", "@/components/layout/flux"], ["@hanzo/docs-base-ui/layouts/flux/page", "@/components/layout/flux/page"]]
+						},
 						hint: "useful for adjusting small details."
 					}
 				]
@@ -572,19 +604,9 @@ async function customise(client) {
 	}, { onCancel: () => {
 		cancel("Installation Stopped.");
 		process.exit(0);
-	} });
-	const registry = UIRegistries[config.uiLibrary];
-	if (result.target === "docs") {
-		const targets = [];
-		if (result.mode === "minimal") targets.push("hanzo-docs/ui/layouts/docs-min");
-		else targets.push(result.mode === "full-default" ? `${registry}/layouts/docs` : `${registry}/layouts/notebook`);
-		await install(targets, installer);
-		printNext(...result.mode === "full-notebook" ? [["@hanzo/docs-ui/layouts/notebook", "@/components/layout/notebook"], ["@hanzo/docs-ui/layouts/notebook/page", "@/components/layout/notebook/page"]] : [["@hanzo/docs-ui/layouts/docs", "@/components/layout/docs"], ["@hanzo/docs-ui/layouts/docs/page", "@/components/layout/docs/page"]]);
-	}
-	if (result.target === "home") {
-		await install([`${registry}/layouts/home`], installer);
-		printNext(["@hanzo/docs-ui/layouts/home", `@/components/layout/home`]);
-	}
+	} })).target;
+	await install(target.target, installer);
+	printNext(...target.replace);
 	outro(picocolors.bold("Have fun!"));
 }
 function printNext(...maps) {