@simplysm/sd-cli 12.5.6 → 12.5.8

package/src/build-tools/SdCliNgRoutesFileGenerator.ts

@@ -1,22 +1,20 @@
 import path from "path";
-import {FsUtil, PathUtil, SdFsWatcher} from "@simplysm/sd-core-node";
-import {StringUtil} from "@simplysm/sd-core-common";
+import { FsUtil, PathUtil, SdFsWatcher } from "@simplysm/sd-core-node";
+import { StringUtil } from "@simplysm/sd-core-common";
 
 export class SdCliNgRoutesFileGenerator {
-  public static async watchAsync(pkgPath: string): Promise<void> {
+  public static async watchAsync(pkgPath: string, noLazyRoute?: boolean): Promise<void> {
     const routesFilePath = path.resolve(pkgPath, "src/routes.ts");
     let cache = FsUtil.exists(routesFilePath) ? FsUtil.readFile(routesFilePath) : undefined;
 
-    SdFsWatcher
-      .watch([path.resolve(pkgPath, "src")])
-      .onChange({}, async () => {
-        cache = await this.runAsync(pkgPath, cache);
-      });
+    SdFsWatcher.watch([path.resolve(pkgPath, "src")]).onChange({}, async () => {
+      cache = await this.runAsync(pkgPath, cache, noLazyRoute);
+    });
 
-    cache = await this.runAsync(pkgPath, cache);
+    cache = await this.runAsync(pkgPath, cache, noLazyRoute);
   }
 
-  public static async runAsync(pkgPath: string, cache?: string): Promise<string> {
+  public static async runAsync(pkgPath: string, cache?: string, noLazyRoute?: boolean): Promise<string> {
     const appDirPath = path.resolve(pkgPath, "src/app");
     const routesFilePath = path.resolve(pkgPath, "src/routes.ts");
 
@@ -25,20 +23,23 @@ export class SdCliNgRoutesFileGenerator {
     const filePaths = await FsUtil.globAsync(path.resolve(appDirPath, "**/*Page.ts"));
     for (const filePath of filePaths.orderBy()) {
       const relModulePath = PathUtil.posix(path.relative(appDirPath, filePath)).slice(0, -3);
-      const codes = relModulePath.slice(0, -4).split("/").map(item => StringUtil.toKebabCase(item));
+      const codes = relModulePath
+        .slice(0, -4)
+        .split("/")
+        .map((item) => StringUtil.toKebabCase(item));
 
       let cursorItem!: { relModulePath?: string; children: TInfo };
       let cursor = result;
 
       for (const code of codes) {
-        cursorItem = cursor.getOrCreate(code, {children: new Map()});
+        cursorItem = cursor.getOrCreate(code, { children: new Map() });
         cursor = cursorItem.children;
       }
 
       cursorItem.relModulePath = relModulePath;
     }
 
-
+    const imports: string[] = [];
     const fn = (currInfo: TInfo, indent: number): string => {
       const indentStr = new Array(indent).fill(" ").join("");
 
@@ -47,8 +48,14 @@ export class SdCliNgRoutesFileGenerator {
         cont += indentStr + "{\n";
         cont += indentStr + `  path: "${key}",\n`;
         if (val.relModulePath != null) {
-          cont += indentStr + `  loadComponent: () => import("./app/${val.relModulePath}").then((m) => m.${path.basename(val.relModulePath)}),\n`;
-          cont += indentStr + `  canDeactivate: [sdCanDeactivateGuard],\n`;
+          if (noLazyRoute) {
+            cont += indentStr + `  component: ${path.basename(val.relModulePath)},\n`;
+            imports.push(`import { ${path.basename(val.relModulePath)} } from "./app/${val.relModulePath}";`);
+          } else {
+            cont +=
+              indentStr +
+              `  loadComponent: () => import("./app/${val.relModulePath}").then((m) => m.${path.basename(val.relModulePath)}),\n`;
+          }
         }
         if (val.children.size > 0) {
           cont += indentStr + `  children: [\n`;
@@ -60,12 +67,13 @@ export class SdCliNgRoutesFileGenerator {
       return cont.trimEnd();
     };
 
+    const routes = fn(result, 2);
+
     const content = `
-import {sdCanDeactivateGuard} from "@simplysm/sd-angular";
 import {Routes} from "@angular/router";
-
+${imports.join("\n")}
 export const routes: Routes = [
-${fn(result, 2)}
+${routes}
 ];`.trim();
     if (content !== cache) {
       await FsUtil.writeFileAsync(routesFilePath, content);
@@ -74,7 +82,10 @@ ${fn(result, 2)}
   }
 }
 
-type TInfo = Map<string, {
-  relModulePath?: string;
-  children: TInfo
-}>;
+type TInfo = Map<
+  string,
+  {
+    relModulePath?: string;
+    children: TInfo;
+  }
+>;

package/src/build-tools/SdLinter.ts

@@ -12,6 +12,7 @@ export abstract class SdLinter {
       .filter(
         (item) =>
           (!item.endsWith(".d.ts") && item.endsWith(".ts")) ||
+          item.endsWith(".tsx") ||
           item.endsWith(".js")
       )
       .filter((item) => FsUtil.exists(item));
@@ -26,7 +27,7 @@ export abstract class SdLinter {
           cache: false,
           overrideConfig: [
             {
-              files: ["**/*.ts"],
+              files: ["**/*.ts", "**/*.tsx"],
               languageOptions: {
                 parserOptions: {
                   programs: [tsProgram],

package/src/build-tools/SdNgBundler.ts

@@ -74,7 +74,7 @@ export class SdNgBundler {
     this.#mainFilePath = path.resolve(opt.pkgPath, "src/main.ts");
     this.#tsConfigFilePath = path.resolve(opt.pkgPath, "tsconfig.json");
     this.#swConfFilePath = path.resolve(opt.pkgPath, "ngsw-config.json");
-    this.#browserTarget = transformSupportedBrowsersToTargets(browserslist(opt.browserslist ?? ["last 2 Chrome versions", "last 2 Edge versions"]));
+    this.#browserTarget = transformSupportedBrowsersToTargets(browserslist(["Chrome > 78"]));
     this.#indexHtmlFilePath = path.resolve(opt.pkgPath, "src/index.html");
     this.#pkgName = path.basename(opt.pkgPath);
     this.#baseHref = opt.builderType === "web" ? `/${this.#pkgName}/` : opt.dev ? `/${this.#pkgName}/${opt.builderType}/` : ``;
@@ -219,7 +219,8 @@ export class SdNgBundler {
       program: this.#ngResultCache.program,
       watchFileSet: new Set([
         ...this.#ngResultCache.watchFileSet!,
-        ...this.#styleLoadResultCache.watchFiles
+        ...this.#styleLoadResultCache.watchFiles,
+        this.#indexHtmlFilePath
       ]),
       affectedFileSet: this.#ngResultCache.affectedFileSet!,
       results
@@ -274,6 +275,7 @@ export class SdNgBundler {
         if (value.type === 'script') {
           hints.push({url: key, mode: 'modulepreload' as const});
         }
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         else if (value.type === 'style') {
           hints.push({url: key, mode: 'preload' as const, as: 'style'});
         }
@@ -606,5 +608,4 @@ interface IOptions {
   builderType: string;
   env: Record<string, string> | undefined;
   cordovaConfig: ISdCliClientBuilderCordovaConfig | undefined;
-  browserslist: string[] | undefined;
 }

package/src/build-tools/SdReactBundler.ts

@@ -0,0 +1,325 @@
+import path from "path";
+import { FsUtil, Logger, PathUtil } from "@simplysm/sd-core-node";
+import { fileURLToPath } from "url";
+import nodeStdLibBrowser from "node-stdlib-browser";
+import nodeStdLibBrowserPlugin from "node-stdlib-browser/helpers/esbuild/plugin";
+import { INpmConfig, ISdCliClientBuilderCordovaConfig, ISdCliPackageBuildResult } from "../commons";
+import ts from "typescript";
+import { SdReactBundlerContext } from "./SdReactBundlerContext";
+import { IReactPluginResultCache, sdReactPlugin } from "../bundle-plugins/sdReactPlugin";
+import { transformSupportedBrowsersToTargets } from "@angular/build/src/tools/esbuild/utils";
+import browserslist from "browserslist";
+import { glob } from "glob";
+
+export class SdReactBundler {
+  readonly #logger = Logger.get(["simplysm", "sd-cli", "SdNgBundler"]);
+
+  readonly #modifiedFileSet = new Set<string>();
+  readonly #compileResultCache: IReactPluginResultCache = {
+    affectedFileSet: new Set<string>(),
+    watchFileSet: new Set<string>(),
+  };
+  #contexts: SdReactBundlerContext[] | undefined;
+
+  readonly #outputCache = new Map<string, string | number>();
+
+  readonly #opt: IOptions;
+
+  readonly #pkgNpmConf: INpmConfig;
+  readonly #indexFilePath: string;
+  readonly #tsConfigFilePath: string;
+  readonly #browserTarget: string[];
+
+  public constructor(opt: IOptions) {
+    this.#opt = opt;
+    this.#pkgNpmConf = FsUtil.readJson(path.resolve(opt.pkgPath, "package.json"));
+    this.#indexFilePath = path.resolve(opt.pkgPath, "src/index.tsx");
+    this.#tsConfigFilePath = path.resolve(opt.pkgPath, "tsconfig.json");
+    this.#browserTarget = transformSupportedBrowsersToTargets(browserslist(["Chrome > 78"]));
+  }
+
+  public markForChanges(filePaths: string[]): void {
+    for (const filePath of filePaths) {
+      this.#modifiedFileSet.add(path.normalize(filePath));
+    }
+  }
+
+  public async bundleAsync(): Promise<{
+    program?: ts.Program;
+    watchFileSet: Set<string>;
+    affectedFileSet: Set<string>;
+    results: ISdCliPackageBuildResult[];
+  }> {
+    this.#debug(`get contexts...`);
+
+    if (!this.#contexts) {
+      this.#contexts = [
+        this._getAppContext(),
+        ...(this.#opt.builderType === "electron" ? [this._getElectronMainContext()] : []),
+      ];
+    }
+
+    this.#debug(`build...`);
+
+    const bundlingResults = await this.#contexts.mapAsync(async (ctx, i) => await ctx.bundleAsync());
+
+    //-- results
+    const results = bundlingResults.mapMany((bundlingResult) => bundlingResult.results);
+
+    this.#debug(`convert result...`);
+
+    const outputFiles: IReactOutputFile[] = bundlingResults
+      .mapMany((item) => item.outputFiles ?? [])
+      .map((item) => ({
+        relPath: path.relative(this.#opt.pkgPath, item.path),
+        contents: item.contents,
+      }));
+
+    // cordova empty
+    if (this.#opt.builderType === "cordova" && this.#opt.cordovaConfig?.plugins) {
+      outputFiles.push({ relPath: "cordova-empty.js", contents: "export default {};" });
+    }
+
+    // index.html
+    let indexHtml = await FsUtil.readFileAsync(path.resolve(this.#opt.pkgPath, "src/index.html"));
+    indexHtml = indexHtml.replace(/<\/head>/, '<script type="module" src="index.js"></script></head>');
+    if (this.#opt.builderType === "cordova") {
+      indexHtml = indexHtml.replace(
+        /(.*)<\/head>/,
+        '<script type="module" src="cordova-entry.js"></script>\n$1</head>',
+      );
+    }
+    if (outputFiles.some(item => item.relPath === "index.css")) {
+      indexHtml = indexHtml.replace(
+        /(.*)<\/head>/,
+        '<link rel="stylesheet" href="index.css">\n$1</head>',
+      );
+    }
+
+    outputFiles.push({
+      relPath: "index.html",
+      contents: indexHtml,
+    });
+
+    // copy assets
+    outputFiles.push(
+      ...this.#copyAssets("src", "favicon.ico"),
+      ...this.#copyAssets("src", "manifest.webmanifest"),
+      ...this.#copyAssets("src/assets", "**/*", "assets"),
+      ...(this.#opt.dev && this.#opt.builderType === "cordova"
+        ? Object.keys(this.#opt.cordovaConfig?.platform ?? { browser: {} }).mapMany((platform) => [
+            ...this.#copyAssets(
+              `.cordova/platforms/${platform}/platform_www/plugins`,
+              "**/*",
+              `cordova-${platform}/plugins`,
+            ),
+            ...this.#copyAssets(`.cordova/platforms/${platform}/platform_www`, "cordova.js", `cordova-${platform}`),
+            ...this.#copyAssets(
+              `.cordova/platforms/${platform}/platform_www`,
+              "cordova_plugins.js",
+              `cordova-${platform}`,
+            ),
+            ...this.#copyAssets(`.cordova/platforms/${platform}/www`, "config.xml", `cordova-${platform}`),
+          ])
+        : []),
+    );
+
+    // TODO: extract 3rdpartylicenses
+    // TODO: service worker
+
+    //-- write
+    this.#debug(`write output files...(${outputFiles.length})`);
+
+    for (const outputFile of outputFiles) {
+      const distFilePath = path.resolve(this.#opt.outputPath, outputFile.relPath);
+      const prev = this.#outputCache.get(distFilePath);
+      if (prev !== Buffer.from(outputFile.contents).toString("base64")) {
+        await FsUtil.writeFileAsync(distFilePath, outputFile.contents);
+        this.#outputCache.set(distFilePath, Buffer.from(outputFile.contents).toString("base64"));
+      }
+    }
+
+    this.#debug(`번들링중 영향받은 파일`, Array.from(this.#compileResultCache.affectedFileSet!));
+
+    return {
+      program: this.#compileResultCache.program,
+      watchFileSet: new Set(this.#compileResultCache.watchFileSet),
+      affectedFileSet: this.#compileResultCache.affectedFileSet!,
+      results,
+    };
+  }
+
+  #copyAssets(srcDir: string, globPath: string, distDir?: string): IReactOutputFile[] {
+    const result: IReactOutputFile[] = [];
+    const srcGlobPath = path.resolve(this.#opt.pkgPath, srcDir, globPath);
+    const srcPaths = glob.sync(srcGlobPath);
+    for (const srcPath of srcPaths) {
+      if (!FsUtil.exists(srcPath)) continue;
+      result.push({
+        relPath: path.join(
+          ...[distDir, path.relative(path.resolve(this.#opt.pkgPath, srcDir), srcPath)].filterExists(),
+        ),
+        contents: FsUtil.readFile(srcPath),
+      });
+    }
+
+    return result;
+  }
+
+  private _getAppContext() {
+    return new SdReactBundlerContext(this.#opt.pkgPath, {
+      absWorkingDir: this.#opt.pkgPath,
+      bundle: true,
+      keepNames: true,
+      format: "esm",
+      assetNames: "media/[name]",
+      conditions: ["es2020", "es2015", "module"],
+      resolveExtensions: [".js", ".mjs", ".cjs", ".ts", ".tsx"],
+      metafile: true,
+      legalComments: this.#opt.dev ? "eof" : "none",
+      logLevel: "silent",
+      minifyIdentifiers: !this.#opt.dev,
+      minifySyntax: !this.#opt.dev,
+      minifyWhitespace: !this.#opt.dev,
+      pure: ["forwardRef"],
+      outdir: this.#opt.pkgPath,
+      outExtension: undefined,
+      sourcemap: true, //this.#opt.dev,
+      splitting: true,
+      chunkNames: "[name]-[hash]",
+      tsconfig: this.#tsConfigFilePath,
+      write: false,
+      preserveSymlinks: false,
+      define: {
+        ...(!this.#opt.dev ? { ngDevMode: "false" } : {}),
+        "ngJitMode": "false",
+        "global": "global",
+        "process": "process",
+        "Buffer": "Buffer",
+        "process.env.SD_VERSION": JSON.stringify(this.#pkgNpmConf.version),
+        "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]),
+            )
+          : {}),
+      },
+      platform: "browser",
+      mainFields: ["es2020", "es2015", "browser", "module", "main"],
+      entryNames: "[name]",
+      entryPoints: {
+        index: this.#indexFilePath,
+      },
+      external: ["electron"],
+      target: this.#browserTarget,
+      supported: { "async-await": false, "object-rest-spread": false },
+      loader: {
+        ".png": "file",
+        ".jpeg": "file",
+        ".jpg": "file",
+        ".jfif": "file",
+        ".gif": "file",
+        ".svg": "file",
+        ".woff": "file",
+        ".woff2": "file",
+        ".ttf": "file",
+        ".ttc": "file",
+        ".eot": "file",
+        ".ico": "file",
+        ".otf": "file",
+        ".csv": "file",
+        ".xlsx": "file",
+        ".xls": "file",
+        ".pptx": "file",
+        ".ppt": "file",
+        ".docx": "file",
+        ".doc": "file",
+        ".zip": "file",
+        ".pfx": "file",
+        ".pkl": "file",
+        ".mp3": "file",
+        ".ogg": "file",
+      },
+      inject: [PathUtil.posix(fileURLToPath(import.meta.resolve("node-stdlib-browser/helpers/esbuild/shim")))],
+      plugins: [
+        ...(this.#opt.builderType === "cordova" && this.#opt.cordovaConfig?.plugins
+          ? [
+              {
+                name: "cordova:plugin-empty",
+                setup: ({ onResolve }) => {
+                  onResolve({ filter: new RegExp("(" + this.#opt.cordovaConfig!.plugins!.join("|") + ")") }, () => {
+                    return {
+                      path: `./cordova-empty.js`,
+                      external: true,
+                    };
+                  });
+                },
+              },
+            ]
+          : []),
+        sdReactPlugin({
+          modifiedFileSet: this.#modifiedFileSet,
+          dev: this.#opt.dev,
+          pkgPath: this.#opt.pkgPath,
+          result: this.#compileResultCache,
+        }),
+        nodeStdLibBrowserPlugin(nodeStdLibBrowser),
+      ],
+    });
+  }
+
+  private _getElectronMainContext() {
+    return new SdReactBundlerContext(this.#opt.pkgPath, {
+      absWorkingDir: this.#opt.pkgPath,
+      bundle: true,
+      entryNames: "[name]",
+      assetNames: "media/[name]",
+      conditions: ["es2020", "es2015", "module"],
+      resolveExtensions: [".js", ".mjs", ".cjs", ".ts"],
+      metafile: true,
+      legalComments: this.#opt.dev ? "eof" : "none",
+      logLevel: "silent",
+      minify: !this.#opt.dev,
+      outdir: this.#opt.pkgPath,
+      sourcemap: true, //this.#opt.dev,
+      tsconfig: this.#tsConfigFilePath,
+      write: false,
+      preserveSymlinks: false,
+      external: ["electron"],
+      define: {
+        ...(!this.#opt.dev ? { ngDevMode: "false" } : {}),
+        "process.env.SD_VERSION": JSON.stringify(this.#pkgNpmConf.version),
+        "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]),
+            )
+          : {}),
+      },
+      platform: "node",
+      entryPoints: {
+        "electron-main": path.resolve(this.#opt.pkgPath, "src/electron-main.ts"),
+      },
+    });
+  }
+
+  #debug(...msg: any[]): void {
+    this.#logger.debug(`[${path.basename(this.#opt.pkgPath)}]`, ...msg);
+  }
+}
+
+interface IOptions {
+  dev: boolean;
+  outputPath: string;
+  pkgPath: string;
+  builderType: string;
+  env: Record<string, string> | undefined;
+  cordovaConfig: ISdCliClientBuilderCordovaConfig | undefined;
+}
+
+interface IReactOutputFile {
+  relPath: string;
+  contents: Uint8Array | string;
+}

package/src/build-tools/SdReactBundlerContext.ts

@@ -0,0 +1,71 @@
+import esbuild from "esbuild";
+import path from "path";
+import { ISdCliPackageBuildResult } from "../commons";
+import { Logger } from "@simplysm/sd-core-node";
+
+export class SdReactBundlerContext {
+  readonly #logger = Logger.get(["simplysm", "sd-cli", "SdReactBundlerContext"]);
+
+  private _context?: esbuild.BuildContext;
+
+  public constructor(
+    private readonly _pkgPath: string,
+    private readonly _esbuildOptions: esbuild.BuildOptions,
+  ) {}
+
+  public async bundleAsync() {
+    if (this._context == null) {
+      this._context = await esbuild.context(this._esbuildOptions);
+    }
+
+    let buildResult: esbuild.BuildResult;
+
+    try {
+      this.#debug(`rebuild...`);
+      buildResult = await this._context.rebuild();
+      this.#debug(`rebuild completed`);
+    } catch (err) {
+      if ("warnings" in err || "errors" in err) {
+        buildResult = err;
+      } else {
+        throw err;
+      }
+    }
+
+    this.#debug(`convert results...`);
+
+    const results = [
+      ...buildResult.warnings.map((warn) => ({
+        filePath: warn.location?.file !== undefined ? path.resolve(this._pkgPath, warn.location.file) : undefined,
+        line: warn.location?.line,
+        char: warn.location?.column,
+        code: warn.text.slice(0, warn.text.indexOf(":")),
+        severity: "warning",
+        message: `${warn.pluginName ? `(${warn.pluginName}) ` : ""} ${warn.text.slice(warn.text.indexOf(":") + 1)}`,
+        type: "build",
+      })),
+      ...buildResult.errors.map((err) => ({
+        filePath: err.location?.file !== undefined ? path.resolve(this._pkgPath, err.location.file) : undefined,
+        line: err.location?.line,
+        char: err.location?.column !== undefined ? err.location.column + 1 : undefined,
+        code: err.text.slice(0, err.text.indexOf(":")),
+        severity: "error",
+        message: `${err.pluginName ? `(${err.pluginName}) ` : ""} ${err.text.slice(err.text.indexOf(":") + 1)}`,
+        type: "build",
+      })),
+    ] as ISdCliPackageBuildResult[];
+
+    return {
+      results,
+      outputFiles: buildResult.outputFiles,
+      metafile: buildResult.metafile,
+    };
+  }
+
+  #debug(...msg: any[]): void {
+    this.#logger.debug(
+      `[${path.basename(this._pkgPath)}] (${Object.keys(this._esbuildOptions.entryPoints as Record<string, any>).join(", ")})`,
+      ...msg,
+    );
+  }
+}