lilact 0.16.0 → 0.16.2

package/README.md

@@ -29,7 +29,7 @@ If you find Lilact useful, please consider sponsoring. Your support funds ongoin
 
 ## Overview
 
-`Lilact` is a very lightweight implementation of the React API designed to run in the browser. It can be used as a single script that is around `90kb` minified and around `32kb` gzipped, and includes its whole API.
+`Lilact` is a very lightweight implementation of the React API designed to run in the browser. It can be used as a single script that is around `90kb` minified and around `32kb` gzipped and includes its whole API.
 
 `Lilact` is very fast, uses minimal resources, and handles memory very efficiently.
 
@@ -81,14 +81,14 @@ Note: modules are separated in the documentation to improve structure, but in pr
 
 ## ESBuild-based Bundler
 
-A `ESBuild` based bundler is available in the `bin` directory. It can be used like this:
+An `ESBuild` based bundler is available in the `bin` directory. It can be used like this:
 
 ```bash
-npx lilact-bundle --entry client/App.jsx --mode production --name bundle.js --out public/dist
+npx lilact-bundle --watch --minify --entry client/App.jsx --mode production --name bundle.js --out public/dist
 ```
 
-If you add a `--watch` argument, the bundler will not exit and keep watching the input file(s),
-and update the bundle if any file is changed.
+If you add a `--watch` argument, the bundler will stay running and keep watching the input file(s),
+and update the bundle if any file is changed. 
 
 ---
 

package/bin/bundle.cjs

