components-differ 1.2.1 → 1.2.3

package/README.md

@@ -1,31 +1,63 @@
-# ShadCN Project Differ
+## components-differ
 
-This CLI tool figures out the difference between the initial commit of a ShadCN project and the current state of the project and creates a new ShadCN JSON output file with the changes. This ShadCN JSON file can then be used with the ShadCN CLI to generate a new project or add to an existing project.
+CLI to generate shadcn-compatible registry items (`registry:block`) from your project.
 
-# Steps
+You can use it in two ways:
 
-1. Create a new NextJS app
-2. Add ShadCN to the app
-3. Create a new initial commit; `rm -fr .git && git init && git add . && git commit -m "Initial commit"` or `npx components-differ --init`
-4. Make your updates to the project
-5. Run the CLI tool; `npx components-differ`
+- **Folder mode** (default): create a registry item from every file in a folder (default: current directory).
+- **Git mode** (`--git`): create a registry item from files changed since the initial git commit.
 
-The reason we are recreating the initial commit is so that the resulting JSON output is only the changes to the project after ShadCN was added, and not the entire project history.
+### Install & build
 
-You can then take the resulting JSON ouput and host it on a URL, then use that with the ShadCN CLI to generate a new project or add to an existing project.
+From the `differ` folder:
 
 ```bash
-npx shadcn@latest init http://your-json-output-url
+npm install -g components-differ
 ```
 
-You can use the `--src-dir` flag if you want to use the `src` directory in your project.
+After building, you can run the CLI with `node` or via the `components-differ` bin (if linked/installed).
 
-Or you can add the JSON output to an existing project:
+### Default: folder mode (current directory)
+
+Run with no arguments to generate a registry item from the **current folder** (and all files it imports):
 
 ```bash
-npx shadcn@latest add http://your-json-output-url
+# from your project root – includes whole project and resolves imports
+components-differ > block.json
+
+# optional name
+components-differ -n my-block > block.json
 ```
 
-# Why is this useful?
+Or target a specific folder:
+
+```bash
+components-differ --folder src/app/dashboard -n dashboard-block > block.json
+components-differ --folder src/app/dashboard > block.json
+```
+
+### Git mode (changed files only)
+
+Use `--git` when you want a registry item only from files changed since the initial commit:
+
+```bash
+# initialize a clean git history first
+components-differ --init
+
+# after making changes, generate from changed files only
+components-differ --git -n my-block > block.json
+```
+
+### Add the block locally
+
+```bash
+npx shadcn add ./block.json
+```
+
+### Options summary
+
+- **`--init`**: initialize a clean git repo and first commit (for use with `--git` later).
+- **`-n, --name <name>`**: registry item name; defaults to current (or folder) name.
+- **`-f, --folder <folder>`**: folder to include (default: current directory). Ignored if `--git` is set.
+- **`--git`**: use git mode (only files changed since initial commit).
 
-This allows library maintainers or SaaS services to create a one step installer for their library or service into an existing project, or to bootstrap a new project with the library or service.

package/dist/components.js

