diff --git a/README.md b/README.md index 1c838d9..5f68c32 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,8 @@ npx git+https://git.kotikot.com/lib/claddcn-svelte.git init --strip-vars 1. copies `claddcn.css` next to your Tailwind entry and `@import`s it; 2. `--strip-vars` removes your old `:root` / `.dark` / `@theme inline` token blocks (claddcn defines every shadcn token, and blocks after the import would win); -3. overwrites `$lib/components/ui/*` with the cladd versions and backs up the old +3. overwrites the `ui` alias from `components.json` with the cladd versions, imports + rewritten to your aliases (`$lib` or the SvelteKit 3 `#lib`), and backs up the old files to `.claddcn-backup//`; 4. extends `cn()` so tailwind-merge understands `text-cladd-xs`, `h-cladd-md`, etc.; 5. installs `@fontsource-variable/geist` and `geist-mono`, using bun, pnpm, yarn or npm. diff --git a/bin/claddcn.mjs b/bin/claddcn.mjs index ebf23ca..6c03546 100755 --- a/bin/claddcn.mjs +++ b/bin/claddcn.mjs @@ -41,12 +41,29 @@ function write(file, content) { fs.writeFileSync(file, content); } -function copyDir(src, dest) { +function rewriteImports(source, aliases = {}) { + const lib = aliases.lib ?? '$lib'; + const targets = [ + ['$lib/components/ui', aliases.ui ?? `${lib}/components/ui`], + ['$lib/components', aliases.components ?? `${lib}/components`], + ['$lib/hooks', aliases.hooks ?? `${lib}/hooks`], + ['$lib/utils', aliases.utils ?? `${lib}/utils`], + ['$lib', lib] + ]; + return source.replace(/(['"])(\$lib(?:[/.][^'"]*)?)\1/g, (_, quote, spec) => { + const [from, to] = targets.find( + ([from]) => spec.startsWith(from) && /^([/.]|$)/.test(spec.slice(from.length)) + ); + return `${quote}${to}${spec.slice(from.length)}${quote}`; + }); +} + +function copyDir(src, dest, aliases) { for (const entry of fs.readdirSync(src, { withFileTypes: true })) { const from = path.join(src, entry.name); const to = path.join(dest, entry.name); - if (entry.isDirectory()) copyDir(from, to); - else write(to, fs.readFileSync(from)); + if (entry.isDirectory()) copyDir(from, to, aliases); + else write(to, rewriteImports(fs.readFileSync(from, 'utf8'), aliases)); } } @@ -135,7 +152,7 @@ function patchUtils(utilsFile) { const ours = fs.readFileSync(UTILS_TS, 'utf8'); const block = ours.slice(0, ours.indexOf('export function cn')); const next = src.replace( - /import \{ clsx, type ClassValue \} from 'clsx';\s*\nimport \{ twMerge \} from 'tailwind-merge';\s*\n/, + /import \{[^}]*\} from ['"]clsx['"];?\s*\nimport \{ twMerge \} from ['"]tailwind-merge['"];?\s*\n/, block ); if (next === src) { @@ -192,7 +209,7 @@ function init() { fs.mkdirSync(backup, { recursive: true }); fs.cpSync(target, path.join(backup, name), { recursive: true }); } - copyDir(path.join(REGISTRY_UI, name), target); + copyDir(path.join(REGISTRY_UI, name), target, config.aliases); } log(`${components.length} components written to ${path.relative(cwd, uiDir)}`); if (fs.existsSync(backup)) log(`previous versions saved in ${path.relative(cwd, backup)}`);