@seed-design/cli 0.0.0-alpha

package/README.md

@@ -0,0 +1,7 @@
+# @seed-design/cli
+
+### How to test
+
+- Run `yarn dev` in `@seed-design/component-docs` (snippet download)
+- Run `yarn dev` here (watch mode)
+- You can test `yarn seed-design <command>` in `@seed-design/example/cli` terminal

package/bin/index.mjs

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+import{cosmiconfig as Z}from"cosmiconfig";import T from"path";import{z as u}from"zod";var $="seed-design",ee=Z($,{searchPlaces:[`${$}.json`]}),k=u.object({$schema:u.string().optional(),rsc:u.coerce.boolean().default(!1),tsx:u.coerce.boolean().default(!0),css:u.coerce.boolean().default(!0),path:u.string()}).strict(),te=k.extend({resolvedUIPaths:u.string()});async function O(e){let t=await ne(e);return t?await oe(e,t):null}async function oe(e,t){let n=T.resolve(e,t.path);return te.parse({...t,resolvedUIPaths:T.join(n,"ui")})}async function ne(e){try{let t=await ee.search(e);return t?k.parse(t.config):null}catch(t){throw console.log(t),new Error(`Invalid configuration found in ${e}/seed-design.json.`)}}import{z as s}from"zod";var A=s.object({name:s.string(),description:s.string().optional(),dependencies:s.array(s.string()).optional(),devDependencies:s.array(s.string()).optional(),innerDependencies:s.array(s.string()).optional(),snippets:s.array(s.string()),type:s.enum(["component"])}),E=s.array(A),re=A.omit({snippets:!0}),se=re.extend({registries:s.array(s.object({name:s.string(),content:s.string()}))}),De=s.array(se);var I="https://component-seed.design.io";async function M(e){try{return await Promise.all(e.map(async n=>await(await fetch(`${I}/registry/component/${n}.json`)).json()))}catch(t){throw console.log(t),new Error(`Failed to fetch registry from ${I}.`)}}async function D(){try{let[e]=await M(["index"]);return E.parse(e)}catch(e){throw console.log(e),new Error(`Failed to fetch components from ${I}.`)}}import{detect as ae}from"@antfu/ni";async function F(e){let t=await ae({programmatic:!0,cwd:e});return t==="yarn@berry"?"yarn":t==="pnpm@6"?"pnpm":t==="bun"?"bun":t??"npm"}import{promises as le}from"fs";import{tmpdir as fe}from"os";import J from"path";import{transformFromAstSync as ie}from"@babel/core";import ce from"@babel/plugin-transform-typescript";import*as v from"recast";import{parse as pe}from"@babel/parser";var me={sourceType:"module",allowImportExportEverywhere:!0,allowReturnOutsideFunction:!0,startLine:1,tokens:!0,plugins:["asyncGenerators","bigInt","classPrivateMethods","classPrivateProperties","classProperties","classStaticBlock","decimal","decorators-legacy","doExpressions","dynamicImport","exportDefaultFrom","exportNamespaceFrom","functionBind","functionSent","importAssertions","importMeta","nullishCoalescingOperator","numericSeparator","objectRestSpread","optionalCatchBinding","optionalChaining",["pipelineOperator",{proposal:"minimal"}],["recordAndTuple",{syntaxType:"hash"}],"throwExpressions","topLevelAwait","v8intrinsic","typescript","jsx"]},z=async({sourceFile:e,config:t})=>{let n=e.getFullText();if(t.tsx)return n;let r=v.parse(n,{parser:{parse:c=>pe(c,me)}}),o=ie(r,n,{cloneInputAst:!1,code:!1,ast:!0,plugins:[ce],configFile:!1});if(!o||!o.ast)throw new Error("Failed to transform JSX");return v.print(o.ast).code};import{SyntaxKind as de}from"ts-morph";var N=async({sourceFile:e,config:t})=>{if(t.rsc)return e;let n=e.getFirstChildByKind(de.ExpressionStatement);return n?.getText()==='"use client";'&&n.remove(),e};var W=async({sourceFile:e,config:t})=>{if(t.css)return e;let r=e.getImportDeclarations().filter(o=>o.getModuleSpecifierValue().endsWith(".css"));for(let o of r)o.remove();return e};import{Project as ge,ScriptKind as ue}from"ts-morph";var he=[N,W],ye=new ge({compilerOptions:{}});async function xe(e){let t=await le.mkdtemp(J.join(fe(),"seed-deisgn-"));return J.join(t,e)}async function V(e){let t=await xe(e.filename),n=ye.createSourceFile(t,e.raw,{scriptKind:ue.TSX});for(let r of he)r({sourceFile:n,...e});return await z({sourceFile:n,...e})}import*as a from"@clack/prompts";import{execa as B}from"execa";import P from"fs-extra";import K from"path";import j from"picocolors";import{z as w}from"zod";function U(e,t){let n=new Set;function r(o){if(n.has(o))return;n.add(o);let c=t.find(d=>d.name===o);if(c&&c.innerDependencies)for(let d of c.innerDependencies)r(d)}for(let o of e)r(o);return Array.from(n)}var we=w.object({components:w.array(w.string()).optional(),cwd:w.string(),all:w.boolean()}),L=e=>{e.command("add [...components]","add component").option("-a, --all","Add all components",{default:!1}).option("-c, --cwd <cwd>","the working directory. defaults to the current directory.",{default:process.cwd()}).example("seed-design add box-button").example("seed-design add alert-dialog").action(async(t,n)=>{let r=we.parse({components:t,...n}),o=i=>j.cyan(i),c=r.cwd;P.existsSync(c)||(a.log.error(`The path ${c} does not exist. Please try again.`),process.exit(1));let d=await D(),f=r.all?d.map(i=>i.name):r.components;if(!r.components?.length&&!r.all){let i=await a.multiselect({message:"Select all components to add",options:d.map(l=>({label:l.name,value:l.name,hint:l.description}))});a.isCancel(i)&&(a.log.error("Aborted."),process.exit(0)),f=i}f?.length||(a.log.error("No components found."),process.exit(0));let y=U(f,d),S=y.filter(i=>!f.includes(i)),x=await O(c),H=await M(y);a.log.message(`Selection: ${o(f.join(", "))}`),S.length&&a.log.message(`Inner Dependencies: ${o(S.join(", "))} will be also added.`);for(let i of H){for(let m of i.registries){let g=x.resolvedUIPaths;P.existsSync(g)||await P.mkdir(g,{recursive:!0});let h=K.resolve(g,m.name),Q=await V({filename:m.name,config:x,raw:m.content});x.tsx||(h=h.replace(/\.tsx$/,".jsx"),h=h.replace(/\.ts$/,".js")),await P.writeFile(h,Q);let Y=K.relative(c,h);a.log.info(`Added ${o(m.name)} to ${o(Y)}`)}let l=await F(c),{start:b,stop:R}=a.spinner();if(i.dependencies?.length){b(j.gray("Installing dependencies"));let m=await B(l,[l==="npm"?"install":"add",...i.dependencies],{cwd:c});if(m.failed)console.error(m.all),process.exit(1);else{for(let g of i.dependencies)a.log.info(`- ${g}`);R("Dependencies installed.")}}if(i.devDependencies?.length){b(j.gray("Installing devDependencies"));let m=await B(l,[l==="npm"?"install":"add","-D",...i.devDependencies],{cwd:c});if(m.failed)console.error(m.all),process.exit(1);else{for(let g of i.devDependencies)a.log.info(`- ${g}`);R("Dependencies installed.")}}}a.outro("Components added.")})};import Ce from"findup-sync";import Se from"fs-extra";var ve="package.json";function Pe(){let e=Ce(ve);if(!e)throw new Error("No package.json file found in the project.");return e}function _(){return Se.readJSONSync(Pe())}import{cac as be}from"cac";import*as p from"@clack/prompts";import Ie from"fs-extra";import G from"path";import Me from"picocolors";import{z as X}from"zod";var je=X.object({cwd:X.string()}),q=e=>{e.command("init","initialize seed-design.json").option("-c, --cwd <cwd>","the working directory. defaults to the current directory.",{default:process.cwd()}).action(async t=>{let n=je.parse({...t}),r=x=>Me.cyan(x),o=await p.group({tsx:()=>p.confirm({message:`Would you like to use ${r("TypeScript")} (recommended)?`,initialValue:!0}),rsc:()=>p.confirm({message:`Are you using ${r("React Server Components")}?`,initialValue:!1}),css:()=>p.confirm({message:`Would you like to use ${r("CSS Modules")}? (If true, CSS import will be added in components)`,initialValue:!0}),path:()=>p.text({message:`Enter the path to your ${r("seed-design directory")}`,initialValue:"./seed-design",defaultValue:"./seed-design",placeholder:"./seed-design"})},{onCancel:()=>{p.cancel("Operation cancelled."),process.exit(0)}}),c={rsc:o.rsc,tsx:o.tsx,css:o.css,path:o.path},{start:d,stop:f}=p.spinner();d("Writing seed-design.json...");let y=G.resolve(n.cwd,"seed-design.json");await Ie.writeFile(y,`${JSON.stringify(c,null,2)}
+`,"utf-8");let S=G.relative(process.cwd(),y);f(`seed-design.json written to ${r(S)}`)})};var Re="seed-design",C=be(Re);async function Te(){let e=_();L(C),q(C),C.version(e.version||"1.0.0","-v, --version"),C.help(),C.parse()}Te();

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@seed-design/cli",
+  "version": "0.0.0-alpha",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/daangn/sprout",
+    "directory": "packages/cli"
+  },
+  "license": "MIT",
+  "bin": {
+    "seed-design": "./bin/index.mjs"
+  },
+  "files": [
+    "bin",
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "ENV=prod node ./build.mjs",
+    "dev": "ENV=dev node ./dev.mjs",
+    "test": "yarn vitest"
+  },
+  "dependencies": {
+    "@antfu/ni": "^0.22.0",
+    "@babel/core": "^7.24.9",
+    "@babel/parser": "^7.24.8",
+    "@babel/plugin-transform-typescript": "^7.24.8",
+    "@clack/prompts": "^0.7.0",
+    "cac": "^6.7.14",
+    "cosmiconfig": "^9.0.0",
+    "execa": "^9.3.0",
+    "findup-sync": "^5.0.0",
+    "fs-extra": "^11.2.0",
+    "mktemp": "^1.0.1",
+    "picocolors": "^1.0.1",
+    "recast": "^0.23.9",
+    "ts-morph": "^23.0.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/babel__core": "^7.20.5",
+    "@types/fs-extra": "^11.0.4",
+    "esbuild": "^0.19.3",
+    "type-fest": "^4.23.0",
+    "typescript": "^5.4.5",
+    "ultra-runner": "^3.10.5",
+    "vitest": "^2.0.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "ultra": {
+    "concurrent": [
+      "dev",
+      "build"
+    ]
+  }
+}