@@ -100,7 +100,7 @@ function parseArgs(argv) {
 		if (!k || !k.startsWith("--")) continue;
 		const key = k.slice(2);
 
-		if (key === "watch") {
+		if (key === "watch" || key === "minify") {
 			args[key] = true;
 			continue;
 		}
@@ -118,18 +118,19 @@ async function run() {
 
 	if (!userEntry) {
 		console.error(
-			"Usage: lilact-bundler --watch --entry ./path/to/entry.js --mode production --out ./dist --name bundle.js"
+			"Usage: lilact-bundler --watch --minify --entry ./path/to/entry.js --mode production --out ./dist --name bundle.js"
 			);
 		process.exit(1);
 	}
 
 	const name = args.name ?? "bundle.js";
 	const mode = args.mode ?? "production";
-	const watch = args.watch === true;
+	const watch = args?.watch === true;
+	const minify = args?.minify === true;
 
 	const userOutDir = args.out
-	? path.resolve(userProjectRoot, args.out)
-	: path.resolve(userProjectRoot, "dist");
+			? path.resolve(userProjectRoot, args.out)
+			: path.resolve(userProjectRoot, "dist");
 
 	const outFile = path.join(userOutDir, name);
 
@@ -155,10 +156,10 @@ async function run() {
 		platform: "browser",
 
 		outfile: outFile,
-		sourcemap: mode === "development",
+		sourcemap: true,
 		target: ["es2018"],
 
-		minify: mode === "production",
+		minify: minify,
 		define,
 
 		absWorkingDir: userProjectRoot,
@@ -177,15 +178,23 @@ async function run() {
 		],
 	});
 
+	const shutdown = async () => {
+		try {
+			await ctx.dispose();
+		} finally {
+			process.exit(0);
+		}
+	};
+
 	const buildOpts = {
 		entryPoints: [userEntry],
 		bundle: true,
 		format: "esm",
 		platform: "browser",
 		outfile: outFile,
-		sourcemap: mode === "development",
+		sourcemap: true,
 		target: ["es2018"],
-		minify: mode === "production",
+		minify: minify,
 		define,
 		loader: { ".js": "js", ".jsx": "jsx", ".css": "css" },
 		resolveExtensions: [".js", ".jsx", ".json"],
@@ -199,15 +208,9 @@ async function run() {
 		console.log(`Watching... output: ${outFile}`);
 	} else {
 		await ctx.rebuild();
+		await shutdown();
 	}
 	
-	const shutdown = async () => {
-		try {
-			await ctx.dispose();
-		} finally {
-			process.exit(0);
-		}
-	};
 
 	process.on("SIGINT", shutdown);
 	process.on("SIGTERM", shutdown);

package/bin/copy-demo.js

@@ -19,7 +19,7 @@ function copyDirRecursive(src, dest) {
 }
 
 const typedocOut = process.env.TYPEDOC_OUT || 'docs';
-const from = path.resolve(__dirname, '..', 'root');
+const from = path.resolve(__dirname, '..', 'examples');
 const to = path.resolve(__dirname, '..', typedocOut, 'static');
 
 copyDirRecursive(from, to);

package/dist/lilact.development.js

@@ -4697,14 +4697,9 @@ function DragHandle({
   }, [endDrag]);
   return createComponent("div", { "role": "button", "tabIndex": 0, "style": { ...style, touchAction: "none" }, "className": cx2(className, isDragging ? "dragging" : ""), "onPointerDown": onPointerDown, "onPointerMove": onPointerMove, "onPointerUp": onPointerUp, "onPointerCancel": onPointerCancel }, children);
 }
-var clamp = (n, min, max) => {
-  if (!Number.isFinite(n)) return n;
-  return Math.min(max, Math.max(min, n));
-};
 var SplitPane = forwardRef(function SplitPane2({
   mode = "horizontal",
   position: position2,
-  // controlled: number | undefined/null
   defaultPosition = 0.5,
   min = 0.1,
   max = 0.9,
@@ -4712,135 +4707,139 @@ var SplitPane = forwardRef(function SplitPane2({
   onSizeChange,
   style,
   className,
-  leftPaneStyle,
-  rightPaneStyle,
+  firstPaneStyle,
+  secondPaneStyle,
   splitterStyle,
   children
 }, ref) {
-  var _a, _b;
-  const containerRef = useRef(null);
-  const panes = Children.toArray(children);
-  const leftChild = (_a = panes[0]) != null ? _a : null;
-  const rightChild = (_b = panes[1]) != null ? _b : null;
-  const isControlled = position2 != null;
-  const [internalMode, setInternalMode] = useState(mode);
-  const [posUncontrolled, setPosUncontrolled] = useState(
-    () => clamp(
-      position2 != null ? position2 : defaultPosition,
-      min,
-      max
-    )
-  );
+  const initialMode = mode === "vertical" ? "vertical" : "horizontal";
+  const [internalMode, setInternalMode] = useState(initialMode);
+  const [internalPos, setInternalPos] = useState(clamp(defaultPosition, min, max));
+  const posResolved = position2 == null ? internalPos : clamp(position2, min, max);
   useEffect(() => {
-    if (mode != null) setInternalMode(mode);
+    if (position2 == null) return;
+    setInternalPos(clamp(position2, min, max));
+  }, [position2, min, max]);
+  useEffect(() => {
+    setInternalMode(mode === "vertical" ? "vertical" : "horizontal");
   }, [mode]);
-  useLayoutEffect(() => {
-    if (isControlled) return;
-    setPosUncontrolled((p) => clamp(p, min, max));
-  }, [min, max, isControlled]);
-  const posResolved = isControlled ? clamp(position2, min, max) : posUncontrolled;
   const setPosition = (next2) => {
     const clamped = clamp(next2, min, max);
-    if (!isControlled) setPosUncontrolled(clamped);
+    if (position2 == null) setInternalPos(clamped);
     onSizeChange == null ? void 0 : onSizeChange(clamped);
   };
-  const draggingRef = useRef(false);
-  const pointerIdRef = useRef(null);
-  const updateFromClient = (clientX, clientY) => {
+  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 rect2 = el.getBoundingClientRect();
+      sizeRef.current = { w: rect2.width, h: rect2.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") {
-      const usable = rect.width;
-      if (!Number.isFinite(usable) || usable <= 0) return;
-      const raw = (clientX - rect.left) / usable;
-      if (!Number.isFinite(raw)) return;
-      setPosition(raw);
+      setPosition(startPosRef.current + x / (w || 1));
     } else {
-      const usable = rect.height;
-      if (!Number.isFinite(usable) || usable <= 0) return;
-      const raw = (clientY - rect.top) / usable;
-      if (!Number.isFinite(raw)) return;
-      setPosition(raw);
+      setPosition(startPosRef.current + y / (h || 1));
     }
   };
-  useEffect(() => {
-    const onMove = (e) => {
-      if (!draggingRef.current) return;
-      if (pointerIdRef.current != null && e.pointerId !== pointerIdRef.current) return;
-      updateFromClient(e.clientX, e.clientY);
-    };
-    const stop = (e) => {
-      if (!draggingRef.current) return;
-      if (pointerIdRef.current != null && e.pointerId !== pointerIdRef.current) return;
-      draggingRef.current = false;
-      pointerIdRef.current = null;
-    };
-    window.addEventListener("pointermove", onMove, { passive: true });
-    window.addEventListener("pointerup", stop, { passive: true });
-    window.addEventListener("pointercancel", stop, { passive: true });
-    return () => {
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", stop);
-      window.removeEventListener("pointercancel", stop);
-    };
-  }, [internalMode]);
-  const onPointerDown = (e) => {
-    var _a2, _b2;
-    if (e.button != null && e.button !== 0) return;
-    e.preventDefault();
-    draggingRef.current = true;
-    pointerIdRef.current = e.pointerId;
-    try {
-      (_b2 = (_a2 = e.currentTarget).setPointerCapture) == null ? void 0 : _b2.call(_a2, e.pointerId);
-    } catch (e2) {
-    }
-    updateFromClient(e.clientX, e.clientY);
+  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 onKeyDown = (e) => {
-    const step = 0.02;
-    let delta = 0;
-    if (internalMode === "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);
-    }
+  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 || {}
   };
-  const sizes = useMemo(() => {
-    const leftPct = `${posResolved * 100}%`;
-    const rightCalc = `calc(${100 - posResolved * 100}% - ${splitterSize}px)`;
-    return { leftPct, rightCalc };
-  }, [posResolved, splitterSize]);
-  const rootStyle = {
-    display: "flex",
-    width: "100%",
+  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%",
-    overflow: "hidden",
+    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",
-    ...style || {},
-    flexDirection: internalMode === "horizontal" ? "row" : "column"
+    pointerEvents: "auto",
+    ...splitterBase,
+    ...splitterStyle || {}
   };
-  const leftPaneComputed = internalMode === "horizontal" ? { width: sizes.leftPct, flex: `0 0 ${sizes.leftPct}`, overflow: "auto", ...leftPaneStyle || {} } : { height: sizes.leftPct, flex: `0 0 ${sizes.leftPct}`, overflow: "auto", ...leftPaneStyle || {} };
-  const rightPaneComputed = internalMode === "horizontal" ? { width: sizes.rightCalc, flex: "1 1 auto", overflow: "auto", ...rightPaneStyle || {} } : { height: sizes.rightCalc, flex: "1 1 auto", overflow: "auto", ...rightPaneStyle || {} };
-  const splitterComputed = internalMode === "horizontal" ? { width: `${splitterSize}px`, transform: "translateX(-50%)", height: "100%", flex: `0 0 ${splitterSize}px`, background: "rgba(0,0,0,0.08)", cursor: "col-resize", ...splitterStyle || {} } : { height: `${splitterSize}px`, transform: "translateY(-50%)", width: "100%", flex: `0 0 ${splitterSize}px`, background: "rgba(0,0,0,0.08)", cursor: "row-resize", ...splitterStyle || {} };
-  const dividerVisualStyle = internalMode === "horizontal" ? { height: "100%", width: "100%" } : { width: "100%", height: "100%" };
-  useImperativeHandle(ref, () => ({
-    setPosition,
-    setMode: (nextMode) => setInternalMode(nextMode === "vertical" ? "vertical" : "horizontal"),
-    getPosition: () => posResolved,
-    getMode: () => internalMode
-  }));
-  return createComponent("div", { "ref": containerRef, "className": className, "style": rootStyle }, createComponent("div", { "style": leftPaneComputed }, leftChild), createComponent("div", { "role": "separator", "aria-orientation": internalMode === "horizontal" ? "vertical" : "horizontal", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": posResolved, "tabIndex": 0, "onPointerDown": onPointerDown, "onPointerCancel": () => {
-    draggingRef.current = false;
-    pointerIdRef.current = null;
-  }, "onKeyDown": onKeyDown, "style": splitterComputed }, createComponent("div", { "style": dividerVisualStyle })), createComponent("div", { "style": rightPaneComputed }, rightChild));
+  return createComponent("div", { "ref": containerRef, "className": className, "style": {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    ...style || {}
+  } }, createComponent("div", { "style": pane1StyleAbs }, firstChild), createComponent("div", { "style": pane2StyleAbs }, secondChild), createComponent(DragHandle, { "onStart": handleStart, "onDelta": handleDelta, "onEnd": handleEnd, "style": splitterAbsStyle }));
 });
+var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
 
 // .tmp/src/vlq.js
 var char_to_integer = {};
@@ -5301,10 +5300,10 @@ function parseXML(code2, index2, container2, look_behind = false) {
         if (res2[0] > index2) index2 = res2[0];
         else index2++;
         break;
-      case ">": {
-        const i3 = parseXMLContent(code2, index2, b2);
-        if (i3 === null) return;
-        if (i3 > index2) index2 = i3;
+      case ">":
+        const j = parseXMLContent(code2, index2, b2);
+        if (j === null) return;
+        if (j > index2) index2 = j;
         else index2++;
         if (b2.end) {
           if (container2) container2.children.push(b2);
@@ -5313,7 +5312,6 @@ function parseXML(code2, index2, container2, look_behind = false) {
           index2++;
         }
         break;
-      }
       case " ":
       case "	":
       case "\n":