jsgui3-server 0.0.123 → 0.0.124

package/examples/box/1) square box/server.js

@@ -1,6 +1,6 @@
 const jsgui = require('./client');
 
-const {Demo_UI, Square_Box} = jsgui.controls;
+const {Demo_UI} = jsgui.controls;
 const Server = require('../../../server');
 
 
@@ -97,7 +97,7 @@ if (require.main === module) {
 
         // server start will change to observable?
 
-        server.start(8080, function (err, cb_start) {
+        server.start(52000, function (err, cb_start) {
             if (err) {
                 throw err;
             } else {

package/examples/box/3) twenty selectable square boxes/css flex wrap/client.js

@@ -76,37 +76,12 @@ class Square_Box extends Control {
             */
 
             selectable(this);
-            console.log('selectable mixin applied to square box');
+            console.log('selectable mixin applied to square box on activation');
             this.selectable = true;
             // Maybe should turn on selectable by default?
             //   Though mixins may be best to add functionality rather than add and enable it always.
 
-            //this.selectable = true;
             
-            
-            
-            //console.log('this.dragable = true;');
-
-            this.on('dragend', e => {
-                this.background.color = '#44FF44';
-                const bcr = this.bcr();
-                const absolutise_position = () => {
-                    const style = this.dom.attributes.style;
-                    // but need to move it to the body....
-                    // But then when it's in absolute position the dragable mixin needs to support it and not mess up...
-
-                    style.position = 'absolute';
-                    style.left = bcr[0][0];
-                    style.top = bcr[0][1];
-                    style.transform = 'none';
-                    // Much better if these lines were not needed. Should be able to set these ta translate x and y values once the
-                    //   style transform gets set.
-                    this.ta[6] = 0; // This ta system may be a good and fast way to set translations, should not need to
-                    // use it when using a higher level api though.
-                    this.ta[7] = 0;
-                }
-                absolutise_position();
-            });
         }
     }
 }

package/examples/box/4) twenty composition selectable square boxes/css flex wrap/client.js

@@ -0,0 +1,151 @@
+const jsgui = require('jsgui3-client');
+const {controls, Control, mixins} = jsgui;
+const {dragable, selectable} = mixins;
+
+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');
+        }
+
+        // Persistant view ui properties.
+        //   So that may be automated in a MVC+ type way.
+
+        // so in the compositional phase (including on the server) it will be able to set up the view properties.
+
+        // Composition to Active persistance.
+
+        // Make the dom attributes within the view model even?
+        //   Or not, as they are a layer that carries the view model to the client.
+
+        // .view.data.model.mixins perhaps.
+        //    would be a collection of some sort.
+
+        // view.data.model.mixins.add('selectable');
+        //   or it's a Data_Object? A Collection makes more sense in some ways.
+
+
+        // And the mixins part of that data model will specifically get persisted (rendered and activated).
+
+
+
+
+
+
+        const compose = () => {
+            const n = 20;
+            for (let c = 0; c < n; c++) {
+                const box = new Square_Box({
+                    context: context
+                })
+                selectable(box);
+                box.selectable = true;
+
+                // box.view.model.data.mixins
+
+                // set up .selectable as a persistable field?
+                //   seems like more in-depth work on persistance of view data model would make most sense here.
+                //     with selectable ideally being / becoming a property of the view data model.
+
+                // Will also need to persist mixin data that refers to (other) controls.
+                //   Should try this next with a dragable mixin that uses another control as a handle.
+                //     
+
+                // Though selectable should support a handle as well.
+
+
+
+
+
+                //box.selectable = true;
+
+
+                this.body.add(box);
+            }
+        }
+        if (!spec.el) {
+            compose();
+        }
+    }
+    activate() {
+        if (!this.__active) {
+            super.activate();
+            const {context} = this;
+
+            //console.log('activate Demo_UI');
+
+            context.on('window-resize', e_resize => {
+                //console.log('window-resize', e_resize);
+
+            });
+        }
+    }
+}
+Demo_UI.css = `
+
+body {
+    margin: 0;
+}
+
+.demo-ui {
+    display: flex;
+    flex-wrap: wrap;
+    /* flex-direction: column; */
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+}
+`;
+
+class Square_Box extends Control {
+    constructor(spec) {
+        spec.__type_name = spec.__type_name || 'square_box';
+        super(spec);
+        this.add_class('square-box');
+    }
+    activate() {
+        if (!this.__active) {
+            super.activate();
+            //console.log('Activate square box');
+            //console.log('this.selectable', this.selectable);
+
+
+            // Could this have been set up in advance?
+            //   Seems like deeper work on UI state and property persistance would help with this.
+
+            // But want to make .selectable persist from composition to the active control.
+
+            //   May be best to set up and automate persistant view.data.model fields.
+
+
+
+
+
+            //this.selectable = true;
+
+        }
+    }
+}
+Square_Box.css = `
+.square-box {
+    box-sizing: border-box;
+    background-color: #BB3333;
+    width: 80px;
+    height: 80px;
+}
+.square-box.selected {
+    background-color: #3333BB;
+    border: 3px solid #000;
+}
+`;
+
+controls.Demo_UI = Demo_UI;
+controls.Square_Box = Square_Box;
+
+module.exports = jsgui;

