lilact 0.16.2 → 0.17.0

package/src/accessories.jsx

@@ -51,44 +51,44 @@ const {css,cx} = emotion;
  */
 
 export function Spinner({
-  size = 48,
-  className,
-  style,
-  color = "currentColor",
-  strokeWidth = 3,
-  "aria-label": ariaLabel = "Loading",
+	size = 48,
+	className,
+	style,
+	color = "currentColor",
+	strokeWidth = 3,
+	"aria-label": ariaLabel = "Loading",
 }) {
-  const s = Math.max(1, size)+"px";
-
-  return (
-    <div
-      className={className}
-      style={{
-        width: "100%",
-        height: "100%",
-        display: "grid",
-        placeItems: "center",
-        ...style,
-      }}
-      aria-label={ariaLabel}
-      role="status"
-    >
-      <div
-        style={{
-          width: s,
-          height: s,
-          borderRadius: "50%",
-          border: `${strokeWidth}px solid rgba(0,0,0,0.15)`,
-          borderTopColor: color,
-          animation: "ddSpinnerSpin 0.9s linear infinite",
-          boxSizing: "border-box",
-        }}
-      />
-      <style>{`
-        @keyframes ddSpinnerSpin { to { transform: rotate(360deg); } }
-      `}</style>
-    </div>
-  );
+	const s = Math.max(1, size)+"px";
+
+	return (
+		<div
+			className={className}
+			style={{
+				width: "100%",
+				height: "100%",
+				display: "grid",
+				placeItems: "center",
+				...style,
+			}}
+			aria-label={ariaLabel}
+			role="status"
+		>
+			<div
+				style={{
+					width: s,
+					height: s,
+					borderRadius: "50%",
+					border: `${strokeWidth}px solid rgba(0,0,0,0.15)`,
+					borderTopColor: color,
+					animation: "ddSpinnerSpin 0.9s linear infinite",
+					boxSizing: "border-box",
+				}}
+			/>
+			<style>{`
+				@keyframes ddSpinnerSpin { to { transform: rotate(360deg); } }
+			`}</style>
+		</div>
+	);
 }
 
 
