@simplysm/sd-cli 14.0.43 → 14.0.45

package/tests/esbuild/esbuild-postcss-plugin.acc.spec.ts

@@ -0,0 +1,152 @@
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import type esbuild from "esbuild";
+import fs from "fs";
+import path from "path";
+import os from "os";
+import type { AcceptedPlugin } from "postcss";
+import { createPostcssPlugin } from "../../src/esbuild/esbuild-postcss-plugin";
+
+/** esbuild 플러그인 lifecycle을 시뮬레이션하는 헬퍼 */
+function setupPlugin(plugin: esbuild.Plugin) {
+  let onEndCb:
+    | ((
+        result: esbuild.BuildResult,
+      ) => esbuild.OnEndResult | null | void | Promise<esbuild.OnEndResult | null | void>)
+    | undefined;
+
+  const mockBuild = {
+    onEnd(cb: typeof onEndCb) {
+      onEndCb = cb;
+    },
+  } as unknown as esbuild.PluginBuild;
+
+  void plugin.setup(mockBuild);
+
+  return {
+    async invokeOnEnd(result: Partial<esbuild.BuildResult>) {
+      return (
+        (await onEndCb?.({
+          errors: [],
+          warnings: [],
+          mangleCache: {},
+          outputFiles: [],
+          metafile: { inputs: {}, outputs: {} },
+          ...result,
+        } as esbuild.BuildResult)) ?? null
+      );
+    },
+  };
+}
+
+/** 테스트용 PostCSS 플러그인: 모든 CSS 앞에 주석을 추가 */
+function createTestPostcssPlugin(): AcceptedPlugin {
+  return {
+    postcssPlugin: "test-prefix",
+    Once(root) {
+      root.prepend({ text: "processed" });
+    },
+  };
+}
+
+/** ɵɵdefineComponent styles 배열을 포함하는 JS 코드를 생성 (실제 Angular 컴파일 출력 패턴) */
+function generateJsWithStyles(styles: string[]): string {
+  const stylesLiteral = styles.map((s) => JSON.stringify(s)).join(", ");
+  return [
+    `import * as i0 from "@angular/core";`,
+    `class MyComponent {}`,
+    `MyComponent.\u0275cmp = /*@__PURE__*/ i0.\u0275\u0275defineComponent({`,
+    `  type: MyComponent,`,
+    `  styles: [${stylesLiteral}],`,
+    `  template: function() {}`,
+    `});`,
+    `export { MyComponent };`,
+  ].join("\n");
+}
+
+describe("createPostcssPlugin — Acceptance Tests", () => {
+  let tmpDir: string;
+
+  beforeEach(() => {
+    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "postcss-test-"));
+  });
+
+  afterEach(() => {
+    fs.rmSync(tmpDir, { recursive: true, force: true });
+  });
+
+  it("replacements가 0건이면 파일 내용이 변경되지 않음", async () => {
+    // Given: ɵɵdefineComponent styles 배열이 없는 JS 파일
+    const jsContent = `const x = 1;\nexport default x;\n`;
+    const jsFile = path.join(tmpDir, "no-styles.js");
+    fs.writeFileSync(jsFile, jsContent, "utf-8");
+
+    const plugin = createPostcssPlugin({ plugins: [createTestPostcssPlugin()] });
+    const lifecycle = setupPlugin(plugin);
+
+    // When: PostCSS 처리를 시도
+    await lifecycle.invokeOnEnd({
+      metafile: { inputs: {}, outputs: { [jsFile]: {} as any } },
+    });
+
+    // Then: 파일 내용이 변경되지 않음
+    const result = fs.readFileSync(jsFile, "utf-8");
+    expect(result).toBe(jsContent);
+  });
+
+  it("replacements가 1건이면 PostCSS 처리된 CSS로 교체됨", async () => {
+    // Given: ɵɵdefineComponent styles 배열에 문자열 리터럴이 1개
+    const originalCss = ".host { color: red; }";
+    const jsContent = generateJsWithStyles([originalCss]);
+    const jsFile = path.join(tmpDir, "one-style.js");
+    fs.writeFileSync(jsFile, jsContent, "utf-8");
+
+    const plugin = createPostcssPlugin({ plugins: [createTestPostcssPlugin()] });
+    const lifecycle = setupPlugin(plugin);
+
+    // When: PostCSS 처리 수행
+    await lifecycle.invokeOnEnd({
+      metafile: { inputs: {}, outputs: { [jsFile]: {} as any } },
+    });
+
+    // Then: PostCSS 처리된 CSS가 파일에 반영됨
+    const result = fs.readFileSync(jsFile, "utf-8");
+    expect(result).toContain("/* processed */");
+    expect(result).toContain(".host { color: red; }");
+    // 파일 앞뒤의 JS 구조가 유지됨
+    expect(result).toContain("import");
+    expect(result).toContain("export");
+  });
+
+  it("replacements가 3건이면 모든 CSS가 PostCSS 처리됨", async () => {
+    // Given: ɵɵdefineComponent styles 배열에 문자열 리터럴이 3개
+    const styles = [
+      ".a { color: red; }",
+      ".b { color: blue; }",
+      ".c { color: green; }",
+    ];
+    const jsContent = generateJsWithStyles(styles);
+    const jsFile = path.join(tmpDir, "three-styles.js");
+    fs.writeFileSync(jsFile, jsContent, "utf-8");
+
+    const plugin = createPostcssPlugin({ plugins: [createTestPostcssPlugin()] });
+    const lifecycle = setupPlugin(plugin);
+
+    // When: PostCSS 처리 수행
+    await lifecycle.invokeOnEnd({
+      metafile: { inputs: {}, outputs: { [jsFile]: {} as any } },
+    });
+
+    // Then: 3개 모두 PostCSS 처리됨
+    const result = fs.readFileSync(jsFile, "utf-8");
+    // 3번의 "/* processed */" 주석이 삽입됨
+    const processedCount = (result.match(/\/\* processed \*\//g) ?? []).length;
+    expect(processedCount).toBe(3);
+    // 원본 CSS 내용이 모두 유지됨
+    expect(result).toContain("color: red");
+    expect(result).toContain("color: blue");
+    expect(result).toContain("color: green");
+    // JS 구조가 유지됨
+    expect(result).toContain("import");
+    expect(result).toContain("export");
+  });
+});

