@metricinsights/pp-dev 0.4.0 → 0.6.0

package/dist/esm/cli.js

@@ -2,28 +2,32 @@ import * as path from 'path';
 import * as fs from 'fs';
 import { performance } from 'node:perf_hooks';
 import { cac } from 'cac';
-import { createColors } from 'picocolors';
-import { g as getViteConfig, V as VERSION } from './index-1a1d27e5.js';
-import { loadConfigFromFile, mergeConfig, createLogger, build, resolveConfig, optimizeDeps, preview } from 'vite';
+import { g as getViteConfig, V as VERSION } from './index-bc9325e9.js';
+import { c as createLogger, a as colors, i as initPPRedirect, M as MiAPI, b as initProxyCache, d as initProxy, e as initLoadPPData, f as initRewriteResponse, u as urlReplacer, g as cutUrlParams } from './plugin-63f01789.js';
+import { loadConfigFromFile, mergeConfig, build, resolveConfig, optimizeDeps, preview } from 'vite';
 import { URL as URL$1, parse } from 'url';
-import { i as initPPRedirect, M as MiAPI, a as initProxyCache, b as initProxy, c as initLoadPPData, d as initRewriteResponse, u as urlReplacer, e as cutUrlParams } from './plugin-7db34718.js';
 import * as express from 'express';
 import * as winston from 'winston';
-import 'vite-plugin-zip-pack';
-import 'esbuild';
+import * as dirCompare from 'dir-compare';
+import DiffMatchPatch from 'diff-match-patch';
+import { isBinaryFile } from 'isbinaryfile';
+import * as os from 'os';
+import * as crypto from 'crypto';
+import extractZip from 'extract-zip';
+import svgToFont from 'svgtofont';
 import 'ejs';
+import 'esbuild';
 import 'http-proxy-middleware';
+import 'picocolors';
 import 'axios';
 import 'jsdom';
 import 'https';
 import 'memory-cache';
-import 'crypto';
 import 'process';
 import 'child_process';
 import 'console';
 import 'zlib';
 
-const colors$2 = createColors();
 function isDefined(value) {
     return value != null;
 }
@@ -32,8 +36,9 @@ function bindShortcuts(server, opts) {
         return;
     }
     server._shortcutsOptions = opts;
+    const logger = createLogger();
     if (opts.print) {
-        server.config.logger.info(colors$2.dim(colors$2.green('  ➜')) + colors$2.dim('  press ') + colors$2.bold('h') + colors$2.dim(' to show help'));
+        logger.info(colors.dim(colors.green('  ➜')) + colors.dim('  press ') + colors.bold('h') + colors.dim(' to show help'));
     }
     const shortcuts = (opts.customShortcuts ?? []).filter(isDefined).concat(BASE_SHORTCUTS);
     let actionRunning = false;
