jsgui3-server 0.0.98 → 0.0.100

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

@@ -0,0 +1,191 @@
+
+
+
+// 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_Single_File_Minifying_Bundler_Using_ESBuild extends Bundler_Using_ESBuild {
+    constructor(spec) {
+        super(spec);
+    }
+
+    // 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(str_js) {
+
+
+        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....
+
+            let result = await esbuild.build({
+                stdin: {
+                    contents: str_js,
+
+                    // These are all optional:
+                    //resolveDir: './src',
+                    //sourcefile: 'imaginary-file.js',
+                    //loader: 'ts',
+                },
+                //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,
+                minify: true,
+
+                //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)
+            }
+
+            console.log('result.outputFiles.length', result.outputFiles.length);
+
+            //console.trace();
+            //throw 'stop';
+
+
+            if (result.outputFiles.length === 1) {
+
+                const output_file = result.outputFiles[0];
+
+                //console.log('output_file', output_file);
+
+                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_Single_File_Minifying_Bundler_Using_ESBuild;

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

@@ -0,0 +1,240 @@
+
+
+// Could split the CSS from JS here.
+//  Extractors are a different thing to bundlers.
+
+
+
+
+// Probably better to remove this / use the specific extractor that's named / available / gets used.
+
+
+
+
+const {bundle_css_from_js_str} = require('../../css-bundler');
+
+const {obs} = require('fnl');
+
+const Core_JS_Non_Minifying_Bundler_Using_ESBuild = require('./Core_JS_Non_Minifying_Bundler_Using_ESBuild');
+
+
+// It is a Bundler though....
+
+// Or not???
+
+// And Extractor?
+// Separator???
+
+// An Extractor processor I think.
+
+const Extractor = require('../../../extractors/Extractor');
+
+
+class _Old_CSS_Extractor extends Extractor {
+
+    // Maybe should use a reference to the file itself?
+    //   Maybe needs to use jsdom even?
+
+    // Will first try with existing code and then see about optimisations.
+
+
+
+
+    constructor(spec) {
+        super();
+
+        console.trace();
+        throw 'Deprecating this particular class, use other extractor classes in the extractors dir.'
+
+        this.core_js_non_minifying_bundler = new Core_JS_Non_Minifying_Bundler_Using_ESBuild();
+
+    }
+
+    separate_css_and_js(js_file_path) {
+
+        const {core_js_non_minifying_bundler} = this;
+
+
+        console.log('js_file_path', js_file_path);
+
+        const obs_res = obs(async(next, complete, error) => {
+
+            // Then we need to use the core js bundler....
+
+            const core_js_non_minifying_bundler_obs_res = core_js_non_minifying_bundler.bundle(js_file_path);
+
+            // Only one piece of data...?
+
+            const arr_no_minifying_bundler_data = [];
+
+            core_js_non_minifying_bundler_obs_res.on('next', data => {
+
+                //console.log('core js (non-minifying) bundler next event data:', data);
+
+                arr_no_minifying_bundler_data.push(data);
+
+
+
+
+            });
+
+            core_js_non_minifying_bundler_obs_res.on('complete', async() => {
+                // This overall function not yet complete though....
+                
+                console.log('arr_no_minifying_bundler_data', arr_no_minifying_bundler_data);
+
+                // Then use that Bundle object....
+                //  Should represent a single JS file I think.
+
+                // Have plenty of checks in these various classes, though keep the overall code simple, but the
+                //   structure will be somewhat complex, like the inner working of the app which it represents.
+
+
+                if (arr_no_minifying_bundler_data.length === 1) {
+                    const bundle_item = arr_no_minifying_bundler_data[0]._arr[0];
+
+                    console.log('bundle_item', bundle_item);
+
+                    if (bundle_item.type === 'JavaScript') {
+
+                        const {text} = bundle_item;
+
+                        // Then run it through the CSS extraction algorithm.
+                        //   Having that code in the relevant class would help.
+
+                        console.log('pre extract css from bundled unminified js');
+
+                        // Reimplementing it as an Extractor that uses ESBuild will / may help.
+
+
+                        // Would be worth making an AST_Node version of this though, as that's what it uses.
+                        //   May well be possible / better to use other methods / regexes / parser and AST.
+
+
+
+
+
+
+
+
+                        const r1 = await bundle_css_from_js_str(text);
+                        console.log('post extract css from bundled unminified js');
+
+                        // That bundle algorithm is a little slow.
+                        //  It does work well though.
+
+                        //   Maybe using regexes on the JS would work better.
+
+
+                        console.log('r1', r1);
+
+                        console.trace();
+                        throw 'NYI';
+
+
+
+                        //  Then run it through the CSS extractor function / class.
+
+                        // Perhaps we should make and use an ESBuild specific CSS extractor???
+                        //   Should the current extractor function be too slow....
+
+                        // Including the standard / default jsgui3 css as well....
+                        //   May be worth making more classes to do individual parts of it.
+                        //   And have overall bundling class(es) join them together with simple syntax using the relevant classes to do the job.
+
+
+                        // Worth making the code somewhat longwinded / complex if it makes it easy to follow
+                        //   Since it's doing some complex things (at least complex considering all eventual options) the structure
+                        //   representing that and being able to accommodate it will help.
+
+                        // The Publisher should (probably) do the reference insertion.
+                        //   Though a JS_And_CSS_References_Inserter may be useful structurally to see what's going on.
+                        //     Would insert the references within the HTML JSGUI3 Control within the right place(s).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                    } else {
+                        console.trace();
+                        throw 'Unexpected bundle item type: ' + bundle_item.type;
+                    }
+
+
+                    
+
+                } else {
+                    console.trace();
+                    throw 'NYI';
+                }
+
+
+
+
+
+            });
+
+            // Then when it is complete...???
+
+
+
+
+        });
+
+        return obs_res;
+
+        /*
+        obs_res.on('next', data => {
+            console.log('data', data);
+        })
+        */
+
+
+        ///const res_core_bundle = 
+
+        // Maybe should compile / bundle the file with esbuild.
+        //   Want it to look through all the CSS throughout JSGUI JS and include it in the CSS for the client.
+        //     Should be very convenient for including CSS in the JS. Sensible defaults.
+
+        // ESBuild_Wrapper perhaps.
+
+        // Core_JS_Bundler_Using_ESBuild
+
+        // JS_Bundler_Using_ESBuild
+
+        // Make it async or observable....
+
+        // Observable may be the best thing to use, maybe will improve observable API, possibly specifying how it combines results.
+
+        // Looks like we first need to get the JS all as a bundle.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    }
+
+
+}
+
+
+module.exports = _Old_CSS_Extractor;