@simplysm/sd-cli 14.0.30 → 14.0.32

package/src/deps/replace-deps/replace-deps.ts

@@ -0,0 +1,193 @@
+import fs from "fs";
+import path from "path";
+import { consola } from "consola";
+import { fsx, pathx, FsWatcher } from "@simplysm/core-node";
+import { exec } from "child_process";
+import { promisify } from "util";
+import type { ReplaceDepEntry } from "./replace-deps-resolve";
+import { resolveAllReplaceDepEntries } from "./replace-deps-resolve";
+
+/**
+ * 복사 시 제외할 이름 목록
+ */
+const EXCLUDED_NAMES = new Set(["node_modules", "package.json", ".cache", "tests"]);
+
+/**
+ * replaceDeps 복사용 필터 함수
+ * node_modules, package.json, .cache, tests를 제외한다.
+ *
+ * @param itemPath - 복사할 항목의 절대 경로
+ * @returns 복사 대상이면 true, 제외 대상이면 false
+ */
+function replaceDepsCopyFilter(itemPath: string): boolean {
+  const basename = path.basename(itemPath);
+  return !EXCLUDED_NAMES.has(basename);
+}
+
+/**
+ * watchReplaceDeps의 반환 타입
+ */
+export interface WatchReplaceDepResult {
+  entries: ReplaceDepEntry[];
+  dispose: () => void;
+}
+
+/**
+ * replaceDeps 설정에 따라 node_modules의 패키지를 소스 디렉토리로 교체한다.
+ *
+ * 1. pnpm-workspace.yaml 파싱 → 워크스페이스 패키지 경로
+ * 2. [루트, ...워크스페이스 패키지] node_modules에서 매칭 패키지 탐색
+ * 3. 기존 symlink/디렉토리 제거 → 소스 경로 복사 (node_modules, package.json, .cache, tests 제외)
+ *
+ * @param projectRoot - 프로젝트 루트 경로
+ * @param replaceDeps - sd.config.ts의 replaceDeps 설정
+ */
+export async function setupReplaceDeps(
+  projectRoot: string,
+  replaceDeps: Record<string, string>,
+): Promise<void> {
+  const logger = consola.withTag("sd:cli:replace-deps");
+  let setupCount = 0;
+
+  logger.start("replace-deps 설정 중...");
+
+  const entries = await resolveAllReplaceDepEntries(projectRoot, replaceDeps, logger);
+
+  for (const { targetName, resolvedSourcePath, actualTargetPath } of entries) {
+    try {
+      // 소스 파일을 actualTargetPath에 덮어쓰기 복사 (기존 디렉토리 유지, symlink 보존)
+      await fsx.copy(resolvedSourcePath, actualTargetPath, replaceDepsCopyFilter);
+
+      setupCount += 1;
+    } catch (err) {
+      logger.error(`[${targetName}] 복사 실패: ${err instanceof Error ? err.message : err}`);
+    }
+  }
+
+  logger.success(`replace-deps 설정 완료 (${setupCount}개 의존성 교체)`);
+
+  // 교체된 패키지의 postinstall 스크립트 실행
+  for (const { targetName, resolvedSourcePath, actualTargetPath } of entries) {
+    const sourcePkgJsonPath = pathx.posix(path.join(resolvedSourcePath, "package.json"));
+    try {
+      const pkgJson = JSON.parse(await fs.promises.readFile(sourcePkgJsonPath, "utf-8"));
+      const postinstall = pkgJson.scripts?.postinstall as string | undefined;
+      if (postinstall == null) continue;
+
+      logger.warn(`[${targetName}] postinstall 스크립트 실행: ${postinstall}`);
+      logger.start(`[${targetName}] postinstall 실행 중...`);
+      await promisify(exec)(postinstall, { cwd: actualTargetPath });
+      logger.success(`[${targetName}] postinstall 실행 완료`);
+    } catch (err) {
+      logger.error(
+        `[${targetName}] postinstall 실패: ${err instanceof Error ? err.message : err}`,
+      );
+    }
+  }
+}
+
+/**
+ * replaceDeps 설정에 따라 소스 디렉토리를 감시하고 변경사항을 대상 경로에 복사한다.
+ *
+ * 1. pnpm-workspace.yaml 파싱 → 워크스페이스 패키지 경로
+ * 2. [루트, ...워크스페이스 패키지] node_modules에서 매칭 패키지 탐색
+ * 3. FsWatcher로 소스 디렉토리 감시 (300ms 딜레이)
+ * 4. 변경사항을 대상 경로에 복사 (node_modules, package.json, .cache, tests 제외)
+ *
+ * @param projectRoot - 프로젝트 루트 경로
+ * @param replaceDeps - sd.config.ts의 replaceDeps 설정
+ * @param options - 옵션. onChanged: 파일 복사 완료 후 호출되는 콜백
+ * @returns entries 및 dispose 함수
+ */
+export async function watchReplaceDeps(
+  projectRoot: string,
+  replaceDeps: Record<string, string>,
+  options?: { onChanged?: () => void },
+): Promise<WatchReplaceDepResult> {
+  const logger = consola.withTag("sd:cli:replace-deps:watch");
+
+  const entries = await resolveAllReplaceDepEntries(projectRoot, replaceDeps, logger);
+
+  // 소스 디렉토리 감시자 설정
+  const watchers: FsWatcher[] = [];
+  const watchedSources = new Set<string>();
+
+  logger.start(`replace-deps 워치 시작 중... (${entries.length}개 대상)`);
+
+  for (const entry of entries) {
+    if (watchedSources.has(entry.resolvedSourcePath)) continue;
+    watchedSources.add(entry.resolvedSourcePath);
+
+    const excludedPaths = [...EXCLUDED_NAMES].map((name) =>
+      pathx.posix(path.join(entry.resolvedSourcePath, name)),
+    );
+
+    const watcher = await FsWatcher.watch([entry.resolvedSourcePath], {
+      followSymlinks: false,
+      ignored: [...EXCLUDED_NAMES].map((name) => `**/${name}`),
+    });
+    watcher.onChange({ delay: 300 }, async (changeInfos) => {
+      for (const { path: changedPath } of changeInfos) {
+        // 제외 항목 필터: basename 매칭 또는 제외 디렉토리 내 경로
+        if (
+          EXCLUDED_NAMES.has(path.basename(changedPath)) ||
+          excludedPaths.some((ep) => pathx.isChildPath(changedPath, ep))
+        ) {
+          continue;
+        }
+
+        // 이 소스 경로를 사용하는 모든 항목에 대해 복사
+        for (const e of entries) {
+          if (e.resolvedSourcePath !== entry.resolvedSourcePath) continue;
+
+          // 소스로부터의 상대 경로 계산
+          const relativePath = pathx.posix(path.relative(e.resolvedSourcePath, changedPath));
+          const destPath = pathx.posix(path.join(e.actualTargetPath, relativePath));
+
+          try {
+            // 소스 존재 여부 확인
+            let sourceExists = false;
+            try {
+              await fs.promises.access(changedPath);
+              sourceExists = true;
+            } catch {
+              // 소스가 삭제됨
+            }
+
+            if (sourceExists) {
+              // 소스가 디렉토리인지 파일인지 확인
+              const stat = await fs.promises.stat(changedPath);
+              if (stat.isDirectory()) {
+                await fsx.mkdir(destPath);
+              } else {
+                await fsx.mkdir(pathx.posix(path.dirname(destPath)));
+                await fsx.copy(changedPath, destPath, replaceDepsCopyFilter);
+              }
+            } else {
+              // 소스가 삭제됨 → 대상도 삭제
+              await fsx.rm(destPath);
+            }
+          } catch (err) {
+            logger.error(
+              `[${e.targetName}] 복사 실패 (${relativePath}): ${err instanceof Error ? err.message : err}`,
+            );
+          }
+        }
+      }
+      options?.onChanged?.();
+    });
+
+    watchers.push(watcher);
+  }
+
+  logger.success("replace-deps 워치 준비 완료");
+
+  return {
+    entries,
+    dispose: () => {
+      for (const watcher of watchers) {
+        void watcher.close();
+      }
+    },
+  };
+}