@@ -444,203 +444,202 @@ export function DragHandle({
  */
 
 export const SplitPane = forwardRef(function SplitPane(
-  {
-    mode = "horizontal",
-    position,
-    defaultPosition = 0.5,
-    min = 0.1,
-    max = 0.9,
-    splitterSize = 8,
-    onSizeChange,
-    style,
-    className,
-    firstPaneStyle,
-    secondPaneStyle,
-    splitterStyle,
-    children,
-  },
-  ref
+	{
+		mode = "horizontal",
+		position,
+		defaultPosition = 0.5,
+		min = 0.1,
+		max = 0.9,
+		splitterSize = 8,
+		onSizeChange,
+		style,
+		className,
+		firstPaneStyle,
+		secondPaneStyle,
+		splitterStyle,
+		children,
+	},
+	ref
 ) {
-  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);
-
-  useEffect(() => {
-    if (position == null) return;
-    setInternalPos(clamp(position, min, max));
-  }, [position, min, max]);
-
-  useEffect(() => {
-    setInternalMode(mode === "vertical" ? "vertical" : "horizontal");
-  }, [mode]);
-
-  const setPosition = (next) => {
-    const clamped = clamp(next, min, max);
-    if (position == null) setInternalPos(clamped);
-    onSizeChange?.(clamped);
-  };
-
-  useImperativeHandle(ref, () => ({
-    setPosition,
-    setMode: (nextMode) => setInternalMode(nextMode === "vertical" ? "vertical" : "horizontal"),
-    getPosition: () => posResolved,
-    getMode: () => internalMode,
-  }));
-
-  const containerRef = useRef(null);
-  const sizeRef = useRef({ w: 0, h: 0 });
-
-  useLayoutEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-
-    const ro = new ResizeObserver(() => {
-      const rect = el.getBoundingClientRect();
-      sizeRef.current = { w: rect.width, h: rect.height };
-    });
-
-    ro.observe(el);
-    const rect = el.getBoundingClientRect();
-    sizeRef.current = { w: rect.width, h: rect.height };
-
-    return () => ro.disconnect();
-  }, []);
-
-  const startPosRef = useRef(posResolved);
-  const [dragging, setDragging] = useState(false);
-
-  const handleStart = () => {
-    setDragging(true);
-    startPosRef.current = posResolved;
-  };
-
-  // DragHandle in your description: onDelta(x, y, data)
-  const handleDelta = (x, y, _data) => {
-    const { w, h } = sizeRef.current;
-    if (internalMode === "horizontal") {
-      setPosition(startPosRef.current + x / (w || 1));
-    } else {
-      setPosition(startPosRef.current + y / (h || 1));
-    }
-  };
-
-  const handleEnd = () => setDragging(false);
-
-  const arr = Children.toArray(children);
-  const firstChild = arr[0];
-  const secondChild = arr[1];
-
-  const p = posResolved;
-
-  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 = {
-    background: "rgba(0,0,0,0.08)",
-    boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.15)",
-    zIndex: 10,
-  };
-
-  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 || {}),
-        };
-
-  return (
-    <div
-      ref={containerRef}
-      className={className}
-      style={{
-        position: "relative",
-        width: "100%",
-        height: "100%",
-        overflow: "hidden",
-        ...(style || {}),
-      }}
-    >
-      <div style={pane1StyleAbs}>{firstChild}</div>
-      <div style={pane2StyleAbs}>{secondChild}</div>
-
-      {/* Keep the DragHandle mounted across mode changes (only its absolute coordinates change). */}
-      <DragHandle
-        onStart={handleStart}
-        onDelta={handleDelta}
-        onEnd={handleEnd}
-        style={splitterAbsStyle}
-      />
-    </div>
-  );
+	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);
+
+	useEffect(() => {
+		if (position == null) return;
+		setInternalPos(clamp(position, min, max));
+	}, [position, min, max]);
+
+	useEffect(() => {
+		setInternalMode(mode === "vertical" ? "vertical" : "horizontal");
+	}, [mode]);
+
+	const setPosition = (next) => {
+		const clamped = clamp(next, min, max);
+		if (position == null) setInternalPos(clamped);
+		onSizeChange?.(clamped);
+	};
+
+	useImperativeHandle(ref, () => ({
+		setPosition,
+		setMode: (nextMode) => setInternalMode(nextMode === "vertical" ? "vertical" : "horizontal"),
+		getPosition: () => posResolved,
+		getMode: () => internalMode,
+	}));
+
+	const containerRef = useRef(null);
+	const sizeRef = useRef({ w: 0, h: 0 });
+
+	useLayoutEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+
+		const ro = new ResizeObserver(() => {
+			const rect = el.getBoundingClientRect();
+			sizeRef.current = { w: rect.width, h: rect.height };
+		});
+
+		ro.observe(el);
+		const rect = el.getBoundingClientRect();
+		sizeRef.current = { w: rect.width, h: rect.height };
+
+		return () => ro.disconnect();
+	}, []);
+
+	const startPosRef = useRef(posResolved);
+	const [dragging, setDragging] = useState(false);
+
+	const handleStart = () => {
+		setDragging(true);
+		startPosRef.current = posResolved;
+	};
+
+	const handleDelta = (x, y, _data) => {
+		const { w, h } = sizeRef.current;
+		if (internalMode === "horizontal") {
+			setPosition(startPosRef.current + x / (w || 1));
+		} else {
+			setPosition(startPosRef.current + y / (h || 1));
+		}
+	};
+
+	const handleEnd = () => setDragging(false);
+
+	const arr = Children.toArray(children);
+	const firstChild = arr[0];
+	const secondChild = arr[1];
+
+	const p = posResolved;
+
+	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 = {
+		background: "rgba(0,0,0,0.08)",
+		boxShadow: "inset 0 0 2px rgba(0,0,0,0.25)",
+		zIndex: 10,
+	};
+
+	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 || {}),
+				};
+
+	return (
+		<div
+			ref={containerRef}
+			className={className}
+			style={{
+				position: "relative",
+				width: "100%",
+				height: "100%",
+				overflow: "hidden",
+				...(style || {}),
+			}}
+		>
+			<div style={pane1StyleAbs}>{firstChild}</div>
+			<div style={pane2StyleAbs}>{secondChild}</div>
+
+			<DragHandle
+				onStart={handleStart}
+				onDelta={handleDelta}
+				onEnd={handleEnd}
+				style={splitterAbsStyle}
+				className="splitter"
+			/>
+		</div>
+	);
 });
 
 

package/src/components.jsx

