cc4-embedded-system 3.1.9 → 3.2.0

package/README.md

@@ -1,20 +1,37 @@
 # CC4EmbeddedSystem V3
-- This version based on [html-minifier-next](https://github.com/j9t/html-minifier-next) and rewrite [lwIP makefsdata](https://github.com/m-labs/lwip/tree/master/src/apps/httpd/makefsdata), run on localhost, default port: ```3000```.
+- 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```.
 - 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.
 
-![](./Screenshot/v3.1.9.png)
+## Demo
+- Select input directory
+
+![](./Screenshot/inputs.png)
+- Select output file path
+
+![](./Screenshot/output.png)
+- Result
+
+![](./Screenshot/v3.1.10.png)
 
 ## Structure
 ```text
 CC4EmbeddedSystem/
 ├── src/
-│   ├── gui.ts        // Express server & CLI entry point
-│   │   ├── utils.ts  // To get latest tool version
-│   └── makefsdata.ts // Core C code generation & minification logic
+│   ├── gui.ts            // CLI entry point
+│   ├── cli.ts            // Command-line parsing and help text
+│   ├── server.ts         // Express GUI server
+│   ├── config.ts         // Persistent last-build paths
+│   ├── minify-options.ts // Shared HTML minifier options
+│   ├── makefsdata.ts     // Core C code generation and minification logic
+│   └── utils.ts          // Package version lookup
 ├── public/
 │   └── index.html    // Web GUI dashboard
 ├── Sereenshot/
-│   └── v3.1.9.png    // Demo image
+│   ├── inputs.png    // Demo image
+│   ├── output.png    // Demo image
+│   └── v3.1.10.png   // Demo image
 ├── node_modules/     // Required submodules during development
 ├── dist/             // Compiled JavaScript output (Auto-generated)
 ├── package.json      // Project configuration & dependencies
@@ -23,6 +40,33 @@ CC4EmbeddedSystem/
 ```
 
 ## Commands
+### CLI Help Texts
+```text
+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)
+  -p, --port <1-65535>               GUI server port
+  --[no-]optimize-svg                Enable or disable SVGO (default: enabled)
+  --svgo-multipass                   Run SVGO optimization repeatedly
+
+HTML compression options:
+  --[no-]collapse-whitespace         --[no-]remove-comments
+  --[no-]minify-js                   --[no-]minify-css
+  --[no-]conditional-comments        --[no-]decode-entities
+  --[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.
+```
 ### Normal Use
 - Global installation
     ```bash
@@ -37,6 +81,33 @@ CC4EmbeddedSystem/
     ```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
+    ```
+- CLI help and version
+    ```bash
+    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
+    ```
+- Update
+  ```bash
+  npm install -g cc4-embedded-system@latest
+  ```
 ### Development
 ```bash
 # build
@@ -46,9 +117,14 @@ npm run build
 npm link
 cc4es
 
+# headless development test
+npm run dev -- --headless --src C:\Project\web --dst C:\Project\fsdata.c
+
 # publish
+npm whoami # verify
 npm login
-# npm version patch # if increase version
-npm run build
+npm version patch --no-git-tag-version # if increase version
+npm run dev # dev mode for testing
+npm run build # build the newest
 npm publish --access public
-```
+```

package/dist/cli.js

@@ -0,0 +1,146 @@
+import { DEFAULT_HTML_MINIFY_OPTIONS } from './minify-options.js';
+export class CliUsageError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'CliUsageError';
+    }
+}
+const MINIFY_FLAGS = {
+    '--collapse-whitespace': 'collapseWhitespace',
+    '--no-collapse-whitespace': 'collapseWhitespace',
+    '--remove-comments': 'removeComments',
+    '--no-remove-comments': 'removeComments',
+    '--minify-js': 'minifyJS',
+    '--no-minify-js': 'minifyJS',
+    '--minify-css': 'minifyCSS',
+    '--no-minify-css': 'minifyCSS',
+    '--conditional-comments': 'processConditionalComments',
+    '--no-conditional-comments': 'processConditionalComments',
+    '--decode-entities': 'decodeEntities',
+    '--no-decode-entities': 'decodeEntities',
+    '--remove-attribute-quotes': 'removeAttributeQuotes',
+    '--no-remove-attribute-quotes': 'removeAttributeQuotes',
+    '--remove-empty-attributes': 'removeEmptyAttributes',
+    '--no-remove-empty-attributes': 'removeEmptyAttributes',
+    '--remove-redundant-attributes': 'removeRedundantAttributes',
+    '--no-remove-redundant-attributes': 'removeRedundantAttributes',
+    '--use-short-doctype': 'useShortDoctype',
+    '--no-use-short-doctype': 'useShortDoctype'
+};
+const getRequiredValue = (args, index, option) => {
+    const value = args[index + 1];
+    if (!value || value.startsWith('-'))
+        throw new CliUsageError(`${option} requires a value.`);
+    return value;
+};
+const parsePort = (value) => {
+    if (!/^\d+$/.test(value))
+        throw new CliUsageError('--port must be an integer from 1 to 65535.');
+    const port = Number.parseInt(value, 10);
+    if (port < 1 || port > 65535)
+        throw new CliUsageError('--port must be an integer from 1 to 65535.');
+    return port;
+};
+export const parseCliArguments = (args) => {
+    const parsed = {
+        showHelp: false,
+        showVersion: false,
+        showConfigPath: false,
+        headless: false,
+        minifyOpts: { ...DEFAULT_HTML_MINIFY_OPTIONS },
+        optimizeSvg: true,
+        svgoMultipass: false
+    };
+    for (let index = 0; index < args.length; index++) {
+        const argument = args[index];
+        if (!argument)
+            continue;
+        const minifyOption = MINIFY_FLAGS[argument];
+        if (minifyOption) {
+            parsed.minifyOpts[minifyOption] = !argument.startsWith('--no-');
+            continue;
+        }
+        switch (argument) {
+            case '-h':
+            case '--help':
+                parsed.showHelp = true;
+                break;
+            case '-V':
+            case '--version':
+                parsed.showVersion = true;
+                break;
+            case '--config-path':
+                parsed.showConfigPath = true;
+                break;
+            case '--headless':
+                parsed.headless = true;
+                break;
+            case '-s':
+            case '--src':
+            case '--input':
+                parsed.inputPath = getRequiredValue(args, index, argument);
+                index++;
+                break;
+            case '-d':
+            case '--dst':
+            case '--output':
+                parsed.outputPath = getRequiredValue(args, index, argument);
+                index++;
+                break;
+            case '-p':
+            case '--port':
+                parsed.port = parsePort(getRequiredValue(args, index, argument));
+                index++;
+                break;
+            case '--optimize-svg':
+                parsed.optimizeSvg = true;
+                break;
+            case '--no-optimize-svg':
+                parsed.optimizeSvg = false;
+                break;
+            case '--svgo-multipass':
+                parsed.svgoMultipass = true;
+                break;
+            default:
+                throw new CliUsageError(`Unknown option: ${argument}`);
+        }
+    }
+    if (parsed.headless && parsed.port !== undefined) {
+        throw new CliUsageError('--port is only available when starting the GUI.');
+    }
+    if (parsed.headless && !parsed.inputPath && !parsed.outputPath) {
+        throw new CliUsageError('Headless mode requires --src or --dst. It will not automatically rerun the last build.');
+    }
+    if (!parsed.headless && (parsed.inputPath || parsed.outputPath)) {
+        throw new CliUsageError('--src and --dst require --headless.');
+    }
+    return parsed;
+};
+export const getHelpText = () => {
+    return [
+        '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)',
+        '  -p, --port <1-65535>               GUI server port',
+        '  --[no-]optimize-svg                Enable or disable SVGO (default: enabled)',
+        '  --svgo-multipass                   Run SVGO optimization repeatedly',
+        '',
+        'HTML compression options:',
+        '  --[no-]collapse-whitespace         --[no-]remove-comments',
+        '  --[no-]minify-js                   --[no-]minify-css',
+        '  --[no-]conditional-comments        --[no-]decode-entities',
+        '  --[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.'
+    ].join('\n');
+};

package/dist/config.js

@@ -0,0 +1,71 @@
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+export const CONFIG_FILE_NAME = 'cc4es_configs.json';
+const getStateDirectory = () => {
+    const homeDirectory = os.homedir();
+    if (process.platform === 'win32') {
+        return process.env.LOCALAPPDATA ?? path.join(homeDirectory, 'AppData', 'Local');
+    }
+    if (process.platform === 'darwin') {
+        return path.join(homeDirectory, 'Library', 'Application Support');
+    }
+    return process.env.XDG_STATE_HOME ?? path.join(homeDirectory, '.local', 'state');
+};
+export const getConfigFilePath = () => {
+    return path.join(getStateDirectory(), 'cc4-embedded-system', CONFIG_FILE_NAME);
+};
+const isRecord = (value) => {
+    return typeof value === 'object' && value !== null;
+};
+const readConfig = () => {
+    try {
+        const parsedConfig = JSON.parse(fs.readFileSync(getConfigFilePath(), 'utf8'));
+        if (!isRecord(parsedConfig) || !isRecord(parsedConfig.lastBuild))
+            return { schemaVersion: 1 };
+        const src = parsedConfig.lastBuild.src;
+        const dst = parsedConfig.lastBuild.dst;
+        if (typeof src !== 'string' || typeof dst !== 'string' || !src || !dst) {
+            return { schemaVersion: 1 };
+        }
+        return {
+            schemaVersion: 1,
+            lastBuild: { src, dst }
+        };
+    }
+    catch {
+        return { schemaVersion: 1 };
+    }
+};
+export const getLastBuildPaths = () => {
+    return readConfig().lastBuild;
+};
+export const saveLastBuildPaths = (src, dst) => {
+    const configFilePath = getConfigFilePath();
+    const temporaryFilePath = `${configFilePath}.${process.pid}.tmp`;
+    const configAlreadyExists = fs.existsSync(configFilePath);
+    const config = {
+        schemaVersion: 1,
+        lastBuild: { src, dst }
+    };
+    try {
+        fs.mkdirSync(path.dirname(configFilePath), { recursive: true });
+        fs.writeFileSync(temporaryFilePath, `${JSON.stringify(config, null, 2)}\n`, 'utf8');
+        fs.renameSync(temporaryFilePath, configFilePath);
+        if (!configAlreadyExists)
+            console.log(`📝 Created config: ${configFilePath}`);
+        return true;
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        console.warn(`⚠️ Could not save ${CONFIG_FILE_NAME}: ${message}`);
+        try {
+            if (fs.existsSync(temporaryFilePath))
+                fs.unlinkSync(temporaryFilePath);
+        }
+        catch {
+            // Ignore cleanup errors because the build itself succeeded.
+        }
+        return false;
+    }
+};

package/dist/gui.js

@@ -1,302 +1,64 @@
 #!/usr/bin/env node
-/*
- * ==============================================================================
- * CC4EmbeddedSystem V3 (makefsdata)
- * Copyright (c) 2026 LunaticGhoulPiano / Emile Su
- * Licensed under the MIT License.
- * ==============================================================================
- *
- * This software integrates concepts, logic, and minification processes derived
- * from the following open-source projects. We deeply appreciate their work:
- *
- * ------------------------------------------------------------------------------
- * 1. lwIP (Lightweight TCP/IP stack)
- * Repository: https://github.com/m-labs/lwip
- * Copyright (c) 2001-2004 Swedish Institute of Computer Science.
- * All rights reserved.
- * * Redistribution and use in source and binary forms, with or without modification,
- * are permitted provided that the following conditions are met:
- * * 1. Redistributions of source code must retain the above copyright notice,
- * this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright notice,
- * this list of conditions and the following disclaimer in the documentation
- * and/or other materials provided with the distribution.
- * 3. The name of the author may not be used to endorse or promote products
- * derived from this software without specific prior written permission.
- * * THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR IMPLIED
- * WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
- * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
- * SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT
- * OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING
- * IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY
- * OF SUCH DAMAGE.
- *
- * ------------------------------------------------------------------------------
- * 2. html-minifier-next
- * Repository: https://github.com/j9t/html-minifier-next
- * Copyright (c) Jens Oliver Meiert (html-minifier-next)
- * Copyright (c) Daniel Ruf (html-minifier-terser)
- * Copyright (c) Juriy "kangax" Zaytsev (html-minifier)
- * * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- * * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- * ==============================================================================
- */
-import express from 'express';
-import open from 'open';
-import fs from 'node:fs';
 import path from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { CliUsageError, getHelpText, parseCliArguments } from './cli.js';
+import { getConfigFilePath, getLastBuildPaths, saveLastBuildPaths } from './config.js';
 import { runMakeFsData } from './makefsdata.js';
+import { startGuiServer } from './server.js';
 import { getPackageVersion } from './utils.js';
-import { execFile } from 'node:child_process';
-import os from 'node:os';
-// prevent socket errors
-process.on('uncaughtException', (err) => {
-    if (err.code === 'EADDRINUSE')
-        return;
-    console.error('⚠️ Uncaught Error:', err);
-});
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const app = express();
-// port set by command
-let PORT = parseInt(process.env.PORT || '3000', 10);
-const portArgIndex = process.argv.indexOf('--port');
-if (portArgIndex !== -1 && process.argv[portArgIndex + 1]) {
-    const parsedPort = parseInt(process.argv[portArgIndex + 1], 10);
-    if (!isNaN(parsedPort))
-        PORT = parsedPort;
-}
-let activeBrowseProcess = null;
-let server;
-let shutdownTimer = null;
-app.use(express.json());
-const publicPath = fs.existsSync(path.join(__dirname, 'public'))
-    ? path.join(__dirname, 'public')
-    : path.join(__dirname, '../public');
-console.log(`[System] Serving static files from: ${publicPath}`);
-app.use(express.static(publicPath));
-const cancelShutdown = () => {
-    if (shutdownTimer) {
-        clearTimeout(shutdownTimer);
-        shutdownTimer = null;
-        // console.log('🛡️ Shutdown cancelled (keep alive)');
-    }
-};
-const scheduleShutdown = () => {
-    if (!shutdownTimer) {
-        shutdownTimer = setTimeout(() => {
-            closeBrowseProcess();
-            console.log('👋 Window closed, shutting down ...');
-            process.exit(0);
-        }, 2000);
-    }
+const getDefaultGuiPort = () => {
+    const configuredPort = Number.parseInt(process.env.PORT ?? '3000', 10);
+    if (configuredPort < 1 || configuredPort > 65535 || Number.isNaN(configuredPort))
+        return 3000;
+    return configuredPort;
 };
-const buildPowerShellArgs = (script) => {
-    const encodedCommand = Buffer.from(script, 'utf16le').toString('base64');
-    return [
-        '-NoProfile',
-        '-STA',
-        '-EncodedCommand',
-        encodedCommand
-    ];
-};
-const closeBrowseProcess = () => {
-    if (activeBrowseProcess && !activeBrowseProcess.killed) {
-        try {
-            activeBrowseProcess.kill();
-        }
-        catch (e) {
-            // ignore child cleanup error
-        }
+const runHeadlessBuild = async (inputPath, outputPath, minifyOpts, optimizeSvg, svgoMultipass) => {
+    const lastBuild = getLastBuildPaths();
+    const selectedInputPath = inputPath ?? lastBuild?.src;
+    const selectedOutputPath = outputPath ?? lastBuild?.dst ?? 'fsdata.c';
+    if (!selectedInputPath) {
+        throw new CliUsageError('Headless mode requires --src, or a source path saved by a previous successful build.');
     }
-    activeBrowseProcess = null;
-};
-const runDialogCommand = (command, args) => {
-    return new Promise((resolve, reject) => {
-        const child = execFile(command, args, {
-            windowsHide: false,
-            maxBuffer: 1024 * 1024
-        }, (error, stdout, stderr) => {
-            if (activeBrowseProcess === child)
-                activeBrowseProcess = null;
-            if (error) {
-                reject(new Error(stderr.trim() || error.message));
-                return;
-            }
-            resolve(stdout.trim());
-        });
-        activeBrowseProcess = child;
-    });
-};
-const buildWindowsDialogScript = (dialogLines) => {
-    return [
-        'Add-Type -AssemblyName System.Windows.Forms',
-        'Add-Type -AssemblyName System.Drawing',
-        '$screen = [System.Windows.Forms.Screen]::PrimaryScreen.WorkingArea',
-        '$owner = New-Object System.Windows.Forms.Form',
-        '$owner.StartPosition = [System.Windows.Forms.FormStartPosition]::Manual',
-        '$owner.FormBorderStyle = [System.Windows.Forms.FormBorderStyle]::None',
-        '$owner.ShowInTaskbar = $false',
-        '$owner.TopMost = $true',
-        '$owner.Width = 1',
-        '$owner.Height = 1',
-        '$owner.Left = $screen.Left + [int]($screen.Width / 2)',
-        '$owner.Top = $screen.Top + [int]($screen.Height / 2)',
-        '$owner.Opacity = 0',
-        '$null = $owner.Show()',
-        '$null = $owner.Activate()',
-        '$owner.BringToFront()',
-        '[System.Windows.Forms.Application]::DoEvents()',
-        ...dialogLines,
-        '$owner.Close()',
-        '$owner.Dispose()'
-    ].join('\n');
-};
-app.get('/api/version', (_req, res) => {
-    cancelShutdown();
-    res.json({ version: getPackageVersion() });
-});
-app.post('/api/shutdown', (_req, res) => {
-    res.json({ success: true });
-    closeBrowseProcess();
-    scheduleShutdown();
-});
-app.post('/api/cancel-shutdown', (_req, res) => {
-    cancelShutdown();
-    res.json({ success: true });
-});
-app.post('/api/build', async (req, res) => {
-    cancelShutdown();
-    const { inputPath, outputPath, minifyOpts } = req.body;
-    console.log(`[Build] Input: ${inputPath}`);
-    console.log(`[Build] Output: ${outputPath}`);
     const opts = {
-        inputDir: inputPath,
-        outputFile: outputPath,
+        inputDir: path.resolve(selectedInputPath),
+        outputFile: path.resolve(selectedOutputPath),
         processSubs: true,
         includeHttpHeader: true,
         useHttp11: false,
         supportSsi: true,
         precalcChksum: false,
-        minifyOpts: minifyOpts
+        minifyOpts,
+        optimizeSvg,
+        svgoMultipass
     };
+    const stats = await runMakeFsData(opts);
+    saveLastBuildPaths(opts.inputDir, opts.outputFile);
+    console.log(`✨ Build complete: ${stats.filesCount} file(s), ${stats.originalSize} -> ${stats.compressedSize} bytes.`);
+};
+const main = async () => {
     try {
-        // get stats
-        const stats = await runMakeFsData(opts);
-        try {
-            await open(path.dirname(path.resolve(outputPath)));
+        const args = parseCliArguments(process.argv.slice(2));
+        if (args.showHelp) {
+            console.log(getHelpText());
+            return;
         }
-        catch (e) {
-            // ignore open folder error
+        if (args.showVersion) {
+            console.log(getPackageVersion());
+            return;
         }
-        // return stats
-        res.json({
-            success: true,
-            stats: stats // originalSize, compressedSize, filesCount
-        });
-    }
-    catch (error) {
-        res.json({ success: false, message: error.message });
-    }
-});
-app.post('/api/change-port', (req, res) => {
-    cancelShutdown();
-    const parsedPort = parseInt(req.body.newPort, 10);
-    if (isNaN(parsedPort) || parsedPort < 1 || parsedPort > 65535) {
-        res.json({ success: false, message: 'Invalid port number.' });
-        return;
-    }
-    res.json({ success: true });
-    setTimeout(() => {
-        if (server) {
-            try {
-                server.closeAllConnections();
-                server.close(() => {
-                    PORT = parsedPort;
-                    startServer();
-                    console.log(`🔄 Server successfully restarted on port ${PORT}`);
-                });
-            }
-            catch (e) {
-                startServer();
-            }
+        if (args.showConfigPath) {
+            console.log(getConfigFilePath());
+            return;
         }
-    }, 100);
-});
-app.get('/api/browse', async (req, res) => {
-    cancelShutdown();
-    res.on('close', () => {
-        if (!res.writableEnded) {
-            closeBrowseProcess();
-            scheduleShutdown();
+        if (args.headless) {
+            await runHeadlessBuild(args.inputPath, args.outputPath, args.minifyOpts, args.optimizeSvg, args.svgoMultipass);
+            return;
         }
-    });
-    const isDir = req.query.type === 'dir';
-    const platform = os.platform();
-    try {
-        let result = '';
-        if (platform === 'win32') {
-            const script = isDir
-                ? buildWindowsDialogScript([
-                    '$dialog = New-Object System.Windows.Forms.FolderBrowserDialog',
-                    '$dialog.Description = "Select Input Directory"',
-                    'if ($dialog.ShowDialog($owner) -eq [System.Windows.Forms.DialogResult]::OK) {',
-                    '    $dialog.SelectedPath',
-                    '}'
-                ])
-                : buildWindowsDialogScript([
-                    '$dialog = New-Object System.Windows.Forms.SaveFileDialog',
-                    '$dialog.Filter = "C Files (*.c)|*.c|All Files (*.*)|*.*"',
-                    '$dialog.DefaultExt = "c"',
-                    '$dialog.AddExtension = $true',
-                    '$dialog.OverwritePrompt = $true',
-                    'if ($dialog.ShowDialog($owner) -eq [System.Windows.Forms.DialogResult]::OK) {',
-                    '    $dialog.FileName',
-                    '}'
-                ]);
-            result = await runDialogCommand('powershell.exe', buildPowerShellArgs(script));
-        }
-        else if (platform === 'darwin') {
-            result = await runDialogCommand('osascript', [
-                '-e',
-                isDir
-                    ? 'POSIX path of (choose folder with prompt "Select Input Directory")'
-                    : 'POSIX path of (choose file name with prompt "Select Output File")'
-            ]);
-        }
-        else {
-            result = await runDialogCommand('zenity', isDir
-                ? ['--file-selection', '--directory', '--title=Select Input Directory']
-                : ['--file-selection', '--save', '--confirm-overwrite', '--title=Select Output File', '--filename=fsdata.c']);
-        }
-        res.json({ success: true, path: result || null });
+        startGuiServer(args.port ?? getDefaultGuiPort());
     }
-    catch (e) {
-        res.json({ success: true, path: null });
+    catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        console.error(`❌ ${message}`);
+        process.exitCode = 1;
     }
-});
-const startServer = () => {
-    server = app.listen(PORT, () => {
-        console.log(`✨ GUI Server started on http://localhost:${PORT}`);
-    });
 };
