jsgui3-server 0.0.126 → 0.0.128

package/README.md

@@ -196,7 +196,6 @@ The framework includes several consistency verification patterns:
 
 - **Console Logging:** Extensive logging during server startup and events
 - **Port Configuration:** Standardized on port 52000 for examples
-- **Hot Reloading:** Server can be restarted to pick up client.js changes
 - **Activation Lifecycle:** `activate()` method provides hook for post-initialization logic
 
 ## Dependencies and Integration
@@ -301,8 +300,8 @@ if (date_picker_1.data.model !== date_picker_2.data.model) {
   field(dm, 'value');
   date_picker_1.data.model = dm;
   date_picker_2.data.model = dm;
-  date_picker_1.assign_data_model_value_change_handler();
-  date_picker_2.assign_data_model_value_change_handler();
+  //date_picker_1.assign_data_model_value_change_handler();
+  //date_picker_2.assign_data_model_value_change_handler();
 }
 ```
 
@@ -383,8 +382,7 @@ context.on('window-resize', e_resize => { });
 ### Event Naming Conventions
 
 - `window-resize` - Browser window size changes
-- `data-model-value-change` - Data model property updates
-- Control-specific events follow `control-event` pattern
+- Control-specific events follow framework patterns
 
 ## Control Composition Hierarchy
 
@@ -602,10 +600,8 @@ window.pos                   // Current position
 ```
 
 **Window Features:**
-- Draggable by title bar (via `dragable` mixin)
-- Resizable borders
-- Close button functionality
-- Z-index management for overlapping windows
+- Draggable by title bar
+- Window positioning and management
 - Child control containment via `inner` property
 
 ### Data_Object Reactive System
@@ -665,9 +661,6 @@ context.on('event-name', handler);
 
 // Common event types:
 'window-resize'              // Browser window size changes
-'data-model-value-change'    // Data model property updates
-'control-activated'          // Control becomes active
-'control-deactivated'        // Control becomes inactive
 
 // Event handler patterns
 context.on('window-resize', e_resize => {
@@ -700,8 +693,8 @@ activate() {
       picker2.data.model = dm;
       
       // Re-establish change handlers
-      picker1.assign_data_model_value_change_handler();
-      picker2.assign_data_model_value_change_handler();
+      //picker1.assign_data_model_value_change_handler();
+      //picker2.assign_data_model_value_change_handler();
     }
   }
 }
