Merge branch 'next' into next-upgrade-pm-detector

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["playground-js", "playground-ts"]
+  "ignore": []
 }

.github/workflows/release.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - next
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 

.gitignore

@@ -109,4 +109,6 @@ dist
 generated-assets
 
 # JetBrains IDEs
-.idea/
+.idea/
+
+.velite

.prettierignore

@@ -18,8 +18,11 @@ CHANGELOG.md
 
 
 # docs site specific
-sites/docs/src/__registry__/*
 sites/docs/other/themes/dark.json
 sites/docs/other/themes/light.json
 sites/docs/static
-
+sites/docs/.velite
+sites/docs/src/__registry__
+packages/cli/test/fixtures
+playgrounds
+.svelte-kit

.vscode/settings.json

@@ -5,7 +5,9 @@
 	// Auto fix
 	"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": "explicit",
-		"source.organizeImports": "never"
+		"source.organizeImports": "never",
+		"source.removeUnusedImports": "never",
+		"source.removeUnused.ts": "never"
 	},
 
 	// Enable eslint for all supported languages

eslint.config.js

@@ -1,29 +1,52 @@
-import config, { DEFAULT_IGNORES } from "@huntabyte/eslint-config";
+import eslint from "@eslint/js";
+import prettier from "eslint-config-prettier";
+import svelte from "eslint-plugin-svelte";
+import globals from "globals";
+import tseslint from "typescript-eslint";
 
-const ignores = ["**/extended-types"];
-
-export default config({ svelte: true, ignores: [...DEFAULT_IGNORES, ...ignores] })
-	.override("antfu/typescript/rules", {
-		rules: {
-			"ts/consistent-type-definitions": "off",
-			"unused-imports/no-unused-imports": "off",
-			"unused-imports/no-unused-vars": "off",
-			"ts/no-unused-expressions": "off",
-			"no-unused-expressions": "off",
-			"ts/no-empty-object-type": "off",
+export default tseslint.config(
+	eslint.configs.recommended,
+	...tseslint.configs.recommended,
+	...svelte.configs["flat/recommended"],
+	prettier,
+	...svelte.configs["flat/prettier"],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node,
+			},
 		},
-	})
-	.override("antfu/javascript/rules", {
-		rules: {
-			"no-unused-expressions": "off",
-			"unused-imports/no-unused-imports": "off",
+	},
+	{
+		files: ["**/*.svelte"],
+		languageOptions: {
+			parserOptions: {
+				parser: tseslint.parser,
+			},
 		},
-	})
-	.override("huntabyte/svelte/rules", {
+	},
+	{
 		rules: {
-			"svelte/no-at-html-tags": "off",
-			"unused-imports/no-unused-imports": "off",
-			"unused-imports/no-unused-vars": "off",
-			"import/no-self-import": "off",
+			"@typescript-eslint/no-unused-vars": [
+				"error",
+				{
+					argsIgnorePattern: "^_",
+					varsIgnorePattern: "^_",
+				},
+			],
+			"@typescript-eslint/no-unused-expressions": "off",
 		},
-	});
+	},
+	{
+		ignores: [
+			"build/",
+			".svelte-kit/",
+			"dist/",
+			".svelte-kit/**/*",
+			"sites/docs/.svelte-kit/**/*",
+			".svelte-kit",
+			"playgrounds/**/*",
+		],
+	}
+);

package.json