-// main run
-startServer();
-open(`http://localhost:${PORT}`);
+void main();

package/dist/makefsdata.js

@@ -60,21 +60,14 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { minify } from 'html-minifier-next';
+import { optimize } from 'svgo';
 import { getPackageVersion } from './utils.js';
+import { DEFAULT_HTML_MINIFY_OPTIONS } from './minify-options.js';
 // ----------------------------------------------------------------------
 // 1. Configs & Version Recovery
 // ----------------------------------------------------------------------
 const TCP_MSS = 1460;
 const LWIP_VERSION = "1.3.1"; // this makefsdata.ts is based on lwIP v1.3.1
-// html-minifier-next options
-const COMPRESS_OPTS_DEFAULT = {
-    collapseWhitespace: true,
-    removeComments: true,
-    minifyJS: true,
-    minifyCSS: true,
-    processConditionalComments: true,
-    decodeEntities: true
-};
 const REDIRHOME_PATH = '/redirhome.html';
 // ----------------------------------------------------------------------
 // 3. lwIP Helpers
@@ -107,6 +100,8 @@ function getMimeType(fileName) {
             return 'text/xml';
         case '.json':
             return 'application/json';
+        case '.svg':
+            return 'image/svg+xml';
         default:
             return 'text/plain';
     }
