lilact 0.1.0 → 0.2.1

package/src/hooks.jsx

@@ -50,10 +50,10 @@ export function useHook()
 }
 
 /**
- * Adds state to a component using a React-like [value, setter] pattern.
+ * Adds state to a component using a [value, setter] pattern.
  *
  * @param {any} initialValue - Initial state value.
- * @returns {any} Hook result (implementation-dependent; typically `[state, setState]`).
+ * @returns {any} Hook result `[state, setState]`.
  */
 export function useState(val)
 {
@@ -82,25 +82,27 @@ export function useState(val)
  * @param {Array<any>} deps - Dependency list.
  * @returns {Function} Memoized callback.
  */
-export function useCallback(callback, deps=[{}])
+export function useCallback(callback, deps=undefined)
 {
+	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
+		throw "callback dependencies must be an array or omitted.";
+	}
+
 	const hk = Lilact.useHook();
 
 	if( Lilact.isEmpty(hk) ) {
 		hk.callback = callback;
-		hk.deps = deps;
 	}
 	else {
-		for(let d in deps) {
-			if( !Lilact.defaultIsEqual(deps[d],hk.deps[d]) ) {
-				hk.callback = callback;
+		if(deps!==undefined && hk?.deps!==undefined && Lilact.shallowEqual(deps, hk.deps)) return hk.callback;
+	}
 
-				hk.deps = deps;
-				break;
-			}
-		}
+	if(hk?.cleanup) {
+		hk.cleanup();
 	}
 
+	hk.deps = deps;
+
 	return hk.callback;
 }
 
@@ -108,7 +110,7 @@ export function useCallback(callback, deps=[{}])
  * Creates a context object for sharing a value through the component tree.
  *
  * @param {any} [defaultValue] - Initial context value when no Provider is present.
