@simplysm/sd-cli 6.0.19 → 6.0.27

package/src/{build-tools → builders}/SdCliNgClientBuilder.ts

@@ -10,7 +10,8 @@ import * as esbuild from "esbuild";
 import {
   AnyComponentStyleBudgetChecker,
   CommonJsUsageWarnPlugin,
-  DedupeModuleResolvePlugin
+  DedupeModuleResolvePlugin,
+  SuppressExtractedTextChunksWebpackPlugin
 } from "@angular-devkit/build-angular/src/webpack/plugins";
 import { LicenseWebpackPlugin } from "license-webpack-plugin";
 import { Type } from "@angular-devkit/build-angular";
@@ -23,11 +24,13 @@ import * as CopyWebpackPlugin from "copy-webpack-plugin";
 import { NextHandleFunction } from "connect";
 import { HmrLoader } from "@angular-devkit/build-angular/src/webpack/plugins/hmr/hmr-loader";
 import * as WebpackDevMiddleware from "webpack-dev-middleware";
-import { LintResult, LintResultData } from "eslint-webpack-plugin/declarations/options";
-import * as os from "os";
-import { StringUtil } from "@simplysm/sd-core-common";
+import { StringUtil, Wait } from "@simplysm/sd-core-common";
 import { augmentAppWithServiceWorker } from "@angular-devkit/build-angular/src/utils/service-worker";
 import * as browserslist from "browserslist";
