@simplysm/sd-cli 12.5.17 → 12.5.18

package/src/bundle-plugins/sdReactPlugin.ts

@@ -0,0 +1,160 @@
+import esbuild from "esbuild";
+import ts from "typescript";
+import path from "path";
+import { ISdTsCompilerResult, SdTsCompiler } from "../build-tools/SdTsCompiler";
+import { convertTypeScriptDiagnostic } from "@angular/build/src/tools/esbuild/angular/diagnostics";
+import postcss from "postcss";
+import { FsUtil } from "@simplysm/sd-core-node";
+import postcssUrl from "postcss-url";
+import postcssHas from "css-has-pseudo";
+import autoprefixer from "autoprefixer";
+
+export function sdReactPlugin(conf: {
+  pkgPath: string;
+  dev: boolean;
+  modifiedFileSet: Set<string>;
+  result: IReactPluginResultCache;
+}): esbuild.Plugin {
+  return {
+    name: "sd-ng-compiler",
+    setup: (build: esbuild.PluginBuild) => {
+      const compiler = new SdTsCompiler({
+        pkgPath: conf.pkgPath,
+        additionalOptions: { declaration: false },
+        isDevMode: conf.dev,
+        isForBundle: true,
+      });
+
+      let buildResult: ISdTsCompilerResult;
+      const outputContentsCacheMap = new Map<string, string | Uint8Array | undefined>();
+
+      //---------------------------
+
+      build.onStart(async () => {
+        compiler.invalidate(conf.modifiedFileSet);
+        for (const modifiedFile of conf.modifiedFileSet) {
+          outputContentsCacheMap.delete(modifiedFile);
+        }
+
+        buildResult = await compiler.buildAsync();
+
+        conf.result.watchFileSet = buildResult.watchFileSet;
+        conf.result.affectedFileSet = buildResult.affectedFileSet;
+        conf.result.program = buildResult.program;
+
+        //-- return err/warn
+        return {
+          errors: [
+            ...buildResult.typescriptDiagnostics
+              .filter((item) => item.category === ts.DiagnosticCategory.Error)
+              .map((item) => convertTypeScriptDiagnostic(ts, item)),
+            ...Array.from(buildResult.stylesheetBundlingResultMap.values()).flatMap((item) => item.errors),
+          ].filterExists(),
+          warnings: [
+            ...buildResult.typescriptDiagnostics
+              .filter((item) => item.category !== ts.DiagnosticCategory.Error)
+              .map((item) => convertTypeScriptDiagnostic(ts, item)),
+            // ...Array.from(buildResult.stylesheetResultMap.values()).flatMap(item => item.warnings)
+          ],
+        };
+      });
+
+      build.onLoad({ filter: /\.tsx?$/ }, (args) => {
+        const output = outputContentsCacheMap.get(path.normalize(args.path));
+        if (output != null) {
+          return { contents: output, loader: "js" };
+        }
+
+        const emittedJsFile = buildResult.emittedFilesCacheMap.get(path.normalize(args.path))?.last();
+        if (!emittedJsFile) {
+          throw new Error(`ts 빌더 결과 emit 파일이 존재하지 않습니다. ${args.path}`);
+        }
+
+        const contents = emittedJsFile.text;
+
+        outputContentsCacheMap.set(path.normalize(args.path), contents);
+
+        return { contents, loader: "js" };
+      });
+
+      build.onLoad({ filter: /\.[cm]?jsx?$/ }, (args) => {
+        conf.result.watchFileSet!.add(path.normalize(args.path));
+        return null;
+      });
+
+      build.onLoad({ filter: /\.css$/ }, async (args) => {
+        conf.result.watchFileSet!.add(path.normalize(args.path));
+        const output = outputContentsCacheMap.get(path.normalize(args.path));
+        if (output != null) {
+          return {
+            contents: output,
+            loader: "file",
+          };
+        }
+
+        const css = await FsUtil.readFileAsync(path.normalize(args.path));
+        const result = await postcss()
+          .use(
+            autoprefixer({
+              overrideBrowserslist: ["Chrome > 78"],
+            }),
+          )
+          .use(
+            postcssUrl({
+              url: "copy",
+            }),
+          )
+          .use(postcssHas())
+          .process(css, {
+            from: path.normalize(args.path),
+            to: path.resolve(conf.pkgPath, "dist", "media", path.basename(args.path)),
+          });
+
+        outputContentsCacheMap.set(path.normalize(args.path), result.css);
+
+        return { contents: result.css, loader: "file" };
+      });
+
+      build.onLoad(
+        {
+          filter: new RegExp(
+            "(" +
+              Object.keys(build.initialOptions.loader!)
+                .map((item) => "\\" + item)
+                .join("|") +
+              ")$",
+          ),
+        },
+        (args) => {
+          conf.result.watchFileSet!.add(path.normalize(args.path));
+          return null;
+        },
+      );
+
+      build.onEnd((result) => {
+        for (const { outputFiles, metafile } of buildResult.stylesheetBundlingResultMap.values()) {
+          result.outputFiles = result.outputFiles ?? [];
+          result.outputFiles.push(...outputFiles);
+
+          if (result.metafile && metafile) {
+            result.metafile.inputs = { ...result.metafile.inputs, ...metafile.inputs };
+            result.metafile.outputs = { ...result.metafile.outputs, ...metafile.outputs };
+          }
+        }
+
+        conf.result.outputFiles = result.outputFiles;
+        conf.result.metafile = result.metafile;
+
+        conf.modifiedFileSet.clear();
+      });
+    },
+  };
+}
+
+export interface IReactPluginResultCache {
+  watchFileSet?: Set<string>;
+  affectedFileSet?: Set<string>;
+  program?: ts.Program;
+  outputFiles?: esbuild.OutputFile[];
+  metafile?: esbuild.Metafile;
+}

