uipkge-ng 0.1.0

package/dist/setup.js

@@ -0,0 +1,169 @@
+// Project setup that `init` performs: tsconfig paths, Tailwind v4, stylesheet import.
+import { existsSync } from 'node:fs';
+import { readFile, writeFile } from 'node:fs/promises';
+import * as path from 'node:path';
+import { applyEdits, modify, parse, printParseErrorCode } from 'jsonc-parser';
+import { UipkgeError } from './errors.js';
+import { readTsChain } from './layout.js';
+/** The two aliases every component source imports (`@/lib/utils`, `@/ui/button`). */
+export const TS_PATHS = {
+    '@/*': './src/*',
+    '@/ui/*': './src/app/components/ui/*',
+};
+/**
+ * Adds aliases to a tsconfig's `compilerOptions.paths`, keeping comments,
+ * formatting and any existing mappings. `seed` is written first when the file
+ * has no `paths` of its own (to keep inherited ones). Returns the new text, or
+ * null when nothing needed to change.
+ */
+export function addTsconfigPaths(text, wanted = TS_PATHS, seed = {}) {
+    const errors = [];
+    const doc = parse(text, errors, { allowTrailingComma: true, disallowComments: false });
+    if (errors.length) {
+        throw new UipkgeError(`Could not parse tsconfig: ${printParseErrorCode(errors[0].error)} at offset ${errors[0].offset}`);
+    }
+    let out = text;
+    let changed = false;
+    const existing = doc?.compilerOptions?.paths ?? { ...seed };
+    const set = (alias, value) => {
+        out = applyEdits(out, modify(out, ['compilerOptions', 'paths', alias], value, { formattingOptions: { insertSpaces: true, tabSize: 2, eol: '\n' } }));
+        changed = true;
+    };
+    if (!doc?.compilerOptions?.paths)
+        for (const [alias, value] of Object.entries(seed))
+            set(alias, value);
+    for (const [alias, target] of Object.entries(wanted)) {
+        const current = existing[alias];
+        const list = Array.isArray(current) ? current.filter((v) => typeof v === 'string') : [];
+        if (list.includes(target))
+            continue;
+        set(alias, [...list, target]);
+    }
+    return changed ? out : null;
+}
+/** The tsconfigs init adds paths to: tsconfig.json, or a workspace app's tsconfig.app.json and tsconfig.spec.json. */
+export function tsconfigsToEdit(root) {
+    if (existsSync(path.join(root, 'tsconfig.json')))
+        return ['tsconfig.json'];
+    return ['tsconfig.app.json', 'tsconfig.spec.json'].filter(f => existsSync(path.join(root, f)));
+}
+/**
+ * `addTsconfigPaths` for `file` in the app at `root`: targets are written
+ * relative to where TypeScript will resolve them (an inherited baseUrl, else
+ * the file's folder), and inherited paths are kept, since declaring `paths`
+ * replaces them.
+ */
+export function appTsconfigEdit(root, file, text) {
+    const abs = path.join(root, file);
+    const chain = readTsChain(abs);
+    const base = chain.baseUrl ?? path.dirname(abs);
+    const rel = (target) => {
+        const r = posixPath(path.relative(base, path.resolve(root, target)));
+        return r.startsWith('.') ? r : `./${r}`;
+    };
+    const wanted = Object.fromEntries(Object.entries(TS_PATHS).map(([alias, target]) => [alias, rel(target)]));
+    const seed = {};
+    if (!chain.ownPaths && chain.paths) {
+        const from = chain.baseUrl ?? chain.pathsDir ?? root;
+        for (const [alias, targets] of Object.entries(chain.paths))
+            seed[alias] = targets.map(t => rel(path.relative(root, path.resolve(from, t))));
+    }
+    return addTsconfigPaths(text, wanted, seed);
+}
+const posixPath = (p) => p.replace(/\\/g, '/');
+// ─── Tailwind ────────────────────────────────────────────────────────────────
+export const POSTCSS_FILES = [
+    '.postcssrc.json',
+    '.postcssrc',
+    'postcss.config.js',
+    'postcss.config.mjs',
+    'postcss.config.cjs',
+    'postcss.config.ts',
+];
+export const TAILWIND_POSTCSS = '@tailwindcss/postcss';
+/**
+ * What init must do so the tokens' `@import 'tailwindcss'` resolves. Angular CLI
+ * apps run Tailwind through PostCSS; Analog builds with Vite, which ignores
+ * PostCSS files and needs the Vite plugin in vite.config.ts (user code, not
+ * edited here).
+ */
+export function planTailwind(input) {
+    if (input.hasTailwind)
+        return { kind: 'skip' };
+    if (input.isAnalog)
+        return { kind: 'vite', devPackages: ['tailwindcss', '@tailwindcss/vite'] };
+    const devPackages = ['tailwindcss', TAILWIND_POSTCSS, 'postcss'];
+    const found = input.postcss;
+    if (!found)
+        return { kind: 'postcss', devPackages, config: { file: '.postcssrc.json', action: 'create' } };
+    if (found.content.includes(TAILWIND_POSTCSS))
+        return { kind: 'postcss', devPackages, config: { file: found.file, action: 'keep' } };
+    const json = found.file === '.postcssrc.json' || found.file === '.postcssrc';
+    return { kind: 'postcss', devPackages, config: { file: found.file, action: json ? 'merge' : 'manual' } };
+}
+/** Puts the Tailwind plugin first in a JSON PostCSS config, keeping the others. */
+export function withTailwindPlugin(content) {
+    const doc = (content.trim() ? parse(content) : {});
+    const plugins = doc.plugins && typeof doc.plugins === 'object' ? doc.plugins : {};
+    return JSON.stringify({ ...doc, plugins: { [TAILWIND_POSTCSS]: {}, ...plugins } }, null, 2) + '\n';
+}
+export async function readPostcssConfig(root) {
+    for (const file of POSTCSS_FILES) {
+        const abs = path.join(root, file);
+        if (existsSync(abs))
+            return { file, content: await readFile(abs, 'utf8') };
+    }
+    return null;
+}
+// ─── Stylesheet ──────────────────────────────────────────────────────────────
+/**
+ * Makes `stylesheet` import the tokens file (path relative to it). The line goes
+ * first: CSS requires @import before other rules. Returns the new text, or null
+ * when the import is already there.
+ */
+const escapeRegExp = (text) => text.replace(/[.*+?^$(){}|[\]\\]/g, '\\$&');
+export function withTokensImport(stylesheet, importPath) {
+    const line = `@import '${importPath}';`;
+    const already = new RegExp(`@import\\s+(url\\()?['"]${escapeRegExp(importPath)}['"]`);
+    if (already.test(stylesheet))
+        return null;
+    return stylesheet ? `${line}\n${stylesheet}` : `${line}\n`;
+}
+/** `src/styles.css` + `src/uipkge.css` → `./uipkge.css`. */
+export function relativeImport(fromFile, toFile) {
+    const rel = path.posix.relative(path.posix.dirname(fromFile.replace(/\\/g, '/')), toFile.replace(/\\/g, '/'));
+    return rel.startsWith('.') ? rel : `./${rel}`;
+}
+export async function writeIfChanged(file, next) {
+    if (next === null)
+        return false;
+    await writeFile(file, next, 'utf8');
+    return true;
+}
+/**
+ * Puts `entry` (relative to the workspace root) first in the app's global
+ * `styles` for every target that has them (build, test), keeping angular.json's
+ * formatting. Returns whether anything changed.
+ */
+export async function addGlobalStyle(packageRoot, project, entry) {
+    const file = path.join(packageRoot, 'angular.json');
+    let text = await readFile(file, 'utf8');
+    const doc = parse(text);
+    const entryOf = doc.projects?.[project];
+    const key = entryOf?.architect ? 'architect' : 'targets';
+    let changed = false;
+    for (const [name, target] of Object.entries(entryOf?.[key] ?? {})) {
+        const styles = target.options?.styles;
+        if (!Array.isArray(styles) || styles.some(s => (typeof s === 'string' ? s : s.input) === entry))
+            continue;
+        const edits = modify(text, ['projects', project, key, name, 'options', 'styles', 0], entry, {
+            isArrayInsertion: true,
+            formattingOptions: { insertSpaces: true, tabSize: 2, eol: '\n' },
+        });
+        text = applyEdits(text, edits);
+        changed = true;
+    }
+    if (changed)
+        await writeFile(file, text, 'utf8');
+    return changed;
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "uipkge-ng",
+  "version": "0.1.0",
+  "description": "Add uipkge Angular components to your project: copy the source, own the code.",
+  "license": "MIT",
+  "author": "Uday Adaka (https://uipkge.dev)",
+  "type": "module",
+  "homepage": "https://uipkge.dev",
+  "bugs": "https://github.com/uday-a/uipkge-cli/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uday-a/uipkge-cli.git"
+  },
+  "keywords": [
+    "uipkge",
+    "angular",
+    "components",
+    "tailwindcss",
+    "cli",
+    "registry",
+    "shadcn",
+    "shadcn-angular"
+  ],
+  "bin": {
+    "uipkge-ng": "dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=20.12"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "dev": "tsx src/index.ts",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.8.1",
+    "diff": "^9.0.0",
+    "jsonc-parser": "^3.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "tsx": "^4.20.0",
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.7"
+  }
+}