@@ -94,7 +94,12 @@ class ComponentCache
 	{
 		this.current_map.forEach( (arr)=>{
 			arr.slice(arr[IDX]).forEach((ex)=>{
-				if(ex.cleanup) ex.cleanup();
+				if(ex.cleanup) {
+					ex.cleanup();
+				}
+				else if(ex.element) {
+					ex.element.parentElement.removeChild(ex.element);
+				}
 			});
 		});
 
@@ -428,19 +433,31 @@ if(DEBUG) {
 					this.event_detachers[al] = 
 						Lilact.addWrappedEventListener(this.element, alc.substring(2), patch[a], {capture: true});
 				}
-				else if(al==='style') {
-					if(typeof(patch[a])==='string') {
-						this.element.style = patch[a];
+				else if(a==='style') {
+					if(typeof(patch.style)==='string') {
+						this.element.style = patch.style;
 					}
 					else {
-						for(const x in patch[a]) {
+						if(this.props?.style) {
+							if(typeof(this.props.style)==='string') {
+								this.element.style = "";
+							}
+							else {
+								for(let p in this.props.style) {
+									if( !patch.style.hasOwnProperty(p) ) {
+										this.element.style[p] = "";
+									}
+								}
+							}
+						}						
+						for(const x in patch.style) {
 							if( length_css_attributes_set.has(x) ) {
-								if(isFinite(patch[a][x])) {
-									patch[a][x]+='px';
+								if(isFinite(patch.style[x])) {
+									patch.style[x]+='px';
 								}
 							}
 						}
-						Object.assign(this.element.style, patch[a]);
+						Object.assign(this.element.style, patch.style);
 					}
 				}
 				else if(boolean_html_attributes_set.has(a)) { // not lower cased(al), as it is set as a js property
@@ -704,23 +721,58 @@ 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;
+	/*
+	Priority:
 
-		Lilact.layout_effects = new Set;
-		Lilact.update_cbs = new Set;
-		Lilact.update_set = new Set;
+	- Render + enqueue DOM work (runs in the same task where you schedule the update).
+	- Apply DOM updates (do this synchronously before you schedule any effects that must happen before paint).
+	- Insertion effects (run immediately after DOM is in place, still before paint).
+	- Layout effects (run immediately after insertion effects, still before paint).
+	- Passive effects (useEffect)
 
-		for(const le of _layout_effects) le();
+    schedule them for after paint using requestAnimationFrame, typically:
+        run the “after paint” work in the next frame or in a callback scheduled such that it runs after the browser has performed the paint.
+
+
+	Current task: render → DOM updates → insertion effects → layout effects
+	Next paint timing boundary: requestAnimationFrame callback → passive effects (useEffect)
+	*/
+
+
+	clearTimeout(Lilact.effect_timeout);
+
+	const _update_set = Lilact.update_set;
+	const _update_cbs = Lilact.update_cbs;
+	Lilact.update_set = new Set;
+	Lilact.update_cbs = new Set;
+
+	for(const u of _update_set)  u.apply();
+	for(const cb of _update_cbs)  cb();
+	processEffects();
 
-		for(const u of _update_set)  u.apply();
-		for(const cb of _update_cbs) cb();
-	});
 }
 
 
+/** @ignore */
+export function processEffects()
+{
+	const _insertion_effects = Lilact.insertion_effects;
+	const _layout_effects = Lilact.layout_effects;
+	const _passive_effects = Lilact.passive_effects;
+
+	Lilact.insertion_effects = new Set;
+	Lilact.layout_effects = new Set;
+	Lilact.passive_effects = new Set;
+
+	for(const ie of _insertion_effects) ie();
+	for(const le of _layout_effects) le();
+
+	requestAnimationFrame(()=>{
+		for(const pe of _passive_effects) pe();
+	});
+
+}
+
 function decode(html) 
 {
 	decode.parser ??= new DOMParser;
@@ -1037,7 +1089,7 @@ export class RootComponent extends HTMLComponent
 
 export function createComponent(entity, props={}, ...children)
 {
-	if(entity!==undefined && typeof(entity)!=='string' && typeof(entity)!=='function') {
+	if(typeof(entity)!=='string' && typeof(entity)!=='function') {
 		throw new Error("Invalid entity for createComponent.");		
 	}
 
@@ -1129,6 +1181,7 @@ export function render(component, element)
 	return createRoot(element).render(component);
 }
 
+
 /** @ignore */
 export const createElement = createComponent;
 
@@ -1143,6 +1196,18 @@ export let update_cbs  = new Set;
 export let roots  = new Set;
 /** @ignore */
 export let layout_effects = new Set;
+/** @ignore */
+export let insertion_effects = new Set;
+/** @ignore */
+export let passive_effects = new Set;
+
+
+/** @ignore */
+export let update_timeout = undefined;
+/** @ignore */
+export let effect_timeout = undefined;
+/** @ignore */
+export let update_interval_margin = 0;
 
 /** @ignore */
 export const special_attributes = new Set([
@@ -1189,3 +1254,5 @@ export const length_css_attributes_set = new Set([
 export const boolean_html_attributes_set = new 
 	Set(["disabled", "readOnly", "required", "checked", "multiple",
 			 "hidden","open","loop","muted","controls","playsInline","allowFullScreen"]);
+
+