jsgui3-server 0.0.98 → 0.0.100

package/resources/processors/extractors/js/css_and_js/AST_Node/CSS_And_JS_From_JS_String_Using_AST_Node_Extractor.js

@@ -0,0 +1,239 @@
+
+
+// Extract the CSS and JS from JS, using AST_Node.
+//   AST_Node is part of jsgui3-server, possibly too slow though.
+
+const {obs, prom_or_cb} = require('fnl');
+const {tof, each} = require('jsgui3-html');
+
+
+const JS_AST_Node = require('../../../../../jsbuilder/JS_AST/JS_AST_Node');
+const Extractor = require('../../../Extractor');
+
+const Pos_Span_String_Extractor = require('../../../string/Pos_Span_String_Extractor');
+
+// Seems like a really specific and JS-AST aware algorithm.
+//   The JS AST parsing (single thread JS, maybe inefficient class structure) is relatively slow, but much faster than Babel compilation
+//   was / is.
+
+// const String_Pos_Spans_Remover = ....
+
+// Really specifically named and categorised classes will be a main feature of this part of the (Server) architecture.
+
+
+
+
+
+
+// But also being able to recreate the AST without the CSS will help.
+
+// This extraction extracts parts from the JS file that directly are CSS.
+//   I don't think at the moment it does anything further than that - though want it to remove all the declarations of CSS
+//   from the JS and return that JS.
+
+// See about removing the nodes from the tree....
+
+class CSS_And_JS_From_JS_String_Using_AST_Node_Extractor extends Extractor {
+    constructor(spec) {
+        super(spec);
+
+        this.pos_span_string_extractor = new Pos_Span_String_Extractor();
+    }
+
+    extract(str_js) {
+        const {pos_span_string_extractor} = this;
+
+        const js_str = str_js;
+        return obs((next, complete, error) => {
+            const spec = {
+                source: js_str
+            };
+
+            // This part is kind-of slow.
+
+            console.log('pre create js ast node');
+            const js_ast_node = JS_AST_Node.from_spec(spec);
+            console.log('post create js ast node');
+            
+            //const ae_nodes = [];
+
+            const arr_pos_spans_css_js_nodes = [];  // will remove them from the JS that's built / published.
+
+
+
+
+            // Just assigning a template literal to .css?
+            const css_ae_nodes = [];
+
+            // How about removing those parts from the JS AST?
+
+            
+
+            js_ast_node.deep_iterate(node => {
+
+                const {start, end} = node.babel;
+
+                // Maybe this part is slow? Don't think so though.
+
+                //console.log('node', node);
+                //console.log('Object.keys(node)', Object.keys(node));
+                //console.log('node.type_signature', node.type_signature);
+                //console.log('node.signature', node.signature);
+                //console.log('node.type', node.type);
+                //console.log('node.abbreviated_type', node.abbreviated_type);
+
+                if (node.type === 'AssignmentExpression') {
+                    //return true;
+                    //ae_nodes.push(node);
+                    //console.log('node.source', node.source);
+                    
+                    //console.log('Object.keys(node.babel)', Object.keys(node.babel));
+
+                    //console.log('node.child_nodes.length', node.child_nodes.length);
+
+                    const [node_assigned_to, node_assigned] = node.child_nodes;
+                    //console.log('node_assigned_to.source', node_assigned_to.source);
+                    //console.log('node_assigned_to.type', node_assigned_to.type);
+                    //console.log('node_assigned.type', node_assigned.type);
+
+                    if (node_assigned.type === 'TemplateLiteral') {
+
+                        if (node_assigned_to.type === 'MemberExpression') {
+
+                            //console.log('node_assigned_to', node_assigned_to);
+
+                            // the last ID being .css?
+                            const last_me_child = node_assigned_to.child_nodes[node_assigned_to.child_nodes.length - 1];
+                            //console.log('last_me_child', last_me_child);
+                            //console.log('last_me_child.source', last_me_child.source);
+
+                            if (last_me_child.source === 'css') {
+                                css_ae_nodes.push(node);
+
+                                //console.log('[start, end]', [start, end]);
+                                //console.log('node.source:\n' + node.source + '\n');
+
+                                arr_pos_spans_css_js_nodes.push([start, end]);
+
+                            }
+
+                            // does it end '.css'?
+                            //  break it down further?
+
+                        }
+
+                        ///console.log('node.source', node.source);
+                        //throw 'stop';
+
+                    }
+
+                    //console.log('');
+                    // look at the left part...
+                }
+
+                //throw 'stop';
+            });
+            //console.log('ae_nodes', ae_nodes);
+            //console.log('ae_nodes.length', ae_nodes.length);
+            //console.log('css_ae_nodes.length', css_ae_nodes.length);
+
+            const arr_css = [];
+
+            if (css_ae_nodes.length > 0) {
+                //console.log('css_ae_nodes', css_ae_nodes);
+
+                each(css_ae_nodes, css_ae_node => {
+                    //console.log('css_ae_node.source', css_ae_node.source);
+
+
+                    const tl = css_ae_node.child_nodes[1].child_nodes[0];
+
+
+                    //console.log('tl', tl);
+                    //console.log('tl.source', tl.source);
+                    arr_css.push(tl.source);
+
+
+                })
+            }
+
+            if (arr_css.length > 0) {
+
+
+                // Needs to also return the JS, without the CSS.
+
+
+
+
+                const str_css = arr_css.join('\n');
+
+                //console.log('arr_pos_spans_css_js_nodes', arr_pos_spans_css_js_nodes);
+
+                // Then see about removing the inverse of them from the original string.
+
+                const str_js_without_css_assignments = pos_span_string_extractor.extract(js_str, arr_pos_spans_css_js_nodes, {invert: true});
+
+
+                //console.log('str_js_without_css_assignments', str_js_without_css_assignments);
+                //console.log('str_js_without_css_assignments.length', str_js_without_css_assignments.length);
+
+
+                // return an array perhaps?
+                // object with keys may be easier / better / simpler.
+                //  or even a Bundle object?
+
+                const res = {
+                    css: str_css,
+                    js: str_js_without_css_assignments
+                }
+
+
+
+
+                //console.trace();
+                //throw 'stop';
+
+
+
+
+                complete(res);
+            } else {
+                complete();
+            }
+
+            
+            // Can then do query to get all .css properties that are string templates.
+            //  is it a property of a Class object?
+
+
+
+
+
+            // Need to get an AST from it....
+            //  Or could simply search (regex?) for .css = `...`?
+
+
+
+
+            // Go through each file? Just the first?
+
+            // Or should the whole bundled (browserified) JS be consulted?
+
+            const [stop, pause, resume] = [() => {}, () => {}, () => {}];
+            return [stop, pause, resume];
+
+        });
+
+    }
+
+    // Then extract by giving it a JS string?
+    // A file path???
+
+
+
+
+
+
+}
+
+module.exports = CSS_And_JS_From_JS_String_Using_AST_Node_Extractor;

