more stuff

packages/cli/package.json

@@ -43,6 +43,7 @@
 		"@clack/core": "^0.3.4",
 		"chalk": "5.2.0",
 		"commander": "^10.0.1",
+		"deepmerge": "^4.3.1",
 		"execa": "^7.2.0",
 		"is-unicode-supported": "^2.0.0",
 		"node-fetch-native": "^1.6.4"

packages/cli/src/commands/add.ts

@@ -13,10 +13,9 @@ import { intro, prettifyList } from "../utils/prompt-helpers.js";
 import * as p from "../utils/prompts.js";
 import {
 	fetchTree,
-	getItemTargetPath,
 	// getRegistryBaseColor,
 	getRegistryIndex,
-	registryResolveItemsTree,
+	getRegistryItemFileTargetPath,
 	resolveTree,
 } from "../utils/registry/index.js";
 import { transformImports } from "../utils/transformers.js";
@@ -119,13 +118,39 @@ async function runAdd(cwd: string, config: Config, options: AddOptions) {
 
 	// adds `registryDependency` to `selectedComponents` so that they can be individually overwritten
 	for (const name of selectedComponents) {
-		const regDeps = registryDepMap.get(name);
-		regDeps?.forEach((dep) => selectedComponents.add(dep));
+		if (registryDepMap.has(name)) {
+			const regDeps = registryDepMap.get(name);
+			regDeps?.forEach((dep) => selectedComponents.add(dep));
+		} else {
+			const tree = await resolveTree({
+				index: registryIndex,
+				names: [name],
+				includeRegDeps: true,
+				config,
+			});
+			for (const item of tree) {
+				console.log(
+					"item name:",
+					item.name,
+					"registryDependencies:",
+					item.registryDependencies
+				);
+				registryDepMap.set(item.name, item.registryDependencies);
+				for (const regDep of item.registryDependencies) {
+					const regDeps = registryDepMap.get(regDep);
+					regDeps?.forEach((dep) => selectedComponents.add(dep));
+				}
+			}
+		}
 	}
 
-	const res = await registryResolveItemsTree(Array.from(selectedComponents), config);
+	const tree = await resolveTree({
+		index: registryIndex,
+		names: Array.from(selectedComponents),
+		includeRegDeps: false,
+		config,
+	});
 
-	const tree = await resolveTree(registryIndex, Array.from(selectedComponents), false);
 	const payload = await fetchTree(config, tree);
 	// const baseColor = await getRegistryBaseColor(config.tailwind.baseColor);
 
@@ -139,8 +164,11 @@ async function runAdd(cwd: string, config: Config, options: AddOptions) {
 	const targetPath = options.path ? path.resolve(cwd, options.path) : undefined;
 	for (const item of payload) {
 		if (selectedComponents.has(item.name) === false) continue;
+		for (const regDep of item.registryDependencies) {
+			selectedComponents.add(regDep);
+		}
 
-		const targetDir = getItemTargetPath(config, item, targetPath);
+		const targetDir = getRegistryItemFileTargetPath(config, item, targetPath);
 		if (targetDir === null) continue;
 
 		const componentExists = item.files.some((file) => {
@@ -190,7 +218,7 @@ async function runAdd(cwd: string, config: Config, options: AddOptions) {
 	const dependencies = new Set<string>();
 	const tasks: p.Task[] = [];
 	for (const item of payload) {
-		const targetDir = getItemTargetPath(config, item, targetPath);
+		const targetDir = getRegistryItemFileTargetPath(config, item, targetPath);
 		if (targetDir === null) continue;
 
 		if (!existsSync(targetDir)) {

packages/cli/src/commands/update.ts

@@ -170,10 +170,11 @@ async function runUpdate(cwd: string, config: Config, options: UpdateOptions) {
 		await fs.writeFile(utilsPath, config.typescript ? UTILS : UTILS_JS);
 	}
 
-	const tree = await resolveTree(
-		registryIndex,
-		selectedComponents.map((com) => com.name)
-	);
+	const tree = await resolveTree({
+		index: registryIndex,
+		names: selectedComponents.map((com) => com.name),
+		config,
+	});
 	const payload = (await fetchTree(config, tree)).sort((a, b) => a.name.localeCompare(b.name));
 
 	const componentsToRemove: Record<string, string[]> = {};

packages/cli/src/utils/get-config.ts

@@ -50,6 +50,7 @@ export const configSchema = v.object({
 	...rawConfigSchema.entries,
 	...v.object({
 		resolvedPaths: v.object({
+			cwd: v.string(),
 			tailwindConfig: v.string(),
 			tailwindCss: v.string(),
 			utils: v.string(),
@@ -105,6 +106,7 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
 	return v.parse(configSchema, {
 		...config,
 		resolvedPaths: {
+			cwd,
 			tailwindConfig: path.resolve(cwd, config.tailwind.config),
 			tailwindCss: path.resolve(cwd, config.tailwind.css),
 			utils: utilsPath,

packages/cli/src/utils/registry/index.ts

@@ -1,3 +1,4 @@
+import deepmerge from "deepmerge";
 import { fetch } from "node-fetch-native";
 import { createProxy } from "node-fetch-native/proxy";
 import path from "node:path";
@@ -80,20 +81,40 @@ export async function getRegistryBaseColor(baseColor: string) {
 
 type RegistryIndex = v.InferOutput<typeof schemas.registryIndexSchema>;
 
-export async function resolveTree(index: RegistryIndex, names: string[], includeRegDeps = true) {
+type ResolveTreeProps = {
+	index: RegistryIndex;
+	names: string[];
+	includeRegDeps?: boolean;
+	config: Config;
+};
+
+export async function resolveTree({
+	index,
+	names,
+	includeRegDeps = true,
+	config,
+}: ResolveTreeProps) {
 	const tree: RegistryIndex = [];
 
 	for (const name of names) {
-		const entry = index.find((entry) => entry.name === name);
+		let entry = index.find((entry) => entry.name === name);
 
 		if (!entry) {
-			continue;
+			// attempt to find entry elsewhere in the registry
+			const trueStyle = config.typescript ? config.style : `${config.style}-js`;
+			const [item] = await fetchRegistry([`styles/${trueStyle}/${name}.json`]);
+			if (item) entry = item;
+			if (!entry) continue;
 		}
 
 		tree.push(entry);
 
 		if (includeRegDeps && entry.registryDependencies) {
-			const dependencies = await resolveTree(index, entry.registryDependencies);
+			const dependencies = await resolveTree({
+				index,
+				names: entry.registryDependencies,
+				config,
+			});
 			tree.push(...dependencies);
 		}
 	}
@@ -145,7 +166,9 @@ async function fetchRegistry(paths: string[]) {
 				const response = await fetch(url, {
 					...proxy,
 				});
-				return await response.json();
+
+				const json = await response.json();
+				return json;
 			})
 		);
 
@@ -172,6 +195,7 @@ export async function registryResolveItemsTree(names: string[], config: Config)
 			const itemRegistryDependencies = await resolveRegistryDependencies(name, config);
 			registryDependencies.push(...itemRegistryDependencies);
 		}
+		console.log("REGISTRY DEPENDENCIES", registryDependencies);
 
 		const uniqueRegistryDeps = Array.from(new Set(registryDependencies));
 		const result = await fetchRegistry(uniqueRegistryDeps);
@@ -180,8 +204,8 @@ export async function registryResolveItemsTree(names: string[], config: Config)
 		if (!payload) return null;
 
 		return v.parse(schemas.registryResolvedItemsTreeSchema, {
-			dependencies: payload.map((item) => item.dependencies ?? []),
-			files: payload.map((item) => item.files ?? []),
+			dependencies: deepmerge.all(payload.map((item) => item.dependencies ?? [])),
+			files: deepmerge.all(payload.map((item) => item.files ?? [])),
 		});
 	} catch (e) {
 		if (e instanceof CLIError) throw e;
@@ -230,3 +254,22 @@ function isUrl(path: string) {
 		return false;
 	}
 }
+
+export function getRegistryItemFileTargetPath(
+	config: Config,
+	file: schemas.RegistryItem,
+	override?: string
+) {
+	if (override) return override;
+
+	if (file.type === "registry:ui") return config.resolvedPaths.ui;
+	if (file.type === "registry:lib") return config.resolvedPaths.lib;
+	if (file.type === "registry:block" || file.type === "registry:component") {
+		return config.resolvedPaths.components;
+	}
+	if (file.type === "registry:hook") return config.resolvedPaths.hooks;
+	// TODO - we put this in components for now but will move to the appropriate route location
+	// depending on if using SvelteKit or whatever
+	if (file.type === "registry:page") return config.resolvedPaths.components;
+	return config.resolvedPaths.components;
+}

packages/cli/src/utils/registry/schema.ts

@@ -6,6 +6,8 @@ const registryItemTypeSchema = v.picklist([
 	"registry:example",
 	"registry:block",
 	"registry:hook",
+	"registry:page",
+	"registry:lib",
 ]);
 
 export const registryItemTailwindSchema = v.object({
@@ -21,9 +23,10 @@ export const registryItemTailwindSchema = v.object({
 export const registryItemFileSchema = v.object({
 	content: v.fallback(v.string(), ""),
 	type: registryItemTypeSchema,
-	target: v.fallback(v.string(), ""),
 });
 
+export type RegistryItemFile = v.InferOutput<typeof registryItemFileSchema>;
+
 export type RegistryItemTailwind = v.InferOutput<typeof registryItemTailwindSchema>;
 
 export const registryItemCssVarsSchema = v.object({
@@ -33,14 +36,16 @@ export const registryItemCssVarsSchema = v.object({
 
 export const registryItemSchema = v.object({
 	name: v.string(),
-	dependencies: v.array(v.string()),
-	registryDependencies: v.array(v.string()),
+	dependencies: v.fallback(v.array(v.string()), []),
+	registryDependencies: v.fallback(v.array(v.string()), []),
 	files: v.array(registryItemFileSchema),
 	type: registryItemTypeSchema,
 	tailwind: v.optional(registryItemTailwindSchema),
 	cssVars: v.optional(registryItemCssVarsSchema),
 });
 
+export type RegistryItem = v.InferOutput<typeof registryItemSchema>;
+
 export const registryResolvedItemsTreeSchema = v.pick(registryItemSchema, [
 	"dependencies",
 	"files",

playgrounds/playground-ts/package.json

@@ -23,6 +23,7 @@
 		"vite": "^5.0.3"
 	},
 	"dependencies": {
+		"bits-ui": "1.0.0-next.21",
 		"clsx": "^2.1.1",
 		"lucide-svelte": "^0.453.0",
 		"shadcn-svelte": "workspace:*",