package/examples/box/4) twenty composition selectable square boxes/css flex wrap/server.js

@@ -0,0 +1,39 @@
+const jsgui = require('./client');
+
+const {Demo_UI, Square_Box} = jsgui.controls;
+const Server = require('../../../../server');
+
+if (require.main === module) {
+    
+    const server = new Server({
+        Ctrl: Demo_UI,
+        debug: true,
+
+
+        //'js_mode': 'debug',
+        'src_path_client_js': require.resolve('./client.js')
+        //js_client: require.resolve('./square_box.js')
+    });
+    // A callback or event for when the bundling has been completed
+    //  a 'ready' event.
+
+    // then start the server....
+    // be able to choose the port / ports?
+    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/box/5) square box compositional dragable/client.js

@@ -0,0 +1,204 @@
+const jsgui = require('jsgui3-client');
+const {controls, Control, mixins} = jsgui;
+const {dragable} = mixins;
+
+const Active_HTML_Document = require('../../../controls/Active_HTML_Document');
+
+// Maybe better to include it within an Active_HTML_Document.
+
+// Is currently a decent demo of a small active control running from the server, activated on the client.
+//   This square box is really simple, and it demonstrates the principle of the code for the draggable square box not being all that complex
+//   compared to a description of it.
+
+// A container with reorderable internal draggable items could help.
+
+// would be nice to be able to have all code in 1 file...???
+//  Though the sever code should be separate.
+
+
+
+
+
+
+// Relies on extracting CSS from JS files.
+
+class Demo_UI extends Active_HTML_Document {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'demo_ui';
+        super(spec);
+        const {context} = this;
+
+        // Make sure it requires the correct CSS.
+        //  Though making that 'effortless' on the server may help more.
+
+
+        // Maybe can't do this here???
+
+        // Does not have .body (yet) on the client.
+        //   simple way to get the client to attach the body of the Active_HTML_Document?
+        //     maybe with jsgui-data-controls?
+        //   Though automatically having the .body property available on the client without sending extra HTTP
+        //     plumbing will help.
+
+        // .body will not be available before activation.
+
+
+        // .body should not be a normal function....?
+        //   a getter function would be better.
+
+
+
+        if (typeof this.body.add_class === 'function') {
+            this.body.add_class('demo-ui');
+        }
+
+        //console.log('this.body', this.body);
+        //console.log('this.body.add_class', this.body.add_class);
+
+
+        const compose = () => {
+            const box = new Square_Box({
+                context: context
+            });
+
+            
+            dragable(box);
+            box.dragable = true;
+            
+
+            this.body.add(box);
+        }
+        if (!spec.el) {
+            compose();
+        }
+    }
+    activate() {
+        if (!this.__active) {
+            super.activate();
+            const {context} = this;
+
+            //console.log('activate Demo_UI');
+            // listen for the context events regarding frames, changes, resizing.
+
+            context.on('window-resize', e_resize => {
+                //console.log('window-resize', e_resize);
+            });
+
+        }
+    }
+}
+
+// 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???
+
+
+
+
+
+
+
+
+
+Demo_UI.css = `
+.demo-ui {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+}
+`;
+
+class Square_Box extends Control {
+    constructor(spec) {
+        spec.__type_name = spec.__type_name || 'square_box';
+        super(spec);
+        this.add_class('square-box');
+    }
+    activate() {
+        if (!this.__active) {
+            super.activate();
+            console.log('Activate square box');
+
+
+            // Seems like drag mode translate is necessary for the moment.
+            //   Will want to persist the mixin options when rendering on the server to use on the client.
+
+            const activation_apply_mx = () => {
+                dragable(this, {
+                    drag_mode: 'translate'
+                });
+                
+                console.log('dragable mixin applied to square box on activation');
+                this.dragable = true;
+                //console.log('this.dragable = true;');
+            }
+
+            
+
+            this.on('dragend', e => {
+                console.log('square box dragend e', e);
+                //this.background.color = '#FF4444';
+                //this.color = '#FF4444';
+                this.dom.el.style.backgroundColor = '#FF4444';
+                
+
+                // this.background.color perhaps?
+            });
+
+            
+
+        }
+    }
+}
+Square_Box.css = `
+.square-box {
+    background-color: #BB3333;
+    width: 220px;
+    height: 220px;
+}
+`;
+
+// then if running on the client...?
+
+
+
+//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;
+controls.Square_Box = Square_Box;
+
+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/box/5) square box compositional dragable/server.js