package/resources/processors/extractors/js/css_and_js/CSS_And_JS_From_JS_String_Extractor.js

@@ -0,0 +1,4 @@
+const CSS_And_JS_From_JS_String_Using_AST_Node_Extractor = require('./AST_Node/CSS_And_JS_From_JS_String_Using_AST_Node_Extractor');
+
+
+module.exports = CSS_And_JS_From_JS_String_Using_AST_Node_Extractor;

package/resources/processors/extractors/string/Pos_Span_String_Extractor.js

@@ -0,0 +1,94 @@
+const Extractor = require('../Extractor');
+
+const invert_arr_pos_spans = (arr_pos_spans, str_len) => {
+
+
+    // Create the array of inverted ones...
+    //  The one before the first.
+    //  The gaps between each of them.
+    //  The one after the last.
+
+    const res = [];
+
+    if (arr_pos_spans.length === 0) {
+        res.push([0, str_len]);
+    } else {
+
+        if (arr_pos_spans[0][0] > 0) {
+            res.push([0, arr_pos_spans[0][0]]);
+        } else {
+
+        }
+
+
+
+        if (arr_pos_spans.length > 1) {
+            // there are gaps
+
+            let i = 0;
+            // while there are remaining ones...?
+
+            for (i = 0; i < arr_pos_spans.length - 1; i++) {
+                res.push([arr_pos_spans[i][1], arr_pos_spans[i+1][0]])
+            }
+            //console.log('i', i);
+            res.push([arr_pos_spans[i][1], str_len])
+
+
+
+        } else if (arr_pos_spans.length === 1) {
+            res.push([arr_pos_spans[0][1], str_len])
+        }
+
+
+
+        
+
+
+    }
+
+    
+
+
+
+    return res;
+
+
+
+
+}
+
+class Pos_Span_String_Extractor extends Extractor {
+    constructor(spec) {
+        super(spec);
+    }
+    extract(str, arr_pos_spans, options = {}) {
+
+        // Possibly invert the arr_pos_spans
+
+        if (options.invert){
+            arr_pos_spans = invert_arr_pos_spans(arr_pos_spans, str.length);
+
+            console.log('inverted arr_pos_spans', arr_pos_spans);
+        }
+
+        let arr_str_res = [];
+
+        // getting the strings within the arr_pos_spans....
+
+        const n_spans = arr_pos_spans.length;
+        for (let c = 0; c < n_spans; c++) {
+            const pos_span = arr_pos_spans[c];
+            arr_str_res.push(str.substring(pos_span[0], pos_span[1]));
+            
+        }
+
+        const str_res = arr_str_res.join('');
+        return str_res;
+
+        // Create a new span
+
+    }
+}
+
+module.exports = Pos_Span_String_Extractor;

