jsgui3-server 0.0.148 → 0.0.149

package/tests/small-controls-bundle-size.test.js

@@ -0,0 +1,252 @@
+const assert = require('assert');
+const { describe, it, before, after } = require('mocha');
+const fs = require('fs').promises;
+const path = require('path');
+
+const Advanced_JS_Bundler_Using_ESBuild = require('../resources/processors/bundlers/js/esbuild/Advanced_JS_Bundler_Using_ESBuild');
+
+const window_markers = [
+    'Minimize window',
+    'window_manager',
+    '__type_name = "window"',
+    "__type_name = 'window'",
+    "__type_name='window'",
+    'add_class("window")',
+    "add_class('window')"
+];
+
+const to_module_literal = (file_path) => file_path.replace(/\\/g, '\\\\');
+
+const find_window_markers = (js_text, css_text) => {
+    const search_text = `${js_text || ''}\n${css_text || ''}`;
+    return window_markers.filter(marker => search_text.includes(marker));
+};
+
+const bundle_fixture = async (bundler, fixture_path) => {
+    const bundle_result = await bundler.bundle(fixture_path);
+    const bundle = bundle_result[0];
+
+    const js_item = bundle._arr.find(item => item.type === 'JavaScript');
+    const css_item = bundle._arr.find(item => item.type === 'CSS');
+
+    const js_text = (js_item && js_item.text) || '';
+    const css_text = (css_item && css_item.text) || '';
+    const markers_found = find_window_markers(js_text, css_text);
+
+    return {
+        js_bytes: Buffer.byteLength(js_text, 'utf8'),
+        css_bytes: Buffer.byteLength(css_text, 'utf8'),
+        markers_found,
+        bundle_analysis: bundle.bundle_analysis || null
+    };
+};
+
+describe('Small Controls Bundle Size and Window Exclusion Tests', function () {
+    this.timeout(180000);
+
+    const fixture_paths = [];
+    const fixture_metrics = {};
+
+    const fixture_dir = __dirname;
+    const jsgui_html_root = path.dirname(require.resolve('jsgui3-html'));
+
+    const active_html_document_path = to_module_literal(path.join(jsgui_html_root, 'controls/organised/1-standard/5-ui/Active_HTML_Document.js'));
+    const button_control_path = to_module_literal(path.join(jsgui_html_root, 'controls/organised/0-core/0-basic/0-native-compositional/button.js'));
+    const date_picker_control_path = to_module_literal(path.join(jsgui_html_root, 'controls/organised/0-core/0-basic/0-native-compositional/date-picker.js'));
+    const color_picker_control_path = to_module_literal(path.join(jsgui_html_root, 'controls/organised/0-core/0-basic/1-compositional/color-picker.js'));
+
+    const write_fixture = async (file_name, source_text) => {
+        const fixture_path = path.join(fixture_dir, file_name);
+        await fs.writeFile(fixture_path, source_text, 'utf8');
+        fixture_paths.push(fixture_path);
+        return fixture_path;
+    };
+
+    before(async function () {
+        const broad_import_fixture = await write_fixture('temp_small_controls_broad_client.js', `
+const jsgui = require('jsgui3-html');
+const controls = jsgui.controls;
+
+class Tiny_Broad_Import_App extends controls.Active_HTML_Document {
+    constructor(spec = {}) {
+        super(spec);
+        if (!spec.el) {
+            const button = new controls.Button({ context: this.context });
+            button.add('ok');
+            this.body.add(button);
+        }
+    }
+}
+
+module.exports = { Tiny_Broad_Import_App };
+`);
+
+        const button_only_fixture = await write_fixture('temp_small_controls_button_only_client.js', `
+const Active_HTML_Document = require('${active_html_document_path}');
+const Button = require('${button_control_path}');
+
+class Tiny_Button_Only_App extends Active_HTML_Document {
+    constructor(spec = {}) {
+        super(spec);
+        if (!spec.el) {
+            const button = new Button({ context: this.context });
+            button.add('ok');
+            this.body.add(button);
+        }
+    }
+}
+
+module.exports = { Tiny_Button_Only_App };
+`);
+
+        const date_picker_only_fixture = await write_fixture('temp_small_controls_date_picker_only_client.js', `
+const Active_HTML_Document = require('${active_html_document_path}');
+const Date_Picker = require('${date_picker_control_path}');
+
+class Tiny_Date_Picker_Only_App extends Active_HTML_Document {
+    constructor(spec = {}) {
+        super(spec);
+        if (!spec.el) {
+            const date_picker = new Date_Picker({ context: this.context });
+            this.body.add(date_picker);
+        }
+    }
+}
+
+module.exports = { Tiny_Date_Picker_Only_App };
+`);
+
+        const color_picker_only_fixture = await write_fixture('temp_small_controls_color_picker_only_client.js', `
+const Active_HTML_Document = require('${active_html_document_path}');
+const Color_Picker = require('${color_picker_control_path}');
+
+class Tiny_Color_Picker_Only_App extends Active_HTML_Document {
+    constructor(spec = {}) {
+        super(spec);
+        if (!spec.el) {
+            const color_picker = new Color_Picker({ context: this.context });
+            this.body.add(color_picker);
+        }
+    }
+}
+
+module.exports = { Tiny_Color_Picker_Only_App };
+`);
+
+        const default_bundler = new Advanced_JS_Bundler_Using_ESBuild({
+            debug: false,
+            bundler: {
+                minify: {
+                    enabled: true,
+                    level: 'normal'
+                }
+            }
+        });
+
+        const disabled_elimination_bundler = new Advanced_JS_Bundler_Using_ESBuild({
+            debug: false,
+            bundler: {
+                minify: {
+                    enabled: true,
+                    level: 'normal'
+                },
+                elimination: {
+                    enabled: false,
+                    jsgui3_html_controls: {
+                        enabled: false
+                    }
+                }
+            }
+        });
+
+        const cache_disabled_bundler = new Advanced_JS_Bundler_Using_ESBuild({
+            debug: false,
+            bundler: {
+                minify: {
+                    enabled: true,
+                    level: 'normal'
+                },
+                elimination: {
+                    enabled: true,
+                    jsgui3_html_controls: {
+                        cache: {
+                            enabled: false
+                        }
+                    }
+                }
+            }
+        });
+
+        fixture_metrics.broad_import_default = await bundle_fixture(default_bundler, broad_import_fixture);
+        fixture_metrics.broad_import_elimination_disabled = await bundle_fixture(disabled_elimination_bundler, broad_import_fixture);
+        fixture_metrics.broad_import_cache_disabled = await bundle_fixture(cache_disabled_bundler, broad_import_fixture);
+        fixture_metrics.button_only = await bundle_fixture(default_bundler, button_only_fixture);
+        fixture_metrics.date_picker_only = await bundle_fixture(default_bundler, date_picker_only_fixture);
+        fixture_metrics.color_picker_only = await bundle_fixture(default_bundler, color_picker_only_fixture);
+
+        console.log('[small-controls-bundle-size] metrics', JSON.stringify(fixture_metrics, null, 2));
+    });
+
+    after(async function () {
+        await Promise.all(fixture_paths.map(async fixture_path => {
+            try {
+                await fs.unlink(fixture_path);
+            } catch (err) {
+                // Ignore missing temp fixture files.
+            }
+        }));
+    });
+
+    it('should exclude Window markers in broad jsgui3-html imports by default', function () {
+        assert.strictEqual(fixture_metrics.broad_import_default.markers_found.length, 0,
+            `Unexpected Window markers in broad default bundle: ${fixture_metrics.broad_import_default.markers_found.join(', ')}`);
+    });
+
+    it('should include Window markers when control elimination is explicitly disabled', function () {
+        assert(fixture_metrics.broad_import_elimination_disabled.markers_found.length > 0,
+            'Expected broad import bundle with elimination disabled to contain Window markers');
+    });
+
+    it('should keep elimination behavior when cache is disabled', function () {
+        assert.strictEqual(fixture_metrics.broad_import_cache_disabled.markers_found.length, 0,
+            `Unexpected Window markers in cache-disabled elimination bundle: ${fixture_metrics.broad_import_cache_disabled.markers_found.join(', ')}`);
+    });
+
+    it('should exclude Window markers when only Button control is directly imported', function () {
+        assert.strictEqual(fixture_metrics.button_only.markers_found.length, 0,
+            `Unexpected Window markers in button-only bundle: ${fixture_metrics.button_only.markers_found.join(', ')}`);
+    });
+
+    it('should exclude Window markers when only Date_Picker control is directly imported', function () {
+        assert.strictEqual(fixture_metrics.date_picker_only.markers_found.length, 0,
+            `Unexpected Window markers in date-picker-only bundle: ${fixture_metrics.date_picker_only.markers_found.join(', ')}`);
+    });
+
+    it('should exclude Window markers when only Color_Picker control is directly imported', function () {
+        assert.strictEqual(fixture_metrics.color_picker_only.markers_found.length, 0,
+            `Unexpected Window markers in color-picker-only bundle: ${fixture_metrics.color_picker_only.markers_found.join(', ')}`);
+    });
+
+    it('should produce smaller JS bundles for direct small-control imports than broad import', function () {
+        assert(fixture_metrics.button_only.js_bytes < fixture_metrics.broad_import_elimination_disabled.js_bytes,
+            'Button-only bundle should be smaller than broad import bundle with elimination disabled');
+        assert(fixture_metrics.date_picker_only.js_bytes < fixture_metrics.broad_import_elimination_disabled.js_bytes,
+            'Date-picker-only bundle should be smaller than broad import bundle with elimination disabled');
+        assert(fixture_metrics.color_picker_only.js_bytes < fixture_metrics.broad_import_elimination_disabled.js_bytes,
+            'Color-picker-only bundle should be smaller than broad import bundle with elimination disabled');
+    });
+
+    it('should reduce broad-import JS size when default elimination scan is active', function () {
+        assert(fixture_metrics.broad_import_default.js_bytes < fixture_metrics.broad_import_elimination_disabled.js_bytes,
+            'Default broad-import bundle should be smaller than broad-import bundle with elimination disabled');
+    });
+
+    it('should expose control scan analysis metadata for default broad import bundle', function () {
+        const analysis = fixture_metrics.broad_import_default.bundle_analysis &&
+            fixture_metrics.broad_import_default.bundle_analysis.jsgui3_html_control_scan;
+        assert(analysis, 'Expected bundle_analysis.jsgui3_html_control_scan metadata');
+        assert(Array.isArray(analysis.selected_controls), 'Expected selected_controls array in control scan metadata');
+        assert(analysis.selected_controls.includes('Button'), 'Expected Button in selected_controls');
+        assert(!analysis.selected_controls.includes('Window'), 'Expected Window not to be selected');
+    });
+});