@@ -714,11 +707,8 @@ activate() {
 const sharedModel = new Data_Object({ context });
 field(sharedModel, 'value');
 
-const controls = [
-  new Date_Picker({ context, data: { model: sharedModel } }),
-  new Text_Input({ context, data: { model: sharedModel } }),
-  new Display_Label({ context, data: { model: sharedModel } })
-];
+const date_picker_1 = new Date_Picker({ context, data: { model: sharedModel } });
+const date_picker_2 = new Date_Picker({ context, data: { model: sharedModel } });
 
 // Any control's changes propagate to all others
 ```
@@ -769,20 +759,14 @@ const server = new Server({
 // 1. Browser requests application
 // 2. Server serves bundled JavaScript
 // 3. Client executes and creates UI
-// 4. WebSocket connection established for real-time updates
-// 5. UI events flow back to server via WebSocket
-// 6. Server processes events and updates models
-// 7. Model changes propagate back to client
+// 4. Real-time updates handled through framework
+// 5. UI events processed by client-side framework
+// 6. Data model changes handled by shared state system
 ```
 
 ### Multi-Client Synchronization
 
-```javascript
-// Server maintains shared state across multiple clients
-// Changes from one client propagate to all connected clients
-// Data models are server-authoritative
-// Client UI updates reflect server state changes
-```
+Data models can be shared within a single client instance, enabling synchronized UI controls.
 
 ## CSS Architecture and Styling
 
@@ -855,14 +839,7 @@ context.on('window-resize', e_resize => {
 ```javascript
 const checkbox = new Checkbox({
   context,
-  label: { text: 'Checkbox Label' },     // Label configuration
-  // Optional data binding
-  data: { model: booleanModel }          // Binds to boolean field
-});
-
-// Checkbox events
-checkbox.on('change', (checked) => {
-  // Handle checkbox state changes
+  label: { text: 'A checkbox' }
 });
 ```
 
@@ -872,20 +849,10 @@ checkbox.on('change', (checked) => {
 const tabbed_panel = new controls.Tabbed_Panel({
   context,
   tabs: [
-    // String-only tabs (content provided separately)
-    'Tab 1', 'Tab 2', 'Tab 3',
-    
-    // OR control-embedded tabs
-    ['Tab 1', controlInstance1],
-    ['Tab 2', controlInstance2],
-    ['Tab 3', controlInstance3]
+    ['tab 1', new Control({context, size: [250, 250], background: {color: '#553311'}})],
+    ['tab 2', new Control({context, size: [250, 250], background: {color: '#1177AA'}})]
   ]
 });
-
-// Tab switching events
-tabbed_panel.on('tab-changed', (tabIndex) => {
-  // Handle tab selection
-});
 ```
 
 ### Date_Picker Control
@@ -893,16 +860,7 @@ tabbed_panel.on('tab-changed', (tabIndex) => {
 ```javascript
 const date_picker = new Date_Picker({
   context,
-  data: { model: dateModel },            // Binds to date field
-  // Optional configuration
-  format: 'YYYY-MM-DD',                  // Date display format
-  minDate: new Date('2020-01-01'),       // Minimum selectable date
-  maxDate: new Date('2030-12-31')        // Maximum selectable date
-});
-
-// Date selection events
-date_picker.on('date-selected', (date) => {
-  // Handle date selection
+  data: { model: sharedDataModel }
 });
 ```
 
@@ -910,16 +868,7 @@ date_picker.on('date-selected', (date) => {
 
 ```javascript
 const month_view = new Month_View({
-  context,
-  // Optional configuration
-  showToday: true,                       // Highlight today's date
-  showWeekNumbers: false,                // Show week numbers
-  firstDayOfWeek: 0                      // 0=Sunday, 1=Monday, etc.
-});
-
-// Month navigation events
-month_view.on('month-changed', (year, month) => {
-  // Handle month navigation
+  context
 });
 ```
 

package/examples/controls/11b) window, shared Data_Object model mirrored text fields/client.js

@@ -418,8 +418,8 @@ class Demo_UI extends Active_HTML_Document {
                     // But then need to get them to reassign their data model change listeners....?
                     //   value change even....
 
-                    ti1.assign_data_model_value_change_handler();
-                    ti2.assign_data_model_value_change_handler();
+                    //ti1.assign_data_model_value_change_handler();
+                    //ti2.assign_data_model_value_change_handler();
 
 
                 }

package/examples/controls/11c) window, shared Data_Value model mirrored text fields/client.js

@@ -422,8 +422,8 @@ class Demo_UI extends Active_HTML_Document {
                     // But then need to get them to reassign their data model change listeners....?
                     //   value change even....
 
-                    ti1.assign_data_model_value_change_handler();
-                    ti2.assign_data_model_value_change_handler();
+                    //ti1.assign_data_model_value_change_handler();
+                    //ti2.assign_data_model_value_change_handler();
 
 
                 }

package/examples/controls/11d) window, shared model mirrored integer text fields/client.js

@@ -186,42 +186,7 @@ class Demo_UI extends Active_HTML_Document {
 
 
         const compose = () => {
-            // put 20 of them in place.
-
-            // Then how to arrange them...?
-
-
-            // Setting up the shared model in composition would be best....
-            //   Or maybe during init, pre-activate?
-
-            // This seems like it will need some lower level integration for ease of use.
-            //   Would like this to work server-side when setting properties, so should not rely on having this
-            //     in the 'activate' code.
-
-            // a 'model' property.
-            //  maybe two model properties: view.model, data.model.
-
-            // There could be a 'confirm / cancel' dialog when the view.model has been changed, and the view model can be updated
-
-            // Also, a single model could enable an undo history.
-
-            // app.data.model?
-            // context.data.model?
-
-            // context.view.model could make sense too, for representing the state of the app view (ie windows maximised, minimised, positions)
-            //   Could help when resuming the app at a later point, or transmitting the view of the app.
-            //   Maybe for collaborative editing, could operate like shared screen, or each user has control over their own windows.
-
-
-
-            // context.model?
-
-            // ctrl.view.model perhaps???
-            // ctrl.data.model = context.model perhaps?
-
-
-
-
+            
 
 
             const window = new controls.Window({
@@ -232,51 +197,6 @@ class Demo_UI extends Active_HTML_Document {
 
             window.size = [480, 160];
 
-            // Label text better propbably?
-
-            // .value
-
-            // .data.model = context.data.model
-
-
-            // set that 'value' to a data model ??? No.
-            //  set it's 'model' or 'data.model'.
-
-            // data.model for the moment will be best.
-            //   That is what we want to bind.
-            //   View model and data model pair could allow for 'cancel | OK' options to confirm changes.
-
-
-            // 'data_model' property.
-            // 'dmodel', 'dm' too...?
-            //  'vm' possibly?
-
-            // .v.m shorthand??
-            // .d.m too?
-
-
-
-            // or data: {model: obj_data_model}
-
-            // The data model persistance must not be tricky here.
-            //   Maybe setting it up at compose is not best???
-            //    Makes for the nicest syntax here, the 'magic' about jsgui is handing things over to the client
-            //    in a working way, auto-reconstructing things client-side.
-            //   Would need to send over info on which Data_Model would be used...
-
-
-            // The shared data model should mean that these fields automatically stay in sync (somewhat)
-            //   A shared view model would mean a more immediate sync.
-
-
-            // So Text_Field would need to look at data, data.model from the spec.
-
-            // Write the code in a few controls first, see what is in common and can be abstracted into a mixin
-            //  such as control-data-model-sync
-
-
-            // Would change the 'value' property by default.
-
             const ti1 = new Text_Field({
                 context,
 
@@ -296,23 +216,6 @@ class Demo_UI extends Active_HTML_Document {
 
             window.inner.add(ti1);
 
-            // Though not sure they get reconstructed with that data model?
-
-            // Want to make this easy for the app programmer to get right in particular.
-
-            // May need (much) more work on persisting the data model to the client.
-            //   Or defining it in a way / place so it can be started isomorphically.
-            //     Though it may make sense to do more to transfer models from the server to the client, with their data.
-            //       However, reconstructing models from the (values in) the DOM could make a lot of sense.
-            //       Having it read the DOM to create its DOM model, then from that its view.data model, then its data model.
-
-
-            
-
-
-
-
-
             const ti2 = new Text_Field({
                 context,
 
@@ -330,21 +233,6 @@ class Demo_UI extends Active_HTML_Document {
             window.inner.add(ti2);
 
             this.body.add(window);
-
-
-
-            // ._ctrl_fields should automatically be set up.
-            //   Also make it so when there are 0 entries in there it won't render the DOM attribute.
-
-            // First get the MVC properly and explicitly working accross some more controls.
-            //   If any abstractions come really easily then do that.
-            //     Maybe a DMVM_Control could be very effective soon.
-
-            // An 'adjuster' control could possibly have no 'data model' of its own.
-            // It could be set up to adjust either a data model, or a view model.
-
-            
-
             
             this._ctrl_fields = this._ctrl_fields || {};
             this._ctrl_fields.ti1 = ti1;
@@ -363,33 +251,6 @@ class Demo_UI extends Active_HTML_Document {
 
             console.log('activate Demo_UI');
 
-            //field(this.data.model, 'value');
-            // and events dealing with changes to those tis.
-
-            // ti1, ti2.
-
-            // Some kind of tracking of what the event initiator could help?
-            //   Automatically avoiding feedback somehow???
-            //     If it gets changed to its current value it does not push the change...?
-
-
-            // a non-dom change???
-            //   or basically .view.model.change even????
-
-            // ti1.view.model.on('change') could be much clearer, disambiguating it from a dom change event.
-            //  assign .view.model events ....?
-            //    doing this on a lower level would help.
-
-            // Just creating .view and .view.model objects (getters and setters specified) in jsgui3-html will help
-            // when referring to them.
-
-            // Maybe see about better reconstruction....
-
-            //console.log('ti1.data.model', ti1.data.model);
-            //console.log('ti2.data.model', ti2.data.model);
-
-            
-
             const activate_demo_ui_data_model = () => {
                 console.log('ti1.data.model === ti2.data.model', ti1.data.model === ti2.data.model);
 
@@ -416,8 +277,8 @@ class Demo_UI extends Active_HTML_Document {
                     // But then need to get them to reassign their data model change listeners....?
                     //   value change even....
 
-                    ti1.assign_data_model_value_change_handler();
-                    ti2.assign_data_model_value_change_handler();
+                    //ti1.assign_data_model_value_change_handler();
+                    //ti2.assign_data_model_value_change_handler();
 
 
                 }
@@ -425,131 +286,10 @@ class Demo_UI extends Active_HTML_Document {
 
             activate_demo_ui_data_model();
 
-            
-
-            // Create a new data_model (and view_model?) for both of them?
-            //   The view_model gets created by default and does not need to be shared (and should not be)
-
-
-
-
-
-            // ti1.value.on('change') ????
-            //   where the value is an Evented_Class or even Data_Object????
-            //    and where we can also get the value out of it easily / do so automatically, maybe within other useful functions.
-
-
-            // ti1.model.on('change') ????
-            //  or .view.model to be most specific for the moment...?
-            //   and raise those events within the controls on those .view.model objects.
-
-            // Maybe just try it on Text_Field for the moment.
-
-
-
-            // Need to work on having it update the dom with value changes....
-
-            const old_activate_changes = () => {
-
-                ti1.model.on('change', e => {
-                    //console.log('ti1 change e', e);
-
-
-                    if (e.property_name === 'value') {
-                        if (e.value !== e.old) {
-                            ti2.value = e.value;
-                        }
-                    }
-
-                    // setting ti2.view.model.value even????
-                    
-
-                    
-
-                })
-                ti2.model.on('change', e => {
-                    //console.log('ti2 change e', e);
-
-                    // 
-
-                    if (e.value !== e.old) {
-                        ti1.value = e.value;
-                    }
-
-                    
-                })
-            }
-
-            
-
-            // listen for change events.
-            //   would be nice to know which change events originated from the user interacting with that specific HTML element (or ctrl???)
-
-            // e.from_user === true test.
-
-            // e.user_initiated_on_this ????
-
-
-
-
-            //console.log('activate Demo_UI');
-            // listen for the context events regarding frames, changes, resizing.
-
-            context.on('window-resize', e_resize => {
-                
-                // Could see about having some window contents bound through CSS to the size of the window.
-                //   Though having a framework of adjusting CSS from the JS on-the-fly could work too.
-
-                // May be done with the 'bind' mixin, or will make more specific mixins to do things like bind
-                //   a control to the space within another control, space within a specific part of that control.
-
-                // Or bind to parent size. That should be possible with CSS though.
-                //   May make some controls make more use of CSS by default
-                //   Or having an absolutely positioned box model used extensively could avoid some ambiguity, though
-                //     making use of and supporting generally respected CSS features will help too.
-
-                //console.log('window-resize', e_resize);
-
-                // Make all internal controls go absolute in terms of position
-                //   Remove them from their containers too?
-                //   Ie their containing divs?
-
-                // Would be nice to do this really simple with a fn call or very simple piece of code.
-                // Like get absolute position, set position to be absolute, move to that position.
-                // Maybe something within jsgui3-client helps with this, this is more about what needs to be done on the client.
-                //   Though recognising perf implications, it's (more) OK to include client-side functionality in jsgui3-html.
-
-
-
-
-
-
-            });
-
         }
     }
 }
 
-// Include this in bundling.
-//  Want CSS bundling so that styles are read out from the JS document and compiled to a stylesheet.
-
-//controls.Demo_UI = Demo_UI;
-
-// A css file may be an easier way to get started...?
-//  Want to support but not require css in js.
-
-// But need to set up the serving of the CSS both on the server, and on the client.
-//  Ofc setting it up on the server first is important - then can that stage set it up in the doc sent to the client?
-
-// Including the CSS from the JS like before.
-//  Needs to extract the CSS and serve it as a separate CSS file.
-//  Should also have end-to-end regression tests so this does not break again in the future.
-//   The code was kind of clunky and got refactored away.
-//   
-
-// Would need to parse the JS files to extract the CSS.
-//  Maybe could do it an easier way??? Now that it's easy, want a faster way.
-
 
 Demo_UI.css = `
 
@@ -564,6 +304,34 @@ body {
     background-color: #E0E0E0;
 }
 
+
+.window .relative .inner {
+    padding: 0.38em;}
+
+
+.window .relative .inner .text-field {
+    margin-top: 0.125em;
+    margin-bottom: 0.125em;
+    display: flex;
+    }
+
+.window .relative .inner .text-field label{
+    display: block;
+    width: 1.085em;
+    }
+
+    
+
+
+.window .relative .inner .text-field .left {
+    margin-right: 0.125em;
+    }
+
+.window .relative .inner .text-field .right {
+    margin-left: 0.125em;
+    }
+
+
 .demo-ui {
     
     /* 
@@ -581,31 +349,6 @@ body {
 }
 `;
 
-// But may want to remove them from that flex upon picking up / dropping them.
-//  Maybe best upon drop.
-
-// Maybe want other examples that use absolute positioning to position the items at the start?
-// 
-
-
-
-//controls.Square_Box = Square_Box;
-// could export jsgui with the updated controls....
-//  so that they are in the correct Page Context.?
-
 
 controls.Demo_UI = Demo_UI;
-
 module.exports = jsgui;
-
-/*
-module.exports = {
-    Square_Box: Square_Box,
-    Demo_UI: Demo_UI
-}
-*/
-
-// Then if window...?
-
-// Need to add the Square_Box control to the context or original map of controls...
-

package/examples/controls/2) two windows/client.js

@@ -63,6 +63,28 @@ class Demo_UI extends Active_HTML_Document {
 
             // Then how to arrange them...?
 
+            const num_windows = 2
+            let [x, y] = [40, 40];
+
+            // pos property?
+            //. consider a pos_info or pos_details property, or use another class to help with it.
+
+            // the .pos property would be a nice shortcut.
+            //.  seems more like it's for enhanced controls? Not sure.
+
+
+            for (let c = 1; c <= num_windows; c++) {
+                const window = new controls.Window({
+                    context: context,
+                    title: c + ') jsgui3-html Window Control',
+                    pos: [x, y]
+                })
+                this.body.add(window);
+
+                x += 0; y += 80;
+            }
+
+            /*
             const window_1 = new controls.Window({
                 context: context,
                 title: '1) jsgui3-html Window Control'
@@ -74,6 +96,7 @@ class Demo_UI extends Active_HTML_Document {
                 title: '2) jsgui3-html Window Control'
             })
             this.body.add(window_2);
+            */
 
 
         }

package/examples/controls/2) two windows/server.js

@@ -4,78 +4,9 @@ const {Demo_UI} = jsgui.controls;
 const Server = require('../../../server');
 
 
-// what would be the (best?) way to include the whole thing in one JS file?
-//  Maybe don't try that right now.
-//  maybe standardise on the dir, then client.js and server.js inside.
-
-
-
-// Want to exclude this from the client bundle.
-//  Some kind of marking to say that it's server-side only?
-
-// Need to include JSGUI3 js within the client document.
-//   Seems like an earlier code simplification removed this functionality?
-//   Just specifying a Ctrl for the server - and giving it the 'disk_path_client_js'.
-//     May as well fix that....
-
-
-
-
 
 if (require.main === module) {
 
-    // By default should include the JS and the CSS.
-    // By reference, serving them from their respective paths.
-
-
-    // This API is not working right now.
-
-    // A very simple syntax for running a single control would be great.
-
-    // Need to in the default (server) configuration build and serve the client-side app.
-    // Want to be able to make interactive apps quickly with minimal server side code that needs to be written as boilerplate to
-    // get the app running.
-
-    // Though maybe defining a webpage, that serves the client js, and renders the control on the server, and activates it on the client,
-    // would be the right approach.
-
-    // Want to make the code really explicit, in a simple way.
-
-
-    // eg { '/': Demo_UI }
-    // eg { '*': Demo_UI }
-    //  as at least it explicitly assigns it to the '/' route
-
-
-    // But worth keeping the '/' Ctrl property?
-    //  Could change it to explicitly setting the route(s).
-
-    // Do want it to build the client js on start.
-
-    // Could extract the CSS from the file itself, or maybe better reading it from the classes and objects that are loaded / referenced.
-    // All kinds of complex server program structures exist already, so could use Publishers if needed for some things.
-    //  But need to keep the surface-level API really simple.
-
-    // Maybe define a Webpage and maybe use / define an HTML_Webpage_Publisher for example too.
-    // The clearest code would be really explicit about what it does, but in terms of almost English idioms
-    //  and on the surface-level not spelling out in great detail what it's doing, but referencing objects and
-    //  instructions with clear purposes, though details could be obscure at the top level. Eg it's the publisher's responsibility
-    //  to include the CSS and JS that's needed to get it to run. A publisher is referenced and used, and it does its thing.
-
-    // The Server could automatically involk the use of a Publisher.
-    //  May be better to either require or recommend more explicit code, have them in the examples,
-    //  but also to document some shortcuts, defaults, and abbreviations (though they may omit some essential info, so not recommended for beginners)
-
-    // Could have a tabbed view for examples for 'explicit' and 'short' notations when there are multiple.
-
-    // jsgui3-html-suite may be of use, for some more extended controls that are built on top of jsgui3-html, but not specifically
-    // client or server.
-
-
-
-
-
-
     const server = new Server({
         Ctrl: Demo_UI,
         // Giving it the Ctrl and disk path client js should enable to server to get the JS-bundled CSS from the file(s).

package/examples/controls/8) window, checkbox/{client.js → a)/client.js }

@@ -2,7 +2,7 @@ const jsgui = require('jsgui3-client');
 const { controls, Control, mixins } = jsgui;
 const { dragable } = mixins;
 const { Checkbox } = controls;
-const Active_HTML_Document = require('../../../controls/Active_HTML_Document');
+const Active_HTML_Document = require('../../../../controls/Active_HTML_Document');
 class Demo_UI extends Active_HTML_Document {
   constructor(spec = {}) {
     spec.__type_name = spec.__type_name || 'demo_ui';

package/examples/controls/8) window, checkbox/{server.js → a)/server.js }

@@ -1,7 +1,7 @@
 const jsgui = require('./client');
 
 const {Demo_UI} = jsgui.controls;
-const Server = require('../../../server');
+const Server = require('../../../../server');
 
 
 // what would be the (best?) way to include the whole thing in one JS file?

package/examples/controls/8) window, checkbox/b)/client.js

@@ -0,0 +1,36 @@
+const jsgui = require('jsgui3-client');
+const { controls, Control, mixins } = jsgui;
+const { dragable } = mixins;
+const { Checkbox } = controls;
+const Active_HTML_Document = require('../../../../controls/Active_HTML_Document');
+class Demo_UI extends Active_HTML_Document {
+  constructor(spec = {}) {
+    spec.__type_name = spec.__type_name || 'demo_ui';
+    super(spec); const { context } = this;
+    if (typeof this.body.add_class === 'function') { this.body.add_class('demo-ui'); }
+    const compose = () => {
+      // Compose window with a checkbox control
+      const window = new controls.Window({ context, title: 'jsgui3-html Checkbox Control', pos: [10,10] });
+      const checkbox = new Checkbox({ context, label: { text: 'A checkbox' } });
+      const st_ind = new controls.Status_Indicator({ context });
+      st_ind.data.model = (checkbox.data.model);
+      // Special handling code for setting a data model?
+      window.inner.add(checkbox); window.inner.add(st_ind); this.body.add(window);
+    };
+    if (!spec.el) { compose(); }
+  }
+  activate() {
+    if (!this.__active) {
+      super.activate(); const { context } = this;
+      // Handle window resize events
+      context.on('window-resize', e_resize => { });
+    }
+  }
+}
+Demo_UI.css = `
+* { margin: 0; padding: 0; }
+body { overflow-x: hidden; overflow-y: hidden; background-color: #E0E0E0; }
+.demo-ui { /* display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 100vh; */ }
+`;
+controls.Demo_UI = Demo_UI; module.exports = jsgui;
+

package/examples/controls/8) window, checkbox/b)/server.js

@@ -0,0 +1,36 @@
+const jsgui = require('./client');
+
+const {Demo_UI} = jsgui.controls;
+const Server = require('../../../../server');
+
+if (require.main === module) {
+
+    const server = new Server({
+        Ctrl: Demo_UI,
+        //debug: true,
+        // Giving it the Ctrl and disk path client js should enable to server to get the JS-bundled CSS from the file(s).
+        //  Putting the JS files through proper parsing and into a syntax tree would be best.
+
+        //'js_mode': 'debug',
+        'src_path_client_js': require.resolve('./client.js'),
+        //debug: true // should not minify the js, should include the symbols.
+        //js_client: require.resolve('./square_box.js')
+    });
+    
+    console.log('waiting for server ready event');
+    server.on('ready', () => {
+        console.log('server ready');
+
+        // server start will change to observable?
+
+        server.start(52000, function (err, cb_start) {
+            if (err) {
+                throw err;
+            } else {
+                // Should have build it by now...
+    
+                console.log('server started');
+            }
+        });
+    })
+}

package/examples/controls/9b) window, shared data.model mirrored date pickers/client.js

@@ -49,8 +49,8 @@ class Demo_UI extends Active_HTML_Document {
         field(dm, 'value');
         date_picker_1.data.model = dm; 
         date_picker_2.data.model = dm;
-        date_picker_1.assign_data_model_value_change_handler();
-        date_picker_2.assign_data_model_value_change_handler();
+        //date_picker_1.assign_data_model_value_change_handler();
+        //date_picker_2.assign_data_model_value_change_handler();
       }
       context.on('window-resize', e_resize => { });
     }

package/package.json

@@ -10,8 +10,8 @@
     "esbuild": "^0.25.5",
     "fnl": "^0.0.36",
     "fnlfs": "^0.0.33",
-    "jsgui3-client": "^0.0.115",
-    "jsgui3-html": "^0.0.162",
+    "jsgui3-client": "^0.0.117",
+    "jsgui3-html": "^0.0.163",
     "jsgui3-webpage": "^0.0.8",
     "jsgui3-website": "^0.0.8",
     "lang-tools": "^0.0.36",
@@ -38,5 +38,5 @@
     "type": "git",
     "url": "https://github.com/metabench/jsgui3-server.git"
   },
-  "version": "0.0.126"
+  "version": "0.0.128"
 }