package/src/{utils → deps/server-externals}/server-production-files.ts

@@ -1,9 +1,9 @@
-import type { ServerBuildInfo } from "../workers/server-build.worker";
+import type { ServerBuildInfo } from "../../workers/server-build.worker";
 import path from "path";
 import fs from "fs";
 import { cpx } from "@simplysm/core-node";
 import { consola } from "consola";
-import { collectAllDependencyExternals } from "./esbuild-config";
+import { collectAllDependencyExternals } from "../../esbuild/esbuild-config";
 
 const logger = consola.withTag("sd:cli:server-production-files");
 

package/src/dev-server/dev-http-server.ts

@@ -0,0 +1,149 @@
+import http from "node:http";
+import fs from "node:fs";
+import { pipeline } from "node:stream/promises";
+import path from "path";
+import mime from "mime";
+
+export interface DevHttpServerOptions {
+  /** dist/ 디렉토리 경로 */
+  distDir: string;
+  /** basePath (예: "/my-app/") — 항상 /로 시작하고 /로 끝남 */
+  basePath: string;
+  /** listen 포트 (0: 자동 할당) */
+  port: number;
+  /** 정적 파일 서빙 전에 실행되는 요청 핸들러. true 반환 시 처리 완료 */
+  onRequest?: (req: http.IncomingMessage, res: http.ServerResponse) => boolean;
+}
+
+export interface DevHttpServer {
+  /** 서버 시작, 실제 할당된 포트 반환 */
+  listen(): Promise<number>;
+  /** 서버 종료 */
+  close(): Promise<void>;
+  /** 내부 http.Server 인스턴스 (Feature 2.2에서 WebSocket 연결용) */
+  readonly httpServer: http.Server;
+  /** listen 후 실제 포트 (listen 전에는 undefined) */
+  readonly port: number | undefined;
+}
+
+export function createDevHttpServer(options: DevHttpServerOptions): DevHttpServer {
+  const { distDir, basePath, port: listenPort, onRequest } = options;
+
+  let actualPort: number | undefined;
+
+  /** stat → 스트리밍 응답. 성공 시 true, ENOENT/디렉토리 시 false, 기타 에러 시 throw */
+  async function serveFile(
+    filePath: string,
+    res: http.ServerResponse,
+  ): Promise<boolean> {
+    try {
+      const stat = await fs.promises.stat(filePath);
+      if (stat.isDirectory()) return false;
+
+      const contentType = mime.getType(path.extname(filePath)) ?? "application/octet-stream";
+      res.writeHead(200, { "Content-Type": contentType, "Cache-Control": "no-cache" });
+      await pipeline(fs.createReadStream(filePath), res);
+      return true;
+    } catch (err) {
+      if (res.headersSent) {
+        if (!res.writableEnded) res.end();
+        return true;
+      }
+      if (isEnoent(err)) return false;
+      throw err;
+    }
+  }
+
+  async function serveStatic(
+    req: http.IncomingMessage,
+    res: http.ServerResponse,
+  ): Promise<void> {
+    try {
+      const url = (req.url ?? "/").split("?")[0];
+
+      // basePath prefix 확인
+      if (!url.startsWith(basePath)) {
+        res.writeHead(404);
+        res.end("Not Found");
+        return;
+      }
+
+      let relativePath = url.slice(basePath.length);
+
+      // 빈 경로 또는 / → index.html
+      if (relativePath === "" || relativePath === "/") {
+        relativePath = "index.html";
+      }
+
+      // 선행 슬래시 제거
+      if (relativePath.startsWith("/")) {
+        relativePath = relativePath.slice(1);
+      }
+
+      const filePath = path.join(distDir, relativePath);
+
+      // 1. 요청 파일 서빙 시도
+      if (await serveFile(filePath, res)) return;
+
+      // 2. SPA fallback: index.html 서빙 시도
+      if (await serveFile(path.join(distDir, "index.html"), res)) return;
+
+      // 3. 둘 다 없으면 404
+      res.writeHead(404);
+      res.end("Not Found");
+    } catch {
+      if (!res.headersSent) {
+        res.writeHead(500);
+        res.end("Internal Server Error");
+      } else if (!res.writableEnded) {
+        res.end();
+      }
+    }
+  }
+
+  function isEnoent(err: unknown): boolean {
+    return err != null && typeof err === "object" && "code" in err && (err as { code: string }).code === "ENOENT";
+  }
+
+  const httpServer = http.createServer((req, res) => {
+    // onRequest 훅: 처리되면 정적 파일 서빙 건너뜀
+    if (onRequest != null && onRequest(req, res)) {
+      return;
+    }
+    void serveStatic(req, res);
+  });
+
+  return {
+    listen(): Promise<number> {
+      return new Promise<number>((resolve, reject) => {
+        httpServer.listen(listenPort, "0.0.0.0", () => {
+          const addr = httpServer.address();
+          if (typeof addr === "object" && addr != null) {
+            actualPort = addr.port;
+            resolve(addr.port);
+          } else {
+            reject(new Error("HTTP 서버 포트를 감지할 수 없습니다."));
+          }
+        });
+        httpServer.on("error", reject);
+      });
+    },
+    close(): Promise<void> {
+      return new Promise<void>((resolve, reject) => {
+        httpServer.close((err) => {
+          if (err != null) reject(err);
+          else {
+            actualPort = undefined;
+            resolve();
+          }
+        });
+      });
+    },
+    get httpServer() {
+      return httpServer;
+    },
+    get port() {
+      return actualPort;
+    },
+  };
+}