package/server.js

@@ -33,7 +33,7 @@ const HTTP_Webpage_Publisher = require('./publishers/http-webpage-publisher');
 //  Multi_Single_Process_Server_Coordinater_Server ???
 
 
-
+const Static_Route_HTTP_Responder = require('./http/responders/static/Static_Route_HTTP_Responder');
 
 
 class JSGUI_Single_Process_Server extends Evented_Class {
@@ -50,6 +50,11 @@ class JSGUI_Single_Process_Server extends Evented_Class {
 			disk_path_client_js = spec.source_path_client_js;
 		};
 
+
+		if (spec.debug !== undefined) {
+			this.debug = spec.debug;
+		}
+
 		// or src_path_client_js as well...
 
 		Object.defineProperty(this, 'disk_path_client_js', {get: () => disk_path_client_js, set: (value) => disk_path_client_js = value});
@@ -89,6 +94,8 @@ class JSGUI_Single_Process_Server extends Evented_Class {
 
 		// Seems like a decent mechanism already in here at the moment, but may want to make the API more powerful and flexible.
 
+		// A single Ctrl that represents a page (could a Ctrl represent a site too? Could be possible with a bit of work.)
+
 
 		
 		if (Ctrl) {
@@ -161,12 +168,22 @@ class JSGUI_Single_Process_Server extends Evented_Class {
 
 			const opts_wp_publisher = {
 				'webpage': wp_app
+
 			};
 
+			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;
+
 			
 
 			// HTTP_Webpage_Publisher probably needs to build the JavaScript. Possibly other assets too.
 			const wp_publisher = new HTTP_Webpage_Publisher(opts_wp_publisher);
+			// Specific options for when that publisher is in debug mode.
+
+
 			console.log('waiting for wp_publisher ready');
 
 			// Server can (maybe just in theory) serve multiple websites at once.
@@ -175,24 +192,188 @@ class JSGUI_Single_Process_Server extends Evented_Class {
 			//    Then does the website resource contain a lot of its own resources, in a pool???
 
 
+			// The publisher should (probably) set things up with the server itself....
+			//   Give the publisher access to the server.
+			//   Or access to a more limited number of functions that the publisher can call.
+
+			// So the Publisher itself finds the Server Router and sets up routes on it, but uses very specific classes to help do that.
+
+			// Maybe Http_Publisher on a lower level could put together headers and do compression.
+			//   This part will be a little more like Express (and other) middleware.
+
+			// http_publisher.publish_static_content_to_routes
+			// .publish_static_bundle_to_routes
 
 
-			wp_publisher.on('ready', () => {
+
+
+
+
+
+
+
+			wp_publisher.on('ready', (wp_ready_res) => {
 				console.log('wp publisher is ready');
 
+				// The ready res on complete(res) ???
+				//   But the ready event does not (easily) carry this object.
+
+
+				//console.log('wp_ready_res', wp_ready_res);
+
+				// then go through the array....
+
+				if (wp_ready_res._arr) {
+
+
+					for (const bundle_item of wp_ready_res._arr) {
+						//console.log('Object.keys(bundle_item)', Object.keys(bundle_item));
 
+						
 
-				const wp_resource = new Website_Resource({
+						const {type, extension, text, route, response_buffers, response_headers} = bundle_item;
+						//console.log('');
+						//console.log('bundle_item route:', route);
+						//console.log('bundle_item type:', type);
+
+						const bundle_item_http_responder = new Static_Route_HTTP_Responder(bundle_item);
+
+						//console.log('bundle_item_http_responder.handle_http', bundle_item_http_responder.handle_http);
+
+						// So set_route needs to set it up with the proper context for the handle_http call.
+						//   At least it looks fairly close to being solved, though maybe Router and Routing tree
+						//     should have comprehensive fixes and improvements.
+
+
+
+						server_router.set_route(route, bundle_item_http_responder, bundle_item_http_responder.handle_http);
+
+
+					}
+	
+					//console.trace();
+					//throw 'stop';
+
+				} else {
+					console.trace();
+					throw 'NYI';
+				}
+
+				// But do we get a bundle from it when ready?
+				//  Maybe it should provide that bundle in the 'ready' event.
+
+
+
+
+				const ws_resource = new Website_Resource({
 					'name': 'Website_Resource - Single Webpage',
 					'webpage': wp_app
 				});
-				resource_pool.add(wp_resource);
-				server_router.set_route('/', wp_publisher, wp_publisher.handle_http);
+				resource_pool.add(ws_resource);
+
+				// 
+
+
+				// Possibly set multiple routes here, with multiple response buffers depending on the encoding-type
+				//  accepted by the client.
+
+				// Seems best not to rely on the Webpage_Publisher to handle the HTTP.
+				//   Better for the Publisher to create the Bundle that is ready to serve, than provide that
+				//   to the Server here, or maybe to something else.
+
+				// Seems best to get that ready to serve static bundle from the publisher,
+				//  and if it helps use some kind of system to set up some more details with the server router...?
+
+				// Initial_Response_Handler perhaps?
+
+				// Webpage_HTTP_Response_Handler?
+
+				// Static_Webpage_HTTP_Response_Handler???
+
+				// Static_Webpage_Bundle_HTTP_Response_Handler ???
+
+				// Static_Webpage_Bundle_HTTP_Route_Response_Handler ????
+
+
+				// Static_Webpage_Bundle_HTTP_Route_Responder ???
+
+				// new Static_Webpage_Bundle_HTTP_Route_Responder(bundle_item)
+
+
+
+
+				// Static_Webpage_Bundle_HTTP_Responder ??? (would do routing / route checking itself perhaps?)
+				//   Seems like for the moment we should continue to use the server router.
+
+
+
+
+				// Need to decide which encoded (compressed) buffer to return depending
+				//   on what Content-Type(s) are supported on the client.
+
+
+
+
+				// Very explicit class names make the responsibilities very clear.
+
+				// Static_Route_HTTP_Responder seems best to provide the handle_http function.
+				//   Even after routing a decision needs to be made regarding which buffer to send to the client
+				//     Should be the last thing needed to get this simple square box demo server working properly.
+				//     Hopefully the client-side activation still works fine.
+
+
+
+				// HTTP_Responder class and subclasses???
+				//   Could be a helpful type of middleware.
+				//   Want to have it handle creating or using the correct compressed buffer.
+
+				// go through the array of bundle items....
+
+
+				// Need the bundle object / array here.
+				//   Would be nice to have the bundle itself hold info on what's inside.
+				//     Incl what packaging stage it is at, how ready to serve.
+
+				// Though possible one object could handle the whole static bundle setup with the router...?
+
+				// The code in a loop should be simple enough here though.
+
+
+
+
+
+
+
+
+				// Set the routes of the various items in the bundle (and use the handlers provided by class
+				//   instance objects that specifically provide HTTP handlers)
+
+
+				// Should be the very last part of serving the HTTP for this particular server type.
+
+
+
+
+
+				
+
+
+
+
+
+				//server_router.set_route('/', wp_publisher, wp_publisher.handle_http);
+
+
 				this.raise('ready');
 			});
 
 
 		} else {
+
+			// Ahhh the web page publisher may be used instead of the website publisher.
+			//   See about making use of relevant shared abstractions.
+
+
 			const ws_app = this.app = new Website(opts_website);
 			// Be able to treat Webpage as an app?
 
@@ -297,6 +478,8 @@ JSGUI_Single_Process_Server.Page_Context = Server_Page_Context;
 JSGUI_Single_Process_Server.Server_Page_Context = Server_Page_Context;
 JSGUI_Single_Process_Server.Website_Resource = Website_Resource;
 module.exports = JSGUI_Single_Process_Server;
+
+
 if (require.main === module) {
 	const args = process.argv.slice(2);
 	let port = 80;

package/static-page-context.js

@@ -0,0 +1,14 @@
+const Server_Page_Context = require('./page-context');
+
+
+class Server_Static_Page_Context extends Server_Page_Context {
+	constructor(spec = {}) {
+		//spec = spec || {};
+		super(spec);
+
+
+    }
+
+}
+
+module.exports = Server_Static_Page_Context;

package/examples/box/box.css

@@ -1,8 +0,0 @@
-.demo-ui {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    min-height: 100vh;
-}