lilact 0.28.5 → 0.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lilact",
-  "version": "0.28.5",
+  "version": "0.29.0",
   "description": "A Little React/JSX Runtime Implementation for Browser",
   "repository": "github:arashkazemi/lilact",
   "homepage": "https://arashkazemi.github.io/lilact/",

package/src/components.jsx

@@ -169,148 +169,139 @@ class ComponentCore
 	// TODO: should componentDidUpdate be called after arranging/appending the outlet or before?
 	apply(next_props = this.props, next_state = this.next_state || this.state)
 	{
+		try {
 
-		let do_rerender = true;
+			let do_rerender = true;
 
-		if(this.outlet && this?.[MEMOIZED]) {
+			if(this.outlet && this?.[MEMOIZED]) {
 
-			if( shallowEqual(this.props, next_props, "children") && 
-				shallowEqual(this.props?.children, next_props?.children) ) {
-					do_rerender=false;
+				if( shallowEqual(this.props, next_props, "children") && 
+					shallowEqual(this.props?.children, next_props?.children) ) {
+						do_rerender=false;
+				}
 			}
-		}
 
-		if(do_rerender) {
+			if(do_rerender) {
 
-if(DEBUG) {
+	if(DEBUG) {
 
-			if(this.entity?.propTypes) {
-				PropTypes.checkPropTypes(this.entity.propTypes, this.props, 'prop', this.entity.name);
-			}
-			else if(this.component?.propTypes) {
-				PropTypes.checkPropTypes(this.component.propTypes, this.props, 'prop', this.component.name);
-			}
+				if(this.entity?.propTypes) {
+					PropTypes.checkPropTypes(this.entity.propTypes, this.props, 'prop', this.entity.name);
+				}
+				else if(this.component?.propTypes) {
+					PropTypes.checkPropTypes(this.component.propTypes, this.props, 'prop', this.component.name);
+				}
 
-}	
-			if(typeof(next_state)==='function') next_state = next_state(this.state);
+	}	
+				if(typeof(next_state)==='function') next_state = next_state(this.state);
 
-			if(this.component.constructor.defaultProps) {
-				next_props = {...this.component.constructor.defaultProps, ...next_props};
-			}
+				if(this.component.constructor.defaultProps) {
+					next_props = {...this.component.constructor.defaultProps, ...next_props};
+				}
 
-			if(this?.parent?.component?.context || this?.parent?.component?.getChildContext ) {
-				this.context = { ...this.parent.component.context, ...this.parent.component.getChildContext?.() };
+				if(this?.parent?.component?.context || this?.parent?.component?.getChildContext ) {
+					this.context = { ...this.parent.component.context, ...this.parent.component.getChildContext?.() };
 
-				if(DEBUG && this.component.constructor.contextTypes) {
-					PropTypes.checkPropTypes(this.component.constructor.contextTypes, this.context, 'context', this.entity.name);
+					if(DEBUG && this.component.constructor.contextTypes) {
+						PropTypes.checkPropTypes(this.component.constructor.contextTypes, this.context, 'context', this.entity.name);
+					}
 				}
-			}
 
-			if( this.component.shouldComponentUpdate && 
-				!this.component.shouldComponentUpdate
-					(next_state, next_props, this.context) ) return;
+				if( this.component.shouldComponentUpdate && 
+					!this.component.shouldComponentUpdate
+						(next_state, next_props, this.context) ) return;
 
 
-			if( typeof(this.entity)==='string' ) {
-				if(!(this.element instanceof Element)) {
+				if( typeof(this.entity)==='string' ) {
+					if(!(this.element instanceof Element)) {
 
-					if(this.is_svg || this.container.is_svg) {
-						this.is_svg = true;
-						this.element = document.createElementNS(SVG_NS, this.entity);
+						if(this.is_svg || this.container.is_svg) {
+							this.is_svg = true;
+							this.element = document.createElementNS(SVG_NS, this.entity);
+						}
+						else {
+							this.element = document.createElement(this.entity);
+						}
+						if(next_props?.defaultValue) this.element.value = String(next_props.defaultValue).slice(0, next_props?.maxLength);
+						if(next_props?.defaultChecked) this.element.checked = next_props.defaultChecked;
+					}
+					this.element[COMPONENT] = this.component;
+				}
+
+				if(next_props.ref) {
+					if(typeof(next_props.ref)==='function') {
+						next_props.ref(this.element || this.component);
 					}
 					else {
-						this.element = document.createElement(this.entity);
+						next_props.ref.current = this.element || this.component;
 					}
-					if(next_props?.defaultValue) this.element.value = String(next_props.defaultValue).slice(0, next_props?.maxLength);
-					if(next_props?.defaultChecked) this.element.checked = next_props.defaultChecked;
 				}
-				this.element[COMPONENT] = this.component;
-			}
 
-			if(next_props.ref) {
-				if(typeof(next_props.ref)==='function') {
-					next_props.ref(this.element || this.component);
+				if(next_props!==undefined && this.component.componentWillReceiveProps) {
+					this.component.componentWillReceiveProps(next_props);
 				}
-				else {
-					next_props.ref.current = this.element || this.component;
-				}
-			}
-
-			if(next_props!==undefined && this.component.componentWillReceiveProps) {
-				this.component.componentWillReceiveProps(next_props);
-			}
 
-			if(this.component.componentWillUpdate) {
-				this.component.componentWillUpdate(next_props, next_state);
-			}
+				if(this.component.componentWillUpdate) {
+					this.component.componentWillUpdate(next_props, next_state);
+				}
 
-			const prev_state = this.state, prev_props=this.props;
+				const prev_state = this.state, prev_props=this.props;
 
-			if(this.element) {
-				this.updateElementProps(next_props);
-			}
-			this.props = next_props;
+				if(this.element) {
+					this.updateElementProps(next_props);
+				}
+				this.props = next_props;
 
-			if(typeof this.next_state==='object') {
-				if(!this.state) this.state = {...next_state};
-				else Object.assign( this.state, next_state );
-			}
-			else if(this.next_state!==undefined) throw new Error('Component.setState only accepts objects or functions is new state.');
+				if(typeof this.next_state==='object') {
+					if(!this.state) this.state = {...next_state};
+					else Object.assign( this.state, next_state );
+				}
+				else if(this.next_state!==undefined) throw new Error('Component.setState only accepts objects or functions is new state.');
 
 
-			if(this.next_state) delete this.next_state;
+				if(this.next_state) delete this.next_state;
 
 
-			if(this.hooks!==undefined) {
-				this.hook_index = 0;
-				Lilact.current_component = [this, Lilact.current_component];
+				if(this.hooks!==undefined) {
+					this.hook_index = 0;
+					Lilact.current_component = [this, Lilact.current_component];
 
-				try {
 					this.outlet = this.component.render(next_props, {current: this.element || this.component} );
-				}
-				catch(e) {
-					renderErrorHandler(this, e);
-				}
 
-				Lilact.current_component = Lilact.current_component[1];
-			}
-			else {
-				try {
-					this.outlet = this.component.render({current: this.element || this.component});
+					Lilact.current_component = Lilact.current_component[1];
 				}
-				catch(e) {
-					renderErrorHandler(this, e);
+				else {
+					this.outlet = this.component.render({current: this.element || this.component});
 				}
-			}
-
-			if( this?.portal ) {
-				this.element = this.portal;
-			}
-
-			if(this.outlet?.constructor?.name!=='Array') {
-				this.outlet = [this.outlet];
-			}
-
-			this.outlet = [...this.outlet];			
-
-			for (let i=0;i<this.outlet.length;i++) {
-				let item = this.outlet[i];			
 
-				if(item===undefined || item===null || typeof(item)==='boolean') {
-					this.outlet.splice(i, 1);
-					i--;
+				if( this?.portal ) {
+					this.element = this.portal;
 				}
-				else if(typeof item==='function') {
-					const res = this.childFunctionHandler(item);
-					this.outlet.splice(i, 1, res);
-					i--;
-				} 
-				else if(item.constructor.name === 'Array') {
-					this.outlet.splice(i, 1, ...item);
-					i--;
+
+				if(this.outlet?.constructor?.name!=='Array') {
+					this.outlet = [this.outlet];
 				}
 				else {
-					try {
+					this.outlet = [...this.outlet];
+				}
+
+				for (let i=0;i<this.outlet.length;i++) {
+					let item = this.outlet[i];			
+
+					if(item===undefined || item===null || typeof(item)==='boolean') {
+						this.outlet.splice(i, 1);
+						i--;
+					}
+					else if(typeof item==='function') {
+						const res = this.childFunctionHandler(item);
+						this.outlet.splice(i, 1, res);
+						i--;
+					} 
+					else if(item.constructor.name === 'Array') {
+						this.outlet.splice(i, 1, ...item);
+						i--;
+					}
+					else {
 						const core = prepareCore(this, item);
 						this.outlet[i] = core;
 
@@ -329,23 +320,22 @@ if(DEBUG) {
 							}
 						}
 					}
-					catch(e) {
-						renderErrorHandler(this, e);
-					}
-
 				}
-			}
 
-			if(this.cache) this.cache.commit();
+				if(this.cache) this.cache.commit();
 
+				if(this.element) this.arrangeOutlet();
 
-			if(this.element) this.arrangeOutlet();
+				if(this.component.componentDidUpdate) {
+					this.component.componentDidUpdate(prev_props, prev_state, this.last_snapshot);
+				}
 
-			if(this.component.componentDidUpdate) {
-				this.component.componentDidUpdate(prev_props, prev_state, this.last_snapshot);
+				if(this.last_snapshot) delete this.last_snapshot;
 			}
 
-			if(this.last_snapshot) delete this.last_snapshot;
+		}
+		catch(e) {
+			renderErrorHandler(this, e);
 		}
 
 	}
@@ -610,7 +600,7 @@ if(DEBUG) {
 					core.container.appendElement(core);
 				}
 				else {
-					if(core.arrangeOutlet) core.arrangeOutlet();
+					if(core.arrangeOutlet && core.outlet) core.arrangeOutlet();
 
 					// todo: is there a way to remove this useless flag?
 					if(!core?.mounted) {
@@ -624,7 +614,6 @@ if(DEBUG) {
 				}
 			}
 		}
-
 	}
 
 	// note: override this to tailor function children like <Transition>{(state)=>{...}}</Transition>

package/src/errors.jsx

@@ -51,7 +51,7 @@ function number(value) {
 	return Number.isFinite(result) ? result : null;
 }
 
-function asError(value) {
+export function asError(value) {
 	if (value instanceof Error) return value;
 	if (value?.error instanceof Error) return value.error;
 
@@ -130,7 +130,7 @@ function blockInfo(error) {
 	const trace = traceBlock(error);
 	return trace == null
 		? null
-		: Lilact.blocks_info?.labels?.[trace];
+		: Lilact.blocksInfo?.labels?.[trace];
 }
 
 function mapLocation(mappings, line, column) {
@@ -408,7 +408,7 @@ export function scanBlockLabels(code, path) {
 	for (const match of String(code).matchAll(
 		/LILACTBLOCK(\d+):(\d+),(\d+):([^*]+)\*\//gm
 	)) {
-		Lilact.blocks_info.labels[match[1]] = {
+		Lilact.blocksInfo.labels[match[1]] = {
 			path,
 			line: Number(match[2]),
 			column: Number(match[3]),
@@ -417,7 +417,7 @@ export function scanBlockLabels(code, path) {
 	}
 }
 
-export const blocks_info = {
+export const blocksInfo = {
 	counter: 0,
 	labels: {},
 };

package/src/expscan.js

@@ -106,7 +106,7 @@ export function generateSequence(arr, labeler = labeler.bind(null, null))
 const import_export_regexp = /(?:i[C \n]*(?:(?:I|J|(?:\*[C \n]*a[C \n]*I))[C \n]*,[C \n]*)*(?:(?:(?:I(?:[C \n]*a[C \n]*I)?)|J|(?:\*[C \n]*a[C \n]*I))[C \n]*f[C \n]*)?S)|(?:e[C \n]*(?:(?:[*J][C \n]*f[C \n]*S)|(?:d[C \n]*[IFJ])|J|(?:[VF][c \n]*I)|I))|(?:r[c \n]*P)/mg;
 const props_regexp = /O[C \n]*(?:[Id](?:[C \n]*a[C \n]*I)?[C \n]*,[C \n]*)*(?:I(?:[C \n]*a[C \n]*I)?)[C \n]*O/mg;
 
-export function processImportExports(node, jsx)
+export function processImportExports(node, jsx, meta)
 {
 	const s = generateSequence(node.out, 
 					labeler.bind(null, 
@@ -150,6 +150,10 @@ export function processImportExports(node, jsx)
 
 	begins.push(node.end);
 	
+	meta.imports ??= {};
+
+	const imported_names = new Set;
+
 	for (const m of s.matchAll(import_export_regexp)) {
 
 		// Require (to inject requirer argument)
@@ -173,9 +177,10 @@ export function processImportExports(node, jsx)
 			if(s[i]==='.') continue;
 
 			const src = jsx.substring(node.out[m.index+imp.length-1].begin, node.out[m.index+imp.length-1].end);
-			const imports = {};
-			let star_imports = [];
-			let import_alls = [];
+			const named_imports = {};
+			let import_stars = [];
+			let import_defaults = [];
+
 
 			for(i = m.index+1;i<m.index+imp.length-1;i++) {
 
@@ -192,7 +197,7 @@ export function processImportExports(node, jsx)
 				case ',':
 					break;
 				case 'I': {
-					import_alls.push(node.out[i]);
+					import_defaults.push(node.out[i]);
 					continue;
 				}
 				case 'J': {
@@ -214,11 +219,11 @@ export function processImportExports(node, jsx)
 						if(sj[j]==='a') {
 							j++;
 							while(sj[j]===' ' || sj[j]==='\n' || sj[j]==='C') j++;
-							imports[ps[j]] = prop;
+							named_imports[ps[j]] = prop;
 							j++;
 						}
 						else {
-							imports[prop] = prop; 
+							named_imports[prop] = prop; 
 						}
 					}
 					continue;
@@ -230,7 +235,7 @@ export function processImportExports(node, jsx)
 					i++;
 					skip_spaces();
 
-					star_imports.push(node.out[i]); 
+					import_stars.push(node.out[i]); 
 					continue;
 				}
 				case 'S':
@@ -240,28 +245,31 @@ export function processImportExports(node, jsx)
 					}
 
 					let cjs = '';
-					for(const s of star_imports) {
+					for(const s of import_stars) {
 						cjs+=`const ${s} = require(${src},{requirer:module});\n`;
+						imported_names.add(s);
 					}
-					for(const s of import_alls) {
+					for(const s of import_defaults) {
 						cjs+=`const ${s} = require(${src},{requirer:module, checkExport: ['default']}).default;\n`;
+						imported_names.add(s);
 					}
-					if(Object.keys(imports).length) {
+					if(Object.keys(named_imports).length) {
 						let o = '{';
 						let ls = '[';
 
-						for(const p in imports) {
+						for(const p in named_imports) {
+							imported_names.add(p);
 							if(o.length>1) {
 								o+=',';
 								ls+=',';
 							}
-							if(p===imports[p]) {
+							if(p===named_imports[p]) {
 								o+=p;
 								ls+=`'${p}'`;
 							}
 							else {
-								o+=p+":"+imports[p];
-								ls+=`'${imports[p]}'`;
+								o+=p+":"+named_imports[p];
+								ls+=`'${named_imports[p]}'`;
 							}
 
 						}
@@ -272,6 +280,7 @@ export function processImportExports(node, jsx)
 					}
 					else if(cjs.length===0) {
 						cjs+=`require(${src},{requirer:module})`;
+						named_imports[''] = src;
 					}
 
 					// 2. add nodes
@@ -279,6 +288,15 @@ export function processImportExports(node, jsx)
 					continue;
 				}
 			}
+
+			const ss = src.slice(1,src.length-1);
+			if(meta.imports[ss]) {
+				meta.imports[ss] = { import_stars: [ ...meta.imports[ss].import_stars, ...import_stars],
+															import_defaults: [ ...meta.imports[ss].import_defaults, ...import_defaults],
+															named_imports: { ...meta.imports[ss].named_imports, ...named_imports } }
+			}
+			else meta.imports[ss] = {import_stars, import_defaults, named_imports };
+
 		}
 		// Export
 		else {
@@ -418,4 +436,11 @@ export function processImportExports(node, jsx)
 			}
 		}
 	}
+
+	if(meta.imported_names) {
+    meta.imported_names = new Set([...meta.imported_names,...imported_names]);
+	}
+	else {
+		meta.imported_names = imported_names;
+	}
 }