jsgui3-server 0.0.142 → 0.0.144

package/resources/processors/bundlers/css-bundler.js

@@ -1,18 +1,16 @@
-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 fs = require('fs');
-const path = require('path');
-
-const JS_AST_Node = require('../../jsbuilder/JS_AST/JS_AST_Node');
+const Bundler = require('./bundler');
+//const Bundle = require('./bundle');
+const {obs} = require('fnl');
+//const browserify = require('browserify');
+//const babel = require('@babel/core');
+// Will put the JS together. Maybe images?
+const fs = require('fs');
+const path = require('path');
+
+const CSS_And_JS_From_JS_String_Extractor = require('../extractors/js/css_and_js/CSS_And_JS_From_JS_String_Extractor');
+const {compile_styles} = require('./style-bundler');
+
+const css_and_js_from_js_string_extractor = new CSS_And_JS_From_JS_String_Extractor();
 
 // Will put the JS together. Maybe images?
 //  Get everything ready to serve.
@@ -53,7 +51,7 @@ const stream_html_basic_css = () => {
 
 }
 
-const bundle_css_from_js_str = (js_str, options = {}) => {
+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.
@@ -65,162 +63,19 @@ const bundle_css_from_js_str = (js_str, options = {}) => {
 
 
 
-    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
-        };
-
-        // 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');
-
-        // Maybe a faster / different JS parser.
-        //  Or do it using regex / specialised algorithm of some sort.
-
-
-
-
-        //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 = [];
-
-        // How about removing those parts from the JS AST?
-
-
-
-        js_ast_node.deep_iterate(node => {
-
-            // 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)', 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];
-
-    });
-
-}
+    return obs((next, complete, error) => {
+        (async () => {
+            const res_extract_styles = await css_and_js_from_js_string_extractor.extract(js_str);
+            const {css = '', scss = '', sass = '', style_segments = []} = res_extract_styles || {};
+            const style_bundle = compile_styles({css, scss, sass, style_segments}, options.style || {});
+            complete(style_bundle.css || '');
+        })().catch(error);
+
+        const [stop, pause, resume] = [() => {}, () => {}, () => {}];
+        return [stop, pause, resume];
+    });
+
+}
 
 
 
@@ -232,4 +87,4 @@ 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;
+module.exports = CSS_Bundler;

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

