@simplysm/sd-cli 13.0.0-beta.46 → 13.0.0-beta.47

package/src/utils/vite-config.ts

@@ -0,0 +1,184 @@
+import fs from "fs";
+import { createRequire } from "module";
+import path from "path";
+import type { Plugin, UserConfig as ViteUserConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import solidPlugin from "vite-plugin-solid";
+import { VitePWA } from "vite-plugin-pwa";
+import tailwindcss from "tailwindcss";
+import type esbuild from "esbuild";
+import { getTailwindConfigDeps } from "./tailwind-config-deps.js";
+
+/**
+ * Tailwind config의 scope 패키지 의존성을 watch하는 Vite 플러그인.
+ *
+ * Tailwind CSS의 내장 의존성 추적은 상대 경로 import만 처리하므로,
+ * preset 등으로 참조하는 scope 패키지의 config 변경을 감지하지 못한다.
+ * 이 플러그인이 해당 파일들을 watch하고, 변경 시 Tailwind 캐시를 무효화한다.
+ */
+function sdTailwindConfigDepsPlugin(pkgDir: string): Plugin {
+  return {
+    name: "sd-tailwind-config-deps",
+    configureServer(server) {
+      const configPath = path.join(pkgDir, "tailwind.config.ts");
+      if (!fs.existsSync(configPath)) return;
+
+      // 현재 패키지의 scope + @simplysm 을 항상 포함
+      const pkgJsonPath = path.join(pkgDir, "package.json");
+      const pkgName = JSON.parse(fs.readFileSync(pkgJsonPath, "utf-8")).name as string;
+      const pkgScope = pkgName.match(/^(@[^/]+)\//)?.[1];
+      const scopes = new Set(["@simplysm"]);
+      if (pkgScope != null) {
+        scopes.add(pkgScope);
+      }
+
+      const allDeps = getTailwindConfigDeps(configPath, [...scopes]);
+      const configAbsolute = path.resolve(configPath);
+      const externalDeps = allDeps.filter((d) => d !== configAbsolute);
+      if (externalDeps.length === 0) return;
+
+      for (const dep of externalDeps) {
+        server.watcher.add(dep);
+      }
+
+      server.watcher.on("change", (changed) => {
+        if (externalDeps.some((d) => path.normalize(d) === path.normalize(changed))) {
+          // jiti (Tailwind의 config 로더)가 사용하는 require 캐시를 정리하여
+          // config 재로드 시 변경된 파일이 새로 읽히도록 한다
+          const _require = createRequire(import.meta.url);
+          for (const dep of allDeps) {
+            delete _require.cache[dep];
+          }
+
+          // Tailwind 캐시 무효화: config의 mtime을 갱신하여 재로드 유도
+          const now = new Date();
+          fs.utimesSync(configPath, now, now);
+          server.ws.send({ type: "full-reload" });
+        }
+      });
+    },
+  };
+}
+
+/**
+ * scope 패키지의 dist 디렉토리 변경을 감지하는 Vite 플러그인.
+ *
+ * Vite는 node_modules를 기본적으로 watch에서 제외하므로,
+ * scope 패키지의 dist 파일이 변경되어도 HMR/리빌드가 트리거되지 않는다.
+ * 이 플러그인은 scope 패키지의 dist 디렉토리를 watcher에 명시적으로 추가하고,
+ * optimizeDeps에서 제외하여 pre-bundled 캐시로 인한 변경 무시를 방지한다.
+ */
+function sdScopeWatchPlugin(pkgDir: string, scopes: string[]): Plugin {
+  return {
+    name: "sd-scope-watch",
+    config() {
+      return {
+        optimizeDeps: {
+          exclude: scopes.flatMap((s) => {
+            // scope 패키지를 pre-bundling에서 제외하여 소스 코드로 취급
+            const scopeDir = path.join(pkgDir, "node_modules", s);
+            if (!fs.existsSync(scopeDir)) return [];
+            return fs.readdirSync(scopeDir).map((name) => `${s}/${name}`);
+          }),
+        },
+      };
+    },
+    configureServer(server) {
+      for (const scope of scopes) {
+        const scopeDir = path.join(pkgDir, "node_modules", scope);
+        if (!fs.existsSync(scopeDir)) continue;
+
+        for (const pkgName of fs.readdirSync(scopeDir)) {
+          const distDir = path.join(scopeDir, pkgName, "dist");
+          if (fs.existsSync(distDir)) {
+            server.watcher.add(distDir);
+          }
+        }
+      }
+    },
+  };
+}
+
+/**
+ * Vite 설정 생성 옵션
+ */
+export interface ViteConfigOptions {
+  pkgDir: string;
+  name: string;
+  tsconfigPath: string;
+  compilerOptions: Record<string, unknown>;
+  env?: Record<string, string>;
+  mode: "build" | "dev";
+  /** dev 모드일 때 서버 포트 (0이면 자동 할당) */
+  serverPort?: number;
+  /** watch 대상 scope 목록 (예: ["@myapp", "@simplysm"]) */
+  watchScopes?: string[];
+}
+
+/**
+ * Vite 설정 생성
+ *
+ * SolidJS + TailwindCSS 기반의 client 패키지 빌드/개발 서버용 설정입니다.
+ * - build 모드: production 빌드 (logLevel: silent)
+ * - dev 모드: dev server (define으로 env 치환, server 설정)
+ */
+export function createViteConfig(options: ViteConfigOptions): ViteUserConfig {
+  const { pkgDir, name, tsconfigPath, compilerOptions, env, mode, serverPort, watchScopes } = options;
+
+  // Read package.json to extract app name for PWA manifest
+  const pkgJsonPath = path.join(pkgDir, "package.json");
+  const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, "utf-8")) as { name: string };
+  const appName = pkgJson.name.replace(/^@[^/]+\//, "");
+
+  // process.env 치환 (dev 모드에서만 사용, build 모드는 inline으로 처리됨)
+  const envDefine: Record<string, string> = {};
+  if (env != null) {
+    envDefine["process.env"] = JSON.stringify(env);
+  }
+
+  const config: ViteUserConfig = {
+    root: pkgDir,
+    base: `/${name}/`,
+    plugins: [
+      tsconfigPaths({ projects: [tsconfigPath] }),
+      solidPlugin(),
+      VitePWA({
+        registerType: "prompt",
+        injectRegister: "script",
+        manifest: {
+          name: appName,
+          short_name: appName,
+          display: "standalone",
+          theme_color: "#ffffff",
+          background_color: "#ffffff",
+        },
+        workbox: {
+          globPatterns: ["**/*.{js,css,html,ico,png,svg,woff2}"],
+        },
+      }),
+      sdTailwindConfigDepsPlugin(pkgDir),
+      ...(watchScopes != null && watchScopes.length > 0 ? [sdScopeWatchPlugin(pkgDir, watchScopes)] : []),
+    ],
+    css: {
+      postcss: {
+        plugins: [tailwindcss({ config: path.join(pkgDir, "tailwind.config.ts") })],
+      },
+    },
+    esbuild: {
+      tsconfigRaw: { compilerOptions: compilerOptions as esbuild.TsconfigRaw["compilerOptions"] },
+    },
+  };
+
+  if (mode === "build") {
+    config.logLevel = "silent";
+  } else {
+    // dev 모드
+    config.define = envDefine;
+    config.server = {
+      port: serverPort === 0 ? undefined : serverPort,
+      strictPort: serverPort !== 0 && serverPort !== undefined,
+    };
+  }
+
+  return config;
+}

package/src/utils/worker-events.ts

@@ -0,0 +1,102 @@
+import type { PackageResult } from "./package-utils";
+import type { SdPackageConfig } from "../sd-config.types";
+import type { RebuildListrManager } from "./listr-manager";
+
+/** Worker 빌드 완료 이벤트 데이터 */
+export interface BuildEventData {
+  success: boolean;
+  errors?: string[];
+}
+
+/** Worker 에러 이벤트 데이터 */
+export interface ErrorEventData {
+  message: string;
+}
+
+/** Worker 서버 준비 이벤트 데이터 */
+export interface ServerReadyEventData {
+  port: number;
+}
+
+/** Server Build 완료 이벤트 데이터 */
+export interface ServerBuildEventData {
+  success: boolean;
+  mainJsPath: string;
+  errors?: string[];
+}
+
+/**
+ * 기본 Worker 정보 타입
+ */
+export interface BaseWorkerInfo {
+  name: string;
+  config: SdPackageConfig;
+  worker: { on: (event: string, handler: (data: unknown) => void) => void };
+  isInitialBuild: boolean;
+  buildResolver: (() => void) | undefined;
+}
+
+/**
+ * Worker 이벤트 핸들러 옵션
+ */
+export interface WorkerEventHandlerOptions {
+  resultKey: string;
+  listrTitle: string;
+  resultType: "build" | "dts";
+}
+
+/**
+ * 공통 Worker 이벤트 핸들러 등록 (buildStart, build, error만 - serverReady는 포함하지 않음)
+ *
+ * @param workerInfo Worker 정보
+ * @param opts 핸들러 옵션
+ * @param results 결과 맵
+ * @param rebuildManager 리빌드 매니저
+ * @returns completeTask 함수 (결과를 저장하고 빌드 완료를 알림)
+ */
+export function registerWorkerEventHandlers<T extends BaseWorkerInfo>(
+  workerInfo: T,
+  opts: WorkerEventHandlerOptions,
+  results: Map<string, PackageResult>,
+  rebuildManager: RebuildListrManager,
+): (result: PackageResult) => void {
+  const completeTask = (result: PackageResult): void => {
+    results.set(opts.resultKey, result);
+    workerInfo.buildResolver?.();
+    workerInfo.buildResolver = undefined;
+    workerInfo.isInitialBuild = false;
+  };
+
+  // 빌드 시작 (리빌드 시)
+  workerInfo.worker.on("buildStart", () => {
+    if (!workerInfo.isInitialBuild) {
+      workerInfo.buildResolver = rebuildManager.registerBuild(opts.resultKey, opts.listrTitle);
+    }
+  });
+
+  // 빌드 완료
+  workerInfo.worker.on("build", (data) => {
+    const event = data as BuildEventData;
+    completeTask({
+      name: workerInfo.name,
+      target: workerInfo.config.target,
+      type: opts.resultType,
+      status: event.success ? "success" : "error",
+      message: event.errors?.join("\n"),
+    });
+  });
+
+  // 에러
+  workerInfo.worker.on("error", (data) => {
+    const event = data as ErrorEventData;
+    completeTask({
+      name: workerInfo.name,
+      target: workerInfo.config.target,
+      type: opts.resultType,
+      status: "error",
+      message: event.message,
+    });
+  });
+
+  return completeTask;
+}

package/src/workers/client.worker.ts

@@ -0,0 +1,236 @@
+import path from "path";
+import fs from "fs";
+import { build as viteBuild, createServer, type ViteDevServer } from "vite";
+import { createWorker } from "@simplysm/core-node";
+import { consola } from "consola";
+import type { SdClientPackageConfig } from "../sd-config.types";
+import { parseRootTsconfig, getCompilerOptionsForPackage } from "../utils/tsconfig";
+import { createViteConfig } from "../utils/vite-config";
+
+//#region Types
+
+/**
+ * Client 빌드 정보 (일회성 빌드용)
+ */
+export interface ClientBuildInfo {
+  name: string;
+  config: SdClientPackageConfig;
+  cwd: string;
+  pkgDir: string;
+}
+
+/**
+ * Client 빌드 결과
+ */
+export interface ClientBuildResult {
+  success: boolean;
+  errors?: string[];
+}
+
+/**
+ * Client Watch 정보
+ */
+export interface ClientWatchInfo {
+  name: string;
+  config: SdClientPackageConfig;
+  cwd: string;
+  pkgDir: string;
+  /** watch 대상 scope 목록 */
+  watchScopes?: string[];
+}
+
+/**
+ * 빌드 이벤트
+ */
+export interface ClientBuildEvent {
+  success: boolean;
+  errors?: string[];
+}
+
+/**
+ * 서버 준비 이벤트
+ */
+export interface ClientServerReadyEvent {
+  port: number;
+}
+
+/**
+ * 에러 이벤트
+ */
+export interface ClientErrorEvent {
+  message: string;
+}
+
+/**
+ * Worker 이벤트 타입
+ */
+export interface ClientWorkerEvents extends Record<string, unknown> {
+  buildStart: Record<string, never>;
+  build: ClientBuildEvent;
+  serverReady: ClientServerReadyEvent;
+  error: ClientErrorEvent;
+}
+
+//#endregion
+
+//#region 리소스 관리
+
+const logger = consola.withTag("sd:cli:client:worker");
+
+/** Vite dev server (정리 대상) */
+let viteServer: ViteDevServer | undefined;
+
+/**
+ * 리소스 정리
+ */
+async function cleanup(): Promise<void> {
+  // 전역 변수를 임시 변수로 캡처 후 초기화
+  // (Promise.all 대기 중 다른 호출에서 전역 변수를 수정할 수 있으므로)
+  const serverToClose = viteServer;
+  viteServer = undefined;
+
+  if (serverToClose != null) {
+    await serverToClose.close();
+  }
+}
+
+// 프로세스 종료 전 리소스 정리 (SIGTERM/SIGINT)
+// 주의: worker.terminate()는 이 핸들러들을 호출하지 않고 즉시 종료됨.
+// 그러나 watch 모드에서 정상 종료는 메인 프로세스의 SIGINT/SIGTERM을 통해 이루어지므로 문제없음.
+process.on("SIGTERM", () => {
+  cleanup()
+    .catch((err) => {
+      logger.error("cleanup 실패", err);
+    })
+    .finally(() => {
+      process.exit(0);
+    });
+});
+
+process.on("SIGINT", () => {
+  cleanup()
+    .catch((err) => {
+      logger.error("cleanup 실패", err);
+    })
+    .finally(() => {
+      process.exit(0);
+    });
+});
+
+//#endregion
+
+//#region Worker
+
+/**
+ * 일회성 빌드
+ */
+async function build(info: ClientBuildInfo): Promise<ClientBuildResult> {
+  try {
+    // tsconfig 파싱
+    const parsedConfig = parseRootTsconfig(info.cwd);
+    const tsconfigPath = path.join(info.cwd, "tsconfig.json");
+
+    // browser 타겟용 compilerOptions 생성
+    const compilerOptions = await getCompilerOptionsForPackage(parsedConfig.options, "browser", info.pkgDir);
+
+    // Vite 설정 생성 및 빌드
+    const viteConfig = createViteConfig({
+      pkgDir: info.pkgDir,
+      name: info.name,
+      tsconfigPath,
+      compilerOptions,
+      env: info.config.env,
+      mode: "build",
+    });
+
+    await viteBuild(viteConfig);
+
+    // Generate .config.json
+    const confDistPath = path.join(info.pkgDir, "dist", ".config.json");
+    fs.writeFileSync(confDistPath, JSON.stringify(info.config.configs ?? {}, undefined, 2));
+
+    return { success: true };
+  } catch (err) {
+    return {
+      success: false,
+      errors: [err instanceof Error ? err.message : String(err)],
+    };
+  }
+}
+
+/** startWatch 호출 여부 플래그 */
+let isWatchStarted = false;
+
+/**
+ * watch 시작 (Vite dev server)
+ * @remarks 이 함수는 Worker당 한 번만 호출되어야 합니다.
+ * @throws 이미 watch가 시작된 경우
+ */
+async function startWatch(info: ClientWatchInfo): Promise<void> {
+  if (isWatchStarted) {
+    throw new Error("startWatch는 Worker당 한 번만 호출할 수 있습니다.");
+  }
+  isWatchStarted = true;
+
+  try {
+    // tsconfig 파싱
+    const parsedConfig = parseRootTsconfig(info.cwd);
+    const tsconfigPath = path.join(info.cwd, "tsconfig.json");
+
+    // browser 타겟용 compilerOptions 생성
+    const compilerOptions = await getCompilerOptionsForPackage(parsedConfig.options, "browser", info.pkgDir);
+
+    // server가 0이면 자동 포트 할당 (서버 연결 클라이언트)
+    // server가 숫자면 해당 포트로 고정 (standalone 클라이언트)
+    const serverPort = typeof info.config.server === "number" ? info.config.server : 0;
+
+    // Vite 설정 생성
+    const viteConfig = createViteConfig({
+      pkgDir: info.pkgDir,
+      name: info.name,
+      tsconfigPath,
+      compilerOptions,
+      env: info.config.env,
+      mode: "dev",
+      serverPort,
+      watchScopes: info.watchScopes,
+    });
+
+    // Vite dev server 시작
+    viteServer = await createServer(viteConfig);
+    await viteServer.listen();
+
+    // Generate .config.json
+    const confDistPath = path.join(info.pkgDir, "dist", ".config.json");
+    fs.mkdirSync(path.dirname(confDistPath), { recursive: true });
+    fs.writeFileSync(confDistPath, JSON.stringify(info.config.configs ?? {}, undefined, 2));
+
+    // 실제 할당된 포트 반환
+    sender.send("serverReady", { port: viteServer.config.server.port });
+  } catch (err) {
+    sender.send("error", {
+      message: err instanceof Error ? err.message : String(err),
+    });
+  }
+}
+
+/**
+ * watch 중지
+ * @remarks Vite dev server를 정리합니다.
+ */
+async function stopWatch(): Promise<void> {
+  await cleanup();
+}
+
+const sender = createWorker<
+  { build: typeof build; startWatch: typeof startWatch; stopWatch: typeof stopWatch },
+  ClientWorkerEvents
+>({
+  build,
+  startWatch,
+  stopWatch,
+});
+
+export default sender;
+
+//#endregion