lilact 0.15.0 → 0.15.2

package/src/components.jsx

@@ -28,8 +28,12 @@
 
 */
 
+import Lilact from './lilact.jsx';
+
 import { CORE, COMPONENT, TEXT, IS_ZOMBIE, IDX, CHILD_CLASS_ADDENDUM, MEMOIZED } from "./symbols.jsx"
-import { shallowEqual } from "./misc.jsx";
+import { shallowEqual, toBool, isClass } from "./misc.jsx";
+
+import PropTypes from 'prop-types';
 
 /* 
 ComponentCache is for internal use. It is the heart of the JSX runtime,
@@ -165,10 +169,10 @@ class ComponentCore
 if(DEBUG) {
 
 			if(this.entity?.propTypes) {
-				Lilact.PropTypes.checkPropTypes(this.entity.propTypes, this.props, 'prop', this.entity.name);
+				PropTypes.checkPropTypes(this.entity.propTypes, this.props, 'prop', this.entity.name);
 			}
 			else if(this.component?.propTypes) {
-				Lilact.PropTypes.checkPropTypes(this.component.propTypes, this.props, 'prop', this.component.name);
+				PropTypes.checkPropTypes(this.component.propTypes, this.props, 'prop', this.component.name);
 			}
 
 }	
@@ -404,7 +408,7 @@ if(DEBUG) {
 
 			if( !patch.hasOwnProperty(a) ) {
 
-				if( Lilact.events_set.has(al) ) {
+				if( events_set.has(al) ) {
 					this.event_detachers[al]();
 				}
 				else {
@@ -416,17 +420,17 @@ if(DEBUG) {
 		for(let a in patch) {
 			const al = a.toLowerCase();
 
-			if( Lilact.special_attributes.has(al) ) continue;
+			if( special_attributes.has(al) ) continue;
 
 			if( patch===this.props || !Lilact.defaultIsEqual(patch[a], this.props[a]) || force  ) {
 
-				if( Lilact.events_set.has(al) ) {
+				if( events_set.has(al) ) {
 					this.event_detachers ??= {};
 					this.event_detachers[al]?.();
 					this.event_detachers[al] = Lilact.addWrappedEventListener(this.element, al.substring(2), patch[a]);
 				}
-				else if( Lilact.capture_events_set.hasOwnProperty(al) ) {
-					const alc = Lilact.capture_events_set[al];
+				else if( capture_events_set.hasOwnProperty(al) ) {
+					const alc = capture_events_set[al];
 					this.event_detachers ??= {};
 					this.event_detachers[al]?.();
 					this.event_detachers[al] = 
@@ -438,7 +442,7 @@ if(DEBUG) {
 					}
 					else {
 						for(const x in patch[a]) {
-							if( Lilact.length_css_attributes_set.has(x) ) {
+							if( length_css_attributes_set.has(x) ) {
 								if(isFinite(patch[a][x])) {
 									patch[a][x]+='px';
 								}
@@ -447,11 +451,11 @@ if(DEBUG) {
 						Object.assign(this.element.style, patch[a]);
 					}
 				}
-				else if(Lilact.boolean_html_attributes_set.has(a)) { // not lower cased(al), as it is set as a js property
-					this.element[a] = Lilact.toBool(patch[a]);
+				else if(boolean_html_attributes_set.has(a)) { // not lower cased(al), as it is set as a js property
+					this.element[a] = toBool(patch[a]);
 				}
 				else if(a==='autoFocus') { // not lower cased(al), as it is set as a js property
-					this.element['autofocus'] = Lilact.toBool(patch[a]);
+					this.element['autofocus'] = toBool(patch[a]);
 				}
 				else if(a==='htmlFor') { // not lower cased(al), as it is set as a js property
 					this.element.setAttribute('for', patch[a]);
@@ -627,7 +631,7 @@ function constructFunc(core, parent) // returns {text} or component, and not com
 		}
 		else {
 
-			if( Lilact.isClass(core.entity) ) {
+			if( isClass(core.entity) ) {
 				if(core.entity?.defaultProps) {
 					core.props = { ...core.entity.defaultProps, ...core.props };
 				}
@@ -709,19 +713,18 @@ function prepareCore(parent, core)
 function doUpdates()
 {
 	requestAnimationFrame(()=>{
-		let layout_effects = Lilact.layout_effects;
-		let update_cbs = Lilact.update_cbs;
-		let update_set = Lilact.update_set;
+		let _layout_effects = Lilact.layout_effects;
+		let _update_cbs = Lilact.update_cbs;
+		let _update_set = Lilact.update_set;
 
 		Lilact.layout_effects = new Set;
 		Lilact.update_cbs = new Set;
 		Lilact.update_set = new Set;
 
-		for(const le of layout_effects) le();
-
-		for(const u of update_set)  u.apply();
-		for(const cb of update_cbs) cb();
+		for(const le of _layout_effects) le();
 
+		for(const u of _update_set)  u.apply();
+		for(const cb of _update_cbs) cb();
 	});
 }
 
@@ -881,7 +884,7 @@ export class Component
 	{
 		if(this[CORE].entity?.displayName) return this[CORE].entity?.displayName;
 		if(typeof(this[CORE].entity)==='string') return this[CORE].entity;
-		if( Lilact.isClass(this[CORE].entity) ) this[CORE].entity.constructor.name;
+		if( isClass(this[CORE].entity) ) this[CORE].entity.constructor.name;
 		if( typeof(this[CORE].entity)==='function' ) return this[CORE].entity.name;
 		return "Component";
 	}
@@ -1135,4 +1138,62 @@ export function render(component, element)
 }
 
 /** @ignore */
