lorre-blocks 0.1.1 → 0.2.0

package/dist/index.js

@@ -4,8 +4,8 @@
 import { Command } from "commander";
 
 // src/commands/init.ts
-import { promises as fs2 } from "fs";
-import path2 from "path";
+import { promises as fs4 } from "fs";
+import path4 from "path";
 import * as p from "@clack/prompts";
 import color from "picocolors";
 
@@ -48,104 +48,12 @@ async function writeConfig(cwd, config) {
   );
 }
 
-// src/commands/init.ts
-async function runInit(options) {
-  const { cwd } = options;
-  p.intro(color.bgCyan(color.black(" lorre-blocks init ")));
-  if (await configExists(cwd)) {
-    const overwrite = options.yes ? true : await p.confirm({
-      message: "components.json already exists. Overwrite it?",
-      initialValue: false
-    });
-    if (p.isCancel(overwrite) || !overwrite) {
-      p.cancel("Init aborted; existing components.json kept.");
-      return;
-    }
-  }
-  const tsx = await fileExists(path2.join(cwd, "tsconfig.json"));
-  const registry = options.registry ?? (options.yes ? DEFAULT_REGISTRY : await promptText(
-    "Registry URL",
-    DEFAULT_REGISTRY
-  ));
-  const config = {
-    $schema: "https://lorre-blocks.dev/schema.json",
-    registry,
-    tsx,
-    aliases: { ...DEFAULT_ALIASES }
-  };
-  await writeConfig(cwd, config);
-  p.outro(
-    `${color.green("\u2714")} Wrote components.json. Now run ${color.cyan(
-      "lorre-blocks add button"
-    )}.`
-  );
-}
-async function promptText(message, initial) {
-  const value = await p.text({ message, placeholder: initial, defaultValue: initial });
-  if (p.isCancel(value)) {
-    p.cancel("Init cancelled.");
-    process.exit(0);
-  }
-  return value || initial;
-}
-async function fileExists(f) {
-  try {
-    await fs2.access(f);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-// src/commands/add.ts
-import { promises as fs5 } from "fs";
-import path5 from "path";
-import * as p2 from "@clack/prompts";
-import color2 from "picocolors";
-
-// src/utils/registry.ts
-async function fetchRegistryItem(registry, name) {
-  const base = registry.replace(/\/$/, "");
-  const url = `${base}/r/${name}.json`;
-  let res;
-  try {
-    res = await fetch(url);
-  } catch (err) {
-    throw new Error(
-      `Could not reach the registry at ${url}. Is it running / correct?
-${err.message}`
-    );
-  }
-  if (res.status === 404) {
-    throw new Error(`Component "${name}" was not found in the registry (${url}).`);
-  }
-  if (!res.ok) {
-    throw new Error(`Failed to fetch ${url} (HTTP ${res.status}).`);
-  }
-  return await res.json();
-}
-async function resolveTree(registry, names) {
-  const resolved = /* @__PURE__ */ new Map();
-  async function visit(name) {
-    if (resolved.has(name)) return;
-    const item = await fetchRegistryItem(registry, name);
-    for (const dep of item.registryDependencies ?? []) {
-      await visit(dep);
-    }
-    if (!resolved.has(name)) resolved.set(name, item);
-  }
-  for (const name of names) {
-    await visit(name);
-  }
-  return [...resolved.values()];
-}
-
 // src/utils/package-manager.ts
-import { promises as fs3 } from "fs";
-import path3 from "path";
+import { promises as fs2 } from "fs";
+import path2 from "path";
 import { spawn } from "child_process";
 async function detectPackageManager(cwd) {
-  const has = async (f) => fs3.access(path3.join(cwd, f)).then(() => true).catch(() => false);
+  const has = async (f) => fs2.access(path2.join(cwd, f)).then(() => true).catch(() => false);
   if (await has("pnpm-lock.yaml")) return "pnpm";
   if (await has("yarn.lock")) return "yarn";
   if (await has("bun.lockb")) return "bun";
@@ -181,34 +89,34 @@ async function installDependencies(cwd, pm, deps) {
 }
 
 // src/utils/paths.ts
-import { promises as fs4 } from "fs";
-import path4 from "path";
+import { promises as fs3 } from "fs";
+import path3 from "path";
 async function resolveBaseDir(cwd) {
   for (const file of ["tsconfig.json", "jsconfig.json"]) {
     try {
-      const raw = await fs4.readFile(path4.join(cwd, file), "utf8");
+      const raw = await fs3.readFile(path3.join(cwd, file), "utf8");
       const json = JSON.parse(stripJsonComments(raw));
       const paths = json?.compilerOptions?.paths;
       const baseUrl = json?.compilerOptions?.baseUrl ?? ".";
       const target = paths?.["@/*"]?.[0];
       if (target) {
         const dir = target.replace(/\/\*$/, "");
-        return path4.resolve(cwd, baseUrl, dir);
+        return path3.resolve(cwd, baseUrl, dir);
       }
     } catch {
       continue;
     }
   }
   try {
-    const srcStat = await fs4.stat(path4.join(cwd, "src"));
-    if (srcStat.isDirectory()) return path4.join(cwd, "src");
+    const srcStat = await fs3.stat(path3.join(cwd, "src"));
+    if (srcStat.isDirectory()) return path3.join(cwd, "src");
   } catch {
   }
   return cwd;
 }
 function aliasToDir(alias, baseDir) {
   const rel = alias.replace(/^@\//, "");
-  return path4.join(baseDir, rel);
+  return path3.join(baseDir, rel);
 }
 function targetDirForType(type, aliases, baseDir) {
   switch (type) {
@@ -244,7 +152,211 @@ function stripJsonComments(input) {
   return input.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^:])\/\/.*$/gm, "$1").replace(/,(\s*[}\]])/g, "$1");
 }
 
+// src/utils/registry.ts
+async function fetchRegistryItem(registry, name) {
+  const base = registry.replace(/\/$/, "");
+  const url = `${base}/r/${name}.json`;
+  let res;
+  try {
+    res = await fetch(url);
+  } catch (err) {
+    throw new Error(
+      `Could not reach the registry at ${url}. Is it running / correct?
+${err.message}`
+    );
+  }
+  if (res.status === 404) {
+    throw new Error(`Component "${name}" was not found in the registry (${url}).`);
+  }
+  if (!res.ok) {
+    throw new Error(`Failed to fetch ${url} (HTTP ${res.status}).`);
+  }
+  return await res.json();
+}
+async function fetchIndex(registry) {
+  const base = registry.replace(/\/$/, "");
+  const url = `${base}/r/index.json`;
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Failed to fetch ${url} (HTTP ${res.status}).`);
+  return await res.json();
+}
+async function fetchTheme(registry) {
+  const base = registry.replace(/\/$/, "");
+  const url = `${base}/r/theme.json`;
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Failed to fetch ${url} (HTTP ${res.status}).`);
+  const data = await res.json();
+  return data.css;
+}
+async function resolveTree(registry, names) {
+  const resolved = /* @__PURE__ */ new Map();
+  async function visit(name) {
+    if (resolved.has(name)) return;
+    const item = await fetchRegistryItem(registry, name);
+    for (const dep of item.registryDependencies ?? []) {
+      await visit(dep);
+    }
+    if (!resolved.has(name)) resolved.set(name, item);
+  }
+  for (const name of names) {
+    await visit(name);
+  }
+  return [...resolved.values()];
+}
+
+// src/utils/css.ts
+var THEME_START = "/* lorre-blocks theme start */";
+var THEME_END = "/* lorre-blocks theme end */";
+var TAILWIND_IMPORT = '@import "tailwindcss";';
+function hasTheme(cssContent) {
+  return cssContent.includes(THEME_START);
+}
+function injectThemeBlock(cssContent, themeCss) {
+  const block = `${THEME_START}
+${themeCss.trim()}
+${THEME_END}`;
+  if (hasTheme(cssContent)) {
+    return cssContent.replace(
+      new RegExp(
+        `${escapeRegExp2(THEME_START)}[\\s\\S]*?${escapeRegExp2(THEME_END)}`
+      ),
+      block
+    );
+  }
+  const trimmed = cssContent.trimEnd();
+  if (trimmed.includes(TAILWIND_IMPORT)) {
+    const lines = trimmed.split("\n");
+    const idx = lines.findIndex((l) => l.trim() === TAILWIND_IMPORT);
+    lines.splice(idx + 1, 0, "", block);
+    return lines.join("\n") + "\n";
+  }
+  const prefix = trimmed.length > 0 ? `${trimmed}
+
+` : "";
+  return `${TAILWIND_IMPORT}
+
+${prefix}${block}
+`;
+}
+function escapeRegExp2(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+// src/commands/init.ts
+var BASE_DEPENDENCIES = [
+  "clsx",
+  "tailwind-merge",
+  "class-variance-authority",
+  "tw-animate-css"
+];
+var GLOBAL_CSS_CANDIDATES = [
+  "src/app/globals.css",
+  "app/globals.css",
+  "src/index.css",
+  "src/styles/globals.css",
+  "styles/globals.css"
+];
+async function runInit(options) {
+  const { cwd } = options;
+  p.intro(color.bgCyan(color.black(" lorre-blocks init ")));
+  if (await configExists(cwd)) {
+    const overwrite = options.yes ? true : await p.confirm({
+      message: "components.json already exists. Overwrite it?",
+      initialValue: false
+    });
+    if (p.isCancel(overwrite) || !overwrite) {
+      p.cancel("Init aborted; existing components.json kept.");
+      return;
+    }
+  }
+  const tsx = await fileExists(path4.join(cwd, "tsconfig.json"));
+  const registry = options.registry ?? (options.yes ? DEFAULT_REGISTRY : await promptText("Registry URL", DEFAULT_REGISTRY));
+  const config = {
+    $schema: "https://lorre-blocks.dev/schema.json",
+    registry,
+    tsx,
+    aliases: { ...DEFAULT_ALIASES }
+  };
+  await writeConfig(cwd, config);
+  p.log.success("Wrote components.json");
+  const pm = await detectPackageManager(cwd);
+  const depSpinner = p.spinner();
+  depSpinner.start(`Installing base dependencies with ${pm}`);
+  try {
+    await installDependencies(cwd, pm, BASE_DEPENDENCIES);
+    depSpinner.stop(`Installed: ${BASE_DEPENDENCIES.join(", ")}`);
+  } catch (err) {
+    depSpinner.stop("Dependency install failed.");
+    p.cancel(err.message);
+    process.exit(1);
+  }
+  const baseDir = await resolveBaseDir(cwd);
+  try {
+    const utils = await fetchRegistryItem(registry, "utils");
+    for (const file of utils.files) {
+      const dir = targetDirForType(file.type, config.aliases, baseDir);
+      await fs4.mkdir(dir, { recursive: true });
+      const dest = path4.join(dir, path4.basename(file.path));
+      await fs4.writeFile(dest, rewriteImports(file.content, config), "utf8");
+      p.log.success(`Wrote ${path4.relative(cwd, dest)}`);
+    }
+  } catch (err) {
+    p.log.warn(`Could not write utils: ${err.message}`);
+  }
+  try {
+    const themeCss = await fetchTheme(registry);
+    const cssPath = await resolveGlobalCss(cwd);
+    const existing = await readIfExists(cssPath);
+    const next = injectThemeBlock(existing ?? "", themeCss);
+    await fs4.mkdir(path4.dirname(cssPath), { recursive: true });
+    await fs4.writeFile(cssPath, next, "utf8");
+    p.log.success(
+      `${existing === null ? "Created" : "Updated"} ${path4.relative(cwd, cssPath)} with the theme`
+    );
+  } catch (err) {
+    p.log.warn(`Could not set up the theme: ${err.message}`);
+  }
+  p.outro(
+    `${color.green("\u2714")} Ready. Now run ${color.cyan("lorre-blocks add button")}.`
+  );
+}
+async function resolveGlobalCss(cwd) {
+  for (const candidate of GLOBAL_CSS_CANDIDATES) {
+    if (await fileExists(path4.join(cwd, candidate))) {
+      return path4.join(cwd, candidate);
+    }
+  }
+  return path4.join(cwd, GLOBAL_CSS_CANDIDATES[0]);
+}
+async function readIfExists(file) {
+  try {
+    return await fs4.readFile(file, "utf8");
+  } catch {
+    return null;
+  }
+}
+async function promptText(message, initial) {
+  const value = await p.text({ message, placeholder: initial, defaultValue: initial });
+  if (p.isCancel(value)) {
+    p.cancel("Init cancelled.");
+    process.exit(0);
+  }
+  return value || initial;
+}
+async function fileExists(f) {
+  try {
+    await fs4.access(f);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 // src/commands/add.ts
+import { promises as fs5 } from "fs";
+import path5 from "path";
+import * as p2 from "@clack/prompts";
+import color2 from "picocolors";
 async function runAdd(options) {
   const { cwd, components } = options;
   p2.intro(color2.bgCyan(color2.black(" lorre-blocks add ")));
@@ -259,17 +371,17 @@ async function runAdd(options) {
     p2.cancel("Specify at least one component, e.g. `lorre-blocks add button`.");
     process.exit(1);
   }
-  const spinner2 = p2.spinner();
-  spinner2.start("Resolving components from the registry");
+  const spinner3 = p2.spinner();
+  spinner3.start("Resolving components from the registry");
   let tree;
   try {
     tree = await resolveTree(config.registry, components);
   } catch (err) {
-    spinner2.stop("Failed to resolve components.");
+    spinner3.stop("Failed to resolve components.");
     p2.cancel(err.message);
     process.exit(1);
   }
-  spinner2.stop(
+  spinner3.stop(
     `Resolved ${tree.length} item(s): ${tree.map((t) => t.name).join(", ")}`
   );
   const npmDeps = [...new Set(tree.flatMap((t) => t.dependencies ?? []))];
@@ -324,9 +436,116 @@ async function fileExists2(f) {
   }
 }
 
+// src/commands/list.ts
+import * as p3 from "@clack/prompts";
+import color3 from "picocolors";
+async function runList(options) {
+  const config = await readConfig(options.cwd);
+  const registry = options.registry ?? config?.registry ?? DEFAULT_REGISTRY;
+  p3.intro(color3.bgCyan(color3.black(" lorre-blocks list ")));
+  let items;
+  try {
+    items = await fetchIndex(registry);
+  } catch (err) {
+    p3.cancel(err.message);
+    process.exit(1);
+  }
+  const width = Math.max(...items.map((i) => i.name.length), 4);
+  const lines = items.map(
+    (i) => `  ${color3.green(i.name.padEnd(width))}  ${color3.dim(i.description ?? "")}`
+  );
+  p3.log.message(`${items.length} component(s):
+${lines.join("\n")}`);
+  p3.outro(`Add one with ${color3.cyan("lorre-blocks add <name>")}.`);
+}
+
+// src/commands/diff.ts
+import { promises as fs6 } from "fs";
+import path6 from "path";
+import * as p4 from "@clack/prompts";
+import color4 from "picocolors";
+import { createTwoFilesPatch } from "diff";
+async function runDiff(options) {
+  const { cwd } = options;
+  p4.intro(color4.bgCyan(color4.black(" lorre-blocks diff ")));
+  const config = await readConfig(cwd);
+  if (!config) {
+    p4.cancel("No components.json found. Run `lorre-blocks init` first.");
+    process.exit(1);
+  }
+  const baseDir = await resolveBaseDir(cwd);
+  let names = options.components;
+  if (names.length === 0) {
+    const uiDir = targetDirForType("registry:ui", config.aliases, baseDir);
+    const present = await listComponentNames(uiDir);
+    const index = await fetchIndex(config.registry).catch(() => []);
+    const known = new Set(index.map((i) => i.name));
+    names = present.filter((n) => known.has(n));
+    if (names.length === 0) {
+      p4.cancel("No known components found in your project to diff.");
+      process.exit(0);
+    }
+  }
+  let changed = 0;
+  for (const name of names) {
+    const item = await fetchRegistryItem(config.registry, name);
+    for (const file of item.files) {
+      const dir = targetDirForType(file.type, config.aliases, baseDir);
+      const dest = path6.join(dir, path6.basename(file.path));
+      const local = await readIfExists2(dest);
+      const registryContent = rewriteImports(file.content, config);
+      if (local === null) {
+        p4.log.warn(`${name}: ${path6.relative(cwd, dest)} not added yet`);
+        continue;
+      }
+      if (local === registryContent) {
+        p4.log.success(`${name}: up to date`);
+        continue;
+      }
+      changed++;
+      const patch = createTwoFilesPatch(
+        "your version",
+        "registry",
+        local,
+        registryContent,
+        "",
+        ""
+      );
+      p4.log.message(`${color4.bold(name)} \u2014 ${path6.relative(cwd, dest)}
+${colorizePatch(patch)}`);
+    }
+  }
+  p4.outro(
+    changed === 0 ? `${color4.green("\u2714")} Everything matches the registry.` : `${changed} file(s) differ from the registry.`
+  );
+}
+function colorizePatch(patch) {
+  return patch.split("\n").map((line) => {
+    if (line.startsWith("+") && !line.startsWith("+++")) return color4.green(line);
+    if (line.startsWith("-") && !line.startsWith("---")) return color4.red(line);
+    if (line.startsWith("@@")) return color4.cyan(line);
+    return color4.dim(line);
+  }).join("\n");
+}
+async function listComponentNames(dir) {
+  try {
+    const entries = await fs6.readdir(dir);
+    return entries.filter((f) => /\.(tsx|jsx|ts|js)$/.test(f)).map((f) => f.replace(/\.(tsx|jsx|ts|js)$/, ""));
+  } catch {
+    return [];
+  }
+}
+async function readIfExists2(file) {
+  try {
+    return await fs6.readFile(file, "utf8");
+  } catch {
+    return null;
+  }
+}
+
 // src/index.ts
 var program = new Command();
-program.name("lorre-blocks").description("Add lorre-blocks components to your project by copying their source in.").version("0.1.0");
+program.name("lorre-blocks").description("Add lorre-blocks components to your project by copying their source in.").version("0.2.0");
 program.command("init").description("Create a components.json config in your project.").option("-c, --cwd <path>", "working directory", process.cwd()).option("-r, --registry <url>", "registry base URL").option("-y, --yes", "skip prompts and accept defaults", false).action(async (opts) => {
   await runInit({
     cwd: opts.cwd,
@@ -342,6 +561,12 @@ program.command("add").description("Add one or more components to your project."
     overwrite: opts.overwrite
   });
 });
+program.command("list").description("List the components available in the registry.").option("-c, --cwd <path>", "working directory", process.cwd()).option("-r, --registry <url>", "registry base URL").action(async (opts) => {
+  await runList({ cwd: opts.cwd, registry: opts.registry });
+});
+program.command("diff").description("Show how your local components differ from the registry.").argument("[components...]", "component names; omit to diff all present").option("-c, --cwd <path>", "working directory", process.cwd()).action(async (components, opts) => {
+  await runDiff({ cwd: opts.cwd, components });
+});
 program.parseAsync(process.argv).catch((err) => {
   console.error(err);
   process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lorre-blocks",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Add lorre-blocks components to your project by copying their source in.",
   "type": "module",
   "bin": {
@@ -9,10 +9,6 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch"
-  },
   "keywords": [
     "cli",
     "components",
@@ -33,11 +29,20 @@
   "dependencies": {
     "@clack/prompts": "^0.9.1",
     "commander": "^13.0.0",
+    "diff": "^9.0.0",
     "picocolors": "^1.1.1"
   },
   "devDependencies": {
+    "@types/diff": "^7.0.0",
     "@types/node": "^22.10.5",
     "tsup": "^8.3.5",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.2",
+    "vitest": "^4.1.10"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
   }
-}
+}