@@ -0,0 +1,130 @@
+import path from "node:path";
+import fs from "node:fs";
+const WHITELISTED_COMPONENTS = [
+    "accordion",
+    "alert",
+    "alert-dialog",
+    "aspect-ratio",
+    "avatar",
+    "badge",
+    "breadcrumb",
+    "button",
+    "button-group",
+    "calendar",
+    "card",
+    "carousel",
+    "chart",
+    "checkbox",
+    "collapsible",
+    "combobox",
+    "command",
+    "context-menu",
+    "data-table",
+    "date-picker",
+    "dialog",
+    "drawer",
+    "dropdown-menu",
+    "empty",
+    "field",
+    "form",
+    "hover-card",
+    "input",
+    "input-group",
+    "input-otp",
+    "item",
+    "kbd",
+    "label",
+    "menubar",
+    "native-select",
+    "navigation-menu",
+    "pagination",
+    "popover",
+    "progress",
+    "radio-group",
+    "resizable",
+    "scroll-area",
+    "select",
+    "separator",
+    "sheet",
+    "sidebar",
+    "skeleton",
+    "slider",
+    "sonner",
+    "spinner",
+    "switch",
+    "table",
+    "tabs",
+    "textarea",
+    "toast",
+    "toggle",
+    "toggle-group",
+    "tooltip",
+    "typography",
+];
+function findComponentsJson(startDir) {
+    let currentDir = startDir;
+    while (true) {
+        const manifestPath = path.join(currentDir, "components.json");
+        if (fs.existsSync(manifestPath)) {
+            return manifestPath;
+        }
+        const parentDir = path.dirname(currentDir);
+        if (parentDir === currentDir) {
+            break;
+        }
+        currentDir = parentDir;
+    }
+    return null;
+}
+export function findComponentFiles(config, originalFiles) {
+    const registryDependencies = [];
+    const compDir = config.ui.replace("@/", config.isSrcDir ? "src/" : "");
+    const registriesConfig = config.registries ?? {};
+    const registryNamespaces = Object.keys(registriesConfig);
+    const defaultNamespace = registryNamespaces.find((name) => name === "@shadcn") ??
+        registryNamespaces[0] ??
+        null;
+    for (const { path: filePath } of originalFiles) {
+        if (filePath.startsWith(compDir)) {
+            const fileExtension = path.extname(filePath);
+            const fileName = path.basename(filePath, fileExtension);
+            if ((fileExtension === ".tsx" || fileExtension === ".jsx") &&
+                WHITELISTED_COMPONENTS.includes(fileName)) {
+                const baseName = path.basename(filePath, fileExtension);
+                const dependencyName = defaultNamespace
+                    ? `${defaultNamespace}/${baseName}`
+                    : baseName;
+                registryDependencies.push(dependencyName);
+            }
+        }
+    }
+    return registryDependencies;
+}
+export function readComponentsManifest(dir) {
+    const manifestPath = findComponentsJson(dir);
+    if (!manifestPath) {
+        console.error("Components manifest (components.json) not found");
+        process.exit(1);
+    }
+    const json = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+    return {
+        ...json.aliases,
+        registries: json.registries ?? {},
+    };
+}
+export function getAliasedPaths(config) {
+    return [
+        config.components.replace("@/", ""),
+        config.utils.replace("@/", ""),
+        config.ui.replace("@/", ""),
+        config.lib.replace("@/", ""),
+        config.hooks.replace("@/", ""),
+    ];
+}
+export function isBuiltinComponent(config, filePath) {
+    if (filePath.startsWith(config.ui.replace("@/", ""))) {
+        const component = path.basename(filePath, path.extname(filePath));
+        return WHITELISTED_COMPONENTS.includes(component);
+    }
+    return false;
+}

package/dist/create-diff.js

@@ -0,0 +1,77 @@
+import { findComponentFiles, getAliasedPaths, isBuiltinComponent, } from "./components.js";
+import { parseFilePath } from "./parse-file-path.js";
+import { extractImportedPackages } from "./extract-imports.js";
+function addFile(output, config, inSrcDir, relativeFilePath, content) {
+    if (!isBuiltinComponent(config, relativeFilePath)) {
+        output.files.push(parseFilePath(inSrcDir, config, `./${relativeFilePath}`, content));
+    }
+}
+function addDependencies(output, _initialPackageContents, currentPackageContents, usedPackages) {
+    const currentPackageJson = JSON.parse(currentPackageContents);
+    const currentDependencies = currentPackageJson.dependencies ?? {};
+    const currentDevDependencies = currentPackageJson.devDependencies ?? {};
+    const shadcnNamespaces = new Set(output.registryDependencies
+        .map((dep) => dep.split("/")[0])
+        .filter((ns) => ns === "@shadcn"));
+    const shouldKeepDep = (dep) => {
+        if (!usedPackages.has(dep))
+            return false;
+        if (!shadcnNamespaces.size)
+            return true;
+        if (dep === "shadcn/ui")
+            return false;
+        for (const ns of shadcnNamespaces) {
+            if (dep === ns || dep === `${ns}/ui`) {
+                return false;
+            }
+        }
+        return true;
+    };
+    // Only include packages that are actually imported in the registry item files
+    // (and exist in package.json so we know dep vs devDep). No other deps.
+    output.dependencies = Object.keys(currentDependencies).filter(shouldKeepDep);
+    output.devDependencies = Object.keys(currentDevDependencies).filter(shouldKeepDep);
+}
+function scanWithSrcDir(output, config, alteredFiles) {
+    for (const { path, content } of alteredFiles) {
+        if (path.startsWith("src/")) {
+            addFile(output, config, true, path.replace("src/", ""), content);
+        }
+        else {
+            addFile(output, config, false, path, content);
+        }
+    }
+}
+function isInAppDir(filePath) {
+    return filePath.startsWith("app/");
+}
+function scanWithoutSrcDir(output, config, alteredFiles) {
+    const aliasedPaths = getAliasedPaths(config);
+    for (const { path, content } of alteredFiles) {
+        const inSrcDir = aliasedPaths.includes(path) || isInAppDir(path);
+        addFile(output, config, inSrcDir, path, content);
+    }
+}
+export function createDiff({ name, config, alteredFiles, specificFiles, currentFiles, currentPackageJson, }) {
+    const output = {
+        name,
+        type: "registry:block",
+        dependencies: [],
+        devDependencies: [],
+        registryDependencies: [],
+        files: [],
+        tailwind: {},
+        cssVars: {},
+        meta: {},
+    };
+    if (config.isSrcDir) {
+        scanWithSrcDir(output, config, alteredFiles);
+    }
+    else {
+        scanWithoutSrcDir(output, config, alteredFiles);
+    }
+    output.registryDependencies = findComponentFiles(config, currentFiles);
+    const usedPackages = extractImportedPackages(alteredFiles);
+    addDependencies(output, specificFiles["./package.json"], currentPackageJson, usedPackages);
+    return output;
+}