-export const createElement = createComponent;
+export const createElement = createComponent;
+
+/** @ignore */
+export let current_component = [];
+/** @ignore */
+
+export let update_set  = new Set;
+/** @ignore */
+export let update_cbs  = new Set;
+/** @ignore */
+export let roots  = new Set;
+/** @ignore */
+export let layout_effects = new Set;
+
+/** @ignore */
+export const special_attributes = new Set([
+		"classname", "ref", "action", "lilact_jsx_loc", "children", "key",
+		"defaultvalue", "defaultchecked"
+	]);
+
+/** @ignore */
+export const events_set = new Set([
+	"onafterprint","onbeforeprint","onbeforeunload","onerror","onhashchange","onload","onmessage",
+	"onoffline","ononline","onpagehide","onpageshow","onpopstate","onresize","onstorage","onunload",
+	"onblur","onchange","oncontextmenu","onfocus","oninput","oninvalid","onreset","onsearch","onselect",
+	"onsubmit",
+	"onkeydown","onkeypress","onkeyup",
+	"onclick","ondblclick","onmousedown","onmousemove","onmouseout","onmouseover","onmouseup","onmousewheel",
+	"onwheel",
+	"ondrag","ondragend","ondragenter","ondragleave","ondragover","ondragstart","ondrop","onscroll",
+	"oncopy","oncut","onpaste",
+	"onabort","oncanplay","oncanplaythrough","oncuechange","ondurationchange","onemptied","onended","onerror",
+	"onloadeddata","onloadedmetadata","onloadstart","onpause","onplay","onplaying","onprogress","onratechange",
+	"onseeked","onseeking","onstalled","onsuspend","ontimeupdate","onvolumechange","onwaiting",
+	"ontoggle",
+	"onpointerdown", "onpointerup", "onpointermove", "onpointercancel", "onpointerover", "onpointerout", 
+	"onpointerenter", "onpointerleave"
+]);
+
+/** @ignore */
+export const capture_events_set = {};
+for (const x of events_set) {
+  capture_events_set[x+"capture"] = x;
+}
+
+/** @ignore */
+export const length_css_attributes_set = new Set([
+	"width","height","minWidth","minHeight","maxWidth","maxHeight","top","right","bottom","left","margin",
+	"marginTop","marginRight","marginBottom","marginLeft","padding","paddingTop","paddingRight","paddingBottom",
+	"paddingLeft","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth",
+	"outlineWidth","fontSize","lineHeight","letterSpacing","wordSpacing","textIndent","borderRadius",
+	"borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius",
+	"columnGap","rowGap","gap"
+]);
+
+/** @ignore */
+export const boolean_html_attributes_set = new 
+	Set(["disabled", "readOnly", "required", "checked", "multiple",
+			 "hidden","open","loop","muted","controls","playsInline","allowFullScreen"]);

package/src/errors.jsx

@@ -27,8 +27,11 @@
 	THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 */
+import Lilact from './lilact.jsx';
 
-
+import { required_scripts } from './run.jsx'
+import { pauseTimers } from './timers.jsx'
+import { css } from "@emotion/css";
 
 // Lilact API
 
