@simplysm/sd-cli 14.0.30 → 14.0.32

package/tests/utils/esbuild-client-config.spec.ts

@@ -0,0 +1,590 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import path from "path";
+import type esbuildTypes from "esbuild";
+
+// --- Mocks ---
+
+const mockContext = {
+  rebuild: vi.fn(),
+  watch: vi.fn(),
+  dispose: vi.fn(),
+};
+
+vi.mock("esbuild", () => ({
+  default: {
+    context: vi.fn(() => Promise.resolve(mockContext)),
+  },
+}));
+
+const mockSourceFileCache = {
+  loadResultCache: { name: "mockLoadResultCache" },
+  invalidate: vi.fn(),
+  modifiedFiles: new Set<string>(),
+};
+
+const mockAngularPlugin = { name: "angular-compiler" };
+
+vi.mock("@angular/build/private", () => {
+  // vi.fn()의 arrow function은 new로 호출 불가 — 일반 function 사용
+  function MockSourceFileCache() {
+    return mockSourceFileCache;
+  }
+  return {
+    createCompilerPlugin: vi.fn(() => mockAngularPlugin),
+    SourceFileCache: vi.fn(MockSourceFileCache),
+  };
+});
+
+vi.mock("browserslist-to-esbuild", () => ({
+  default: vi.fn(() => ["chrome61"]),
+}));
+
+// --- Imports (after mocks) ---
+
+const { createClientEsbuildContext } = await import(
+  "../../src/esbuild/esbuild-client-config"
+);
+const esbuild = (await import("esbuild")).default;
+const { createCompilerPlugin, SourceFileCache } = await import("@angular/build/private");
+const browserslistToEsbuild = (await import("browserslist-to-esbuild")).default;
+
+// --- Helpers ---
+
+const baseDev = {
+  pkgDir: "/workspace/packages/my-app",
+  cwd: "/workspace",
+  mode: "dev" as const,
+};
+
+const baseBuild = {
+  ...baseDev,
+  mode: "build" as const,
+};
+
+describe("createClientEsbuildContext — define 생성", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("dev 모드: ngJitMode=false, ngDevMode/ngHmrMode 미주입", async () => {
+    await createClientEsbuildContext(baseDev);
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.define!["ngJitMode"]).toBe("false");
+    expect(opts.define!["ngDevMode"]).toBeUndefined();
+    expect(opts.define!["ngHmrMode"]).toBeUndefined();
+  });
+
+  it("build 모드: ngDevMode, ngJitMode, ngHmrMode 모두 false", async () => {
+    await createClientEsbuildContext(baseBuild);
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.define!["ngDevMode"]).toBe("false");
+    expect(opts.define!["ngJitMode"]).toBe("false");
+    expect(opts.define!["ngHmrMode"]).toBe("false");
+  });
+
+  it("dev + templateUpdates + non-legacy → ngHmrMode = true", async () => {
+    await createClientEsbuildContext({
+      ...baseDev,
+      templateUpdates: new Map<string, string>(),
+    });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.define!["ngHmrMode"]).toBe("true");
+  });
+
+  it("dev + templateUpdates + legacyModule → ngHmrMode 미정의", async () => {
+    await createClientEsbuildContext({
+      ...baseDev,
+      templateUpdates: new Map<string, string>(),
+      legacyModule: true,
+    });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.define!["ngHmrMode"]).toBeUndefined();
+  });
+
+  it("build + templateUpdates → ngHmrMode = false (build 모드 우선)", async () => {
+    await createClientEsbuildContext({
+      ...baseBuild,
+      templateUpdates: new Map<string, string>(),
+    });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.define!["ngHmrMode"]).toBe("false");
+  });
+
+  it("env가 없으면 import.meta.env 관련 define 없음", async () => {
+    await createClientEsbuildContext(baseDev);
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    const envKeys = Object.keys(opts.define!).filter((k) =>
+      k.startsWith("import.meta.env."),
+    );
+    expect(envKeys).toHaveLength(0);
+  });
+
+  it("env 값에 특수문자가 있으면 JSON.stringify로 이스케이프", async () => {
+    await createClientEsbuildContext({
+      ...baseBuild,
+      env: { MSG: 'hello "world"' },
+    });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.define!["import.meta.env.MSG"]).toBe('"hello \\"world\\""');
+  });
+});
+
+describe("createClientEsbuildContext — 소스맵 설정", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("dev 모드: esbuild sourcemap=linked, CompilerPlugin sourcemap=true, StyleOptions sourcemap=linked", async () => {
+    await createClientEsbuildContext(baseDev);
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.sourcemap).toBe("linked");
+
+    const [pluginOpts, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
+    expect(pluginOpts.sourcemap).toBe(true);
+    expect(styleOpts.sourcemap).toBe("linked");
+  });
+
+  it("build 모드: esbuild sourcemap=false, CompilerPlugin sourcemap=false, StyleOptions sourcemap=false", async () => {
+    await createClientEsbuildContext(baseBuild);
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.sourcemap).toBe(false);
+
+    const [pluginOpts, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
+    expect(pluginOpts.sourcemap).toBe(false);
+    expect(styleOpts.sourcemap).toBe(false);
+  });
+});
+
+describe("createClientEsbuildContext — PostCSS 설정", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("postcssPlugins 미전달 시 postcssConfiguration이 undefined", async () => {
+    await createClientEsbuildContext(baseBuild);
+    const [, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
+    expect(styleOpts.postcssConfiguration).toBeUndefined();
+  });
+
+  it("postcssConfigPath 미전달 시 pkgDir을 기본값으로 사용", async () => {
+    await createClientEsbuildContext({
+      ...baseBuild,
+      postcssPlugins: [["autoprefixer"]],
+    });
+    const [, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
+    expect(styleOpts.postcssConfiguration!.configPath).toBe(baseBuild.pkgDir);
+  });
+});
+
+describe("createClientEsbuildContext — SourceFileCache", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("SourceFileCache가 .angular/cache 경로로 생성됨", async () => {
+    await createClientEsbuildContext(baseDev);
+    expect(SourceFileCache).toHaveBeenCalledWith(
+      path.join("/workspace/packages/my-app", ".angular", "cache"),
+    );
+  });
+
+  it("sourceFileCache와 loadResultCache가 CompilerPluginOptions에 전달됨", async () => {
+    await createClientEsbuildContext(baseDev);
+    const [pluginOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
+    expect(pluginOpts.sourceFileCache).toBe(mockSourceFileCache);
+    expect(pluginOpts.loadResultCache).toBe(mockSourceFileCache.loadResultCache);
+  });
+});
+
+describe("createClientEsbuildContext — 추가 옵션", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("tsconfig 커스텀 경로 전달", async () => {
+    await createClientEsbuildContext({
+      ...baseDev,
+      tsconfig: "/workspace/packages/my-app/tsconfig.build.json",
+    });
+    const [pluginOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
+    expect(pluginOpts.tsconfig).toBe(
+      "/workspace/packages/my-app/tsconfig.build.json",
+    );
+  });
+
+  it("outdir 커스텀 경로 전달", async () => {
+    await createClientEsbuildContext({
+      ...baseDev,
+      outdir: "/custom/output",
+    });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.outdir).toBe("/custom/output");
+  });
+
+  it("추가 plugins가 esbuild plugins 배열에 포함됨", async () => {
+    const customPlugin = { name: "custom", setup: vi.fn() };
+    await createClientEsbuildContext({
+      ...baseDev,
+      plugins: [customPlugin as any],
+    });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.plugins).toContainEqual(customPlugin);
+  });
+
+  it("templateUpdates가 CompilerPluginOptions에 전달됨", async () => {
+    const updates = new Map([["comp1", "template1"]]);
+    await createClientEsbuildContext({
+      ...baseDev,
+      templateUpdates: updates,
+    });
+    const [pluginOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
+    expect(pluginOpts.templateUpdates).toBe(updates);
+  });
+});
+
+describe("createClientEsbuildContext — browserslist → target 변환", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("browserslist 미설정 시 esbuild target이 [es2022]", async () => {
+    await createClientEsbuildContext(baseDev);
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.target).toEqual(["es2022"]);
+  });
+
+  it("browserslist 미설정 시 BundleStylesheetOptions.target이 [es2022]", async () => {
+    await createClientEsbuildContext(baseDev);
+    const [, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
+    expect(styleOpts.target).toEqual(["es2022"]);
+  });
+
+  it("browserslist 문자열은 배열로 변환하여 browserslistToEsbuild에 전달", async () => {
+    vi.mocked(browserslistToEsbuild).mockReturnValueOnce(["chrome61"]);
+    await createClientEsbuildContext({ ...baseDev, browserslist: "Chrome 61" });
+    expect(browserslistToEsbuild).toHaveBeenCalledWith(["Chrome 61"]);
+  });
+
+  it("browserslist 배열은 그대로 browserslistToEsbuild에 전달", async () => {
+    vi.mocked(browserslistToEsbuild).mockReturnValueOnce(["chrome61", "firefox60"]);
+    await createClientEsbuildContext({
+      ...baseDev,
+      browserslist: ["Chrome 61", "Firefox 60"],
+    });
+    expect(browserslistToEsbuild).toHaveBeenCalledWith(["Chrome 61", "Firefox 60"]);
+  });
+
+  it("browserslistToEsbuild 결과가 esbuild target과 styleOptions.target에 동일하게 적용", async () => {
+    vi.mocked(browserslistToEsbuild).mockReturnValueOnce(["chrome61", "firefox60"]);
+    await createClientEsbuildContext({
+      ...baseDev,
+      browserslist: ["Chrome 61", "Firefox 60"],
+    });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    const [, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
+    expect(opts.target).toEqual(["chrome61", "firefox60"]);
+    expect(styleOpts.target).toEqual(["chrome61", "firefox60"]);
+  });
+});
+
+describe("createClientEsbuildContext — 출력 네이밍", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("dev 모드: entryNames이 [name]", async () => {
+    await createClientEsbuildContext(baseDev);
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.entryNames).toBe("[name]");
+  });
+
+  it("build 모드: entryNames이 [name]-[hash]", async () => {
+    await createClientEsbuildContext(baseBuild);
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.entryNames).toBe("[name]-[hash]");
+  });
+
+  it("chunkNames와 assetNames도 entryNames와 동일 패턴", async () => {
+    await createClientEsbuildContext(baseBuild);
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.chunkNames).toBe(opts.entryNames);
+    expect(opts.assetNames).toBe(opts.entryNames);
+  });
+});
+
+describe("createClientEsbuildContext — polyfills entryPoints", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("polyfills 1개 전달 시 main.ts 뒤에 추가", async () => {
+    await createClientEsbuildContext({
+      ...baseDev,
+      polyfills: ["src/polyfills.ts"],
+    });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.entryPoints).toEqual([
+      path.join(baseDev.pkgDir, "src", "main.ts"),
+      path.join(baseDev.pkgDir, "src/polyfills.ts"),
+    ]);
+  });
+
+  it("polyfills 여러 개 전달 시 모두 절대경로로 추가", async () => {
+    await createClientEsbuildContext({
+      ...baseDev,
+      polyfills: ["src/polyfills.ts", "src/zone-flags.ts"],
+    });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.entryPoints).toEqual([
+      path.join(baseDev.pkgDir, "src", "main.ts"),
+      path.join(baseDev.pkgDir, "src/polyfills.ts"),
+      path.join(baseDev.pkgDir, "src/zone-flags.ts"),
+    ]);
+  });
+});
+
+describe("createClientEsbuildContext — onEnd 플러그인", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  function captureOnEndCallback(
+    options: Parameters<typeof createClientEsbuildContext>[0],
+  ) {
+    return (async () => {
+      await createClientEsbuildContext(options);
+      const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+      const sdOnEndPlugin = opts.plugins!.find(
+        (p: any) => p.name === "sd-on-end",
+      )!;
+
+      let cb!: (result: any) => any;
+      (sdOnEndPlugin as any).setup({
+        onEnd(fn: (result: any) => any) {
+          cb = fn;
+        },
+      });
+      return cb;
+    })();
+  }
+
+  it("sd-on-end가 async onEnd의 반환 Promise를 그대로 return한다", async () => {
+    const asyncOnEnd = vi.fn().mockResolvedValue(undefined);
+    const cb = await captureOnEndCallback({ ...baseDev, onEnd: asyncOnEnd });
+
+    const result = cb({ errors: [], warnings: [] });
+    expect(result).toBeInstanceOf(Promise);
+  });
+
+  it("sd-on-end가 sync onEnd의 반환값(undefined)을 그대로 return한다", async () => {
+    const syncOnEnd = vi.fn();
+    const cb = await captureOnEndCallback({ ...baseDev, onEnd: syncOnEnd });
+
+    const result = cb({ errors: [], warnings: [] });
+    expect(result).toBeUndefined();
+  });
+
+  it("onEnd 전달 시 sd-on-end 플러그인이 plugins 마지막에 추가됨", async () => {
+    await createClientEsbuildContext({
+      ...baseDev,
+      onEnd: vi.fn(),
+    });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    const pluginNames = opts.plugins!.map((p: any) => p.name);
+    expect(pluginNames).toContain("sd-on-end");
+    expect(pluginNames[pluginNames.length - 1]).toBe("sd-on-end");
+  });
+
+  it("angularPlugin이 항상 plugins 첫 번째에 위치", async () => {
+    await createClientEsbuildContext({
+      ...baseDev,
+      plugins: [{ name: "custom", setup: vi.fn() } as any],
+      onEnd: vi.fn(),
+    });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.plugins![0]).toEqual(mockAngularPlugin);
+  });
+});
+
+describe("createClientEsbuildContext — tsconfig esbuild 옵션", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("tsconfig 미전달 시 esbuild에 pkgDir/tsconfig.json 전달", async () => {
+    await createClientEsbuildContext(baseDev);
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.tsconfig).toBe(
+      path.join("/workspace/packages/my-app", "tsconfig.json"),
+    );
+  });
+
+  it("tsconfig 커스텀 경로 전달 시 esbuild에도 동일 경로 전달", async () => {
+    await createClientEsbuildContext({
+      ...baseDev,
+      tsconfig: "/workspace/packages/my-app/tsconfig.build.json",
+    });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.tsconfig).toBe("/workspace/packages/my-app/tsconfig.build.json");
+  });
+});
+
+describe("createClientEsbuildContext — SCSS 플러그인 통합", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("sd-scss 플러그인이 plugins 배열에 포함됨", async () => {
+    await createClientEsbuildContext(baseDev);
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    const pluginNames = opts.plugins!.map((p: any) => p.name);
+    expect(pluginNames).toContain("sd-scss");
+  });
+
+  it("sd-scss 플러그인이 angularPlugin 다음, customPlugins 앞에 위치", async () => {
+    const customPlugin = { name: "custom", setup: vi.fn() };
+    await createClientEsbuildContext({
+      ...baseDev,
+      plugins: [customPlugin as any],
+    });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    const pluginNames = opts.plugins!.map((p: any) => p.name);
+
+    const angularIdx = pluginNames.indexOf("angular-compiler");
+    const scssIdx = pluginNames.indexOf("sd-scss");
+    const customIdx = pluginNames.indexOf("custom");
+
+    expect(scssIdx).toBe(angularIdx + 1);
+    expect(scssIdx).toBeLessThan(customIdx);
+  });
+});
+
+describe("createClientEsbuildContext — legacyModule 설정", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("legacyModule true → splitting false", async () => {
+    await createClientEsbuildContext({ ...baseDev, legacyModule: true });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.splitting).toBe(false);
+  });
+
+  it("legacyModule 미설정 → splitting true 유지", async () => {
+    await createClientEsbuildContext(baseDev);
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.splitting).toBe(true);
+  });
+
+  it("legacyModule true → supported['import-meta'] false", async () => {
+    await createClientEsbuildContext({ ...baseDev, legacyModule: true });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.supported).toEqual({ "import-meta": false });
+  });
+
+  it("legacyModule 미설정 → supported 미설정", async () => {
+    await createClientEsbuildContext(baseDev);
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.supported).toBeUndefined();
+  });
+
+  it("legacyModule true + env 설정 → define과 supported 공존", async () => {
+    await createClientEsbuildContext({
+      ...baseDev,
+      legacyModule: true,
+      env: { API_URL: "https://api.example.com" },
+    });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.define!["import.meta.env.API_URL"]).toBe(
+      JSON.stringify("https://api.example.com"),
+    );
+    expect(opts.supported).toEqual({ "import-meta": false });
+  });
+
+  it("legacyModule false → splitting true, supported 미설정", async () => {
+    await createClientEsbuildContext({ ...baseDev, legacyModule: false });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    expect(opts.splitting).toBe(true);
+    expect(opts.supported).toBeUndefined();
+  });
+});
+
+describe("createClientEsbuildContext — legacyModule dynamic import 스트립 플러그인", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("legacyModule true → sd-legacy-strip-dynamic-import 플러그인 추가", async () => {
+    await createClientEsbuildContext({ ...baseDev, legacyModule: true });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    const pluginNames = opts.plugins!.map((p: any) => p.name);
+    expect(pluginNames).toContain("sd-legacy-strip-dynamic-import");
+  });
+
+  it("legacyModule 미설정 → sd-legacy-strip-dynamic-import 플러그인 미추가", async () => {
+    await createClientEsbuildContext(baseDev);
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    const pluginNames = opts.plugins!.map((p: any) => p.name);
+    expect(pluginNames).not.toContain("sd-legacy-strip-dynamic-import");
+  });
+
+  async function captureStripOnEnd() {
+    await createClientEsbuildContext({ ...baseDev, legacyModule: true });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    const stripPlugin = opts.plugins!.find(
+      (p: any) => p.name === "sd-legacy-strip-dynamic-import",
+    )!;
+
+    let onEndCallback: (result: esbuildTypes.BuildResult) => Promise<void>;
+    (stripPlugin as any).setup({
+      onEnd(cb: (result: esbuildTypes.BuildResult) => Promise<void>) {
+        onEndCallback = cb;
+      },
+    });
+
+    const { promises: fsPromises } = await import("fs");
+    const readSpy = vi.spyOn(fsPromises, "readFile");
+    const writeSpy = vi.spyOn(fsPromises, "writeFile").mockResolvedValue();
+
+    return {
+      runOnEnd: (outputs: Record<string, unknown>, fileContent: string) => {
+        readSpy.mockResolvedValue(fileContent);
+        return onEndCallback!({
+          metafile: { inputs: {}, outputs },
+          errors: [],
+          warnings: [],
+          outputFiles: [],
+          mangleCache: {},
+        } as unknown as esbuildTypes.BuildResult);
+      },
+      readSpy,
+      writeSpy,
+      cleanup: () => {
+        readSpy.mockRestore();
+        writeSpy.mockRestore();
+      },
+    };
+  }
+
+  it("import() 포함 파일을 no-op 함수로 치환", async () => {
+    const { runOnEnd, readSpy, writeSpy, cleanup } = await captureStripOnEnd();
+
+    await runOnEnd(
+      {
+        "dist/main.js": { bytes: 100, inputs: {}, imports: [], exports: [] },
+        "dist/main.css": { bytes: 50, inputs: {}, imports: [], exports: [] },
+      },
+      'var x = import("./chunk.js");',
+    );
+
+    expect(readSpy).toHaveBeenCalledWith("dist/main.js", "utf-8");
+    expect(readSpy).not.toHaveBeenCalledWith("dist/main.css", "utf-8");
+    expect(writeSpy).toHaveBeenCalledWith(
+      "dist/main.js",
+      'var x = (function(){return Promise.reject(new Error("Dynamic import not supported"))})("./chunk.js");',
+    );
+    cleanup();
+  });
+
+  it("import() 없는 파일은 수정하지 않음", async () => {
+    const { runOnEnd, writeSpy, cleanup } = await captureStripOnEnd();
+
+    await runOnEnd(
+      { "dist/main.js": { bytes: 100, inputs: {}, imports: [], exports: [] } },
+      'var x = "no dynamic imports here";',
+    );
+
+    expect(writeSpy).not.toHaveBeenCalled();
+    cleanup();
+  });
+
+  it("여러 import() 호출을 모두 치환", async () => {
+    const { runOnEnd, writeSpy, cleanup } = await captureStripOnEnd();
+
+    await runOnEnd(
+      { "dist/main.js": { bytes: 100, inputs: {}, imports: [], exports: [] } },
+      'import("./a.js"); import ("./b.js");',
+    );
+
+    const written = writeSpy.mock.calls[0][1] as string;
+    const noopFn =
+      '(function(){return Promise.reject(new Error("Dynamic import not supported"))})';
+    expect(written).toContain(`${noopFn}("./a.js");`);
+    expect(written).toContain(`${noopFn}("./b.js");`);
+    cleanup();
+  });
+});