@@ -5,16 +5,17 @@ const Core_JS_Non_Minifying_Bundler_Using_ESBuild = require('./Core_JS_Non_Minif
 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 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');
+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');
+const {compile_styles} = require('../../style-bundler');
 
 
 class Advanced_JS_Bundler_Using_ESBuild extends Bundler_Using_ESBuild {
@@ -23,8 +24,10 @@ class Advanced_JS_Bundler_Using_ESBuild extends Bundler_Using_ESBuild {
 
         if (spec.debug !== undefined) this.debug = spec.debug;
 
-        // Store bundler configuration
-        this.bundler_config = spec.bundler || {};
+        // Store bundler configuration
+        this.bundler_config = spec.bundler || {};
+        const style_config = spec.style || this.bundler_config.style || {};
+        this.style_config = Object.assign({debug: this.debug === true}, style_config);
 
         //this.css_extractor = new CSS_Extractor();
 
@@ -46,7 +49,7 @@ class Advanced_JS_Bundler_Using_ESBuild extends Bundler_Using_ESBuild {
     }
 
     bundle(js_file_path) {
-        const {non_minifying_bundler, css_and_js_from_js_string_extractor, minifying_js_single_file_bundler} = this;
+        const {non_minifying_bundler, css_and_js_from_js_string_extractor, minifying_js_single_file_bundler, style_config} = this;
 
         // Validate input
         if (typeof js_file_path !== 'string' || js_file_path.trim() === '') {
@@ -85,8 +88,17 @@ class Advanced_JS_Bundler_Using_ESBuild extends Bundler_Using_ESBuild {
                             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;
+                            const res_extract_styles_and_js = await css_and_js_from_js_string_extractor.extract(text);
+                            const {
+                                css = '',
+                                scss = '',
+                                sass = '',
+                                style_segments = [],
+                                js = text
+                            } = res_extract_styles_and_js || {};
+
+                            const style_bundle = compile_styles({css, scss, sass, style_segments}, style_config);
+                            const compiled_css = style_bundle.css || '';
 
                             if (this.debug) {
                                 // Generate source maps for CSS-free JS
@@ -100,11 +112,11 @@ class Advanced_JS_Bundler_Using_ESBuild extends Bundler_Using_ESBuild {
                                     text: css_free_bundle_item.text
                                 }
                                 res_bundle.push(o_js_bundle_item);
-                                const o_css_bundle_item = {
-                                    type: 'CSS',
-                                    extension: 'css',
-                                    text: css
-                                }
+                                const o_css_bundle_item = {
+                                    type: 'CSS',
+                                    extension: 'css',
+                                    text: compiled_css
+                                }
                                 res_bundle.push(o_css_bundle_item);
                                 next(res_bundle);
                                 complete(res_bundle);
@@ -128,11 +140,11 @@ class Advanced_JS_Bundler_Using_ESBuild extends Bundler_Using_ESBuild {
 
                                 if (is_array(minified_js) && minified_js.length === 1) {
                                     const minified_bundle = minified_js[0];
-                                    const o_css_bundle_item = {
-                                        type: 'CSS',
-                                        extension: 'css',
-                                        text: css
-                                    }
+                                    const o_css_bundle_item = {
+                                        type: 'CSS',
+                                        extension: 'css',
+                                        text: compiled_css
+                                    }
                                     minified_bundle.push(o_css_bundle_item);
                                     next(minified_bundle);
                                     complete(minified_bundle);
@@ -278,4 +290,4 @@ class Advanced_JS_Bundler_Using_ESBuild extends Bundler_Using_ESBuild {
 }
 
 
-module.exports = Advanced_JS_Bundler_Using_ESBuild;
+module.exports = Advanced_JS_Bundler_Using_ESBuild;

package/resources/processors/bundlers/style-bundler.js

@@ -0,0 +1,288 @@
+const SASS_Compiler = require('../compilers/SASS_Compiler');
+
+const normalize_sources = (value) => {
+	if (!value) return [];
+	return Array.isArray(value) ? value : [value];
+};
+
+const normalize_style_segments = (value) => {
+	if (!value) return [];
+	return Array.isArray(value) ? value : [value];
+};
+
+const coerce_style_segments = (segments) => {
+	return normalize_style_segments(segments)
+		.map((segment) => {
+			if (!segment) return null;
+			if (typeof segment === 'string') {
+				return {type: 'css', source: segment};
+			}
+			const type_value = segment.type || segment.syntax || segment.lang;
+			const source_value = segment.source ?? segment.value;
+			if (!type_value || source_value === undefined || source_value === null) return null;
+			const normalized_type = typeof type_value === 'string' ? type_value.toLowerCase() : type_value;
+			return {type: normalized_type, source: source_value};
+		})
+		.filter(Boolean)
+		.filter((segment) => segment.type === 'css' || segment.type === 'scss' || segment.type === 'sass');
+};
+
+const join_sources = (sources) => {
+	return sources.filter(Boolean).join('\n');
+};
+
+const serialize_source_map = (source_map) => {
+	if (!source_map) return '';
+	return JSON.stringify(source_map);
+};
+
+const build_inline_source_map_comment = (source_map) => {
+	const source_map_json = serialize_source_map(source_map);
+	if (!source_map_json) return '';
+	const base64_map = Buffer.from(source_map_json, 'utf8').toString('base64');
+	return `/*# sourceMappingURL=data:application/json;base64,${base64_map} */`;
+};
+
+const get_sourcemap_config = (style_config) => {
+	const sourcemap_config = style_config.sourcemaps || {};
+	const enabled = sourcemap_config.enabled === true || (style_config.debug === true && sourcemap_config.enabled !== false);
+	return {
+		enabled,
+		inline: sourcemap_config.inline !== false,
+		include_sources: sourcemap_config.include_sources !== false
+	};
+};
+
+const compile_style_segments = (style_segments, style_config) => {
+	const scss_extra_sources = normalize_sources(style_config.scss_sources);
+	const sass_extra_sources = normalize_sources(style_config.sass_sources);
+
+	const load_paths = normalize_sources(style_config.load_paths);
+	const output_style = style_config.output_style;
+	const quiet_dependencies = style_config.quiet_dependencies;
+	const compile_css_with_sass = style_config.compile_css_with_sass !== false;
+	const sourcemap_config = get_sourcemap_config(style_config);
+
+	const normalized_segments = [...style_segments];
+	for (const source of scss_extra_sources) {
+		if (source) normalized_segments.push({type: 'scss', source});
+	}
+	for (const source of sass_extra_sources) {
+		if (source) normalized_segments.push({type: 'sass', source});
+	}
+
+	const has_css_segments = normalized_segments.some((segment) => segment.type === 'css');
+	const has_scss_segments = normalized_segments.some((segment) => segment.type === 'scss');
+	const has_sass_segments = normalized_segments.some((segment) => segment.type === 'sass');
+
+	const needs_sass = has_sass_segments || has_scss_segments || (compile_css_with_sass && has_css_segments);
+	if (!needs_sass) {
+		return {
+			css: join_sources(normalized_segments.map((segment) => segment.source)),
+			used_sass_toolchain: false
+		};
+	}
+
+	const sass_compiler = new SASS_Compiler({
+		load_paths,
+		output_style,
+		quiet_dependencies
+	});
+
+	const compile_individually = has_sass_segments || !compile_css_with_sass;
+
+	if (!compile_individually) {
+		const scss_input = join_sources(normalized_segments.map((segment) => segment.source));
+		const scss_result = sass_compiler.compile_scss_string(scss_input, {
+			source_map: sourcemap_config.enabled,
+			source_map_include_sources: sourcemap_config.include_sources,
+			return_source_map: sourcemap_config.enabled
+		});
+		const scss_output = typeof scss_result === 'string' ? scss_result : (scss_result.css || '');
+		const scss_source_map = typeof scss_result === 'string' ? null : (scss_result.source_map || null);
+
+		let combined_css = scss_output;
+		if (sourcemap_config.enabled && sourcemap_config.inline) {
+			const inline_comment = build_inline_source_map_comment(scss_source_map);
+			if (inline_comment) {
+				combined_css = [combined_css, inline_comment].filter(Boolean).join('\n');
+			}
+		}
+
+		return {
+			css: combined_css,
+			used_sass_toolchain: true
+		};
+	}
+
+	const compiled_chunks = [];
+	let compiled_segment_count = 0;
+	let raw_css_appended = false;
+	let single_source_map = null;
+
+	for (const segment of normalized_segments) {
+		if (!segment || !segment.source) continue;
+		if (segment.type === 'css' && !compile_css_with_sass) {
+			compiled_chunks.push(segment.source);
+			raw_css_appended = true;
+			continue;
+		}
+
+		if (segment.type === 'css' || segment.type === 'scss') {
+			const scss_result = sass_compiler.compile_scss_string(segment.source, {
+				source_map: sourcemap_config.enabled,
+				source_map_include_sources: sourcemap_config.include_sources,
+				return_source_map: sourcemap_config.enabled
+			});
+			const scss_output = typeof scss_result === 'string' ? scss_result : (scss_result.css || '');
+			const scss_source_map = typeof scss_result === 'string' ? null : (scss_result.source_map || null);
+			if (scss_output) compiled_chunks.push(scss_output);
+			compiled_segment_count += 1;
+			if (compiled_segment_count === 1) {
+				single_source_map = scss_source_map;
+			} else {
+				single_source_map = null;
+			}
+		} else if (segment.type === 'sass') {
+			const sass_result = sass_compiler.compile_sass_string(segment.source, {
+				source_map: sourcemap_config.enabled,
+				source_map_include_sources: sourcemap_config.include_sources,
+				return_source_map: sourcemap_config.enabled
+			});
+			const sass_output = typeof sass_result === 'string' ? sass_result : (sass_result.css || '');
+			const sass_source_map = typeof sass_result === 'string' ? null : (sass_result.source_map || null);
+			if (sass_output) compiled_chunks.push(sass_output);
+			compiled_segment_count += 1;
+			if (compiled_segment_count === 1) {
+				single_source_map = sass_source_map;
+			} else {
+				single_source_map = null;
+			}
+		}
+	}
+
+	let combined_css = compiled_chunks.filter(Boolean).join('\n');
+	if (sourcemap_config.enabled && sourcemap_config.inline && compiled_segment_count === 1 && !raw_css_appended) {
+		const inline_comment = build_inline_source_map_comment(single_source_map);
+		if (inline_comment) {
+			combined_css = [combined_css, inline_comment].filter(Boolean).join('\n');
+		}
+	}
+
+	return {
+		css: combined_css,
+		used_sass_toolchain: true
+	};
+};
+
+const compile_styles = (style_payload = {}, style_config = {}) => {
+	const style_segments = coerce_style_segments(style_payload.style_segments || style_payload.segments);
+	const has_non_css_segments = style_segments.some((segment) => segment.type !== 'css');
+	if (style_segments.length > 0 && has_non_css_segments) {
+		return compile_style_segments(style_segments, style_config);
+	}
+
+	const css_sources = normalize_sources(style_payload.css);
+	const scss_sources = normalize_sources(style_payload.scss);
+	const sass_sources = normalize_sources(style_payload.sass);
+
+	const scss_extra_sources = normalize_sources(style_config.scss_sources);
+	const sass_extra_sources = normalize_sources(style_config.sass_sources);
+
+	const load_paths = normalize_sources(style_config.load_paths);
+	const output_style = style_config.output_style;
+	const quiet_dependencies = style_config.quiet_dependencies;
+
+	const has_scss_sources = scss_sources.length > 0 || scss_extra_sources.length > 0;
+	const has_sass_sources = sass_sources.length > 0 || sass_extra_sources.length > 0;
+	const should_use_sass = has_scss_sources || has_sass_sources;
+	const compile_css_with_sass = style_config.compile_css_with_sass !== false;
+	const sourcemap_config = get_sourcemap_config(style_config);
+
+	const css_string = join_sources(css_sources);
+
+	if (!should_use_sass) {
+		return {
+			css: css_string,
+			used_sass_toolchain: false
+		};
+	}
+
+	const sass_compiler = new SASS_Compiler({
+		load_paths,
+		output_style,
+		quiet_dependencies
+	});
+
+	let scss_output = '';
+	let sass_output = '';
+	let scss_source_map = null;
+	let sass_source_map = null;
+
+	if (has_scss_sources || (compile_css_with_sass && css_string)) {
+		const scss_sources_to_compile = [];
+		if (compile_css_with_sass && css_string) scss_sources_to_compile.push(css_string);
+		scss_sources_to_compile.push(...scss_sources, ...scss_extra_sources);
+
+		const scss_input = join_sources(scss_sources_to_compile);
+		if (scss_input) {
+			const scss_result = sass_compiler.compile_scss_string(scss_input, {
+				source_map: sourcemap_config.enabled,
+				source_map_include_sources: sourcemap_config.include_sources,
+				return_source_map: sourcemap_config.enabled
+			});
+			if (typeof scss_result === 'string') {
+				scss_output = scss_result;
+			} else {
+				scss_output = scss_result.css || '';
+				scss_source_map = scss_result.source_map || null;
+			}
+		}
+	}
+
+	if (has_sass_sources) {
+		const sass_sources_to_compile = [...sass_sources, ...sass_extra_sources];
+		const sass_input = join_sources(sass_sources_to_compile);
+		if (sass_input) {
+			const sass_result = sass_compiler.compile_sass_string(sass_input, {
+				source_map: sourcemap_config.enabled,
+				source_map_include_sources: sourcemap_config.include_sources,
+				return_source_map: sourcemap_config.enabled
+			});
+			if (typeof sass_result === 'string') {
+				sass_output = sass_result;
+			} else {
+				sass_output = sass_result.css || '';
+				sass_source_map = sass_result.source_map || null;
+			}
+		}
+	}
+
+	let combined_css = [scss_output, sass_output].filter(Boolean).join('\n');
+	const raw_css_appended = !compile_css_with_sass && css_string;
+	if (raw_css_appended) {
+		combined_css = [css_string, combined_css].filter(Boolean).join('\n');
+	}
+
+	if (sourcemap_config.enabled && sourcemap_config.inline) {
+		const has_scss_output = Boolean(scss_output);
+		const has_sass_output = Boolean(sass_output);
+		const can_inline_map = !raw_css_appended && ((has_scss_output && !has_sass_output) || (!has_scss_output && has_sass_output));
+		if (can_inline_map) {
+			const selected_map = has_scss_output ? scss_source_map : sass_source_map;
+			const inline_comment = build_inline_source_map_comment(selected_map);
+			if (inline_comment) {
+				combined_css = [combined_css, inline_comment].filter(Boolean).join('\n');
+			}
+		}
+	}
+
+	return {
+		css: combined_css,
+		used_sass_toolchain: true
+	};
+};
+
+module.exports = {
+	compile_styles
+};