jsgui3-server 0.0.143 → 0.0.145

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

@@ -0,0 +1,21 @@
+const jsgui = require('./client');
+const Server = require('../../../server');
+const { Demo_UI } = jsgui.controls;
+
+if (require.main === module) {
+    const server_instance = new Server({
+        Ctrl: Demo_UI,
+        src_path_client_js: require.resolve('./client.js')
+    });
+
+    server_instance.allowed_addresses = ['127.0.0.1'];
+
+    server_instance.on('ready', () => {
+        server_instance.start(52000, (err) => {
+            if (err) {
+                throw err;
+            }
+            console.log('server started on port 52000');
+        });
+    });
+}

package/examples/jsgui3-html/README.md

@@ -0,0 +1,48 @@
+# JSGUI3-HTML Example Plans
+
+This folder collects new jsgui3-html focused examples for the server repo.
+
+## Outline plan (10 examples)
+
+1. **01) mvvm-counter**
+   - Goal: MVVM binding, computed properties, watchers, transformations, validators.
+   - UI: counter display, step input, increment/decrement/reset buttons.
+   - Tests: Puppeteer click flows, class toggles, validation states.
+
+2. **02) date-transform**
+   - Goal: date transformations, parsing, range validation, locale formatting.
+   - UI: ISO input + locale display, min/max validation, error state.
+
+3. **03) form-validation**
+   - Goal: multi-field validation (required/email/url/length/pattern).
+   - UI: registration form with per-field errors and submit state.
+
+4. **04) data-grid**
+   - Goal: collection binding, sorting, filtering, pagination.
+   - UI: simple data grid with search and page controls.
+
+5. **05) master-detail**
+   - Goal: selection syncing, computed detail view, navigation.
+   - UI: list + detail panel with prev/next controls.
+
+6. **06) theming**
+   - Goal: theme tokens, theme overrides, CSS variable application.
+   - UI: theme toggle with token changes shown in a small layout.
+
+7. **07) mixins**
+   - Goal: dragable/resizable/selectable mixins.
+   - UI: cards with drag/resize handles and selection states.
+
+8. **08) router**
+   - Goal: router contract + route switching.
+   - UI: simple nav that swaps controls per route.
+
+9. **09) resource-transform**
+   - Goal: Resource + Data_Transform pipeline.
+   - UI: load data, transform it, render output with status.
+
+10. **10) binding-debugger**
+   - Goal: BindingDebugger usage to inspect bindings and changes.
+   - UI: inspector panel showing tracked changes over time.
+
+Examples 01-10 are fully implemented right now.

package/http/responders/static/Static_Route_HTTP_Responder.js

