feat(ko): remove cache and add jsdoc (#162)

* Feat 6.6.0 jsdoc (#1)

* feat(ko): add jsdoc description and export .d.ts file

* fix(create-ko): update jsdoc for template

* docs(changeset): update jsdoc for create-ko template add jsdoc description and export .d.ts file

* Feat 6.6.0 cache (#2)

* feat(ko): auto purge cache when cache pack expired by maxAge and remove useless async

* docs(changeset): support auto purge cache when cache pack expired by maxAge

* Fix 6.6.0 dev serve (#3)

* chore(ko): update webpack-dev-server to 4.14.0

* docs(changeset): update webpack-dev-server to 4.14.0 and remove error-overlay-webpack-plugin

* RELEASING: Releasing 2 package(s)

Releases:
  [email protected]
  [email protected]

[skip ci]

---------

Co-authored-by: jialan <[email protected]>

Author: LuckyFBB

packages/create-ko/CHANGELOG.md

@@ -1,5 +1,11 @@
 # create-ko
 
+## 1.0.2
+
+### Patch Changes
+
+- dd8e687d7: update jsdoc for create-ko template
+
 ## 1.0.1
 
 ### Patch Changes

packages/create-ko/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ko",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "create react project with ko",
   "repository": {
     "type": "git",

packages/create-ko/template/ko.config.js

@@ -5,6 +5,9 @@ const finalKoConfig = (function () {
   const APP_PATH = path.resolve(ROOT_PATH, 'src');
   const BUILD_PATH = path.resolve(ROOT_PATH, `dist`);
   const WEB_PUBLIC = path.resolve(APP_PATH, 'public');
+  /**
+   * @type {import("ko/lib/types").IOptions}
+   */
   const baseKoConfig = {
     entry: path.join(APP_PATH, './main.tsx'),
     outputPath: BUILD_PATH,

packages/ko/CHANGELOG.md

@@ -1,5 +1,16 @@
 # ko
 
+## 6.6.0
+
+### Minor Changes
+
+- dd8e687d7: add jsdoc description and export .d.ts file
+- b1a004f68: support auto purge cache when cache pack expired by maxAge
+
+### Patch Changes
+
+- 4d4071220: update webpack-dev-server to 4.14.0 and remove error-overlay-webpack-plugin
+
 ## 6.5.12
 
 ### Patch Changes
@@ -12,6 +23,7 @@
 
 - 22089fe9: scriptLoader with antlr4ng
 
+
 ## 6.5.10
 
 ### Patch Changes

packages/ko/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ko",
-  "version": "6.5.12",
+  "version": "6.6.0",
   "description": "build & lint library",
   "keywords": [
     "ko",
@@ -61,7 +61,6 @@
     "css-minimizer-webpack-plugin": "^4.0.0",
     "detect-port": "^1.3.0",
     "dynamic-resolve-webpack-plugin": "workspace:^2.0.0",
-    "error-overlay-webpack-plugin": "^1.1.1",
     "esbuild-loader": "^2.19.0",
     "html-webpack-plugin": "^5.5.0",
     "inquirer": "^8.2.2",
@@ -86,7 +85,7 @@
     "thread-loader": "^3.0.4",
     "webpack": "^5.72.1",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-dev-server": "4.9.0",
+    "webpack-dev-server": "4.14.0",
     "webpackbar": "^5.0.2",
     "worker-loader": "^3.0.8"
   },

packages/ko/src/actions/dev.ts

@@ -31,7 +31,11 @@ class Dev extends ActionFactory {
       setupExitSignals: false,
       allowedHosts: 'all',
       client: {
-        overlay: false,
+        overlay: {
+          errors: true,
+          warnings: false,
+          runtimeErrors: true,
+        },
       },
       historyApiFallback,
     };

packages/ko/src/types.ts

@@ -5,25 +5,89 @@ import { IOpts as AutoPolyfillsWebpackPluginOptions } from '@dtinsight/auto-poly
 
 export type IOptions = {
   //common configs
+  /**
+   * The current working directory.
+   * @param {string}
+   */
   cwd: string;
+  /**
+   * An object mapping module names to file paths or directories.
+   * @param {Record<string, string>}
+   */
   alias?: Record<string, string>;
+  /**
+   * An array of patterns specifying files to copy to the output directory.
+   * @param {Pattern[]}
+   */
   copy?: Pattern[];
+  /**
+   * The entry point of the application.
+   * @param {string}
+   */
   entry?: string;
+  /**
+   * The path to the output directory.
+   * @param {string}
+   */
   outputPath?: string;
+  /**
+   * The public path of the application.
+   * @param {string}
+   */
   publicPath?: string;
+  /**
+   * Whether to append a hash to the output file name for cache busting.
+   * @param {boolean}
+   */
   hash?: boolean;
+  /**
+   * An object mapping module names to global variables.
+   * @param {Record<string, string>}
+   */
   externals?: Record<string, string>;
+  /**
+   * An array of plugin configurations.
+   * @param {HookOptions[]}
+   */
   plugins?: HookOptions[];
+  /**
+   * The path to the HTML template to use for the application.
+   * @param {string}
+   */
   htmlTemplate?: string;
   htmlChunks?: 'all' | string[];
   // style configs
+  /**
+   * Whether to enable the bundle analyzer plugin.
+   * @param {boolean}
+   */
   analyzer?: boolean;
+  /**
+   * An array of additional PostCSS plugins to use.
+   * @param {Plugin[]}
+   */
   extraPostCSSPlugins?: Plugin[];
+  /**
+   * Options to pass to the Less compiler.
+   * @param {*}
+   */
   lessOptions?: any;
   // integrated plugins options
+  /**
+   * A function to dynamically resolve module requests.
+   * @param {Function}
+   */
   dynamicResolve?: <T extends any>(request: T) => T;
+  /**
+   * Whether to enable the auto-polyfills plugin, or an options object for the plugin.
+   * @param {string}
+   */
   autoPolyfills: boolean | AutoPolyfillsWebpackPluginOptions;
   // dev, or serve configs
+  /**
+   * Options for the development server.
+   * @param {{proxy?: Record<string, any>, host: string, port: number, staticPath?: string, historyApiFallback?: any, compilationSuccessInfo?: { messages: string[]; notes?: string[] }}}
+   */
   serve: {
     proxy?: Record<string, any>;
     host: string;
@@ -33,6 +97,10 @@ export type IOptions = {
     compilationSuccessInfo?: { messages: string[]; notes?: string[] };
   };
   // experimental features
+  /**
+   * Experimental features to enable.
+   * @param {{speedUp?: boolean, minimizer?: boolean, disableLazyImports?: boolean, enableCssModule?: boolean, compress?: any}}
+   */
   experiment?: {
     speedUp?: boolean;
     minimizer?: boolean;
@@ -41,6 +109,10 @@ export type IOptions = {
     compress?: any;
   };
   //misc
+  /**
+   * Options for the linter plugins.
+   * @param {Record<IKeys, Omit<IOpts, 'write'>>}
+   */
   lints?: Record<IKeys, Omit<IOpts, 'write'>>;
 };
 

packages/ko/src/webpack/custom-plugins/purge-cache-webpack-plugin/index.ts

@@ -0,0 +1,76 @@
+import { Compiler } from 'webpack';
+import fs from 'fs/promises';
+import path from 'path';
+
+class PurgeCacheWebpackPlugin {
+  WEBPACK_PLUGIN_NAME = 'PurgeCacheWebpackPlugin';
+
+  purgeCacheFiles(
+    directory: string,
+    maxAge: number,
+    callback: (errors?: Error[]) => void
+  ) {
+    fs.readdir(directory)
+      .then(files => {
+        const expiredPacks = [];
+        if (files.length === 0) return callback();
+
+        for (const file of files) {
+          const pack = new Promise((resolve, reject) => {
+            const filePath = path.join(directory, file);
+            fs.stat(filePath)
+              .then(stats => {
+                if (stats.mtime.getTime() + maxAge < Date.now()) {
+                  fs.unlink(filePath)
+                    .then(() => {
+                      resolve(true);
+                    })
+                    .catch(err => reject(err));
+                } else {
+                  resolve(true);
+                }
+              })
+              .catch(err => reject(err));
+          });
+
+          expiredPacks.push(pack);
+        }
+
+        Promise.allSettled(expiredPacks).then(results => {
+          const errors = results
+            .filter(result => result.status === 'rejected')
+            .map((result: any) => result.reason);
+          callback(errors);
+        });
+      })
+      .catch(err => {
+        callback([err]);
+      });
+  }
+
+  apply(compiler: Compiler) {
+    compiler.hooks.done.tapAsync(
+      { name: this.WEBPACK_PLUGIN_NAME },
+      (_, callback) => {
+        const { type, maxAge, cacheLocation } = compiler.options.cache as any;
+        if (type === 'filesystem') {
+          const logger = compiler.getInfrastructureLogger(
+            this.WEBPACK_PLUGIN_NAME
+          );
+          this.purgeCacheFiles(cacheLocation, maxAge, errors => {
+            if (errors?.length) {
+              errors.forEach(err => logger.warn(err.message));
+            } else {
+              logger.info(`purge expired cache files completed`);
+            }
+            callback();
+          });
+        } else {
+          callback();
+        }
+      }
+    );
+  }
+}
+
+export default PurgeCacheWebpackPlugin;

packages/ko/src/webpack/index.ts

@@ -34,7 +34,7 @@ class WebpackConfig {
     return merge(this.base, ...opts);
   }
 
-  get cache() {
+  get cache(): FileCacheOptions {
     const { experiment } = this.opts;
     const type = experiment?.speedUp
       ? 'filesystem'
@@ -46,6 +46,7 @@ class WebpackConfig {
     };
     if (type === 'filesystem') {
       (cache as FileCacheOptions).version = this.projectVersion;
+      (cache as FileCacheOptions).maxAge = 7 * 24 * 3600000;
     } else {
       (
         cache as Exclude<
@@ -54,7 +55,7 @@ class WebpackConfig {
         >
       ).maxGenerations = 1;
     }
-    return cache;
+    return cache as FileCacheOptions;
   }
 
   get projectVersion(): string {

packages/ko/src/webpack/plugins.ts

@@ -9,7 +9,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import AutoPolyfillsWebpackPlugin from '@dtinsight/auto-polyfills-webpack-plugin';
 import FriendlyErrorsWebpackPlugin from '@nuxt/friendly-errors-webpack-plugin';
-import ErrorOverlayPlugin from 'error-overlay-webpack-plugin';
+import PurgeCacheWebpackPlugin from './custom-plugins/purge-cache-webpack-plugin';
 import { IWebpackOptions } from '../types';
 
 function getPlugins(opts: IWebpackOptions) {
@@ -99,7 +99,7 @@ function getPlugins(opts: IWebpackOptions) {
           notes: [],
         },
       }),
-    !isProd && new ErrorOverlayPlugin(),
+    !isProd && new PurgeCacheWebpackPlugin(),
     isProd &&
       autoPolyfills &&
       (typeof autoPolyfills === 'boolean'