package/src/commands/add.ts

@@ -0,0 +1,173 @@
+import { getConfig } from "@/src/utils/get-config";
+import { fetchComponentMetadatas, getMetadataIndex } from "@/src/utils/get-metadata";
+import { getPackageManager } from "@/src/utils/get-package-manager";
+import { transform } from "@/src/utils/transformers";
+import * as p from "@clack/prompts";
+import { execa } from "execa";
+import fs from "fs-extra";
+import path from "path";
+import color from "picocolors";
+import { z } from "zod";
+
+import type { CAC } from "cac";
+import { addRelativeComponents } from "../utils/add-relative-components";
+
+const addOptionsSchema = z.object({
+  components: z.array(z.string()).optional(),
+  cwd: z.string(),
+  all: z.boolean(),
+  // yes: z.boolean(),
+  // overwrite: z.boolean(),
+  // path: z.string().optional(),
+});
+
+export const addCommand = (cli: CAC) => {
+  cli
+    .command("add [...components]", "add component")
+    .option("-a, --all", "Add all components", {
+      default: false,
+    })
+    .option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.", {
+      default: process.cwd(),
+    })
+    .example("seed-design add box-button")
+    .example("seed-design add alert-dialog")
+    .action(async (components, opts) => {
+      const options = addOptionsSchema.parse({
+        components,
+        ...opts,
+      });
+      const highlight = (text: string) => color.cyan(text);
+      const cwd = options.cwd;
+
+      if (!fs.existsSync(cwd)) {
+        p.log.error(`The path ${cwd} does not exist. Please try again.`);
+        process.exit(1);
+      }
+
+      const metadataIndex = await getMetadataIndex();
+
+      let selectedComponents: string[] = options.all
+        ? metadataIndex.map((meatadata) => meatadata.name)
+        : options.components;
+
+      if (!options.components?.length && !options.all) {
+        const selects = await p.multiselect<
+          { label: string; value: string; hint: string }[],
+          string
+        >({
+          message: "Select all components to add",
+          options: metadataIndex.map((metadata) => {
+            return {
+              label: metadata.name,
+              value: metadata.name,
+              hint: metadata.description,
+            };
+          }),
+        });
+
+        if (p.isCancel(selects)) {
+          p.log.error("Aborted.");
+          process.exit(0);
+        }
+
+        selectedComponents = selects as string[];
+      }
+
+      if (!selectedComponents?.length) {
+        p.log.error("No components found.");
+        process.exit(0);
+      }
+
+      const allComponents = addRelativeComponents(selectedComponents, metadataIndex);
+      const addedComponents = allComponents.filter((c) => !selectedComponents.includes(c));
+      const config = await getConfig(cwd);
+      const metadatas = await fetchComponentMetadatas(allComponents);
+
+      p.log.message(`Selection: ${highlight(selectedComponents.join(", "))}`);
+      if (addedComponents.length) {
+        p.log.message(
+          `Inner Dependencies: ${highlight(addedComponents.join(", "))} will be also added.`,
+        );
+      }
+
+      for (const metadata of metadatas) {
+        for (const registry of metadata.registries) {
+          const UIFolderPath = config.resolvedUIPaths;
+
+          if (!fs.existsSync(UIFolderPath)) {
+            await fs.mkdir(UIFolderPath, { recursive: true });
+          }
+
+          let filePath = path.resolve(UIFolderPath, registry.name);
+
+          const content = await transform({
+            filename: registry.name,
+            config,
+            raw: registry.content,
+          });
+
+          if (!config.tsx) {
+            filePath = filePath.replace(/\.tsx$/, ".jsx");
+            filePath = filePath.replace(/\.ts$/, ".js");
+          }
+
+          await fs.writeFile(filePath, content);
+          const relativePath = path.relative(cwd, filePath);
+          p.log.info(`Added ${highlight(registry.name)} to ${highlight(relativePath)}`);
+        }
+
+        const packageManager = await getPackageManager(cwd);
+
+        const { start, stop } = p.spinner();
+
+        // Install dependencies.
+        if (metadata.dependencies?.length) {
+          start(color.gray("Installing dependencies"));
+
+          const result = await execa(
+            packageManager,
+            [packageManager === "npm" ? "install" : "add", ...metadata.dependencies],
+            {
+              cwd,
+            },
+          );
+
+          if (result.failed) {
+            console.error(result.all);
+            process.exit(1);
+          } else {
+            for (const deps of metadata.dependencies) {
+              p.log.info(`- ${deps}`);
+            }
+            stop("Dependencies installed.");
+          }
+        }
+
+        // Install devDependencies.
+        if (metadata.devDependencies?.length) {
+          start(color.gray("Installing devDependencies"));
+
+          const result = await execa(
+            packageManager,
+            [packageManager === "npm" ? "install" : "add", "-D", ...metadata.devDependencies],
+            {
+              cwd,
+            },
+          );
+
+          if (result.failed) {
+            console.error(result.all);
+            process.exit(1);
+          } else {
+            for (const deps of metadata.devDependencies) {
+              p.log.info(`- ${deps}`);
+            }
+            stop("Dependencies installed.");
+          }
+        }
+      }
+
+      p.outro("Components added.");
+    });
+};