@@ -47,10 +52,10 @@ function bindShortcuts(server, opts) {
             return;
         }
         if (input === 'h') {
-            server.config.logger.info([
+            logger.info([
                 '',
-                colors$2.bold('  Shortcuts'),
-                ...shortcuts.map((shortcut) => colors$2.dim('  press ') + colors$2.bold(shortcut.key) + colors$2.dim(` to ${shortcut.description}`)),
+                colors.bold('  Shortcuts'),
+                ...shortcuts.map((shortcut) => colors.dim('  press ') + colors.bold(shortcut.key) + colors.dim(` to ${shortcut.description}`)),
             ].join('\n'));
         }
         const shortcut = shortcuts.find((shortcut) => shortcut.key === input);
@@ -116,7 +121,6 @@ const BASE_SHORTCUTS = [
     },
 ];
 
-const colors$1 = createColors();
 function createDevServer(logLevel = 'info') {
     const server = express.default();
     const logger = winston.createLogger({
@@ -136,24 +140,516 @@ function createDevServer(logLevel = 'info') {
         if (!listener) {
             throw new Error('Server is not listening');
         }
-        const colorUrl = (url) => colors$1.cyan(url.replace(/:(\d+)\//, (_, port) => `:${colors$1.bold(port)}/`));
+        const colorUrl = (url) => colors.cyan(url.replace(/:(\d+)\//, (_, port) => `:${colors.bold(port)}/`));
         const address = listener.address();
         if (address && typeof address === 'object') {
             if (address.address === '::') {
                 const url = new URL$1(base || '', `http://localhost:${address.port}`);
-                logger.info(`  ${colors$1.green('➜')}  ${colors$1.bold('Local')}:   ${colorUrl(url.toString())}`);
+                logger.info(`  ${colors.green('➜')}  ${colors.bold('Local')}:   ${colorUrl(url.toString())}`);
             }
             else {
                 const url = new URL$1(base || '', `http://[${address.address}]:${address.port}`);
-                logger.info(`  ${colors$1.green('➜')}  ${colors$1.bold('Local')}:   ${colorUrl(url.toString())}`);
+                logger.info(`  ${colors.green('➜')}  ${colors.bold('Local')}:   ${colorUrl(url.toString())}`);
             }
         }
     };
     return server;
 }
 
+const changelogTemplate = /* HTML */ `<!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <title>Changelog Diff</title>
+      <style>
+        tr,
+        td {
+          padding: 0;
+        }
+        .diff-file {
+          margin-top: 20px;
+          border: 1px solid #e1e4e8;
+          border-radius: 6px;
+        }
+        .diff-file-title {
+          padding: 10px 20px;
+          background-color: #f6f8fa;
+          border-bottom: 1px solid #e1e4e8;
+          border-radius: 6px 6px 0 0;
+          font-weight: bold;
+        }
+        .diff-file-title .renamed {
+          font-weight: normal;
+        }
+        .diff-file-title .renamed .from {
+          color: #cb2431;
+        }
+        .diff-file-title .renamed .to {
+          color: #22863a;
+        }
+        .diff-file-title .added {
+          color: #22863a;
+        }
+        .diff-file-title .deleted {
+          color: #cb2431;
+        }
+        .diff-file-content {
+        }
+        .diff-table {
+          tab-size: 8;
+          width: 100%;
+          border-collapse: separate;
+          border-spacing: 0;
+        }
+        .blob-num {
+          position: relative;
+          color: #1f2328;
+          width: 1%;
+          min-width: 50px;
+          padding: 0 10px;
+          font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+          font-size: 12px;
+          line-height: 20px;
+          text-align: right;
+          white-space: nowrap;
+          vertical-align: top;
+          cursor: pointer;
+          -webkit-user-select: none;
+          user-select: none;
+        }
+        .blob-num.addition {
+          background-color: #ccffd8;
+          border-color: #1f883e;
+        }
+        .blob-num.deletion {
+          background-color: #ffd7d5;
+          border-color: #cf222e;
+        }
+        .blob-num::before {
+          content: attr(data-line-number);
+        }
+        .blob-code {
+          position: relative;
+          padding: 0 10px 0 22px;
+          vertical-align: top;
+          color: #1f2329;
+        }
+        .blob-code.code-addition {
+          background-color: #e6ffec;
+        }
+        .blob-code.code-deletion {
+          background-color: #ffebe9;
+        }
+        .blob-code.skip,
+        .blob-code.message {
+          text-align: center;
+        }
+        .blob-code.skip .blob-code-inner,
+        .blob-code.message .blob-code-inner {
+          font-weight: bold;
+          color: #6a737d;
+          padding: 10px 0;
+        }
+        .blob-code-inner {
+          display: table-cell;
+          overflow: visible;
+          font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+          font-size: 12px;
+          word-wrap: anywhere;
+          white-space: pre-wrap;
+        }
+        .blob-code-inner::before {
+          content: attr(data-code-prefix);
+          position: absolute;
+          top: 1px;
+          left: 8px;
+          padding-right: 8px;
+        }
+      </style>
+    </head>
+    <body>
+      <h1>Changelog Diff</h1>
+
+      %FILES%
+    </body>
+  </html>`;
+const LINE_ADDED = 1;
+const LINE_REMOVED = -1;
+const LINE_CONTEXT = 0;
+/**
+ * Escape HTML sequence
+ * @param str
+ */
+function escapeHTMLSequence(str) {
+    return str.replace(/[\u00A0-\u9999<>&]/g, (i) => '&#' + i.charCodeAt(0) + ';');
+}
+const fileNameWithHashRegEx = /(.+)(-[a-f0-9]{6,20})(\.[a-z0-9]+)$/i;
+/**
+ * Changelog generator class
+ * @class
+ * @classdesc
+ * Generates a changelog file based on the differences between two asset folders or zip files
+ * @example
+ * const changelogGenerator = new ChangelogGenerator({
+ *  previousAssetsPath: './dist-zip/previous',
+ *  currentAssetsPath: './dist-zip/current',
+ *  destinationPath: './dist-zip',
+ *  changelogFilename: 'CHANGELOG.html',
+ *  });
+ *  changelogGenerator.generateChangelog();
+ */
+class ChangelogGenerator {
+    oldAssetsPath;
+    newAssetsPath;
+    destinationPath;
+    changelogFilename;
+    changelogTemplate = changelogTemplate;
+    diffFileTemplateHandler;
+    diffLineTemplateHandler;
+    contextLines = 3;
+    logger;
+    /**
+     * Changelog generator class constructor
+     * @param opts
+     */
+    constructor(opts) {
+        const { oldAssetsPath, newAssetsPath, destinationPath, changelogTemplate, diffFileTemplateHandler, diffLineTemplateHandler, changelogFilename, contextLines, } = opts;
+        this.logger = createLogger();
+        if (!oldAssetsPath || !newAssetsPath || !destinationPath) {
+            throw new Error('Previous assets path, current assets path and destination path are required');
+        }
+        if (oldAssetsPath === newAssetsPath) {
+            throw new Error('Previous and current assets paths must be different');
+        }
+        if (!this.isExists(oldAssetsPath)) {
+            throw new Error(`Previous assets path ${oldAssetsPath} does not exist`);
+        }
+        if (!this.isExists(newAssetsPath)) {
+            throw new Error(`Current assets path ${newAssetsPath} does not exist`);
+        }
+        if (this.isZipFile(oldAssetsPath)) {
+            const unzipDestinationPath = path.resolve(os.tmpdir(), crypto.createHash('md5').update(oldAssetsPath).digest('hex'));
+            this.oldAssetsPath = this.unzipFile(oldAssetsPath, unzipDestinationPath)
+                .then(() => {
+                return this.normalizeAssetFolderPath(unzipDestinationPath);
+            })
+                .then((path) => {
+                if (this.isEmptyFolder(path)) {
+                    throw new Error(`Previous assets path ${path} is empty`);
+                }
+                return path;
+            });
+        }
+        else if (this.isFolder(oldAssetsPath)) {
+            const path = this.normalizeAssetFolderPath(oldAssetsPath);
+            if (this.isEmptyFolder(path)) {
+                throw new Error(`Previous assets path ${path} is empty`);
+            }
+            this.oldAssetsPath = Promise.resolve(path);
+        }
+        else {
+            throw new Error(`Invalid previous assets path ${oldAssetsPath}. It must be a folder or a zip file`);
+        }
+        if (this.isZipFile(newAssetsPath)) {
+            const unzipDestinationPath = path.resolve(os.tmpdir(), crypto.createHash('md5').update(newAssetsPath).digest('hex'));
+            this.newAssetsPath = this.unzipFile(newAssetsPath, unzipDestinationPath)
+                .then(() => {
+                return this.normalizeAssetFolderPath(unzipDestinationPath);
+            })
+                .then((path) => {
+                if (this.isEmptyFolder(path)) {
+                    throw new Error(`Current assets path ${path} is empty`);
+                }
+                return path;
+            });
+        }
+        else if (this.isFolder(newAssetsPath)) {
+            const path = this.normalizeAssetFolderPath(newAssetsPath);
+            if (this.isEmptyFolder(path)) {
+                throw new Error(`Current assets path ${newAssetsPath} is empty`);
+            }
+            this.newAssetsPath = Promise.resolve(path);
+        }
+        else {
+            throw new Error(`Invalid current assets path ${newAssetsPath}. It must be a folder or a zip file`);
+        }
+        this.destinationPath = destinationPath;
+        this.mkdirpSync(this.destinationPath);
+        if (changelogFilename) {
+            this.changelogFilename = changelogFilename;
+        }
+        else {
+            this.changelogFilename = 'CHANGELOG.html';
+        }
+        if (changelogTemplate) {
+            if (this.templateIsValid(changelogTemplate)) {
+                this.changelogTemplate = changelogTemplate;
+            }
+            else {
+                this.logger.warn(colors.yellow('Invalid changelog template, using default'));
+            }
+        }
+        if (typeof diffFileTemplateHandler === 'function') {
+            this.diffFileTemplateHandler = diffFileTemplateHandler;
+        }
+        if (typeof diffLineTemplateHandler === 'function') {
+            this.diffLineTemplateHandler = diffLineTemplateHandler;
+        }
+        if (contextLines) {
+            this.contextLines = contextLines;
+        }
+    }
+    templateIsValid(template) {
+        return template.includes('%FILES%');
+    }
+    isExists(assetPath) {
+        return fs.existsSync(assetPath);
+    }
+    isZipFile(assetPath) {
+        return assetPath.endsWith('.zip');
+    }
+    isFolder(assetPath) {
+        return fs.lstatSync(assetPath).isDirectory();
+    }
+    isEmptyFolder(assetPath) {
+        return fs.readdirSync(assetPath, { withFileTypes: true }).length === 0;
+    }
+    mkdirpSync(dir) {
+        if (!fs.existsSync(dir)) {
+            fs.mkdirSync(dir, { recursive: true });
+        }
+    }
+    async unzipFile(assetPath, destinationPath) {
+        fs.rmSync(destinationPath, { force: true, recursive: true });
+        return extractZip(assetPath, { dir: destinationPath });
+    }
+    normalizeAssetFolderPath(assetPath) {
+        const folderContent = fs.readdirSync(assetPath);
+        if (folderContent.length === 1 && fs.lstatSync(path.join(assetPath, folderContent[0])).isDirectory()) {
+            return this.normalizeAssetFolderPath(path.join(assetPath, folderContent[0]));
+        }
+        return assetPath;
+    }
+    pathToPosix(path) {
+        return path.replace(/\\/g, '/');
+    }
+    diffTableTemplate(diffLinesHTML) {
+        return /* HTML */ `<table class="diff-table">
+      <tbody>
+        ${diffLinesHTML}
+      </tbody>
+    </table>`;
+    }
+    getDiffTableHTML(diffLines) {
+        const diffLinesHTML = diffLines
+            .filter((value, index, array) => {
+            if (value.lineType === LINE_CONTEXT) {
+                return ((index >= 0 && index < this.contextLines) ||
+                    (index > array.length - (this.contextLines + 1) && index <= array.length - 1) ||
+                    array
+                        .slice(index - this.contextLines, index + this.contextLines + 1)
+                        .some((line) => line.lineType !== LINE_CONTEXT));
+            }
+            return true;
+        })
+            .map((line, index, array) => {
+            if (index > 0) {
+                const prevLine = array[index - 1];
+                if (line.lineNumber - prevLine.lineNumber > 1) {
+                    return [{ lineNumber: -1, lineContent: '', lineType: LINE_CONTEXT }, line];
+                }
+            }
+            return [line];
+        })
+            .flat()
+            .map((line) => this.diffLineHTML(line))
+            .join('');
+        return this.diffTableTemplate(diffLinesHTML);
+    }
+    diffLineMessageTemplate(message) {
+        return /* HTML */ `<tr>
+      <td class="blob-num"></td>
+      <td class="blob-num"></td>
+      <td class="blob-code message">
+        <span class="blob-code-inner">${message}</span>
+      </td>
+    </tr>`;
+    }
+    diffLineSkipTemplate() {
+        return /* HTML */ `<tr>
+      <td class="blob-num"></td>
+      <td class="blob-num"></td>
+      <td class="blob-code skip">
+        <span class="blob-code-inner">Skip</span>
+      </td>
+    </tr>`;
+    }
+    diffLineTemplate(diffLine) {
+        const { lineNumber, lineContent, lineType } = diffLine;
+        const numClass = lineType === LINE_ADDED ? 'addition' : lineType === LINE_REMOVED ? 'deletion' : '';
+        const codeClass = lineType === LINE_ADDED ? 'code-addition' : lineType === LINE_REMOVED ? 'code-deletion' : '';
+        const prefix = lineType === LINE_ADDED ? '+' : lineType === LINE_REMOVED ? '-' : ' ';
+        return /* HTML */ `<tr>
+      <td
+        class="blob-num ${numClass}${numClass === 'addition' ? ' empty' : ''}"
+        ${numClass !== 'addition' ? ` data-line-number="${lineNumber}"` : ''}
+      ></td>
+      <td
+        class="blob-num ${numClass}${numClass === 'deletion' ? ' empty' : ''}"
+        ${numClass !== 'deletion' ? ` data-line-number="${lineNumber}"` : ''}
+      ></td>
+      <td class="blob-code ${codeClass}">
+        <span class="blob-code-inner" data-code-prefix="${prefix}">${escapeHTMLSequence(lineContent ?? '')}</span>
+      </td>
+    </tr>`;
+    }
+    diffLineHTML(diffLine) {
+        if (this.diffLineTemplateHandler) {
+            return this.diffLineTemplateHandler(diffLine);
+        }
+        const { lineNumber } = diffLine;
+        if (lineNumber === -1) {
+            return this.diffLineSkipTemplate();
+        }
+        return this.diffLineTemplate(diffLine);
+    }
+    diffFileTemplate(filename, htmlDiff) {
+        if (this.diffFileTemplateHandler) {
+            return this.diffFileTemplateHandler(filename, htmlDiff);
+        }
+        return /* HTML */ `<div class="diff-file">
+      <div class="diff-file-title">${filename}</div>
+      <div class="diff-file-content">${htmlDiff}</div>
+    </div>`;
+    }
+    async generateAssetFoldersDiff() {
+        this.logger.info(colors.blue(`Comparing asset folders ${await this.oldAssetsPath} and ${await this.newAssetsPath}`));
+        const dirDiff = await dirCompare.compare(await this.oldAssetsPath, await this.newAssetsPath, {
+            compareContent: true,
+            skipSymlinks: true,
+            compareSize: true,
+            compareDate: false,
+            compareNameHandler: (name1, name2) => {
+                if (fileNameWithHashRegEx.test(name1)) {
+                    name1 = name1.replace(fileNameWithHashRegEx, '$1$3');
+                }
+                if (fileNameWithHashRegEx.test(name2)) {
+                    name2 = name2.replace(fileNameWithHashRegEx, '$1$3');
+                }
+                if (name1.localeCompare(name2) === 0) {
+                    return 0;
+                }
+                return name1.localeCompare(name2) > 0 ? 1 : -1;
+            },
+        });
+        return dirDiff.diffSet?.filter((d) => d.state !== 'equal' || d.name1 !== d.name2) || [];
+    }
+    async generateAssetFilesDiff(oldFileString, newFileString) {
+        const dmp = new DiffMatchPatch();
+        const linesChars = dmp.diff_linesToChars_(oldFileString, newFileString);
+        const linesDiff = dmp.diff_main(linesChars.chars1, linesChars.chars2, false);
+        dmp.diff_charsToLines_(linesDiff, linesChars.lineArray);
+        let lineNumber = 0;
+        return linesDiff
+            .map((diffLine) => {
+            const [lineType, lineContent] = diffLine;
+            const linesCount = lineContent.endsWith('\n')
+                ? lineContent.split('\n').length - 1
+                : lineContent.split('\n').length;
+            const lines = lineContent
+                .split('\n')
+                .map((line, index) => {
+                return { lineContent: line, lineNumber: lineNumber + index + 1, lineType };
+            })
+                .slice(0, linesCount);
+            if (lineType !== LINE_REMOVED) {
+                lineNumber += linesCount;
+            }
+            return lines;
+        })
+            .flat();
+    }
+    /**
+     * Generate diff for a file
+     * @param difference
+     * @private
+     */
+    async generateFilesDiff(difference) {
+        if (difference.state === 'equal') {
+            const filepath1 = this.pathToPosix(path.join('.', difference.relativePath, difference.name1 ?? ''));
+            const filepath2 = this.pathToPosix(path.join('.', difference.relativePath, difference.name2 ?? ''));
+            return this.diffFileTemplate(
+            /* HTML */ `<span class="renamed"
+          >Renamed <span class="from">${filepath1}</span> -> <span class="to">${filepath2}</span></span
+        >`, this.diffTableTemplate(this.diffLineMessageTemplate('No changes')));
+        }
+        const assetFile1Path = difference.path1 && difference.name1 ? path.join(difference.path1, difference.name1) : null;
+        const assetFile2Path = difference.path2 && difference.name2 ? path.join(difference.path2, difference.name2) : null;
+        const filepath = this.pathToPosix(path.join('.', difference.relativePath, (difference.name1 || difference.name2) ?? ''));
+        if (difference.state === 'left' && assetFile1Path) {
+            return this.diffFileTemplate(
+            /* HTML */ `<span class="removed">Removed ${filepath}</span>`, this.diffTableTemplate(this.diffLineMessageTemplate('File removed')));
+        }
+        if (difference.state === 'right' && assetFile2Path) {
+            return this.diffFileTemplate(
+            /* HTML */ `<span class="added">Added ${filepath}</span>`, this.diffTableTemplate(this.diffLineMessageTemplate('File added')));
+        }
+        if (difference.state === 'distinct' && assetFile1Path && assetFile2Path) {
+            const filepath1 = this.pathToPosix(path.join('.', difference.relativePath, difference.name1 ?? ''));
+            const filepath2 = this.pathToPosix(path.join('.', difference.relativePath, difference.name2 ?? ''));
+            const filenameTitle = difference.name1 !== difference.name2
+                ? /* HTML */ `<span class="renamed"
+              >Renamed <span class="from">${filepath1}</span> -> <span class="to">${filepath2}</span></span
+            >`
+                : filepath;
+            return this.diffFileTemplate(filenameTitle, (await isBinaryFile(assetFile1Path)) || (await isBinaryFile(assetFile2Path))
+                ? this.diffTableTemplate(this.diffLineMessageTemplate('Binary file'))
+                : this.getDiffTableHTML(await this.generateAssetFilesDiff(fs.readFileSync(assetFile1Path, 'utf-8'), fs.readFileSync(assetFile2Path, 'utf-8'))));
+        }
+        return '';
+    }
+    /**
+     * Generate changelog file based on the differences between two asset folders or zip files
+     * and write it to the destination folder
+     */
+    async generateChangelog() {
+        this.logger.info(colors.green('Generating changelog'));
+        const diffSet = await this.generateAssetFoldersDiff();
+        const htmlDiff = (await Promise.all(diffSet.map((difference) => this.generateFilesDiff(difference)))).join('');
+        this.logger.info(colors.green('Writing changelog file'));
+        const templateArray = this.changelogTemplate.split('%FILES%');
+        templateArray.splice(1, 0, htmlDiff);
+        const changelogHTML = templateArray.join('');
+        fs.writeFileSync(path.join(this.destinationPath, this.changelogFilename), changelogHTML);
+        this.logger.info(colors.green(`Changelog file written to ${path.join(this.destinationPath, this.changelogFilename)}`));
+    }
+}
+
+class IconFontGenerator {
+    sourceDir;
+    outputDir;
+    fontName;
+    constructor(options) {
+        this.sourceDir = options.sourceDir;
+        this.outputDir = options.outputDir;
+        this.fontName = options.fontName;
+    }
+    async generate() {
+        await svgToFont({
+            src: this.sourceDir,
+            dist: this.outputDir,
+            fontName: this.fontName,
+            css: true,
+            typescript: true,
+            startUnicode: 0xea01,
+            svgicons2svgfont: {
+                fontHeight: 1024,
+            },
+        });
+    }
+}
+
 const cli = cac('pp-dev');
-const colors = createColors();
 let profileSession = global.__pp_dev_profile_session;
 let profileCount = 0;
 const stopProfiler = (log) => {
@@ -244,19 +740,21 @@ cli
             clearScreen: options.clearScreen,
             optimizeDeps: { force: options.force },
             server: cleanOptions(options),
+            customLogger: createLogger(options.logLevel),
         }, true));
+        if (!server.config.base || server.config.base === '/') {
+            throw new Error('base cannot be equal to "/" or empty string');
+        }
         if (!server.httpServer) {
             throw new Error('HTTP server not available');
         }
         await server.listen();
-        const info = server.config.logger.info;
+        const logger = createLogger(options.logLevel);
         const ppDevStartTime = global.__pp_dev_start_time ?? false;
         const startupDurationString = ppDevStartTime
             ? colors.dim(`ready in ${colors.reset(colors.bold(Math.ceil(performance.now() - ppDevStartTime)))} ms`)
             : '';
-        info(`\n  ${colors.green(`${colors.bold('PP-DEV')} v${VERSION}`)}  ${startupDurationString}\n`, {
-            clear: !server.config.logger.hasWarned,
-        });
+        logger.info(`\n  ${colors.green(`${colors.bold('PP-DEV')} v${VERSION}`)}  ${startupDurationString}\n`);
         server.printUrls();
         bindShortcuts(server, {
             print: true,
@@ -266,7 +764,7 @@ cli
                     description: 'start/stop the profiler',
                     async action(server) {
                         if (profileSession) {
-                            await stopProfiler(server.config.logger.info);
+                            await stopProfiler(logger.info);
                         }
                         else {
                             const inspector = await import('node:inspector').then((r) => r.default);
@@ -275,7 +773,7 @@ cli
                                 profileSession.connect();
                                 profileSession.post('Profiler.enable', () => {
                                     profileSession?.post('Profiler.start', () => {
-                                        server.config.logger.info('Profiler started');
+                                        logger.info('Profiler started');
                                         res();
                                     });
                                 });
@@ -321,16 +819,20 @@ cli
     .action(async (root, options) => {
     filterDuplicateOptions(options);
     const { default: next } = await import('next');
+    const logger = createLogger();
     const server = createDevServer(options.logLevel);
     const opts = cleanOptions(options);
     const app = next({ dev: true, hostname: opts.host, port: opts.port });
-    const handle = app.getRequestHandler();
     await app.prepare();
     const nextServer = (await app.getServer());
     let base = nextServer.nextConfig.basePath;
+    const { assetPrefix } = nextServer.nextConfig;
     if (!base.endsWith('/')) {
         base += '/';
     }
+    if (base === '/') {
+        throw new Error('basePath cannot be equal to "/" or empty string');
+    }
     const baseWithoutTrailingSlash = base.substring(0, base.lastIndexOf('/'));
     const templateName = nextServer.nextConfig.serverRuntimeConfig.templateName;
     const ppDevConfig = nextServer.nextConfig.serverRuntimeConfig.ppDevConfig;
@@ -355,10 +857,14 @@ cli
             }
             server.use(initProxyCache({ devServer: server, ttl }));
         }
+        const proxyIgnore = ['/@vite', '/@metricinsights', '/@', baseWithoutTrailingSlash];
+        if (assetPrefix) {
+            proxyIgnore.push(assetPrefix);
+        }
         server.use(initProxy({
             devServer: server,
             baseURL: backendBaseURL,
-            proxyIgnore: ['/@vite', '/@metricinsights', '/@', baseWithoutTrailingSlash],
+            proxyIgnore,
             disableSSLValidation,
         }));
         const isIndexRegExp = new RegExp(`^((${base})|/)$`);
@@ -370,7 +876,12 @@ cli
             return Buffer.from(urlReplacer(baseUrlHost, req.headers.host ?? '', mi.buildPage(response, miHudLess)));
         }));
     }
+    const handle = app.getRequestHandler();
     server.all('*', (req, res) => {
+        if (req.url.startsWith(assetPrefix) && assetPrefix !== baseWithoutTrailingSlash) {
+            const parsedUrl = parse(req.url.replace(assetPrefix, baseWithoutTrailingSlash), true);
+            return handle(req, res, parsedUrl);
+        }
         const parsedUrl = parse(req.url, true);
         handle(req, res, parsedUrl);
     });
@@ -387,12 +898,11 @@ cli
                 }));
             }
         });
