@simplysm/sd-cli 12.13.13 → 12.13.15

package/src/pkg-builders/client/sd-ng.bundler.ts

@@ -26,17 +26,11 @@ import {
 import { Entrypoint } from "@angular/build/src/utils/index-file/augment-index-html";
 import { CrossOrigin } from "@angular/build/src/builders/application/schema";
 import { augmentAppWithServiceWorkerEsbuild } from "@angular/build/src/utils/service-worker";
-import {
-  createSourcemapIgnorelistPlugin,
-} from "@angular/build/src/tools/esbuild/sourcemap-ignorelist-plugin";
-import {
-  StylesheetPluginFactory,
-} from "@angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory";
+import { createSourcemapIgnorelistPlugin } from "@angular/build/src/tools/esbuild/sourcemap-ignorelist-plugin";
+import { StylesheetPluginFactory } from "@angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory";
 import { SassStylesheetLanguage } from "@angular/build/src/tools/esbuild/stylesheets/sass-language";
 import { CssStylesheetLanguage } from "@angular/build/src/tools/esbuild/stylesheets/css-language";
-import {
-  createCssResourcePlugin,
-} from "@angular/build/src/tools/esbuild/stylesheets/css-resource-plugin";
+import { createCssResourcePlugin } from "@angular/build/src/tools/esbuild/stylesheets/css-resource-plugin";
 import { resolveAssets } from "@angular/build/src/utils/resolve-assets";
 import { createSdNgPlugin } from "./sd-ng.plugin-creator";
 import { SdCliPerformanceTimer } from "../../utils/sd-cli-performance-time";
@@ -73,6 +67,8 @@ export class SdNgBundler {
   constructor(
     private readonly _opt: {
       dev: boolean;
+      emitOnly: boolean;
+      noEmit: boolean;
       outputPath: TNormPath;
       pkgPath: TNormPath;
       builderType: string;
@@ -118,9 +114,9 @@ export class SdNgBundler {
     if (!this.#contexts) {
       this.#contexts = perf.run("get contexts", () => [
         this.#getAppContext(),
-        ...FsUtils.exists(path.resolve(this._opt.pkgPath, "src/styles.scss")) ? [
-          this.#getStyleContext(),
-        ] : [],
+        ...(FsUtils.exists(path.resolve(this._opt.pkgPath, "src/styles.scss"))
+          ? [this.#getStyleContext()]
+          : []),
         ...(this._opt.builderType === "electron" ? [this.#getElectronMainContext()] : []),
       ]);
     }
@@ -137,8 +133,8 @@ export class SdNgBundler {
     this.#debug(`convert result...`);
 
     const outputFiles: BuildOutputFile[] = bundlingResults.mapMany(
-      (item) => item.outputFiles?.map((file) => convertOutputFile(file, BuildOutputFileType.Root))
-        ?? [],
+      (item) =>
+        item.outputFiles?.map((file) => convertOutputFile(file, BuildOutputFileType.Root)) ?? [],
     );
     const initialFiles = new Map<string, InitialFileRecord>();
     const metafile: {
@@ -185,11 +181,9 @@ export class SdNgBundler {
           type: "gen-index",
         });
       }
-      outputFiles.push(createOutputFile(
-        "index.html",
-        genIndexHtmlResult.csrContent,
-        BuildOutputFileType.Root,
-      ));
+      outputFiles.push(
+        createOutputFile("index.html", genIndexHtmlResult.csrContent, BuildOutputFileType.Root),
+      );
     });
 
     await perf.run("assets", async () => {
@@ -215,14 +209,11 @@ export class SdNgBundler {
       await perf.run("prepare service worker", async () => {
         try {
           const serviceWorkerResult = await this.#genServiceWorkerAsync(outputFiles, assetFiles);
-          outputFiles.push(createOutputFile(
-            "ngsw.json",
-            serviceWorkerResult.manifest,
-            BuildOutputFileType.Root,
-          ));
+          outputFiles.push(
+            createOutputFile("ngsw.json", serviceWorkerResult.manifest, BuildOutputFileType.Root),
+          );
           assetFiles.push(...serviceWorkerResult.assetFiles);
-        }
-        catch (err) {
+        } catch (err) {
           results.push({
             filePath: undefined,
             line: undefined,
@@ -248,7 +239,7 @@ export class SdNgBundler {
         if (prevHash !== currHash) {
           FsUtils.writeFile(distFilePath, outputFile.contents);
           this.#outputHashCache.set(distFilePath, currHash);
-          emitFileSet.add(PathUtils.norm(outputFile.path));
+          emitFileSet.add(distFilePath);
         }
       }
       for (const assetFile of assetFiles) {
@@ -257,7 +248,7 @@ export class SdNgBundler {
         if (prevHash !== currHash) {
           FsUtils.copy(assetFile.source, path.resolve(this._opt.outputPath, assetFile.destination));
           this.#outputHashCache.set(PathUtils.norm(assetFile.source), currHash);
-          emitFileSet.add(PathUtils.norm(assetFile.destination));
+          emitFileSet.add(PathUtils.norm(this._opt.outputPath, assetFile.destination));
         }
       }
     });
@@ -297,9 +288,7 @@ export class SdNgBundler {
         ["polyfills", true],
         ["styles", false],
         ["main", true],
-        ...(this._opt.builderType === "cordova" ? [
-          ["cordova-entry", true] as Entrypoint,
-        ] : []),
+        ...(this._opt.builderType === "cordova" ? [["cordova-entry", true] as Entrypoint] : []),
       ],
       sri: false,
       optimization: {
@@ -360,29 +349,30 @@ export class SdNgBundler {
         { input: "public", glob: "**/*", output: "." },
         ...(this._opt.dev ? [{ input: "public-dev", glob: "**/*", output: "." }] : []),
         ...(this._opt.dev && this._opt.builderType === "cordova"
-          ? Object.keys(this._opt.cordovaConfig?.platform ?? { browser: {} })
-            .mapMany((platform) => [
-              {
-                input: `.cordova/platforms/${platform}/platform_www/plugins`,
-                glob: "**/*",
-                output: `cordova-${platform}/plugins`,
-              },
-              {
-                input: `.cordova/platforms/${platform}/platform_www`,
-                glob: "cordova.js",
-                output: `cordova-${platform}`,
-              },
-              {
-                input: `.cordova/platforms/${platform}/platform_www`,
-                glob: "cordova_plugins.js",
-                output: `cordova-${platform}`,
-              },
-              {
-                input: `.cordova/platforms/${platform}/www`,
-                glob: "config.xml",
-                output: `cordova-${platform}`,
-              },
-            ])
+          ? Object.keys(this._opt.cordovaConfig?.platform ?? { browser: {} }).mapMany(
+              (platform) => [
+                {
+                  input: `.cordova/platforms/${platform}/platform_www/plugins`,
+                  glob: "**/*",
+                  output: `cordova-${platform}/plugins`,
+                },
+                {
+                  input: `.cordova/platforms/${platform}/platform_www`,
+                  glob: "cordova.js",
+                  output: `cordova-${platform}`,
+                },
+                {
+                  input: `.cordova/platforms/${platform}/platform_www`,
+                  glob: "cordova_plugins.js",
+                  output: `cordova-${platform}`,
+                },
+                {
+                  input: `.cordova/platforms/${platform}/www`,
+                  glob: "config.xml",
+                  output: `cordova-${platform}`,
+                },
+              ],
+            )
           : []),
       ],
       this._opt.pkgPath,
@@ -413,10 +403,9 @@ export class SdNgBundler {
   }
 
   #getAppContext() {
-    const workerEntries = FsUtils.glob(path.resolve(this._opt.pkgPath, "src/workers/*.ts"))
-      .toObject(
-        (p) => "workers/" + path.basename(p, path.extname(p)),
-      );
+    const workerEntries = FsUtils.glob(
+      path.resolve(this._opt.pkgPath, "src/workers/*.ts"),
+    ).toObject((p) => "workers/" + path.basename(p, path.extname(p)));
 
     return new SdNgBundlerContext(this._opt.pkgPath, {
       absWorkingDir: this._opt.pkgPath,
@@ -449,26 +438,28 @@ export class SdNgBundler {
         "process.env.NODE_ENV": JSON.stringify(this._opt.dev ? "development" : "production"),
         ...(this._opt.env
           ? Object.keys(this._opt.env).toObject(
-            (key) => `process.env.${key}`,
-            (key) => JSON.stringify(this._opt.env![key]),
-          )
+              (key) => `process.env.${key}`,
+              (key) => JSON.stringify(this._opt.env![key]),
+            )
           : {}),
       },
       mainFields: ["es2020", "es2015", "browser", "module", "main"],
       entryNames: "[dir]/[name]",
       entryPoints: {
         main: this.#mainFilePath,
-        ...FsUtils.exists(path.resolve(this._opt.pkgPath, "src/polyfills.ts")) ? {
-          polyfills: path.resolve(this._opt.pkgPath, "src/polyfills.ts"),
-        } : {},
+        ...(FsUtils.exists(path.resolve(this._opt.pkgPath, "src/polyfills.ts"))
+          ? {
+              polyfills: path.resolve(this._opt.pkgPath, "src/polyfills.ts"),
+            }
+          : {}),
 
         ...(this._opt.builderType === "cordova"
           ? {
-            "cordova-entry": path.resolve(
-              path.dirname(fileURLToPath(import.meta.url)),
-              `../../../lib/cordova-entry.js`,
-            ),
-          }
+              "cordova-entry": path.resolve(
+                path.dirname(fileURLToPath(import.meta.url)),
+                `../../../lib/cordova-entry.js`,
+              ),
+            }
           : {}),
         ...workerEntries,
       },
@@ -502,25 +493,28 @@ export class SdNgBundler {
       },
       ...(this._opt.builderType === "electron"
         ? {
-          platform: "node",
-          target: "node20",
-          external: ["electron", ...nodeModule.builtinModules, ...this._opt.external],
-        }
+            platform: "node",
+            target: "node20",
+            external: ["electron", ...nodeModule.builtinModules, ...this._opt.external],
+          }
         : {
-          platform: "browser",
-          target: this.#browserTarget,
-          format: "esm",
-          splitting: true,
-          inject: [
-            PathUtils.posix(fileURLToPath(import.meta.resolve(
-              "node-stdlib-browser/helpers/esbuild/shim"))),
-          ],
-        }),
+            platform: "browser",
+            target: this.#browserTarget,
+            format: "esm",
+            splitting: true,
+            inject: [
+              PathUtils.posix(
+                fileURLToPath(import.meta.resolve("node-stdlib-browser/helpers/esbuild/shim")),
+              ),
+            ],
+          }),
       plugins: [
         createSourcemapIgnorelistPlugin(),
         createSdNgPlugin({
           modifiedFileSet: this.#modifiedFileSet,
           dev: this._opt.dev,
+          emitOnly: this._opt.emitOnly,
+          noEmit: this._opt.noEmit,
           pkgPath: this._opt.pkgPath,
           result: this.#ngResultCache,
           watchScopePathSet: this._opt.watchScopePathSet,
@@ -605,9 +599,9 @@ export class SdNgBundler {
         "process.env.NODE_ENV": JSON.stringify(this._opt.dev ? "development" : "production"),
         ...(this._opt.env
           ? Object.keys(this._opt.env).toObject(
-            (key) => `process.env.${key}`,
-            (key) => JSON.stringify(this._opt.env![key]),
-          )
+              (key) => `process.env.${key}`,
+              (key) => JSON.stringify(this._opt.env![key]),
+            )
           : {}),
       },
       platform: "node",

package/src/pkg-builders/client/sd-ng.plugin-creator.ts

@@ -2,7 +2,7 @@ import esbuild from "esbuild";
 import path from "path";
 import os from "os";
 import { JavaScriptTransformer } from "@angular/build/src/tools/esbuild/javascript-transformer";
-import { PathUtils, SdLogger, TNormPath } from "@simplysm/sd-core-node";
+import { FsUtils, PathUtils, SdLogger, TNormPath } from "@simplysm/sd-core-node";
 import { SdCliPerformanceTimer } from "../../utils/sd-cli-performance-time";
 import { SdCliConvertMessageUtils } from "../../utils/sd-cli-convert-message.utils";
 import { ISdCliNgPluginResultCache } from "../../types/build-plugin.types";
@@ -13,6 +13,8 @@ import { ScopePathSet } from "../commons/scope-path";
 export function createSdNgPlugin(conf: {
   pkgPath: TNormPath;
   dev: boolean;
+  emitOnly: boolean;
+  noEmit: boolean;
   modifiedFileSet: Set<TNormPath>;
   result: ISdCliNgPluginResultCache;
   watchScopePathSet: ScopePathSet;
@@ -32,6 +34,8 @@ export function createSdNgPlugin(conf: {
         additionalOptions: { declaration: false },
         isDevMode: conf.dev,
         isForBundle: true,
+        isEmitOnly: conf.emitOnly,
+        isNoEmit: conf.noEmit,
         watchScopePathSet: conf.watchScopePathSet,
       });
 
@@ -41,14 +45,16 @@ export function createSdNgPlugin(conf: {
       //-- js babel transformer
       const javascriptTransformer = new JavaScriptTransformer(
         {
-          thirdPartySourcemaps: conf.dev,
+          thirdPartySourcemaps: false, //conf.dev,
           sourcemap: conf.dev,
           jit: false,
-          advancedOptimizations: true,
+          advancedOptimizations: !conf.dev,
         },
-        os.cpus().length,
+        Math.floor((os.cpus().length * 2) / 3),
       );
 
+      let cssStore = new Map<TNormPath, Buffer>();
+
       //---------------------------
 
       build.onStart(async () => {
@@ -61,6 +67,8 @@ export function createSdNgPlugin(conf: {
 
           tsCompileResult = await tsCompiler.compileAsync(conf.modifiedFileSet);
 
+          cssStore.clear();
+
           conf.result.watchFileSet = tsCompileResult.watchFileSet;
           conf.result.affectedFileSet = tsCompileResult.affectedFileSet;
 
@@ -85,36 +93,90 @@ export function createSdNgPlugin(conf: {
           };
         });
 
-        perf.start("transform & bundling");
+        perf.start("esbuild transform & bundling");
         return res;
       });
 
+      build.onResolve({ filter: /\.css$/ }, (args) => {
+        if (args.path.startsWith("sd-css-asset:")) return;
+        return {
+          path: path.resolve(args.resolveDir, args.path),
+          namespace: "sd-css",
+        };
+      });
+
+      build.onLoad({ filter: /\.css$/, namespace: "sd-css" }, async (args) => {
+        const code = /* language=javascript */ `
+import href from "sd-css-asset:${PathUtils.posix(args.path)}"
+(function __sdEnsureStyle(href) {
+  let link = document.querySelector('link[data-sd-style="' + href + '"]');
+  if (link) return;
+  link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.setAttribute('data-sd-style', href);
+  link.href = href;
+  document.head.appendChild(link);
+})(href);`;
+
+        if (FsUtils.exists(args.path)) {
+          const css = await FsUtils.readFileBufferAsync(args.path);
+          cssStore.set(PathUtils.norm(args.path), css);
+        }
+
+        return { contents: code, loader: "js", resolveDir: path.dirname(args.path) };
+      });
+
+      build.onResolve({ filter: /^sd-css-asset:/ }, (args) => {
+        const real = args.path.replace(/^sd-css-asset:/, "");
+        return { path: real, namespace: "sd-css-asset" };
+      });
+
+      build.onLoad({ filter: /\.css$/, namespace: "sd-css-asset" }, (args) => {
+        const cssContent = cssStore.get(
+          PathUtils.norm(args.path.replace(/[\\\/]src[\\\/]/, "\\dist\\")),
+        );
+        if (cssContent == null) {
+          return { errors: [{ text: `Missing CSS for ${PathUtils.norm(args.path)}` }] };
+        }
+
+        return {
+          contents: cssContent,
+          loader: "file",
+          resolveDir: path.dirname(args.path),
+        };
+      });
+
       build.onLoad({ filter: /\.ts$/ }, async (args) => {
+        const emittedFiles = tsCompileResult.emittedFilesCacheMap.get(PathUtils.norm(args.path));
+
+        try {
+          const css = emittedFiles?.single((item) => Boolean(item.outAbsPath?.endsWith(".css")));
+          if (css) {
+            cssStore.set(PathUtils.norm(css.outAbsPath!), Buffer.from(css.text));
+          }
+        } catch (err) {
+          console.error(
+            emittedFiles?.map((item) => item.outAbsPath),
+            err,
+          );
+          return { errors: [{ text: err?.message ?? String(err) }] };
+        }
+
         const output = outputContentsCacheMap.get(PathUtils.norm(args.path));
         if (output != null) {
           return { contents: output, loader: "js" };
         }
 
-        const emittedJsFile = tsCompileResult.emittedFilesCacheMap.get(PathUtils.norm(args.path))?.last();
-        /*if (!emittedJsFile) {
-          return {
-            errors: [
-              {
-                text: `ts 빌더 결과 emit 파일이 존재하지 않습니다. ${args.path}`,
-              },
-            ],
-          };
-        }
-        const contents = emittedJsFile.text;*/
-
-        const contents = emittedJsFile?.text ?? "";
+        const contents = emittedFiles?.last()?.text ?? "";
 
         const { sideEffects } = await build.resolve(args.path, {
           kind: "import-statement",
           resolveDir: build.initialOptions.absWorkingDir ?? "",
         });
 
-        const newContents = await javascriptTransformer.transformData(args.path, contents, true, sideEffects);
+        const newContents = await perf.run("esbuild transform:js:*.ts", async () => {
+          return await javascriptTransformer.transformData(args.path, contents, true, sideEffects);
+        });
 
         outputContentsCacheMap.set(PathUtils.norm(args.path), newContents);
 
@@ -135,7 +197,22 @@ export function createSdNgPlugin(conf: {
         });
 
         try {
-          const newContents = await javascriptTransformer.transformFile(args.path, false, sideEffects);
+          const newContents = await perf.run("esbuild transform:js:*.js", async () => {
+            /*return /\.min\.[cm]?js$/.test(args.path)
+              ? await FsUtils.readFileBufferAsync(args.path)
+              : await javascriptTransformer.transformFile(args.path, false, sideEffects);*/
+
+            const contents = await FsUtils.readFileBufferAsync(args.path);
+
+            return args.path.includes("node_modules") && !args.path.includes("angular")
+              ? contents
+              : await javascriptTransformer.transformData(
+                  args.path,
+                  contents.toString(),
+                  false,
+                  sideEffects,
+                );
+          });
 
           outputContentsCacheMap.set(PathUtils.norm(args.path), newContents);
 
@@ -144,31 +221,28 @@ export function createSdNgPlugin(conf: {
             loader: "js",
           };
         } catch (err) {
-          return {
+          return { errors: [{ text: err?.message ?? String(err) }] };
+          /*return {
             contents: `console.error(${JSON.stringify(err.message)});`,
             loader: "js",
-          };
+          };*/
         }
       });
 
-      build.onLoad(
-        {
-          filter: new RegExp(
-            "(" +
-              Object.keys(build.initialOptions.loader!)
-                .map((item) => "\\" + item)
-                .join("|") +
-              ")$",
-          ),
-        },
-        (args) => {
-          conf.result.watchFileSet!.add(PathUtils.norm(args.path));
-          return null;
-        },
+      const otherLoaderFilter = new RegExp(
+        "(" +
+          Object.keys(build.initialOptions.loader ?? {})
+            .map((ext) => "\\" + ext)
+            .join("|") +
+          ")$",
       );
+      build.onLoad({ filter: otherLoaderFilter }, (args) => {
+        conf.result.watchFileSet!.add(PathUtils.norm(args.path));
+        return null;
+      });
 
       build.onEnd((result) => {
-        perf.end("transform & bundling");
+        perf.end("esbuild transform & bundling");
         debug(perf.toString());
 
         for (const stylesheetBundlingResult of tsCompileResult.stylesheetBundlingResultMap.values()) {
@@ -177,8 +251,14 @@ export function createSdNgPlugin(conf: {
             result.outputFiles.push(...stylesheetBundlingResult.outputFiles);
 
             if (result.metafile) {
-              result.metafile.inputs = { ...result.metafile.inputs, ...stylesheetBundlingResult.metafile.inputs };
-              result.metafile.outputs = { ...result.metafile.outputs, ...stylesheetBundlingResult.metafile.outputs };
+              result.metafile.inputs = {
+                ...result.metafile.inputs,
+                ...stylesheetBundlingResult.metafile.inputs,
+              };
+              result.metafile.outputs = {
+                ...result.metafile.outputs,
+                ...stylesheetBundlingResult.metafile.outputs,
+              };
             }
           }
         }