package/src/commands/init.ts

@@ -0,0 +1,72 @@
+import * as p from "@clack/prompts";
+import fs from "fs-extra";
+import path from "path";
+import color from "picocolors";
+import { z } from "zod";
+
+import type { RawConfig } from "@/src/utils/get-config";
+
+import type { CAC } from "cac";
+
+const initOptionsSchema = z.object({
+  cwd: z.string(),
+});
+
+export const initCommand = (cli: CAC) => {
+  cli
+    .command("init", "initialize seed-design.json")
+    .option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.", {
+      default: process.cwd(),
+    })
+    .action(async (opts) => {
+      const options = initOptionsSchema.parse({ ...opts });
+      const highlight = (text: string) => color.cyan(text);
+
+      const group = await p.group(
+        {
+          tsx: () =>
+            p.confirm({
+              message: `Would you like to use ${highlight("TypeScript")} (recommended)?`,
+              initialValue: true,
+            }),
+          rsc: () =>
+            p.confirm({
+              message: `Are you using ${highlight("React Server Components")}?`,
+              initialValue: false,
+            }),
+          css: () =>
+            p.confirm({
+              message: `Would you like to use ${highlight("CSS Modules")}? (If true, CSS import will be added in components)`,
+              initialValue: true,
+            }),
+          path: () =>
+            p.text({
+              message: `Enter the path to your ${highlight("seed-design directory")}`,
+              initialValue: "./seed-design",
+              defaultValue: "./seed-design",
+              placeholder: "./seed-design",
+            }),
+        },
+        {
+          onCancel: () => {
+            p.cancel("Operation cancelled.");
+            process.exit(0);
+          },
+        },
+      );
+
+      const config: RawConfig = {
+        rsc: group.rsc,
+        tsx: group.tsx,
+        css: group.css,
+        path: group.path,
+      };
+
+      const { start, stop } = p.spinner();
+      start("Writing seed-design.json...");
+      const targetPath = path.resolve(options.cwd, "seed-design.json");
+      await fs.writeFile(targetPath, `${JSON.stringify(config, null, 2)}\n`, "utf-8");
+      const relativePath = path.relative(process.cwd(), targetPath);
+      stop(`seed-design.json written to ${highlight(relativePath)}`);
+    });
+};