package/tests/esbuild/esbuild-worker-plugin-node.verify.md

@@ -0,0 +1,11 @@
+# import.meta.resolve Worker 패턴 — LLM 검증
+
+## 검증 항목
+
+- [x] `NODE_WORKER_PATTERN` 정규식이 상대 경로만 감지: `esbuild-worker-plugin.ts:25` — `(\.\.?\/[^"']+)` 패턴으로 `./` 또는 `../`로 시작하는 경로만 캡처. `"some-package"` 같은 절대 모듈 경로는 매칭되지 않음.
+- [x] `bundleWorker`에 platform 파라미터 추가: `esbuild-worker-plugin.ts:42` — `platform: esbuild.Platform` 파라미터 사용. 기존 `"browser"` 하드코딩 제거.
+- [x] 브라우저 Worker 패턴이 `platform: "browser"`로 빌드: `esbuild-worker-plugin.ts:137` — `processWorkerBundle(fullWorkerPath, "browser")` 호출. 기존 동작 유지.
+- [x] Node.js Worker 패턴이 메인 빌드의 platform 계승: `esbuild-worker-plugin.ts:149` — `build.initialOptions.platform ?? "browser"` 사용. 서버 빌드(platform: "node")에서는 "node"로 빌드.
+- [x] 경로 치환이 `new URL("path", import.meta.url).href` 형태: `esbuild-worker-plugin.ts:153` — `new URL("${workerCodePath}", import.meta.url).href` 반환. file:// URL을 반환하므로 core-node Worker 호환.
+- [x] 기존 브라우저 Worker 테스트 22개 모두 통과: `pnpm test --run` 결과 32개 전체 통과 (기존 22 + 신규 10).
+- [x] `external: undefined` 설정 유지: `esbuild-worker-plugin.ts:62` — 메인 빌드의 external이 Worker 번들에 상속되지 않음.

package/tests/esbuild/esbuild-worker-plugin.acc.spec.ts