package/src/dev-server/hmr-client-script.ts

@@ -0,0 +1,74 @@
+/**
+ * HMR 클라이언트 스크립트를 생성한다.
+ * Chrome 61+ 호환 문법으로 작성 (optional chaining, nullish coalescing 미사용).
+ * @param basePath basePath (예: "/app/")
+ */
+export function getHmrClientScript(_basePath: string): string {
+  return [
+    "(function() {",
+    "  var ws = null;",
+    "  var reconnectDelay = 1000;",
+    "",
+    "  function connect() {",
+    '    ws = new WebSocket("ws://" + location.hostname + ":" + location.port);',
+    "",
+    "    ws.onmessage = function(e) {",
+    "      var msg = JSON.parse(e.data);",
+    "",
+    '      if (msg.type === "component-update") {',
+    '        if (typeof globalThis.__hmr_dispatch === "function") {',
+    "          var ids = msg.ids;",
+    "          for (var i = 0; i < ids.length; i++) {",
+    '            globalThis.__hmr_dispatch("angular:component-update", {',
+    "              id: ids[i],",
+    "              timestamp: msg.timestamp",
+    "            });",
+    "          }",
+    "        }",
+    "",
+    '      } else if (msg.type === "css-update") {',
+    '        var links = document.querySelectorAll(\'link[rel="stylesheet"]\');',
+    "        var files = msg.files;",
+    "        for (var j = 0; j < links.length; j++) {",
+    '          var href = links[j].getAttribute("href");',
+    "          if (href) {",
+    '            var base = href.split("?")[0];',
+    '            var fileName = base.substring(base.lastIndexOf("/") + 1);',
+    "            if (files && files.indexOf(fileName) !== -1) {",
+    '              links[j].setAttribute("href", base + "?t=" + msg.timestamp);',
+    "            }",
+    "          }",
+    "        }",
+    "",
+    '      } else if (msg.type === "full-reload") {',
+    "        location.reload();",
+    "      }",
+    "    };",
+    "",
+    "    ws.onclose = function() {",
+    "      setTimeout(connect, reconnectDelay);",
+    "    };",
+    "  }",
+    "",
+    "  connect();",
+    "})();",
+  ].join("\n");
+}
+
+/**
+ * index.html에 HMR 클라이언트 스크립트를 주입하는 postTransform을 생성한다.
+ * Feature 1.2의 GenerateIndexHtmlOptions.postTransform에 전달하여 사용.
+ * @param basePath basePath (예: "/app/")
+ */
+export function createHmrPostTransform(basePath: string): (content: string) => Promise<string> {
+  const script = getHmrClientScript(basePath);
+  const scriptTag = `<script>${script}</script>`;
+
+  return (html: string): Promise<string> => {
+    const bodyCloseIdx = html.lastIndexOf("</body>");
+    if (bodyCloseIdx !== -1) {
+      return Promise.resolve(html.slice(0, bodyCloseIdx) + scriptTag + html.slice(bodyCloseIdx));
+    }
+    return Promise.resolve(html + scriptTag);
+  };
+}