package/src/index.ts

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+import { addCommand } from "@/src/commands/add";
+import { getPackageInfo } from "@/src/utils/get-package-info";
+import { cac } from "cac";
+import { initCommand } from "./commands/init";
+
+const NAME = "seed-design";
+const CLI = cac(NAME);
+
+async function main() {
+  const packageInfo = getPackageInfo();
+
+  /* Commands */
+  addCommand(CLI);
+  initCommand(CLI);
+
+  CLI.version(packageInfo.version || "1.0.0", "-v, --version");
+  CLI.help();
+  CLI.parse();
+}
+
+main();

package/src/schema.ts

@@ -0,0 +1,34 @@
+import { z } from "zod";
+
+// TODO: Extract this to a shared package.
+// INFO: also used in component-docs
+export const componentMetadataSchema = z.object({
+  name: z.string(),
+  description: z.string().optional(),
+  dependencies: z.array(z.string()).optional(),
+  devDependencies: z.array(z.string()).optional(),
+  innerDependencies: z.array(z.string()).optional(),
+  snippets: z.array(z.string()),
+  type: z.enum(["component"]),
+});
+
+export const componentMetadataIndexSchema = z.array(componentMetadataSchema);
+
+const omittedComponentMetadataIndexSchema = componentMetadataSchema.omit({ snippets: true });
+
+export const componentMetadataSchemaWithRegistry = omittedComponentMetadataIndexSchema.extend({
+  registries: z.array(
+    z.object({
+      name: z.string(),
+      content: z.string(),
+    }),
+  ),
+});
+
+export const componentMetadataWithRegistrySchema = z.array(componentMetadataSchemaWithRegistry);
+
+export type ComponentMetadata = z.infer<typeof componentMetadataSchema>;
+export type ComponentMetadataIndex = z.infer<typeof componentMetadataIndexSchema>;
+export type ComponentMetadataWithRegistrySchema = z.infer<
+  typeof componentMetadataSchemaWithRegistry
+>;

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

