@seed-design/cli 0.0.2 → 1.0.0

package/src/utils/fetch.ts

@@ -0,0 +1,122 @@
+import type { PublicRegistry } from "@/src/schema";
+
+import * as p from "@clack/prompts";
+import {
+  type PublicRegistryItem,
+  publicRegistrySchema,
+  publicRegistryItemSchema,
+  type PublicAvailableRegistries,
+  publicAvailableRegistriesSchema,
+} from "@/src/schema";
+
+export async function fetchAvailableRegistries({
+  baseUrl,
+}: {
+  baseUrl: string;
+}): Promise<PublicAvailableRegistries> {
+  // TODO: make this file public
+  const response = await fetch(`${baseUrl}/__registry__/index.json`);
+
+  if (!response.ok)
+    throw new Error(`Failed to fetch registries: ${response.status} ${response.statusText}`);
+
+  const registries = await response.json();
+  const {
+    success,
+    data: parsedRegistries,
+    error,
+  } = publicAvailableRegistriesSchema.safeParse(registries);
+
+  if (!success) throw new Error(`Failed to parse registries: ${error?.message}`);
+
+  return parsedRegistries;
+}
+
+export async function fetchRegistry({
+  baseUrl,
+  registryId,
+}: {
+  baseUrl: string;
+  registryId: PublicRegistry["id"];
+}): Promise<PublicRegistry> {
+  const response = await fetch(`${baseUrl}/__registry__/${registryId}/index.json`);
+
+  if (!response.ok)
+    throw new Error(
+      `Failed to fetch ${registryId} registry: ${response.status} ${response.statusText}`,
+    );
+
+  const index = await response.json();
+  const { success, data: parsedIndex, error } = publicRegistrySchema.safeParse(index);
+
+  if (!success) throw new Error(`Failed to parse ${registryId} registry: ${error?.message}`);
+
+  return parsedIndex;
+}
+
+async function fetchRegistryItem({
+  baseUrl,
+  registryId,
+  registryItemId,
+}: {
+  baseUrl: string;
+  registryId: PublicRegistry["id"];
+  registryItemId: PublicRegistryItem["id"];
+}): Promise<PublicRegistryItem> {
+  const response = await fetch(`${baseUrl}/__registry__/${registryId}/${registryItemId}.json`);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${registryItemId}: ${response.status} ${response.statusText}`);
+  }
+
+  const item = await response.json();
+  const { success, data: parsedItem, error } = publicRegistryItemSchema.safeParse(item);
+
+  if (!success) {
+    throw new Error(`Failed to parse ${registryItemId}: ${error?.message}`);
+  }
+
+  return parsedItem;
+}
+
+export async function fetchRegistryItems({
+  baseUrl,
+  registryId,
+  registryItemIds,
+}: {
+  baseUrl: string;
+  registryId: PublicRegistry["id"];
+  registryItemIds: PublicRegistryItem["id"][];
+}): Promise<PublicRegistryItem[]> {
+  return await Promise.all(
+    registryItemIds.map(async (itemId) => {
+      try {
+        return await fetchRegistryItem({ baseUrl, registryId, registryItemId: itemId });
+      } catch (error) {
+        // show available registry items in the registry
+        const response = await fetch(`${baseUrl}/__registry__/${registryId}/index.json`);
+
+        if (!response.ok)
+          throw new Error(
+            `${registryId} 레지스트리를 가져오지 못했어요: ${response.status} ${response.statusText}`,
+          );
+
+        const index = await response.json();
+        const { success, data: parsedIndex } = publicRegistrySchema.safeParse(index);
+
+        // fatal, should not happen
+        if (!success) throw new Error(`Failed to parse registry index for ${registryId}`);
+
+        p.log.error(`${itemId} 스니펫이 ${registryId} 레지스트리에 없어요.`);
+        p.log.info(
+          `${registryId} 레지스트리에 존재하는 스니펫:\n${parsedIndex.items
+            .map((component) => component.id)
+            .join("\n")}`,
+        );
+
+        // so fetchRegistryItems also can throw
+        throw error;
+      }
+    }),
+  );
+}

package/src/utils/get-config.ts

@@ -1,8 +1,6 @@
 import * as p from "@clack/prompts";
 import { cosmiconfig } from "cosmiconfig";
 import { execa } from "execa";
-import fs from "fs";
-import path from "path";
 import { z } from "zod";
 import { highlight } from "./color";
 import { getPackageManager } from "./get-package-manager";
@@ -13,7 +11,7 @@ const explorer = cosmiconfig(MODULE_NAME, {
   searchPlaces: [`${MODULE_NAME}.json`],
 });
 
-export const rawConfigSchema = z
+export const configSchema = z
   .object({
     $schema: z.string().optional(),
     rsc: z.coerce.boolean().default(false),
@@ -22,65 +20,33 @@ export const rawConfigSchema = z
   })
   .strict();
 
-export type RawConfig = z.infer<typeof rawConfigSchema>;
-
-export const configSchema = rawConfigSchema.extend({
-  resolvedUIPaths: z.string(),
-  resolvedLibPaths: z.string(),
-});
+export type Config = z.infer<typeof configSchema>;
 
 export async function getConfig(cwd: string) {
   const config = await getRawConfig(cwd);
+  if (!config) return null;
 
-  if (!config) {
-    return null;
-  }
-
-  return await resolveConfigPaths(cwd, config);
+  return configSchema.parse(config);
 }
 
-export type Config = z.infer<typeof configSchema>;
-
-export async function resolveConfigPaths(cwd: string, config: RawConfig) {
-  const seedComponentRootPath = path.resolve(cwd, config.path);
-
-  if (!fs.existsSync(seedComponentRootPath)) {
-    fs.mkdirSync(seedComponentRootPath, { recursive: true });
-  }
-
-  const resolvedUIPaths = path.join(seedComponentRootPath, "ui");
-  const resolvedLibPaths = path.join(seedComponentRootPath, "lib");
-
-  if (!fs.existsSync(resolvedUIPaths)) {
-    fs.mkdirSync(resolvedUIPaths, { recursive: true });
-  }
-
-  if (!fs.existsSync(resolvedLibPaths)) {
-    fs.mkdirSync(resolvedLibPaths, { recursive: true });
-  }
-
-  return configSchema.parse({
-    ...config,
-    resolvedUIPaths,
-    resolvedLibPaths,
-  });
-}
-
-export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
+export async function getRawConfig(cwd: string): Promise<Config | null> {
   try {
     const configResult = await explorer.search(cwd);
-    return rawConfigSchema.parse(configResult.config);
+    return configSchema.parse(configResult.config);
   } catch {
     p.log.error("프로젝트 루트 경로에 `seed-design.json` 파일이 없어요.");
 
     const isConfirm = await p.confirm({ message: "seed-design.json 파일을 생성하시겠어요?" });
-    if (isConfirm === true) {
-      const packageManager = await getPackageManager(cwd);
-      await execa(packageManager, ["seed-design", "init", "--default"], { cwd });
-      p.log.message("seed-design.json 파일이 생성됐어요.");
-    } else {
+
+    if (!isConfirm) {
       p.outro(highlight("작업이 취소됐어요."));
       process.exit(1);
     }
+
+    const packageManager = await getPackageManager(cwd);
+
+    await execa(packageManager, ["seed-design", "init", "--default"], { cwd });
+
+    p.log.message("seed-design.json 파일이 생성됐어요.");
   }
 }

package/src/utils/install.ts

@@ -1,6 +1,5 @@
 import * as p from "@clack/prompts";
 import { execa } from "execa";
-import color from "picocolors";
 import { getPackageManager } from "./get-package-manager";
 import { getPackageInfo } from "./get-package-info";
 
@@ -18,20 +17,16 @@ export async function installDependencies({ cwd, deps, dev = false }: InstallDep
   // 이미 설치된 의존성 필터링
   const existingDeps = {
     ...packageInfo.dependencies,
-    ...packageInfo.devDependencies,
+    // ...packageInfo.devDependencies,
+    // commented out because stated dependencies should be installed as actual dependencies even though they are listed in devDependencies
   };
 
-  const depsToInstall = deps.filter((dep) => !existingDeps[dep]);
-  const filteredDeps = deps.filter((dep) => existingDeps[dep]);
+  const depsToInstall = new Set(deps.filter((dep) => !existingDeps[dep]));
+  const filteredDeps = new Set(deps.filter((dep) => existingDeps[dep]));
 
-  if (!depsToInstall.length) {
-    return {
-      installed: new Set(),
-      filtered: new Set(),
-    };
-  }
+  if (!depsToInstall.size) return { installed: new Set<string>(), filtered: depsToInstall };
 
-  start(color.gray("의존성 설치중..."));
+  start("의존성 설치중...");
 
   const isDev = dev ? "-D" : null;
   const addCommand = packageManager === "npm" ? "install" : "add";
@@ -44,7 +39,7 @@ export async function installDependencies({ cwd, deps, dev = false }: InstallDep
     process.exit(1);
   }
 
-  stop("의존성 설치 완료.");
+  stop("의존성 설치가 완료됐어요.");
 
   return {
     installed: depsToInstall,

package/src/utils/resolve-dependencies.ts

@@ -0,0 +1,77 @@
+import type { PublicRegistry, PublicRegistryItem } from "@/src/schema";
+
+export function resolveDependencies({
+  selectedItemKeys,
+  publicRegistries,
+}: {
+  /**
+   * @example ["breeze:animate-number", "ui:action-button"]
+   */
+  selectedItemKeys: string[];
+  publicRegistries: PublicRegistry[];
+}) {
+  const registryItemsToAdd: { registryId: string; items: PublicRegistry["items"] }[] = [];
+  const npmDependenciesToAdd = new Set<string>();
+
+  function collectRegistryItemsToAdd(registryId: string, item: PublicRegistryItem) {
+    const registryFoundToAdd = registryItemsToAdd.find((r) => r.registryId === registryId);
+
+    // if already added, skip
+    if (registryFoundToAdd?.items.some((i) => i.id === item.id)) return;
+
+    // Add the item to the list
+    if (registryFoundToAdd) {
+      registryFoundToAdd.items.push(item);
+    } else {
+      registryItemsToAdd.push({ registryId, items: [item] });
+    }
+
+    // process dependencies
+    if (item.dependencies?.length) {
+      for (const dep of item.dependencies) {
+        npmDependenciesToAdd.add(dep);
+      }
+    }
+
+    // process innerDependencies
+    if (item.innerDependencies?.length) {
+      for (const dependency of item.innerDependencies) {
+        for (const depItemId of dependency.itemIds) {
+          const depItem = publicRegistries
+            .find((r) => r.id === dependency.registryId)
+            ?.items.find((i) => i.id === depItemId);
+
+          // should not happen
+          if (!depItem)
+            throw new Error(`Cannot find dependency item: ${dependency.registryId}:${depItemId}`);
+
+          collectRegistryItemsToAdd(dependency.registryId, depItem);
+        }
+      }
+    }
+  }
+
+  for (const item of selectedItemKeys) {
+    const [registryId, ...rest] = item.split(":");
+    const itemId = rest.join(":");
+
+    if (!registryId || !itemId) {
+      throw new Error(`Invalid snippet format: "${item}"`);
+    }
+
+    const foundItem = publicRegistries
+      .find((r) => r.id === registryId)
+      ?.items.find((i) => i.id === itemId);
+
+    if (!foundItem) {
+      throw new Error(`Cannot find snippet: "${item}"`);
+    }
+
+    collectRegistryItemsToAdd(registryId, foundItem);
+  }
+
+  return {
+    registryItemsToAdd,
+    npmDependenciesToAdd,
+  };
+}

package/src/utils/transformers/index.ts

@@ -29,7 +29,8 @@ const project = new Project({
 });
 
 async function createTempSourceFile(filename: string) {
-  const dir = await fs.mkdtemp(path.join(tmpdir(), "seed-deisgn-"));
+  const dir = await fs.mkdtemp(path.join(tmpdir(), "seed-design-"));
+
   return path.join(dir, filename);
 }
 

package/src/utils/transformers/transform-jsx.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import { transformFromAstSync } from "@babel/core";
 import transformTypescript from "@babel/plugin-transform-typescript";
 import * as recast from "recast";

package/src/utils/transformers/transform-rsc.ts

@@ -8,10 +8,27 @@ export const transformRsc: Transformer = async ({ sourceFile, config }) => {
   }
 
   // Remove "use client" from the top of the file.
-  const first = sourceFile.getFirstChildByKind(SyntaxKind.ExpressionStatement);
-  if (first?.getText() === `"use client";`) {
-    first.remove();
-  }
+  // We need to be careful to only remove the directive itself, not any JSDoc comments
+
+  const firstExpressionStatement = sourceFile.getFirstChildByKind(SyntaxKind.ExpressionStatement);
+  if (!firstExpressionStatement) return sourceFile;
+
+  const expression = firstExpressionStatement.getExpression();
+  if (!expression) return sourceFile;
+
+  const expressionText = expression.getText().trim();
+
+  if (expressionText !== `"use client"` && expressionText !== `'use client'`) return sourceFile;
+
+  const expressionStatementText = firstExpressionStatement.getText();
+  const expressionStatementFullText = firstExpressionStatement.getFullText();
+
+  if (expressionStatementText.trim() === expressionStatementFullText.trim()) return sourceFile;
+
+  const triviaOnly = expressionStatementFullText.replace(expressionStatementText, "");
+  const cleanedTriviaOnly = triviaOnly.replace(/^\s*\n/, "").replace(/\n\s*$/, "");
+
+  firstExpressionStatement.replaceWithText(cleanedTriviaOnly);
 
   return sourceFile;
 };

package/src/utils/write.ts

@@ -0,0 +1,75 @@
+import { fetchRegistryItems } from "@/src/utils/fetch";
+import { transform } from "@/src/utils/transformers";
+import * as p from "@clack/prompts";
+import fs from "fs-extra";
+import path from "path";
+import { highlight } from "./color";
+import type { Config } from "@/src/utils/get-config";
+import type { PublicRegistry } from "@/src/schema";
+
+export async function writeRegistryItemSnippets({
+  registryItemsToAdd,
+  rootPath,
+  cwd,
+  baseUrl,
+  config,
+}: {
+  registryItemsToAdd: { registryId: string; items: PublicRegistry["items"] }[];
+  rootPath: string;
+  cwd: string;
+  baseUrl: string;
+  config: Config;
+}) {
+  const registryResult: { name: string; path: string }[] = [];
+
+  for (const { registryId, items } of registryItemsToAdd) {
+    const registryPath = path.join(rootPath, registryId);
+
+    fs.ensureDirSync(registryPath);
+
+    const registryItems = await fetchRegistryItems({
+      baseUrl,
+      registryId,
+      registryItemIds: items.map((i) => i.id),
+    });
+
+    for (const { id, snippets } of registryItems) {
+      const transformedSnippets = await Promise.all(
+        snippets.map(async (file) => {
+          const content = await transform({ filename: file.path, config, raw: file.content });
+
+          let filePath = path.join(registryPath, file.path);
+          if (!config.tsx) {
+            filePath = filePath.replace(/\.tsx$/, ".jsx");
+            filePath = filePath.replace(/\.ts$/, ".js");
+          }
+
+          return {
+            filePath,
+            content,
+            relativePath: path.relative(cwd, filePath),
+            name: `${registryId}:${id}`,
+          };
+        }),
+      );
+
+      await Promise.all(
+        transformedSnippets.map(async ({ filePath, content }) => {
+          await fs.ensureDir(path.dirname(filePath));
+          await fs.writeFile(filePath, content);
+        }),
+      );
+
+      const snippetResults = transformedSnippets.map(({ name, relativePath }) => ({
+        name,
+        path: relativePath,
+      }));
+
+      registryResult.push(...snippetResults);
+
+      p.log.success(
+        `${highlight(`${registryId}:${id}`)} 관련 스니펫 다운로드 완료: ${highlight(snippetResults.map((r) => r.path).join(", "))}`,
+      );
+    }
+  }
+}

package/src/test/add-relative-registries.test.ts

@@ -1,182 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { addRelativeRegistries } from "../utils/add-relative-registries";
-import type { RegistryLib, RegistryUI } from "@/src/schema";
-
-const libConfig: RegistryLib = [
-  {
-    name: "a",
-    files: ["a.tsx"],
-  },
-];
-
-const uiConfig: RegistryUI = [
-  {
-    name: "a",
-    files: ["a.tsx"],
-  },
-  {
-    name: "b",
-    innerDependencies: ["ui:a"],
-    files: ["b.tsx"],
-  },
-  {
-    name: "c",
-    innerDependencies: ["ui:b"],
-    files: ["c.tsx"],
-  },
-  {
-    name: "d",
-    innerDependencies: ["ui:a", "ui:b"],
-    files: ["d.tsx"],
-  },
-  {
-    name: "e",
-    innerDependencies: ["ui:d"],
-    files: ["e.tsx"],
-  },
-  {
-    name: "f",
-    innerDependencies: ["lib:a"],
-    files: ["f.tsx"],
-  },
-];
-
-describe("addRelativeRegistries", () => {
-  test("4 deps test", () => {
-    const userSelects = ["e"];
-    const result = addRelativeRegistries({
-      userSelects,
-      uiRegistryIndex: uiConfig,
-      libRegistryIndex: [],
-    });
-    expect(result).toEqual(
-      expect.arrayContaining([
-        {
-          type: "ui",
-          name: "e",
-        },
-        {
-          type: "ui",
-          name: "d",
-        },
-        {
-          type: "ui",
-          name: "a",
-        },
-        {
-          type: "ui",
-          name: "b",
-        },
-      ]),
-    );
-  });
-
-  test("3 deps test", () => {
-    const userSelects = ["d"];
-    const result = addRelativeRegistries({
-      userSelects,
-      uiRegistryIndex: uiConfig,
-      libRegistryIndex: [],
-    });
-    expect(result).toEqual(
-      expect.arrayContaining([
-        {
-          type: "ui",
-          name: "d",
-        },
-        {
-          type: "ui",
-          name: "a",
-        },
-        {
-          type: "ui",
-          name: "b",
-        },
-      ]),
-    );
-  });
-
-  test("3 deps test", () => {
-    const userSelects = ["c"];
-    const result = addRelativeRegistries({
-      userSelects,
-      uiRegistryIndex: uiConfig,
-      libRegistryIndex: [],
-    });
-    expect(result).toEqual(
-      expect.arrayContaining([
-        {
-          type: "ui",
-          name: "c",
-        },
-        {
-          type: "ui",
-          name: "b",
-        },
-        {
-          type: "ui",
-          name: "a",
-        },
-      ]),
-    );
-  });
-
-  test("2 deps test", () => {
-    const userSelects = ["b"];
-    const result = addRelativeRegistries({
-      userSelects,
-      uiRegistryIndex: uiConfig,
-      libRegistryIndex: [],
-    });
-    expect(result).toEqual(
-      expect.arrayContaining([
-        {
-          type: "ui",
-          name: "b",
-        },
-        {
-          type: "ui",
-          name: "a",
-        },
-      ]),
-    );
-  });
-
-  test("1 deps test", () => {
-    const userSelects = ["a"];
-    const result = addRelativeRegistries({
-      userSelects,
-      uiRegistryIndex: uiConfig,
-      libRegistryIndex: [],
-    });
-    expect(result).toEqual(
-      expect.arrayContaining([
-        {
-          type: "ui",
-          name: "a",
-        },
-      ]),
-    );
-  });
-
-  test("lib deps test", () => {
-    const userSelects = ["f"];
-    const result = addRelativeRegistries({
-      userSelects,
-      uiRegistryIndex: uiConfig,
-      libRegistryIndex: libConfig,
-    });
-    expect(result).toEqual(
-      expect.arrayContaining([
-        {
-          type: "ui",
-          name: "f",
-        },
-        {
-          type: "lib",
-          name: "a",
-        },
-      ]),
-    );
-  });
-});

package/src/utils/add-relative-registries.ts

@@ -1,43 +0,0 @@
-import type { RegistryLibMachineGenerated, RegistryUIMachineGenerated } from "@/src/schema";
-
-interface AddRelativeComponentsProps {
-  userSelects: string[];
-  uiRegistryIndex: RegistryUIMachineGenerated;
-  libRegistryIndex: RegistryLibMachineGenerated;
-}
-
-export function addRelativeRegistries({
-  userSelects,
-  uiRegistryIndex,
-  libRegistryIndex,
-}: AddRelativeComponentsProps) {
-  const selectedComponents: { type: "ui" | "lib"; name: string }[] = [];
-
-  function addSeedDependencies({
-    registryName,
-    type,
-  }: { registryName: string; type: "ui" | "lib" }) {
-    if (selectedComponents.some((c) => c.name === registryName && c.type === type)) return;
-
-    selectedComponents.push({ type, name: registryName });
-
-    const registry =
-      type === "ui"
-        ? uiRegistryIndex.find((c) => c.name === registryName)
-        : libRegistryIndex.find((c) => c.name === registryName);
-    if (!registry) return;
-
-    if (registry.innerDependencies) {
-      for (const dep of registry.innerDependencies) {
-        const [depType, depName] = dep.split(":");
-        addSeedDependencies({ registryName: depName, type: depType as "ui" | "lib" });
-      }
-    }
-  }
-
-  for (const registryName of userSelects) {
-    addSeedDependencies({ registryName, type: "ui" });
-  }
-
-  return Array.from(selectedComponents);
-}