- * @returns {any} A context object (implementation-dependent).
+ * @returns {any} A context object
  */
 export function createContext(val)
 {
@@ -164,7 +166,7 @@ export function useId(prefix="N")
 /**
  * Starts a transition and returns helpers for pending updates vs immediate ones.
  *
- * @returns {any} Transition API (implementation-dependent; typically `[isPending, startTransition]`).
+ * @returns {any} `[isPending, startTransition]`
  */
 export function useTransition()
 {
@@ -267,25 +269,25 @@ export function useRef(val = null)
  * @param {Array<any>} [deps] - Dependency list.
  * @returns {void}
  */
-export function useLayoutEffect(setup, deps=[{}])
+export function useLayoutEffect(setup, deps=undefined)
 {
-	if(typeof(deps)!=='object' || deps.constructor.name!=='Array') {
-		throw "effect dependencies must be an array or omitted.";
+	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
+		throw "layout effect dependencies must be an array or omitted.";
 	}
 
 	const hk = Lilact.useHook();
 
 	if( !Lilact.isEmpty(hk) ) {
-		if(deps.every((v,i)=> v === hk.deps[i])) return;
-		if(hk.cleanup) {
-			hk.cleanup();
-		}
+		if(deps!==undefined && hk?.deps!==undefined && Lilact.shallowEqual(deps, hk.deps)) return;
+	}
+
+	if(hk?.cleanup) {
+		hk.cleanup();
 	}
 
 	hk.deps = deps;
 	Lilact.layout_effects.add( ()=>{ hk.cleanup = setup(); });
 	Lilact.current_component[0].component.forceUpdate();
-
 }
 
 /**
@@ -297,17 +299,18 @@ export function useLayoutEffect(setup, deps=[{}])
  */
 export function useEffect(setup, deps=[{}])
 {
-	if(typeof(deps)!=='object' || deps.constructor.name!=='Array') {
+	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
 		throw "effect dependencies must be an array or omitted.";
 	}
 
 	const hk = Lilact.useHook();
 
 	if( !Lilact.isEmpty(hk) ) {
-		if(deps.every((v,i)=> v === hk.deps[i])) return;
-		if(hk.cleanup) {
-			hk.cleanup();
-		}
+		if(deps!==undefined && hk?.deps!==undefined && Lilact.shallowEqual(deps, hk.deps)) return;
+	}
+
+	if(hk?.cleanup) {
+		hk.cleanup();
 	}
 
 	hk.deps = deps;
@@ -322,24 +325,21 @@ export function useEffect(setup, deps=[{}])
  * @param {Array<any>} deps - Dependency list.
  * @returns {any} Memoized value.
  */
-export function useMemo(fn,deps=[])
+export function useMemo(fn,deps=undefined)
 {
+	if( deps!==undefined && (typeof(deps)!=='object' || deps.constructor.name!=='Array') ) {
+		throw "memo dependencies must be an array or omitted.";
+	}
+
 	const hk = Lilact.useHook();
 
-	if( Lilact.isEmpty(hk) ) {
-		hk.deps = deps;
-		hk.value = fn();
-	}
-	else {
-		for(let d in deps) {
-			if( !Lilact.defaultIsEqual(deps[d],hk.deps[d]) ) {
-				hk.deps = deps;
-				hk.value = fn(hk.value);
-				break;
-			}
-		}
+	if( !Lilact.isEmpty(hk) ) {
+		if(deps!==undefined && hk?.deps!==undefined && Lilact.shallowEqual(deps, hk.deps)) return hk.value;
 	}
 
+	hk.deps = deps;
+	hk.value = fn(hk.value);
+
 	return hk.value;
 }
 
@@ -348,7 +348,7 @@ export function useMemo(fn,deps=[])
  *
  * @param {Function} action - The async/queued action function.
  * @param {any} initialState - Initial state for the hook.
- * @returns {any} Hook result (implementation-dependent).
+ * @returns {any} Hook result
  */
 export function useActionState(fn, initial_state)
 {
@@ -383,7 +383,7 @@ export function useActionState(fn, initial_state)
  * @param {Function} reducer - Reducer function.
  * @param {any} initialArg - Initial state value (or initializer arg).
  * @param {Function} [init] - Optional initializer function for lazy initial state.
- * @returns {any} Hook result (implementation-dependent; typically `[state, dispatch]`).
+ * @returns {any} Hook result `[state, dispatch]`.
  */
 export function useReducer(reducer, initialArg, init)
 {
@@ -459,3 +459,44 @@ export function useDeferredValue(value, initialValue)
 }
 
 
+/**
+ * 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.
+ *
+ * @param {Ref<any>} ref
+ *   The ref that was received in your component (typically via `forwardRef` as the second argument).
+ * @param {function(): any} factory
+ *   Function that returns the value to expose to the parent. Commonly an object with methods,
+ *   or a DOM node reference.
+ * @param {Array<any>} [deps]
+ *   Dependency list that controls when the exposed value is recalculated.
+ * @returns {void}
+ */
+export function useImperativeHandle(ref, factory, deps)
+{
+	if(deps!==undefined && ref?.deps!==undefined && Lilact.shallowEqual(deps, ref.deps)) return;
+
+	ref.deps = deps;
+
+	Lilact.setTimeout( ()=>{ 
+		if(typeof ref?.current !== 'object') {
+			ref.current = {};
+		}
+		Object.assign( ref.current, factory(), 0 );	
+	});
+}
+

package/src/jsx.js

@@ -51,6 +51,7 @@
 
 import * as jsxAddons from './jsx.addons.js';
 
+/** @ignore */
 export const transpilerConfig = {
 	addons: jsxAddons,
 	setFunctionLabels: true,

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

@@ -180,21 +180,7 @@ export function require(path, force_update)
 
 /**
  * Wrapper that enables async, code-split component loading. `lazy` should be used
- * outside the component definintion ot it will produce new components on each rerender.
- *
- * 
- * @example
- * ```jsx
- * const LazyWidget = lazy(() => Lilact.require("./Widget"));
- *
- * export function Page() {
- *   return (
- *     <Suspense fallback={<Spinner/>}>
- *       <LazyWidget />
- *     </Suspense>
- *   );
- * }
- * ```
+ * 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
@@ -202,12 +188,12 @@ export function require(path, force_update)
  * 
  * @returns A Lilact component that should be rendered inside a {@link Suspense} boundary.
  */
-export function lazy(req_func) {
+export function lazy(factory) {
 	let status = "pending"; // pending | success | error
 	let result;             // component | error
 
 	Lilact[LAZY] = true;
-	result = req_func();
+	result = factory();
 
 	if(Lilact.isThenable(result)) {
 		result.then(