jsgui3-server 0.0.147 → 0.0.149

package/examples/jsgui3-html/10) binding-debugger/client.js

@@ -1,8 +1,144 @@
 const jsgui = require('jsgui3-client');
 const Active_HTML_Document = require('../../../controls/Active_HTML_Document');
-const { BindingDebugTools } = require('jsgui3-html/html-core/BindingDebugger');
+const jsgui3_html = require('jsgui3-html');
 const { Data_Object } = jsgui;
 
+const snapshot_model_values = (model) => {
+    if (!model || typeof model !== 'object') return {};
+    const raw_model = model._ && typeof model._ === 'object' ? model._ : model;
+    const result = {};
+    Object.keys(raw_model).forEach((key) => {
+        if (key.startsWith('_')) return;
+        const value = raw_model[key];
+        if (typeof value === 'function') return;
+        result[key] = value;
+    });
+    return result;
+};
+
+class Fallback_Binding_Debugger {
+    constructor(control) {
+        this.control = control;
+        this.logs = [];
+        this.enabled = false;
+    }
+
+    enable() {
+        this.enabled = true;
+        this.log('Debugging enabled');
+    }
+
+    disable() {
+        this.enabled = false;
+        this.log('Debugging disabled');
+    }
+
+    log(message) {
+        const entry = {
+            timestamp: new Date().toISOString(),
+            message
+        };
+        this.logs.push(entry);
+        if (this.logs.length > 100) {
+            this.logs.shift();
+        }
+        if (this.enabled) {
+            console.log(`[BindingDebugger:fallback] ${message}`);
+        }
+    }
+
+    getBindingSummary() {
+        const binding_manager = this.control && this.control._binding_manager;
+        if (!binding_manager || typeof binding_manager.inspect !== 'function') {
+            return {
+                totalBinders: 0,
+                totalComputed: 0,
+                totalWatchers: 0,
+                details: {
+                    binders: [],
+                    computed: [],
+                    watchers: []
+                }
+            };
+        }
+
+        const details = binding_manager.inspect();
+        const binders = Array.isArray(details.binders) ? details.binders : [];
+        const computed = Array.isArray(details.computed) ? details.computed : [];
+        const watchers = Array.isArray(details.watchers) ? details.watchers : [];
+
+        return {
+            totalBinders: binders.length,
+            totalComputed: computed.length,
+            totalWatchers: watchers.length,
+            details
+        };
+    }
+
+    snapshotModels() {
+        const control = this.control || {};
+        return {
+            timestamp: new Date().toISOString(),
+            dataModel: snapshot_model_values(control.data && control.data.model),
+            viewDataModel: snapshot_model_values(control.view && control.view.data && control.view.data.model),
+            viewModel: snapshot_model_values(control.view && control.view.model)
+        };
+    }
+
+    compareSnapshots(snapshot_a = {}, snapshot_b = {}) {
+        const differences = [];
+        const compare_group = (group_name) => {
+            const before_group = snapshot_a[group_name] || {};
+            const after_group = snapshot_b[group_name] || {};
+            const key_set = new Set([...Object.keys(before_group), ...Object.keys(after_group)]);
+            key_set.forEach((key) => {
+                if (before_group[key] === after_group[key]) return;
+                differences.push({
+                    path: `${group_name}.${key}`,
+                    oldValue: before_group[key],
+                    newValue: after_group[key]
+                });
+            });
+        };
+
+        compare_group('dataModel');
+        compare_group('viewDataModel');
+        compare_group('viewModel');
+        return differences;
+    }
+}
+
+const create_fallback_binding_debug_tools = () => {
+    const debugger_by_control = new WeakMap();
+    const get_debugger = (control) => {
+        if (!debugger_by_control.has(control)) {
+            debugger_by_control.set(control, new Fallback_Binding_Debugger(control));
+        }
+        return debugger_by_control.get(control);
+    };
+
+    return {
+        getDebugger: get_debugger,
+        enableFor(control) {
+            const debugger_instance = get_debugger(control);
+            debugger_instance.enable();
+            return debugger_instance;
+        },
+        disableFor(control) {
+            const debugger_instance = get_debugger(control);
+            debugger_instance.disable();
+        }
+    };
+};
+
+const BindingDebugTools = (
+    jsgui3_html
+    && jsgui3_html.BindingDebugTools
+    && typeof jsgui3_html.BindingDebugTools.getDebugger === 'function'
+)
+    ? jsgui3_html.BindingDebugTools
+    : create_fallback_binding_debug_tools();
+
 class Binding_Debugger_Control extends jsgui.Control {
     constructor(spec = {}) {
         spec.__type_name = spec.__type_name || 'binding_debugger_control';

package/http/responders/static/Static_Route_HTTP_Responder.js

@@ -14,7 +14,7 @@ const HTTP_Responder = require('../HTTP_Responder');
 
 
 
-class Static_Route_HTTP_Responder extends HTTP_Responder {
+class Static_Route_HTTP_Responder extends HTTP_Responder {
     constructor(spec) {
         super(spec);
 
@@ -37,7 +37,7 @@ class Static_Route_HTTP_Responder extends HTTP_Responder {
         // Need to call it with the correct context.
         //   Seems like jsgui3-html Router and Routing_Tree need some more fixes.
 
-        const {type, extension, text, route, response_buffers, response_headers} = this;
+        const {type, extension, text, route, response_buffers, response_headers} = this;
 
 
         //console.log('accept_encoding', accept_encoding);
@@ -55,50 +55,68 @@ class Static_Route_HTTP_Responder extends HTTP_Responder {
 
         if (typeof accept_encoding === 'string' && accept_encoding.includes('br')) supported_encodings.br = true;
 
-        const has_br = response_buffers && response_buffers.br;
-        const has_gzip = response_buffers && response_buffers.gzip;
+        const safe_response_buffers = response_buffers || {};
+        const safe_response_headers = response_headers || {};
+
+        const identity_buffer = safe_response_buffers.identity || Buffer.from(text || '', 'utf8');
+        const has_br = safe_response_buffers.br;
+        const has_gzip = safe_response_buffers.gzip;
         const use_br = supported_encodings.br === true && has_br;
         const use_gzip = supported_encodings.gzip === true && has_gzip;
+
+        let selected_encoding = 'identity';
+        let selected_buffer = identity_buffer;
+        if (use_br) {
+            selected_encoding = 'br';
+            selected_buffer = safe_response_buffers.br;
+        } else if (use_gzip) {
+            selected_encoding = 'gzip';
+            selected_buffer = safe_response_buffers.gzip;
+        }
+
+        if (!Buffer.isBuffer(selected_buffer)) {
+            selected_buffer = Buffer.from(String(selected_buffer || ''), 'utf8');
+        }
+
+        const selected_headers = safe_response_headers[selected_encoding] || safe_response_headers.identity || {};
 
         //console.log('supported_encodings', supported_encodings);
 
-        if (use_br) {
-            
-            for (const key in response_headers.br) {
-                const value = response_headers.br[key];
-                //console.log('[key, value]', [key, value]);
-                res.setHeader(key, value);
+        const has_header = (header_name) => {
+            if (typeof res.hasHeader === 'function') {
+                return res.hasHeader(header_name);
+            }
+            if (typeof res.getHeader === 'function') {
+                return typeof res.getHeader(header_name) !== 'undefined';
             }
+            return false;
+        };
 
-        } else if (use_gzip) {
-            //console.log('should write headers for gzipped buffer...');
+        if (typeof res.setHeader === 'function') {
+            for (const key in selected_headers) {
+                const value = selected_headers[key];
+                res.setHeader(key, value);
+            }
 
-            for (const key in response_headers.gzip) {
-                const value = response_headers.gzip[key];
-                //console.log('[key, value]', [key, value]);
-                res.setHeader(key, value);
-            }
-        } else {
-            for (const key in response_headers.identity) {
-                const value = response_headers.identity[key];
-                //console.log('[key, value]', [key, value]);
-                res.setHeader(key, value);
-            }
-        }
+            if (!has_header('Content-Type')) {
+                if (extension === 'css') res.setHeader('Content-Type', 'text/css; charset=utf-8');
+                if (extension === 'js') res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+                if (extension === 'html') res.setHeader('Content-Type', 'text/html; charset=utf-8');
+            }
+            if (!has_header('Content-Length')) {
+                res.setHeader('Content-Length', selected_buffer.length);
+            }
+        }
 
         // Then write the (hopefully compressed) response bodies...
 
-        if (use_br) {
+        if (typeof res.write === 'function') {
+            res.write(selected_buffer);
+        }
 
-            res.write(response_buffers.br);
-        } else if (use_gzip) {
-            //console.log('should write gzipped buffer...');
-            res.write(response_buffers.gzip);
-        } else {
-            res.write(response_buffers.identity);
-        }
-
-        res.end();
+        if (typeof res.end === 'function') {
+            res.end();
+        }
 
         //console.trace();
         //throw 'NYI';

package/lab/experiments/capture-color-controls.js

@@ -0,0 +1,196 @@
+/**
+ * Capture Color Controls Screenshots
+ * 
+ * Starts the jsgui3-html color controls demo server and uses Puppeteer
+ * to capture screenshots of each section for visual verification.
+ * 
+ * Usage:
+ *   node lab/experiments/capture-color-controls.js
+ * 
+ * Prerequisites:
+ *   npm install  (puppeteer is a devDependency)
+ *   jsgui3-html repo must be at ../jsgui3-html (relative to jsgui3-server)
+ */
+
+const { spawn } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+const { launch_browser, capture_url_screenshots, close_browser } = require('../screenshot-utils');
+
+const JSGUI3_HTML_PATH = path.resolve(__dirname, '..', '..', '..', 'jsgui3-html');
+const DEMO_SERVER_SCRIPT = path.join(JSGUI3_HTML_PATH, 'lab', 'color_controls_demo_server.js');
+const DEMO_URL = 'http://localhost:3600';
+const OUTPUT_DIR = path.join(__dirname, '..', 'results', 'screenshots', 'color-controls');
+
+/**
+ * Start the color controls demo server as a child process.
+ */
+const start_demo_server = () => {
+    return new Promise((resolve, reject) => {
+        console.log(`Starting demo server: ${DEMO_SERVER_SCRIPT}`);
+
+        if (!fs.existsSync(DEMO_SERVER_SCRIPT)) {
+            reject(new Error(`Demo server script not found: ${DEMO_SERVER_SCRIPT}`));
+            return;
+        }
+
+        const child = spawn('node', [DEMO_SERVER_SCRIPT], {
+            cwd: JSGUI3_HTML_PATH,
+            stdio: ['pipe', 'pipe', 'pipe'],
+            env: { ...process.env, HOME: process.env.USERPROFILE || process.env.HOME }
+        });
+
+        let started = false;
+        const timeout = setTimeout(() => {
+            if (!started) {
+                reject(new Error('Demo server startup timeout (15s)'));
+            }
+        }, 15000);
+
+        child.stdout.on('data', (data) => {
+            const text = data.toString();
+            process.stdout.write(`  [demo-server] ${text}`);
+            if (text.includes('running at') && !started) {
+                started = true;
+                clearTimeout(timeout);
+                // Give it a moment to settle
+                setTimeout(() => resolve(child), 500);
+            }
+        });
+
+        child.stderr.on('data', (data) => {
+            process.stderr.write(`  [demo-server-err] ${data.toString()}`);
+        });
+
+        child.on('error', (err) => {
+            clearTimeout(timeout);
+            reject(err);
+        });
+
+        child.on('exit', (code) => {
+            if (!started) {
+                clearTimeout(timeout);
+                reject(new Error(`Demo server exited with code ${code} before starting`));
+            }
+        });
+    });
+};
+
+/**
+ * Stop the demo server child process.
+ */
+const stop_demo_server = (child) => {
+    return new Promise((resolve) => {
+        if (!child || child.killed) {
+            resolve();
+            return;
+        }
+
+        child.on('exit', () => resolve());
+        child.kill('SIGTERM');
+
+        // Force kill after 3s
+        setTimeout(() => {
+            if (!child.killed) {
+                child.kill('SIGKILL');
+            }
+            resolve();
+        }, 3000);
+    });
+};
+
+const format_bytes = (bytes) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+// ============================================
+// Main
+// ============================================
+const main = async () => {
+    console.log('╔══════════════════════════════════════════════╗');
+    console.log('║  Color Controls Screenshot Capture           ║');
+    console.log('╚══════════════════════════════════════════════╝\n');
+
+    let demo_server;
+
+    try {
+        // 1. Start demo server
+        demo_server = await start_demo_server();
+        console.log(`✓ Demo server started (PID: ${demo_server.pid})\n`);
+
+        // 2. Launch Puppeteer browser
+        console.log('Launching Puppeteer browser...');
+        await launch_browser();
+        console.log('✓ Browser launched\n');
+
+        // 3. Capture screenshots
+        console.log(`Capturing screenshots to: ${OUTPUT_DIR}\n`);
+
+        const results = await capture_url_screenshots(DEMO_URL, OUTPUT_DIR, {
+            width: 1280,
+            height: 900,
+            wait_ms: 2000,
+            section_selectors: [
+                '.demo-section:nth-child(2)',   // Section 1: Color_Grid 12x12
+                '.demo-section:nth-child(3)',   // Section 2: Color_Grid 4x2
+                '.demo-section:nth-child(4)',   // Section 3: Color_Palette
+                '.demo-section:nth-child(5)',   // Section 4: Palette Comparison
+                '.demo-section:nth-child(6)',   // Section 5: Raw HTML Swatches
+                '.demo-section:nth-child(7)',   // Section 6: Optimized Crayola
+                '.demo-section:nth-child(8)',   // Section 7: Pastel Palette
+                '.demo-section:nth-child(9)'    // Section 8: Extended 144
+            ],
+            section_names: [
+                'section_1_color_grid_12x12',
+                'section_2_color_grid_4x2',
+                'section_3_color_palette',
+                'section_4_palette_comparison',
+                'section_5_raw_swatches',
+                'section_6_optimized_crayola',
+                'section_7_pastel_palette',
+                'section_8_extended_144'
+            ]
+        });
+
+        // 4. Print summary
+        console.log('\n════════════════════════════════════════════════');
+        console.log('  Screenshot Capture Summary');
+        console.log('════════════════════════════════════════════════\n');
+
+        const table_data = results.map(r => ({
+            Name: r.name,
+            Dimensions: r.error ? 'FAILED' : `${r.width}×${r.height}`,
+            Size: r.error ? r.error : format_bytes(r.size_bytes),
+            Path: r.error ? '' : path.basename(r.path)
+        }));
+
+        console.table(table_data);
+
+        const success_count = results.filter(r => !r.error).length;
+        const fail_count = results.filter(r => r.error).length;
+
+        console.log(`\n✓ ${success_count} screenshots captured`);
+        if (fail_count > 0) {
+            console.log(`⚠ ${fail_count} captures failed`);
+        }
+        console.log(`\nOutput directory: ${OUTPUT_DIR}`);
+
+    } catch (err) {
+        console.error(`\n✗ Error: ${err.message}`);
+        if (err.stack) console.error(err.stack);
+        process.exitCode = 1;
+    } finally {
+        // Cleanup
+        console.log('\nCleaning up...');
+        await close_browser().catch(() => { });
+        if (demo_server) {
+            await stop_demo_server(demo_server);
+            console.log('✓ Demo server stopped');
+        }
+        console.log('Done.');
+    }
+};
+
+main();