@@ -160,7 +163,7 @@ export function traceError(error)
 		let mps;
 
 		if(loc.url) {
-			const rm = Lilact.required_scripts[obj.fileName];
+			const rm = required_scripts[obj.fileName];
 			mps = rm.mappings;
 			
 			const mloc = mapLocation(mps, obj.lineNumber-1, obj.columnNumber-1);
@@ -186,7 +189,7 @@ export function traceError(error)
 				obj.fileName = blk.path;
 				obj.label = blk.label;
 
-				mps = Lilact.required_scripts[blk.path].mappings;
+				mps = required_scripts[blk.path].mappings;
 
 				loc = mapLocation(mps, loc.line-1, loc.col-1);
 
@@ -227,12 +230,11 @@ export function traceError(error)
  */
 export function globalErrorHandler(error)
 {
-	Lilact.pauseTimers();
 	if(error.error) error = error.error;
 
-	error = Lilact.traceError(error);
+	error = traceError(error);
 
-	const cls = Lilact.emotion.css(`
+	const cls = css(`
 			background: linear-gradient(135deg, #fff2f2d4, #ffffffd4);
 			backdrop-filter: blur(10px);
 			border: 1px solid rgba(255,255,255,.25);
@@ -261,7 +263,7 @@ export function globalErrorHandler(error)
 		<b>${error.fileName?'At '+error.fileName:''}
 		${Number.isFinite(error.lineNumber)?": Line "+(error.lineNumber+1):""}</b><br><br>
 		<b>${error.name}</b>:&nbsp;<span>${error.message}</span><br><br>
-		${Lilact.required_scripts[error.fileName]?'<code><pre></pre><pre><red></red></pre><pre></pre></code>':''}
+		${required_scripts[error.fileName]?'<code><pre></pre><pre><red></red></pre><pre></pre></code>':''}
 		${error._error.componentStackLog?'<br>Component Stack:<br><code><pre>'+error._error.componentStackLog+'</pre></code>':''}
 		`;
 
@@ -270,8 +272,8 @@ export function globalErrorHandler(error)
 
 	const pres = el.querySelectorAll('pre');
 
-	if(Lilact.required_scripts[error.fileName]) {
-		const lines = Lilact.required_scripts[error.fileName].code.split("\n");
+	if(required_scripts[error.fileName]) {
+		const lines = required_scripts[error.fileName].code.split("\n");
 
 		if(lines?.[error.lineNumber-1])
 			pres[0].innerText = lines[error.lineNumber-1];

package/src/hooks.jsx

@@ -28,7 +28,8 @@
 
 */
 
-import { isEmpty } from "./misc.jsx"
+import Lilact from './lilact.jsx';
+import { isEmpty, shallowEqual } from "./misc.jsx"
 
 import { CORE, COMPONENT } from "./symbols.jsx"
 
@@ -93,7 +94,7 @@ export function useCallback(callback, deps=undefined)
 	const hk = useHook();
 
 	if( !isEmpty(hk) ) {
-		if(deps!==undefined && hk?.deps!==undefined && Lilact.shallowEqual(deps, hk.deps)) {
+		if(deps!==undefined && hk?.deps!==undefined && shallowEqual(deps, hk.deps)) {
 			return hk.callback;
 		}
 	}
@@ -280,7 +281,7 @@ export function useLayoutEffect(effect, deps=undefined)
 	const hk = useHook();
 
 	if( !isEmpty(hk) ) {
-		if(deps!==undefined && hk?.deps!==undefined && Lilact.shallowEqual(deps, hk.deps)) return;
+		if(deps!==undefined && hk?.deps!==undefined && shallowEqual(deps, hk.deps)) return;
 	}
 
 	if(hk?.cleanup) {
@@ -308,7 +309,7 @@ export function useEffect(effect, deps=undefined)
 	const hk = useHook();
 
 	if( !isEmpty(hk) ) {
-		if(deps!==undefined && hk?.deps!==undefined && Lilact.shallowEqual(deps, hk.deps)) return;
+		if(deps!==undefined && hk?.deps!==undefined && shallowEqual(deps, hk.deps)) return;
 	}
 
 	if(hk?.cleanup) {
@@ -336,7 +337,7 @@ export function useMemo(factory,deps=undefined)
 	const hk = useHook();
 
 	if( !isEmpty(hk) ) {
-		if(deps!==undefined && hk?.deps!==undefined && Lilact.shallowEqual(deps, hk.deps)) {
+		if(deps!==undefined && hk?.deps!==undefined && shallowEqual(deps, hk.deps)) {
 			return hk.value;
 		}
 	}
@@ -357,7 +358,7 @@ export function useMemo(factory,deps=undefined)
 export function useActionState(action, initialState)
 {
 	const hk = useHook();
-	const [is_pending, tran_start_func] = Lilact.useTransition();
+	const [is_pending, tran_start_func] = useTransition();
 
 	if( isEmpty(hk) ) {
 
@@ -475,7 +476,7 @@ export function useDeferredValue(value, initialValue)
  */
 export function useImperativeHandle(ref, factory, deps=undefined)
 {
-	if(deps!==undefined && ref?.deps!==undefined && Lilact.shallowEqual(deps, ref.deps)) return;
+	if(deps!==undefined && ref?.deps!==undefined && shallowEqual(deps, ref.deps)) return;
 
 	ref.deps = deps;
 

package/src/misc.jsx

@@ -349,59 +349,3 @@ export let eval_num = 0;//Math.floor(Math.random()*10000);
 
 
 // todo =improve these stacks
-/** @ignore */
-export let current_component = [];
-/** @ignore */
-export let update_set  = new Set;
-/** @ignore */
-export let update_cbs  = new Set;
-/** @ignore */
-export let roots  = new Set;
-/** @ignore */
-export let layout_effects = new Set;
-
-/** @ignore */
-export const special_attributes = new Set([
-		"classname", "ref", "action", "lilact_jsx_loc", "children", "key",
-		"defaultvalue", "defaultchecked"
-	]);
-
-/** @ignore */
-export const events_set = new Set([
-	"onafterprint","onbeforeprint","onbeforeunload","onerror","onhashchange","onload","onmessage",
-	"onoffline","ononline","onpagehide","onpageshow","onpopstate","onresize","onstorage","onunload",
-	"onblur","onchange","oncontextmenu","onfocus","oninput","oninvalid","onreset","onsearch","onselect",
-	"onsubmit",
-	"onkeydown","onkeypress","onkeyup",
-	"onclick","ondblclick","onmousedown","onmousemove","onmouseout","onmouseover","onmouseup","onmousewheel",
-	"onwheel",
-	"ondrag","ondragend","ondragenter","ondragleave","ondragover","ondragstart","ondrop","onscroll",
-	"oncopy","oncut","onpaste",
-	"onabort","oncanplay","oncanplaythrough","oncuechange","ondurationchange","onemptied","onended","onerror",
-	"onloadeddata","onloadedmetadata","onloadstart","onpause","onplay","onplaying","onprogress","onratechange",
-	"onseeked","onseeking","onstalled","onsuspend","ontimeupdate","onvolumechange","onwaiting",
-	"ontoggle",
-	"onpointerdown", "onpointerup", "onpointermove", "onpointercancel", "onpointerover", "onpointerout", 
-	"onpointerenter", "onpointerleave"
-]);
-
-/** @ignore */
-export const capture_events_set = {};
-for (const x of events_set) {
-  capture_events_set[x+"capture"] = x;
-}
-
-/** @ignore */
-export const length_css_attributes_set = new Set([
-	"width","height","minWidth","minHeight","maxWidth","maxHeight","top","right","bottom","left","margin",
-	"marginTop","marginRight","marginBottom","marginLeft","padding","paddingTop","paddingRight","paddingBottom",
-	"paddingLeft","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth",
-	"outlineWidth","fontSize","lineHeight","letterSpacing","wordSpacing","textIndent","borderRadius",
-	"borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius",
-	"columnGap","rowGap","gap"
-]);
-
-/** @ignore */
-export const boolean_html_attributes_set = new 
-	Set(["disabled", "readOnly", "required", "checked", "multiple",
-			 "hidden","open","loop","muted","controls","playsInline","allowFullScreen"]);

package/src/router.jsx

@@ -36,8 +36,11 @@ import {Children} from "./misc.jsx"
 const RouterContext = createContext(null);
 const RouteContext = createContext({ params: {} });
 
-// --- HashRouter (as before) ---
-const createURL = (to) => (typeof to === "string" ? to : (to.pathname || "") + (to.search || "") + (to.hash || ""));
+const createURL = (to) =>
+  typeof to === "string" ? to : (to.pathname || "") + (to.search || "") + (to.hash || "");
+
+const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
 
 /**
  * Hash-based router component that syncs navigation state with the URL hash (#...).
@@ -47,54 +50,90 @@ const createURL = (to) => (typeof to === "string" ? to : (to.pathname || "") + (
  * @param [props.basename=""] - Optional base path prefix applied to all route paths.
  */
 export function HashRouter({ children, basename = "" }) {
-	const readLocation = () => {
-		const raw = window.location.hash || "#/";
-		const full = raw.slice(1);
-		const withoutBase = full.replace(new RegExp(`^${basename}`), "") || "/";
-		const [pathAndSearch, hashPart] = withoutBase.split("#");
-		const [path, search = ""] = pathAndSearch.split("?");
-		return {
-			pathname: path || "/",
-			search: search ? "?" + search : "",
-			hash: hashPart ? "#" + hashPart : "",
-			state: history.state?.__state,
-		};
-	};
-
-	const [location, setLocation] = useState(readLocation);
-	useEffect(() => {
-		const onChange = () => setLocation(readLocation());
-
-		window.addEventListener("hashchange", onChange);
-		window.addEventListener("popstate", onChange);
-
-		// initialize once in case hash/state are already set
-		onChange();
-
-		return () => {
-			window.removeEventListener("hashchange", onChange);
-			window.removeEventListener("popstate", onChange);
-		};
-	}, [basename]);
-
-	const navigate = useCallback((to, { replace = false, state } = {}) => {
-		if (typeof to === "number") {
-			history.go(to);
-			return;
-		}
-
-		const url = createURL(to);
-		const href = "#" + (basename + url);
-
-		if (replace) history.replaceState({ __state: state }, "", href);
-		else history.pushState({ __state: state }, "", href);
-
-		setLocation(readLocation());
-	}, [basename]);
-
-	return <RouterContext.Provider value={{ location, navigate, basename }}>{children}</RouterContext.Provider>;
+  const readLocation = () => {
+    const raw = window.location.hash || "#/";
+    const full = raw.slice(1);
+
+    const baseRe = new RegExp("^" + escapeRegExp(basename));
+    const withoutBase = full.replace(baseRe, "") || "/";
+
+    const [pathAndSearch, hashPart] = withoutBase.split("#");
+    const [path, search = ""] = pathAndSearch.split("?");
+
+    return {
+      pathname: path || "/",
+      search: search ? "?" + search : "",
+      hash: hashPart ? "#" + hashPart : "",
+      state: history.state?.__state,
+    };
+  };
+
+  const [location, setLocation] = useState(readLocation);
+
+  useEffect(() => {
+    const onChange = () => setLocation(readLocation());
+
+    window.addEventListener("hashchange", onChange);
+    window.addEventListener("popstate", onChange);
+
+    // initialize once
+    onChange();
+
+    return () => {
+      window.removeEventListener("hashchange", onChange);
+      window.removeEventListener("popstate", onChange);
+    };
+  }, [basename]);
+
+  const navigate = useCallback((to, { replace = false, state } = {}) => {
+    if (typeof to === "number") {
+      // Wait for the real popstate (don’t rely on synchronous timing)
+      return new Promise((resolve) => {
+        let done = false;
+
+        const cleanup = (fn) => {
+          if (done) return;
+          done = true;
+          window.removeEventListener("popstate", onPop);
+          window.removeEventListener("hashchange", onHash);
+          fn?.();
+          resolve();
+        };
+
+        const onPop = () => cleanup(() => setLocation(readLocation()));
+        const onHash = () => cleanup(() => setLocation(readLocation()));
+
+        window.addEventListener("popstate", onPop, { once: true });
+        window.addEventListener("hashchange", onHash, { once: true });
+
+        // Fallback: in case popstate/hashchange timing is weird in a given browser
+        setTimeout(() => cleanup(() => setLocation(readLocation())), 0);
+
+        history.go(to);
+      });
+    }
+
+    const url = createURL(to);
+    const href = "#" + (basename + url);
+
+    if (replace) {
+      history.replaceState({ __state: state }, "", href);
+    } else {
+      history.pushState({ __state: state }, "", href);
+    }
+
+    // Update immediately for the initiating navigation.
+    setLocation(readLocation());
+  }, [basename]);
+
+  return (
+    <RouterContext.Provider value={{ location, navigate, basename }}>
+      {children}
+    </RouterContext.Provider>
+  );
 }
 
+
 /**
  * Hook that returns the current location object (path, search, hash, and navigation state).
  *

package/src/run.jsx

@@ -70,7 +70,7 @@ export function run(jsx, path=`InlineJSX-${++Lilact.eval_num}`, is_inline=true)
 			appendSourcemap: false,
 			blocks_info: Lilact.blocks_info,
 
-			injectTraceLabels: true,
+			injectTraceLabels: false,
 		} );
 	}
 	catch(e) {

package/src/symbols.jsx

@@ -54,6 +54,7 @@ export const [
 				Symbol.for('LILACT:IDX'),
 				Symbol.for('LILACT:CHILD_CLASS_ADDENDUM'),
 				Symbol.for('LILACT:MEMOIZED'),
+				Symbol.for('LILACT:LAZY'),
 
 				Symbol.for('LILACT:TIMERS:DUE'),
 				Symbol.for('LILACT:TIMERS:REPEAT'),

package/src/transition.jsx

@@ -27,6 +27,8 @@
 	THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 */
+import Lilact from './lilact.jsx';
+
 import { setTimeout, clearTimeout } from "./timers.jsx"
 import { Children } from "./misc.jsx"
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "./hooks.jsx"