package/tests/test-runner.js

@@ -27,14 +27,26 @@ class TestRunner {
             'assigners.test.js',
             'publishers.test.js',
             'configuration-validation.test.js',
+            'admin-ui-render.test.js',
+            'serve.test.js',
+            'serve-resources.test.js',
+            'process-resource.test.js',
+            'remote-process-resource.test.js',
+            'server-resource-pool.test.js',
+            'http-sse-publisher.test.js',
             'end-to-end.test.js',
             'content-analysis.test.js',
+            'small-controls-bundle-size.test.js',
+            'control-optimizer-cache-behavior.test.js',
+            'control-scan-manifest-regression.test.js',
             'performance.test.js',
             'error-handling.test.js',
             'examples-controls.e2e.test.js',
             'sass-controls.e2e.test.js',
             'jsgui3-html-examples.puppeteer.test.js',
-            'window-examples.puppeteer.test.js'
+            'bundling-default-control-elimination.puppeteer.test.js',
+            'window-examples.puppeteer.test.js',
+            'window-resource-integration.puppeteer.test.js'
         ];
     }
 

package/tests/window-examples.puppeteer.test.js

@@ -166,6 +166,35 @@ const get_checkbox_state = async (page) => {
     return page.$eval('.checkbox input[type="checkbox"]', (el) => el.checked);
 };
 
