lilact 0.24.2 → 0.26.1

package/package.json

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

package/src/accessories.jsx

@@ -416,14 +416,19 @@ export function DragHandle({
  * If provided, the component uses this value instead of internal state.
  * @param defaultPosition - Initial splitter position for uncontrolled usage. Defaults to `0.5`.
  * @param min - Minimum allowed position. Defaults to `0.1`.
+ 		  Can also be a function that will be called with (containerWidth|containerHeight,splitterSize) as arguments
  * @param max - Maximum allowed position. Defaults to `0.9`.
+ 		  Can also be a function that will be called with (containerWidth|containerHeight,splitterSize) as arguments
  * @param splitterSize - Thickness of the draggable splitter in pixels. Defaults to `8`.
+ * @param resizePolicy - The behavior on container resize. Its value can be `proportional`, `fixFirst` or `fixSecond`.
+ * 		  Default is `proportional`.
  * @param onSizeChange - Callback invoked when the position changes. Receives the new normalized position.
  * @param style - Optional root container styles.
  * @param className - Optional root container CSS class.
  * @param leftPaneStyle - Optional styles applied to the left pane (or top pane in vertical mode).
  * @param rightPaneStyle - Optional styles applied to the right pane (or bottom pane in vertical mode).
  * @param splitterStyle - Optional styles applied to the splitter element.
+ * @param splitterChild - Child to be rendered into the splitter itself.
  * @param children - Children to be rendered into the two pane containers.
  *
  * @example
@@ -452,24 +457,35 @@ export const SplitPane = forwardRef(function SplitPane(
 		max = 0.9,
 		splitterSize = 8,
 		onSizeChange,
+		resizePolicy = "proportional",
 		style,
 		className,
 		firstPaneStyle,
 		secondPaneStyle,
 		splitterStyle,
+		splitterChild,
 		children,
 	},
 	ref
 ) {
+	const containerRef = useRef(null);
+	const sizeRef = useRef({ w: 0, h: 0 });
+
 	const initialMode = mode === "vertical" ? "vertical" : "horizontal";
 	const [internalMode, setInternalMode] = useState(initialMode);
 
-	const [internalPos, setInternalPos] = useState(clamp(defaultPosition, min, max));
-	const posResolved = position == null ? internalPos : clamp(position, min, max);
+	const [internalPos, setInternalPos] = useState(clamp(defaultPosition, min, max, 
+						 mode==='verical'?sizeRef.current.h:sizeRef.current.w, splitterSize));
+
+
+	let posResolved = position == null ? internalPos : position;
+	posResolved = clamp(posResolved, min, max, 
+						 mode==='verical'?sizeRef.current.h:sizeRef.current.w, splitterSize);
 
 	useEffect(() => {
 		if (position == null) return;
-		setInternalPos(clamp(position, min, max));
+		setInternalPos(clamp(position, min, max, 
+							 mode==='verical'?sizeRef.current.h:sizeRef.current.w, splitterSize));
 	}, [position, min, max]);
 
 	useEffect(() => {
@@ -477,7 +493,8 @@ export const SplitPane = forwardRef(function SplitPane(
 	}, [mode]);
 
 	const setPosition = (next) => {
-		const clamped = clamp(next, min, max);
+		const clamped = clamp(next, min, max, 
+							 mode==='verical'?sizeRef.current.h:sizeRef.current.w, splitterSize);
 		if (position == null) setInternalPos(clamped);
 		onSizeChange?.(clamped);
 	};
@@ -489,8 +506,6 @@ export const SplitPane = forwardRef(function SplitPane(
 		getMode: () => internalMode,
 	}));
 
-	const containerRef = useRef(null);
-	const sizeRef = useRef({ w: 0, h: 0 });
 
 	useLayoutEffect(() => {
 		const el = containerRef.current;
@@ -498,7 +513,65 @@ export const SplitPane = forwardRef(function SplitPane(
 
 		const ro = new ResizeObserver(() => {
 			const rect = el.getBoundingClientRect();
+			const o = sizeRef.current;
 			sizeRef.current = { w: rect.width, h: rect.height };
+
+
+			const EPS = 1e-6;
+
+			function clamp01(x) {
+			  return Math.min(1, Math.max(0, x));
+			}
+
+			if (ref.current?.getPosition) {
+				const p = ref.current.getPosition();
+
+				if (resizePolicy === 'fixFirst') {
+					if (internalMode === 'vertical') {
+						const availOld = o.h - splitterSize;
+						const availNew = sizeRef.current.h - splitterSize;
+						if (availOld > 0 && availNew > 0) {
+			       			const firstPx = p * availOld;          // fixed pane size in px
+					        const nextP = firstPx / availNew;     // recompute normalized
+					        if (Math.abs(nextP - p) > EPS) setPosition(clamp01(nextP));
+					    }
+					} 
+					else {
+						const availOld = o.w - splitterSize;
+						const availNew = sizeRef.current.w - splitterSize;
+						if (availOld > 0 && availNew > 0) {
+							const firstPx = p * availOld;
+							const nextP = firstPx / availNew;
+							if (Math.abs(nextP - p) > EPS) setPosition(clamp01(nextP));
+						}
+					}
+				} 
+				else if (resizePolicy === 'fixSecond') {
+				    // fixSecond means second pane pixel size stays constant.
+				    // secondPx = (1-p) * availOld
+				    // nextP = 1 - secondPx/availNew
+					if (internalMode === 'vertical') {
+						const availOld = o.h - splitterSize;
+						const availNew = sizeRef.current.h - splitterSize;
+						if (availOld > 0 && availNew > 0) {
+							const secondPx = (1 - p) * availOld;
+							const nextP = 1 - (secondPx / availNew);
+							if (Math.abs(nextP - p) > EPS) setPosition(clamp01(nextP));
+						}
+					} 
+					else {
+						const availOld = o.w - splitterSize;
+						const availNew = sizeRef.current.w - splitterSize;
+						if (availOld > 0 && availNew > 0) {
+							const secondPx = (1 - p) * availOld;
+							const nextP = 1 - (secondPx / availNew);
+							if (Math.abs(nextP - p) > EPS) setPosition(clamp01(nextP));
+						}
+					}
+				}
+			}
+
+
 		});
 
 		ro.observe(el);
@@ -506,7 +579,7 @@ export const SplitPane = forwardRef(function SplitPane(
 		sizeRef.current = { w: rect.width, h: rect.height };
 
 		return () => ro.disconnect();
-	}, []);
+	}, [resizePolicy, internalMode]);
 
 	const startPosRef = useRef(posResolved);
 	const [dragging, setDragging] = useState(false);
@@ -531,90 +604,117 @@ export const SplitPane = forwardRef(function SplitPane(
 	const firstChild = arr[0];
 	const secondChild = arr[1];
 
+
 	const p = posResolved;
+	const { w, h } = sizeRef.current;
 
-	const pane1StyleAbs =
-		internalMode === "horizontal"
-			? {
-					position: "absolute",
-					top: 0,
-					bottom: 0,
-					left: 0,
-					width: `calc(${p} * (100% - ${splitterSize}px))`,
-					overflow: "auto",
-					...(firstPaneStyle || {}),
-				}
-			: {
-					position: "absolute",
-					left: 0,
-					right: 0,
-					top: 0,
-					height: `calc(${p} * (100% - ${splitterSize}px))`,
-					overflow: "auto",
-					...(firstPaneStyle || {}),
-				};
-
-	const pane2StyleAbs =
-		internalMode === "horizontal"
-			? {
-					position: "absolute",
-					top: 0,
-					bottom: 0,
-					left: `calc(${p} * (100% - ${splitterSize}px) + ${splitterSize}px)`,
-					right: 0,
-					overflow: "auto",
-					...(secondPaneStyle || {}),
-				}
-			: {
-					position: "absolute",
-					left: 0,
-					right: 0,
-					top: `calc(${p} * (100% - ${splitterSize}px) + ${splitterSize}px)`,
-					bottom: 0,
-					overflow: "auto",
-					...(secondPaneStyle || {}),
-				};
-
-	// Basic visible default for splitter (so it doesn't "disappear" on mode switch).
-	// Also give zIndex + background and keep pointer events enabled.
-	const splitterBase = {
+	const computedPane1Style = {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		overflow: "auto",
+
+		...(firstPaneStyle || {}),
+	};
+
+	const computedPane2Style = {
+		position: "absolute",
+		bottom: 0,
+		right: 0,
+		overflow: "auto",
+
+		...(secondPaneStyle || {}),
+	};
+
+
+	const computedSplitterStyle = {
 		background: "rgba(0,0,0,0.08)",
 		boxShadow: "inset 0 0 2px rgba(0,0,0,0.25)",
 		zIndex: 10,
+		position: "absolute",
+		cursor: internalMode==='horizontal' ? "col-resize" : "row-resize",
+		touchAction: "none",
+		pointerEvents: "auto",
+		...(splitterStyle || {}),
 	};
 
-	const splitterAbsStyle =
-		internalMode === "horizontal"
-			? {
-					position: "absolute",
-					top: 0,
-					bottom: 0,
-					left: `calc(${p} * (100% - ${splitterSize}px))`,
-					width: splitterSize,
-					height: "100%",
-
-					cursor: dragging ? "col-resize" : "col-resize",
-					touchAction: "none",
-					pointerEvents: "auto",
-
-					...splitterBase,
-					...(splitterStyle || {}),
-				}
-			: {
-					position: "absolute",
-					left: 0,
-					right: 0,
-					top: `calc(${p} * (100% - ${splitterSize}px))`,
-					height: splitterSize,
-					width: "100%",
-
-					cursor: dragging ? "row-resize" : "row-resize",
-					touchAction: "none",
-					pointerEvents: "auto",
-
-					...splitterBase,
-					...(splitterStyle || {}),
-				};
+
+	if(internalMode==='horizontal') {
+		computedPane1Style.bottom = 0;
+		computedPane2Style.top = 0;
+
+		if(resizePolicy==='fixFirst') {
+			computedPane1Style.width = p*(w-splitterSize);
+			computedPane2Style.left = computedPane1Style.width+splitterSize;
+
+			Object.assign( computedSplitterStyle, {
+				top: 0,
+				bottom: 0,
+				left: computedPane1Style.width,
+				width: splitterSize,
+			});
+		}
+		else if(resizePolicy==='fixSecond') {
+			computedPane2Style.width = (1-p)*(w-splitterSize);
+			computedPane1Style.right = computedPane2Style.width+splitterSize;
+
+			Object.assign( computedSplitterStyle, {
+				top: 0,
+				bottom: 0,
+				right: computedPane2Style.width,
+				width: splitterSize,
+			});
+		}
+		else {
+			computedPane1Style.width = `calc(${p} * (100% - ${splitterSize}px))`;
+			computedPane2Style.left = `calc(${p} * (100% - ${splitterSize}px) + ${splitterSize}px)`;
+
+			Object.assign( computedSplitterStyle, {
+				top: 0,
+				bottom: 0,
+				left: `calc(${p} * (100% - ${splitterSize}px))`,
+				width: splitterSize,
+			});
+		}
+	}
+	else {
+		computedPane1Style.right = 0;
+		computedPane2Style.left = 0;
+
+		if(resizePolicy==='fixFirst') {
+			computedPane1Style.height = p*(h-splitterSize);
+			computedPane2Style.top = computedPane1Style.height+splitterSize;
+
+			Object.assign( computedSplitterStyle, {
+				left: 0,
+				right: 0,
+				top: computedPane1Style.height,
+				height: splitterSize,
+			});
+		}
+		else if(resizePolicy==='fixSecond') {
+			computedPane2Style.height = (1-p)*(h-splitterSize);
+			computedPane1Style.bottom = computedPane2Style.height+splitterSize;
+
+			Object.assign( computedSplitterStyle, {
+				left: 0,
+				right: 0,
+				bottom: computedPane2Style.height,
+				height: splitterSize,
+			});
+		}
+		else {
+			computedPane1Style.height = `calc(${p} * (100% - ${splitterSize}px))`;
+			computedPane2Style.top = `calc(${p} * (100% - ${splitterSize}px) + ${splitterSize}px)`;
+
+			Object.assign( computedSplitterStyle, {
+				left: 0,
+				right: 0,
+				top: computedPane1Style.height,
+				height: splitterSize,
+			});
+		}
+	}
 
 	return (
 		<div
@@ -628,19 +728,25 @@ export const SplitPane = forwardRef(function SplitPane(
 				...(style || {}),
 			}}
 		>
-			<div style={pane1StyleAbs}>{firstChild}</div>
-			<div style={pane2StyleAbs}>{secondChild}</div>
+			<div style={computedPane1Style}>{firstChild}</div>
+			<div style={computedPane2Style}>{secondChild}</div>
 
 			<DragHandle
 				onStart={handleStart}
 				onDelta={handleDelta}
 				onEnd={handleEnd}
-				style={splitterAbsStyle}
+				style={computedSplitterStyle}
 				className="splitter"
-			/>
+			>
+				{splitterChild}
+			</DragHandle>
 		</div>
 	);
 });
 
 
-const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+const clamp = function(v, min, max, size, splitterSize) {
+	if(typeof(min)==='function') { if(size>0) min = min(size, splitterSize); else min=0; }
+	if(typeof(max)==='function') { if(size>0) max = max(size, splitterSize); else max=1; }
+	return Math.max(min, Math.min(max, v));
+}

package/src/components.jsx

@@ -115,8 +115,7 @@ class ComponentCache
 *  used by lilact are kept. The Component class uses it under the hood, so there is a separation
 *  and user can set whatever property they want in the component. Each Lilact.Component 
 *  has a core that is accessible via lilact symbol CORE, i.e. component[CORE]. Note
-*  that you should either define a LILACT:CORE symbol or use the lilact preprocessor
-*  tools which is a wiser choice.
+*  that you should define a LILACT:CORE symbol.
 * 
 *  ComponentCore methods are not to be called by the user. But it can also be used
 *  to store data more efficiently, and I have used it extensively. But it is
@@ -152,6 +151,8 @@ class ComponentCore
 	insert_index
 	loader_args
 
+	is_svg
+
 	*/
 
 	component;
@@ -785,6 +786,7 @@ function doUpdates()
 
 	for(const u of _update_set)  u.apply();
 	for(const cb of _update_cbs)  cb();
+
 	processEffects();
 
 }
@@ -1092,7 +1094,7 @@ export class RootComponent extends HTMLComponent
 
 	constructor(element, props)
 	{
-		super(':root', props);
+		super(':root:', props);
 
 		if(typeof this.element==='string') {
 			element = document.querySelector(element);

package/src/jsx.js

@@ -64,7 +64,7 @@ let tab=0;
 
 
 const TOKENIZE_RE =
-  /(\{|\}|\[|\]|\(|\)|\.\.\.|=>|\?\?=|\?\?|\?\.|===|!==|>>>|<<=|>>=|>>>=|\*\*=|\*\*|&&=|\|\|=|<=|>=|==|!=|<<|>>|\+\+|--|\+=|-=|\*=|\/=|%=|&=|\^=|\|=|=|\+|-|\*|\/|%|&|\^|\||!|~|\?|:|<|>|=|\.|,|;|\n+|[\s^\n]+)/gm;
+  /(\{|\}|\[|\]|\(|\)|\.\.\.|=>|\?\?=|\?\?|\?\.|===|!==|>>>|<<=|>>=|>>>=|\*\*=|\*\*|&&=|\|\|=|<=|>=|==|!=|<<|>>|\+\+|--|\+=|-=|\*=|\/=|%=|&=|\^=|\|=|=|\+|-|\*|\/|%|&|\^|\||!|~|\?|:|<|>|=|\.|,|;|\n+|[\s^\n]+)/g;
 
 
 function lookAhead(f, code, index, ...args)

package/src/lilact.jsx

@@ -92,7 +92,7 @@ export {transpileJSX, transpilerConfig} from "./jsx";
 export const Lilact = 
 {	
 
-	VERSION: "RC.1",
+	VERSION: "RC.3",
 	
 	// Configuration