jsgui3-server 0.0.83 → 0.0.86

package/bundler/bundle.js

@@ -1,5 +1,13 @@
 // Could make this a Collection?
 
+// jsgui3-bundle possibly?
+//  Could save the whole thing as a ZIP file, or in-memory buffer in ZIP format?
+
+
+
+
+
+
 const {Collection} = require('jsgui3-html');
 
 class Bundle extends Collection {

package/bundler/css-bundler.js

@@ -0,0 +1,198 @@
+const Bundler = require('./bundler');
+const Bundle = require('./bundle');
+const {obs, prom_or_cb} = require('fnl');
+const {tof, each} = require('jsgui3-html');
+const fnlfs = require('fnlfs');
+const browserify = require('browserify');
+const babel = require('@babel/core');
+const stream_to_array = require('stream-to-array');
+const util = require('util');
+const Stream = require('stream');
+// Will put the JS together. Maybe images?
+
+const JS_AST_Node = require('./../resources/jsbuilder/JS_AST/JS_AST_Node');
+
+// Will put the JS together. Maybe images?
+//  Get everything ready to serve.
+
+// Would need a JS file that contains refs to all of the components used.
+//  Examine what is in the website and what JS it needs.
+
+// Should be customisable which system gets used to make the bundle.
+//  eg babel or esbuild. Browserify still seems to work on code here at least, but esbuild seems better.
+
+// JS bundling will become a bit more advanced in this server. Similar principles.
+
+// JS_Bundler reporting css that gets found while bundling JS would make sense.
+
+// jsgui3-jsbuilder could be a separate project too.
+// or jsgui3-js-builder even.
+
+
+// bundle_css_from_js_file?
+// scan_js_file_for_css perhaps.
+// scan_js_for_css
+//  maybe scan an AST or AST stream as it's coming in.
+
+
+
+const bundle_css_from_js_str = (js_str, options = {}) => {
+
+    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);
+
+        // Returning a Bundle object when done could be best...?
+
+        const spec = {
+            source: js_str
+        };
+
+        const js_ast_node = JS_AST_Node.from_spec(spec);
+
+        console.log('!!js_ast_node', !!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());
+
+        // A filter iterate query....? filter_deep_iterate could work.
+        //  but we are looking specifically for 'ClassName.css'
+        //   .css property assignments.
+
+        const ae_nodes = [];
+
+
+        // Just assigning a template literal to .css?
+        const css_ae_nodes = [];
+
+        js_ast_node.deep_iterate(node => {
+            //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)', Object.keys(node));
+
+                //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);
+                        }
+
+
+
+                        // 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) {
+            const str_css = arr_css.join('\n');
+
+            complete(str_css);
+        } 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];
+
+    });
+
+}
+
+
+
+class CSS_Bundler extends Bundler {
+    constructor(spec = {}) {
+        super(spec);
+    }
+}
+
+CSS_Bundler.bundle_css_from_js_str = bundle_css_from_js_str;
+module.exports = CSS_Bundler;

package/bundler/js-bundler.js

@@ -23,16 +23,27 @@ const Stream = require('stream');
 
 // JS_Bundler reporting css that gets found while bundling JS would make sense.
 