+const set_input_value_with_events = async (page, selector, next_value, event_names = ['input']) => {
+    await page.$eval(selector, (el, value, events) => {
+        el.value = value;
+        for (const event_name of events) {
+            el.dispatchEvent(new Event(event_name, { bubbles: true }));
+        }
+    }, String(next_value), event_names);
+};
+
+const click_datetime_tab = async (page, root_selector, tab_label_fragment) => {
+    const click_result = await page.evaluate((picker_root_selector, text_fragment) => {
+        const root_el = document.querySelector(picker_root_selector);
+        if (!root_el) return false;
+        const tab_el = Array.from(root_el.querySelectorAll('.dtp-tab')).find((tab) => {
+            const tab_text = String(tab.textContent || '').toLowerCase();
+            return tab_text.includes(String(text_fragment || '').toLowerCase());
+        });
+        if (!tab_el) return false;
+        tab_el.click();
+        return true;
+    }, root_selector, tab_label_fragment);
+
+    return click_result === true;
+};
+
+const get_text_content = async (page, selector) => {
+    return page.$eval(selector, (el) => (el.textContent || '').trim());
+};
+
 describe('Window Examples Puppeteer Tests', function () {
     this.timeout(180000);
 
@@ -432,7 +461,68 @@ describe('Window Examples Puppeteer Tests', function () {
         }
     });
 
-    it('date picker renders native input in "9) window, date picker"', async function () {
+    it('color picker controls stay interactive in "6) window, color_palette"', async function () {
+        const { server, port } = await start_example_server({
+            dir_name: '6) window, color_palette',
+            ctrl_name: 'Demo_UI'
+        });
+
+        let page;
+        try {
+            page = await open_example_page(port);
+            await page.waitForSelector('.demo-color-picker-default .cp-hex-input');
+            await page.waitForSelector('.demo-color-picker-compact .cp-rgb-r');
+
+            const wheel_drawn = await page.$eval('.demo-color-picker-default .cp-wheel-canvas', (canvas) => {
+                const ctx = canvas.getContext('2d');
+                if (!ctx) return false;
+                const pixel = ctx.getImageData(90, 2, 1, 1).data;
+                return pixel[3] > 0;
+            });
+            assert.strictEqual(wheel_drawn, true, 'Expected Color_Picker hue wheel canvas to be drawn');
+
+            const initial_hex = await page.$eval('.demo-color-picker-default .cp-hex-input', (el) => el.value);
+            await set_input_value_with_events(page, '.demo-color-picker-default .cp-slider-h', 0, ['input']);
+            await page.waitForFunction(
+                (selector, before_hex) => {
+                    const el = document.querySelector(selector);
+                    return !!el && String(el.value || '').toLowerCase() !== String(before_hex || '').toLowerCase();
+                },
+                {},
+                '.demo-color-picker-default .cp-hex-input',
+                initial_hex
+            );
+
+            await set_input_value_with_events(page, '.demo-color-picker-compact .cp-rgb-r', 0, ['input']);
+            await set_input_value_with_events(page, '.demo-color-picker-compact .cp-rgb-g', 255, ['input']);
+            await set_input_value_with_events(page, '.demo-color-picker-compact .cp-rgb-b', 0, ['input']);
+
+            await page.waitForFunction(() => {
+                const readout_el = document.querySelector('.demo-color-picker-readout');
+                if (!readout_el) return false;
+                const text = String(readout_el.textContent || '');
+                return /rgba\(\s*0,\s*255,\s*0/i.test(text);
+            });
+
+            await capture_screenshot(page, '6) window, color_palette', 'after_picker_interaction');
+
+            await drag_window_by(page, '.window .title.bar', 90, 60);
+            await page.waitForTimeout(120);
+
+            await set_input_value_with_events(page, '.demo-color-picker-default .cp-slider-l', 25, ['input']);
+            await page.waitForFunction(() => {
+                const hex_el = document.querySelector('.demo-color-picker-default .cp-hex-input');
+                return !!hex_el && /^#[0-9a-f]{6}$/i.test(String(hex_el.value || ''));
+            });
+        } finally {
+            if (page) {
+                await page.close();
+            }
+            await stop_example_server(server);
+        }
+    });
+
+    it('date and datetime picker interactions work in "9) window, date picker"', async function () {
         const { server, port } = await start_example_server({
             dir_name: '9) window, date picker',
             ctrl_name: 'Demo_UI'
@@ -442,9 +532,122 @@ describe('Window Examples Puppeteer Tests', function () {
         try {
             page = await open_example_page(port);
             await page.waitForSelector('input.date-picker[type="date"]');
+            await page.waitForSelector('.demo-datetime-picker.datetime-picker');
 
             const input_type = await page.$eval('input.date-picker', (el) => el.getAttribute('type'));
             assert.strictEqual(input_type, 'date', 'Expected native date input');
+
+            const date_attrs = await page.$eval('input.date-picker', (el) => ({
+                min: el.getAttribute('min'),
+                max: el.getAttribute('max'),
+                lang: el.getAttribute('lang')
+            }));
+            assert.strictEqual(date_attrs.min, '2026-01-01');
+            assert.strictEqual(date_attrs.max, '2026-12-31');
+            assert.strictEqual(date_attrs.lang, 'en-GB');
+
+            await set_input_value_with_events(page, 'input.date-picker', '2026-07-04', ['input', 'change']);
+            await page.waitForFunction(() => {
+                const out_el = document.querySelector('.demo-date-output');
+                return !!out_el && String(out_el.textContent || '').includes('2026-07-04');
+            });
+
+            const initial_datetime_text = await get_text_content(page, '.demo-datetime-output');
+            const initial_time_display = await get_text_content(page, '.demo-datetime-picker .tp-display-time');
+            const clicked_time_tab = await click_datetime_tab(page, '.demo-datetime-picker', 'time');
+            assert.strictEqual(clicked_time_tab, true, 'Expected to locate and click DateTime "Time" tab');
+
+            await page.waitForFunction(() => {
+                const tp = document.querySelector('.demo-datetime-picker .time-picker');
+                return !!tp && window.getComputedStyle(tp).display !== 'none';
+            });
+
+            const did_click_spinners = await page.evaluate(() => {
+                const hour_spinner = document.querySelector('.demo-datetime-picker .tp-spinner-up.tp-h-up');
+                const minute_spinner = document.querySelector('.demo-datetime-picker .tp-spinner-up.tp-m-up');
+                if (!hour_spinner || !minute_spinner) return false;
+                hour_spinner.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+                minute_spinner.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+                return true;
+            });
+            assert.strictEqual(did_click_spinners, true, 'Expected DateTime spinner controls to be present');
+            await page.waitForFunction(
+                (before_output_text, before_time_text) => {
+                    const out_el = document.querySelector('.demo-datetime-output');
+                    const time_el = document.querySelector('.demo-datetime-picker .tp-display-time');
+                    if (!out_el && !time_el) return false;
+                    const after_text = String(out_el.textContent || '');
+                    const after_time_text = String((time_el && time_el.textContent) || '').trim();
+                    return (
+                        after_text !== before_output_text
+                        || after_time_text !== before_time_text
+                    ) && /DateTime value:\s*\d{4}-\d{2}-\d{2}T.+/.test(after_text);
+                },
+                {},
+                initial_datetime_text,
+                initial_time_display
+            );
+
+            const clicked_date_tab = await click_datetime_tab(page, '.demo-datetime-picker', 'date');
+            assert.strictEqual(clicked_date_tab, true, 'Expected to locate and click DateTime "Date" tab');
+            await page.waitForFunction(() => {
+                const mv = document.querySelector('.demo-datetime-picker .month-view');
+                return !!mv && window.getComputedStyle(mv).display !== 'none';
+            });
+
+            await drag_window_by(page, '.window .title.bar', 80, 50);
+            await resize_window_by(page, '.window .bottom-right.resize-handle', 100, 80);
+            await page.waitForTimeout(120);
+
+            await set_input_value_with_events(page, 'input.date-picker', '2026-09-09', ['input', 'change']);
+            await page.waitForFunction(() => {
+                const out_el = document.querySelector('.demo-date-output');
+                return !!out_el && String(out_el.textContent || '').includes('2026-09-09');
+            });
+
+            await capture_screenshot(page, '9) window, date picker', 'after_datetime_interaction');
+        } finally {
+            if (page) {
+                await page.close();
+            }
+            await stop_example_server(server);
+        }
+    });
+
+    it('shared Date_Picker controls mirror values in "9b) window, shared data.model mirrored date pickers"', async function () {
+        const { server, port } = await start_example_server({
+            dir_name: '9b) window, shared data.model mirrored date pickers',
+            ctrl_name: 'Demo_UI'
+        });
+
+        let page;
+        try {
+            page = await open_example_page(port);
+            await page.waitForSelector('input.date-picker');
+
+            await page.waitForFunction(() => document.querySelectorAll('input.date-picker').length >= 2);
+            const set_date_value_at_index = async (index, next_value) => {
+                await page.evaluate((picker_index, value) => {
+                    const inputs = Array.from(document.querySelectorAll('input.date-picker'));
+                    const target = inputs[picker_index];
+                    if (!target) return;
+                    target.value = value;
+                    target.dispatchEvent(new Event('input', { bubbles: true }));
+                    target.dispatchEvent(new Event('change', { bubbles: true }));
+                }, index, next_value);
+            };
+
+            await set_date_value_at_index(0, '2026-05-10');
+            await page.waitForFunction((expected_value) => {
+                const inputs = Array.from(document.querySelectorAll('input.date-picker'));
+                return inputs.length >= 2 && inputs[1].value === expected_value;
+            }, {}, '2026-05-10');
+
+            await set_date_value_at_index(1, '2026-11-21');
+            await page.waitForFunction((expected_value) => {
+                const inputs = Array.from(document.querySelectorAll('input.date-picker'));
+                return inputs.length >= 2 && inputs[0].value === expected_value;
+            }, {}, '2026-11-21');
         } finally {
             if (page) {
                 await page.close();