jsgui3-server 0.0.89 → 0.0.90

package/bundler/css-bundler.js

@@ -9,6 +9,8 @@ const stream_to_array = require('stream-to-array');
 const util = require('util');
 const Stream = require('stream');
 // Will put the JS together. Maybe images?
+const fs = require('fs');
+const path = require('path');
 
 const JS_AST_Node = require('./../resources/jsbuilder/JS_AST/JS_AST_Node');
 
@@ -35,16 +37,31 @@ const JS_AST_Node = require('./../resources/jsbuilder/JS_AST/JS_AST_Node');
 //  maybe scan an AST or AST stream as it's coming in.
 
 
+// Needs to be able to copy / access the basic.css from jsgui3-html.
+//  Maybe be able to find them on disk.
+
+// Streaming does seem like the best meachanism for loading data etc.
+
+
+const stream_html_basic_css = () => {
+    const css_file_path = path.join(path.dirname(require.resolve('jsgui3-html')), 'css', 'basic.css');
+    console.log('css_file_path', css_file_path);
+
+    const res_stream = fs.createReadStream(css_file_path);
+
+    return res_stream;
+
+}
 
 const bundle_css_from_js_str = (js_str, options = {}) => {
 
-    console.log('js_str.length', js_str.length);
+    //console.log('js_str.length', js_str.length);
     // Moving towards using observables as a matter of course for longer-running functions.
 
     // Seems like this makes a settimeout as well???
     return obs((next, complete, error) => {
 
-        console.log('js_str.length', js_str.length);
+        //console.log('js_str.length', js_str.length);
 
         // Returning a Bundle object when done could be best...?
 
@@ -54,15 +71,15 @@ const bundle_css_from_js_str = (js_str, options = {}) => {
 
         const js_ast_node = JS_AST_Node.from_spec(spec);
 
-        console.log('!!js_ast_node', !!js_ast_node);
+        //console.log('!!js_ast_node', !!js_ast_node);
 
-        console.log('Object.keys(js_ast_node)', Object.keys(js_ast_node));
+        //console.log('Object.keys(js_ast_node)', Object.keys(js_ast_node));
 
         // count all
 
         //console.log('js_ast_node.query("count all")', js_ast_node.query("count all"));
 
-        console.log('js_ast_node.query.count.all.exe()', js_ast_node.query.count.all.exe());
+        //console.log('js_ast_node.query.count.all.exe()', js_ast_node.query.count.all.exe());
 
         // A filter iterate query....? filter_deep_iterate could work.
         //  but we are looking specifically for 'ClassName.css'
@@ -142,7 +159,7 @@ const bundle_css_from_js_str = (js_str, options = {}) => {
                 //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);
+                //console.log('tl.source', tl.source);
                 arr_css.push(tl.source);
 
 
@@ -157,10 +174,6 @@ const bundle_css_from_js_str = (js_str, options = {}) => {
             complete();
         }
 
-
-
-
-
         
         // Can then do query to get all .css properties that are string templates.
         //  is it a property of a Class object?
@@ -195,4 +208,5 @@ class CSS_Bundler extends Bundler {
 }
 
 CSS_Bundler.bundle_css_from_js_str = bundle_css_from_js_str;
+CSS_Bundler.stream_html_basic_css = stream_html_basic_css;
 module.exports = CSS_Bundler;

package/bundler/webpage-bundler.js

@@ -3,7 +3,7 @@ const Bundler = require('./bundler');
 const JS_Bundler = require('./js-bundler');
 const CSS_Bundler = require('./css-bundler');
 
-const {bundle_css_from_js_str} = CSS_Bundler;
+const {bundle_css_from_js_str, stream_html_basic_css} = CSS_Bundler;
 
 const Bundle = require('./bundle');
 const {obs, prom_or_cb} = require('fnl');
@@ -46,6 +46,40 @@ const stream_to_array = require('stream-to-array');
 const {bundle_js} = JS_Bundler;
 
 
+// Observable to load the basic CSS, or return it.
+
+
+const get_basic_css_content_obj = () => {
+    return obs((next, complete, error) => {
+
+        const s_css = stream_html_basic_css();
+
+        const chunks = [];
+        let buf_css;
+
+        s_css.once('end', () => {
+            // create the final data Buffer from data chunks;
+            buf_css = Buffer.concat(chunks);
+            complete({
+                'value': buf_css,
+                'content-type': 'text/css'
+            });
+            
+            // Of course, you can do anything else you need to here, like emit an event!
+        });
+        
+        // Data is flushed from fileStream in chunks,
+        // this callback will be executed for each chunk
+        s_css.on('data', (chunk) => {
+            chunks.push(chunk); // push data chunk to array
+        
+            // We can perform actions on the partial data we have so far!
+        });
+
+    });
+}
+
+
 const bundle_web_page = (webpage, options = {}) => {
     const {content} = webpage;
     //console.log('bundle web page');
@@ -85,8 +119,16 @@ const bundle_web_page = (webpage, options = {}) => {
         const res = new Bundle();
 
 
+        
+
+
         (async () => {
 
+            const o_basic_css = await get_basic_css_content_obj();
+            //console.log('o_css', o_css);
+            //console.log('t_content', t_content);
+            //throw 'stop';
+
             if (t_content === 'string') {
                 // Hardly anything to bundle. No JS required, so it seems.
                 // Maybe put it inside a basic JSGUI page control...?
@@ -327,9 +369,6 @@ const bundle_web_page = (webpage, options = {}) => {
                                 'babel': 'debug'
                             });
 
-
-
-
                             obs_bundle.on('next', data => {
                                 //console.log('next data', data);
                                 console.log('next Object.keys(data)', Object.keys(data));
@@ -361,14 +400,16 @@ const bundle_web_page = (webpage, options = {}) => {
                                             if (tof(obs_css_from_js_res) === 'string') {
                                                 // should be added to the page bundle.
 
+                                                const basic_and_app_css = Buffer.concat([o_basic_css.value, Buffer.from(obs_css_from_js_res)]);
+
                                                 res.push({
                                                     'path': webpage.path + 'css/app.css',
-                                                    'value': Buffer.from(obs_css_from_js_res),
+                                                    'value': basic_and_app_css,
                                                     'content-type': 'text/css'
                                                 });
 
                                                 waiting_for_css_extraction = false;
-                                                console.log('obs_css_from_js complete');
+                                                //console.log('obs_css_from_js complete');
 
                                                 if (handle_css_extraction_complete) {
                                                     handle_css_extraction_complete();
@@ -502,8 +543,9 @@ const bundle_web_page = (webpage, options = {}) => {
             }
         })().catch(err => {
             console.trace();
+            console.log('err', err);
 
-            throw 'err';
+            throw err;
             //console.error(err);
         });
 

package/examples/color_palette.js

@@ -0,0 +1,52 @@
+const jsgui = require('./color_palette_client');
+
+const {Demo_UI} = 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?
+
+// Autoresizing within the color palette not working properly.
+//  Should do more work on a grid that deals with the autoresizing properly.
+
+
+
+
+if (require.main === module) {
+    
+    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',
+        'disk_path_client_js': require.resolve('./color_palette_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(8080, function (err, cb_start) {
+            if (err) {
+                throw err;
+            } else {
+                // Should have build it by now...
+    
+                console.log('server started');
+            }
+        });
+    })
+
+    
+
+}

package/examples/color_palette_client.js

@@ -0,0 +1,95 @@
+const jsgui = require('jsgui3-client'); // and will replace this with jsgui-client, I presume.
+
+const {controls, Control, mixins} = jsgui;
+const { Color_Palette } = controls;
+const {dragable} = mixins;
+
+// Relies on extracting CSS from JS files.
+
+class Demo_UI extends Control {
+    constructor(spec) {
+        spec.__type_name = spec.__type_name || 'demo_ui';
+        super(spec);
+        const {context} = this;
+        this.add_class('demo-ui');
+
+        const compose = () => {
+
+            // Have it resize itself to fit the available space it has?
+            // mixin resize-to-fit-space possibly.
+            //  would measure the space available in its parent control or container.
+
+
+
+
+            const pal = new Color_Palette({
+                context: context
+            })
+            this.add(pal);
+        }
+        if (!spec.el) {
+            compose();
+        }
+    }
+    activate() {
+        if (!this.__active) {
+            super.activate();
+            const {context} = this;
+
+            console.log('activate color_palette 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;
+Demo_UI.css = `
+.demo-ui {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+}
+
+
+.demo-ui .cell {
+    height: 24px;
+    width: 24px;
+}
+`;
+
+// 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/package.json

@@ -13,8 +13,8 @@
     "cookies": "^0.8.0",
     "fnl": "^0.0.22",
     "fnlfs": "^0.0.25",
-    "jsgui3-client": "^0.0.71",
-    "jsgui3-html": "0.0.98",
+    "jsgui3-client": "^0.0.72",
+    "jsgui3-html": "0.0.99",
     "multiparty": "^4.2.3",
     "ncp": "^2.0.0",
     "obext": "0.0.24",
@@ -40,5 +40,5 @@
     "type": "git",
     "url": "https://github.com/metabench/jsgui3-server.git"
   },
-  "version": "0.0.89"
+  "version": "0.0.90"
 }