package/dist/extract-imports.js

@@ -0,0 +1,90 @@
+/**
+ * Extract npm package names from import/require statements in source code.
+ * Used to include only dependencies that are actually used by the registry item files.
+ */
+/**
+ * Returns the root package name for a specifier. Handles scoped packages and subpaths.
+ * - "react" -> "react"
+ * - "lodash/merge" -> "lodash"
+ * - "@scope/pkg" -> "@scope/pkg"
+ * - "@scope/pkg/sub" -> "@scope/pkg"
+ */
+function specifierToPackageName(specifier) {
+    const s = specifier.trim();
+    if (!s)
+        return null;
+    // Node / bundler builtins
+    if (s.startsWith("node:") || s === "node")
+        return null;
+    // Relative imports – not packages
+    if (s.startsWith(".") || s.startsWith("/"))
+        return null;
+    // Common path aliases (not package names)
+    if (s.startsWith("@/") || s.startsWith("~/") || s.startsWith("#"))
+        return null;
+    // Scoped package: @scope/pkg or @scope/pkg/subpath
+    if (s.startsWith("@")) {
+        const firstSlash = s.indexOf("/");
+        if (firstSlash === -1)
+            return s;
+        const secondSlash = s.indexOf("/", firstSlash + 1);
+        return secondSlash === -1 ? s : s.slice(0, secondSlash);
+    }
+    // Normal package or subpath
+    const slash = s.indexOf("/");
+    return slash === -1 ? s : s.slice(0, slash);
+}
+const RE_IMPORT = /(?:import\s+(?:(?:\{[^}]*\}|\*\s+as\s+\w+|\w+)\s+from\s+)?|import\s*)['"]([^'"]+)['"]|require\s*\(\s*['"]([^'"]+)['"]\s*\)|import\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
+/**
+ * Collect all package names that are imported or required in the given file content.
+ */
+function extractFromContent(content) {
+    const packages = new Set();
+    let m;
+    RE_IMPORT.lastIndex = 0;
+    while ((m = RE_IMPORT.exec(content)) !== null) {
+        const specifier = (m[1] ?? m[2] ?? m[3]) ?? "";
+        const pkg = specifierToPackageName(specifier);
+        if (pkg)
+            packages.add(pkg);
+    }
+    return packages;
+}
+/**
+ * Collect all package names imported by any of the given files (by their content).
+ */
+export function extractImportedPackages(files) {
+    const all = new Set();
+    for (const { content } of files) {
+        for (const pkg of extractFromContent(content)) {
+            all.add(pkg);
+        }
+    }
+    return all;
+}
+/** True if the import specifier refers to a project file (relative or path alias), not npm. */
+export function isPathSpecifier(specifier) {
+    const s = specifier.trim();
+    if (!s || s.startsWith("node:"))
+        return false;
+    if (s.startsWith(".") || s.startsWith("/"))
+        return true;
+    if (s.startsWith("@/") || s.startsWith("~/") || s.startsWith("#"))
+        return true;
+    return false;
+}
+/**
+ * Extract all import/require specifiers that are project paths (relative or alias)
+ * from file content. Used to pull in imported files into the registry.
+ */
+export function extractPathSpecifiers(content) {
+    const out = [];
+    let m;
+    RE_IMPORT.lastIndex = 0;
+    while ((m = RE_IMPORT.exec(content)) !== null) {
+        const specifier = (m[1] ?? m[2] ?? m[3]) ?? "";
+        if (isPathSpecifier(specifier))
+            out.push(specifier);
+    }
+    return out;
+}

