cc4-embedded-system 3.1.10 → 3.2.1

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

@@ -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; }
@@ -64,7 +69,7 @@
     <div class="form-group">
         <label>Output File (fsdata.c)</label>
         <div class="input-row">
-            <input type="text" id="outputPath" placeholder="e.g., ./fsdata.c">
+            <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>
@@ -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;
@@ -204,15 +220,35 @@
         }
     }, 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 || '';
+            }
+
+            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();
@@ -236,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,
@@ -246,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();
 
@@ -262,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
@@ -282,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

@@ -0,0 +1,289 @@
+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, 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';
+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;
+};
+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;
+    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,
+            gzipOptions: getLastGzipOptions() ?? { gzip: false, gzipLevel: DEFAULT_GZIP_LEVEL }
+        });
+    });
+    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;
+        }
+        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),
+            processSubs: true,
+            includeHttpHeader: true,
+            useHttp11: false,
+            supportSsi: true,
+            precalcChksum: false,
+            minifyOpts: normalizeHtmlMinifyOptions(req.body.minifyOpts),
+            optimizeSvg: true,
+            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, gzipOptions);
+            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.10",
+  "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,9 +29,12 @@
   "author": "LunaticGhoulPiano",
   "license": "MIT",
   "dependencies": {
+    "esbuild": "^0.27.7",
     "express": "^5.2.1",
     "html-minifier-next": "^6.1.2",
-    "open": "^11.0.0"
+    "lightningcss": "^1.32.0",
+    "open": "^11.0.0",
+    "svgo": "^4.0.2"
   },
   "devDependencies": {
     "@types/express": "^5.0.6",