jsgui3-server 0.0.95 → 0.0.97

package/examples/box/square_box.js

@@ -3,10 +3,72 @@ const jsgui = require('./square_box_client');
 const {Demo_UI, Square_Box} = jsgui.controls;
 const Server = require('../../server');
 
+
+
 // 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).
@@ -14,7 +76,7 @@ if (require.main === module) {
 
 
         //'js_mode': 'debug',
-        'disk_path_client_js': require.resolve('./square_box_client.js')
+        'src_path_client_js': require.resolve('./square_box_client.js')
         //js_client: require.resolve('./square_box.js')
     });
     // A callback or event for when the bundling has been completed

package/examples/box/square_box_client.js

@@ -2,20 +2,33 @@ 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.
+
+
+
+
 // Relies on extracting CSS from JS files.
 
-class Demo_UI extends Control {
-    constructor(spec) {
+class Demo_UI extends Active_HTML_Document {
+    constructor(spec = {}) {
         spec.__type_name = spec.__type_name || 'demo_ui';
         super(spec);
         const {context} = this;
-        this.add_class('demo-ui');
+
+        // Make sure it requires the correct CSS.
+        //  Though making that 'effortless' on the server may help more.
+
+
+
+        this.body.add_class('demo-ui');
 
         const compose = () => {
             const box = new Square_Box({
                 context: context
             })
-            this.add(box);
+            this.body.add(box);
         }
         if (!spec.el) {
             compose();
@@ -41,6 +54,30 @@ class Demo_UI extends Control {
 //  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;
@@ -69,7 +106,7 @@ class Square_Box extends Control {
             
             console.log('dragable mixin applied to square');
             this.dragable = true;
-            console.log('this.dragable = true;');
+            //console.log('this.dragable = true;');
 
             this.on('dragend', e => {
                 console.log('square box dragend e', e);

package/examples/boxes/square_boxes_client.js

@@ -41,7 +41,7 @@ Square_Box.css = `
 // Relies on extracting CSS from JS files.
 
 class Demo_UI extends Control {
-    constructor(spec) {
+    constructor(spec = {}) {
         spec.__type_name = spec.__type_name || 'demo_ui';
         super(spec);
         const {context} = this;

package/package.json

@@ -3,21 +3,24 @@
   "main": "module.js",
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.20.5",
-    "@babel/generator": "^7.20.5",
-    "@babel/parser": "7.20.5",
+    "@babel/core": "^7.22.20",
+    "@babel/generator": "^7.22.15",
+    "@babel/parser": "7.22.16",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-minify": "^0.5.2",
     "browserify": "17.0.0",
     "child-process": "^1.0.2",
     "cookies": "^0.8.0",
-    "fnl": "^0.0.23",
-    "fnlfs": "^0.0.27",
-    "jsgui3-client": "^0.0.75",
+    "esbuild": "^0.19.3",
+    "fnl": "^0.0.27",
+    "fnlfs": "^0.0.28",
+    "jsgui3-client": "^0.0.79",
+    "jsgui3-webpage": "^0.0.3",
+    "jsgui3-website": "^0.0.3",
     
     "multiparty": "^4.2.3",
     "ncp": "^2.0.0",
-    "obext": "0.0.24",
+    "obext": "^0.0.25",
     "rimraf": "^3.0.2",
     "stream-to-array": "^2.3.0",
     "url-parse": "^1.5.10"
@@ -41,5 +44,5 @@
     "type": "git",
     "url": "https://github.com/metabench/jsgui3-server.git"
   },
-  "version": "0.0.95"
+  "version": "0.0.97"
 }

package/publishers/http-js-publisher.js

@@ -0,0 +1,136 @@
+
+
+// Publishes the HTML format.
+
+
+const HTTP_Publisher = require('./http-publisher');
+
+// This part will process the requests and responses, not the JS resource itself.
+
+
+
+class HTTP_JS_Publisher extends HTTP_Publisher {
+    constructor(spec) {
+
+        // Should probably take one or more JS Resources.
+
+
+
+        super(spec);
+    }
+
+    // Will publish HTML documents over HTTP, but seems as though it would need to be configured / called with
+    //  something to render as well as a rendering engine and parameters.
+
+    // compilation = rendering? not exactly.
+
+    // handle_http()
+
+	'handle_http'(req, res) {
+
+		// Will the resource itself process the requests? Maybe only the Resource Publisher should do that.
+		//  A greater level of abstraction there, more splitting of responsibilities.
+
+
+
+
+
+		console.log('HTTP_JS_Publisher processing req.url', req.url);
+		var remoteAddress = req.connection.remoteAddress;
+		var custom_paths = this.custom_paths;
+		var rurl = req.url.replace(/\./g, '☺');
+		var custom_response_entry = custom_paths[rurl];
+		var pool = this.pool;
+		if (custom_response_entry) {
+			const ae = req.headers['accept-encoding'];
+			let data_to_serve;
+			let o_head = {
+				'Content-Type': 'text/javascript'
+			}
+			if (ae.includes('gzip')) {
+				o_head['Content-Encoding'] = 'gzip';
+				data_to_serve = custom_response_entry._.gzip;
+			} else {
+				data_to_serve = custom_response_entry._.raw;
+			}
+			res.writeHead(200, o_head);
+			res.end(data_to_serve);
+		} else {
+			//var served_directories = this.served_directories;
+			//console.log('served_directories', served_directories);
+			var url_parts = url.parse(req.url, true);
+			//console.log('url_parts ' + stringify(url_parts));
+			var splitPath = url_parts.path.substr(1).split('/');
+
+			var wildcard_value = req.params.wildcard_value;
+			//console.log('*** wildcard_value', wildcard_value);
+
+			if (wildcard_value == 'web/require.js') {
+
+			} else {
+				var disk_path = path.dirname(require.main.filename) + '/' + 'js/' + wildcard_value;
+				var compress = false;
+
+
+				//console.log('disk_path', disk_path);
+
+				if (compress) {
+					throw 'NYI with Babel';
+
+				} else {
+					// try to load it from the project's js path.
+					//console.log('disk_path', disk_path);
+					var project_js_path = 'js/' + wildcard_value;
+					//console.log('project_js_path', project_js_path);
+
+					fs2.load_file_as_string(disk_path, function (err, str_js) {
+						if (err) {
+							console.log('error loading from project_js_path: ', project_js_path);
+							console.log(err);
+						} else {
+							// Have loaded the js from the project path, we can serve it.
+							console.log('have loaded js');
+							// serve the js.
+
+
+							//res.writeHead(200, {'Content-Type': 'text/javascript'});
+							// Could possibly stream it from disk instead, that would likely be more efficient.
+							console.log('str_js.length', str_js.length);
+
+
+							// use gzip in many cases.
+							// want to support that.
+
+							// a streaming middleware fn could work...?
+
+							zlib.deflate(str_js, function (err, buffer) {
+								console.log('deflated buffer.length', buffer.length);
+
+
+								if (err) throw err;
+								res.writeHead(200, {
+									'Content-Encoding': 'deflate',
+									'Content-Type': 'text/javascript'
+								});
+								res.end(buffer);
+								//res.writeHead(200, {'Content-Type': 'text/javascript'});
+								//response.end(servableJs);
+								//res.end(minified.code);
+							});
+
+
+							//response.end(servableJs);
+							//res.end(str_js);
+							//throw 'stop';
+						}
+					})
+				}
+			}
+		}
+	}
+
+
+
+}
+
+module.exports = HTTP_JS_Publisher;

package/{publishing → publishers}/http-webpage-publisher.js

@@ -1,3 +1,11 @@
+// Want to get it (back) working as a server easily serving simple controls and pages and sites.
+// Need to tame some of the more complex layers inside it to get it to easily serve the app.
+// Then should work on making / improving some of the specific controls.
+// Make the code idiomatic and DRY. The more complex lower and middle level abstractions will help with that.
+// Use polymorphism and run-time checks to allow for some more flexibility.
+
+
+
 
 
 // A publisher handles HTTP requests.
@@ -9,6 +17,14 @@
 const HTTP_Publisher = require('./http-publisher');
 const {obs} = require('fnl');
 
+// May want / need to more carefully and specifically define APIs.
+// It's nice to have classes for specific things like this, but need to make them do what is needed.
+//  Maybe get a 'Website' object or control ready to be served.
+//  
+
+
+
+
 // Named observables?
 /*
 
@@ -48,12 +64,23 @@ obs((next, complete, error) => {
 //     
 
 
+// Should include or use various other publishers, such as html or js?
 
 
 class HTTP_Webpage_Publisher extends HTTP_Publisher {
 
     // Website generally serves JS from a single address.
     //  Webpage could have its specific JS.
+    //  This component may need to handle the JS building.
+    //  webpage-bundler within the 'bundler' directory.
+
+    // But not sure if babel or esbuild is better here.
+    //   Babel has obviously improved since I had to switch to esbuild years ago.
+    //   Being able to use either would help.
+
+
+
+
 
     constructor(spec = {}) {
         super(spec)