+// jsgui3-jsbuilder could be a separate project too.
+// or jsgui3-js-builder even.
+
+
 
 
 
 
 const bundle_js = (js_file_path, options = {}, callback) => {
 
+    // Could even split a file into its server and client components.
+    // Maybe providing found css would work well here.
+
+
+
     // Returning an observable and not using a callback would work best.
 
     const res = obs((next, complete, error) => {
 
+
+
         let a = arguments;
         if (typeof a[2] === 'function') {
             callback = a[2];
@@ -52,6 +63,15 @@ const bundle_js = (js_file_path, options = {}, callback) => {
 
             let fileContents = await fnlfs.load(js_file_path);
 
+
+            // Maybe do that post browserify - can read through whole thing to find the css template literals.
+
+            // Could use the CSS bundler to scan_js_for_css
+            //  Seems as though it would be best as an observable.
+
+
+            // Could first get own system AST of the JS file.
+
             // Modify the original file contents so that only client-side parts appear?
             //  Could be done by programatically removing a whole code block, what to do if it is run on the server.
 
@@ -98,6 +118,10 @@ const bundle_js = (js_file_path, options = {}, callback) => {
             });
 
             // May be able to better put the bundle stream info into the observable results.
+            //  Browserify gets given the stream.
+
+            // Nice if this function could output a stream as well.
+
 
             let parts = await stream_to_array(b.bundle());
 
@@ -106,7 +130,22 @@ const bundle_js = (js_file_path, options = {}, callback) => {
             let buf_js = Buffer.concat(buffers);
             let str_js = buf_js.toString();
 
+            next({
+                'lang': 'JavaScript',
+                'operation': 'bundle',
+                'compress': false,
+                'type': 'single-string',
+                'value': str_js
+            });
+
+            // full browserified (client) js app.
+
             let babel_option = options.babel
+
+
+            // could send str_js to a CSS extractor / bundler.
+
+
             //console.log('babel_option', babel_option);
             if (babel_option === 'es5') {
 
@@ -151,13 +190,11 @@ const bundle_js = (js_file_path, options = {}, callback) => {
                     //plugins: ["minify-dead-code-elimination"]
                 };
                 if (options.include_sourcemaps) o_transform.sourceMaps = 'inline';
-
                 let res_transform = babel.transform(str_js, o_transform);
                 buf_js = Buffer.from(res_transform.code);
             } else {
                 buf_js = Buffer.from(str_js);
             }
-
             complete(buf_js);
         })();
 

package/bundler/test_ast.js

@@ -0,0 +1,74 @@
+
+// Load in a JS file, such as square box client.
+// Look for the CSS.
+
+
+// Load a JS file into an OO structure
+// Short term goals:
+
+// Answering questions on the level of the file.
+// Questions that are useful for finding out how to link the js files together.
+//  Don't want each file to be given it's own scope - want them to share local variable references to the the necessary things.
+//   Then those variable names won't be reused in inner scopes unless their replacement there is fine (ie they are otherwise unused).
+
+// This will assemble somewhat detailed information about what happens inside a JavaScript file.
+//  The aim is to carry out and represent different kinds of analysis, but at the moment focusing of finding features.
+
+// Root features
+
+// Declaration features
+// Object features
+
+// Let's make it so that any node can be tagged as having / representing / being part of a feature of some kind.
+//  To begin with focus on what variables are being declared and used.
+
+// Will be great to load in a whole load of JSGUI projects in such a way that the system / platform understands the ordering and 
+// recomposes them into a flat system where many / all declarations are local rather than using any import
+
+// jsgui-lang
+// ----------
+
+// Recognise the basic / general signature of the full document.
+// Recognise that the declarations are all within the root
+// Recognise the exports object at the end exports an object that is composed from same-name references to items declared within lang-mini
+//  and only items declared within jsgui
+//  that it has no external references
+
+// JSGUI_JS_File?
+
+
+
+const JS_File = require('../resources/jsbuilder/JS_File/JS_File');
+//const JS_File_Comprehension = require('../JS_File_Comprehension');
+const path = require('path');
+const fs = require('fs');
+const {each} = require('lang-mini');
+
+const JS_AST_Node = require('../resources/jsbuilder/JS_AST_Node_Extended/JS_AST_Node_Extended');
+
+const test_js_file = () => {
+    const fnl_path = require.resolve('./../examples/square_box_client.js');
+    const file_path = fnl_path;
+    // path of lang mini...
+
+    // Write and test a simple and convenient way for analysing JS files and recompiling them.
+    // To start with, find the ways to arrange parts of the JS into 'platforms'.
+    // How to then build platforms into JS files.
+    //  Will be about closures and sequences.
+    //  A lot about unique naming, closures, and getting the sequence of definitions correct.
+    // ObjectPattern
+    const resolved_path = path.resolve(file_path);
+    //console.log('resolved_path', resolved_path);
+
+    const fstream = fs.createReadStream(resolved_path);
+
+    const jsf = JS_File.load_from_stream(fstream, file_path);
+    jsf.on('ready', () => {
+        const {js_ast_node_file} = jsf;
+        //const body_child_node_identifier_names = [];
+        //const map_bcnidns = {};
+    });
+
+}
+
+test_js_file();