@simplysm/sd-cli 14.0.38 → 14.0.39

package/src/esbuild/esbuild-postcss-plugin.ts

@@ -0,0 +1,117 @@
+import type esbuild from "esbuild";
+import type { AcceptedPlugin } from "postcss";
+import postcss from "postcss";
+import fs from "fs";
+import * as acorn from "acorn";
+import * as walk from "acorn-walk";
+
+export interface CreatePostcssPluginOptions {
+  /** 이미 로딩된 PostCSS 플러그인 인스턴스 배열 */
+  plugins: AcceptedPlugin[];
+}
+
+export function createPostcssPlugin(options: CreatePostcssPluginOptions): esbuild.Plugin {
+  return {
+    name: "sd-postcss",
+    setup(build) {
+      build.onEnd(async (result) => {
+        if (options.plugins.length === 0) return;
+        if (result.metafile == null) return;
+
+        const processor = postcss(options.plugins);
+        const outputFiles = Object.keys(result.metafile.outputs);
+
+        // .css 파일 처리
+        for (const file of outputFiles) {
+          if (!file.endsWith(".css")) continue;
+
+          try {
+            const css = await fs.promises.readFile(file, "utf-8");
+            const processed = await processor.process(css, { from: file });
+            await fs.promises.writeFile(file, processed.css);
+          } catch (e: unknown) {
+            result.errors.push({
+              id: "",
+              pluginName: "sd-postcss",
+              text: `PostCSS error in ${file}: ${e instanceof Error ? e.message : String(e)}`,
+              location: null,
+              notes: [],
+              detail: undefined,
+            });
+          }
+        }
+
+        // .js 파일 처리 — ɵɵdefineComponent 내 styles 배열의 문자열에 PostCSS 적용
+        for (const file of outputFiles) {
+          if (!file.endsWith(".js")) continue;
+
+          try {
+            const code = await fs.promises.readFile(file, "utf-8");
+            if (!code.includes("styles")) continue;
+
+            const ast = acorn.parse(code, {
+              ecmaVersion: "latest",
+              sourceType: "module",
+            });
+
+            // styles 배열 내 문자열 리터럴의 위치와 PostCSS 결과를 수집
+            const replacements: Array<{ start: number; end: number; text: string }> = [];
+
+            walk.ancestor(ast, {
+              Property(node: any, _state: any, ancestors: any[]) {
+                // key가 "styles"이고 value가 ArrayExpression인 Property만 대상
+                if (node.key.type !== "Identifier" || node.key.name !== "styles") return;
+                if (node.value.type !== "ArrayExpression") return;
+
+                // ancestors에서 ɵɵdefineComponent 호출을 확인
+                const inDefineComponent = ancestors.some(
+                  (a: any) =>
+                    a.type === "CallExpression" &&
+                    a.callee?.type === "MemberExpression" &&
+                    a.callee.property?.type === "Identifier" &&
+                    a.callee.property.name === "\u0275\u0275defineComponent",
+                );
+                if (!inDefineComponent) return;
+
+                for (const element of node.value.elements) {
+                  if (element == null) continue;
+                  if (element.type !== "Literal" || typeof element.value !== "string") continue;
+
+                  replacements.push({
+                    start: element.start,
+                    end: element.end,
+                    text: element.value,
+                  });
+                }
+              },
+            });
+
+            if (replacements.length === 0) continue;
+
+            // PostCSS 적용 및 역순 교체
+            let modified = code;
+            // 끝에서 시작 방향으로 교체하여 offset 유지
+            const sorted = replacements.sort((a, b) => b.start - a.start);
+
+            for (const rep of sorted) {
+              const processed = await processor.process(rep.text, { from: file });
+              const escaped = JSON.stringify(processed.css);
+              modified = modified.slice(0, rep.start) + escaped + modified.slice(rep.end);
+            }
+
+            await fs.promises.writeFile(file, modified);
+          } catch (e: unknown) {
+            result.errors.push({
+              id: "",
+              pluginName: "sd-postcss",
+              text: `PostCSS error in ${file}: ${e instanceof Error ? e.message : String(e)}`,
+              location: null,
+              notes: [],
+              detail: undefined,
+            });
+          }
+        }
+      });
+    },
+  };
+}

package/src/esbuild/esbuild-tsc-plugin.ts