-        const info = server.config.logger.info;
         const ppDevStartTime = global.__pp_dev_start_time ?? false;
         const startupDurationString = ppDevStartTime
             ? colors.dim(`ready in ${colors.reset(colors.bold(Math.ceil(performance.now() - ppDevStartTime)))} ms`)
             : '';
-        info(`\n  ${colors.green(`${colors.bold('PP-DEV')} v${VERSION}`)}  ${startupDurationString}\n`, {
+        logger.info(`\n  ${colors.green(`${colors.bold('PP-DEV')} v${VERSION}`)}  ${startupDurationString}\n`, {
             clear: true,
         });
         server.printUrls(base);
@@ -458,6 +968,7 @@ cli
     .option('--force', `[boolean] force the optimizer to ignore the cache and re-bundle (experimental)`)
     .option('--emptyOutDir', `[boolean] force empty outDir when it's outside of root`)
     .option('-w, --watch', `[boolean] rebuilds when modules have changed on disk`)
+    .option('--changelog [assetsFile]', `[boolean | string] generate changelog between assetsFile and current build (default: false)`)
     .action(async (root, options) => {
     filterDuplicateOptions(options);
     const buildOptions = cleanOptions(options);
@@ -468,7 +979,7 @@ cli
             const { plugins, ...fileConfig } = configFromFile.config;
             config = mergeConfig(config, fileConfig);
         }
-        await build(mergeConfig(config, {
+        const buildConfig = mergeConfig(config, {
             root,
             base: options.base,
             mode: options.mode,
@@ -477,7 +988,55 @@ cli
             clearScreen: options.clearScreen,
             optimizeDeps: { force: options.force },
             build: buildOptions,
-        }, true));
+        }, true);
+        await build(buildConfig);
+        if (buildOptions.changelog) {
+            const executionRoot = root || process.cwd();
+            const outDir = buildConfig.build?.outDir || 'dist';
+            let oldAssetsPath = '';
+            if (typeof buildOptions.changelog === 'string') {
+                oldAssetsPath = path.resolve(executionRoot, buildOptions.changelog);
+            }
+            else {
+                const backupsDirPath = path.resolve(executionRoot, buildConfig.ppDevConfig?.syncBackupsDir || 'backups');
+                if (!fs.existsSync(backupsDirPath)) {
+                    createLogger(options.logLevel).warn(colors.yellow(`backups directory not found, skipping changelog generation`));
+                    return;
+                }
+                const backups = fs.readdirSync(backupsDirPath, { withFileTypes: true });
+                if (!backups.length) {
+                    createLogger(options.logLevel).warn(colors.yellow(`no backups found, skipping changelog generation`));
+                    return;
+                }
+                const latestBackup = backups
+                    .filter((value) => {
+                    return value.isFile() && value.name.endsWith('.zip');
+                })
+                    .reduce((latest, current) => {
+                    const latestTime = fs.statSync(path.resolve(backupsDirPath, latest.name)).mtimeMs;
+                    const currentTime = fs.statSync(path.resolve(backupsDirPath, current.name)).mtimeMs;
+                    return latestTime > currentTime ? latest : current;
+                }, backups[0]).name;
+                oldAssetsPath = path.resolve(backupsDirPath, latestBackup);
+            }
+            const currentAssetFilePath = path.resolve(executionRoot, outDir);
+            let changelogDestination = 'dist-zip';
+            if (buildConfig.ppDevConfig) {
+                if (buildConfig.ppDevConfig.distZip === false) {
+                    changelogDestination = buildConfig.build?.outDir || 'dist';
+                }
+                else if (typeof buildConfig.ppDevConfig.distZip === 'object' &&
+                    typeof buildConfig.ppDevConfig.distZip.outDir === 'string') {
+                    changelogDestination = buildConfig.ppDevConfig.distZip.outDir;
+                }
+            }
+            const changelogGenerator = new ChangelogGenerator({
+                oldAssetsPath,
+                newAssetsPath: currentAssetFilePath,
+                destinationPath: path.resolve(executionRoot, changelogDestination),
+            });
+            await changelogGenerator.generateChangelog();
+        }
     }
     catch (e) {
         createLogger(options.logLevel).error(colors.red(`error during build:\n${e.stack}`), { error: e });
@@ -487,6 +1046,53 @@ cli
         stopProfiler((message) => createLogger(options.logLevel).info(message));
     }
 });
