@mahiraltinkaya/me-ui 0.1.0

package/src/manifest.js

@@ -0,0 +1,58 @@
+/** The shipped item catalogue and its dependency graph. */
+
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+export const packageRoot = dirname(dirname(fileURLToPath(import.meta.url)));
+export const registryDir = join(packageRoot, "registry");
+
+export const manifest = JSON.parse(readFileSync(join(packageRoot, "registry.json"), "utf8"));
+
+const byName = new Map(manifest.items.map((item) => [item.name, item]));
+
+export const itemNames = manifest.items.map((item) => item.name);
+
+/**
+ * Flattens the requested names into the full set of items to install, with each
+ * dependency ordered ahead of whatever asked for it. Cycles resolve rather than
+ * hang: a name already being visited is treated as satisfied.
+ */
+export function resolveItems(names) {
+  const ordered = [];
+  const settled = new Set();
+  const visiting = new Set();
+
+  const visit = (name) => {
+    if (settled.has(name) || visiting.has(name)) return;
+
+    const item = byName.get(name);
+    if (!item) throw new Error(`Unknown item "${name}". Run \`me-ui list\` to see what exists.`);
+
+    visiting.add(name);
+    for (const dependency of item.registryDependencies ?? []) visit(dependency);
+    visiting.delete(name);
+
+    settled.add(name);
+    ordered.push(item);
+  };
+
+  names.forEach(visit);
+  return ordered;
+}
+
+/** npm packages the given items need, deduplicated and in install order. */
+export function npmDependenciesOf(items) {
+  return [...new Set(items.flatMap((item) => item.dependencies ?? []))];
+}
+
+/** Merges every item's CSS variables into one `{ theme, light }` block. */
+export function cssVarsOf(items) {
+  const merged = { theme: {}, light: {} };
+  for (const item of items) {
+    for (const scope of ["theme", "light"]) {
+      Object.assign(merged[scope], item.cssVars?.[scope] ?? {});
+    }
+  }
+  return merged;
+}

package/src/paths.js