package/tests/utils/esbuild-client-config.verify.md

@@ -0,0 +1,26 @@
+# createClientEsbuildContext — LLM 검증
+
+## Feature 1.1a 검증 항목
+
+- [x] import 경로: `@angular/build/private`에서 `createCompilerPlugin`, `SourceFileCache`, `CompilerPluginOptions`, `BundleStylesheetOptions`를 정상 import — `private.d.ts` line 31-37에 모두 export 확인
+- [x] `createCompilerPlugin`의 2-param 시그니처(private export wrapper)와 일치하는 호출 — `createCompilerPlugin(pluginOptions, styleOptions)` 2개 인자로 호출 (private.d.ts의 wrapper 시그니처와 일치)
+- [x] `CompilerPluginOptions.sourcemap` 타입이 `boolean | 'external'` 범위 내 값 사용 — `isDev` (boolean)으로 전달, `true`/`false` 범위 내
+- [x] `BundleStylesheetOptions.sourcemap` 타입이 `boolean | 'external' | 'inline' | 'linked'` 범위 내 값 사용 — `isDev ? "linked" : false` 범위 내
+- [x] `sd-config.types.ts`의 `postCss.plugins` 타입이 Angular의 `PostcssConfiguration` 포맷과 일치 — `[string, (object | string)?][]` = Angular의 `[name: string, options?: object | string][]`
+- [x] `onEnd` 플러그인이 esbuild Plugin 규격(`name` + `setup`)을 준수 — `{ name: "sd-on-end", setup(build) { build.onEnd(...) } }` 규격 충족
+- [x] 패키지 루트 `index.ts`에서 신규 모듈 export 필요 여부 — 불필요. 기존 `esbuild-config.ts`도 내부 유틸로 export 안 함. `sd-config.types.ts`만 export 중
+
+## Feature 1.1b-2 검증 항목
+
+- [x] `browserslist-to-esbuild` import 정상 — `import browserslistToEsbuild from "browserslist-to-esbuild"` 추가. `vite-config.ts:5`와 동일한 패턴
+- [x] `browserslistToEsbuild` 반환값이 esbuild target 및 BundleStylesheetOptions.target에 동시 적용 — `esbuildTarget` 변수로 통합하여 두 곳에 사용 (line 51-56, 82, 122)
+- [x] 에셋 복사: `copyPublicFiles(pkgDir, false)` 시그니처가 build 모드 호출 가능 — `copy-public.ts:15` 시그니처 `(pkgDir: string, includeDev: boolean): Promise<void>` 확인. build 모드에서 `false` 전달 적합
+- [x] 에셋 감시: `watchPublicFiles(pkgDir, true)` 시그니처가 dev 모드 호출 가능 — `copy-public.ts:58` 시그니처 `(pkgDir: string, includeDev: boolean): Promise<FsWatcher | undefined>` 확인. dev 모드에서 `true` 전달 적합
+- [x] 에셋 복사 함수는 `createClientEsbuildContext` 외부 호출자 담당 (설계 결정 D4) — `createClientEsbuildContext` 내부에 `copyPublicFiles`/`watchPublicFiles` 호출 없음 확인. 실제 호출 통합은 Feature 3.1에서 수행
+
+## Feature 1.1b-1 검증 항목
+
+- [x] tsconfig 옵션이 CompilerPluginOptions와 esbuild context에 동일 기본값 사용 — 둘 다 `options.tsconfig ?? path.join(options.pkgDir, "tsconfig.json")`. CompilerPluginOptions(line 65)와 esbuild context(line 151)에서 동일 패턴
+- [x] esbuild tsconfig 옵션이 서버 빌드 패턴(D1)과 일치 — `esbuild-config.ts:94` `tsconfig: path.join(options.pkgDir, "tsconfig.json")`과 동일. 클라이언트는 추가로 `options.tsconfig` 커스텀 경로 지원 (기존 인터페이스에 이미 존재)
+- [x] scssPlugin loadPaths가 buildScssLoadPaths 패턴과 일치 — `ngtsc-build-core.ts:91-96`의 `[pkgDir/scss, cwd/node_modules]`와 `esbuild-client-config.ts:105-108`의 `[options.pkgDir/scss, options.cwd/node_modules]` 동일
+- [x] plugins 배열 순서가 구현계획과 일치 — `[angularPlugin, scssPlugin, ...customPlugins, ...onEndPlugin]` (line 153-169)

package/tests/utils/esbuild-config.spec.ts

@@ -10,7 +10,7 @@ vi.mock("fs/promises", () => ({
 }));
 
 const { createServerEsbuildOptions, createEnvBanner, writeChangedOutputFiles } =
-  await import("../../src/utils/esbuild-config");
+  await import("../../src/esbuild/esbuild-config");
 
 const { default: mockFs } = await import("fs/promises");
 
@@ -83,6 +83,16 @@ describe("createServerEsbuildOptions", () => {
     const result = createServerEsbuildOptions(baseOptions);
     expect(result.tsconfig).toBe(path.join("/pkg", "tsconfig.json"));
   });
+
+  it("enables linked sourcemap in dev mode", () => {
+    const result = createServerEsbuildOptions({ ...baseOptions, dev: true });
+    expect(result.sourcemap).toBe("linked");
+  });
+
+  it("does not enable sourcemap in production mode", () => {
+    const result = createServerEsbuildOptions(baseOptions);
+    expect(result.sourcemap).toBeUndefined();
+  });
 });
 
 describe("createEnvBanner", () => {