@@ -0,0 +1,67 @@
+import { describe, expect, test } from "vitest";
+import { addRelativeComponents } from "../utils/add-relative-components";
+import type { ComponentMetadataIndex } from "@/src/schema";
+
+const config: ComponentMetadataIndex = [
+  {
+    name: "a",
+    snippets: ["a.tsx"],
+    type: "component",
+  },
+  {
+    name: "b",
+    innerDependencies: ["a"],
+    snippets: ["b.tsx"],
+    type: "component",
+  },
+  {
+    name: "c",
+    innerDependencies: ["b"],
+    snippets: ["c.tsx"],
+    type: "component",
+  },
+  {
+    name: "d",
+    innerDependencies: ["a", "b"],
+    snippets: ["d.tsx"],
+    type: "component",
+  },
+  {
+    name: "e",
+    innerDependencies: ["d"],
+    snippets: ["d.tsx"],
+    type: "component",
+  },
+];
+
+describe("addRelativeComponents", () => {
+  test("4 deps test", () => {
+    const userSelects = ["e"];
+    const result = addRelativeComponents(userSelects, config);
+    expect(result).toEqual(expect.arrayContaining(["a", "b", "d", "e"]));
+  });
+
+  test("3 deps test", () => {
+    const userSelects = ["d"];
+    const result = addRelativeComponents(userSelects, config);
+    expect(result).toEqual(expect.arrayContaining(["a", "b", "d"]));
+  });
+
+  test("3 deps test", () => {
+    const userSelects = ["c"];
+    const result = addRelativeComponents(userSelects, config);
+    expect(result).toEqual(expect.arrayContaining(["a", "b", "c"]));
+  });
+
+  test("2 deps test", () => {
+    const userSelects = ["b"];
+    const result = addRelativeComponents(userSelects, config);
+    expect(result).toEqual(expect.arrayContaining(["a", "b"]));
+  });
+
+  test("1 deps test", () => {
+    const userSelects = ["a"];
+    const result = addRelativeComponents(userSelects, config);
+    expect(result).toEqual(expect.arrayContaining(["a"]));
+  });
+});

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