@@ -0,0 +1,65 @@
+/**
+ * Maps the registry's own layout onto the target project's.
+ *
+ * Registry paths mirror the `@/` import they resolve to — `components/ui/input.tsx`
+ * is `@/components/ui/input` — so one prefix table drives both where a file lands
+ * and how the files importing it are rewritten.
+ */
+
+import { join } from "node:path";
+
+// Longest prefix first: `components/ui` must win over `components`.
+const ROOTS = [
+  { prefix: "components/ui", key: "ui" },
+  { prefix: "components", key: "components" },
+  { prefix: "lib", key: "lib" },
+  { prefix: "hooks", key: "hooks" },
+];
+
+function split(registryPath) {
+  const root = ROOTS.find(
+    ({ prefix }) => registryPath === prefix || registryPath.startsWith(`${prefix}/`),
+  );
+  if (!root) throw new Error(`Registry path "${registryPath}" is outside every known root.`);
+  return { key: root.key, rest: registryPath.slice(root.prefix.length).replace(/^\//, "") };
+}
+
+/**
+ * Absolute path the file should be written to. A `target` pins the file to a
+ * fixed spot relative to the project root — that is how assets reach `public/`,
+ * which has no alias and no alternative location.
+ */
+export function targetPathOf(file, project) {
+  if (file.target) return join(project.root, file.target);
+  const { key, rest } = split(file.path);
+  return join(project.directories[key], rest);
+}
+
+/** Path shown to the user — relative, with forward slashes. */
+export function displayPathOf(file, project) {
+  return targetPathOf(file, project)
+    .slice(project.root.length + 1)
+    .replaceAll("\\", "/");
+}
+
+const KEY_BY_PREFIX = new Map(ROOTS.map(({ prefix, key }) => [prefix, key]));
+
+// One alternation, ordered longest-first, so each specifier is rewritten exactly
+// once. Rewriting root by root would let a later root match an alias an earlier
+// one had just produced.
+const IMPORT_PATTERN = new RegExp(
+  `(["'])@/(${ROOTS.map(({ prefix }) => prefix).join("|")})(?=[/"'])`,
+  "g",
+);
+
+/**
+ * Rewrites `@/…` imports to the target project's aliases. Only the roots above
+ * are touched, so a project's own `@/utils` or `@/features` imports — should a
+ * component ever gain one — are left exactly as they are.
+ */
+export function rewriteImports(content, project) {
+  return content.replace(
+    IMPORT_PATTERN,
+    (_match, quote, prefix) => `${quote}${project.aliases[KEY_BY_PREFIX.get(prefix)]}`,
+  );
+}

package/src/project.js

@@ -0,0 +1,100 @@
+/**
+ * Reads whatever the target project already tells us about itself.
+ *
+ * A `components.json` is honoured when present — most projects that would want
+ * these components have one, and matching its aliases means the files land where
+ * the rest of that project's UI already lives. Everything else is inferred.
+ */
+
+import { existsSync, readFileSync } from "node:fs";
+import { isAbsolute, join, resolve } from "node:path";
+
+import { parseJsonc } from "./jsonc.js";
+
+const DEFAULT_ALIASES = {
+  ui: "@/components/ui",
+  components: "@/components",
+  lib: "@/lib",
+  hooks: "@/hooks",
+};
+
+const CSS_CANDIDATES = [
+  "src/app/globals.css",
+  "app/globals.css",
+  "src/styles/globals.css",
+  "styles/globals.css",
+  "src/index.css",
+  "src/app.css",
+];
+
+function readJson(path) {
+  if (!existsSync(path)) return undefined;
+  try {
+    return parseJsonc(readFileSync(path, "utf8"));
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Turns an alias like `@/components/ui` into a directory, by running it through
+ * the project's `tsconfig` paths. Falls back to the `src/` convention, which is
+ * what the mapping almost always says anyway.
+ */
+function createAliasResolver(cwd) {
+  const tsconfig = readJson(join(cwd, "tsconfig.json")) ?? readJson(join(cwd, "jsconfig.json"));
+  const baseUrl = tsconfig?.compilerOptions?.baseUrl ?? ".";
+  const paths = tsconfig?.compilerOptions?.paths ?? {};
+
+  const wildcards = Object.entries(paths)
+    .filter(([pattern, targets]) => pattern.endsWith("/*") && targets?.[0]?.endsWith("/*"))
+    .map(([pattern, targets]) => [pattern.slice(0, -1), targets[0].slice(0, -1)])
+    .sort(([a], [b]) => b.length - a.length);
+
+  const fallbackRoot = existsSync(join(cwd, "src")) ? "src" : ".";
+
+  return (alias) => {
+    for (const [from, to] of wildcards) {
+      if (alias.startsWith(from)) return resolve(cwd, baseUrl, to + alias.slice(from.length));
+    }
+    return resolve(cwd, fallbackRoot, alias.replace(/^@\//, ""));
+  };
+}
+
+function findCssFile(cwd, configured) {
+  if (configured) {
+    const path = isAbsolute(configured) ? configured : join(cwd, configured);
+    if (existsSync(path)) return path;
+  }
+  const found = CSS_CANDIDATES.map((candidate) => join(cwd, candidate)).find((path) =>
+    existsSync(path),
+  );
+  return found;
+}
+
+export function loadProject(cwd) {
+  const root = resolve(cwd);
+  if (!existsSync(join(root, "package.json"))) {
+    throw new Error(`No package.json in ${root}. Point --cwd at a project directory.`);
+  }
+
+  const componentsJson = readJson(join(root, "components.json"));
+  const aliases = { ...DEFAULT_ALIASES, ...(componentsJson?.aliases ?? {}) };
+  const resolveAlias = createAliasResolver(root);
+  const packageJson = readJson(join(root, "package.json")) ?? {};
+
+  return {
+    root,
+    aliases,
+    directories: Object.fromEntries(
+      Object.entries(aliases).map(([key, alias]) => [key, resolveAlias(alias)]),
+    ),
+    cssFile: findCssFile(root, componentsJson?.tailwind?.css),
+    installedDependencies: {
+      ...(packageJson.dependencies ?? {}),
+      ...(packageJson.devDependencies ?? {}),
+      ...(packageJson.peerDependencies ?? {}),
+    },
+    usesComponentsJson: Boolean(componentsJson),
+  };
+}