+import * as WebpackHotMiddleware from "webpack-hot-middleware";
+import { SdCliNgLibraryBuilder } from "./SdCliNgLibraryBuilder";
+import * as os from "os";
+import { LintResult } from "eslint-webpack-plugin/declarations/options";
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const ESLintWebpackPlugin = require("eslint-webpack-plugin");
@@ -47,13 +50,8 @@ export class SdCliNgClientBuilder extends EventEmitter {
     this.parsedTsconfig = {
       ...parsedTsconfig,
       options: {
-        baseUrl: path.dirname(this.tsconfigFilePath),
-        enableI18nLegacyMessageIdFormat: false,
-        strictInjectionParameters: true,
-        strictInputAccessModifiers: true,
-        strictTemplates: true,
-        strictInputTypes: false,
-        ...parsedTsconfig.options
+        ...parsedTsconfig.options,
+        ...tsconfig.angularCompilerOptions
       }
     };
 
@@ -71,9 +69,18 @@ export class SdCliNgClientBuilder extends EventEmitter {
 
     await FsUtil.removeAsync(this.parsedTsconfig.options.outDir!);
 
+    const buildResult: ISdPackageBuildResult[] = [];
+
+    // GENERATOR
+    const ngGenerator = new SdCliNgLibraryBuilder(this.rootPath, this.tsconfigFilePath, ["emit", "check", "lint"], undefined);
+    const genFilePaths = await ngGenerator.reloadProgramAsync(false);
+    const genResult = await ngGenerator.generateAdditionalFilesAsync(genFilePaths, false);
+    buildResult.push(...genResult.result);
+
+    // WEBPACK 빌드
     const webpackConfig = this._getWebpackConfig(false);
     const compiler = webpack(webpackConfig);
-    const buildResults = await new Promise<ISdPackageBuildResult[]>((resolve, reject) => {
+    const webpackBuildResults = await new Promise<ISdPackageBuildResult[]>((resolve, reject) => {
       compiler.run((err, stat) => {
         if (err != null) {
           reject(err);
@@ -84,17 +91,12 @@ export class SdCliNgClientBuilder extends EventEmitter {
         resolve(results);
       });
     });
+    buildResult.push(...webpackBuildResults);
 
     // .config.json 파일 쓰기
 
     const targetPath = path.resolve(this.parsedTsconfig.options.outDir!, ".config.json");
-    FsUtil.writeFile(targetPath, JSON.stringify(this.config.configs ?? {}, undefined, 2));
-
-    // CopyWebpackPlugin 대신 직접 카피
-
-    for (const item of ["assets/"]) {
-      await FsUtil.copyAsync(path.resolve(this.rootPath, "src", item), path.resolve(this.parsedTsconfig.options.outDir!, item));
-    }
+    await FsUtil.writeFileAsync(targetPath, JSON.stringify(this.config.configs ?? {}, undefined, 2));
 
     // service-worker 처리
 
@@ -107,29 +109,98 @@ export class SdCliNgClientBuilder extends EventEmitter {
       PathUtil.posix(path.relative(this.projectRootPath, path.resolve(this.rootPath, "ngsw-config.json")))
     );
 
-    this.emit("complete", buildResults);
+    this.emit("complete", buildResult.distinct());
   }
 
-  public async watchAsync(serverPath?: string): Promise<NextHandleFunction> {
+  public async watchAsync(serverPath?: string): Promise<NextHandleFunction[]> {
     await FsUtil.removeAsync(this.parsedTsconfig.options.outDir!);
 
+    let buildResult: ISdPackageBuildResult[] = [];
+
+    const ngGenerator = new SdCliNgLibraryBuilder(this.rootPath, this.tsconfigFilePath, ["emit", "check", "lint"], undefined);
+
+    // WEBPACK 빌드
     const webpackConfig = this._getWebpackConfig(true);
     const compiler = webpack(webpackConfig);
-    return await new Promise<NextHandleFunction>((resolve, reject) => {
-      compiler.hooks.watchRun.tap(this.constructor.name, () => {
+    return await new Promise<NextHandleFunction[]>((resolve, reject) => {
+      compiler.hooks.watchRun.tapAsync(this.constructor.name, async (compiler1, callback) => {
         this.emit("change");
+
+        buildResult = [];
+
+        // -- FIRST
+
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition,@typescript-eslint/strict-boolean-expressions
+        if (!compiler.modifiedFiles || !compiler.removedFiles) {
+          const genDirtyFilePaths = await ngGenerator.reloadProgramAsync(true);
+          const genResult = await ngGenerator.generateAdditionalFilesAsync(genDirtyFilePaths, true);
+          buildResult.push(...genResult.result);
+
+          callback();
+        }
+
+        // -- NOT FIRST
+
+        else {
+          const changedFiles = [...compiler.modifiedFiles, ...compiler.removedFiles];
+
+          // 변경파일 중, 유효한 파일 추출
+          const watchPaths = ngGenerator.getWatchPaths();
+          const changedFilePaths = changedFiles
+            .map((item) => PathUtil.posix(item))
+            .filter((item) => path.basename(item).includes("."))
+            .filter((item) => watchPaths.includes(path.dirname(item)))
+            .distinct();
+          if (changedFilePaths.length === 0) {
+            callback();
+            return;
+          }
+
+          // 변경파일에 대한 프로그램 리로드
+          const genDirtyFilePaths = await ngGenerator.reloadChangedProgramAsync(changedFilePaths, true);
+          if (genDirtyFilePaths.length === 0) {
+            callback();
+            return;
+          }
+
+          // 변경파일에 대해 자동생성할 소스파일들 생성 및 리로드 (index.ts등)
+          const genResult = await ngGenerator.generateAdditionalFilesAsync(genDirtyFilePaths, true);
+          buildResult.push(...genResult.result);
+          if (genResult.dirtyFilePaths.length === 0) {
+            callback();
+            return;
+          }
+          genDirtyFilePaths.push(...genResult.dirtyFilePaths);
+
+          const modifiedFiles = [...compiler.modifiedFiles];
+          const removedFiles = [...compiler.removedFiles];
+          for (const genFilePath of genDirtyFilePaths.distinct()) {
+            if (FsUtil.exists(genFilePath)) {
+              modifiedFiles.push(genFilePath);
+            }
+            else {
+              removedFiles.push(genFilePath);
+            }
+          }
+          compiler.modifiedFiles = new Set(modifiedFiles.distinct());
+          compiler.removedFiles = new Set(removedFiles.distinct());
+
+          callback();
+        }
       });
 
       // eslint-disable-next-line prefer-const
-      let middleware: NextHandleFunction | undefined;
+      let devMiddleware: NextHandleFunction | undefined;
+      // eslint-disable-next-line prefer-const
+      let hotMiddleware: NextHandleFunction | undefined;
 
       compiler.hooks.failed.tap(this.constructor.name, (err) => {
         const results = SdWebpackUtil.getWebpackResults(err);
-        this.emit("complete", results);
+        this.emit("complete", [...buildResult, ...results].distinct());
         reject(err);
       });
 
-      compiler.hooks.done.tap("SdCliClientCompiler", (stats) => {
+      compiler.hooks.done.tap("SdCliClientCompiler", async (stats) => {
         const results = SdWebpackUtil.getWebpackResults(stats);
 
         // .config.json 파일 쓰기
@@ -137,18 +208,25 @@ export class SdCliNgClientBuilder extends EventEmitter {
         const configDistPath = !StringUtil.isNullOrEmpty(serverPath)
           ? path.resolve(serverPath, "dist/www", packageKey, ".config.json")
           : path.resolve(this.parsedTsconfig.options.outDir!, ".config.json");
-        FsUtil.writeFile(configDistPath, JSON.stringify(this.config.configs ?? {}, undefined, 2));
+        await FsUtil.writeFileAsync(configDistPath, JSON.stringify(this.config.configs ?? {}, undefined, 2));
+
 
-        this.emit("complete", results);
-        resolve(middleware!);
+        await Wait.true(() => devMiddleware !== undefined && hotMiddleware !== undefined);
+        this.emit("complete", [...buildResult, ...results].distinct());
+        resolve([devMiddleware!, hotMiddleware!]);
       });
 
-      middleware = WebpackDevMiddleware(compiler, {
+      devMiddleware = WebpackDevMiddleware(compiler, {
         publicPath: webpackConfig.output!.publicPath as string,
         index: "index.html",
         headers: { "Access-Control-Allow-Origin": "*" },
         stats: false
       });
+
+      hotMiddleware = WebpackHotMiddleware(compiler, {
+        path: `${webpackConfig.output!.publicPath as string}__webpack_hmr`,
+        log: false
+      });
     });
   }
 
@@ -168,9 +246,7 @@ export class SdCliNgClientBuilder extends EventEmitter {
         symlinks: true,
         modules: [this.projectRootPath, "node_modules"],
         mainFields: ["es2015", "browser", "module", "main"],
-        fallback: {
-          os: require.resolve("os-browserify/browser")
-        }
+        fallback: this.config.resolveFallback
       },
       resolveLoader: {
         symlinks: true,
@@ -182,6 +258,9 @@ export class SdCliNgClientBuilder extends EventEmitter {
       context: this.projectRootPath,
       entry: {
         main: [
+          ...watch ? [
+            `webpack-hot-middleware/client?path=/${packageKey}/__webpack_hmr&timeout=20000&reload=true&overlay=true`
+          ] : [],
           path.resolve(this.rootPath, "src/main.ts")
         ],
         polyfills: [
@@ -244,37 +323,54 @@ export class SdCliNgClientBuilder extends EventEmitter {
           ] as any : [],
           {
             test: /\.scss$/i,
-            use: [
-              {
-                loader: MiniCssExtractPlugin.loader
-              },
-              {
-                loader: "css-loader",
-                options: {
-                  url: false,
-                  sourceMap: watch
-                }
-              },
+            rules: [
               {
-                loader: "resolve-url-loader",
-                options: {
-                  sourceMap: watch
-                }
+                oneOf: [
+                  {
+                    include: path.resolve(this.rootPath, "src/styles.scss"),
+                    use: [
+                      {
+                        loader: MiniCssExtractPlugin.loader
+                      },
+                      {
+                        loader: "css-loader",
+                        options: {
+                          url: false,
+                          sourceMap: watch
+                        }
+                      }
+                    ]
+                  },
+                  {
+                    exclude: path.resolve(this.rootPath, "src/styles.scss"),
+                    type: "asset/source"
+                  }
+                ]
               },
               {
-                loader: "sass-loader",
-                options: {
-                  implementation: nodeSass,
-                  sourceMap: true,
-                  sassOptions: {
-                    fiber: false,
-                    precision: 8,
-                    includePaths: [],
-                    outputStyle: "expanded",
-                    quietDeps: true,
-                    verbose: false
+                use: [
+                  {
+                    loader: "resolve-url-loader",
+                    options: {
+                      sourceMap: watch
+                    }
+                  },
+                  {
+                    loader: "sass-loader",
+                    options: {
+                      implementation: nodeSass,
+                      sourceMap: true,
+                      sassOptions: {
+                        fiber: false,
+                        precision: 8,
+                        includePaths: [],
+                        outputStyle: "expanded",
+                        quietDeps: true,
+                        verbose: false
+                      }
+                    }
                   }
-                }
+                ]
               }
             ]
           },
@@ -371,27 +467,25 @@ export class SdCliNgClientBuilder extends EventEmitter {
           {}
         ),
         new DedupeModuleResolvePlugin({ verbose: false }) as any,
-        ...watch ? [
-          new CopyWebpackPlugin({
-            patterns: ["favicon.icon", "assets/"].map((item) => ({
-              context: this.rootPath,
-              to: item,
-              from: `src/${item}`,
-              noErrorOnMissing: true,
-              force: true,
-              globOptions: {
-                dot: true,
-                followSymbolicLinks: false,
-                ignore: [
-                  ".gitkeep",
-                  "**/.DS_Store",
-                  "**/Thumbs.db"
-                ].map((i) => PathUtil.posix(this.rootPath, i))
-              },
-              priority: 0
-            }))
-          })
-        ] : [],
+        new CopyWebpackPlugin({
+          patterns: ["favicon.ico", "assets/", "manifest.webmanifest"].map((item) => ({
+            context: this.rootPath,
+            to: item,
+            from: `src/${item}`,
+            noErrorOnMissing: true,
+            force: true,
+            globOptions: {
+              dot: true,
+              followSymbolicLinks: false,
+              ignore: [
+                ".gitkeep",
+                "**/.DS_Store",
+                "**/Thumbs.db"
+              ].map((i) => PathUtil.posix(this.rootPath, i))
+            },
+            priority: 0
+          }))
+        }),
         ...watch ? [] : [
           new LicenseWebpackPlugin({
             stats: { warnings: false, errors: false },
@@ -428,7 +522,9 @@ export class SdCliNgClientBuilder extends EventEmitter {
           // filename: watch ? "[name].css" : `[name].[contenthash:20].css`
           filename: "[name].css"
         }),
-        // NgBuildAnalyticsPlugin
+        ...watch ? [] : [
+          new SuppressExtractedTextChunksWebpackPlugin()
+        ],
         new AngularWebpackPlugin({
           tsconfig: this.tsconfigFilePath,
           compilerOptions: this.parsedTsconfig.options,
@@ -436,33 +532,32 @@ export class SdCliNgClientBuilder extends EventEmitter {
           emitNgModuleScope: watch,
           inlineStyleFileExtension: "scss"
         }),
-        ...watch ? [
-          new IndexHtmlWebpackPlugin({
-            indexPath: path.resolve(this.rootPath, "src/index.html"),
-            outputPath: "index.html",
-            baseHref: `/${packageKey}/`, // TODO: undefined
-            entrypoints: [
-              "runtime",
-              "polyfills",
-              "styles",
-              "vendor",
-              "main"
-            ],
-            moduleEntrypoints: [],
-            noModuleEntrypoints: [],
-            deployUrl: undefined,
-            sri: false,
-            postTransform: undefined,
-            optimization: {
-              scripts: false,
-              styles: { minify: false, inlineCritical: false },
-              fonts: { inline: false }
-            },
-            WOFFSupportNeeded: false,
-            crossOrigin: "none",
-            lang: undefined
-          })
-        ] : [],
+        new IndexHtmlWebpackPlugin({
+          indexPath: path.resolve(this.rootPath, "src/index.html"),
+          outputPath: "index.html",
+          baseHref: `/${packageKey}/`,
+          entrypoints: [
+            "runtime",
+            "polyfills",
+            "sw-register",
+            "styles",
+            "vendor",
+            "main"
+          ],
+          moduleEntrypoints: [],
+          noModuleEntrypoints: [],
+          deployUrl: undefined,
+          sri: false,
+          postTransform: undefined,
+          optimization: {
+            scripts: !watch,
+            styles: { minify: !watch, inlineCritical: !watch },
+            fonts: { inline: !watch }
+          },
+          WOFFSupportNeeded: false,
+          crossOrigin: "none",
+          lang: undefined
+        }),
         new webpack.ProvidePlugin({
           "Buffer": ["buffer", "Buffer"]
         }),
@@ -477,7 +572,7 @@ export class SdCliNgClientBuilder extends EventEmitter {
           exclude: ["node_modules"],
           fix: false,
           threads: true,
-          formatter: (results: LintResult[], data?: LintResultData | undefined) => {
+          formatter: (results: LintResult[]) => {
             const resultMessages: string[] = [];
             for (const result of results) {
               for (const msg of result.messages) {
@@ -486,7 +581,10 @@ export class SdCliNgClientBuilder extends EventEmitter {
             }
             return resultMessages.join(os.EOL);
           }
-        })
+        }),
+        ...watch ? [
+          new webpack.HotModuleReplacementPlugin()
+        ] : []
       ],
       node: false,
       stats: "errors-warnings"