package/src/dev-server/hmr-service.ts

@@ -0,0 +1,178 @@
+import type http from "node:http";
+import type { IncomingMessage, ServerResponse } from "node:http";
+import type esbuild from "esbuild";
+import { WebSocketServer, type WebSocket } from "ws";
+
+export interface HmrServiceOptions {
+  /** HTTP 서버 (WebSocket upgrade 연결용) */
+  httpServer: http.Server;
+  /** basePath (예: "/my-app/") — 항상 /로 시작하고 /로 끝남 */
+  basePath: string;
+  /** templateUpdates Map (createCompilerPlugin과 공유) */
+  templateUpdates: Map<string, string>;
+}
+
+export interface HmrService {
+  /** 모든 연결된 WebSocket 클라이언트에 메시지를 전송한다 */
+  broadcast(message: Record<string, unknown>): void;
+  /** esbuild onEnd에서 호출: 변경 판별 + WS 메시지 디스패치 (100ms 디바운스) */
+  onBuildEnd(metafile: esbuild.Metafile): void;
+  /** HTTP 요청 핸들러 (/@ng/component 엔드포인트). true 반환 시 처리 완료 */
+  handleRequest(req: IncomingMessage, res: ServerResponse): boolean;
+  /** 리소스 정리 (WebSocket 서버 종료) */
+  close(): void;
+}
+
+export function createHmrService(options: HmrServiceOptions): HmrService {
+  const { httpServer, basePath, templateUpdates } = options;
+  const clients = new Set<WebSocket>();
+
+  const wss = new WebSocketServer({ server: httpServer });
+
+  wss.on("connection", (ws) => {
+    clients.add(ws);
+    ws.on("close", () => {
+      clients.delete(ws);
+    });
+  });
+
+  let prevOutputs: Map<string, number> | undefined;
+  let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+  let pendingMetafile: esbuild.Metafile | undefined;
+
+  function onBuildEnd(metafile: esbuild.Metafile): void {
+    pendingMetafile = metafile;
+    if (debounceTimer != null) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      debounceTimer = undefined;
+      dispatchHmrMessage();
+    }, 100);
+  }
+
+  function collectOutputs(metafile: esbuild.Metafile): Map<string, number> {
+    const outputs = new Map<string, number>();
+    for (const [outputPath, output] of Object.entries(metafile.outputs)) {
+      const normalizedPath = outputPath.replace(/\\/g, "/");
+      if (normalizedPath.endsWith(".js") || normalizedPath.endsWith(".css")) {
+        outputs.set(normalizedPath, output.bytes);
+      }
+    }
+    return outputs;
+  }
+
+  function dispatchHmrMessage(): void {
+    if (pendingMetafile == null) return;
+    const metafile = pendingMetafile;
+    pendingMetafile = undefined;
+
+    const timestamp = Date.now();
+    const currentOutputs = collectOutputs(metafile);
+
+    // 1. templateUpdates에 entry가 있으면 component-update
+    if (templateUpdates.size > 0) {
+      broadcast({
+        type: "component-update",
+        ids: [...templateUpdates.keys()],
+        timestamp,
+      });
+      prevOutputs = currentOutputs;
+      return;
+    }
+
+    // 2. 이전 빌드와 비교하여 JS/CSS 변경 판별
+    if (prevOutputs == null) {
+      // 첫 번째 빌드 → full-reload
+      prevOutputs = currentOutputs;
+      broadcast({ type: "full-reload" });
+      return;
+    }
+
+    let jsChanged = false;
+    let cssChanged = false;
+    const changedCssFiles: string[] = [];
+
+    for (const [path, bytes] of currentOutputs) {
+      const prevBytes = prevOutputs.get(path);
+      if (prevBytes !== bytes) {
+        if (path.endsWith(".css")) {
+          cssChanged = true;
+          changedCssFiles.push(path.split("/").pop() ?? path);
+        } else {
+          jsChanged = true;
+        }
+      }
+    }
+
+    // 삭제된 파일 체크
+    for (const [path] of prevOutputs) {
+      if (!currentOutputs.has(path)) {
+        if (path.endsWith(".css")) {
+          cssChanged = true;
+        } else {
+          jsChanged = true;
+        }
+      }
+    }
+
+    prevOutputs = currentOutputs;
+
+    // 3. JS 변경 없고 CSS만 변경 → css-update
+    if (!jsChanged && cssChanged && changedCssFiles.length > 0) {
+      broadcast({ type: "css-update", files: changedCssFiles, timestamp });
+      return;
+    }
+
+    // 4. JS 변경 또는 기타 → full-reload
+    broadcast({ type: "full-reload" });
+  }
+
+  function broadcast(message: Record<string, unknown>): void {
+    const data = JSON.stringify(message);
+    for (const ws of clients) {
+      if (ws.readyState === ws.OPEN) {
+        ws.send(data);
+      }
+    }
+  }
+
+  function handleRequest(req: IncomingMessage, res: ServerResponse): boolean {
+    const rawUrl = req.url ?? "";
+    const parsedUrl = new URL(rawUrl, "http://localhost");
+    const pathname = decodeURIComponent(parsedUrl.pathname);
+
+    // basePath 제거 후 /@ng/component 확인
+    let strippedPathname: string;
+    if (basePath !== "/" && pathname.startsWith(basePath)) {
+      strippedPathname = pathname.slice(basePath.length - 1);
+    } else if (basePath === "/") {
+      strippedPathname = pathname;
+    } else {
+      return false;
+    }
+
+    if (!strippedPathname.startsWith("/@ng/component")) {
+      return false;
+    }
+
+    const componentId = parsedUrl.searchParams.get("c") ?? "";
+    const body = templateUpdates.get(componentId) ?? "";
+
+    res.writeHead(200, {
+      "Content-Type": "text/javascript",
+      "Cache-Control": "no-cache",
+    });
+    res.end(body);
+    return true;
+  }
+
+  function close(): void {
+    if (debounceTimer != null) clearTimeout(debounceTimer);
+    for (const ws of clients) {
+      ws.close();
+    }
+    clients.clear();
+    wss.close();
+  }
+
+  return { broadcast, onBuildEnd, handleRequest, close };
+}