package/src/entry/SdCliProject.ts

@@ -47,7 +47,9 @@ export class SdCliProject {
     if (!projNpmConf.workspaces) {
       throw new Error("프로젝트 package.json에 workspaces가 설정되어있지 않습니다.");
     }
-    const allPkgPaths = await projNpmConf.workspaces.mapManyAsync(async (item) => await FsUtil.globAsync(item));
+    const allPkgPaths = (
+      await projNpmConf.workspaces.mapManyAsync(async (item) => await FsUtil.globAsync(item))
+    ).filter((item) => !item.includes("."));
     let pkgPaths = allPkgPaths.filter((pkgPath) => path.basename(pkgPath) in projConf.packages);
     if (opt.pkgNames.length !== 0) {
       pkgPaths = pkgPaths.filter((pkgPath) => opt.pkgNames.includes(path.basename(pkgPath)));
@@ -330,7 +332,9 @@ export class SdCliProject {
     if (!projNpmConf.workspaces) {
       throw new Error("프로젝트 package.json에 workspaces가 설정되어있지 않습니다.");
     }
-    const allPkgPaths = await projNpmConf.workspaces.mapManyAsync(async (item) => await FsUtil.globAsync(item));
+    const allPkgPaths = (
+      await projNpmConf.workspaces.mapManyAsync(async (item) => await FsUtil.globAsync(item))
+    ).filter((item) => !item.includes("."));
     let pkgPaths = allPkgPaths.filter((pkgPath) => path.basename(pkgPath) in projConf.packages);
     if (opt.pkgNames.length !== 0) {
       pkgPaths = pkgPaths.filter((pkgPath) => opt.pkgNames.includes(path.basename(pkgPath)));

package/src/index.ts

@@ -4,6 +4,8 @@ export * from "./build-tools/SdCliNgRoutesFileGenerator";
 export * from "./build-tools/SdLinter";
 export * from "./build-tools/SdNgBundler";
 export * from "./build-tools/SdNgBundlerContext";
+export * from "./build-tools/SdReactBundler";
+export * from "./build-tools/SdReactBundlerContext";
 export * from "./build-tools/SdServerBundler";
 export * from "./build-tools/SdTsCompiler";
 export * from "./build-tools/SdTsLibBundler";
@@ -13,6 +15,7 @@ export * from "./builders/SdCliServerBuilder";
 export * from "./builders/SdCliTsLibBuilder";
 export * from "./bundle-plugins/KeysTransformer";
 export * from "./bundle-plugins/sdNgPlugin";
+export * from "./bundle-plugins/sdReactPlugin";
 export * from "./bundle-plugins/sdServerPlugin";
 export * from "./commons";
 export * from "./entry/SdCliElectron";

package/tsconfig.json

@@ -1,15 +1,9 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "lib": [
-      "ES2021"
-    ],
-    "outDir": "./dist"
+    "lib": ["ES2021"],
+    "outDir": "./dist",
+    "types": ["node", "eslint", "yargs"]
   },
-  "files": [
-    "src/index.ts",
-    "src/sd-cli.ts",
-    "src/build-cluster.ts",
-    "src/server-worker.ts"
-  ]
+  "files": ["./src/index.ts", "./src/sd-cli.ts", "./src/build-cluster.ts", "./src/server-worker.ts"]
 }

package/eslint.config.js

@@ -1 +0,0 @@
-export { default } from "../eslint-plugin/src/configs/typescript.js";