@@ -0,0 +1,29 @@
+import type { ComponentMetadataIndex } from "@/src/schema";
+
+export function addRelativeComponents(
+  userSelects: string[],
+  metadataIndex: ComponentMetadataIndex,
+) {
+  const selectedComponents = new Set<string>();
+
+  function addSeedDependencies(componentName: string) {
+    if (selectedComponents.has(componentName)) return;
+
+    selectedComponents.add(componentName);
+
+    const component = metadataIndex.find((c) => c.name === componentName);
+    if (!component) return;
+
+    if (component.innerDependencies) {
+      for (const dep of component.innerDependencies) {
+        addSeedDependencies(dep);
+      }
+    }
+  }
+
+  for (const componentName of userSelects) {
+    addSeedDependencies(componentName);
+  }
+
+  return Array.from(selectedComponents);
+}

package/src/utils/get-config.ts

@@ -0,0 +1,61 @@
+import { cosmiconfig } from "cosmiconfig";
+import path from "path";
+import { z } from "zod";
+
+const MODULE_NAME = "seed-design";
+
+const explorer = cosmiconfig(MODULE_NAME, {
+  searchPlaces: [`${MODULE_NAME}.json`],
+});
+
+export const rawConfigSchema = z
+  .object({
+    $schema: z.string().optional(),
+    rsc: z.coerce.boolean().default(false),
+    tsx: z.coerce.boolean().default(true),
+    css: z.coerce.boolean().default(true),
+    path: z.string(),
+  })
+  .strict();
+
+export type RawConfig = z.infer<typeof rawConfigSchema>;
+
+export const configSchema = rawConfigSchema.extend({
+  resolvedUIPaths: z.string(),
+});
+
+export async function getConfig(cwd: string) {
+  const config = await getRawConfig(cwd);
+
+  if (!config) {
+    return null;
+  }
+
+  return await resolveConfigPaths(cwd, config);
+}
+
+export type Config = z.infer<typeof configSchema>;
+
+export async function resolveConfigPaths(cwd: string, config: RawConfig) {
+  const seedComponentRootPath = path.resolve(cwd, config.path);
+
+  return configSchema.parse({
+    ...config,
+    resolvedUIPaths: path.join(seedComponentRootPath, "ui"),
+  });
+}
+
+export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
+  try {
+    const configResult = await explorer.search(cwd);
+
+    if (!configResult) {
+      return null;
+    }
+
+    return rawConfigSchema.parse(configResult.config);
+  } catch (error) {
+    console.log(error);
+    throw new Error(`Invalid configuration found in ${cwd}/seed-design.json.`);
+  }
+}

