jsgui3-server 0.0.143 → 0.0.145

package/resources/processors/compilers/SASS_Compiler.js

@@ -0,0 +1,88 @@
+let sass_module;
+
+const get_sass_module = () => {
+	if (!sass_module) {
+		try {
+			sass_module = require('sass');
+		} catch (err) {
+			const error = new Error('SASS compiler not available. Install "sass" to compile SCSS/SASS.');
+			error.cause = err;
+			throw error;
+		}
+	}
+	return sass_module;
+};
+
+const normalize_array = (value) => {
+	if (!value) return [];
+	return Array.isArray(value) ? value : [value];
+};
+
+const compile_string_with_sass = (source_string, options = {}) => {
+	if (!source_string || !source_string.trim()) {
+		return options.return_source_map ? {css: '', source_map: null} : '';
+	}
+
+	const sass = get_sass_module();
+	const load_paths = normalize_array(options.load_paths);
+	const output_style = options.output_style || 'expanded';
+	const quiet_dependencies = options.quiet_dependencies === true;
+
+	const compile_options = {
+		syntax: options.syntax,
+		loadPaths: load_paths,
+		style: output_style,
+		quietDeps: quiet_dependencies
+	};
+
+	if (options.source_map === true) {
+		compile_options.sourceMap = true;
+		compile_options.sourceMapIncludeSources = options.source_map_include_sources === true;
+	}
+
+	const compile_result = sass.compileString(source_string, compile_options);
+	const css_output = compile_result.css || '';
+
+	if (options.return_source_map) {
+		return {
+			css: css_output,
+			source_map: compile_result.sourceMap || null
+		};
+	}
+
+	return css_output;
+};
+
+class SASS_Compiler {
+	constructor(spec = {}) {
+		this.load_paths = normalize_array(spec.load_paths);
+		this.output_style = spec.output_style || 'expanded';
+		this.quiet_dependencies = spec.quiet_dependencies === true;
+	}
+
+	compile_scss_string(scss_string, options = {}) {
+		return compile_string_with_sass(scss_string, {
+			syntax: 'scss',
+			load_paths: options.load_paths || this.load_paths,
+			output_style: options.output_style || this.output_style,
+			quiet_dependencies: options.quiet_dependencies !== undefined ? options.quiet_dependencies : this.quiet_dependencies,
+			source_map: options.source_map,
+			source_map_include_sources: options.source_map_include_sources,
+			return_source_map: options.return_source_map === true
+		});
+	}
+
+	compile_sass_string(sass_string, options = {}) {
+		return compile_string_with_sass(sass_string, {
+			syntax: 'indented',
+			load_paths: options.load_paths || this.load_paths,
+			output_style: options.output_style || this.output_style,
+			quiet_dependencies: options.quiet_dependencies !== undefined ? options.quiet_dependencies : this.quiet_dependencies,
+			source_map: options.source_map,
+			source_map_include_sources: options.source_map_include_sources,
+			return_source_map: options.return_source_map === true
+		});
+	}
+}
+
+module.exports = SASS_Compiler;

package/resources/processors/extractors/js/css_and_js/AST_Node/CSS_And_JS_From_JS_String_Using_AST_Node_Extractor.js

@@ -3,8 +3,7 @@
 // Extract the CSS and JS from JS, using AST_Node.
 //   AST_Node is part of jsgui3-server, possibly too slow though.
 
-const {obs, prom_or_cb} = require('fnl');
-const {tof, each} = require('jsgui3-html');
+const {obs} = require('fnl');
 
 
 const JS_AST_Node = require('../../../../../jsbuilder/JS_AST/JS_AST_Node');