package/dist/git.js

@@ -0,0 +1,117 @@
+import fs from "node:fs";
+import path from "node:path";
+import { execSync } from "node:child_process";
+import ignore from "ignore";
+const INITIAL_DIR = "_initial";
+const EXCLUDE_DIRS = [
+    "node_modules",
+    "dist",
+    "fonts",
+    "build",
+    "public",
+    "static",
+    ".next",
+    ".git",
+    INITIAL_DIR,
+];
+const EXCLUDE_FILES = [
+    ".DS_Store",
+    "next-env.d.ts",
+    "package-lock.json",
+    "yarn.lock",
+    "pnpm-lock.yaml",
+    "bun.lockb",
+    "package.json",
+    "tailwind.config.ts",
+    "tailwind.config.js",
+    "components.json",
+    "favicon.ico",
+];
+function cloneInitialCommit() {
+    deleteInitialDir();
+    try {
+        const initialCommit = execSync("git rev-list --max-parents=0 HEAD")
+            .toString()
+            .trim();
+        execSync(`git worktree add -f ${INITIAL_DIR} ${initialCommit}`, {
+            stdio: "ignore",
+        });
+    }
+    catch (error) {
+        console.error("Error cloning initial commit:", error.message);
+        process.exit(1);
+    }
+}
+function deleteInitialDir() {
+    if (fs.existsSync(INITIAL_DIR)) {
+        fs.rmSync(INITIAL_DIR, { recursive: true, force: true });
+        try {
+            execSync("git worktree prune", { stdio: "ignore" });
+        }
+        catch (error) {
+            console.error("Error pruning git worktree:", error.message);
+        }
+    }
+}
+function checkIfFileIsChanged(relativeFilePath) {
+    const initialFilePath = path.join(INITIAL_DIR, relativeFilePath);
+    const fullPath = path.join(process.cwd(), relativeFilePath);
+    if (!fs.existsSync(initialFilePath)) {
+        return true;
+    }
+    const currentContent = fs.readFileSync(fullPath, "utf-8");
+    const initialContent = fs.readFileSync(initialFilePath, "utf-8");
+    return currentContent !== initialContent;
+}
+export function scanForFiles(startDir, checkFile = false) {
+    const foundFiles = [];
+    let ignorer = () => false;
+    const gitignorePath = path.join(startDir, ".gitignore");
+    if (fs.existsSync(gitignorePath)) {
+        const gitIgnore = ignore().add(fs.readFileSync(gitignorePath).toString());
+        ignorer = (relativeFilePath) => gitIgnore.ignores(relativeFilePath);
+    }
+    function scanDirectory(dir, relativePath = "") {
+        const entries = fs.readdirSync(dir, { withFileTypes: true });
+        for (const entry of entries) {
+            const fullPath = path.join(dir, entry.name);
+            const relativeFilePath = path.join(relativePath, entry.name);
+            if (entry.isDirectory()) {
+                if (!EXCLUDE_DIRS.includes(entry.name)) {
+                    scanDirectory(path.join(dir, entry.name), relativeFilePath);
+                }
+            }
+            else if (!checkFile ||
+                (checkFile && checkIfFileIsChanged(relativeFilePath))) {
+                if (!EXCLUDE_FILES.includes(entry.name) &&
+                    !ignorer(relativeFilePath)) {
+                    foundFiles.push({
+                        path: relativeFilePath,
+                        content: fs.readFileSync(fullPath, "utf-8"),
+                    });
+                }
+            }
+        }
+    }
+    scanDirectory(startDir);
+    return foundFiles.sort((a, b) => a.path.localeCompare(b.path));
+}
+export function scanForAlteredFiles(specificFilesToReturn = []) {
+    cloneInitialCommit();
+    const alteredFiles = scanForFiles(process.cwd(), true);
+    const specificFiles = specificFilesToReturn.reduce((out, file) => {
+        const fullPath = path.join(process.cwd(), INITIAL_DIR, file);
+        out[file] = fs.existsSync(fullPath)
+            ? fs.readFileSync(fullPath, "utf-8")
+            : "";
+        return out;
+    }, {});
+    deleteInitialDir();
+    return {
+        alteredFiles,
+        specificFiles,
+    };
+}
+export function hasSrcDir(dir) {
+    return fs.existsSync(path.join(dir, "src"));
+}