+// changelog
+cli
+    .command('changelog [oldAssetPath] [newAssetPath]', 'generate changelog between two assets files/folders')
+    .option('--oldAssetsPath <oldAssetsPath>', `[string] path to the old assets zip file or folder`)
+    .option('--newAssetsPath <newAssetsPath>', `[string] path to the new assets zip file or folder`)
+    .option('--destination <destination>', `[string] destination folder for the changelog (default: .)`)
+    .option('--filename <filename>', `[string] filename for the changelog (default: CHANGELOG.html)`)
+    .action(async (oldAssetPath, newAssetPath, options) => {
+    filterDuplicateOptions(options);
+    const { oldAssetsPath: oldPath = oldAssetPath, newAssetsPath: newPath = newAssetPath, destination = '.', filename = 'CHANGELOG.html', logLevel, } = options;
+    const root = process.cwd();
+    if (!oldPath || !newPath) {
+        createLogger(logLevel).error(colors.red(`error during changelog generation: oldAssetPath and newAssetPath are required`));
+        process.exit(1);
+    }
+    const fullOldPath = path.resolve(root, oldPath);
+    const fullNewPath = path.resolve(root, newPath);
+    const fullDestination = path.resolve(root, destination);
+    const changelogGenerator = new ChangelogGenerator({
+        oldAssetsPath: fullOldPath,
+        newAssetsPath: fullNewPath,
+        destinationPath: fullDestination,
+        changelogFilename: filename,
+    });
+    await changelogGenerator.generateChangelog();
+});
+cli
+    .command('generate-icon-font [source] [destination]', 'generate icon font from SVG files')
+    .option('--source <source>', `[string] path to the source directory with SVG files`)
+    .option('--destination <destination>', `[string] path to the destination directory to save the generated font files`)
+    .option('--font-name, -n <fontName>', `[string] name of the font to generate (default: 'icon-font')`)
+    .action(async (source, destination, options) => {
+    filterDuplicateOptions(options);
+    const { source: sourceDir = source, destination: destDir = destination, fontName = 'icon-font' } = options;
+    const root = process.cwd();
+    const fullSourceDir = path.resolve(root, sourceDir);
+    const fullDestDir = path.resolve(root, destDir);
+    const iconFontGenerator = new IconFontGenerator({
+        sourceDir: fullSourceDir,
+        outputDir: fullDestDir,
+        fontName,
+    });
+    const logger = createLogger(options.logLevel);
+    logger.info(`Generating icon font from SVG files in ${colors.dim(fullSourceDir)}`);
+    await iconFontGenerator.generate();
+    logger.info(`Icon font generated and saved to ${colors.dim(fullDestDir)}`);
+});
 // optimize
 cli
     .command('optimize [root]', 'pre-bundle dependencies')