@@ -52,27 +51,21 @@ class CSS_And_JS_From_JS_String_Using_AST_Node_Extractor extends Extractor {
             // This part is kind-of slow.
 
             //console.log('pre create js ast node');
-            console.log('Separating CSS and JS');
-            const js_ast_node = JS_AST_Node.from_spec(spec);
-            //console.log('post create js ast node');
-            
-            //const ae_nodes = [];
-
-            const arr_pos_spans_css_js_nodes = [];  // will remove them from the JS that's built / published.
-
-
-
-
-            // Just assigning a template literal to .css?
-            const css_ae_nodes = [];
-
-            // How about removing those parts from the JS AST?
-
-            
+            console.log('Separating styles and JS');
+            const js_ast_node = JS_AST_Node.from_spec(spec);
+            //console.log('post create js ast node');
+            
+            //const ae_nodes = [];
+
+            const arr_pos_spans_style_js_nodes = [];  // will remove them from the JS that's built / published.
+            const arr_css = [];
+            const arr_scss = [];
+            const arr_sass = [];
+            const arr_style_segments = [];
 
             js_ast_node.deep_iterate(node => {
 
-                const {start, end} = node.babel;
+                const {start, end} = node.babel;
 
                 // Maybe this part is slow? Don't think so though.
 
@@ -103,20 +96,29 @@ class CSS_And_JS_From_JS_String_Using_AST_Node_Extractor extends Extractor {
 
                             //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);
-
-                                //console.log('[start, end]', [start, end]);
-                                //console.log('node.source:\n' + node.source + '\n');
-
-                                arr_pos_spans_css_js_nodes.push([start, end]);
-
-                            }
+                            // the last ID being .css / .scss / .sass?
+                            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' || last_me_child.source === 'scss' || last_me_child.source === 'sass') {
+                                const tl_node = node_assigned.child_nodes[0];
+                                const tl_source = tl_node ? tl_node.source : '';
+
+                                const style_type = last_me_child.source;
+                                if (style_type === 'css') arr_css.push(tl_source);
+                                if (style_type === 'scss') arr_scss.push(tl_source);
+                                if (style_type === 'sass') arr_sass.push(tl_source);
+
+                                arr_style_segments.push({
+                                    type: style_type,
+                                    source: tl_source,
+                                    start,
+                                    end
+                                });
+
+                                arr_pos_spans_style_js_nodes.push([start, end]);
+                            }
 
                             // does it end '.css'?
                             //  break it down further?
@@ -137,39 +139,33 @@ class CSS_And_JS_From_JS_String_Using_AST_Node_Extractor extends Extractor {
             //console.log('ae_nodes', ae_nodes);
             //console.log('ae_nodes.length', ae_nodes.length);
             //console.log('css_ae_nodes.length', css_ae_nodes.length);
-            console.log('arr_pos_spans_css_js_nodes.length', arr_pos_spans_css_js_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');
-                const str_js_without_css_assignments = pos_span_string_extractor.extract(js_str, arr_pos_spans_css_js_nodes, {invert: true});
-                const res = {
-                    css: str_css,
-                    js: str_js_without_css_assignments
-                }
-                complete(res);
-            } else {
-                complete();
-            }
+            console.log('arr_pos_spans_style_js_nodes.length', arr_pos_spans_style_js_nodes.length);
+
+            const str_css = arr_css.join('\n');
+            const str_scss = arr_scss.join('\n');
+            const str_sass = arr_sass.join('\n');
+
+            if (arr_pos_spans_style_js_nodes.length > 1) {
+                arr_pos_spans_style_js_nodes.sort((a, b) => a[0] - b[0]);
+            }
+
+            let style_segments = arr_style_segments;
+            if (style_segments.length > 1) {
+                style_segments.sort((a, b) => a.start - b.start);
+            }
+            style_segments = style_segments.map(({type, source}) => ({type, source}));
+
+            const str_js_without_style_assignments = arr_pos_spans_style_js_nodes.length > 0
+                ? pos_span_string_extractor.extract(js_str, arr_pos_spans_style_js_nodes, {invert: true})
+                : js_str;
+
+            complete({
+                css: str_css,
+                scss: str_scss,
+                sass: str_sass,
+                style_segments,
+                js: str_js_without_style_assignments
+            });
 
             const [stop, pause, resume] = [() => {}, () => {}, () => {}];
             return [stop, pause, resume];
@@ -188,4 +184,4 @@ class CSS_And_JS_From_JS_String_Using_AST_Node_Extractor extends Extractor {
 
 }
 
-module.exports = CSS_And_JS_From_JS_String_Using_AST_Node_Extractor;
+module.exports = CSS_And_JS_From_JS_String_Using_AST_Node_Extractor;

package/resources/website-css-resource.js

@@ -27,7 +27,8 @@ var path = require('path'),
 	Cookies = require('cookies'),
 	fs2 = require('../fs2');
 
-const fnl = require('fnl');
+const fnl = require('fnl');
+const {compile_styles} = require('./processors/bundlers/style-bundler');
 
 var stringify = jsgui.stringify,
 	each = jsgui.each,
@@ -54,24 +55,27 @@ const prom_or_cb = fnl.prom_or_cb;
 
 // and a map of all css text?
 
-const compile_controls_css = controls => {
-	// go through all the controls, look for the .css property (on the class)
-
-	//let res = '';
-	const arr_css = [];
-
-
-	each(controls, Ctrl => {
-
-		const {css} = Ctrl;
-		if (css) arr_css.push(css);
-
-
-	});
-	const str_css = arr_css.join('\n');
-	return str_css;
-
-}
+const compile_controls_css = controls => {
+	// go through all the controls, look for the .css/.scss/.sass property (on the class)
+
+	const arr_css = [];
+	const arr_scss = [];
+	const arr_sass = [];
+
+	each(controls, Ctrl => {
+		const {css, scss, sass} = Ctrl;
+		if (css) arr_css.push(css);
+		if (scss) arr_scss.push(scss);
+		if (sass) arr_sass.push(sass);
+	});
+
+	const style_bundle = compile_styles({
+		css: arr_css,
+		scss: arr_scss,
+		sass: arr_sass
+	});
+	return style_bundle.css || '';
+}
 
 
 
@@ -409,4 +413,4 @@ Site_CSS.compile_controls_css = compile_controls_css;
 
 
 //});
-module.exports = Site_CSS;
+module.exports = Site_CSS;

package/resources/website-javascript-resource-processor.js

@@ -74,8 +74,12 @@ const babel = require('@babel/core');
 const stream_to_array = require('stream-to-array');
 const Resource_Processor = require('./website-resource-processor');
 
-const process_js = require('./process-js');
-const {analyse_js_doc_formatting, extract_client_js} = process_js;
+const process_js = require('./process-js');
+const {analyse_js_doc_formatting, extract_client_js} = process_js;
+
+const CSS_And_JS_From_JS_String_Extractor = require('./processors/extractors/js/css_and_js/CSS_And_JS_From_JS_String_Extractor');
+const {compile_styles} = require('./processors/bundlers/style-bundler');
+const css_and_js_from_js_string_extractor = new CSS_And_JS_From_JS_String_Extractor();
 
 
 
@@ -660,60 +664,16 @@ class Site_JavaScript_Resource_Processor extends Resource_Processor {
 					} 
 					*/
 
-					const filter_js_extract_control_css = (str_js_code) => {
-						// res = [css, js_no_css]
-						// Split the js lines.
-
-						const s_js = str_js_code.split('\n');
-						let within_class_css = false;
-						const control_css_lines = [];
-						const js_non_css_lines = [];
-						// and the non-css lines.
-						// And need to look for its stop.
-						// And leave the first and last line out of the css.
-						each(s_js, js_line => {
-							let placed_js_line = false;
-							const pos_class_css_begin = js_line.indexOf('.css = `');
-							// if its 0
-
-							if (pos_class_css_begin > -1) {
-								//console.log('js_line', js_line);
-								within_class_css = true;
-							}
-							// Put empty lines (back) into the js array?
-
-							if (within_class_css) {
-								//console.log('js_line', js_line);
-
-								const pos_control_css_end = js_line.indexOf('`;');
-								//console.log('pos_control_css_end', pos_control_css_end);
-								if (pos_control_css_end > -1) {
-									within_class_css = false;
-								} else {
-									if (pos_class_css_begin > -1) {
-
-									} else {
-										control_css_lines.push(js_line);
-									}
-									
-								}
-							} else {
-								js_non_css_lines.push(js_line);
-								placed_js_line = true;
-							}
-
-							if (!placed_js_line) {
-								js_non_css_lines.push('');
-							}
-							//let is_control_css_start = js_line.indexOf()
-
-							if (control_css_lines.length > 200) throw 'stop';
-
-						})
-						return [control_css_lines.join('\n'), js_non_css_lines.join('\n')];
-					}
-
-					let [str_css, str_js_no_css] = filter_js_extract_control_css(str_js_code);
+					const res_extract_styles = await css_and_js_from_js_string_extractor.extract(str_js_code);
+					let {
+						css = '',
+						scss = '',
+						sass = '',
+						style_segments = [],
+						js: str_js_no_css = str_js_code
+					} = res_extract_styles || {};
+					const style_bundle = compile_styles({css, scss, sass, style_segments}, options.style || {});
+					let str_css = style_bundle.css || '';
 
 					// Add the sourcemaps back? Its working.
 
@@ -906,4 +866,4 @@ class Site_JavaScript_Resource_Processor extends Resource_Processor {
 	
 }
 
-module.exports = Site_JavaScript_Resource_Processor;
+module.exports = Site_JavaScript_Resource_Processor;

package/resources/website-javascript-resource.js

@@ -162,8 +162,12 @@ const babel = require('@babel/core');
 const stream_to_array = require('stream-to-array');
 
 
-const process_js = require('./process-js');
-const {analyse_js_doc_formatting, extract_client_js} = process_js;
+const process_js = require('./process-js');
+const {analyse_js_doc_formatting, extract_client_js} = process_js;
+
+const CSS_And_JS_From_JS_String_Extractor = require('./processors/extractors/js/css_and_js/CSS_And_JS_From_JS_String_Extractor');
+const {compile_styles} = require('./processors/bundlers/style-bundler');
+const css_and_js_from_js_string_extractor = new CSS_And_JS_From_JS_String_Extractor();
 
 
 // A way of serving a file so that it includes custom code.
@@ -627,60 +631,16 @@ class Site_JavaScript extends Resource {
 					} 
 					*/
 
-					const filter_js_extract_control_css = (str_js_code) => {
-						// res = [css, js_no_css]
-						// Split the js lines.
-
-						const s_js = str_js_code.split('\n');
-						let within_class_css = false;
-						const control_css_lines = [];
-						const js_non_css_lines = [];
-						// and the non-css lines.
-						// And need to look for its stop.
-						// And leave the first and last line out of the css.
-						each(s_js, js_line => {
-							let placed_js_line = false;
-							const pos_class_css_begin = js_line.indexOf('.css = `');
-							// if its 0
-
-							if (pos_class_css_begin > -1) {
-								//console.log('js_line', js_line);
-								within_class_css = true;
-							}
-							// Put empty lines (back) into the js array?
-
-							if (within_class_css) {
-								//console.log('js_line', js_line);
-
-								const pos_control_css_end = js_line.indexOf('`;');
-								//console.log('pos_control_css_end', pos_control_css_end);
-								if (pos_control_css_end > -1) {
-									within_class_css = false;
-								} else {
-									if (pos_class_css_begin > -1) {
-
-									} else {
-										control_css_lines.push(js_line);
-									}
-									
-								}
-							} else {
-								js_non_css_lines.push(js_line);
-								placed_js_line = true;
-							}
-
-							if (!placed_js_line) {
-								js_non_css_lines.push('');
-							}
-							//let is_control_css_start = js_line.indexOf()
-
-							if (control_css_lines.length > 200) throw 'stop';
-
-						})
-						return [control_css_lines.join('\n'), js_non_css_lines.join('\n')];
-					}
-
-					let [str_css, str_js_no_css] = filter_js_extract_control_css(str_js_code);
+					const res_extract_styles = await css_and_js_from_js_string_extractor.extract(str_js_code);
+					let {
+						css = '',
+						scss = '',
+						sass = '',
+						style_segments = [],
+						js: str_js_no_css = str_js_code
+					} = res_extract_styles || {};
+					const style_bundle = compile_styles({css, scss, sass, style_segments}, options.style || {});
+					let str_css = style_bundle.css || '';
 
 					// Add the sourcemaps back? Its working.
 
@@ -872,4 +832,4 @@ class Site_JavaScript extends Resource {
 	
 }
 
-module.exports = Site_JavaScript;
+module.exports = Site_JavaScript;

package/serve-factory.js

@@ -12,9 +12,9 @@ const Static_Route_HTTP_Responder = require('./http/responders/static/Static_Rou
 const { get_port_or_free } = require('./port-utils');
 
 
-const prepare_webpage_route = (server, route, page_options = {}, defaults = {}) => {
-	return new Promise((resolve, reject) => {
-		try {
+const prepare_webpage_route = (server, route, page_options = {}, defaults = {}) => {
+	return new Promise((resolve, reject) => {
+		try {
 			const {
 				title,
 				name,
@@ -34,11 +34,13 @@ const prepare_webpage_route = (server, route, page_options = {}, defaults = {})
 				path: route
 			});
 
-			const publisher_options = {
-				webpage
-			};
-			if (guessed_client_path) publisher_options.src_path_client_js = guessed_client_path;
-			if (truthy(defaults.debug)) publisher_options.debug = true;
+			const publisher_options = {
+				webpage
+			};
+			if (guessed_client_path) publisher_options.src_path_client_js = guessed_client_path;
+			if (truthy(defaults.debug)) publisher_options.debug = true;
+			if (defaults.style !== undefined) publisher_options.style = defaults.style;
+			if (defaults.bundler !== undefined) publisher_options.bundler = defaults.bundler;
 
 			const webpage_publisher = new HTTP_Webpage_Publisher(publisher_options);
 			webpage_publisher.on('ready', (bundle) => {
@@ -138,13 +140,21 @@ module.exports = (Server) => {
             throw new Error('Invalid port specified for Server.serve');
         }
     
-        const host = serve_options.host || process.env.HOST || null;
-        const debug_enabled = serve_options.debug !== undefined ? truthy(serve_options.debug) : truthy(process.env.JSGUI_DEBUG);
+        const host = serve_options.host || process.env.HOST || null;
+        const debug_enabled = serve_options.debug !== undefined ? truthy(serve_options.debug) : truthy(process.env.JSGUI_DEBUG);
+        const style_config = serve_options.style;
+        const bundler_config = serve_options.bundler;
     
-        const server_spec = {
-            name: serve_options.name || 'jsgui3 server',
-            debug: debug_enabled
-        };
+        const server_spec = {
+            name: serve_options.name || 'jsgui3 server',
+            debug: debug_enabled
+        };
+        if (style_config !== undefined) {
+            server_spec.style = style_config;
+        }
+        if (bundler_config !== undefined) {
+            server_spec.bundler = bundler_config;
+        }
         if (typeof serve_options.ctrl === 'function') {
             server_spec.Ctrl = serve_options.ctrl;
         } else if (serve_options.api && typeof serve_options.api === 'object') {
@@ -173,16 +183,20 @@ module.exports = (Server) => {
 
         let has_started = false;
 
-        const extra_page_promises = additional_pages.map(([route, cfg]) => prepare_webpage_route(server_instance, route, cfg, {
-            caller_dir,
-            debug: debug_enabled
-        }));
-        if (serve_options.page_config && serve_options.page_route && serve_options.page_route !== '/') {
-            extra_page_promises.unshift(prepare_webpage_route(server_instance, serve_options.page_route, serve_options.page_config, {
-                caller_dir,
-                debug: debug_enabled
-            }));
-        }
+        const extra_page_promises = additional_pages.map(([route, cfg]) => prepare_webpage_route(server_instance, route, cfg, {
+            caller_dir,
+            debug: debug_enabled,
+            style: style_config,
+            bundler: bundler_config
+        }));
+        if (serve_options.page_config && serve_options.page_route && serve_options.page_route !== '/') {
+            extra_page_promises.unshift(prepare_webpage_route(server_instance, serve_options.page_route, serve_options.page_config, {
+                caller_dir,
+                debug: debug_enabled,
+                style: style_config,
+                bundler: bundler_config
+            }));
+        }
 
         if (serve_options.api && typeof serve_options.api === 'object') {
             console.log('🔍 DEBUG: Setting up API routes');