cc4-embedded-system 3.2.0 → 3.2.1

package/README.md

@@ -1,19 +1,21 @@
 # CC4EmbeddedSystem V3
-- This version is based on [html-minifier-next](https://github.com/j9t/html-minifier-next), [SVGO](https://github.com/svg/svgo), and a rewrite of [lwIP makefsdata](https://github.com/m-labs/lwip/tree/master/src/apps/httpd/makefsdata). GUI mode runs on localhost, default port: ```3000```.
+- V3.2.1 is a TypeScript/Node.js rewrite of [lwIP makefsdata](https://github.com/m-labs/lwip/tree/master/src/apps/httpd/makefsdata). GUI mode runs on localhost, default port: `3000`.
+- Assets are handled by type: [html-minifier-next](https://github.com/j9t/html-minifier-next) processes HTML, [Lightning CSS](https://lightningcss.dev/) processes CSS, [esbuild](https://esbuild.github.io/) processes JavaScript, and [SVGO](https://svgo.dev/) processes SVG.
+- Optional deterministic gzip storage reduces the Flash payload for text assets. The MCU sends the stored bytes unchanged; a gzip-capable HTTP client, normally a browser, decompresses the response.
 - This tool is deployed on [npm package](https://www.npmjs.com/package/cc4-embedded-system).
-- The last successful source and destination paths are automatically saved as `cc4es_configs.json` in the operating system's local application-data directory. On Windows this is `%LOCALAPPDATA%\\cc4-embedded-system\\cc4es_configs.json`.
-- The config file is created only after the first successful build, and its complete path is printed at that time. Use `cc4es --config-path` to print it later.
+- The last successful source/destination paths and gzip setting are automatically saved as `cc4es_configs.json` in the operating system's local application-data directory. On Windows this is `%LOCALAPPDATA%\\cc4-embedded-system\\cc4es_configs.json`.
+- The config file is created only after the first successful build, and its complete path is printed at that time. Use `cc4es --config-path` to print it later.
 
 ## Demo
-- Select input directory
-
-![](./Screenshot/inputs.png)
-- Select output file path
-
-![](./Screenshot/output.png)
-- Result
-
-![](./Screenshot/v3.1.10.png)
+### CLI mode
+![](./Screenshot/cli.png)
+### Select input directory
+![](./Screenshot/src.png)
+### Select output file path
+![](./Screenshot/dst.png)
+### Results
+![](./Screenshot/v3.2.1_result1.png)
+![](./Screenshot/v3.2.1_result2.png)
 
 ## Structure
 ```text
@@ -22,16 +24,17 @@ CC4EmbeddedSystem/
 │   ├── gui.ts            // CLI entry point
 │   ├── cli.ts            // Command-line parsing and help text
 │   ├── server.ts         // Express GUI server
-│   ├── config.ts         // Persistent last-build paths
+│   ├── config.ts         // Persistent paths and gzip options
+│   ├── gzip-options.ts   // Shared gzip defaults and validation
 │   ├── minify-options.ts // Shared HTML minifier options
-│   ├── makefsdata.ts     // Core C code generation and minification logic
+│   ├── makefsdata.ts     // Asset routing, gzip, and C code generation
 │   └── utils.ts          // Package version lookup
 ├── public/
 │   └── index.html    // Web GUI dashboard
-├── Sereenshot/
-│   ├── inputs.png    // Demo image
-│   ├── output.png    // Demo image
-│   └── v3.1.10.png   // Demo image
+├── test/
+│   └── cc4es.test.mjs // Native Node.js regression tests
+├── Screenshot/
+│   └── ...            // GUI and CLI screenshots
 ├── node_modules/     // Required submodules during development
 ├── dist/             // Compiled JavaScript output (Auto-generated)
 ├── package.json      // Project configuration & dependencies
@@ -39,6 +42,78 @@ CC4EmbeddedSystem/
 └── tsconfig.json     // TypeScript configuration
 ```
 
+## Build architecture
+
+CC4ES never modifies the source directory. For each file it produces one final response body, writes the HTTP header and body into `fsdata.c`, and keeps lwIP's `FS_FILE_FLAGS_HEADER_INCLUDED` model.
+
+```text
+source file
+  -> extension-based optimizer
+       .html/.htm  html-minifier-next
+       .css        Lightning CSS
+       .js/.mjs    esbuild (or raw with --no-minify-js)
+       .svg        SVGO
+       other       raw copy
+  -> final response body
+  -> optional deterministic gzip when it is smaller
+  -> HTTP header + fsdata.c byte array
+```
+
+HTML-only options such as `--remove-comments` are not applied to external JavaScript. This prevents an external `.js` file from being interpreted as an HTML comment. `--no-minify-js` and `--no-minify-css` keep their respective external assets unchanged, while HTML can still use its own minification options.
+
+### Gzip storage
+
+Gzip is optional and disabled by default. `--gzip` considers `.html`, `.htm`, `.css`, `.js`, `.mjs`, `.json`, `.svg`, `.xml`, `.txt`, and `.map`; binary and already-compressed resource types remain raw. A candidate is stored as gzip only when its gzip body is strictly smaller than its final raw body.
+
+For gzip bodies, CC4ES writes `Content-Encoding: gzip` before the HTTP header terminator. The gzip mtime and OS metadata are normalized so the same input and options produce byte-identical output. A raw fallback has no `Content-Encoding` header.
+
+This is a fixed storage representation, not runtime content negotiation: a gzip-enabled `fsdata.c` does not also store a raw duplicate and does not inspect `Accept-Encoding`. Enable gzip only when the target clients support it; use `--no-gzip` for legacy clients. No MCU decompressor, zlib dependency, lwIP change, or application-code change is required.
+
+#### Measurement example
+
+The following measured an example app build used `--gzip --gzip-level 9`. The exact result depends on the frontend assets, compiler settings, and firmware image format; treat it as an example rather than a universal saving guarantee.
+
+| File | Without gzip | gzip level 9 | Reduction |
+|---|---:|---:|---:|
+| `fsdata.c` | 652,029 B | 197,764 B | 454,265 B (69.67%) |
+| `app.elf` | 2,641,144 B | 2,555,120 B | 86,024 B (3.26%) |
+| `app.hex` | 1,001,729 B | 751,917 B | 249,812 B (24.94%) |
+| `app.img` | 356,108 B | 267,292 B | 88,816 B (24.94%) |
+
+The flashed memory regions show where the saving occurs:
+
+| Region | Without gzip | gzip level 9 | Reduction |
+|---|---:|---:|---:|
+| `text` | 355,420 B | 266,604 B | 88,816 B |
+| `data` | 680 B | 680 B | 0 B |
+| `bss` | 83,280 B | 83,280 B | 0 B |
+
+In this build, gzip saved **88,816 bytes** of Flash, approximately **86.73 KiB**. The ELF file includes debug symbols, so its on-disk size decreases by only 3.26%; use the `.img` size or the `text + data` regions when assessing flashed capacity.
+
+## Path Configs
+After the first successful build, CC4EmbeddedSystem saves the most recently used source/destination paths and gzip settings in `cc4es_configs.json`.
+
+The file is stored in the local application-data directory by default:
+- Windows: `%LOCALAPPDATA%\cc4-embedded-system\cc4es_configs.json`
+- macOS: `~/Library/Application Support/cc4-embedded-system/cc4es_configs.json`
+- Linux: `$XDG_STATE_HOME/cc4-embedded-system/cc4es_configs.json` (or `~/.local/state/...`)
+
+Run `cc4es --config-path` to print the exact path on the current computer.
+
+```json
+{
+  "schemaVersion": 2,
+  "lastBuild": {
+    "src": "C:\\YourProjects\\src",
+    "dst": "C:\\YourProjects\\dst\\fsdata.c"
+  },
+  "gzipOptions": {
+    "gzip": false,
+    "gzipLevel": 9
+  }
+}
+```
+
 ## Commands
 ### CLI Help Texts
 ```text
@@ -46,15 +121,17 @@ Usage: cc4es [options]
 
 Without options, starts the browser GUI.
 
-  -h, --help                         Show this help and exit
-  -V, --version                      Show version and exit
-  --config-path                      Print the full config file path and exit
-  --headless                         Build without server or browser
-  -s, --src <directory>              Source directory (headless)
-  -d, --dst <file|directory>         Output C file or directory (default: fsdata.c)
+  -h, --help                         Show this help and exit
+  -V, --version                      Show version and exit
+  --config-path                      Print the full config file path and exit
+  --headless                         Build without server or browser
+  -s, --src <directory>              Source directory (headless)
+  -d, --dst <file|directory>         Output C file or directory (default: fsdata.c)
   -p, --port <1-65535>               GUI server port
   --[no-]optimize-svg                Enable or disable SVGO (default: enabled)
   --svgo-multipass                   Run SVGO optimization repeatedly
+  --[no-]gzip                        Enable or disable gzip resource storage (default: disabled)
+  --gzip-level <1-9>                 gzip compression level (default: 9)
 
 HTML compression options:
   --[no-]collapse-whitespace         --[no-]remove-comments
@@ -63,9 +140,9 @@ HTML compression options:
   --[no-]remove-attribute-quotes     --[no-]remove-empty-attributes
   --[no-]remove-redundant-attributes --[no-]use-short-doctype
 
-Headless mode requires --src or --dst and never reruns the last build with
-no path options. A missing counterpart uses the last saved path; if no
-destination is saved, fsdata.c is created in the current working directory.
+Headless mode requires --src or --dst and never reruns the last build with
+no path options. A missing counterpart uses the last saved path; if no
+destination is saved, fsdata.c is created in the current working directory.
 ```
 ### Normal Use
 - Global installation
@@ -81,36 +158,48 @@ destination is saved, fsdata.c is created in the current working directory.
     ```bash
     cc4es --port 3002
     ```
-- Headless build (does not start a server or open a browser)
-    ```bash
-    cc4es --headless --src C:\Project\web --dst C:\Project\fsdata.c
-    ```
-- Headless build with the default output filename. An existing output directory uses `fsdata.c` inside it.
-    ```bash
-    cc4es --headless --src C:\Project\web
-    cc4es --headless --src C:\Project\web --dst C:\Project\output
-    ```
-- Headless safety: a parameterless command stops instead of rerunning the last build
-    ```bash
-    cc4es --headless
-    ```
+- Headless build (does not start a server or open a browser)
+    ```bash
+    cc4es --headless --src C:\Project\web --dst C:\Project\fsdata.c
+    ```
+- Headless build with the default output filename. An existing output directory uses `fsdata.c` inside it.
+    ```bash
+    cc4es --headless --src C:\Project\web
+    cc4es --headless --src C:\Project\web --dst C:\Project\output
+    ```
+- Headless safety: a parameterless command stops instead of rerunning the last build
+    ```bash
+    cc4es --headless
+    ```
 - CLI help and version
     ```bash
-    cc4es --help
-    cc4es --version
-    cc4es --config-path
+    cc4es --help
+    cc4es --version
+    cc4es --config-path
     ```
 - Compression flags can be supplied in headless mode. Every flag accepts a `--no-` form.
     ```bash
     cc4es --headless --no-minify-js --remove-attribute-quotes --svgo-multipass
     ```
+- Gzip is optional and disabled by default. Only text resources that become smaller are stored as gzip; their response header contains `Content-Encoding: gzip`.
+    ```bash
+    cc4es --headless --src C:\Project\web --dst C:\Project\fsdata.c --gzip --gzip-level 9
+    ```
+  A gzip-enabled image stores one fixed gzip representation for eligible resources. It does not keep a raw duplicate or negotiate `Accept-Encoding`; use `--no-gzip` when a consumer requires non-gzip clients. Test it with a browser or `curl --compressed http://DEVICE_IP/app.js`.
+- Files are processed by type: HTML uses html-minifier-next, CSS uses Lightning CSS, JavaScript uses esbuild, and SVG uses SVGO. `--no-minify-js` and `--no-minify-css` preserve their respective external assets.
 - Update
   ```bash
   npm install -g cc4-embedded-system@latest
   ```
 ### Development
 ```bash
-# build
+# install locked dependencies
+npm ci
+
+# run regression tests
+npm test
+
+# compile TypeScript and copy public GUI assets to dist/
 npm run build
 
 # mimic global installation

package/dist/cli.js

@@ -1,4 +1,5 @@
 import { DEFAULT_HTML_MINIFY_OPTIONS } from './minify-options.js';
+import { DEFAULT_GZIP_LEVEL, isGzipLevel } from './gzip-options.js';
 export class CliUsageError extends Error {
     constructor(message) {
         super(message);
@@ -41,6 +42,14 @@ const parsePort = (value) => {
         throw new CliUsageError('--port must be an integer from 1 to 65535.');
     return port;
 };
+const parseGzipLevel = (value) => {
+    if (!/^\d+$/.test(value))
+        throw new CliUsageError('--gzip-level must be an integer from 1 to 9.');
+    const gzipLevel = Number.parseInt(value, 10);
+    if (!isGzipLevel(gzipLevel))
+        throw new CliUsageError('--gzip-level must be an integer from 1 to 9.');
+    return gzipLevel;
+};
 export const parseCliArguments = (args) => {
     const parsed = {
         showHelp: false,
@@ -101,6 +110,20 @@ export const parseCliArguments = (args) => {
             case '--svgo-multipass':
                 parsed.svgoMultipass = true;
                 break;
+            case '--gzip':
+                parsed.gzip = true;
+                break;
+            case '--no-gzip':
+                parsed.gzip = false;
+                break;
+            case '--gzip-level': {
+                const value = args[index + 1];
+                if (!value || value.startsWith('--'))
+                    throw new CliUsageError('--gzip-level requires a value.');
+                parsed.gzipLevel = parseGzipLevel(value);
+                index++;
+                break;
+            }
             default:
                 throw new CliUsageError(`Unknown option: ${argument}`);
         }
@@ -131,6 +154,8 @@ export const getHelpText = () => {
         '  -p, --port <1-65535>               GUI server port',
         '  --[no-]optimize-svg                Enable or disable SVGO (default: enabled)',
         '  --svgo-multipass                   Run SVGO optimization repeatedly',
+        '  --[no-]gzip                        Enable or disable gzip resource storage (default: disabled)',
+        `  --gzip-level <1-9>                 gzip compression level (default: ${DEFAULT_GZIP_LEVEL})`,
         '',
         'HTML compression options:',
         '  --[no-]collapse-whitespace         --[no-]remove-comments',

package/dist/config.js

@@ -1,6 +1,7 @@
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
+import { isGzipLevel } from './gzip-options.js';
 export const CONFIG_FILE_NAME = 'cc4es_configs.json';
 const getStateDirectory = () => {
     const homeDirectory = os.homedir();
@@ -18,36 +19,54 @@ export const getConfigFilePath = () => {
 const isRecord = (value) => {
     return typeof value === 'object' && value !== null;
 };
+const getGzipOptions = (value) => {
+    if (!isRecord(value))
+        return undefined;
+    const gzip = value.gzip;
+    const gzipLevel = value.gzipLevel;
+    if (typeof gzip !== 'boolean' || !isGzipLevel(gzipLevel))
+        return undefined;
+    return { gzip, gzipLevel };
+};
 const readConfig = () => {
     try {
         const parsedConfig = JSON.parse(fs.readFileSync(getConfigFilePath(), 'utf8'));
-        if (!isRecord(parsedConfig) || !isRecord(parsedConfig.lastBuild))
-            return { schemaVersion: 1 };
+        if (!isRecord(parsedConfig))
+            return { schemaVersion: 2 };
+        const config = { schemaVersion: 2 };
+        const gzipOptions = getGzipOptions(parsedConfig.gzipOptions);
+        if (gzipOptions)
+            config.gzipOptions = gzipOptions;
+        if (!isRecord(parsedConfig.lastBuild))
+            return config;
         const src = parsedConfig.lastBuild.src;
         const dst = parsedConfig.lastBuild.dst;
         if (typeof src !== 'string' || typeof dst !== 'string' || !src || !dst) {
-            return { schemaVersion: 1 };
+            return config;
         }
-        return {
-            schemaVersion: 1,
-            lastBuild: { src, dst }
-        };
+        config.lastBuild = { src, dst };
+        return config;
     }
     catch {
-        return { schemaVersion: 1 };
+        return { schemaVersion: 2 };
     }
 };
 export const getLastBuildPaths = () => {
     return readConfig().lastBuild;
 };
-export const saveLastBuildPaths = (src, dst) => {
+export const getLastGzipOptions = () => {
+    return readConfig().gzipOptions;
+};
+export const saveLastBuildPaths = (src, dst, gzipOptions) => {
     const configFilePath = getConfigFilePath();
     const temporaryFilePath = `${configFilePath}.${process.pid}.tmp`;
     const configAlreadyExists = fs.existsSync(configFilePath);
     const config = {
-        schemaVersion: 1,
+        schemaVersion: 2,
         lastBuild: { src, dst }
     };
+    if (gzipOptions)
+        config.gzipOptions = gzipOptions;
     try {
         fs.mkdirSync(path.dirname(configFilePath), { recursive: true });
         fs.writeFileSync(temporaryFilePath, `${JSON.stringify(config, null, 2)}\n`, 'utf8');

package/dist/gui.js

@@ -1,7 +1,8 @@
 #!/usr/bin/env node
 import path from 'node:path';
 import { CliUsageError, getHelpText, parseCliArguments } from './cli.js';
-import { getConfigFilePath, getLastBuildPaths, saveLastBuildPaths } from './config.js';
+import { getConfigFilePath, getLastBuildPaths, getLastGzipOptions, saveLastBuildPaths } from './config.js';
+import { DEFAULT_GZIP_LEVEL } from './gzip-options.js';
 import { runMakeFsData } from './makefsdata.js';
 import { startGuiServer } from './server.js';
 import { getPackageVersion } from './utils.js';
@@ -11,10 +12,15 @@ const getDefaultGuiPort = () => {
         return 3000;
     return configuredPort;
 };
-const runHeadlessBuild = async (inputPath, outputPath, minifyOpts, optimizeSvg, svgoMultipass) => {
+const runHeadlessBuild = async (inputPath, outputPath, minifyOpts, optimizeSvg, svgoMultipass, gzipOverride, gzipLevelOverride) => {
     const lastBuild = getLastBuildPaths();
+    const lastGzipOptions = getLastGzipOptions();
     const selectedInputPath = inputPath ?? lastBuild?.src;
     const selectedOutputPath = outputPath ?? lastBuild?.dst ?? 'fsdata.c';
+    const gzipOptions = {
+        gzip: gzipOverride ?? lastGzipOptions?.gzip ?? false,
+        gzipLevel: gzipLevelOverride ?? lastGzipOptions?.gzipLevel ?? DEFAULT_GZIP_LEVEL
+    };
     if (!selectedInputPath) {
         throw new CliUsageError('Headless mode requires --src, or a source path saved by a previous successful build.');
     }
@@ -28,11 +34,12 @@ const runHeadlessBuild = async (inputPath, outputPath, minifyOpts, optimizeSvg,
         precalcChksum: false,
         minifyOpts,
         optimizeSvg,
-        svgoMultipass
+        svgoMultipass,
+        ...gzipOptions
     };
     const stats = await runMakeFsData(opts);
-    saveLastBuildPaths(opts.inputDir, opts.outputFile);
-    console.log(`✨ Build complete: ${stats.filesCount} file(s), ${stats.originalSize} -> ${stats.compressedSize} bytes.`);
+    saveLastBuildPaths(opts.inputDir, opts.outputFile, gzipOptions);
+    console.log(`✨ Build complete: ${stats.filesCount} file(s), ${stats.originalSize} -> ${stats.compressedSize} -> ${stats.storedSize} bytes (${stats.gzipFilesCount} gzip file(s)).`);
 };
 const main = async () => {
     try {
@@ -50,7 +57,7 @@ const main = async () => {
             return;
         }
         if (args.headless) {
-            await runHeadlessBuild(args.inputPath, args.outputPath, args.minifyOpts, args.optimizeSvg, args.svgoMultipass);
+            await runHeadlessBuild(args.inputPath, args.outputPath, args.minifyOpts, args.optimizeSvg, args.svgoMultipass, args.gzip, args.gzipLevel);
             return;
         }
         startGuiServer(args.port ?? getDefaultGuiPort());

package/dist/gzip-options.js

@@ -0,0 +1,10 @@
+export const DEFAULT_GZIP_LEVEL = 9;
+export const isGzipLevel = (value) => {
+    return typeof value === 'number' && Number.isInteger(value) && value >= 1 && value <= 9;
+};
+export const getDefaultGzipBuildOptions = () => {
+    return {
+        gzip: false,
+        gzipLevel: DEFAULT_GZIP_LEVEL
+    };
+};

package/dist/makefsdata.js

@@ -59,8 +59,12 @@
 // modern ESM
 import fs from 'node:fs';
 import path from 'node:path';
+import { gzipSync } from 'node:zlib';
+import { transform as transformJavaScript } from 'esbuild';
 import { minify } from 'html-minifier-next';
+import { transform as transformCss } from 'lightningcss';
 import { optimize } from 'svgo';
+import { DEFAULT_GZIP_LEVEL, isGzipLevel } from './gzip-options.js';
 import { getPackageVersion } from './utils.js';
 import { DEFAULT_HTML_MINIFY_OPTIONS } from './minify-options.js';
 // ----------------------------------------------------------------------
@@ -69,6 +73,9 @@ import { DEFAULT_HTML_MINIFY_OPTIONS } from './minify-options.js';
 const TCP_MSS = 1460;
 const LWIP_VERSION = "1.3.1"; // this makefsdata.ts is based on lwIP v1.3.1
 const REDIRHOME_PATH = '/redirhome.html';
+const GZIP_CANDIDATE_EXTENSIONS = new Set([
+    '.html', '.htm', '.css', '.js', '.mjs', '.json', '.svg', '.xml', '.txt', '.map'
+]);
 // ----------------------------------------------------------------------
 // 3. lwIP Helpers
 // ----------------------------------------------------------------------
@@ -85,6 +92,7 @@ function getMimeType(fileName) {
         case '.css':
             return 'text/css';
         case '.js':
+        case '.mjs':
             return 'application/javascript';
         case '.png':
             return 'image/png';
@@ -99,6 +107,7 @@ function getMimeType(fileName) {
         case '.xml':
             return 'text/xml';
         case '.json':
+        case '.map':
             return 'application/json';
         case '.svg':
             return 'image/svg+xml';
@@ -119,7 +128,7 @@ function inetChksum(buf) {
         sum = (sum & 0xFFFF) + (sum >> 16);
     return (~sum) & 0xFFFF;
 }
-function generateHttpHeaders(fileName, dataLength, opts) {
+function generateHttpHeaders(fileName, dataLength, opts, contentEncoding) {
     const parts = [];
     const ccVersion = getPackageVersion();
     const addPart = (str) => { parts.push({ str, buf: Buffer.from(str, 'ascii') }); };
@@ -149,21 +158,29 @@ function generateHttpHeaders(fileName, dataLength, opts) {
         else
             addPart(`Connection: close\r\n`);
     }
-    addPart(`Content-type: ${getMimeType(fileName)}\r\n\r\n`);
+    if (contentEncoding === 'gzip') {
+        addPart(`Content-type: ${getMimeType(fileName)}\r\n`);
+        addPart('Content-Encoding: gzip\r\n');
+        addPart('\r\n');
+    }
+    else
+        addPart(`Content-type: ${getMimeType(fileName)}\r\n\r\n`);
     return { parts, totalBuffer: Buffer.concat(parts.map(p => p.buf)) };
 }
-function getFilesRecursive(dir, processSubs) {
+function getFilesRecursive(dir, processSubs, sortEntries) {
     const results = [];
     if (!fs.existsSync(dir))
         return results;
     const list = fs.readdirSync(dir);
+    if (sortEntries)
+        list.sort();
     for (const file of list) {
         const fullPath = path.join(dir, file);
         const stat = fs.statSync(fullPath);
         if (!stat.isDirectory())
             results.push(fullPath);
         else if (processSubs)
-            results.push(...getFilesRecursive(fullPath, processSubs));
+            results.push(...getFilesRecursive(fullPath, processSubs, sortEntries));
     }
     return results;
 }
@@ -183,6 +200,74 @@ function bufferToHexCArray(buf) {
         out += '\n';
     return out;
 }
+function gzipDeterministic(content, gzipLevel) {
+    const compressed = gzipSync(content, { level: gzipLevel });
+    // RFC 1952 mtime and OS fields: avoid build-time and host-specific metadata.
+    compressed.fill(0, 4, 8);
+    compressed[9] = 0xff;
+    return compressed;
+}
+async function optimizeContent(filePath, relativePath, content, minifyOpts, opts) {
+    const ext = path.extname(filePath).toLowerCase();
+    if (ext === '.svg' && opts.optimizeSvg !== false) {
+        try {
+            const optimizedSvg = optimize(content.toString('utf8'), {
+                path: filePath,
+                multipass: opts.svgoMultipass ?? false
+            });
+            const optimizedContent = Buffer.from(optimizedSvg.data, 'utf8');
+            console.log(`🖼️ Optimized SVG: ${relativePath} (${content.length} -> ${optimizedContent.length} bytes)`);
+            return optimizedContent;
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            throw new Error(`Failed to optimize SVG ${relativePath}: ${message}`);
+        }
+    }
+    if (['.html', '.htm'].includes(ext)) {
+        const minifiedHtml = await minify(content.toString('utf8'), minifyOpts);
+        if (typeof minifiedHtml === 'string') {
+            const optimizedContent = Buffer.from(minifiedHtml, 'utf8');
+            console.log(`📦 Minified HTML: ${relativePath} (${content.length} -> ${optimizedContent.length} bytes)`);
+            return optimizedContent;
+        }
+    }
+    if (ext === '.css' && minifyOpts.minifyCSS) {
+        try {
+            const optimizedCss = transformCss({
+                filename: filePath,
+                code: content,
+                minify: true
+            });
+            const optimizedContent = Buffer.from(optimizedCss.code);
+            console.log(`🎨 Minified CSS: ${relativePath} (${content.length} -> ${optimizedContent.length} bytes)`);
+            return optimizedContent;
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            throw new Error(`Failed to minify CSS ${relativePath}: ${message}`);
+        }
+    }
+    if (['.js', '.mjs'].includes(ext) && minifyOpts.minifyJS) {
+        try {
+            const optimizedJs = await transformJavaScript(content.toString('utf8'), {
+                loader: 'js',
+                minify: true,
+                legalComments: 'none',
+                sourcefile: filePath
+            });
+            const optimizedContent = Buffer.from(optimizedJs.code, 'utf8');
+            console.log(`📦 Minified JavaScript: ${relativePath} (${content.length} -> ${optimizedContent.length} bytes)`);
+            return optimizedContent;
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            throw new Error(`Failed to minify JavaScript ${relativePath}: ${message}`);
+        }
+    }
+    console.log(`📄 Copied: ${relativePath}`);
+    return content;
+}
 export async function runMakeFsData(opts) {
     console.log(`🚀 CC4EmbeddedSystem V3: Starting makefsdata compilation...`);
     // Check source directory before making any output directory changes.
@@ -202,10 +287,16 @@ export async function runMakeFsData(opts) {
     const outDir = path.dirname(opts.outputFile);
     if (!fs.existsSync(outDir))
         fs.mkdirSync(outDir, { recursive: true });
-    const allFiles = getFilesRecursive(opts.inputDir, opts.processSubs);
+    const gzipEnabled = opts.gzip ?? false;
+    const gzipLevel = opts.gzipLevel ?? DEFAULT_GZIP_LEVEL;
+    if (!isGzipLevel(gzipLevel))
+        throw new Error('gzipLevel must be an integer from 1 to 9.');
+    const allFiles = getFilesRecursive(opts.inputDir, opts.processSubs, gzipEnabled);
     const fileEntries = [];
     let totalOriginalSize = 0;
     let totalCompressedSize = 0;
+    let totalStoredSize = 0;
+    let gzipFilesCount = 0;
     if (allFiles.length === 0)
         throw new Error(`Input directory is empty! Please put your web files (.html, .css, etc.) into:\n${path.resolve(opts.inputDir)}`);
     const activeCompressOpts = opts.minifyOpts ?? DEFAULT_HTML_MINIFY_OPTIONS;
@@ -216,32 +307,29 @@ export async function runMakeFsData(opts) {
         let content = fs.readFileSync(filePath);
         const originalFileSize = content.length;
         totalOriginalSize += originalFileSize;
-        if (ext === '.svg' && opts.optimizeSvg !== false) {
-            try {
-                const optimizedSvg = optimize(content.toString('utf8'), {
-                    path: filePath,
-                    multipass: opts.svgoMultipass ?? false
-                });
-                content = Buffer.from(optimizedSvg.data, 'utf8');
-                console.log(`🖼️ Optimized SVG: ${relativePath} (${originalFileSize} -> ${content.length} bytes)`);
-            }
-            catch (error) {
-                const message = error instanceof Error ? error.message : String(error);
-                throw new Error(`Failed to optimize SVG ${relativePath}: ${message}`);
-            }
-        }
-        else if (['.html', '.htm', '.css', '.js'].includes(ext)) {
-            const minifiedStr = await minify(content.toString('utf8'), activeCompressOpts);
-            if (typeof minifiedStr === 'string') {
-                content = Buffer.from(minifiedStr, 'utf8');
-                console.log(`📦 Minified: ${relativePath} (${originalFileSize} -> ${content.length} bytes)`);
+        content = await optimizeContent(filePath, relativePath, content, activeCompressOpts, opts);
+        const rawContentLength = content.length;
+        totalCompressedSize += rawContentLength;
+        let contentEncoding;
+        let compressionNote;
+        if (gzipEnabled && GZIP_CANDIDATE_EXTENSIONS.has(ext)) {
+            const gzipContent = gzipDeterministic(content, gzipLevel);
+            if (gzipContent.length < content.length) {
+                content = gzipContent;
+                contentEncoding = 'gzip';
+                gzipFilesCount++;
+                const savedSize = rawContentLength - content.length;
+                const savedPercent = ((savedSize / rawContentLength) * 100).toFixed(1);
+                compressionNote = `gzip level ${gzipLevel}, original ${rawContentLength} B, stored ${content.length} B, saved ${savedSize} B (${savedPercent}%)`;
             }
+            else
+                compressionNote = `raw, original ${rawContentLength} B, gzip was not smaller`;
         }
-        else
-            console.log(`📄 Copied: ${relativePath}`);
-        totalCompressedSize += content.length;
+        else if (gzipEnabled)
+            compressionNote = 'raw, not a gzip candidate';
+        totalStoredSize += content.length;
         // generate header
-        const headerData = opts.includeHttpHeader ? generateHttpHeaders(filePath, content.length, opts) : { parts: [], totalBuffer: Buffer.alloc(0) };
+        const headerData = opts.includeHttpHeader ? generateHttpHeaders(filePath, content.length, opts, contentEncoding) : { parts: [], totalBuffer: Buffer.alloc(0) };
         const nameBuffer = Buffer.from(relativePath + '\0', 'utf8');
         const varName = relativePath.replace(/[^A-Za-z0-9]/g, '_');
         const chksums = [];
@@ -257,7 +345,21 @@ export async function runMakeFsData(opts) {
                 offset += chunkLen;
             }
         }
-        fileEntries.push({ varName, pathName: relativePath, nameBuffer, headerParts: headerData.parts, headerTotalBuffer: headerData.totalBuffer, contentBuffer: content, chksums });
+        const fileEntry = {
+            varName,
+            pathName: relativePath,
+            nameBuffer,
+            headerParts: headerData.parts,
+            headerTotalBuffer: headerData.totalBuffer,
+            contentBuffer: content,
+            chksums,
+            rawContentLength
+        };
+        if (contentEncoding)
+            fileEntry.contentEncoding = contentEncoding;
+        if (compressionNote)
+            fileEntry.compressionNote = compressionNote;
+        fileEntries.push(fileEntry);
     }
     // find real redirhome.html
     const redirhomeIndex = fileEntries.findIndex(file => file.pathName.toLowerCase() === REDIRHOME_PATH);
@@ -285,6 +387,8 @@ export async function runMakeFsData(opts) {
     }
     // generate data arrays
     for (const file of orderedFileEntries) {
+        if (file.compressionNote)
+            cOutput += `/* ${file.pathName}: ${file.compressionNote} */\n`;
         cOutput += `static const unsigned int dummy_align_${file.varName} = 0;\n`;
         cOutput += `static const unsigned char data_${file.varName}[] = {\n`;
         cOutput += `\t/* ${file.pathName} (${file.nameBuffer.length} chars) */\n`;
@@ -299,7 +403,8 @@ export async function runMakeFsData(opts) {
                 cOutput += bufferToHexCArray(part.buf);
             }
         }
-        cOutput += `\n\t/* raw file data (${file.contentBuffer.length} bytes) */\n`;
+        const contentDescription = file.contentEncoding === 'gzip' ? 'gzip file data' : 'raw file data';
+        cOutput += `\n\t/* ${contentDescription} (${file.contentBuffer.length} bytes) */\n`;
         cOutput += bufferToHexCArray(file.contentBuffer);
         cOutput += `};\n\n\n\n`;
     }
@@ -340,8 +445,10 @@ export async function runMakeFsData(opts) {
         return {
             originalSize: totalOriginalSize,
             compressedSize: totalCompressedSize,
+            storedSize: totalStoredSize,
             convertedSize: convertedSize,
-            filesCount: orderedFileEntries.length
+            filesCount: orderedFileEntries.length,
+            gzipFilesCount
         };
     }
     throw new Error("No files processed.");

package/dist/public/index.html

@@ -28,9 +28,14 @@
         /* Advanced Settings */
         details { background: #1e1e1e; padding: 12px; border-radius: 4px; border: 1px solid #444; margin-bottom: 20px; }
         summary { cursor: pointer; color: #c586c0; font-weight: bold; outline: none; user-select: none; }
-        .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
-        .checkbox-label { display: flex; align-items: center; font-weight: normal; color: #cccccc; cursor: pointer; font-size: 14px; margin-bottom: 0; }
-        .checkbox-label input { margin-right: 8px; cursor: pointer; accent-color: #0e639c; }
+        .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
+        .checkbox-label { display: flex; align-items: center; font-weight: normal; color: #cccccc; cursor: pointer; font-size: 14px; margin-bottom: 0; }
+        .checkbox-label input[type="checkbox"] { margin-right: 8px; cursor: pointer; accent-color: #0e639c; }
+        .gzip-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #444; }
+        .gzip-toggle { white-space: nowrap; }
+        .gzip-level-control { display: grid; grid-template-columns: auto 68px; align-items: center; justify-content: start; gap: 8px; margin: 0; font-weight: normal; color: #cccccc; font-size: 14px; }
+        .gzip-level-control[hidden] { display: none; }
+        .gzip-level { box-sizing: border-box; width: 68px; padding: 4px 6px; background: #3c3c3c; border: 1px solid #555; border-radius: 4px; color: #d4d4d4; text-align: center; font-family: 'Consolas', monospace; }
 
         /* Compression Stats Panel */
         .stats-panel { background: #1e1e1e; border: 1px solid #444; border-radius: 4px; padding: 15px; margin-bottom: 20px; display: none; }
@@ -90,15 +95,20 @@
             <label class="checkbox-label"><input type="checkbox" id="opt-removeAttributeQuotes"> removeAttributeQuotes</label>
             <label class="checkbox-label"><input type="checkbox" id="opt-removeEmptyAttributes"> removeEmptyAttributes</label>
             <label class="checkbox-label"><input type="checkbox" id="opt-removeRedundantAttributes"> redundantAttributes</label>
-            <label class="checkbox-label"><input type="checkbox" id="opt-useShortDoctype"> useShortDoctype</label>
-        </div>
+            <label class="checkbox-label"><input type="checkbox" id="opt-useShortDoctype"> useShortDoctype</label>
+        </div>
+        <div class="gzip-options">
+            <label class="checkbox-label gzip-toggle"><input type="checkbox" id="opt-gzip">gzip resource storage</label>
+            <label id="gzip-level-control" class="gzip-level-control" for="opt-gzipLevel" hidden><span>gzip level</span><input type="number" id="opt-gzipLevel" class="gzip-level" min="1" max="9" value="9" disabled></label>
+        </div>
     </details>
 
     <div id="statsPanel" class="stats-panel">
         <div class="stats-title">📊 Compression Analysis</div>
-        <div class="stats-info">
-            <span>Compressed: <span id="compSize" style="color: #9cdcfe;">0</span> KB</span>
-            <span>Converted: <span id="convSize" style="color: #dcdcaa;">0</span> KB</span>
+        <div class="stats-info">
+            <span>Compressed: <span id="compSize" style="color: #9cdcfe;">0</span> KB</span>
+            <span>Stored: <span id="storedSize" style="color: #4ec9b0;">0</span> KB</span>
+            <span>Converted: <span id="convSize" style="color: #dcdcaa;">0</span> KB</span>
             <span>Original: <span id="origSize" style="color: #ce9178;">0</span> KB</span>
         </div>
         <div class="bar-container">
@@ -164,10 +174,16 @@
     let isBrowsePending = false;
     document.getElementById('guiPort').value = window.location.port || '80';
 
-    function setBrowseState(active) {
-        isBrowsing = active;
-        document.body.classList.toggle('browse-locked', active);
-    }
+    function setBrowseState(active) {
+        isBrowsing = active;
+        document.body.classList.toggle('browse-locked', active);
+    }
+
+    function syncGzipLevel() {
+        const enabled = document.getElementById('opt-gzip').checked;
+        document.getElementById('gzip-level-control').hidden = !enabled;
+        document.getElementById('opt-gzipLevel').disabled = !enabled;
+    }
 
     async function handleBrowse(targetId, type) {
         if (isBrowsing || isBrowsePending) return;
@@ -222,9 +238,17 @@
                 document.getElementById('inputPath').value = data.lastBuild.src || '';
                 document.getElementById('outputPath').value = data.lastBuild.dst || '';
             }
+
+            if (data.gzipOptions) {
+                document.getElementById('opt-gzip').checked = data.gzipOptions.gzip === true;
+                document.getElementById('opt-gzipLevel').value = data.gzipOptions.gzipLevel || 9;
+            }
+            syncGzipLevel();
         }
         catch (error) { console.error('Can\'t load saved paths!', error); }
     });
+
+    document.getElementById('opt-gzip').addEventListener('change', syncGzipLevel);
 
     async function changePort() {
         const newPort = document.getElementById('guiPort').value.trim();
@@ -248,7 +272,7 @@
         const outPath = document.getElementById('outputPath').value.trim();
         if (! inPath || ! outPath) { alert('❌ Paths required.'); return; }
 
-        const minifyOptions = {
+        const minifyOptions = {
             collapseWhitespace: document.getElementById('opt-collapseWhitespace').checked,
             removeComments: document.getElementById('opt-removeComments').checked,
             minifyJS: document.getElementById('opt-minifyJS').checked,
@@ -258,13 +282,19 @@
             removeAttributeQuotes: document.getElementById('opt-removeAttributeQuotes').checked,
             removeEmptyAttributes: document.getElementById('opt-removeEmptyAttributes').checked,
             removeRedundantAttributes: document.getElementById('opt-removeRedundantAttributes').checked,
-            useShortDoctype: document.getElementById('opt-useShortDoctype').checked
-        };
-
-        const res = await fetch('/api/build', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ inputPath: inPath, outputPath: outPath, minifyOpts: minifyOptions })
+            useShortDoctype: document.getElementById('opt-useShortDoctype').checked
+        };
+        const gzip = document.getElementById('opt-gzip').checked;
+        const gzipLevel = Number(document.getElementById('opt-gzipLevel').value);
+        if (!Number.isInteger(gzipLevel) || gzipLevel < 1 || gzipLevel > 9) {
+            alert('❌ gzip level must be an integer from 1 to 9.');
+            return;
+        }
+
+        const res = await fetch('/api/build', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ inputPath: inPath, outputPath: outPath, minifyOpts: minifyOptions, gzip, gzipLevel })
         });
         const result = await res.json();
 
@@ -274,19 +304,21 @@
                 const panel = document.getElementById('statsPanel');
                 panel.style.display = 'block';
 
-                const { originalSize, compressedSize, convertedSize } = result.stats;
-                const origKB = (originalSize / 1024).toFixed(2);
-                const compKB = (compressedSize / 1024).toFixed(2);
-                const convKB = (convertedSize / 1024).toFixed(2);
-                
-                // ratio: the saved percentage
-                const ratio = originalSize > 0 ? (((originalSize - compressedSize) / originalSize) * 100).toFixed(1) : 0;
+                const { originalSize, compressedSize, storedSize, convertedSize } = result.stats;
+                const origKB = (originalSize / 1024).toFixed(2);
+                const compKB = (compressedSize / 1024).toFixed(2);
+                const storedKB = (storedSize / 1024).toFixed(2);
+                const convKB = (convertedSize / 1024).toFixed(2);
+                
+                // ratio: the saved percentage
+                const ratio = originalSize > 0 ? (((originalSize - storedSize) / originalSize) * 100).toFixed(1) : 0;
                 // compressedRatio: the remainings percentage
                 const compressedRatio = (100 - ratio).toFixed(1);
 
-                document.getElementById('origSize').innerText = origKB;
-                document.getElementById('compSize').innerText = compKB;
-                document.getElementById('convSize').innerText = convKB;
+                document.getElementById('origSize').innerText = origKB;
+                document.getElementById('compSize').innerText = compKB;
+                document.getElementById('storedSize').innerText = storedKB;
+                document.getElementById('convSize').innerText = convKB;
                 document.getElementById('barText').innerText = `${ratio}% Size Reduced`;
                 
                 // actual used percentage
@@ -294,7 +326,7 @@
                     document.getElementById('barFill').style.width = compressedRatio + '%';
                 }, 50);
 
-                document.getElementById('savingsInfo').innerText = `✨ Total saved: ${(origKB - compKB).toFixed(2)} KB`;
+                document.getElementById('savingsInfo').innerText = `✨ Total stored saving: ${(origKB - storedKB).toFixed(2)} KB`;
             }
 
             alert('✨ Success! C Code generated at ' + outPath);

package/dist/server.js

@@ -5,7 +5,8 @@ import os from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import open from 'open';
-import { getLastBuildPaths, saveLastBuildPaths } from './config.js';
+import { getLastBuildPaths, getLastGzipOptions, saveLastBuildPaths } from './config.js';
+import { DEFAULT_GZIP_LEVEL, isGzipLevel } from './gzip-options.js';
 import { runMakeFsData } from './makefsdata.js';
 import { normalizeHtmlMinifyOptions } from './minify-options.js';
 import { getPackageVersion } from './utils.js';
@@ -47,6 +48,19 @@ const buildWindowsDialogScript = (dialogLines) => {
 const isNonEmptyString = (value) => {
     return typeof value === 'string' && value.trim().length > 0;
 };
+const getGzipOptionsFromRequest = (value) => {
+    if (typeof value !== 'object' || value === null) {
+        return { gzip: false, gzipLevel: DEFAULT_GZIP_LEVEL };
+    }
+    const requestOptions = value;
+    const gzip = requestOptions.gzip ?? false;
+    const gzipLevel = requestOptions.gzipLevel ?? DEFAULT_GZIP_LEVEL;
+    if (typeof gzip !== 'boolean')
+        throw new Error('gzip must be a boolean.');
+    if (!isGzipLevel(gzipLevel))
+        throw new Error('gzip level must be an integer from 1 to 9.');
+    return { gzip, gzipLevel };
+};
 export const startGuiServer = (initialPort) => {
     const app = express();
     let port = initialPort;
@@ -124,7 +138,10 @@ export const startGuiServer = (initialPort) => {
     });
     app.get('/api/config', (_req, res) => {
         cancelShutdown();
-        res.json({ lastBuild: getLastBuildPaths() ?? null });
+        res.json({
+            lastBuild: getLastBuildPaths() ?? null,
+            gzipOptions: getLastGzipOptions() ?? { gzip: false, gzipLevel: DEFAULT_GZIP_LEVEL }
+        });
     });
     app.post('/api/shutdown', (_req, res) => {
         res.json({ success: true });
@@ -143,6 +160,15 @@ export const startGuiServer = (initialPort) => {
             res.status(400).json({ success: false, message: 'Input and output paths are required.' });
             return;
         }
+        let gzipOptions;
+        try {
+            gzipOptions = getGzipOptionsFromRequest(req.body);
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            res.status(400).json({ success: false, message });
+            return;
+        }
         const opts = {
             inputDir: path.resolve(inputPath),
             outputFile: path.resolve(outputPath),
@@ -153,13 +179,14 @@ export const startGuiServer = (initialPort) => {
             precalcChksum: false,
             minifyOpts: normalizeHtmlMinifyOptions(req.body.minifyOpts),
             optimizeSvg: true,
-            svgoMultipass: false
+            svgoMultipass: false,
+            ...gzipOptions
         };
         console.log(`[Build] Input: ${opts.inputDir}`);
         console.log(`[Build] Output: ${opts.outputFile}`);
         try {
             const stats = await runMakeFsData(opts);
-            saveLastBuildPaths(opts.inputDir, opts.outputFile);
+            saveLastBuildPaths(opts.inputDir, opts.outputFile, gzipOptions);
             try {
                 await open(path.dirname(opts.outputFile));
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cc4-embedded-system",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "A modern typescript version of makefsdata based on html-minifier-next and lwIP v1.3.1",
   "bin": {
     "cc4es": "dist/gui.js"
@@ -9,6 +9,7 @@
   "scripts": {
     "dev": "tsx src/gui.ts",
     "build": "tsc && xcopy /E /I /Y public dist\\public",
+    "test": "tsc && node --test",
     "prepublishOnly": "npm run build"
   },
   "files": [
@@ -28,8 +29,10 @@
   "author": "LunaticGhoulPiano",
   "license": "MIT",
   "dependencies": {
+    "esbuild": "^0.27.7",
     "express": "^5.2.1",
     "html-minifier-next": "^6.1.2",
+    "lightningcss": "^1.32.0",
     "open": "^11.0.0",
     "svgo": "^4.0.2"
   },