lilact 0.0.0 → 0.2.0

package/src/lilact.jsx

@@ -47,6 +47,7 @@ import * as misc from './misc.jsx';
 
 import * as router from './router.jsx';
 import * as accessories from './accessories.jsx';
+import {ResizablePane} from './pane.jsx';
 
 import {transpileJSX, transpilerConfig} from "./jsx";
 
@@ -61,7 +62,7 @@ import {transpileJSX, transpilerConfig} from "./jsx";
  * @property emotion - Handle to Emotion’s CSS-in-JS package for styling (https://github.com/emotion-js/emotion).
  */
 export const Lilact = 
-{
+{	
 
 	VERSION: "beta.0",
 	
@@ -86,27 +87,24 @@ export const Lilact =
 	...router,
 	...accessories,
 
+	ResizablePane,
+
 	transpileJSX,
 	transpilerConfig,
 
 	// Dependencies ()
 
 	PropTypes,
+	//redux: {...redux, createSlice, createAsyncThunk},
 	redux,
 	emotion,
 
 }
 
-
-// or, if you prefer DOMContentLoaded:
 document.addEventListener('DOMContentLoaded', () => {
   Lilact.runScripts();
 });
 
-function yourFunctionHere() {
-  // ...
-}
-
 ʔ if(DEBUG) {
 	console.log(`Lilact (Version: ${Lilact.VERSION}) - Debug Mode`);
 	console.log(`Copyright(C) 2024-2026 Arash Kazemi <contact.arash.kazemi@gmail.com>`);

package/src/pane.jsx

@@ -0,0 +1,287 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from "./hooks.jsx";
+import { Children } from "./misc.jsx";
+
+function clamp(n, min, max) {
+	return Math.max(min, Math.min(max, n));
+}
+
+/**
+ * ResizablePane
+ *
+ * Features:
+ * - Supports "horizontal" (left/top size affects width) and "vertical" (affects height)
+ * - Initial position via props.position
+ * - Methods to set mode and position via ref:
+ *     ref.current.setMode(mode)
+ *     ref.current.setPosition(position)
+ * - Callback when size changes via onSizeChange
+ * - Children are rendered in two separate containers (no portals)
+ */
+export const ResizablePane = forwardRef(function Pane(
+	{
+		mode = "horizontal", // "horizontal" | "vertical"
+		initialPosition, // optional (alias-ish to position)
+		position, // controlled position (number)
+		defaultPosition = 0.5, // used if position/initialPosition not provided
+		min = 0.1, // clamp in "percent of container" units: 0..1
+		max = 0.9, // clamp in "percent of container" units: 0..1
+		splitterSize = 8, // px thickness of the drag handle
+		onSizeChange, // (newPosition: number) => void
+		style,
+		className,
+		leftPaneStyle,
+		rightPaneStyle,
+		splitterStyle,
+		children, // expects two children: [A, B]
+	},
+	ref
+) {
+	const [internalMode, setInternalMode] = useState(mode);
+	const [pos, setPos] = useState(() => {
+		const start =
+			position ?? initialPosition ?? (defaultPosition != null ? defaultPosition : 0.5);
+		return clamp(start, min, max);
+	});
+
+	const containerRef = useRef(null);
+	const draggingRef = useRef(false);
+
+	const panes = Children.toArray(children);
+	const leftChild = panes[0] ?? null;
+	const rightChild = panes[1] ?? null;
+
+	const modeResolved = mode != null ? mode : internalMode;
+
+	// Keep internalMode aligned if mode is provided as a prop
+	useEffect(() => {
+		if (mode != null) setInternalMode(mode);
+	}, [mode]);
+
+	// Controlled position: update state when prop changes
+	useEffect(() => {
+		if (position == null) return;
+		setPos(clamp(position, min, max));
+	}, [position, min, max]);
+
+	const setPosition = (newPos) => {
+		const next = clamp(newPos, min, max);
+		if (position == null) setPos(next); // only update internal state if uncontrolled
+		onSizeChange?.(next);
+	};
+
+	const setMode = (nextMode) => {
+		const m = nextMode === "vertical" ? "vertical" : "horizontal";
+		if (mode == null) setInternalMode(m);
+		// If mode is controlled via prop, consumer should re-render with new prop.
+	};
+
+	useImperativeHandle(
+		ref,
+		() => ({
+			setPosition,
+			setMode,
+			getPosition: () => (position == null ? pos : clamp(position, min, max)),
+			getMode: () => modeResolved,
+		}),
+		[pos, position, min, max, modeResolved, onSizeChange, mode]
+	);
+
+	const updateFromClientXorY = (clientX, clientY) => {
+		const el = containerRef.current;
+		if (!el) return;
+
+		const rect = el.getBoundingClientRect();
+		let next;
+
+		if (modeResolved === "horizontal") {
+			const usable = rect.width;
+			if (usable <= 0) return;
+			next = (clientX - rect.left) / usable;
+		} else {
+			const usable = rect.height;
+			if (usable <= 0) return;
+			next = (clientY - rect.top) / usable;
+		}
+		setPosition(next);
+	};
+
+	const onPointerDown = (e) => {
+		e.preventDefault();
+		draggingRef.current = true;
+
+		// Capture pointer so we still get events outside the handle area.
+		try {
+			e.currentTarget.setPointerCapture?.(e.pointerId);
+		} catch {
+			// ignore
+		}
+
+		updateFromClientXorY(e.clientX, e.clientY);
+	};
+
+	const onPointerMove = (e) => {
+		if (!draggingRef.current) return;
+		updateFromClientXorY(e.clientX, e.clientY);
+	};
+
+	const stopDragging = () => {
+		draggingRef.current = false;
+	};
+
+	// Attach global listeners to ensure smooth dragging even if pointer capture fails
+	useEffect(() => {
+		const handleMove = (e) => {
+			if (!draggingRef.current) return;
+			updateFromClientXorY(e.clientX, e.clientY);
+		};
+		const handleUp = () => stopDragging();
+
+		window.addEventListener("pointermove", handleMove, { passive: false });
+		window.addEventListener("pointerup", handleUp, { passive: true });
+		window.addEventListener("pointercancel", handleUp, { passive: true });
+
+		return () => {
+			window.removeEventListener("pointermove", handleMove);
+			window.removeEventListener("pointerup", handleUp);
+			window.removeEventListener("pointercancel", handleUp);
+		};
+	}, [modeResolved, min, max, position, onSizeChange]);
+
+	const posResolved = position == null ? pos : clamp(position, min, max);
+
+	const sizes = useMemo(() => {
+		if (modeResolved === "horizontal") {
+			// left width = pos, splitter width = splitterSize, right flexes
+			// We set left/right as percentages and keep splitter fixed in px.
+			return {
+				left: `${posResolved * 100}%`,
+				right: `calc(${100 - posResolved * 100}% - ${splitterSize}px)`,
+			};
+		}
+		return {
+			left: `${posResolved * 100}%`,
+			right: `calc(${100 - posResolved * 100}% - ${splitterSize}px)`,
+		};
+	}, [modeResolved, posResolved, splitterSize]);
+
+	// Improve keyboard accessibility (arrow keys when handle is focused)
+	const onSplitterKeyDown = (e) => {
+		const step = 0.02;
+		let delta = 0;
+		if (modeResolved === "horizontal") {
+			if (e.key === "ArrowLeft") delta = -step;
+			if (e.key === "ArrowRight") delta = step;
+		} else {
+			if (e.key === "ArrowUp") delta = -step;
+			if (e.key === "ArrowDown") delta = step;
+		}
+		if (delta !== 0) {
+			e.preventDefault();
+			setPosition(posResolved + delta);
+		}
+	};
+
+	// Ensure position clamps correctly if min/max change
+	useLayoutEffect(() => {
+		setPos((p) => clamp(p, min, max));
+	}, [min, max]);
+
+	const rootStyle = {
+		display: "flex",
+		width: "100%",
+		height: "100%",
+		overflow: "hidden",
+		touchAction: "none",
+		...(style || {}),
+		flexDirection: modeResolved === "horizontal" ? "row" : "column",
+	};
+
+	const leftPaneComputed =
+		modeResolved === "horizontal"
+			? {
+					width: sizes.left,
+					flex: `0 0 ${sizes.left}`,
+					overflow: "auto",
+					...(leftPaneStyle || {}),
+				}
+			: {
+					height: sizes.left,
+					flex: `0 0 ${sizes.left}`,
+					overflow: "auto",
+					...(leftPaneStyle || {}),
+				};
+
+	const rightPaneComputed =
+		modeResolved === "horizontal"
+			? {
+					width: `calc(${100 - posResolved * 100}% - ${splitterSize}px)`,
+					flex: `1 1 auto`,
+					overflow: "auto",
+					...(rightPaneStyle || {}),
+				}
+			: {
+					height: `calc(${100 - posResolved * 100}% - ${splitterSize}px)`,
+					flex: `1 1 auto`,
+					overflow: "auto",
+					...(rightPaneStyle || {}),
+				};
+
+	const splitterComputed =
+		modeResolved === "horizontal"
+			? {
+					width: `${splitterSize}px`,
+					flex: `0 0 ${splitterSize}px`,
+					cursor: "col-resize",
+					background: "transparent",
+					...(splitterStyle || {}),
+				}
+			: {
+					height: `${splitterSize}px`,
+					flex: `0 0 ${splitterSize}px`,
+					cursor: "row-resize",
+					background: "transparent",
+					...(splitterStyle || {}),
+				};
+
+	const dividerVisualStyle =
+		modeResolved === "horizontal"
+			? {
+					height: "100%",
+					width: "100%",
+					background: "rgba(0,0,0,0.08)",
+				}
+			: {
+					width: "100%",
+					height: "100%",
+					background: "rgba(0,0,0,0.08)",
+				};
+
+	return (
+		<div
+			ref={containerRef}
+			className={className}
+			style={rootStyle}
+			onPointerMove={onPointerMove}
+		>
+			<div style={leftPaneComputed}>{leftChild}</div>
+
+			<div
+				role="separator"
+				aria-orientation={modeResolved === "horizontal" ? "vertical" : "horizontal"}
+				aria-valuemin={min}
+				aria-valuemax={max}
+				aria-valuenow={posResolved}
+				tabIndex={0}
+				onPointerDown={onPointerDown}
+				onPointerUp={stopDragging}
+				onPointerCancel={stopDragging}
+				onKeyDown={onSplitterKeyDown}
+				style={splitterComputed}
+			>
+				<div style={dividerVisualStyle} />
+			</div>
+
+			<div style={rightPaneComputed}>{rightChild}</div>
+		</div>
+	);
+});

package/src/run.jsx

@@ -10,10 +10,10 @@
 	modification, are permitted provided that the following conditions are met:
 
 	* Redistributions of source code must retain the above copyright
-	  notice, this list of conditions and the following disclaimer.
+		notice, this list of conditions and the following disclaimer.
 	* Redistributions in binary form must reproduce the above copyright
-	  notice, this list of conditions and the following disclaimer in the
-	  documentation and/or other materials provided with the distribution.
+		notice, this list of conditions and the following disclaimer in the
+		documentation and/or other materials provided with the distribution.
 
 	THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 	AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
@@ -28,18 +28,17 @@
 
 */
 
-ʔ defineSymbols ( "LILACT", [ "CORE", "COMPONENT" ] ) ʔ
+ʔ defineSymbols ( "LILACT", [ "CORE", "COMPONENT", "LAZY" ] ) ʔ
 
 import Lilact from './lilact.jsx';
 
+
 /**
  * Runs a jsx script. All scripts can access Lilact namespace as a global object. 
  * 
  * Notice that `run` uses eval internally. There is no standard way of getting the error location when
- * running it with eval. Lilact has its own experimental workarounds for this, but generally speaking it
- * works better when an script is loaded from a file (using <script type='text/jsx' src=''.../> and is not 
- * inline, because that way the generated sourcemap will be used by the browser and the exceptions will be
- * located automatically. When an inline script raises exception, the original exception does not report
+ * running it with eval. Lilact has its own experimental workarounds for this.
+ * When an inline script raises an exception, the original exception does not report
  * which eval has caused the error, so Lilact should guess it from some labels, and for the sake of 
  * efficiency, it is block based and not exact.
  *
@@ -109,50 +108,62 @@ export function run(jsx, path=`<string input ${++Lilact.eval_num}>`, is_inline=t
 	}
 }
 
-// export async function importAsync(path)
-// {
-// 	const res = await fetch(path);
-// 	const text = await res.text();
-
-// 	return Lilact.run(text, path, false);
-// }
 
 /**
  * Loads a jsx script from a path. All scripts can access Lilact namespace as a global object. 
  * 
- * Lilact require loads synchronously, as it is expected to be loaded on the next instruction.
- * It is better to load existing scripts using <script type="text/jsx" src+"..."/> if possible.
+ * `Lilact.require` loads synchronously, as it is expected to be loaded on the next instruction.
+ * 
+ * As running the transpiled scripts rely on `eval`, it is not possible to use module imports 
+ * and exports. So to import you should use `const {useState} = Lilact` convention. And to 
+ * export, you should use `module.exports = ...`. `Lilact.require` returns `module.exports` value
+ * so you can import different modules using the convention above.
+ * 
+ * If the path is in the format #id, it will query the document for a script element with the given 
+ * id and run its contents.
+ * 
+ * If require is called inside the function given to lazy, it will run async. See `lazy`.
+ * 
+ * @param path - The path to the required file. Must be either absolute path or relative to the current 
+ * document’s URL (the page/location that initiated the request).
  * 
- * Notice that run uses eval internally. There is no standard way of getting the error location when
- * running it with eval. Lilact has its own experimental workarounds for this, but generally speaking it
- * works better when an script is loaded from a file (using <script type='text/jsx' src=''.../> and is not 
- * inline, because that way the generated sourcemap will be used by the browser and the exceptions will be
- * located automatically. When an inline script raises exception, the original exception does not report
- * which eval has caused the error, so Lilact should guess it from some labels, and for the sake of 
- * efficiency, it is block based and not exact.
- *
- * @param path - The path to the required file.
  * @param force_update - To treat the code as inline. The main difference at the moment is that inline code doesn't include sourcemap.
  * 
  * @returns An array representation of the children.
  */
 export function require(path, force_update)
 {
-	if(Lilact.transpilerConfig.required[path]!==undefined && !force_update) return Lilact.transpilerConfig.required[path].module;
+	//if(Lilact.transpilerConfig.required[path]!==undefined && !force_update) return Lilact.transpilerConfig.required[path].module;
 
 	if(path[0]==='#') {
 
-		const el = document.querySelector(path);
+		const el = document.getElementById(path);
 
 		if(el) {
 			return Lilact.run(el.innerText, path);
 		}
 
 	}
+	else if(Lilact?.[LAZY]) {
+		Lilact[LAZY]=false;
+
+		return fetch(path)
+			.then(res => {
+				if (!res.ok) throw new Error(`HTTP ${res.status}`);
+				return res.text();
+			})
+			.then(res => {
+				res = Lilact.run(res, path, false);
+				// todo: this is for the lazy, so we detect default, should we do it in sync mode too?
+				return res?.default ?? res;
+			})
+			.catch(err => {
+				throw err;
+			});
+	}
 	else {
-
 		// note: this makes a sync request. this is not advised,
-		// but import should be sync. for an async solution use importAsync.
+		// but import should be sync. for an async solution use lazy and suspense.
 
 		const request = new XMLHttpRequest();
 		request.open("GET", path, false);
@@ -167,6 +178,48 @@ export function require(path, force_update)
 }
 
 
+/**
+ * Wrapper that enables async, code-split component loading. `lazy` should be used
+ * outside the component definintion or it will produce new components on each rerender.
+ *
+ * @param factory - A function with **no arguments** that returns a `Promise`.
+ * The promise must resolve to a module whose module.exports.default is a Lilact component
+ * or otherwise it will be whatever the module.exports is set to.
+ * 
+ * @returns A Lilact component that should be rendered inside a {@link Suspense} boundary.
+ */
+export function lazy(factory) {
+	let status = "pending"; // pending | success | error
+	let result;             // component | error
+
+	Lilact[LAZY] = true;
+	result = factory();
+
+	if(Lilact.isThenable(result)) {
+		result.then(
+			(mod) => {
+				status = "success";
+				result = mod;
+				return result;
+			},
+			(err) => {
+				status = "error";
+				result = err;
+				throw err;
+			}
+		);
+	}
+
+	function LazyComponent(props) {
+		if (status === "pending") throw result;
+		if (status === "error") throw result;   
+		const Component = result;
+		return <Component {...props} />;
+	}
+
+	return LazyComponent;
+}
+
 /**
  * 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`
@@ -236,21 +289,16 @@ export function traceError(err)
 }
 
 function scanScriptTagsWithType() {
-  const scripts = Array.from(
-    document.querySelectorAll('script[type="text/jsx"]')
-  );
-
-  return scripts.map((el) => ({
-    src: el.getAttribute("src") ?? null,
-    content: el.textContent ?? ""
-  }));
+	const scripts = Array.from(
+		document.querySelectorAll('script[type="text/jsx"]')
+	);
+
+	return scripts.map((el) => ({
+		src: el.getAttribute("src") ?? null,
+		content: el.textContent ?? ""
+	}));
 }
 
-// usage (in browser):
-// const result = scanScriptTagsWithType();
-// console.log(result);
-
-
 /**
  * Scans the whole documents and runs all the script elements with type `text/jsx`.
  * It is automatically attached to document.onload when Lilact is loaded.

package/src/transition.jsx

@@ -32,10 +32,10 @@
 
 /* States */
 const UNMOUNTED = "unmounted";
-const EXITED = "exited";
-const ENTERING = "entering";
-const ENTERED = "entered";
-const EXITING = "exiting";
+const EXITED = 	  "exited";
+const ENTERING =  "entering";
+const ENTERED =   "entered";
+const EXITING =   "exiting";
 
 import {setTimeout, clearTimeout} from "./timers.jsx"
 import {Children} from "./misc.jsx"
@@ -81,12 +81,16 @@ export function Transition({
 	this[CORE].is_appeared ??= inProp;
 	this[CORE].timer ??= null;
 
-	if(!this.state) {
-		if (!this[CORE].is_mounted) this.state = UNMOUNTED;
+	this[CORE].childFunctionHandler = (func)=>{
+		return func(this[CORE].mount_state); 
+	}
+
+	if(!this[CORE].mount_state) {
+		if (!this[CORE].is_mounted) this[CORE].mount_state = UNMOUNTED;
 		if (inProp) {
-			this.state = appear && !this[CORE].is_appeared ? ENTERING : ENTERED;
+			this[CORE].mount_state = appear && !this[CORE].is_appeared ? ENTERING : ENTERED;
 		}
-		this.state = EXITED;
+		else this[CORE].mount_state = EXITED;
 	}
 
 	useEffect(() => {
@@ -94,13 +98,14 @@ export function Transition({
 	}, []);
 
 	useEffect(() => {
-		if (!this[CORE].is_appeared && appear && this.state === ENTERING && inProp) {
+		if (!this[CORE].is_appeared && appear && this[CORE].mount_state === ENTERING && inProp) {
 			onEnter?.();
 			requestAnimationFrame(() => {
 				onEntering?.(!this[CORE].is_appeared);
 				clearTimeout(this[CORE].timer);
 				this[CORE].timer = setTimeout(() => {
-					this.setState(ENTERED);
+					this[CORE].mount_state = ENTERED;
+					this.forceUpdate();
 					this[CORE].is_appeared = true;
 					onEntered?.(!this[CORE].is_appeared);
 				}, timeout);
@@ -112,32 +117,38 @@ export function Transition({
 		if (inProp) {
 			this[CORE].is_mounted = true;
 			// If we are already entering/entered, no-op
-			if (this.state === ENTERING || this.state === ENTERED) return;
+			if (this[CORE].mount_state === ENTERING || this[CORE].mount_state === ENTERED) return;
 
 			onEnter?.(!this[CORE].is_appeared);
-			this.setState(ENTERING, () => {
+			this[CORE].mount_state = ENTERING;
+			this.forceUpdate(() => {
 				onEntering?.(!this[CORE].is_appeared);
 				clearTimeout(this[CORE].timer);
+
 				this[CORE].timer = setTimeout(() => {
-					this.setState(ENTERED);
+					this[CORE].mount_state = ENTERED;
+					this.forceUpdate();
 					this[CORE].is_appeared = true;
 					onEntered?.();
 				}, timeout);
 			});
 		} 
 		else {
-			if (this.state === UNMOUNTED || this.state === EXITING || this.state === EXITED) return;
+			if (this[CORE].mount_state === UNMOUNTED || this[CORE].mount_state === EXITING || this[CORE].mount_state === EXITED) return;
 
 			onExit?.();
-			this.setState(EXITING, () => {
+			this[CORE].mount_state = EXITING;
+			this.forceUpdate( () => {
 				onExiting?.();
 				clearTimeout(this[CORE].timer);
 				this[CORE].timer = setTimeout(() => {
-					this.setState(EXITED);
+					this[CORE].mount_state = EXITED;
+					this.forceUpdate();
 					onExited?.();
 					if (unmountOnExit) {
 						this[CORE].is_mounted = false;
-						this.setState(UNMOUNTED);
+						this[CORE].mount_state = UNMOUNTED;
+						this.forceUpdate();
 					}
 				}, timeout);
 			});
@@ -147,20 +158,20 @@ export function Transition({
 	if (!this[CORE].is_mounted) return null;
 
 	if(classNames) {
-		if (this.state === ENTERING) {
+		if (this[CORE].mount_state === ENTERING) {
 			if(this[CORE].is_appeared)
 				this[CORE][CHILD_CLASS_ADDENDUM] = classNames.appearActive;
 			else
 				this[CORE][CHILD_CLASS_ADDENDUM] = classNames.enterActive;
 		}
-		else if (this.state === ENTERED) {
+		else if (this[CORE].mount_state === ENTERED) {
 			if(this[CORE].is_appeared)
 				this[CORE][CHILD_CLASS_ADDENDUM] = classNames.appearDone;
 			else
 				this[CORE][CHILD_CLASS_ADDENDUM] = classNames.enterDone;
 		}
-		else if (this.state === EXITING) this[CORE][CHILD_CLASS_ADDENDUM] = classNames.exitActive;
-		else if (this.state === EXITED) this[CORE][CHILD_CLASS_ADDENDUM] = classNames.exitDone;
+		else if (this[CORE].mount_state === EXITING) this[CORE][CHILD_CLASS_ADDENDUM] = classNames.exitActive;
+		else if (this[CORE].mount_state === EXITED) this[CORE][CHILD_CLASS_ADDENDUM] = classNames.exitDone;
 	}
 	return children;
 }

package/webpack.config.js

@@ -45,7 +45,8 @@ export default (env, argv) => {
 	const __filename = fileURLToPath(import.meta.url);
 	const __dirname = dirname(__filename);
 
-	const filename = `lilact.${mode}${mode==="development"?"":".min"}.js`;
+	//const filename = `lilact.${mode}${mode==="development"?"":".min"}.js`;
+	const filename = `lilact.${mode}.min.js`;
 
 	return {
 		entry: './src/lilact.jsx',
@@ -54,17 +55,6 @@ export default (env, argv) => {
 
 		optimization: {
 		    concatenateModules: true,      // scope hoisting
-		    // runtimeChunk: 'single',       // centralize runtime helpers
-		    // splitChunks: {
-		    //   chunks: 'all',
-		    //   cacheGroups: {
-		    //     vendors: {
-		    //       test: /[\\/]node_modules[\\/]/,
-		    //       name: 'vendors',
-		    //       chunks: 'all',
-		    //     },
-		    //   },
-		    // },
 		    moduleIds: 'deterministic',   // smaller stable ids (or 'hashed')
 			minimize: mode === 'production',
 		},