jsgui3-server 0.0.98 → 0.0.100

package/resources/processors/bundlers/js/esbuild/Advanced_JS_Bundler_Using_ESBuild.js

@@ -0,0 +1,389 @@
+// Advanced in terms of being able to split CSS and JS from JS.
+const {obs} = require('fnl');
+const esbuild = require('esbuild')
+const Core_JS_Non_Minifying_Bundler_Using_ESBuild = require('./Core_JS_Non_Minifying_Bundler_Using_ESBuild');
+const Bundler_Using_ESBuild = require('./Bundler_Using_ESBuild');
+const {is_array} = require('lang-tools');
+
+const Core_JS_Single_File_Minifying_Bundler_Using_ESBuild = require('./Core_JS_Single_File_Minifying_Bundler_Using_ESBuild');
+
+//const CSS_Extractor = require('./_Old_CSS_Extractor');
+
+// Use a different CSS extractor.
+
+
+const Bundle = require('../../bundle');
+
+const CSS_And_JS_From_JS_String_Extractor = require('../../../extractors/js/css_and_js/CSS_And_JS_From_JS_String_Extractor');
+
+
+class Advanced_JS_Bundler_Using_ESBuild extends Bundler_Using_ESBuild {
+    constructor(spec) {
+        super(spec);
+
+        if (spec.debug !== undefined) this.debug = spec.debug;
+
+        //this.css_extractor = new CSS_Extractor();
+
+
+        this.non_minifying_bundler = new Core_JS_Non_Minifying_Bundler_Using_ESBuild({
+            debug: this.debug
+        });
+
+
+        this.css_and_js_from_js_string_extractor = new CSS_And_JS_From_JS_String_Extractor();
+
+
+        // Probably don't use that minifying bundler in debug mode.
+        this.minifying_js_single_file_bundler = new Core_JS_Single_File_Minifying_Bundler_Using_ESBuild();
+
+    }
+
+    bundle(js_file_path) {
+        const {non_minifying_bundler, css_and_js_from_js_string_extractor, minifying_js_single_file_bundler} = this;
+
+        // Maybe this should get them positioned absolutely when removed from the grid?
+        //   But then what about the space they leave?
+
+        // This is just a simple principle demo though.
+        //   Maybe want a simple and explicit option to change behaviour like I specify.
+
+        
+
+        const res_obs = obs(async(next, complete, error) => {
+
+            //console.log('Advanced_JS_Bundler_Using_ESBuild bundle js_file_path:', js_file_path);
+
+            const res_nmb = await non_minifying_bundler.bundle(js_file_path);
+
+            //console.log('res_nmb', res_nmb);
+
+            if (res_nmb.length === 1) {
+                const js_bundle = res_nmb[0];
+                const js_bundle_arr = js_bundle._arr;
+                if (js_bundle_arr) {
+                    if (js_bundle_arr.length === 1) {
+                        const bundle_item = js_bundle_arr[0];
+                        //console.log('bundle_item', bundle_item);
+
+                        if (bundle_item.type === 'JavaScript') {
+
+                            // But in debug mode don't minify it.
+                            //   Maybe create and add the sourcemap here instead....?
+
+                            const {text} = bundle_item;
+                            // Then use the css and js from js extractor.
+
+                            const res_extract_css_and_js_from_js = await css_and_js_from_js_string_extractor.extract(text);
+                            const {css, js} = res_extract_css_and_js_from_js;
+
+                            if (this.debug) {
+
+                                // sourcemap: 'inline'
+
+                                // Don't minify the js.
+
+                                // Make res bundle items that include the CSS and the non-minified JS.
+
+                                // Including the source map would be better still.
+
+                                const res_bundle = new Bundle();
+                                // Add the non-minified JS (as a bundle item object)
+
+                                const o_js_bundle_item = {
+                                    type: 'JavaScript',
+                                    extension: 'JS',
+                                    text: js
+                                }
+                                res_bundle.add(o_js_bundle_item);
+                                const o_css_bundle_item = {
+                                    type: 'CSS',
+                                    extension: 'css',
+                                    text: css
+                                }
+
+                                res_bundle.push(o_css_bundle_item);
+                                next(res_bundle);
+                                complete(res_bundle);
+
+
+
+
+
+
+
+
+                            } else {
+
+
+                                const minified_js = await minifying_js_single_file_bundler.bundle(js);
+
+                                //console.log('minified_js', minified_js);
+                                //console.log('minified_js.length', minified_js.length);
+
+                                // it's an array....
+
+                                if (is_array(minified_js)) {
+
+                                    if (minified_js.length === 1) {
+
+
+                                        // Should put it all in a single res bundle though....
+                                        //   Though merging / concating bundles will be fine too.
+
+
+
+                                        const minified_js_bundle_collection = minified_js[0];
+
+                                        
+
+                                        const o_css_bundle_item = {
+                                            type: 'CSS',
+                                            extension: 'css',
+                                            text: css
+                                        }
+
+                                        minified_js_bundle_collection.push(o_css_bundle_item);
+
+
+                                        // Maybe will provide the class / class instance that processes CSS or SASS/SCSS / whatever else.
+
+
+
+                                        // Could add the extracted CSS here.
+
+
+
+                                        next(minified_js_bundle_collection);
+
+                                        // But create a CSS bundle item...
+
+
+
+
+
+                                        // And also the CSS...
+
+
+
+
+
+                                        complete(minified_js_bundle_collection);
+
+
+
+                                        const unneeded_looking_into_the_js_bundle = () => {
+                                            if (minified_js_bundle_collection._arr) {
+
+                                                if (minified_js_bundle_collection._arr.length === 1) {
+
+                                                    const minified_js_bundle_item = minified_js_bundle_collection._arr[0];
+                                                    console.log('minified_js_bundle_item', minified_js_bundle_item);
+
+
+                                                    if (minified_js_bundle_item.type === 'JavaScript') {
+
+                                                        //const str_minified_js = minified_js_bundle_item.text;
+
+                                                        //const res = 
+
+
+
+
+
+                                                    } else {
+
+                                                        console.trace();
+                                                        throw 'NYI';
+
+                                                    }
+
+
+                                                    // Could even check it's js here...?
+
+
+                                                    console.trace();
+                                                    throw 'NYI';
+
+
+                                                } else {
+                                                    console.trace();
+                                                    throw 'NYI';
+                                                }
+
+                                            } else {
+
+                                                console.trace();
+                                                throw 'NYI';
+
+                                            }
+
+                                        }
+
+                                        
+
+                                    } else {
+                                        console.trace();
+                                        throw 'stop';
+                                    }
+
+                                } else {
+
+                                    console.trace();
+                                    throw 'stop';
+                                }
+
+
+                            }
+
+
+                            
+
+
+
+
+                            
+
+
+
+                            //console.trace();
+                            //throw 'stop';
+
+                            // And put things into a res bundle.
+                            //  Though possibly this could (even) bundle things into compressed files (with headers) ready to be
+                            //  served.
+
+                            // Though there may be a class (or bunch of them), maybe in the Publisher, that determine and
+                            //   carry out adding references and using static routes, or putting the CSS and JS inline within the HTML.
+                            // References seem very much better but want control of this to be as clear as possible.
+
+
+
+
+                            // Maybe that will be a Ready_To_Serve_Static_Bundle
+
+
+
+
+
+                            // Though it needs to provide (a bundle of?) both JS and CSS.
+                            //   Better to use a standard bundle class (collection) to transfer these objects.
+
+                            // .css or .get('css') perhaps???
+
+                            // Array does seem simpler, esp as it does not really have to be a 'bundle' object.
+                            //   Maybe a Bundle class instance would help here in some ways.
+
+                            // Then will apply minifying compression to the JS.
+                            //   ESBuild is really fast for this.
+
+                            // Likely to have different publisher options for how the HTML and CSS is included in the page.
+                            //   With the most sensible defaults used.
+                            //   Serving the files as static, and referenced from within the HTML.
+                            //     Will look into options / setups for efficient serving of websites where there is
+                            //      varying client side logic for each page, but can reference built components which don't change.
+
+                            // Or basically just initialise everything on the client page.
+
+                            // Will have moderately to very structure of classes, very specific in terms of what they do and how they do it.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                            //console.log('res_extract_css_and_js_from_js', res_extract_css_and_js_from_js);
+
+                            //console.trace();
+                            //throw 'stop';
+
+
+                        } else {
+                            console.trace();
+                            throw 'NYI';
+                        }
+
+                        //console.trace();
+                        //throw 'stop';
+                    } else {
+                        console.trace();
+                        throw 'NYI';
+                    }
+                } else {
+                    console.trace();
+                    throw 'NYI';
+                }
+
+
+            } else {
+                console.trace();
+                throw 'NYI';
+            }
+
+            //console.trace();
+            //throw 'stop';
+
+
+
+            // Need to use a non minifying bundler (first).
+
+
+            const _old_code = async() => {
+
+                const css_extractor_res = await css_extractor.separate_css_and_js(js_file_path)
+
+                console.log('css_extractor_res', css_extractor_res);
+
+                /*
+
+                let result = await esbuild.build({
+                    entryPoints: ['js_file_path'],
+                    //sourcemap: 'external',
+                    write: false,
+                    outdir: 'out',
+                })
+                console.log('result.outputFiles:\n\n');
+                for (let out of result.outputFiles) {
+                    console.log('out.path, out.contents, out.hash, out.text', out.path, out.contents, out.hash, out.text)
+                }
+
+                */
+
+                // Should use (an instance of?) the core bundler.
+                //  Or the CSS extractor even.
+
+
+
+                console.trace();
+                throw 'NYI';
+
+            }
+
+
+            
+
+
+        });
+        return res_obs;
+
+        // The bundle result should have a few things, makes sense to make it an object or class, not too complicated.
+
+        
+
+    }
+
+    
+
+}
+
+module.exports = Advanced_JS_Bundler_Using_ESBuild;