@@ -190,12 +185,17 @@ function bufferToHexCArray(buf) {
 }
 export async function runMakeFsData(opts) {
     console.log(`🚀 CC4EmbeddedSystem V3: Starting makefsdata compilation...`);
-    // checkers
+    // Check source directory before making any output directory changes.
     if (!fs.existsSync(opts.inputDir)) {
-        console.log(`⚠️ Input directory not found. Auto-creating directory: \n${opts.inputDir}`);
-        fs.mkdirSync(opts.inputDir, { recursive: true });
+        throw new Error(`Input directory not found: ${path.resolve(opts.inputDir)}`);
     }
-    if (!opts.outputFile.toLowerCase().endsWith('.c')) {
+    if (!fs.statSync(opts.inputDir).isDirectory())
+        throw new Error(`Input path is not a directory: ${path.resolve(opts.inputDir)}`);
+    if (fs.existsSync(opts.outputFile) && fs.statSync(opts.outputFile).isDirectory()) {
+        opts.outputFile = path.join(opts.outputFile, 'fsdata.c');
+        console.log(`🔧 Output directory selected. Using default file -> ${opts.outputFile}`);
+    }
+    else if (!opts.outputFile.toLowerCase().endsWith('.c')) {
         opts.outputFile += '.c';
         console.log(`🔧 Auto-appended '.c' to output file -> ${opts.outputFile}`);
     }
@@ -208,8 +208,7 @@ export async function runMakeFsData(opts) {
     let totalCompressedSize = 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)}`);
-    // html-minifier-next options
-    const activeCompressOpts = opts.minifyOpts || COMPRESS_OPTS_DEFAULT;
+    const activeCompressOpts = opts.minifyOpts ?? DEFAULT_HTML_MINIFY_OPTIONS;
     for (let i = 0; i < allFiles.length; i++) {
         const filePath = allFiles[i];
         const relativePath = '/' + path.relative(opts.inputDir, filePath).replace(/\\/g, '/');
@@ -217,7 +216,21 @@ export async function runMakeFsData(opts) {
         let content = fs.readFileSync(filePath);
         const originalFileSize = content.length;
         totalOriginalSize += originalFileSize;
-        if (['.html', '.htm', '.css', '.js'].includes(ext)) {
+        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');

package/dist/minify-options.js

@@ -0,0 +1,38 @@
+export const DEFAULT_HTML_MINIFY_OPTIONS = {
+    collapseWhitespace: true,
+    removeComments: true,
+    minifyJS: true,
+    minifyCSS: true,
+    processConditionalComments: true,
+    decodeEntities: true,
+    removeAttributeQuotes: false,
+    removeEmptyAttributes: false,
+    removeRedundantAttributes: false,
+    useShortDoctype: false
+};
+const HTML_MINIFY_OPTION_KEYS = [
+    'collapseWhitespace',
+    'removeComments',
+    'minifyJS',
+    'minifyCSS',
+    'processConditionalComments',
+    'decodeEntities',
+    'removeAttributeQuotes',
+    'removeEmptyAttributes',
+    'removeRedundantAttributes',
+    'useShortDoctype'
+];
+const isRecord = (value) => {
+    return typeof value === 'object' && value !== null;
+};
+export const normalizeHtmlMinifyOptions = (value) => {
+    const normalized = { ...DEFAULT_HTML_MINIFY_OPTIONS };
+    if (!isRecord(value))
+        return normalized;
+    for (const key of HTML_MINIFY_OPTION_KEYS) {
+        const optionValue = value[key];
+        if (typeof optionValue === 'boolean')
+            normalized[key] = optionValue;
+    }
+    return normalized;
+};

package/dist/public/index.html

@@ -57,15 +57,15 @@
         <label>Input Directory</label>
         <div class="input-row">
             <input type="text" id="inputPath" placeholder="e.g., C:\Project\web">
-            <button type="button" class="btn-browse" onclick="handleBrowse('inputPath', 'dir')">Brows ...</button>
+            <button type="button" class="btn-browse" onclick="handleBrowse('inputPath', 'dir')">Browse ...</button>
         </div>
     </div>
 
     <div class="form-group">
         <label>Output File (fsdata.c)</label>
         <div class="input-row">
-            <input type="text" id="outputPath" placeholder="e.g., ./fsdata.c">
-            <button type="button" class="btn-browse" onclick="handleBrowse('outputPath', 'file')">Brows ...</button>
+            <input type="text" id="outputPath" value="fsdata.c" placeholder="e.g., ./fsdata.c">
+            <button type="button" class="btn-browse" onclick="handleBrowse('outputPath', 'file')">Browse ...</button>
         </div>
     </div>
 
@@ -94,13 +94,13 @@
         </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>
-            <span>Original: <span id="origSize" style="color: #ce9178;">0</span> KB</span>
-        </div>
+    <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>
+            <span>Original: <span id="origSize" style="color: #ce9178;">0</span> KB</span>
+        </div>
         <div class="bar-container">
             <div id="barFill" class="bar-fill"></div>
             <div id="barText" class="bar-text">0% Saved</div>
@@ -204,15 +204,27 @@
         }
     }, true);
 
-    window.addEventListener('DOMContentLoaded', async () => {
-        await fetch('/api/cancel-shutdown', { method: 'POST' });
-        try {
-            const res = await fetch('/api/version');
-            const data = await res.json();
-            if (data.version) document.getElementById('app-title-text').innerText = `CC4EmbeddedSystem V3 (${data.version})`;
-        }
-        catch (error) { console.error('Can\'t get version!', error); }
-    });
+    window.addEventListener('DOMContentLoaded', async () => {
+        await fetch('/api/cancel-shutdown', { method: 'POST' });
+
+        try {
+            const res = await fetch('/api/version');
+            const data = await res.json();
+            if (data.version) document.getElementById('app-title-text').innerText = `CC4EmbeddedSystem V3 (${data.version})`;
+        }
+        catch (error) { console.error('Can\'t get version!', error); }
+
+        try {
+            const res = await fetch('/api/config');
+            const data = await res.json();
+
+            if (data.lastBuild) {
+                document.getElementById('inputPath').value = data.lastBuild.src || '';
+                document.getElementById('outputPath').value = data.lastBuild.dst || '';
+            }
+        }
+        catch (error) { console.error('Can\'t load saved paths!', error); }
+    });
 
     async function changePort() {
         const newPort = document.getElementById('guiPort').value.trim();
@@ -262,20 +274,20 @@
                 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);
+                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;
                 // 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('barText').innerText = `${ratio}% Size Reduced`;
+                document.getElementById('origSize').innerText = origKB;
+                document.getElementById('compSize').innerText = compKB;
+                document.getElementById('convSize').innerText = convKB;
+                document.getElementById('barText').innerText = `${ratio}% Size Reduced`;
                 
                 // actual used percentage
                 setTimeout(() => {
@@ -317,4 +329,4 @@
 </div>
 
 </body>
-</html>
+</html>

package/dist/server.js

@@ -0,0 +1,262 @@
+import express from 'express';
+import { execFile } from 'node:child_process';
+import fs from 'node:fs';
+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 { runMakeFsData } from './makefsdata.js';
+import { normalizeHtmlMinifyOptions } from './minify-options.js';
+import { getPackageVersion } from './utils.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const buildPowerShellArgs = (script) => {
+    const encodedCommand = Buffer.from(script, 'utf16le').toString('base64');
+    return [
+        '-NoProfile',
+        '-STA',
+        '-EncodedCommand',
+        encodedCommand
+    ];
+};
+const buildWindowsDialogScript = (dialogLines) => {
+    return [
+        'Add-Type -AssemblyName System.Windows.Forms',
+        'Add-Type -AssemblyName System.Drawing',
+        '$screen = [System.Windows.Forms.Screen]::PrimaryScreen.WorkingArea',
+        '$owner = New-Object System.Windows.Forms.Form',
+        '$owner.StartPosition = [System.Windows.Forms.FormStartPosition]::Manual',
+        '$owner.FormBorderStyle = [System.Windows.Forms.FormBorderStyle]::None',
+        '$owner.ShowInTaskbar = $false',
+        '$owner.TopMost = $true',
+        '$owner.Width = 1',
+        '$owner.Height = 1',
+        '$owner.Left = $screen.Left + [int]($screen.Width / 2)',
+        '$owner.Top = $screen.Top + [int]($screen.Height / 2)',
+        '$owner.Opacity = 0',
+        '$null = $owner.Show()',
+        '$null = $owner.Activate()',
+        '$owner.BringToFront()',
+        '[System.Windows.Forms.Application]::DoEvents()',
+        ...dialogLines,
+        '$owner.Close()',
+        '$owner.Dispose()'
+    ].join('\n');
+};
+const isNonEmptyString = (value) => {
+    return typeof value === 'string' && value.trim().length > 0;
+};
+export const startGuiServer = (initialPort) => {
+    const app = express();
+    let port = initialPort;
+    let activeBrowseProcess = null;
+    let server = null;
+    let shutdownTimer = null;
+    const publicPath = fs.existsSync(path.join(__dirname, 'public'))
+        ? path.join(__dirname, 'public')
+        : path.join(__dirname, '../public');
+    const closeBrowseProcess = () => {
+        if (activeBrowseProcess && !activeBrowseProcess.killed) {
+            try {
+                activeBrowseProcess.kill();
+            }
+            catch {
+                // Ignore child cleanup errors.
+            }
+        }
+        activeBrowseProcess = null;
+    };
+    const cancelShutdown = () => {
+        if (!shutdownTimer)
+            return;
+        clearTimeout(shutdownTimer);
+        shutdownTimer = null;
+    };
+    const scheduleShutdown = () => {
+        if (shutdownTimer)
+            return;
+        shutdownTimer = setTimeout(() => {
+            closeBrowseProcess();
+            console.log('👋 Window closed, shutting down ...');
+            process.exit(0);
+        }, 2000);
+    };
+    const runDialogCommand = (command, args) => {
+        return new Promise((resolve, reject) => {
+            const child = execFile(command, args, {
+                windowsHide: false,
+                maxBuffer: 1024 * 1024
+            }, (error, stdout, stderr) => {
+                if (activeBrowseProcess === child)
+                    activeBrowseProcess = null;
+                if (error) {
+                    reject(new Error(stderr.trim() || error.message));
+                    return;
+                }
+                resolve(stdout.trim());
+            });
+            activeBrowseProcess = child;
+        });
+    };
+    const startServer = (openBrowser) => {
+        server = app.listen(port, () => {
+            const serverUrl = `http://localhost:${port}`;
+            console.log(`✨ GUI Server started on ${serverUrl}`);
+            if (openBrowser)
+                void open(serverUrl).catch(() => undefined);
+        });
+        server.on('error', (error) => {
+            if (error.code === 'EADDRINUSE') {
+                console.error(`❌ Port ${port} is already in use.`);
+                process.exitCode = 1;
+                return;
+            }
+            console.error(`❌ GUI server error: ${error.message}`);
+            process.exitCode = 1;
+        });
+    };
+    app.use(express.json());
+    app.use(express.static(publicPath));
+    app.get('/api/version', (_req, res) => {
+        cancelShutdown();
+        res.json({ version: getPackageVersion() });
+    });
+    app.get('/api/config', (_req, res) => {
+        cancelShutdown();
+        res.json({ lastBuild: getLastBuildPaths() ?? null });
+    });
+    app.post('/api/shutdown', (_req, res) => {
+        res.json({ success: true });
+        closeBrowseProcess();
+        scheduleShutdown();
+    });
+    app.post('/api/cancel-shutdown', (_req, res) => {
+        cancelShutdown();
+        res.json({ success: true });
+    });
+    app.post('/api/build', async (req, res) => {
+        cancelShutdown();
+        const inputPath = isNonEmptyString(req.body.inputPath) ? req.body.inputPath.trim() : '';
+        const outputPath = isNonEmptyString(req.body.outputPath) ? req.body.outputPath.trim() : '';
+        if (!inputPath || !outputPath) {
+            res.status(400).json({ success: false, message: 'Input and output paths are required.' });
+            return;
+        }
+        const opts = {
+            inputDir: path.resolve(inputPath),
+            outputFile: path.resolve(outputPath),
+            processSubs: true,
+            includeHttpHeader: true,
+            useHttp11: false,
+            supportSsi: true,
+            precalcChksum: false,
+            minifyOpts: normalizeHtmlMinifyOptions(req.body.minifyOpts),
+            optimizeSvg: true,
+            svgoMultipass: false
+        };
+        console.log(`[Build] Input: ${opts.inputDir}`);
+        console.log(`[Build] Output: ${opts.outputFile}`);
+        try {
+            const stats = await runMakeFsData(opts);
+            saveLastBuildPaths(opts.inputDir, opts.outputFile);
+            try {
+                await open(path.dirname(opts.outputFile));
+            }
+            catch {
+                // The generated result is still valid if the folder cannot be opened.
+            }
+            res.json({ success: true, stats });
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            res.json({ success: false, message });
+        }
+    });
+    app.post('/api/change-port', (req, res) => {
+        cancelShutdown();
+        const parsedPort = Number.parseInt(String(req.body.newPort), 10);
+        if (Number.isNaN(parsedPort) || parsedPort < 1 || parsedPort > 65535) {
+            res.status(400).json({ success: false, message: 'Invalid port number.' });
+            return;
+        }
+        res.json({ success: true });
+        setTimeout(() => {
+            if (!server) {
+                port = parsedPort;
+                startServer(false);
+                return;
+            }
+            try {
+                server.closeAllConnections();
+                server.close((error) => {
+                    if (error) {
+                        console.error(`❌ Could not restart GUI server: ${error.message}`);
+                        return;
+                    }
+                    port = parsedPort;
+                    startServer(false);
+                    console.log(`🔄 GUI server restarted on port ${port}`);
+                });
+            }
+            catch {
+                port = parsedPort;
+                startServer(false);
+            }
+        }, 100);
+    });
+    app.get('/api/browse', async (req, res) => {
+        cancelShutdown();
+        res.on('close', () => {
+            if (!res.writableEnded) {
+                closeBrowseProcess();
+                scheduleShutdown();
+            }
+        });
+        const isDirectory = req.query.type === 'dir';
+        const platform = os.platform();
+        try {
+            let selectedPath = '';
+            if (platform === 'win32') {
+                const script = isDirectory
+                    ? buildWindowsDialogScript([
+                        '$dialog = New-Object System.Windows.Forms.FolderBrowserDialog',
+                        '$dialog.Description = "Select Input Directory"',
+                        'if ($dialog.ShowDialog($owner) -eq [System.Windows.Forms.DialogResult]::OK) {',
+                        '    $dialog.SelectedPath',
+                        '}'
+                    ])
+                    : buildWindowsDialogScript([
+                        '$dialog = New-Object System.Windows.Forms.SaveFileDialog',
+                        '$dialog.Filter = "C Files (*.c)|*.c|All Files (*.*)|*.*"',
+                        '$dialog.DefaultExt = "c"',
+                        '$dialog.AddExtension = $true',
+                        '$dialog.OverwritePrompt = $true',
+                        'if ($dialog.ShowDialog($owner) -eq [System.Windows.Forms.DialogResult]::OK) {',
+                        '    $dialog.FileName',
+                        '}'
+                    ]);
+                selectedPath = await runDialogCommand('powershell.exe', buildPowerShellArgs(script));
+            }
+            else if (platform === 'darwin') {
+                selectedPath = await runDialogCommand('osascript', [
+                    '-e',
+                    isDirectory
+                        ? 'POSIX path of (choose folder with prompt "Select Input Directory")'
+                        : 'POSIX path of (choose file name with prompt "Select Output File")'
+                ]);
+            }
+            else {
+                selectedPath = await runDialogCommand('zenity', isDirectory
+                    ? ['--file-selection', '--directory', '--title=Select Input Directory']
+                    : ['--file-selection', '--save', '--confirm-overwrite', '--title=Select Output File', '--filename=fsdata.c']);
+            }
+            res.json({ success: true, path: selectedPath || null });
+        }
+        catch {
+            res.json({ success: true, path: null });
+        }
+    });
+    console.log(`[System] Serving static files from: ${publicPath}`);
+    startServer(true);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cc4-embedded-system",
-  "version": "3.1.9",
+  "version": "3.2.0",
   "description": "A modern typescript version of makefsdata based on html-minifier-next and lwIP v1.3.1",
   "bin": {
     "cc4es": "dist/gui.js"
@@ -30,7 +30,8 @@
   "dependencies": {
     "express": "^5.2.1",
     "html-minifier-next": "^6.1.2",
-    "open": "^11.0.0"
+    "open": "^11.0.0",
+    "svgo": "^4.0.2"
   },
   "devDependencies": {
     "@types/express": "^5.0.6",