@@ -0,0 +1,113 @@
+const jsgui = require('./client');
+
+const {Demo_UI, Square_Box} = 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).
+        //  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')
+        //js_client: require.resolve('./square_box.js')
+    });
+    // A callback or event for when the bundling has been completed
+    //  a 'ready' event.
+
+    // then start the server....
+    // be able to choose the port / ports?
+    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/boxes/square_boxes.js

@@ -30,7 +30,7 @@ if (require.main === module) {
 
         // server start will change to observable?
 
-        server.start(8080, function (err, cb_start) {
+        server.start(52000, function (err, cb_start) {
             if (err) {
                 throw err;
             } else {

package/examples/color_palette.js

@@ -36,7 +36,7 @@ if (require.main === module) {
 
         // server start will change to observable?
 
-        server.start(8080, function (err, cb_start) {
+        server.start(52000, function (err, cb_start) {
             if (err) {
                 throw err;
             } else {

package/examples/controls/1) window/server.js

@@ -102,7 +102,7 @@ if (require.main === module) {
 
         // server start will change to observable?
 
-        server.start(8080, function (err, cb_start) {
+        server.start(52000, function (err, cb_start) {
             if (err) {
                 throw err;
             } else {

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

@@ -102,7 +102,7 @@ if (require.main === module) {
 
         // server start will change to observable?
 
-        server.start(8080, function (err, cb_start) {
+        server.start(52000, function (err, cb_start) {
             if (err) {
                 throw err;
             } else {

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

@@ -102,7 +102,7 @@ if (require.main === module) {
 
         // server start will change to observable?
 
-        server.start(8080, function (err, cb_start) {
+        server.start(52000, function (err, cb_start) {
             if (err) {
                 throw err;
             } else {

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

@@ -119,7 +119,7 @@ if (require.main === module) {
 
         // server start will change to observable?
 
-        server.start(8080, function (err, cb_start) {
+        server.start(52000, function (err, cb_start) {
             if (err) {
                 throw err;
             } else {

package/examples/controls/13) window, Dropdown_Menu control/client.js

@@ -14,7 +14,7 @@ class Demo_UI extends Active_HTML_Document {
         const compose = () => {
             const window = new controls.Window({
                 context: context,
-                title: 'jsgui3-html Select_Options',
+                title: 'jsgui3-html Dropdown_Menu',
                 pos: [5, 5]
             });
             window.size = [480, 160];

package/examples/controls/13) window, Dropdown_Menu control/server.js

@@ -4,6 +4,7 @@ const Server = require('../../../server');
 if (require.main === module) {
     const server = new Server({
         Ctrl: Demo_UI,
+        debug: true,
         'src_path_client_js': require.resolve('./client.js'),
     });
     console.log('waiting for server ready event');

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

@@ -98,7 +98,7 @@ if (require.main === module) {
 
         // server start will change to observable?
 
-        server.start(8080, function (err, cb_start) {
+        server.start(52000, function (err, cb_start) {
             if (err) {
                 throw err;
             } else {

package/examples/controls/3) five windows/server.js

@@ -101,7 +101,7 @@ if (require.main === module) {
 
         // server start will change to observable?
 
-        server.start(8080, function (err, cb_start) {
+        server.start(52000, function (err, cb_start) {
             if (err) {
                 throw err;
             } else {

package/examples/controls/7) window, month_view/client.js

@@ -1,21 +1,17 @@
 const jsgui = require('jsgui3-client');
-const { controls, Control, mixins } = jsgui;
-const { dragable } = mixins;
-const { Month_View } = controls;
+const {controls, Control, mixins} = jsgui;
+const {dragable} = mixins;
+const {Month_View} = 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;
+        const {context} = this;
         if (typeof this.body.add_class === 'function') { this.body.add_class('demo-ui'); }
         const compose = () => {
-            const window = new controls.Window({
-                context: context,
-                title: 'jsgui3-html Grid Control',
-                pos: [10, 10]
-            });
-            const month_view = new Month_View({ context });
+            const window = new controls.Window({ context: context, title: 'jsgui3-html Grid Control', pos: [10, 10] });
+            const month_view = new Month_View({ context, });
             window.inner.add(month_view);
             this.body.add(window);
         }
@@ -27,14 +23,25 @@ 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; */
-}`;
+    /* 
+    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/server.js

@@ -102,7 +102,7 @@ if (require.main === module) {
 
         // server start will change to observable?
 
-        server.start(8080, function (err, cb_start) {
+        server.start(52000, function (err, cb_start) {
             if (err) {
                 throw err;
             } else {

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

@@ -102,7 +102,7 @@ if (require.main === module) {
 
         // server start will change to observable?
 
-        server.start(8080, function (err, cb_start) {
+        server.start(52000, function (err, cb_start) {
             if (err) {
                 throw err;
             } else {

package/examples/grids/grid_1.js

@@ -30,7 +30,7 @@ if (require.main === module) {
 
         // server start will change to observable?
 
-        server.start(8080, function (err, cb_start) {
+        server.start(52000, function (err, cb_start) {
             if (err) {
                 throw err;
             } else {

package/examples/introducing jsgui3/server.js

@@ -54,7 +54,7 @@ if (require.main === module) {
 
         // server start will change to observable?
 
-        server.start(8080, function (err, cb_start) {
+        server.start(52000, function (err, cb_start) {
             if (err) {
                 throw err;
             } else {

package/examples/mx_display/mx_display_1.js

@@ -30,7 +30,7 @@ if (require.main === module) {
 
         // server start will change to observable?
 
-        server.start(8080, function (err, cb_start) {
+        server.start(52000, function (err, cb_start) {
             if (err) {
                 throw err;
             } else {

package/package.json

@@ -3,18 +3,18 @@
   "main": "module.js",
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.26.9",
-    "@babel/generator": "^7.26.9",
-    "@babel/parser": "7.26.9",
+    "@babel/core": "^7.26.10",
+    "@babel/generator": "^7.26.10",
+    "@babel/parser": "7.26.10",
     "cookies": "^0.9.1",
-    "esbuild": "^0.25.0",
+    "esbuild": "^0.25.1",
     "fnl": "^0.0.36",
     "fnlfs": "^0.0.32",
-    "jsgui3-client": "^0.0.112",
-    "jsgui3-html": "^0.0.156",
+    "jsgui3-client": "^0.0.113",
+    "jsgui3-html": "^0.0.159",
     "jsgui3-webpage": "^0.0.8",
     "jsgui3-website": "^0.0.8",
-    "lang-tools": "^0.0.35",
+    "lang-tools": "^0.0.36",
     "multiparty": "^4.2.3",
     "ncp": "^2.0.0",
     "obext": "^0.0.31",
@@ -38,5 +38,5 @@
     "type": "git",
     "url": "https://github.com/metabench/jsgui3-server.git"
   },
-  "version": "0.0.123"
+  "version": "0.0.124"
 }

package/page-context.js

@@ -73,6 +73,7 @@ class Server_Page_Context extends jsgui.Page_Context {
 			return res;
 		}
 		this.new_id = _get_new_typed_object_id;
+		this.mixins = jsgui.mixins;
 	}
 	'get_dtd'() {
 		if (this.rendering_mode === 'html5') {