@@ -54,22 +54,27 @@ class Static_Route_HTTP_Responder extends HTTP_Responder {
         if (typeof accept_encoding === 'string' && accept_encoding.includes('gzip')) supported_encodings.gzip = true;
 
         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 use_br = supported_encodings.br === true && has_br;
+        const use_gzip = supported_encodings.gzip === true && has_gzip;
 
         //console.log('supported_encodings', supported_encodings);
 
-        if (supported_encodings.br === true) {
-            
-            for (const key in response_headers.br) {
-                const value = response_headers.br[key];
-                //console.log('[key, value]', [key, value]);
-                res.setHeader(key, value);
-            }
-
-        } else if (supported_encodings.gzip === true) {
-            //console.log('should write headers for gzipped buffer...');
-
-            for (const key in response_headers.gzip) {
-                const value = response_headers.gzip[key];
+        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);
+            }
+
+        } else if (use_gzip) {
+            //console.log('should write headers for gzipped buffer...');
+
+            for (const key in response_headers.gzip) {
+                const value = response_headers.gzip[key];
                 //console.log('[key, value]', [key, value]);
                 res.setHeader(key, value);
             }
@@ -83,13 +88,13 @@ class Static_Route_HTTP_Responder extends HTTP_Responder {
 
         // Then write the (hopefully compressed) response bodies...
 
-        if (supported_encodings.br === true) {
-
-            res.write(response_buffers.br);
-        } else if (supported_encodings.gzip === true) {
-            //console.log('should write gzipped buffer...');
-            res.write(response_buffers.gzip);
-        } else {
+        if (use_br) {
+
+            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);
         }
 

package/lab/README.md

@@ -0,0 +1,19 @@
+# Lab Experiments
+
+This directory collects small, targeted experiments that validate specific UI behaviors or markup assumptions.
+
+## Experiments
+
+- `lab/experiments/window_examples_dom_audit.js`
+  - Server-rendered DOM checks for selected window examples.
+  - Writes results to `lab/results/window_examples_dom_audit.json` and `.md`.
+
+## Running
+
+```bash
+node lab/experiments/window_examples_dom_audit.js
+```
+
+## Results
+
+Experiment outputs are stored under `lab/results/` for traceability and documentation updates.

package/lab/experiments/window_examples_dom_audit.js

@@ -0,0 +1,241 @@
+const fs = require('fs');
+const path = require('path');
+
+const Server_Page_Context = require('../../page-context');
+
+const repo_root_path = path.join(__dirname, '..', '..');
+const examples_controls_root_path = path.join(repo_root_path, 'examples', 'controls');
+const results_dir_path = path.join(repo_root_path, 'lab', 'results');
+
+const count_occurrences = (haystack, needle) => {
+    let idx = 0;
+    let count = 0;
+    while (true) {
+        idx = haystack.indexOf(needle, idx);
+        if (idx === -1) return count;
+        count++;
+        idx += needle.length;
+    }
+};
+
+const count_class_occurrences = (html, class_name) => {
+    const class_regex = new RegExp(`class="[^"]*\\b${class_name}\\b`, 'g');
+    const matches = html.match(class_regex);
+    return matches ? matches.length : 0;
+};
+
+const count_regex_occurrences = (html, regex) => {
+    const matches = html.match(regex);
+    return matches ? matches.length : 0;
+};
+
+const render_example_html = ({ dir_name, ctrl_name }) => {
+    const example_dir_path = path.join(examples_controls_root_path, dir_name);
+    const example_client_path = path.join(example_dir_path, 'client.js');
+
+    const jsgui = require(example_client_path);
+    const ctrl = jsgui.controls && jsgui.controls[ctrl_name];
+    if (!ctrl) {
+        throw new Error(`Missing exported control jsgui.controls.${ctrl_name} in ${example_client_path}`);
+    }
+
+    const context = new Server_Page_Context();
+    const ctrl_instance = new ctrl({ context });
+    if (typeof ctrl_instance.all_html_render === 'function') {
+        return ctrl_instance.all_html_render();
+    }
+
+    if (typeof ctrl_instance.render === 'function') {
+        return ctrl_instance.render();
+    }
+
+    throw new Error(`Control ${ctrl_name} does not expose render methods`);
+};
+
+const make_count_check = (html, id, description, needle, expected) => {
+    const actual = count_occurrences(html, needle);
+    return {
+        id,
+        description,
+        expected,
+        actual,
+        pass: actual === expected
+    };
+};
+
+const make_class_count_check = (html, id, description, class_name, expected) => {
+    const actual = count_class_occurrences(html, class_name);
+    return {
+        id,
+        description,
+        expected,
+        actual,
+        pass: actual === expected
+    };
+};
+
+const make_contains_check = (html, id, description, needle) => {
+    const actual = html.includes(needle);
+    return {
+        id,
+        description,
+        expected: true,
+        actual,
+        pass: actual === true
+    };
+};
+
+const make_regex_count_check = (html, id, description, regex, expected) => {
+    const actual = count_regex_occurrences(html, regex);
+    return {
+        id,
+        description,
+        expected,
+        actual,
+        pass: actual === expected
+    };
+};
+
+const examples = [
+    {
+        dir_name: '1) window',
+        ctrl_name: 'Demo_UI',
+        checks: (html) => [
+            make_count_check(html, 'window_count', 'Window control count', 'data-jsgui-type="window"', 1),
+            make_contains_check(html, 'window_title_text', 'Window title text present', 'jsgui3-html Window Control'),
+            make_count_check(html, 'window_button_count', 'Window button count', 'data-jsgui-type="button"', 3)
+        ]
+    },
+    {
+        dir_name: '4) window, tabbed panel',
+        ctrl_name: 'Demo_UI',
+        checks: (html) => [
+            make_class_count_check(html, 'tab_label_count', 'Tab label count', 'tab-label', 2),
+            make_contains_check(html, 'tab_label_one', 'Tab 1 label text present', 'tab 1'),
+            make_contains_check(html, 'tab_label_two', 'Tab 2 label text present', 'tab 2'),
+            make_count_check(html, 'tab_input_checked', 'Default checked tab input count', 'checked="checked"', 1)
+        ]
+    },
+    {
+        dir_name: '8) window, checkbox/a)',
+        ctrl_name: 'Demo_UI',
+        checks: (html) => [
+            make_regex_count_check(
+                html,
+                'checkbox_input_count',
+                'Checkbox input count',
+                /\stype="checkbox"/g,
+                1
+            ),
+            make_contains_check(html, 'checkbox_label_text', 'Checkbox label text present', 'A checkbox')
+        ]
+    },
+    {
+        dir_name: '9) window, date picker',
+        ctrl_name: 'Demo_UI',
+        checks: (html) => [
+            make_class_count_check(html, 'date_picker_present', 'Date picker container present', 'date-picker', 1),
+            make_regex_count_check(
+                html,
+                'date_input_count',
+                'Date input type count',
+                /\stype="date"/g,
+                1
+            )
+        ]
+    }
+];
+
+const build_results = () => {
+    const results = {
+        generated_at: new Date().toISOString(),
+        examples: []
+    };
+
+    for (const example of examples) {
+        const html = render_example_html(example);
+        const checks = example.checks(html);
+        const passed = checks.filter((check) => check.pass).length;
+        const failed = checks.length - passed;
+
+        results.examples.push({
+            dir_name: example.dir_name,
+            ctrl_name: example.ctrl_name,
+            checks,
+            summary: {
+                total: checks.length,
+                passed,
+                failed
+            }
+        });
+    }
+
+    results.summary = results.examples.reduce(
+        (acc, example) => {
+            acc.total += example.summary.total;
+            acc.passed += example.summary.passed;
+            acc.failed += example.summary.failed;
+            return acc;
+        },
+        { total: 0, passed: 0, failed: 0 }
+    );
+
+    return results;
+};
+
+const render_markdown = (results) => {
+    const lines = [];
+    lines.push('# Window Examples DOM Audit');
+    lines.push('');
+    lines.push(`Generated at: ${results.generated_at}`);
+    lines.push('');
+    lines.push(`Total checks: ${results.summary.total}`);
+    lines.push(`Passed: ${results.summary.passed}`);
+    lines.push(`Failed: ${results.summary.failed}`);
+    lines.push('');
+
+    for (const example of results.examples) {
+        lines.push(`## ${example.dir_name}`);
+        lines.push('');
+        lines.push(`Control: ${example.ctrl_name}`);
+        lines.push('');
+        lines.push('| Check | Expected | Actual | Pass |');
+        lines.push('| --- | --- | --- | --- |');
+        for (const check of example.checks) {
+            const expected = Array.isArray(check.expected) ? check.expected.join(', ') : String(check.expected);
+            const actual = Array.isArray(check.actual) ? check.actual.join(', ') : String(check.actual);
+            lines.push(`| ${check.description} | ${expected} | ${actual} | ${check.pass ? 'yes' : 'no'} |`);
+        }
+        lines.push('');
+    }
+
+    return lines.join('\n');
+};
+
+const write_results = (results) => {
+    fs.mkdirSync(results_dir_path, { recursive: true });
+    const json_path = path.join(results_dir_path, 'window_examples_dom_audit.json');
+    const md_path = path.join(results_dir_path, 'window_examples_dom_audit.md');
+
+    fs.writeFileSync(json_path, JSON.stringify(results, null, 2));
+    fs.writeFileSync(md_path, render_markdown(results));
+
+    return { json_path, md_path };
+};
+
+const main = () => {
+    const results = build_results();
+    const { json_path, md_path } = write_results(results);
+
+    console.log('Window examples DOM audit complete.');
+    console.log(`JSON: ${json_path}`);
+    console.log(`Markdown: ${md_path}`);
+
+    if (results.summary.failed > 0) {
+        process.exitCode = 1;
+    }
+};
+
+if (require.main === module) {
+    main();
+}

package/lab/results/window_examples_dom_audit.json

@@ -0,0 +1,131 @@
+{
+  "generated_at": "2025-12-19T19:05:37.894Z",
+  "examples": [
+    {
+      "dir_name": "1) window",
+      "ctrl_name": "Demo_UI",
+      "checks": [
+        {
+          "id": "window_count",
+          "description": "Window control count",
+          "expected": 1,
+          "actual": 1,
+          "pass": true
+        },
+        {
+          "id": "window_title_text",
+          "description": "Window title text present",
+          "expected": true,
+          "actual": true,
+          "pass": true
+        },
+        {
+          "id": "window_button_count",
+          "description": "Window button count",
+          "expected": 3,
+          "actual": 3,
+          "pass": true
+        }
+      ],
+      "summary": {
+        "total": 3,
+        "passed": 3,
+        "failed": 0
+      }
+    },
+    {
+      "dir_name": "4) window, tabbed panel",
+      "ctrl_name": "Demo_UI",
+      "checks": [
+        {
+          "id": "tab_label_count",
+          "description": "Tab label count",
+          "expected": 2,
+          "actual": 2,
+          "pass": true
+        },
+        {
+          "id": "tab_label_one",
+          "description": "Tab 1 label text present",
+          "expected": true,
+          "actual": true,
+          "pass": true
+        },
+        {
+          "id": "tab_label_two",
+          "description": "Tab 2 label text present",
+          "expected": true,
+          "actual": true,
+          "pass": true
+        },
+        {
+          "id": "tab_input_checked",
+          "description": "Default checked tab input count",
+          "expected": 1,
+          "actual": 1,
+          "pass": true
+        }
+      ],
+      "summary": {
+        "total": 4,
+        "passed": 4,
+        "failed": 0
+      }
+    },
+    {
+      "dir_name": "8) window, checkbox/a)",
+      "ctrl_name": "Demo_UI",
+      "checks": [
+        {
+          "id": "checkbox_input_count",
+          "description": "Checkbox input count",
+          "expected": 1,
+          "actual": 1,
+          "pass": true
+        },
+        {
+          "id": "checkbox_label_text",
+          "description": "Checkbox label text present",
+          "expected": true,
+          "actual": true,
+          "pass": true
+        }
+      ],
+      "summary": {
+        "total": 2,
+        "passed": 2,
+        "failed": 0
+      }
+    },
+    {
+      "dir_name": "9) window, date picker",
+      "ctrl_name": "Demo_UI",
+      "checks": [
+        {
+          "id": "date_picker_present",
+          "description": "Date picker container present",
+          "expected": 1,
+          "actual": 1,
+          "pass": true
+        },
+        {
+          "id": "date_input_count",
+          "description": "Date input type count",
+          "expected": 1,
+          "actual": 1,
+          "pass": true
+        }
+      ],
+      "summary": {
+        "total": 2,
+        "passed": 2,
+        "failed": 0
+      }
+    }
+  ],
+  "summary": {
+    "total": 11,
+    "passed": 11,
+    "failed": 0
+  }
+}

package/lab/results/window_examples_dom_audit.md

@@ -0,0 +1,46 @@
+# Window Examples DOM Audit
+
+Generated at: 2025-12-19T19:05:37.894Z
+
+Total checks: 11
+Passed: 11
+Failed: 0
+
+## 1) window
+
+Control: Demo_UI
+
+| Check | Expected | Actual | Pass |
+| --- | --- | --- | --- |
+| Window control count | 1 | 1 | yes |
+| Window title text present | true | true | yes |
+| Window button count | 3 | 3 | yes |
+
+## 4) window, tabbed panel
+
+Control: Demo_UI
+
+| Check | Expected | Actual | Pass |
+| --- | --- | --- | --- |
+| Tab label count | 2 | 2 | yes |
+| Tab 1 label text present | true | true | yes |
+| Tab 2 label text present | true | true | yes |
+| Default checked tab input count | 1 | 1 | yes |
+
+## 8) window, checkbox/a)
+
+Control: Demo_UI
+
+| Check | Expected | Actual | Pass |
+| --- | --- | --- | --- |
+| Checkbox input count | 1 | 1 | yes |
+| Checkbox label text present | true | true | yes |
+
+## 9) window, date picker
+
+Control: Demo_UI
+
+| Check | Expected | Actual | Pass |
+| --- | --- | --- | --- |
+| Date picker container present | 1 | 1 | yes |
+| Date input type count | 1 | 1 | yes |

package/package.json

@@ -10,8 +10,8 @@
     "esbuild": "^0.27.1",
     "fnl": "^0.0.37",
     "fnlfs": "^0.0.34",
-    "jsgui3-client": "^0.0.124",
-    "jsgui3-html": "^0.0.175",
+    "jsgui3-client": "^0.0.125",
+    "jsgui3-html": "^0.0.176",
     "jsgui3-webpage": "^0.0.8",
     "jsgui3-website": "^0.0.8",
     "lang-tools": "^0.0.44",
@@ -20,9 +20,13 @@
     "ncp": "^2.0.0",
     "obext": "^0.0.33",
     "rimraf": "^6.1.2",
+    "sass": "^1.77.6",
     "stream-to-array": "^2.3.0",
     "url-parse": "^1.5.10"
   },
+  "devDependencies": {
+    "puppeteer": "^19.11.1"
+  },
   "commentDeps": {
     "babel-plugin-minify-dead-code-elimination": "^0.5.0",
     "babel-plugin-remove-comments": "^2.0.0",
@@ -39,7 +43,7 @@
     "type": "git",
     "url": "https://github.com/metabench/jsgui3-server.git"
   },
-  "version": "0.0.143",
+  "version": "0.0.145",
   "scripts": {
     "cli": "node cli.js",
     "serve": "node cli.js serve",
@@ -54,6 +58,7 @@
     "test:performance": "node tests/test-runner.js --test=performance.test.js",
     "test:errors": "node tests/test-runner.js --test=error-handling.test.js",
     "test:examples:controls": "node tests/test-runner.js --test=examples-controls.e2e.test.js",
+    "test:puppeteer:windows": "node tests/test-runner.js --test=window-examples.puppeteer.test.js",
     "test:debug": "node tests/test-runner.js --debug",
     "test:verbose": "node tests/test-runner.js --verbose"
   }

package/publishers/http-webpageorsite-publisher.js

@@ -97,7 +97,9 @@ class HTTP_Webpageorsite_Publisher extends HTTP_Publisher {
     constructor(spec) {
         super(spec);
 
-        if (spec.debug !== undefined) this.debug = spec.debug;
+        if (spec.debug !== undefined) this.debug = spec.debug;
+        this.style_config = spec.style || {};
+        this.bundler_config = spec.bundler || {};
 
         // But then some properties to do with the js client(s?) file path.
 
@@ -126,9 +128,11 @@ class HTTP_Webpageorsite_Publisher extends HTTP_Publisher {
 
         // Maybe need a get_ready (async or obs) function....
 
-        this.js_bundler = new JS_Bundler({
-            'debug': this.debug || false
-        });
+        this.js_bundler = new JS_Bundler({
+            'debug': this.debug || false,
+            'style': this.style_config,
+            'bundler': this.bundler_config
+        });
 
 
     }