lilact 0.0.0

package/docs/static/demos/router.jsx

@@ -0,0 +1,153 @@
+const { createRoot,HashRouter,
+  NavLink,
+  Routes,
+  Route,
+  useNavigate,
+  useLocation,
+  useState
+} = Lilact;
+
+/* Simple pages */
+function Home() {
+  const loc = useLocation();
+  return (
+    <div>
+      <h2>Home</h2>
+      <p>Welcome to the home page.</p>
+      {loc.state?.from && (
+        <p>
+          <strong>Arrived from:</strong> {loc.state.from}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function About() {
+  const loc = useLocation();
+  return (
+    <div>
+      <h2>About</h2>
+      <p>This is the about page.</p>
+      {loc.state?.message && (
+        <p>
+          <strong>Message:</strong> {loc.state.message}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function Profile({ name = "Guest" }) {
+  const loc = useLocation();
+  return (
+    <div>
+      <h2>Profile</h2>
+      <p>Signed in as: {name}</p>
+      {loc.state?.note && (
+        <p>
+          <strong>Note:</strong> {loc.state.note}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function NotFound() {
+  const loc = useLocation();
+  return (
+    <div>
+      <h2>404</h2>
+      <p>No match for <code>{loc.pathname}</code></p>
+    </div>
+  );
+}
+
+/* Component demonstrating useNavigate and NavLink state */
+function NavControls() {
+  const navigate = useNavigate();
+
+  return (
+    <div style={{ marginTop: 12 }}>
+      <button onClick={() => navigate("/", { state: { from: "NavControls button" } })}>
+        Go Home (with state)
+      </button>
+      <button
+        onClick={() =>
+          navigate("/about", { state: { message: "Hello from NavControls" } })
+        }
+        style={{ marginLeft: 8 }}
+      >
+        Go About (with state)
+      </button>
+      <button
+        onClick={() =>
+          navigate("/profile", { replace: true, state: { note: "Profile via replace" } })
+        }
+        style={{ marginLeft: 8 }}
+      >
+        Go Profile (replace + state)
+      </button>
+      <button onClick={() => navigate(-1)} style={{ marginLeft: 8 }}>
+        Back
+      </button>
+    </div>
+  );
+}
+
+/* App with nav and routes; NavLink uses 'to' as object with pathname + state */
+function Demo() {
+  const navStyle = {
+    padding: 12,
+    borderBottom: "1px solid #ddd",
+    marginBottom: 12,
+  };
+
+  const linkStyle = ({ isActive }) => ({
+    marginRight: 12,
+    padding: "6px 8px",
+    borderRadius: 4,
+    textDecoration: "none",
+    color: isActive ? "#fff" : "#0366d6",
+    background: isActive ? "#0366d6" : "transparent",
+  });
+
+  return (
+    <HashRouter>
+      <nav style={navStyle}>
+        <NavLink to={{ pathname: "/" }} end style={linkStyle} state={{ from: "NavLink Home" }}>
+          Home
+        </NavLink>
+
+        <NavLink
+          to={{ pathname: "/about" }}
+          style={linkStyle}
+          state={{ message: "Hello from NavLink About" }}
+        >
+          About
+        </NavLink>
+
+        <NavLink
+          to={{ pathname: "/profile" }}
+          style={linkStyle}
+          state={{ note: "Visited via NavLink" }}
+        >
+          Profile
+        </NavLink>
+      </nav>
+
+      <main style={{ padding: 12 }}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/profile" element={<Profile name="Alice" />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+
+        <NavControls />
+      </main>
+    </HashRouter>
+  );
+}
+
+module.exports = Demo;

package/docs/static/demos/stopwatch.jsx

@@ -0,0 +1,42 @@
+const { useState, useRef, render } = Lilact;
+
+function Demo() 
+{
+
+  const [startTime, setStartTime] = useState(null);
+  const [now, setNow] = useState(null);
+  const intervalRef = useRef(null);
+
+  function handleStart() {
+    setStartTime(Date.now());
+    setNow(Date.now());
+
+    clearInterval(intervalRef.current);
+    intervalRef.current = setInterval(() => {
+      setNow(Date.now());
+    }, 50);
+  }
+
+  function handleStop() {
+    clearInterval(intervalRef.current);
+  }
+
+  let secondsPassed = 0;
+  if (startTime != null && now != null) {
+    secondsPassed = (now - startTime) / 1000;
+  }
+
+  return (
+    <>
+      <h1>Time passed: {secondsPassed.toFixed(3)} </h1>
+      <button onClick={handleStart} >
+        Start
+      </button>
+      <button onClick={handleStop} >
+        Stop
+      </button>
+    </>
+  );
+}
+
+module.exports = Demo;

package/docs/static/demos/suspense.jsx

@@ -0,0 +1,48 @@
+const {Suspense, Spinner} = Lilact;
+
+// resource factory that throws its internal promise until resolved
+function createResource(delay, value) {
+  let status = "pending";
+  let result;
+  const p = new Promise((res) => setTimeout(() => res(value), delay)).then(
+    (r) => {
+      status = "success";
+      result = r;
+    },
+    (e) => {
+      status = "error";
+      result = e;
+    }
+  );
+  return {
+    read() {
+      if (status === "pending") throw p;
+      if (status === "error") throw result;
+      return result;
+    },
+  };
+}
+
+const r1 = createResource(500, "First ready (500ms)");
+const r2 = createResource(1200, "Second ready (1200ms)");
+
+function Child1() {
+  const v = r1.read();
+  return <div>{v}</div>;
+}
+function Child2() {
+  const v = r2.read();
+  return <div>{v}</div>;
+}
+
+function Demo() {
+  return (
+    <Suspense minDelay={200} minShowTime={400} fallback={<Spinner/>}>
+      <Child1 />
+      <Child2 />
+    </Suspense>
+  );
+}
+
+
+module.exports = Demo;

package/docs/static/demos/transition.jsx

@@ -0,0 +1,40 @@
+const { useState, Transition } = Lilact;
+
+function Demo() {
+  const [inProp, setInProp] = useState(false);
+
+  const toggleVisibility = () => {
+    setInProp((prev) => !prev);
+  };
+
+  return <>
+    <p>See the console for logs.</p>
+    <div>
+      <button onClick={toggleVisibility}>
+        {inProp ? 'Hide Component' : 'Show Component'}
+      </button>
+      <Transition
+        in={inProp}
+        timeout={1000}
+        mountOnEnter={false} 
+        onEnter={() => console.log('Enter')}
+        onExit={() => console.log('Exit')}
+        onEntering={() => console.log('Entering')}
+        onExiting={() => console.log('Exiting')}
+        onEntered={() => console.log('Entered')}
+        onExited={() => console.log('Exited')}
+      >
+        {(state) => (
+          <div>
+            {state === 'entering' && <p>Hello, World! (Entering)</p>}
+            {state === 'exiting' && <p>Hello, World! (Exiting)</p>}
+            {state === 'entered' && <p>Hello, World! (Visible)</p>}
+            {state === 'exited' && <p>Hello, World! (Hidden)</p>}
+          </div>
+        )}
+      </Transition>
+    </div>
+  </>;
+};
+
+module.exports = Demo;

package/docs/static/demos/use-differed.jsx

@@ -0,0 +1,30 @@
+const { useState, useDeferredValue, render } = Lilact;
+
+function ExpensiveList({ query }) {
+  const items = Array.from({ length: 5000 }, (_, i) => `${query} item ${i}`);
+  return (
+    <ul>
+      {items.map((it) => (
+        <li key={it}>{it}</li>
+      ))}
+    </ul>
+  );
+}
+
+function Demo() {
+  const [q, setQ] = useState("");
+  const deferredQ = useDeferredValue(q, "loading...");
+
+  return (
+    <div>
+      <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Type to search..." />
+      <p>Live: {q}</p>
+      <p>Deferred: {deferredQ}</p>
+      <div style={{ height: 300, overflow: "auto", border: "1px solid #ccc" }}>
+        <ExpensiveList query={deferredQ} />
+      </div>
+    </div>
+  );
+}
+
+module.exports = Demo;

package/docs/static/demos/usetransition.jsx

@@ -0,0 +1,37 @@
+const { useTransition, useState, useCallback, useId, render } = Lilact;
+const { css, cx } = Lilact.emotion;
+
+const Demo = ()=>{
+
+	const [isPending, startTrans] = useTransition();
+	const [bg,setBg] = useState("yellow");
+
+	const id = useId();
+
+	const startCB = useCallback ( ()=>{
+						
+						setBg("pink");
+
+						startTrans( async ()=>{
+							
+							await new Promise( (res,rej)=>{setTimeout(res, 1000)} ); 
+							
+							setBg("lightgreen");
+
+							startTrans( async()=> {
+								await new Promise( (res,rej)=>{setTimeout(res, 1000)} ); 
+							});
+						} )
+					}, [] );
+	return (
+
+		<div className={css({background:bg})}>
+		<h4>{id}</h4>
+			{isPending? <b>PENDING...</b> : <i>NOT PENDING</i>}
+			<button onclick={startCB}>START CB</button>
+		</div>
+
+	);
+};
+
+module.exports = Demo;

package/docs/static/index.html

@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8"/>
+	<title>Lilact Demo</title>
+	<script src='./lilact.development.js' type="module"></script>
+
+	<script src="prismjs/prism.min.js"></script>
+	<script src="prismjs/prism-jsx.min.js"></script>
+	<link rel="stylesheet" href="prismjs/prism.min.css">
+
+</head>
+
+<body></body>
+
+<script type='text/jsx'>
+	
+const { useRef, useEffect, useState, Suspense, Spinner, run, render } = Lilact;
+const { css,cx,injectGlobal } = Lilact.emotion;
+
+
+const cache = new Map();
+
+function createResource(url) {
+  let record = cache.get(url);
+  if (!record) {
+    record = {
+      status: "pending",
+      promise: null,
+      data: null,
+      error: null,
+    };
+
+    record.promise = fetch(url)
+      .then(r => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.text();
+      })
+      .then(data => {
+        record.status = "success";
+        record.data = data;
+      })
+      .catch(err => {
+        record.status = "error";
+        record.error = err;
+      });
+
+    cache.set(url, record);
+  }
+  return {
+    read() {
+      if (record.status === "pending") throw record.promise;
+      if (record.status === "error") throw record.error;
+      return record.data;
+    }
+  };
+}
+
+
+
+injectGlobal({"*:not(code):not(code *)" : {fontFamily: "Ubuntu, 'Segoe UI', 'Noto Sans', helvetica, sans", fontSize: "14px"}});
+
+
+injectGlobal({ 	code: { 	whiteSpace: "pre !important",
+												padding: "10px 0",
+												fontSize: "14px !important",
+												display: "block",
+												overflowWrap: "anywhere" } 
+							});
+
+
+injectGlobal({ 	code: { 	whiteSpace: "pre !important",
+												padding: "10px 0",
+												fontSize: "14px !important",
+												display: "block",
+												overflowWrap: "anywhere" } 
+							});
+
+
+const outer = css({
+	display: "flex",
+	flexDirection: "row",
+	gap: 2,
+	alignItems: "stretch",
+	width: "100%",
+});
+
+const collapsible = css({
+	width: "100%",
+	display: "block",
+	fontSize: "16px"
+});
+
+const responsiveOuter = css({
+	"@media (max-width: 600px)": {
+		flexDirection: "column",
+	},
+});
+
+const pane = css({ flex: "1 1 0",
+										border: "1px solid",
+										height: "400px",
+										minHeight: "400px",
+										overflowY: "auto",
+										padding: "10px" 
+									});
+
+
+
+function DemoView({ file }) 
+{
+	const [isOpen, setOpen] = useState(false);
+
+	const viewRef = useRef();
+	const codeRef = useRef();
+
+  const resource = createResource("./demos/"+file);
+  const code = resource.read(); // Suspense will handle the promise
+
+  if(isOpen) {
+		useEffect(() => {
+			const Comp = run(code);
+			Lilact.render(<Comp/>, viewRef.current);
+		});
+
+		useEffect(() => {
+			Prism.highlightElement(codeRef.current);
+		});
+	}
+	
+	return 	<>
+						<button onClick={()=>setOpen(!isOpen)} className={collapsible}>
+							{(isOpen?'- ':'+ ')+file}
+						</button>
+						{isOpen &&
+						<div style={{width:"100%"}}>
+							<div className={cx(responsiveOuter,outer)}>
+								<div className={pane} style={{background:"#f5f2f0"}}>
+									<code className="language-jsx" ref={codeRef}>{code}</code>
+								</div>
+								<div className={pane} ref={viewRef}></div>
+							</div>
+						</div>
+						}
+					</>;
+}
+
+
+function DemoBlock({file}) 
+{
+	return 	<> 
+						<div>
+							<Suspense fallback={<Spinner/>}>
+					      <DemoView file={file} />
+							</Suspense>
+						</div>
+					</>
+	;
+}
+
+
+function App()
+{
+	const demos =[	
+		'stopwatch.jsx',
+		'modal.jsx',
+		'actionstate.jsx',
+		'context.jsx',
+		'proptypes.jsx',
+		'router.jsx',
+		'use-differed.jsx',
+		'boundary.jsx',
+		'css-transition.jsx',
+		'reducer.jsx',
+		'usetransition.jsx',
+		'redux.jsx',
+		'suspense.jsx',
+		'transition.jsx'
+	];
+
+	return 	<>
+						<h3>Lilact Demos</h3>
+						
+						<p>These scripts are transpiled and run directly in your browser. You have already loaded the complete Lilact toolchain!</p>
+
+						<p>These examples are not meant to be pretty.
+
+							These are bare minimum examples of the React API implemented in Lilact.</p>
+
+						<p>Note that we are using the development version here to have proptypes warnings.
+							If you switch to production mode proptypes won't check anything.</p>
+
+						<p>In many examples like boundary or proptypes you should have your browser console opened to see the logs.</p>
+						
+						<p>See the{" "}<a href="../">Lilact Documentation</a>{" "}for more info.</p>
+
+						{demos.map((x)=><DemoBlock file={x}/>)}
+
+						<hr/>
+						<p>
+Copyright (C) 2024-2026 Arash Kazemi {" <contact.arash.kazemi@gmail.com>"}. All rights reserved.
+<br/><br/>
+Lilact project is subject to the terms of BSD-2-Clause License. See the `LICENSE.TXT` file for more details.
+						</p>
+					</>
+}
+
+render(<App/>, document.body);
+
+</script>
+
+</html>