@@ -0,0 +1,83 @@
+import type esbuild from "esbuild";
+import type ts from "typescript";
+import { err as errNs } from "@simplysm/core-common";
+import { parseTsconfig, type TypecheckEnv } from "../utils/tsconfig";
+import { runTscPackageBuild, type TscPackageBuildResult } from "../utils/tsc-build";
+import type { SerializedDiagnostic } from "../typecheck/typecheck-serialization";
+
+export interface TscPluginOptions {
+  pkgDir: string;
+  cwd: string;
+  output: { dts: boolean };
+  env?: TypecheckEnv;
+  includeTests?: boolean;
+}
+
+export interface TscPluginResult {
+  plugin: esbuild.Plugin;
+  getProgram(): ts.Program | undefined;
+  getAffectedFiles(): ReadonlySet<string> | undefined;
+  getDiagnostics(): SerializedDiagnostic[];
+  getErrors(): string[] | undefined;
+  resetBuilderProgram(): void;
+}
+
+export function createTscPlugin(options: TscPluginOptions): TscPluginResult {
+  // 내부 상태
+  let lastProgram: ts.Program | undefined;
+  let lastAffectedFiles: ReadonlySet<string> | undefined;
+  let lastDiagnostics: SerializedDiagnostic[] = [];
+  let lastErrors: string[] | undefined;
+  let lastBuilderProgram: ts.EmitAndSemanticDiagnosticsBuilderProgram | undefined;
+
+  // onStart에서 생성한 tsc Promise (onEnd에서 await)
+  let tscPromise: Promise<TscPackageBuildResult> | undefined;
+
+  const plugin: esbuild.Plugin = {
+    name: "sd-tsc",
+    setup(build) {
+      build.onStart(() => {
+        // microtask로 tsc 스케줄링 (await하지 않음)
+        tscPromise = Promise.resolve().then(() => {
+          const parsedConfig = parseTsconfig(options.pkgDir);
+          return runTscPackageBuild({
+            pkgDir: options.pkgDir,
+            cwd: options.cwd,
+            output: { js: false, dts: options.output.dts },
+            parsedConfig,
+            env: options.env,
+            includeTests: options.includeTests,
+            oldBuilderProgram: lastBuilderProgram,
+          });
+        });
+      });
+
+      build.onEnd(async () => {
+        try {
+          const tscResult = await tscPromise!;
+          lastProgram = tscResult.program;
+          lastAffectedFiles = tscResult.affectedFiles;
+          lastDiagnostics = tscResult.diagnostics;
+          lastErrors = tscResult.errors;
+          lastBuilderProgram = tscResult.builderProgram;
+        } catch (err) {
+          lastProgram = undefined;
+          lastAffectedFiles = undefined;
+          lastDiagnostics = [];
+          lastErrors = [errNs.message(err)];
+        }
+      });
+    },
+  };
+
+  return {
+    plugin,
+    getProgram: () => lastProgram,
+    getAffectedFiles: () => lastAffectedFiles,
+    getDiagnostics: () => lastDiagnostics,
+    getErrors: () => lastErrors,
+    resetBuilderProgram: () => {
+      lastBuilderProgram = undefined;
+    },
+  };
+}

package/src/workers/client.worker.ts

@@ -118,7 +118,6 @@ async function build(info: ClientBuildInfo): Promise<ClientBuildResult> {
       polyfills,
       legacyModule,
       postcssPlugins,
-      postcssConfigPath: info.pkgDir,
       templateUpdates,
     });
 