@@ -0,0 +1,318 @@
+import { describe, it, expect } from "vitest";
+import esbuild from "esbuild";
+import path from "path";
+import fs from "fs";
+import os from "os";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const fixturesDir = path.join(__dirname, "fixtures", "worker-plugin");
+
+const { createWorkerBundlePlugin } = await import(
+  "../../src/esbuild/esbuild-worker-plugin.js"
+);
+
+/**
+ * 임시 디렉토리에 entry 파일을 생성하고 esbuild로 빌드한다.
+ * Worker fixture 파일은 fixturesDir에서 참조된다.
+ */
+async function buildWithPlugin(
+  entryContent: string,
+  options?: { write?: boolean; entryExt?: string },
+): Promise<esbuild.BuildResult & { outdir: string }> {
+  const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "worker-plugin-test-"));
+  const ext = options?.entryExt ?? ".js";
+  const entryFile = path.join(tmpDir, `entry${ext}`);
+
+  // Worker fixture 파일을 tmpDir에 복사 (entry에서 상대경로 참조 가능하도록)
+  for (const f of ["worker.js", "worker2.js", "shared-worker.js", "worker-error.js", "node-worker.js"]) {
+    const src = path.join(fixturesDir, f);
+    if (fs.existsSync(src)) {
+      fs.copyFileSync(src, path.join(tmpDir, f));
+    }
+  }
+
+  fs.writeFileSync(entryFile, entryContent);
+
+  const outdir = path.join(tmpDir, "dist");
+  const write = options?.write ?? false;
+
+  const result = await esbuild.build({
+    entryPoints: [entryFile],
+    bundle: true,
+    write,
+    outdir,
+    format: "esm",
+    platform: "browser",
+    metafile: true,
+    logLevel: "silent",
+    plugins: [createWorkerBundlePlugin()],
+  });
+
+  return { ...result, outdir };
+}
+
+/**
+ * Node.js platform으로 esbuild 빌드한다 (서버 빌드 시뮬레이션).
+ */
+async function buildNodeWithPlugin(
+  entryContent: string,
+  options?: { write?: boolean },
+): Promise<esbuild.BuildResult & { outdir: string }> {
+  const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "worker-plugin-node-test-"));
+  const entryFile = path.join(tmpDir, "entry.js");
+
+  for (const f of ["worker.js", "worker2.js", "shared-worker.js", "worker-error.js", "node-worker.js"]) {
+    const src = path.join(fixturesDir, f);
+    if (fs.existsSync(src)) {
+      fs.copyFileSync(src, path.join(tmpDir, f));
+    }
+  }
+
+  fs.writeFileSync(entryFile, entryContent);
+
+  const outdir = path.join(tmpDir, "dist");
+  const write = options?.write ?? false;
+
+  const result = await esbuild.build({
+    entryPoints: [entryFile],
+    bundle: true,
+    write,
+    outdir,
+    format: "esm",
+    platform: "node",
+    metafile: true,
+    logLevel: "silent",
+    plugins: [createWorkerBundlePlugin()],
+  });
+
+  return { ...result, outdir };
+}
+
+describe("esbuild Worker Bundle Plugin — Acceptance", () => {
+  it("JS 파일의 Worker 패턴을 감지하여 번들링하고 URL을 치환한다", async () => {
+    const result = await buildWithPlugin(
+      'const w = new Worker(new URL("./worker.js", import.meta.url));',
+    );
+
+    expect(result.errors).toHaveLength(0);
+
+    const mainOutput = result.outputFiles!.find((f) => path.basename(f.path).startsWith("entry"));
+    expect(mainOutput).toBeDefined();
+    const content = mainOutput!.text;
+
+    // 원본 경로가 치환됨
+    expect(content).not.toContain("./worker.js");
+    // worker-[HASH].js 패턴으로 치환
+    expect(content).toMatch(/worker-[A-Z0-9]+\.js/i);
+    // { type: "module" } 추가됨
+    expect(content).toContain("module");
+
+    // Worker 번들 파일이 outputFiles에 포함됨
+    const workerOutput = result.outputFiles!.find((f) =>
+      /worker-[a-z0-9]+\.js$/i.test(path.basename(f.path)),
+    );
+    expect(workerOutput).toBeDefined();
+  });
+
+  it("SharedWorker 패턴을 감지하여 번들링하고 URL을 치환한다", async () => {
+    const result = await buildWithPlugin(
+      'const sw = new SharedWorker(new URL("./shared-worker.js", import.meta.url));',
+    );
+
+    expect(result.errors).toHaveLength(0);
+
+    const mainOutput = result.outputFiles!.find((f) => path.basename(f.path).startsWith("entry"));
+    const content = mainOutput!.text;
+
+    expect(content).not.toContain("./shared-worker.js");
+    expect(content).toMatch(/worker-[A-Z0-9]+\.js/i);
+  });
+
+  it("TS 파일의 Worker 패턴을 감지하여 번들링한다", async () => {
+    const result = await buildWithPlugin(
+      'const w: Worker = new Worker(new URL("./worker.js", import.meta.url));',
+      { entryExt: ".ts" },
+    );
+
+    expect(result.errors).toHaveLength(0);
+
+    const mainOutput = result.outputFiles!.find((f) => path.basename(f.path).startsWith("entry"));
+    const content = mainOutput!.text;
+
+    expect(content).not.toContain("./worker.js");
+    expect(content).toMatch(/worker-[A-Z0-9]+\.js/i);
+  });
+
+  it("Worker 패턴 없는 파일은 변환 없이 통과한다", async () => {
+    const result = await buildWithPlugin(
+      'console.log("no worker");',
+    );
+
+    expect(result.errors).toHaveLength(0);
+
+    const mainOutput = result.outputFiles!.find((f) => path.basename(f.path).startsWith("entry"));
+    const content = mainOutput!.text;
+
+    expect(content).toContain("no worker");
+    expect(content).not.toMatch(/worker-[A-Z0-9]+\.js/i);
+  });
+
+  it("한 파일에 복수 Worker 패턴이 있으면 모두 번들링한다", async () => {
+    const result = await buildWithPlugin(
+      [
+        'const w1 = new Worker(new URL("./worker.js", import.meta.url));',
+        'const w2 = new Worker(new URL("./worker2.js", import.meta.url));',
+      ].join("\n"),
+    );
+
+    expect(result.errors).toHaveLength(0);
+
+    const mainOutput = result.outputFiles!.find((f) => path.basename(f.path).startsWith("entry"));
+    const content = mainOutput!.text;
+
+    expect(content).not.toContain("./worker.js");
+    expect(content).not.toContain("./worker2.js");
+
+    // 2개의 서로 다른 worker 번들이 있어야 함
+    const workerOutputs = result.outputFiles!.filter((f) =>
+      /worker-[a-z0-9]+\.js$/i.test(path.basename(f.path)),
+    );
+    expect(workerOutputs.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("기존 옵션이 있으면 유지하고 URL 경로만 치환한다", async () => {
+    const result = await buildWithPlugin(
+      'const w = new Worker(new URL("./worker.js", import.meta.url), { type: "module" });',
+    );
+
+    expect(result.errors).toHaveLength(0);
+
+    const mainOutput = result.outputFiles!.find((f) => path.basename(f.path).startsWith("entry"));
+    const content = mainOutput!.text;
+
+    expect(content).not.toContain("./worker.js");
+    expect(content).toMatch(/worker-[A-Z0-9]+\.js/i);
+    // 기존 { type: "module" }이 유지됨
+    expect(content).toContain("module");
+  });
+
+  it("Worker 빌드 에러가 메인 빌드로 전파된다", async () => {
+    try {
+      await buildWithPlugin(
+        'const w = new Worker(new URL("./worker-error.js", import.meta.url));',
+      );
+      expect.fail("빌드 에러가 발생해야 한다");
+    } catch (e: unknown) {
+      // esbuild.build()는 에러 시 errors 프로퍼티를 가진 예외를 throw
+      const buildError = e as { errors?: esbuild.Message[] };
+      expect(buildError.errors).toBeDefined();
+      expect(buildError.errors!.length).toBeGreaterThan(0);
+    }
+  });
+
+  it("write: true 빌드에서 Worker 파일이 디스크에 기록된다", async () => {
+    const result = await buildWithPlugin(
+      'const w = new Worker(new URL("./worker.js", import.meta.url));',
+      { write: true },
+    );
+
+    expect(result.errors).toHaveLength(0);
+
+    // outdir에 worker-[HASH].js 파일이 존재
+    const files = fs.readdirSync(result.outdir);
+    const workerFile = files.find((f) => /worker-[a-z0-9]+\.js$/i.test(f));
+    expect(workerFile).toBeDefined();
+  });
+
+  it("write: false 빌드에서 Worker 파일이 outputFiles에 포함된다", async () => {
+    const result = await buildWithPlugin(
+      'const w = new Worker(new URL("./worker.js", import.meta.url));',
+      { write: false },
+    );
+
+    expect(result.errors).toHaveLength(0);
+
+    const workerOutput = result.outputFiles!.find((f) =>
+      /worker-[a-z0-9]+\.js$/i.test(path.basename(f.path)),
+    );
+    expect(workerOutput).toBeDefined();
+  });
+});
+
+describe("esbuild Worker Bundle Plugin — Node.js import.meta.resolve Acceptance", () => {
+  it("import.meta.resolve 패턴을 감지하여 번들링하고 경로를 치환한다", async () => {
+    const result = await buildNodeWithPlugin(
+      'const p = import.meta.resolve("./node-worker.js");',
+    );
+
+    expect(result.errors).toHaveLength(0);
+
+    const mainOutput = result.outputFiles!.find((f) => path.basename(f.path).startsWith("entry"));
+    expect(mainOutput).toBeDefined();
+    const content = mainOutput!.text;
+
+    // import.meta.resolve가 치환됨
+    expect(content).not.toContain("import.meta.resolve");
+    // new URL("worker-HASH.js", import.meta.url).href 패턴으로 치환
+    expect(content).toMatch(/new URL\("worker-[A-Z0-9]+\.js",\s*import\.meta\.url\)\.href/i);
+
+    // Worker 번들 파일이 outputFiles에 포함됨
+    const workerOutput = result.outputFiles!.find((f) =>
+      /worker-[a-z0-9]+\.js$/i.test(path.basename(f.path)),
+    );
+    expect(workerOutput).toBeDefined();
+  });
+
+  it("절대 모듈 경로의 import.meta.resolve는 무시한다", async () => {
+    const result = await buildNodeWithPlugin(
+      'const p = import.meta.resolve("path");',
+    );
+
+    expect(result.errors).toHaveLength(0);
+
+    const mainOutput = result.outputFiles!.find((f) => path.basename(f.path).startsWith("entry"));
+    const content = mainOutput!.text;
+
+    // import.meta.resolve가 그대로 남음 (치환되지 않음)
+    expect(content).toContain("import.meta.resolve");
+  });
+
+  it("브라우저 + Node.js Worker 패턴 공존 시 모두 번들링한다", async () => {
+    const result = await buildNodeWithPlugin(
+      [
+        'const w = new Worker(new URL("./worker.js", import.meta.url));',
+        'const p = import.meta.resolve("./node-worker.js");',
+      ].join("\n"),
+    );
+
+    expect(result.errors).toHaveLength(0);
+
+    const mainOutput = result.outputFiles!.find((f) => path.basename(f.path).startsWith("entry"));
+    const content = mainOutput!.text;
+
+    // 브라우저 Worker 치환
+    expect(content).not.toContain('"./worker.js"');
+    // Node.js resolve 치환
+    expect(content).not.toContain("import.meta.resolve");
+
+    // 최소 2개의 worker 번들
+    const workerOutputs = result.outputFiles!.filter((f) =>
+      /worker-[a-z0-9]+\.js$/i.test(path.basename(f.path)),
+    );
+    expect(workerOutputs.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("write: true 빌드에서 Worker 파일이 디스크에 기록된다", async () => {
+    const result = await buildNodeWithPlugin(
+      'const p = import.meta.resolve("./node-worker.js");',
+      { write: true },
+    );
+
+    expect(result.errors).toHaveLength(0);
+
+    const files = fs.readdirSync(result.outdir);
+    const workerFile = files.find((f) => /worker-[a-z0-9]+\.js$/i.test(f));
+    expect(workerFile).toBeDefined();
+  });
+});