package/resources/processors/bundlers/js/esbuild/Bundler_Using_ESBuild.js

@@ -0,0 +1,9 @@
+const Bundler = require('../../bundler');
+
+class Bundler_Using_ESBuild extends Bundler {
+    constructor(spec) {
+        super(spec);
+    }
+}
+
+module.exports = Bundler_Using_ESBuild;

package/resources/processors/bundlers/js/esbuild/Core_JS_Non_Minifying_Bundler_Using_ESBuild.js

@@ -0,0 +1,186 @@
+
+// This won't deal with CSS, maybe will have some options for it.
+
+const {obs} = require('fnl');
+const esbuild = require('esbuild')
+
+const Bundle = require('../../bundle');
+const Bundler_Using_ESBuild = require('./Bundler_Using_ESBuild');
+// extends Bundler ???
+// extends Core_Bundler?
+// exends Base_Bundler???
+
+
+
+
+class Core_JS_Non_Minifying_Bundler_Using_ESBuild extends Bundler_Using_ESBuild {
+    constructor(spec) {
+        super(spec);
+
+        if (spec.debug !== undefined) this.debug = spec.debug;
+
+
+    }
+
+    // And the options....
+
+    // May want to have it do minification by default?
+    // Or even call a specific minifier class later on....
+
+    // Making classes with very specific responsibilities to do very specific things may help.
+
+    // Core_JS_Non_Minifying_Bundler_Using_ESBuild for example....
+
+    // Really specific class names for specific functionality to call reqlly quickly and interchange really quickly.
+    
+    // Probably use the non-minifying bundler, and then use a minifier afterwards.
+    // And here the minifier is ESBuild, as is the bundler.
+
+
+
+
+
+
+
+    bundle(js_file_path) {
+
+
+        const res_obs = obs(async(next, complete, error) => {
+
+            //console.log('Core_JS_Bundler_Using_ESBuild bundle js_file_path:', js_file_path);
+
+            // Looks like we need better linking build options....
+
+            const o_build = {
+                entryPoints: [js_file_path],
+                bundle: true,
+                
+                // Possibly no minification here....
+                // Want to use non-minified or only partially minified version to separate the JS and the CSS.
+
+                treeShaking: true,
+
+                //sourcemap: 'external',
+                write: false,
+                outdir: 'out',
+            }
+
+            if (this.debug) {
+                o_build.sourcemap = 'inline';
+            }
+
+
+
+            let result = await esbuild.build(o_build);
+            //console.log('result.outputFiles:\n\n');
+            //for (let out of result.outputFiles) {
+                //console.log('out.path, out.contents, out.hash, out.text', out.path, out.contents, out.hash, out.text)
+            //}
+
+            //console.log('result.outputFiles.length', result.outputFiles.length);
+
+
+            if (result.outputFiles.length === 1) {
+
+                const output_file = result.outputFiles[0];
+
+                //console.log('output_file.text.length', output_file.text.length);
+                //console.log('output_file.text', output_file.text);
+
+                //console.log('Object.keys(output_file)', Object.keys(output_file));
+
+                // The Bundle is a subclass of Collection.
+                //  Maybe its better to make it an Object class that assigns all properties from spec.
+
+                // May be much simpler and more flexible for the moment.
+                // Or an array (or collection) of BundleItem instances???
+
+                // Maybe don't have the Bundle extend Collection?
+                //   Maybe overhaul Collection?
+
+                // Or use Collection and possibly get onto improving it.
+                //   Need to be careful as Collection is integral to Controls.
+
+                // The Bundle should have items, like a collection.
+                // Maybe indexed by paths???
+
+                const res_bundle = new Bundle();
+
+                // Really flexible Bundle_Item perhaps....?
+                //  The Bundle_Item will need to be able to represent data in different stages of preparation.
+
+
+                // Just the text?
+                const o_bundle_item = {
+                    type: 'JavaScript',
+                    extension: 'js',
+                    text: output_file.text
+                }
+
+                res_bundle.push(o_bundle_item);
+
+                next(res_bundle);
+                complete();
+
+
+
+
+
+
+
+                // Spec_Property_Assigner class???
+
+
+
+                // Think we do have the (full?) output here.
+
+                // prob leave out the hash???
+
+                //console.log('output_file.contents', output_file.contents);
+
+                //const 
+
+                // Bundle_Result or Bundle class?
+
+                // always have Bundlers return a Bundle?
+
+
+
+
+
+
+
+
+                //console.trace();
+                //throw 'NYI';
+
+            } else {
+
+
+                console.trace();
+                throw 'NYI';
+
+            }
+
+
+            // The core bundler....
+            //   Maybe later even use a Static_Response_Preparer???
+            //   And have the relevant Publisher use it?
+
+
+
+            
+
+
+        });
+        return res_obs;
+
+        // The bundle result should have a few things, makes sense to make it an object or class, not too complicated.
+
+
+
+    }
+
+}
+
+module.exports = Core_JS_Non_Minifying_Bundler_Using_ESBuild;