@@ -226,17 +225,48 @@ async function startWatch(info: ClientBuildInfo): Promise<ClientBuildResult> {
       polyfills,
       legacyModule,
       postcssPlugins,
-      postcssConfigPath: info.pkgDir,
       templateUpdates: legacyModule ? undefined : templateUpdates,
       plugins: [
         {
           name: "sd-build-start",
           setup(pluginBuild: esbuild.PluginBuild) {
+            const prevMtimes = new Map<string, number>();
+
             pluginBuild.onStart(() => {
+              // loadResultCache 무효화: 변경된 JS 파일의 캐시 엔트리 제거
+              if (esbuildResult != null) {
+                const { loadResultCache } = esbuildResult.sourceFileCache;
+                for (const file of loadResultCache.watchFiles) {
+                  try {
+                    const mtime = fs.statSync(file).mtimeMs;
+                    const prev = prevMtimes.get(file);
+                    if (prev != null && prev !== mtime) {
+                      loadResultCache.invalidate(file);
+                    }
+                  } catch {
+                    if (prevMtimes.has(file)) {
+                      loadResultCache.invalidate(file);
+                    }
+                  }
+                }
+              }
+
               if (!isInitialBuild) {
                 sender.send("buildStart", {});
               }
             });
+
+            pluginBuild.onEnd(() => {
+              if (esbuildResult == null) return;
+              prevMtimes.clear();
+              for (const file of esbuildResult.sourceFileCache.loadResultCache.watchFiles) {
+                try {
+                  prevMtimes.set(file, fs.statSync(file).mtimeMs);
+                } catch {
+                  // 삭제된 파일
+                }
+              }
+            });
           },
         },
       ],

package/src/workers/server-build.worker.ts

@@ -17,6 +17,7 @@ import {
 } from "../esbuild/esbuild-config";
 import { collectAllExternals, generateProductionFiles } from "../deps/server-externals/server-production-files";
 import { runTscPackageBuild } from "../utils/tsc-build";
+import { createTscPlugin } from "../esbuild/esbuild-tsc-plugin";
 import { LintWithProgramRunner } from "../lint/lint-with-program";
 import { setupWorkerLifecycle } from "./shared-worker-lifecycle";
 import { buildWatchPaths } from "./build-watch-paths";
@@ -106,7 +107,6 @@ let srcWatcher: FsWatcher | undefined;
 
 async function cleanup(): Promise<void> {
   await esbuildCtx.dispose();
-  lastBuilderProgram = undefined;
 
   const watcherToClose = publicWatcher;
   publicWatcher = undefined;
@@ -143,16 +143,30 @@ async function build(info: ServerBuildInfo): Promise<ServerBuildResult> {
     // 외부 모듈 수집
     const external = collectAllExternals(info.pkgDir, info.externals);
 
-    // esbuild (비동기) ‖ tsc (동기) 병렬 실행
-    const esbuildOptions = createServerEsbuildOptions({
-      pkgDir: info.pkgDir,
-      entryPoints,
-      env: info.env,
-      external,
-    });
+    let jsResult: { success: boolean; errors?: string[]; warnings?: string[] };
+    let tscErrors: string[];
+    let tscDiagnostics: SerializedDiagnostic[];
+    let tscProgram: ts.Program | undefined;
+
+    if (info.output.js) {
+      // js=true: tsc 플러그인 통합 — 단일 esbuild.build() 호출
+      const tscPlugin = createTscPlugin({
+        pkgDir: info.pkgDir,
+        cwd: info.cwd,
+        output: { dts: info.output.dts },
+        env: info.output.env,
+        includeTests: info.output.includeTests,
+      });
 
-    const esbuildPromise = info.output.js
-      ? esbuild.build(esbuildOptions).then(async (result) => {
+      const esbuildOptions = createServerEsbuildOptions({
+        pkgDir: info.pkgDir,
+        entryPoints,
+        env: info.env,
+        external,
+      });
+
+      jsResult = await esbuild.build({ ...esbuildOptions, plugins: [tscPlugin.plugin] })
+        .then(async (result) => {
           if (result.outputFiles) {
             await writeChangedOutputFiles(result.outputFiles);
           }
@@ -163,36 +177,42 @@ async function build(info: ServerBuildInfo): Promise<ServerBuildResult> {
             errors: errors.length > 0 ? errors : undefined,
             warnings: warnings.length > 0 ? warnings : undefined,
           };
-        }).catch((err) => ({
+        })
+        .catch((err) => ({
           success: false,
           errors: [errNs.message(err)],
           warnings: undefined,
-        }))
-      : null;
-
-    // tsc 타입체크 (항상 실행, emit은 output.dts로 제어)
-    const tscResult = runTscPackageBuild({
-      pkgDir: info.pkgDir,
-      cwd: info.cwd,
-      output: { js: false, dts: info.output.dts },
-      parsedConfig,
-      env: info.output.env,
-      includeTests: info.output.includeTests,
-    });
+        }));
+
+      tscErrors = tscPlugin.getErrors() ?? [];
+      tscDiagnostics = tscPlugin.getDiagnostics();
+      tscProgram = tscPlugin.getProgram();
+    } else {
+      // js=false: runTscPackageBuild 직접 호출 (플러그인 경유 불가)
+      const tscResult = runTscPackageBuild({
+        pkgDir: info.pkgDir,
+        cwd: info.cwd,
+        output: { js: false, dts: info.output.dts },
+        parsedConfig,
+        env: info.output.env,
+        includeTests: info.output.includeTests,
+      });
 
-    const jsResult = esbuildPromise
-      ? await esbuildPromise
-      : { success: true, errors: undefined, warnings: undefined };
+      jsResult = { success: true, errors: undefined, warnings: undefined };
+      tscErrors = tscResult.errors ?? [];
+      tscDiagnostics = tscResult.diagnostics;
+      tscProgram = tscResult.program;
+    }
 
     // lint 실행 (활성화 + program 사용 가능 시)
     let lint: LintWithProgramResult | undefined;
-    if (info.output.lint === true && tscResult.program != null) {
+    if (info.output.lint === true && tscProgram != null) {
       logger.debug(`[${info.name}] lint 시작`);
       const lintRunner = new LintWithProgramRunner({
         cwd: info.cwd,
         pkgName: info.name,
       });
-      lint = await lintRunner.lint({ program: tscResult.program });
+      lint = await lintRunner.lint({ program: tscProgram });
       logger.debug(`[${info.name}] lint 완료`);
     }
 
@@ -206,14 +226,15 @@ async function build(info: ServerBuildInfo): Promise<ServerBuildResult> {
       generateProductionFiles(info, external);
     }
 
-    const allErrors = [...(jsResult.errors ?? []), ...(tscResult.errors ?? [])];
-    logger.debug(`[${info.name}] server worker build 완료 (js: ${jsResult.success}, tsc: ${tscResult.success})`);
+    const allErrors = [...(jsResult.errors ?? []), ...tscErrors];
+    const tscSuccess = tscErrors.length === 0;
+    logger.debug(`[${info.name}] server worker build 완료 (js: ${jsResult.success}, tsc: ${tscSuccess})`);
     return {
       build: {
-        success: jsResult.success && tscResult.success,
+        success: jsResult.success && tscSuccess,
         errors: allErrors.length > 0 ? allErrors : undefined,
         warnings: jsResult.warnings,
-        diagnostics: tscResult.diagnostics,
+        diagnostics: tscDiagnostics,
       },
       lint,
       mainJsPath,
@@ -232,76 +253,88 @@ async function build(info: ServerBuildInfo): Promise<ServerBuildResult> {
   }
 }
 
-// watch 모드용 가변 상태
-let watchInfo: ServerWatchInfo | undefined;
-let watchLintRunner: LintWithProgramRunner | undefined;
-let lastBuilderProgram: ts.EmitAndSemanticDiagnosticsBuilderProgram | undefined;
-
 /**
- * esbuild + tsc 병렬 리빌드 (watch 모드)
+ * watch 모드 시작
  */
-async function rebuildAll(): Promise<ServerCombinedBuildEvent> {
-  const info = watchInfo!;
-  logger.debug(`[${info.name}] rebuildAll 시작`);
-  const mainJsPath = pathx.posixResolve(info.pkgDir, "dist", "main.js");
-  const parsedConfig = parseTsconfig(info.pkgDir);
-
-  // esbuild 리빌드 (비동기)
-  const esbuildPromise = info.output.js ? esbuildCtx.rebuild() : null;
-
-  // tsc 리빌드 (동기, 증분)
-  const tscResult = runTscPackageBuild({
-    pkgDir: info.pkgDir,
-    cwd: info.cwd,
-    output: { js: false, dts: info.output.dts },
-    parsedConfig,
-    env: info.output.env,
-    includeTests: info.output.includeTests,
-    oldBuilderProgram: lastBuilderProgram,
-  });
-  lastBuilderProgram = tscResult.builderProgram ?? lastBuilderProgram;
-
-  // lint 실행 (활성화 + program 사용 가능 시)
-  let lint: LintWithProgramResult | undefined;
-  if (info.output.lint === true && tscResult.program != null) {
-    logger.debug(`[${info.name}] lint 시작`);
-    if (watchLintRunner == null) {
-      watchLintRunner = new LintWithProgramRunner({
+async function startWatch(info: ServerWatchInfo): Promise<void> {
+  guardStartWatch();
+  logger.debug(`[${info.name}] server worker startWatch 시작`);
+
+  // watch 모드 로컬 상태 (클로저로 관리)
+  let lastBuilderProgram: ts.EmitAndSemanticDiagnosticsBuilderProgram | undefined;
+  let watchLintRunner: LintWithProgramRunner | undefined;
+
+  /**
+   * esbuild + tsc 리빌드 (watch 모드)
+   * js=true: esbuildCtx.rebuild() 단일 호출 (tsc 플러그인 자동 트리거)
+   * js=false: runTscPackageBuild 직접 호출
+   */
+  async function rebuildAll(): Promise<ServerCombinedBuildEvent> {
+    logger.debug(`[${info.name}] rebuildAll 시작`);
+    const mainJsPath = pathx.posixResolve(info.pkgDir, "dist", "main.js");
+
+    let jsResult: { success: boolean; errors?: string[]; warnings?: string[] };
+    let tscProgram: ts.Program | undefined;
+    let tscAffectedFiles: ReadonlySet<string> | undefined;
+    let tscErrors: string[];
+
+    if (info.output.js) {
+      // js=true: esbuildCtx.rebuild() 단일 호출 (tsc 에러 자동 병합)
+      const rebuildResult = await esbuildCtx.rebuild();
+      jsResult = rebuildResult ?? { success: true, errors: undefined, warnings: undefined };
+      tscProgram = esbuildCtx.getTscProgram();
+      tscAffectedFiles = esbuildCtx.getTscAffectedFiles();
+      tscErrors = [];
+    } else {
+      // js=false: runTscPackageBuild 직접 호출
+      const parsedConfig = parseTsconfig(info.pkgDir);
+      const tscResult = runTscPackageBuild({
+        pkgDir: info.pkgDir,
         cwd: info.cwd,
-        pkgName: info.name,
+        output: { js: false, dts: info.output.dts },
+        parsedConfig,
+        env: info.output.env,
+        includeTests: info.output.includeTests,
+        oldBuilderProgram: lastBuilderProgram,
       });
+      lastBuilderProgram = tscResult.builderProgram ?? lastBuilderProgram;
+
+      jsResult = { success: true, errors: undefined, warnings: undefined };
+      tscProgram = tscResult.program;
+      tscAffectedFiles = tscResult.affectedFiles;
+      tscErrors = tscResult.errors ?? [];
     }
-    lint = await watchLintRunner.lint({
-      program: tscResult.program,
-      affectedFiles: tscResult.affectedFiles,
-    });
-    logger.debug(`[${info.name}] lint 완료`);
-  }
 
-  const jsResult = esbuildPromise != null
-    ? (await esbuildPromise) ?? { success: true, errors: undefined, warnings: undefined }
-    : { success: true, errors: undefined, warnings: undefined };
-
-  const allErrors = [...(jsResult.errors ?? []), ...(tscResult.errors ?? [])];
-  logger.debug(`[${info.name}] rebuildAll 완료`);
-  return {
-    build: {
-      success: jsResult.success && tscResult.success,
-      errors: allErrors.length > 0 ? allErrors : undefined,
-      warnings: jsResult.warnings,
-    },
-    lint,
-    mainJsPath,
-  };
-}
+    // lint 실행 (활성화 + program 사용 가능 시)
+    let lint: LintWithProgramResult | undefined;
+    if (info.output.lint === true && tscProgram != null) {
+      logger.debug(`[${info.name}] lint 시작`);
+      if (watchLintRunner == null) {
+        watchLintRunner = new LintWithProgramRunner({
+          cwd: info.cwd,
+          pkgName: info.name,
+        });
+      }
+      lint = await watchLintRunner.lint({
+        program: tscProgram,
+        affectedFiles: tscAffectedFiles,
+      });
+      logger.debug(`[${info.name}] lint 완료`);
+    }
 
-/**
- * watch 모드 시작
- */
-async function startWatch(info: ServerWatchInfo): Promise<void> {
-  guardStartWatch();
-  watchInfo = info;
-  logger.debug(`[${info.name}] server worker startWatch 시작`);
+    const allErrors = [...(jsResult.errors ?? []), ...tscErrors];
+    const allSuccess = jsResult.success && tscErrors.length === 0;
+    logger.debug(`[${info.name}] rebuildAll 완료`);
+    return {
+      build: {
+        success: allSuccess,
+        errors: allErrors.length > 0 ? allErrors : undefined,
+        warnings: jsResult.warnings,
+      },
+      lint,
+      mainJsPath,
+    };
+  }
 
   try {
     const parsedConfig = parseTsconfig(info.pkgDir);
@@ -310,17 +343,23 @@ async function startWatch(info: ServerWatchInfo): Promise<void> {
     // 외부 모듈 수집 (watch 모드용 — watch manager가 자체 캐시를 유지)
     const cachedExternal = collectAllExternals(info.pkgDir, info.externals);
 
-    // esbuild 컨텍스트 생성 (JS 출력 필요 시)
+    // esbuild 컨텍스트 생성 (JS 출력 필요 시, tsc 플러그인 포함)
     if (info.output.js) {
       await esbuildCtx.createContext({
         pkgDir: info.pkgDir,
         entryPoints,
         env: info.env,
         external: cachedExternal,
+        tsc: {
+          cwd: info.cwd,
+          output: { dts: info.output.dts },
+          env: info.output.env,
+          includeTests: info.output.includeTests,
+        },
       });
     }
 
-    // 초기 빌드: esbuild + tsc 병렬
+    // 초기 빌드
     sender.send("buildStart", {});
     const initialResult = await rebuildAll();