package/src/utils/get-metadata.ts

@@ -0,0 +1,36 @@
+import {
+  componentMetadataIndexSchema,
+  type ComponentMetadataWithRegistrySchema,
+} from "@/src/schema";
+
+const BASE_URL =
+  process.env.NODE_ENV === "prod" ? "https://component-seed.design.io" : "http://localhost:3000";
+
+export async function fetchComponentMetadatas(
+  fileNames?: string[],
+): Promise<ComponentMetadataWithRegistrySchema[]> {
+  try {
+    const results = await Promise.all(
+      fileNames.map(async (fileName) => {
+        const response = await fetch(`${BASE_URL}/registry/component/${fileName}.json`);
+        return await response.json();
+      }),
+    );
+
+    return results;
+  } catch (error) {
+    console.log(error);
+    throw new Error(`Failed to fetch registry from ${BASE_URL}.`);
+  }
+}
+
+export async function getMetadataIndex() {
+  try {
+    const [result] = await fetchComponentMetadatas(["index"]);
+
+    return componentMetadataIndexSchema.parse(result);
+  } catch (error) {
+    console.log(error);
+    throw new Error(`Failed to fetch components from ${BASE_URL}.`);
+  }
+}

package/src/utils/get-package-info.ts

@@ -0,0 +1,17 @@
+import findup from "findup-sync";
+import fs from "fs-extra";
+import type { PackageJson } from "type-fest";
+
+const PACKAGE_JSON = "package.json";
+
+function getPackagePath() {
+  const packageJsonPath = findup(PACKAGE_JSON);
+  if (!packageJsonPath) {
+    throw new Error("No package.json file found in the project.");
+  }
+  return packageJsonPath;
+}
+
+export function getPackageInfo() {
+  return fs.readJSONSync(getPackagePath()) as PackageJson;
+}

package/src/utils/get-package-manager.ts

@@ -0,0 +1,13 @@
+import { detect } from "@antfu/ni";
+
+export async function getPackageManager(
+  targetDir: string,
+): Promise<"yarn" | "pnpm" | "bun" | "npm"> {
+  const packageManager = await detect({ programmatic: true, cwd: targetDir });
+
+  if (packageManager === "yarn@berry") return "yarn";
+  if (packageManager === "pnpm@6") return "pnpm";
+  if (packageManager === "bun") return "bun";
+
+  return packageManager ?? "npm";
+}

package/src/utils/transformers/index.ts

@@ -0,0 +1,51 @@
+import { promises as fs } from "fs";
+
+import { tmpdir } from "os";
+import path from "path";
+
+import { transformJsx } from "@/src/utils/transformers/transform-jsx";
+import { transformRsc } from "@/src/utils/transformers/transform-rsc";
+import { transformCSS } from "./transform-css";
+
+import { Project, ScriptKind, type SourceFile } from "ts-morph";
+
+import type { Config } from "@/src/utils/get-config";
+
+export type TransformOpts = {
+  filename: string;
+  raw: string;
+  config: Config;
+};
+
+export type Transformer<Output = SourceFile> = (
+  opts: TransformOpts & {
+    sourceFile: SourceFile;
+  },
+) => Promise<Output>;
+
+const transformers: Transformer[] = [transformRsc, transformCSS];
+
+const project = new Project({
+  compilerOptions: {},
+});
+
+async function createTempSourceFile(filename: string) {
+  const dir = await fs.mkdtemp(path.join(tmpdir(), "seed-deisgn-"));
+  return path.join(dir, filename);
+}
+
+export async function transform(opts: TransformOpts) {
+  const tempFile = await createTempSourceFile(opts.filename);
+  const sourceFile = project.createSourceFile(tempFile, opts.raw, {
+    scriptKind: ScriptKind.TSX,
+  });
+
+  for (const transformer of transformers) {
+    transformer({ sourceFile, ...opts });
+  }
+
+  return await transformJsx({
+    sourceFile,
+    ...opts,
+  });
+}

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

