jsgui3-server 0.0.144 → 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/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",
@@ -43,7 +43,7 @@
     "type": "git",
     "url": "https://github.com/metabench/jsgui3-server.git"
   },
-  "version": "0.0.144",
+  "version": "0.0.145",
   "scripts": {
     "cli": "node cli.js",
     "serve": "node cli.js serve",

package/publishers/http-webpageorsite-publisher.js

@@ -99,6 +99,7 @@ class HTTP_Webpageorsite_Publisher extends HTTP_Publisher {
 
         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.
 
@@ -129,7 +130,8 @@ class HTTP_Webpageorsite_Publisher extends HTTP_Publisher {
 
         this.js_bundler = new JS_Bundler({
             'debug': this.debug || false,
-            'style': this.style_config
+            'style': this.style_config,
+            'bundler': this.bundler_config
         });
 
 

package/serve-factory.js

@@ -12,9 +12,9 @@ const Static_Route_HTTP_Responder = require('./http/responders/static/Static_Rou
 const { get_port_or_free } = require('./port-utils');
 
 
-const prepare_webpage_route = (server, route, page_options = {}, defaults = {}) => {
-	return new Promise((resolve, reject) => {
-		try {
+const prepare_webpage_route = (server, route, page_options = {}, defaults = {}) => {
+	return new Promise((resolve, reject) => {
+		try {
 			const {
 				title,
 				name,
@@ -40,6 +40,7 @@ const prepare_webpage_route = (server, route, page_options = {}, defaults = {})
 			if (guessed_client_path) publisher_options.src_path_client_js = guessed_client_path;
 			if (truthy(defaults.debug)) publisher_options.debug = true;
 			if (defaults.style !== undefined) publisher_options.style = defaults.style;
+			if (defaults.bundler !== undefined) publisher_options.bundler = defaults.bundler;
 
 			const webpage_publisher = new HTTP_Webpage_Publisher(publisher_options);
 			webpage_publisher.on('ready', (bundle) => {
@@ -142,6 +143,7 @@ module.exports = (Server) => {
         const host = serve_options.host || process.env.HOST || null;
         const debug_enabled = serve_options.debug !== undefined ? truthy(serve_options.debug) : truthy(process.env.JSGUI_DEBUG);
         const style_config = serve_options.style;
+        const bundler_config = serve_options.bundler;
     
         const server_spec = {
             name: serve_options.name || 'jsgui3 server',
@@ -150,6 +152,9 @@ module.exports = (Server) => {
         if (style_config !== undefined) {
             server_spec.style = style_config;
         }
+        if (bundler_config !== undefined) {
+            server_spec.bundler = bundler_config;
+        }
         if (typeof serve_options.ctrl === 'function') {
             server_spec.Ctrl = serve_options.ctrl;
         } else if (serve_options.api && typeof serve_options.api === 'object') {
@@ -181,13 +186,15 @@ module.exports = (Server) => {
         const extra_page_promises = additional_pages.map(([route, cfg]) => prepare_webpage_route(server_instance, route, cfg, {
             caller_dir,
             debug: debug_enabled,
-            style: style_config
+            style: style_config,
+            bundler: bundler_config
         }));
         if (serve_options.page_config && serve_options.page_route && serve_options.page_route !== '/') {
             extra_page_promises.unshift(prepare_webpage_route(server_instance, serve_options.page_route, serve_options.page_config, {
                 caller_dir,
                 debug: debug_enabled,
-                style: style_config
+                style: style_config,
+                bundler: bundler_config
             }));
         }
 

package/server.js

@@ -50,6 +50,7 @@ class JSGUI_Single_Process_Server extends Evented_Class {
 		}
 
 		const style_config = spec.style;
+		const bundler_config = spec.bundler;
 
 		// or src_path_client_js as well...
 
@@ -93,14 +94,15 @@ class JSGUI_Single_Process_Server extends Evented_Class {
 
 			const wp_app = new Webpage({content: Ctrl});
 
-			const opts_wp_publisher = {
-				'webpage': wp_app
-
-			};
-
-			if (this.debug) {
-				opts_wp_publisher.debug = this.debug;
-			}
+			const opts_wp_publisher = {
+				'webpage': wp_app
+
+			};
+			if (bundler_config !== undefined) opts_wp_publisher.bundler = bundler_config;
+
+			if (this.debug) {
+				opts_wp_publisher.debug = this.debug;
+			}
 
 			if (disk_path_client_js) opts_wp_publisher.src_path_client_js = disk_path_client_js;
 			if (style_config !== undefined) opts_wp_publisher.style = style_config;
@@ -163,12 +165,15 @@ class JSGUI_Single_Process_Server extends Evented_Class {
 			const ws_app = this.app = this.website = new Website(opts_website);
 			// Be able to treat Webpage as an app?
 
-			const opts_ws_publisher = {
-				'website': ws_app
-			};
+			const opts_ws_publisher = {
+				'website': ws_app
+			};
 			if (disk_path_client_js) {
 				opts_ws_publisher.disk_path_client_js = disk_path_client_js;
 			}
+			if (bundler_config !== undefined) {
+				opts_ws_publisher.bundler = bundler_config;
+			}
 			if (style_config !== undefined) {
 				opts_ws_publisher.style = style_config;
 			}
@@ -240,16 +245,33 @@ class JSGUI_Single_Process_Server extends Evented_Class {
 						if (this.allowed_addresses && this.allowed_addresses.length) {
 							arr_ipv4_addresses = arr_ipv4_addresses.filter(a => this.allowed_addresses.indexOf(a) > -1);
 						}
-						arr_ipv4_addresses = [...new Set(arr_ipv4_addresses)];
-						console.log('IPv4 addresses to bind:', arr_ipv4_addresses);
-						let num_to_start = arr_ipv4_addresses.length;
-						if (num_to_start === 0) {
-							callback('No allowed network interfaces found.');
-							return;
-						}
-						const respond_not_found = (res) => {
-							if (!res.headersSent) {
-								const body = 'Not Found';
+						arr_ipv4_addresses = [...new Set(arr_ipv4_addresses)];
+						console.log('IPv4 addresses to bind:', arr_ipv4_addresses);
+						let num_to_start = arr_ipv4_addresses.length;
+						let started_count = 0;
+						let last_error = null;
+						let ready_raised = false;
+						if (num_to_start === 0) {
+							callback('No allowed network interfaces found.');
+							return;
+						}
+						const finalize_start = (err) => {
+							if (num_to_start !== 0) return;
+							if (started_count > 0) {
+								if (!ready_raised) {
+									console.log('Server ready');
+									this.raise('ready');
+									ready_raised = true;
+								}
+								if (callback) callback(null, true);
+								return;
+							}
+							const final_error = err || last_error || new Error('No servers started.');
+							if (callback) callback(final_error);
+						};
+						const respond_not_found = (res) => {
+							if (!res.headersSent) {
+								const body = 'Not Found';
 								res.statusCode = 404;
 								res.setHeader('Content-Type', 'text/plain; charset=utf-8');
 								res.setHeader('Content-Length', Buffer.byteLength(body));
@@ -308,70 +330,66 @@ class JSGUI_Single_Process_Server extends Evented_Class {
 										process_request(req, res);
 									});
 									this.http_servers.push(https_server);
-									https_server.on('error', (err) => {
-										if (err.code === 'EACCES') {
-											console.error('Permission denied:', err.message);
-										} else if (err.code === 'EADDRINUSE') {
-											console.error(`Address ${ipv4_address}:${port} already in use; skipping.`);
-										} else {
-											console.error('https_server error:', err);
-										}
-										num_to_start--;
-										if (num_to_start === 0 && callback) callback(null, true);
-									});
-									https_server.timeout = 10800000;
-									https_server.listen(port, ipv4_address, () => {
-										console.log('* Server running at https://' + ipv4_address + ':' + port + '/');
-										num_to_start--;
-										if (num_to_start === 0) {
-											console.log('Server ready');
-											this.raise('ready');
-											if (callback) callback(null, true);
-										}
-									});
-								} catch (err) {
-									console.log('https_server err', err);
-									num_to_start--;
-									if (num_to_start === 0 && callback) callback(null, true);
-								}
-							});
-						} else {
-						each(arr_ipv4_addresses, (ipv4_address) => {
-								try {
-								var http_server = http.createServer(function(req, res) {
-									process_request(req, res);
-								});
-									this.http_servers.push(http_server);
-									http_server.on('error', (err) => {
-										if (err.code === 'EACCES') {
-											console.error('Permission denied:', err.message);
-										} else if (err.code === 'EADDRINUSE') {
-											console.error(`Address ${ipv4_address}:${port} already in use; skipping.`);
-										} else {
-											console.error('http_server error:', err);
-										}
-										num_to_start--;
-										if (num_to_start === 0 && callback) callback(null, true);
-									});
-									http_server.timeout = 10800000;
-									http_server.listen(port, ipv4_address, () => {
-										console.log('* Server running at http://' + ipv4_address + ':' + port + '/');
-										num_to_start--;
-										if (num_to_start === 0) {
-											console.log('Server ready');
-											this.raise('ready');
-											if (callback) callback(null, true);
-										}
-									});
-								} catch (err) {
-									console.log('http_server err', err);
-									num_to_start--;
-									if (num_to_start === 0 && callback) callback(null, true);
-								}
-							});
-						}
-					}
-				});
+									https_server.on('error', (err) => {
+										last_error = err;
+										if (err.code === 'EACCES') {
+											console.error('Permission denied:', err.message);
+										} else if (err.code === 'EADDRINUSE') {
+											console.error(`Address ${ipv4_address}:${port} already in use; skipping.`);
+										} else {
+											console.error('https_server error:', err);
+										}
+										num_to_start--;
+										finalize_start(err);
+									});
+									https_server.timeout = 10800000;
+									https_server.listen(port, ipv4_address, () => {
+										console.log('* Server running at https://' + ipv4_address + ':' + port + '/');
+										started_count++;
+										num_to_start--;
+										finalize_start(null);
+									});
+								} catch (err) {
+									console.log('https_server err', err);
+									num_to_start--;
+									finalize_start(err);
+								}
+							});
+						} else {
+						each(arr_ipv4_addresses, (ipv4_address) => {
+								try {
+								var http_server = http.createServer(function(req, res) {
+									process_request(req, res);
+								});
+									this.http_servers.push(http_server);
+									http_server.on('error', (err) => {
+										last_error = err;
+										if (err.code === 'EACCES') {
+											console.error('Permission denied:', err.message);
+										} else if (err.code === 'EADDRINUSE') {
+											console.error(`Address ${ipv4_address}:${port} already in use; skipping.`);
+										} else {
+											console.error('http_server error:', err);
+										}
+										num_to_start--;
+										finalize_start(err);
+									});
+									http_server.timeout = 10800000;
+									http_server.listen(port, ipv4_address, () => {
+										console.log('* Server running at http://' + ipv4_address + ':' + port + '/');
+										started_count++;
+										num_to_start--;
+										finalize_start(null);
+									});
+								} catch (err) {
+									console.log('http_server err', err);
+									num_to_start--;
+									finalize_start(err);
+								}
+							});
+						}
+					}
+				});
 			}
 		});
 	}

package/tests/README.md

@@ -27,6 +27,7 @@ tests/
 ├── error-handling.test.js        # Error handling and edge cases
 ├── examples-controls.e2e.test.js # Example apps regression (controls)
 ├── sass-controls.e2e.test.js     # Sass/CSS controls E2E coverage
+├── jsgui3-html-examples.puppeteer.test.js # Puppeteer interaction tests (jsgui3-html examples)
 ├── window-examples.puppeteer.test.js # Puppeteer interaction tests (window examples)
 ├── test-runner.js                # Custom test runner with reporting
 └── README.md                     # This file
@@ -159,6 +160,12 @@ Server-level integration tests for controls that define `.scss` or `.sass` style
 
 Note: These tests are skipped if the `sass` dependency is not installed.
 
+### 10. JSGUI3-HTML Example Puppeteer Tests (`jsgui3-html-examples.puppeteer.test.js`)
+
+Browser-level interaction checks for jsgui3-html examples:
+
+- MVVM counter interactions, bindings, and validation state
+
 ## Configuration Examples
 
 ### Basic Minification