lilact 0.9.0 → 0.10.0

package/src/errors.jsx

@@ -58,6 +58,7 @@ function getErrorLocation(err) // works for both error and error-event, and also
 // Chrome/Edge:   at fn (eval:xxx:LINE:COL)
 // Firefox:       fn@eval:xxx:LINE:COL
 // Safari:        @eval:xxx:LINE:COL   (sometimes)
+/** @ignore */
 function parseEvalLocationFromStack(stack, urlPrefix = "eval:/") {
   const raw = typeof stack === "string" ? stack : String(stack || "");
   const lines = raw.split(/\r?\n/);
@@ -125,34 +126,36 @@ export function scanBlockLabels(code, path)
  * Debug tool to get the Lilact traced location of an error. It can also produce some block based stack trace 
  * if `Lilact.transpilerConfig.enableLabelStack` is set to `true` before loading the script. This is `false`
  * by default for efficiency.
+ * 
+ * @param error - The error object 
  *
  * @returns A new object that includes `path`, `row`, `col`, `msg`, `name`, and optional `stack`. 
  * The exception itself is stored as `err`.
  */
-export function traceError(err)
+export function traceError(error)
 {
-	if(err?.is_traced) {
-		return err;
+	if(error?.is_traced) {
+		return error;
 	}
 
-	const loc = parseEvalLocationFromStack(err.stack);
+	const loc = parseEvalLocationFromStack(error.stack);
 
 	const obj = {
-		fileName: loc.url?.slice(6) || err.fileName,
+		fileName: loc.url?.slice(6) || error.fileName,
 		
 		lineNumber: loc.line,
 		columnNumber: loc.col,
 
-		message: err.message,
-		name: err.name,
+		message: error.message,
+		name: error.name,
 
-		stack: err.stack,
-		_error: err,
+		stack: error.stack,
+		_error: error,
 
 		is_traced: true
 	};		
 
-	if( err.name!=='JSXParseError' ) {
+	if( error.name!=='JSXParseError' ) {
 
 		let mps;
 
@@ -165,18 +168,18 @@ export function traceError(err)
 			obj.lineNumber = mloc.line;
 			obj.columnNumber = mloc.col;
 		}
-		else if( err.lilact_trace!==undefined) {
+		else if( error.lilact_trace!==undefined) {
 
-			let loc = getErrorLocation(err);
+			let loc = getErrorLocation(error);
 
 			let mps;
 			let blk;
 
-			if(typeof(err.lilact_trace)==='object') {
-				blk = Lilact.blocks_info.labels[err.lilact_trace[0]];
+			if(typeof(error.lilact_trace)==='object') {
+				blk = Lilact.blocks_info.labels[error.lilact_trace[0]];
 			}
 			else {
-				blk = Lilact.blocks_info.labels[err.lilact_trace];
+				blk = Lilact.blocks_info.labels[error.lilact_trace];
 			}
 
 			if(blk) {
@@ -194,8 +197,8 @@ export function traceError(err)
 		
 	}
 	else {
-		const loc = getErrorLocation(err);
-		if(err.fileName) obj.fileName = err.fileName;
+		const loc = getErrorLocation(error);
+		if(error.fileName) obj.fileName = error.fileName;
 		obj.lineNumber = loc.line;
 		obj.columnNumber = loc.col;
 	}
@@ -219,14 +222,15 @@ export function traceError(err)
  *	Lilact.globalErrorHandler(e);
  * });
  * `
+ * @param error - The error object 
  * 
  */
-export function globalErrorHandler(err)
+export function globalErrorHandler(error)
 {
 	Lilact.pauseTimers();
-	if(err.error) err = err.error;
+	if(error.error) error = error.error;
 
-	err = Lilact.traceError(err);
+	error = Lilact.traceError(error);
 
 	const cls = Lilact.emotion.css(`
 			background: linear-gradient(135deg, #fff2f2d4, #ffffffd4);
@@ -254,11 +258,11 @@ export function globalErrorHandler(err)
 	//<b>⚠</b> 
 	el.innerHTML = 
 		`<h3 style=""><red>Error!</red></h3>
-		<b>${err.fileName?'At '+err.fileName:''}
-		${Number.isFinite(err.lineNumber)?": Line "+(err.lineNumber+1):""}</b><br><br>
-		<b>${err.name}</b>:&nbsp;<span>${err.message}</span><br><br>
-		${Lilact.required_scripts[err.fileName]?'<code><pre></pre><pre><red></red></pre><pre></pre></code>':''}
-		${err._error.componentStackLog?'<br>Component Stack:<br><code><pre>'+err._error.componentStackLog+'</pre></code>':''}
+		<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>':''}
+		${error._error.componentStackLog?'<br>Component Stack:<br><code><pre>'+error._error.componentStackLog+'</pre></code>':''}
 		`;
 
 
@@ -266,16 +270,16 @@ export function globalErrorHandler(err)
 
 	const pres = el.querySelectorAll('pre');
 
-	if(Lilact.required_scripts[err.fileName]) {
-		const lines = Lilact.required_scripts[err.fileName].code.split("\n");
+	if(Lilact.required_scripts[error.fileName]) {
+		const lines = Lilact.required_scripts[error.fileName].code.split("\n");
 
-		if(lines?.[err.lineNumber-1])
-			pres[0].innerText = lines[err.lineNumber-1];
+		if(lines?.[error.lineNumber-1])
+			pres[0].innerText = lines[error.lineNumber-1];
 
-		if(lines?.[err.lineNumber]) el.querySelector('pre red').innerText = lines[err.lineNumber];
+		if(lines?.[error.lineNumber]) el.querySelector('pre red').innerText = lines[error.lineNumber];
 
-		if(lines?.[err.lineNumber+1])
-			pres[2].innerText = lines[err.lineNumber+1];
+		if(lines?.[error.lineNumber+1])
+			pres[2].innerText = lines[error.lineNumber+1];
 	}
 
 	el.showModal();

package/src/events.jsx

@@ -57,79 +57,207 @@ if (typeof Event !== 'undefined' && !Event.prototype.composedPath) {
 // Event pool for reuse
 const _pool = [];
 const MAX_POOL_SIZE = 10;
+const POINTER_TYPES = ["mouse", "pen", "touch"];
 
 export function createSyntheticEvent(nativeEvent, currentTarget) {
-	// Reuse object from pool if available
-	const e = _pool.length ? _pool.pop() : {};
-
-	e.nativeEvent = nativeEvent;
-	e.type = nativeEvent.type;
-	e.target = nativeEvent.target || nativeEvent.srcElement || null;
-	e.currentTarget = currentTarget || nativeEvent.currentTarget || null;
-	e.timeStamp = nativeEvent.timeStamp || Date.now();
-	e.defaultPrevented = !!(nativeEvent.defaultPrevented);
-	e.isPropagationStopped = false;
-	e.isPersistent = false;
-
-	e.isDefaultPrevented = () => e.defaultPrevented;
-	e.preventDefault = () => {
-		if (nativeEvent.preventDefault) nativeEvent.preventDefault();
-		e.defaultPrevented = true;
-	};
-	e.stopPropagation = () => {
-		if (nativeEvent.stopPropagation) nativeEvent.stopPropagation();
-		e.isPropagationStopped = true;
-	};
-	e.persist = () => { e.isPersistent = true; };
-
-	// Convenience: normalized values for common props (touch, key, target value)
-	e.nativeEvent = nativeEvent;
-	e.key = nativeEvent.key || null;
-	e.code = nativeEvent.code || null;
-	e.which = nativeEvent.which || nativeEvent.keyCode || null;
-
-	// For input-like events normalize value and checked
-	try {
-		const tgt = e.target;
-		e.value = tgt && ('value' in tgt) ? tgt.value : undefined;
-		e.checked = tgt && ('checked' in tgt) ? tgt.checked : undefined;
-	} catch (err) {
-		e.value = undefined;
-		e.checked = undefined;
-	}
-
-	// composedPath helper
-	e.path = typeof nativeEvent.composedPath === 'function' ? nativeEvent.composedPath() : [e.target];
-
-	return e;
+  const e = _pool.length ? _pool.pop() : {};
+
+  e.nativeEvent = nativeEvent;
+  e.type = nativeEvent.type;
+  e.target = nativeEvent.target || nativeEvent.srcElement || null;
+  e.currentTarget = currentTarget || nativeEvent.currentTarget || null;
+  e.timeStamp = nativeEvent.timeStamp || Date.now();
+
+  // Standard flags
+  e.defaultPrevented = !!nativeEvent.defaultPrevented;
+  e.isPropagationStopped = false;
+  e.isPersistent = false;
+
+  // Common DOM meta when present
+  e.bubbles = !!nativeEvent.bubbles;
+  e.cancelable = !!nativeEvent.cancelable;
+  e.composed = !!nativeEvent.composed;
+  e.detail = nativeEvent.detail;
+
+  e.relatedTarget =
+    nativeEvent.relatedTarget ||
+    (nativeEvent.fromElement ? nativeEvent.fromElement : null) ||
+    (nativeEvent.toElement ? nativeEvent.toElement : null) ||
+    null;
+
+  // Modifier keys
+  e.altKey = !!nativeEvent.altKey;
+  e.ctrlKey = !!nativeEvent.ctrlKey;
+  e.metaKey = !!nativeEvent.metaKey;
+  e.shiftKey = !!nativeEvent.shiftKey;
+
+  // preventDefault / stopPropagation
+  e.isDefaultPrevented = () => e.defaultPrevented;
+  e.preventDefault = () => {
+    if (nativeEvent.preventDefault) nativeEvent.preventDefault();
+    e.defaultPrevented = true;
+  };
+
+  e.stopPropagation = () => {
+    if (nativeEvent.stopPropagation) nativeEvent.stopPropagation();
+    e.isPropagationStopped = true;
+  };
+
+  e.persist = () => { e.isPersistent = true; };
+
+  // Key/mouse/pointer related
+  e.key = nativeEvent.key || null;
+  e.code = nativeEvent.code || null;
+  e.which = nativeEvent.which ?? nativeEvent.keyCode ?? null;
+
+  // Mouse / Pointer button state normalization
+  // - "button" often is 0/1/2 for mouse; for pointer events it's also present.
+  // - "buttons" is a bitmask of which buttons are down (often important for drag).
+  e.button = nativeEvent.button ?? null;
+  e.buttons = nativeEvent.buttons ?? null;
+
+  // Pointer identity + type (critical for multi-touch / pointer capture)
+  e.pointerId = nativeEvent.pointerId ?? null;
+  e.pointerType = nativeEvent.pointerType ?? null;
+  e.isPrimary = nativeEvent.isPrimary ?? null;
+
+  // Coordinates: React/SyntheticEvent uses these directly (React provides them too)
+  e.clientX = nativeEvent.clientX ?? 0;
+  e.clientY = nativeEvent.clientY ?? 0;
+  e.screenX = nativeEvent.screenX ?? 0;
+  e.screenY = nativeEvent.screenY ?? 0;
+
+  // pageX/pageY might be derived; keep if present
+  // (Using pageX/pageY only if you need it; most drag uses clientX/Y.)
+  e.pageX = nativeEvent.pageX ?? null;
+  e.pageY = nativeEvent.pageY ?? null;
+
+  // movementX/movementY exist on some mouse events; harmless if absent
+  e.movementX = nativeEvent.movementX ?? 0;
+  e.movementY = nativeEvent.movementY ?? 0;
+
+  // Pressure/tilt (Pointer Events)
+  e.pressure = nativeEvent.pressure ?? null;
+  e.tiltX = nativeEvent.tiltX ?? null;
+  e.tiltY = nativeEvent.tiltY ?? null;
+  e.width = nativeEvent.width ?? null;
+  e.height = nativeEvent.height ?? null;
+
+  // If the native event has a pointer capture API, you can forward bind/capture calls.
+  // (These are methods on the EventTarget, not on the event, but keeping fields is enough.)
+  e.pointerEventsSupported = POINTER_TYPES.includes(e.pointerType);
+
+  // For input-like events normalize value and checked
+  try {
+    const tgt = e.target;
+    e.value = tgt && ("value" in tgt) ? tgt.value : undefined;
+    e.checked = tgt && ("checked" in tgt) ? tgt.checked : undefined;
+
+    // Some input events have selectionStart/selectionEnd etc.
+    e.selectionStart = tgt && ("selectionStart" in tgt) ? tgt.selectionStart : undefined;
+    e.selectionEnd = tgt && ("selectionEnd" in tgt) ? tgt.selectionEnd : undefined;
+  } catch (err) {
+    e.value = undefined;
+    e.checked = undefined;
+    e.selectionStart = undefined;
+    e.selectionEnd = undefined;
+  }
+
+  // Touch lists (useful for touch events; sometimes pointerType === "touch" uses pointer events instead)
+  // Keep references only if they exist.
+  e.touches = nativeEvent.touches || null;
+  e.targetTouches = nativeEvent.targetTouches || null;
+  e.changedTouches = nativeEvent.changedTouches || null;
+
+  // composedPath helper
+  e.path = typeof nativeEvent.composedPath === "function"
+    ? nativeEvent.composedPath()
+    : [e.target];
+
+  // Additional keyboard extras when present
+  e.repeat = nativeEvent.repeat ?? false;
+  e.location = nativeEvent.location ?? 0;
+
+  return e;
 }
 
 export function releaseSyntheticEvent(e) {
-	if (e && !e.isPersistent) {
-		// Clean up references to avoid leaks
-		e.nativeEvent = null;
-		e.type = null;
-		e.target = null;
-		e.currentTarget = null;
-		e.timeStamp = 0;
-		e.defaultPrevented = false;
-		e.isPropagationStopped = false;
-		e.isPersistent = false;
-		e.isDefaultPrevented = null;
-		e.preventDefault = null;
-		e.stopPropagation = null;
-		e.persist = null;
-		e.key = null;
-		e.code = null;
-		e.which = null;
-		e.value = undefined;
-		e.checked = undefined;
-		e.path = null;
-
-		if (_pool.length < MAX_POOL_SIZE) _pool.push(e);
-	}
+  if (e && !e.isPersistent) {
+    e.nativeEvent = null;
+    e.type = null;
+    e.target = null;
+    e.currentTarget = null;
+    e.timeStamp = 0;
+
+    e.defaultPrevented = false;
+    e.isPropagationStopped = false;
+
+    e.isPersistent = false;
+
+    e.isDefaultPrevented = null;
+    e.preventDefault = null;
+    e.stopPropagation = null;
+    e.persist = null;
+
+    e.bubbles = false;
+    e.cancelable = false;
+    e.composed = false;
+    e.detail = undefined;
+    e.relatedTarget = null;
+
+    // modifier keys
+    e.altKey = false;
+    e.ctrlKey = false;
+    e.metaKey = false;
+    e.shiftKey = false;
+
+    // pointer/mouse fields
+    e.key = null;
+    e.code = null;
+    e.which = null;
+
+    e.button = null;
+    e.buttons = null;
+    e.pointerId = null;
+    e.pointerType = null;
+    e.isPrimary = null;
+
+    e.clientX = 0;
+    e.clientY = 0;
+    e.screenX = 0;
+    e.screenY = 0;
+    e.pageX = null;
+    e.pageY = null;
+
+    e.movementX = 0;
+    e.movementY = 0;
+
+    e.pressure = null;
+    e.tiltX = null;
+    e.tiltY = null;
+    e.width = null;
+    e.height = null;
+
+    // input-like
+    e.value = undefined;
+    e.checked = undefined;
+    e.selectionStart = undefined;
+    e.selectionEnd = undefined;
+
+    // touch lists
+    e.touches = null;
+    e.targetTouches = null;
+    e.changedTouches = null;
+
+    e.path = null;
+    e.repeat = false;
+    e.location = 0;
+
+    if (_pool.length < MAX_POOL_SIZE) _pool.push(e);
+  }
 }
 
+
 // Main wrapper factory
 // fn: function(syntheticEvent) { ... }
 // opts: { capture: bool, passive: bool, once: bool, stopPropagationOnTrueReturn: bool }

package/src/hooks.jsx

@@ -55,17 +55,17 @@ export function useHook()
  * @param {any} initialValue - Initial state value.
  * @returns {any} Hook result `[state, setState]`.
  */
-export function useState(val)
+export function useState(initialValue)
 {
 	const hk = Lilact.useHook();
 
 	if( Lilact.isEmpty(hk) ) {
-		if(typeof(val)==='function') hk.value = val();
-		else hk.value = val;
+		if(typeof(initialValue)==='function') hk.value = initialValue();
+		else hk.value = initialValue;
 		
-		hk.set_func = function(core, hk, val) {
-			if(typeof(val)==='function') hk.value = val(hk.value);
-			else hk.value = val;
+		hk.set_func = function(core, hk, initialValue) {
+			if(typeof(initialValue)==='function') hk.value = initialValue(hk.value);
+			else hk.value = initialValue;
 
 			core.component.forceUpdate();
 		}.bind(undefined, Lilact.current_component[0], hk);
@@ -112,14 +112,14 @@ export function useCallback(callback, deps=undefined)
  * @param {any} [defaultValue] - Initial context value when no Provider is present.
  * @returns {any} A context object
  */
-export function createContext(val)
+export function createContext(defaultValue)
 {
 	const prov = function({value, children}) {
 		return children;
 	};
 
 	return {
-		default: val,
+		default: defaultValue,
 		Provider: prov
 	}
 }
@@ -130,20 +130,20 @@ export function createContext(val)
  * @param {any} context - Context object created by `createContext`.
  * @returns {any} Current context value.
  */
-export function useContext(ctx)
+export function useContext(context)
 {
 	let core = Lilact.current_component[0].parent;
 
-	while(core.entity!==ctx.Provider && core.parent) {
+	while(core.entity!==context.Provider && core.parent) {
 		core = core.parent;
 	}
 
 	if(core.parent) {
 		let v = core.props?.value;
-		return v??=ctx.default;
+		return v??=context.default;
 	}
 
-	return ctx.default;
+	return context.default;
 }
 
 /**
@@ -350,7 +350,7 @@ export function useMemo(factory,deps=undefined)
  * @param {any} initialState - Initial state for the hook.
  * @returns {any} Hook result
  */
-export function useActionState(fn, initialState)
+export function useActionState(action, initialState)
 {
 	const hk = Lilact.useHook();
 	const [is_pending, tran_start_func] = Lilact.useTransition();
@@ -365,7 +365,7 @@ export function useActionState(fn, initialState)
 			tran_start_func(
 					async ()=> {
 						const form_data = new FormData(sub.target, sub.submitter);
-						hk.state = await fn(hk.state, form_data);
+						hk.state = await action(hk.state, form_data);
 					},
 					[]
 				);
@@ -457,21 +457,6 @@ export function useDeferredValue(value, initialValue)
 	return deferred;
 }
 
-
-/**
- * Wraps a render function so that a parent can pass a `ref` into it.
- * The forwarded `ref` is provided as the second argument to the render function: `(props, ref)`.
- *
- * @param {function(props: any, ref: any)} render
- *   The component render function that receives the props and the forwarded ref.
- * @returns {}
- */
-export function forwardRef(render)
-{
-	return (props)=>render({...props, ref: undefined}, props.ref);
-}
-
-
 /**
  * Customizes the value that is exposed to the parent when it uses a `ref` on a component created with `forwardRef`.
  * The object returned by `factory` becomes the value of `ref.current` for object refs.

package/src/jsx.js

@@ -38,8 +38,8 @@
 // usage outside Lilact. Also make sure to check the default configuration.
 
 // There are some situations that are solved with tricks, as some aspects of
-// javascripts import a complete parser and I didn't want to get into that!
-// Works almosr perfectly so far (all observed bugs except 1 are fixed), works  
+// javascript require a complete parser and I didn't want to get into that!
+// Works almost perfectly so far (all observed bugs are fixed), works  
 // even on nasty things like the compressed version of tensorflow.js! Feel free   
 // to report any bugs, and please include a testable example. Thanks! :)
 
@@ -964,18 +964,21 @@ function generateSourceMap(json, path, jsx_eols, out_eols, mappings=[])
  * @returns The transpiled javascript code.
  */
 
+/** @ignore */
 export function transpileJSX( jsx, { 
 	factory = "createComponent", 
 	fragment = "Fragment", 
 	path = "anonymous", 
 	appendSourcemap = true,
+	injectTraceLabels = false,
+	discardComments = false,
+
+	// lilact internal
 	blocks_info = {
 		labels: {},
 		counter: 0
 	},
-	mappings = [],
-	injectTraceLabels = false,
-	discardComments = false
+	mappings = []
 } = {} )
 {
 

package/src/lilact.jsx

@@ -28,6 +28,26 @@
 
 */
 
+
+/*
+	note: 
+
+	If you are reading the code, keep in my mind that in the development of `Lilact`, 
+	I have used a naming convention that is a little different from the standard way:
+
+	I use underscored all lowercase names for internal variables. 
+	I use all caps for constants that are used similar to C defined macros.	e.g. shared 
+	symbols.
+
+	And I use the standard convention for exposed user space variables and arguments, and 
+	functions.
+ 	
+	So if a variable name is in the format `aaa_bbb`, it means I am counting on it to be 
+	used internally. And if it is `AAA_BBB`, I'm counting on it to be constant in the whole 
+	application lifetime.
+*/
+
+
 import * as redux from "redux";
 import * as emotion from "@emotion/css";
 import PropTypes from 'prop-types';
@@ -74,7 +94,7 @@ export {transpileJSX, transpilerConfig} from "./jsx";
 export const Lilact = 
 {	
 
-	VERSION: "beta.9",
+	VERSION: "beta.10",
 	
 	// Configuration
 
@@ -108,7 +128,6 @@ export const Lilact =
 	emotion,
 
 }
-
 globalThis.Lilact = Lilact;
 globalThis.createComponent = Lilact.createComponent;
 globalThis.Fragment = Lilact.Fragment;