@@ -0,0 +1,16 @@
+import type { Transformer } from "@/src/utils/transformers";
+
+export const transformCSS: Transformer = async ({ sourceFile, config }) => {
+  if (config.css) {
+    return sourceFile;
+  }
+
+  const imports = sourceFile.getImportDeclarations();
+  const cssImports = imports.filter((i) => i.getModuleSpecifierValue().endsWith(".css"));
+
+  for (const cssImport of cssImports) {
+    cssImport.remove();
+  }
+
+  return sourceFile;
+};

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

@@ -0,0 +1,93 @@
+// @ts-ignore
+import { transformFromAstSync } from "@babel/core";
+import transformTypescript from "@babel/plugin-transform-typescript";
+import * as recast from "recast";
+
+import { type ParserOptions, parse } from "@babel/parser";
+import type { Transformer } from "@/src/utils/transformers";
+
+// TODO.
+// I'm using recast for the AST here.
+// Figure out if ts-morph AST is compatible with Babel.
+
+// This is a copy of the babel options from recast/parser.
+// The goal here is to tolerate as much syntax as possible.
+// We want to be able to parse any valid tsx code.
+// See https://github.com/benjamn/recast/blob/master/parsers/_babel_options.ts.
+const PARSE_OPTIONS: ParserOptions = {
+  sourceType: "module",
+  allowImportExportEverywhere: true,
+  allowReturnOutsideFunction: true,
+  startLine: 1,
+  tokens: true,
+  plugins: [
+    "asyncGenerators",
+    "bigInt",
+    "classPrivateMethods",
+    "classPrivateProperties",
+    "classProperties",
+    "classStaticBlock",
+    "decimal",
+    "decorators-legacy",
+    "doExpressions",
+    "dynamicImport",
+    "exportDefaultFrom",
+    "exportNamespaceFrom",
+    "functionBind",
+    "functionSent",
+    "importAssertions",
+    "importMeta",
+    "nullishCoalescingOperator",
+    "numericSeparator",
+    "objectRestSpread",
+    "optionalCatchBinding",
+    "optionalChaining",
+    [
+      "pipelineOperator",
+      {
+        proposal: "minimal",
+      },
+    ],
+    [
+      "recordAndTuple",
+      {
+        syntaxType: "hash",
+      },
+    ],
+    "throwExpressions",
+    "topLevelAwait",
+    "v8intrinsic",
+    "typescript",
+    "jsx",
+  ],
+};
+
+export const transformJsx: Transformer<string> = async ({ sourceFile, config }) => {
+  const output = sourceFile.getFullText();
+
+  if (config.tsx) {
+    return output;
+  }
+
+  const ast = recast.parse(output, {
+    parser: {
+      parse: (code: string) => {
+        return parse(code, PARSE_OPTIONS);
+      },
+    },
+  });
+
+  const result = transformFromAstSync(ast, output, {
+    cloneInputAst: false,
+    code: false,
+    ast: true,
+    plugins: [transformTypescript],
+    configFile: false,
+  });
+
+  if (!result || !result.ast) {
+    throw new Error("Failed to transform JSX");
+  }
+
+  return recast.print(result.ast).code;
+};

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

@@ -0,0 +1,17 @@
+import { SyntaxKind } from "ts-morph";
+
+import type { Transformer } from "@/src/utils/transformers";
+
+export const transformRsc: Transformer = async ({ sourceFile, config }) => {
+  if (config.rsc) {
+    return sourceFile;
+  }
+
+  // Remove "use client" from the top of the file.
+  const first = sourceFile.getFirstChildByKind(SyntaxKind.ExpressionStatement);
+  if (first?.getText() === `"use client";`) {
+    first.remove();
+  }
+
+  return sourceFile;
+};