package/dist/index.js

@@ -0,0 +1,136 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import { execSync } from "node:child_process";
+import { program } from "commander";
+import { scanForAlteredFiles, scanForFiles, hasSrcDir, } from "./git.js";
+import { readComponentsManifest } from "./components.js";
+import { createDiff } from "./create-diff.js";
+import { expandIncludedFiles } from "./resolve-imports.js";
+function runCommand(command) {
+    try {
+        execSync(command, { stdio: "inherit" });
+    }
+    catch (error) {
+        console.error(`Failed to execute command: ${command}`);
+        process.exit(1);
+    }
+}
+function ensureGitignore() {
+    const gitignorePath = path.join(process.cwd(), ".gitignore");
+    if (!fs.existsSync(gitignorePath)) {
+        const content = `
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+`;
+        fs.writeFileSync(gitignorePath, content, "utf8");
+    }
+}
+function main() {
+    program
+        .option("-n, --name <name>")
+        .option("--init")
+        .option("-f, --folder <folder>", "folder to include (default: current directory)")
+        .option("--git", "use git mode: only files changed since initial commit");
+    program.parse();
+    const options = program.opts();
+    if (options.init) {
+        // Initialize a clean git repository for the current component
+        if (process.platform === "win32") {
+            runCommand('rmdir /s /q .git && git init && git add . && git commit -m "Initial commit"');
+        }
+        else {
+            runCommand('rm -fr .git && git init && git add . && git commit -m "Initial commit"');
+        }
+        ensureGitignore();
+        return;
+    }
+    const useFolderMode = !options.git;
+    const folderOpt = options.folder ?? (useFolderMode ? "." : undefined);
+    const baseName = folderOpt != null
+        ? path.basename(path.resolve(process.cwd(), folderOpt))
+        : path.basename(process.cwd());
+    const name = options.name || baseName;
+    let alteredFiles;
+    let specificFiles;
+    if (useFolderMode && folderOpt != null) {
+        const folderPath = path.resolve(process.cwd(), folderOpt);
+        if (!fs.existsSync(folderPath) || !fs.statSync(folderPath).isDirectory()) {
+            console.error(`Folder path is not a directory: ${folderOpt}`);
+            process.exit(1);
+        }
+        const folderPrefix = path
+            .relative(process.cwd(), folderPath)
+            .replace(/\\/g, "/")
+            .replace(/^\.\//, "");
+        const allFiles = scanForFiles(process.cwd());
+        alteredFiles = allFiles.filter(({ path: filePath }) => {
+            const normalized = filePath.replace(/\\/g, "/");
+            return (normalized === folderPrefix ||
+                normalized.startsWith(`${folderPrefix}/`));
+        });
+        specificFiles = {
+            "./package.json": "{}",
+        };
+    }
+    else {
+        const result = scanForAlteredFiles(["./package.json"]);
+        alteredFiles = result.alteredFiles;
+        specificFiles = result.specificFiles;
+    }
+    const currentFiles = scanForFiles(process.cwd());
+    const currentPackageJson = fs.readFileSync("./package.json", "utf-8");
+    const config = readComponentsManifest(process.cwd());
+    config.isSrcDir = hasSrcDir(process.cwd());
+    // Recursively add any project file imported by the included files so the
+    // registry item is self-contained (no "component not found").
+    alteredFiles = expandIncludedFiles(alteredFiles, currentFiles, config);
+    const output = createDiff({
+        name,
+        config,
+        alteredFiles,
+        currentFiles,
+        specificFiles,
+        currentPackageJson,
+    });
+    // Emit a complete registry:block JSON object suitable for local file support
+    // (e.g. `npx shadcn add ./block.json`)
+    // eslint-disable-next-line no-console
+    console.log(JSON.stringify(output, null, 2));
+}
+main();