@@ -8,19 +8,15 @@
 	},
 	"private": true,
 	"scripts": {
-		"build": "pnpm build:registry && pnpm build:site",
+		"build": "pnpm build:docs",
 		"build:cli": "pnpm -F shadcn-svelte build",
-		"build:registry": "pnpm -F docs build:registry",
-		"build:site": "pnpm -F docs build",
-		"dev": "pnpm build:registry && pnpm -F docs dev",
+		"build:docs": "pnpm -F docs build",
+		"dev": "pnpm -F docs dev",
 		"dev:cli": "pnpm -F shadcn-svelte start:dev",
 		"preview": "pnpm -F docs preview",
-		"test": "pnpm -F docs test",
+		"test": "pnpm -F shadcn-svelte test",
 		"check": "pnpm -F docs check",
-		"check:watch": "pnpm -F docs check:watch",
-		"test:unit": "pnpm -F docs test:unit",
 		"lint": "prettier --check . && eslint .",
-		"lint:fix": "eslint --fix .",
 		"format": "prettier --write .",
 		"preinstall": "npx only-allow pnpm",
 		"postinstall": "pnpm -r sync",
@@ -41,18 +37,22 @@
 	"type": "module",
 	"devDependencies": {
 		"@changesets/cli": "^2.27.1",
+		"@eslint/js": "^9.12.0",
 		"@huntabyte/eslint-config": "^0.3.2",
+		"@typescript-eslint/eslint-plugin": "^8.10.0",
+		"@typescript-eslint/scope-manager": "^8.10.0",
+		"@typescript-eslint/utils": "^8.10.0",
 		"eslint": "^9.0.0",
+		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.44.1",
-		"prettier": "^3.2.5",
+		"globals": "^15.11.0",
+		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.7",
-		"prettier-plugin-tailwindcss": "^0.5.12",
+		"prettier-plugin-tailwindcss": "^0.6.8",
 		"pretty-quick": "^4.0.0",
-		"simple-git-hooks": "^2.10.0",
-		"svelte": "5.0.0-next.262",
-		"svelte-eslint-parser": "^0.41.1"
-	},
-	"simple-git-hooks": {
-		"pre-commit": "pnpm -r format:staged --staged"
+		"svelte": "^5.0.0-next.264",
+		"svelte-eslint-parser": "^0.42.0",
+		"typescript": "^5.6.3",
+		"typescript-eslint": "^8.10.0"
 	}
 }

packages/cli/CHANGELOG.md

@@ -1,5 +1,11 @@
 # shadcn-svelte
 
+## 0.14.0
+
+### Minor Changes
+
+- bc787f3: Install all dependencies as dev dependencies
+
 ## 0.13.0
 
 ### Minor Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shadcn-svelte",
-	"version": "0.13.0",
+	"version": "0.14.0",
 	"description": "Add components to your apps.",
 	"license": "MIT",
 	"author": {

packages/cli/src/commands/add.ts

@@ -1,25 +1,19 @@
-import { existsSync, promises as fs } from "node:fs";
-import path from "node:path";
-import process from "node:process";
 import color from "chalk";
 import { Command } from "commander";
 import { execa } from "execa";
+import { existsSync, promises as fs } from "node:fs";
+import path from "node:path";
+import process from "node:process";
 import * as v from "valibot";
-import { resolveCommand } from "package-manager-detector/commands";
-import { type Config, getConfig } from "../utils/get-config.js";
-import { getEnvProxy } from "../utils/get-env-proxy.js";
+import { detectPM } from "../utils/auto-detect.js";
 import { ConfigError, error, handleError } from "../utils/errors.js";
-import {
-	fetchTree,
-	getItemTargetPath,
-	// getRegistryBaseColor,
-	getRegistryIndex,
-	resolveTree,
-} from "../utils/registry";
-import { transformImports } from "../utils/transformers.js";
-import * as p from "../utils/prompts.js";
+import * as cliConfig from "../utils/get-config.js";
+import { getEnvProxy } from "../utils/get-env-proxy.js";
 import { intro, prettifyList } from "../utils/prompt-helpers.js";
-import { detectPM } from "../utils/auto-detect.js";
+import * as p from "../utils/prompts.js";
+import * as registry from "../utils/registry/index.js";
+import { transformImports } from "../utils/transformers.js";
+import { resolveCommand } from "package-manager-detector/commands";
 
 const highlight = (...args: unknown[]) => color.bold.cyan(...args);
 
@@ -61,13 +55,15 @@ export const add = new Command()
 				throw error(`The path ${color.cyan(cwd)} does not exist. Please try again.`);
 			}
 
-			const config = await getConfig(cwd);
+			const config = await cliConfig.getConfig(cwd);
 			if (!config) {
 				throw new ConfigError(
 					`Configuration file is missing. Please run ${color.green("init")} to create a ${highlight("components.json")} file.`
 				);
 			}
 
+			registry.setRegistry(config.registry);
+
 			await runAdd(cwd, config, options);
 
 			p.outro(`${color.green("Success!")} Component installation completed.`);
