jsgui3-server 0.0.96 → 0.0.97

package/examples/box/square_box.js

@@ -17,7 +17,58 @@ const Server = require('../../server');
 
 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).
@@ -25,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 {
+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/package.json

@@ -3,21 +3,24 @@
   "main": "module.js",
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/generator": "^7.22.9",
-    "@babel/parser": "7.22.7",
+    "@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.25",
-    "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.96"
+  "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?
 /*
 

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

@@ -7,8 +7,13 @@ const {each, Router, tof} = require('jsgui3-html');
 const HTTP_Publisher = require('./http-publisher');
 const {obs} = require('fnl');
 
-const Webpage_Bundler = require('./../bundler/webpage-bundler');
-const Bundle = require('./../bundler/bundle');
+// The Webpage bundler should be able to come up with the compiled JS and CSS, maybe even a favicon.
+
+
+const Website = require('jsgui3-website');
+
+const Webpage_Bundler = require('../resources/processors/bundlers/webpage-bundler');
+const Bundle = require('../resources/processors/bundlers/bundle');
 
 // Now it's the very basics of a website publisher. Quite flexible but could do with more.
 //  Better integration with bundler
@@ -28,22 +33,93 @@ const Bundle = require('./../bundler/bundle');
 // This seems more like the server router these days
 //  The main server router seems to pass everything to this - maybe that will change.
 
+// Maybe give it some kind of Website_Server????
+
+// Have the Website_Server use the Website_Publisher????
+
+// Need to somewhat separate concerns.
+
+// Publisher here could be simple in terms of bundling, and then giving the paths to the router.
+//   And could have really simple code implementation of doing just that.
+
+// This basically can be simple....
+//   But make the classes' structures more complicated where necessary to accommodate.
+
+
+// Could be just a few lines of logic probably, at least the simplest core implementation.
+
+// Think the server or the website already has a router, so have the website resource's router do the routing.
+//   Maybe upgrade the routers to handle premade (compressed) responses.
+
+// Maybe better to bundle and publish resources.
+// resource-processors in its own dir?
+//   as in it's not actually part of resources?
+
+
+
+
+// Need to basically make this do very little.
+
+// Publish (website, server_router)
+
+
+// Or publish it only under some URLs / domains....?
+
+
+
+
+
+
+
+
+
+
+
 class HTTP_Website_Publisher extends HTTP_Publisher {
     // Website generally serves JS from a single address.
     //  Webpage could have its specific JS.
 
+
+    // Maybe the Publisher should not have its own router?
+    //  But it provides items with paths from bundles it gets made to the website server's router.
+
+    // Def looks like its worth rearchitecturing this to provide more consistency on the lower level, and a 'just works' simplicity
+    //   on the higher level.
+
+    // Plus some base classes that themselves don't do all that much, and then subclasses of them that do things in specific
+    //  ways, so that implementations of specific parts are interchangable.
+
+
+
+
+
     constructor(spec = {}) {
         super(spec)
         // A website property.
 
         let website;
-        if (spec.website) website = spec.website;
+        if (spec.website) {
+            if (spec.website instanceof Website) {
+                website = spec.website;
+            } else {
+                console.trace();
+                throw 'Expected spec.website to be of type "jsgui3-website" class instance';
+            }
+        } 
         Object.defineProperty(this, 'website', {
             get() {
                 return website;
             }
         });
 
+        // The publisher should not have a router (for the moment???)
+        //   It should however determine routes, and provide them to the router.
+
+        // Creating a Published_Website object perhaps.
+
+
+        /*
+
         let router = new Router();
         Object.defineProperty(this, 'router', {
             get() {
@@ -51,6 +127,14 @@ class HTTP_Website_Publisher extends HTTP_Publisher {
             }
         });
 
+        */
+
+
+
+        // Disk path client js being a property of the website itself?
+        //   Critical overall functionality, dont want to remove it from here for the moment. See if not critical here.
+
+
         let disk_path_client_js;
         if (spec.disk_path_client_js) disk_path_client_js = spec.disk_path_client_js;
         Object.defineProperty(this, 'disk_path_client_js', {
@@ -58,19 +142,108 @@ class HTTP_Website_Publisher extends HTTP_Publisher {
                 return disk_path_client_js;
             }
         });
+
+
+
         // And this could be an observable too.
         // May get admin pages working on a slightly lower level.
         //  Makes sense as they are for administering other pages (mostly).
-        console.log('http-website-publisher disk_path_client_js', disk_path_client_js);
+
+
+        //console.log('http-website-publisher disk_path_client_js', disk_path_client_js);
+
+
+
         //throw 'stop';
         // This could be an observable that acts sequentially and async.
 
-        const setup_website_publishing = (website) => {
+        // See about moving specific complexity elsewhere....
+        //  See if what the website publisher does can be summed up expressively in JS.
+
+        // Uses a builder / packager on the website.
+        // Keeps track of a little bit of data on what's been published (could have an observable status event)
+        // Tells the server to publish it (on specified URL / Route - specified where? Defaults? Interchangable systems of default URLS paths?)
+
+
+        // But make this async (obs as well?)
+        // Have a sequence of events that takes place.
+        // Use the correct specific classes to do the correct specific things.
+        //   Then make sure the implementations are correct.
+
+
+
+
+
+
+
+
+
+
+        const __old__setup_website_publishing = (website) => {
+
+
+            // Split up the bundling and response serving responsibilities.
+            //  Should put it through the router (more as normal) when published.
+            //   Maybe I'll need another 100 classes for this to work, maybe not, but should make everything explicit, but also concise,
+            //   and then work on abbreviations and (unambiguous) shorthands.
+            // Or even settings for what the (default) shorthands do.
+
+
+            // Bundle it - Get some package(bundle) of pages.
+
+            // Website_Bundle perhaps...?
+            //  All the static assets put together.
+            //    Pages that don't have dynamic content are pre-rendered and compressed.
+
+
+
+            
+
+            // 1)   Bundle
+            // 2)   Publish that bundle
+            // 2a)    Provide the router with all the necessary URLs and (compressed) pregenerated responses from that bundle.
+
+
+            // Website_Bundle_Publisher perhaps....?
+
+            // Def seems worth it to refactor it into still more complicated classes, but to aim for really simple and concise code within
+            //  those classes, at least when it comes to a simple and intuitive API that represents what is going on.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
             //console.log('website', website);
             //console.log('website.pages', website.pages);
             //console.log('website.pages.length()', website.pages.length());
             //throw 'stop';
 
+            // This is currently really inflexible for a website with multiple pages.
+            //  Pages could be given names.
+            //  Don't want to be too prescriptive here, but do want to get this bundling and working.
+
+            // Do want to get it right in theory and in structure for a variety of possibilities.
+
+            // Should pay more attention to setting up the headers on the responses.
+
+
+
+
+
+
+
             // should the website have a 'main' or 'front' or 'first' page, with it having its HTML rendered?
             return obs((next, complete, error) => {
                 (async () => {
@@ -133,9 +306,6 @@ class HTTP_Website_Publisher extends HTTP_Publisher {
 
                                 //console.trace();
                                 //throw 'stop';
-
-
-
                                 complete(obs_bundling_res);
                             } else {
 
@@ -283,12 +453,63 @@ class HTTP_Website_Publisher extends HTTP_Publisher {
             
             //throw 'NYI';
         }
+
+
         if (website) {
+
+
+            console.trace();
+
+            throw 'NYI - HTTP_Website_Publisher needs to publish specified website';
+
+
+            // Website_Bundle class would help.
+
+            // jsgui3-website-bundle.
+            //  Could make a separate module for it, give it a very simple API.
+            //    Probably would only want to bundle websites on the server though.
+
+
+            
+
+
+
+
+
+
+            // Prepare website for publishing
+            // Prepare being building static resources, making a list of the static routes / page content to serve.
+            //   Static_Route_Content clases somewhere too.
+
+
+            // Use many different class names to help keep track of what the objects do, and allow for flexibility.
+
+
+
+            // Then the type of the website....
+            // Do make use of runtime polymorphism and type checking.
+
+
+
+
+
+
+
+
+
+            /*
+
             const obs_setup = setup_website_publishing(website);
+
+
             obs_setup.on('complete', res_complete => {
                 console.log('setup complete');
                 this.raise('ready');
+
+
             })
+
+            */
         } else {
             this.raise('ready');
         }
@@ -310,10 +531,21 @@ class HTTP_Website_Publisher extends HTTP_Publisher {
         // .build?
 
     }
+
+
     handle_http(req, res) {
+        // Because it's already been set up in the router! It should have been.
+        return this.router.process(req, res);
+
         // Called from a different context? Doubt we want that.
         // Now called strangely, without context.
 
+
+        // The router does it all...???
+        
+
+        /*
+
         const {website, router} = this;
 
         //console.log('HTTP_Website_Publisher handle_http');
@@ -336,6 +568,11 @@ class HTTP_Website_Publisher extends HTTP_Publisher {
         //console.log('this', this);
         //console.trace();
         router.process(req, res);
+
+        */
+
+
+
         // can then get the port from after the : in the host.
         //router.set_route(url,)
 

package/{publishing → publishers}/notes.md

@@ -3,4 +3,7 @@ May need to work without all the HTML and Control things for some applications.
 
 Will have more of an abundance of mid-level HTTP publishing code.
 
+Want to avoid getting bogged down in this when publishing / serving a simple site or page.
+Though this can be used, it could operate with default configurations, and provide functionality that gets used as needed during the process.
+