@@ -76,13 +72,13 @@ export const add = new Command()
 		}
 	});
 
-async function runAdd(cwd: string, config: Config, options: AddOptions) {
+async function runAdd(cwd: string, config: cliConfig.Config, options: AddOptions) {
 	if (options.proxy !== undefined) {
 		process.env.HTTP_PROXY = options.proxy;
 		p.log.info(`You are using the provided proxy: ${color.green(options.proxy)}`);
 	}
 
-	const registryIndex = await getRegistryIndex();
+	const registryIndex = await registry.getRegistryIndex();
 
 	let selectedComponents = new Set(
 		options.all ? registryIndex.map(({ name }) => name) : options.components
@@ -119,12 +115,34 @@ 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 registry.resolveTree({
+				index: registryIndex,
+				names: [name],
+				includeRegDeps: true,
+				config,
+			});
+			for (const item of tree) {
+				for (const regDep of item.registryDependencies) {
+					selectedComponents.add(regDep);
+					const regDeps = registryDepMap.get(regDep);
+					regDeps?.forEach((dep) => selectedComponents.add(dep));
+				}
+			}
+		}
 	}
 
-	const tree = await resolveTree(registryIndex, Array.from(selectedComponents), false);
-	const payload = await fetchTree(config, tree);
+	const tree = await registry.resolveTree({
+		index: registryIndex,
+		names: Array.from(selectedComponents),
+		includeRegDeps: false,
+		config,
+	});
+
+	const payload = await registry.fetchTree(config, tree);
 	// const baseColor = await getRegistryBaseColor(config.tailwind.baseColor);
 
 	if (payload.length === 0) {
@@ -137,8 +155,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 = registry.getRegistryItemTargetPath(config, item.type, targetPath);
 		if (targetDir === null) continue;
 
 		const componentExists = item.files.some((file) => {
@@ -188,7 +209,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 = registry.getRegistryItemTargetPath(config, item.type, targetPath);
 		if (targetDir === null) continue;
 
 		if (!existsSync(targetDir)) {
@@ -226,14 +247,15 @@ async function runAdd(cwd: string, config: Config, options: AddOptions) {
 			title: `Installing ${highlight(item.name)}`,
 			async task() {
 				for (const file of item.files) {
-					const componentDir = path.resolve(targetDir, item.name);
-					const filePath = path.resolve(targetDir, item.name, file.name);
+					const targetDir = registry.getRegistryItemTargetPath(config, file.type);
+					const filePath = path.resolve(targetDir, file.target);
 
 					// Run transformers.
 					const content = transformImports(file.content, config);
 
-					if (!existsSync(componentDir)) {
-						await fs.mkdir(componentDir, { recursive: true });
+					const dir = path.parse(filePath).dir;
+					if (!existsSync(dir)) {
+						await fs.mkdir(dir, { recursive: true });
 					}
 
 					await fs.writeFile(filePath, content);
@@ -248,20 +270,28 @@ async function runAdd(cwd: string, config: Config, options: AddOptions) {
 	const pm = await detectPM(cwd, options.deps);
 	if (pm) {
 		const add = resolveCommand(pm, "add", ["-D", ...dependencies]);
-		if (add) {
-			tasks.push({
-				title: `${highlight(pm)}: Installing dependencies`,
-				enabled: dependencies.size > 0,
-				async task() {
-					await execa(add.command, [...add.args], {
-						cwd,
-					});
-					return `Dependencies installed with ${highlight(pm)}`;
-				},
-			});
-		}
+		if (!add) throw error(`Could not detect a package manager in ${cwd}.`);
+		tasks.push({
+			title: `${highlight(pm)}: Installing dependencies`,
+			enabled: dependencies.size > 0,
+			async task() {
+				await execa(add.command, [...add.args], {
+					cwd,
+				});
+				return `Dependencies installed with ${highlight(pm)}`;
+			},
+		});
 	}
 
+	// Update the config
+	tasks.push({
+		title: "Updating config file",
+		async task() {
+			cliConfig.writeConfig(cwd, config);
+			return `Config file ${highlight("components.json")} updated`;
+		},
+	});
+
 	await p.tasks(tasks);
 
 	if (!options.deps) {