lilact 0.0.0

package/root/demos/context.jsx

@@ -0,0 +1,68 @@
+const { createContext, useContext, useState, render } = Lilact;
+const { css, cx } = Lilact.emotion;
+
+const ThemeContext = createContext(null);
+
+function Form({ children }) {
+	return (
+		<Panel title="Welcome">
+			<Button>Sign up</Button>
+			<Button>Log in</Button>
+		</Panel>
+		);
+}
+
+function Panel({ title, children }) {
+	const theme = useContext(ThemeContext);
+	const className = 'panel-' + theme;
+	return (
+		<section className={cx(className,css`
+
+			&.panel-dark {
+				background: #333;
+				color: #eee;
+			}
+		`)}>
+			<h1 className={css`
+							&:hover {
+						        color: red;
+						      }
+
+						`}>{title}
+			</h1>
+			{children}
+		</section>
+		)
+}
+
+function Button({ children }) {
+	const theme = useContext(ThemeContext);
+	const className = 'button-' + theme;
+	return (
+		<button className={className}>
+			{children}
+		</button>
+		);
+}
+
+function Demo() {
+	const [theme, setTheme] = useState('dark');
+
+	return (
+			<ThemeContext.Provider value={theme}>
+				<Form />
+				<label>
+					<input
+						type="checkbox"
+						checked={theme === 'dark'}
+						onchange={(e) => {
+							setTheme(e.target.checked ? 'dark' : 'light')
+						}}
+					/>
+					Use dark mode
+				</label>
+			</ThemeContext.Provider>
+		)
+}
+
+module.exports = Demo;

package/root/demos/css-transition.jsx

@@ -0,0 +1,65 @@
+const { Transition, CSSTransition, render,  useState, useRef } = Lilact;
+
+
+Lilact.emotion.injectGlobal(`
+.test {
+  -position: absolute;
+  transition: opacity 1000ms, transform 1000ms;
+}
+
+.test-appear  {
+  opacity: 0;
+}
+.test-enter-active, .test-enter-done  {
+  opacity: 1;
+  -transform: scale(1);
+}
+.test-exit-active, .test-exit-done {
+  opacity: 0.2;
+  -transform: scale(0.9);
+}
+
+`);
+
+
+function Demo() 
+{
+  const [inProp, setInProp] = useState(false);
+  const nodeRef = useRef(null);
+
+  const chs = [];
+
+  for(let i=0; i<10;i++) chs.push( <div className='test'>{i}</div> );
+
+  return (
+    <div>
+
+      <CSSTransition in={inProp} classNames='test'
+      
+      onEnter={function(){console.log('onEnter', arguments)}}
+      onEntering={function(){console.log('onEntering', arguments)}}
+      onEntered={function(){console.log('onEntered', arguments)}}
+      onExit={function(){console.log('onExit', arguments)}}
+      onExiting={function(){console.log('onExiting', arguments)}}
+      onExited={function(){console.log('onExited', arguments)}}
+
+      timeout={1000}
+
+      unmountOnExit={false}
+      mountOnEnter={false}
+      >
+        {chs}
+      </CSSTransition>
+
+      <button ref={nodeRef} className="test" onClick={() => setInProp(!inProp)}>
+        Click to {inProp?" OUT":" IN"}
+      </button>
+
+     <br/>
+      <br/>
+
+    </div>
+  );
+}
+
+module.exports = Demo;

package/root/demos/modal.jsx

@@ -0,0 +1,41 @@
+const { useEffect, useRef, useState, render } = Lilact;
+
+function ModalDialog({ isOpen, children }) {
+	const ref = useRef();
+	useEffect(() => {
+		
+		if (!isOpen) {
+			return;
+		}
+		const dialog = ref.current;
+
+		dialog.showModal();
+
+		return () => {
+			dialog.close();
+		};
+	}, [isOpen]);
+
+	return <dialog ref={ref}>{children}</dialog>;
+}
+
+function Demo() {
+	const [show, setShow] = useState(false);
+	console.log(show);
+	return (
+		<>
+			<button onClick={() => setShow(true)}>
+				Open dialog
+			</button>
+			<ModalDialog isOpen={show}>
+				Hello there!
+				<br />
+				<button onClick={() => {
+					setShow(false);
+				}}>Close</button>
+			</ModalDialog>
+		</>
+		);
+}
+
+module.exports = Demo;

package/root/demos/proptypes.jsx

@@ -0,0 +1,37 @@
+const { PropTypes, createRoot } = Lilact;
+
+function UserCard({ name, age, tags, onClick }) {
+  return (
+    <div onClick={onClick} style={{border:'1px solid #ddd', padding:8, width:200}}>
+      <h4>{name}</h4>
+      <div>Age: {age}</div>
+      <ul>{tags.map((t,i) => <li key={i}>{t}</li>)}</ul>
+    </div>
+  );
+}
+
+UserCard.propTypes = {
+  name: PropTypes.string.isRequired,
+  age: PropTypes.number,
+  tags: PropTypes.arrayOf(PropTypes.string),
+  onClick: PropTypes.func,
+};
+
+UserCard.defaultProps = {
+  age: 0,
+  tags: [],
+  onClick: () => {},
+};
+
+/* App render */
+function Demo() {
+  return (
+    <div><p>Check your browser console to see the logs.</p>
+      <UserCard name="Alex" age={29} tags={['react','js']} />
+      {/* Missing name -> will warn in dev console */}
+      <UserCard age={"not-a-number"} />
+    </div>
+  );
+}
+
+module.exports = Demo;

package/root/demos/reducer.jsx

@@ -0,0 +1,71 @@
+const { useReducer, render } = Lilact;
+
+function createInitialState(username) {
+	const initialTodos = [];
+	for (let i = 0; i < 10; i++) {
+		initialTodos.push({
+			id: i,
+			text: username + "'s task #" + (i + 1)
+		});
+	}
+	return {
+		draft: '',
+		todos: initialTodos,
+	};
+}
+
+function reducer(state, action) {
+
+	switch (action.type) {
+		case 'changed_draft': {
+			return {
+				draft: action.nextDraft,
+				todos: state.todos,
+			};
+		};
+		case 'added_todo': {
+			return {
+				draft: '',
+				todos: [{
+					id: state.todos.length,
+					text: state.draft
+				}, ...state.todos]
+			}
+		}
+	}
+	throw Error('Unknown action: ' + action.type);
+}
+
+function Demo({ username }) 
+{
+	const [state, dispatch] = useReducer(
+		reducer,
+		username,
+		createInitialState
+		);
+	return (
+		<>
+		<input
+			value={state.draft}
+			onChange={e => {
+				dispatch({
+					type: 'changed_draft',
+					nextDraft: e.target.value
+				})
+			}}
+		/>
+		<button onClick={() => {
+			dispatch({ type: 'added_todo' });
+		}}>Add</button>
+		<ul>
+			{state.todos.map(item => (
+				<li key={item.id}>
+					{item.text}
+				</li>
+				))}
+		</ul>
+		</>
+		);
+}
+
+module.exports = Demo;

package/root/demos/redux.jsx

@@ -0,0 +1,58 @@
+const { Provider, useSelector, useDispatch, connect, render } = Lilact;
+const { createStore } = Lilact.redux;
+
+// Reducer + store
+function counterReducer(state = { count: 0 }, action) {
+	switch (action.type) {
+		case "INCREMENT": return { count: state.count + 1 };
+		case "DECREMENT": return { count: state.count - 1 };
+		default: return state;
+	}
+}
+const store = createStore(counterReducer);
+
+// Hooks-based component
+function CounterHooks() {
+	const count = useSelector(state => state.count);
+	const dispatch = useDispatch();
+	return (
+		<div>
+			<h3>Hooks Counter</h3>
+			<div>Count: {count}</div>
+			<button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
+			<button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
+		</div>
+	);
+}
+
+// connect-based component
+function CounterView({ count, increment, decrement }) {
+	return (
+		<div>
+			<h3>Connected Counter</h3>
+			<div>Count: {count}</div>
+			<button onClick={decrement}>-</button>
+			<button onClick={increment}>+</button>
+		</div>
+	);
+}
+const mapState = (state) => ({ count: state.count });
+const mapDispatch = (dispatch) => ({
+
+	increment: () => { dispatch({ type: "INCREMENT" })},
+	decrement: () => { dispatch({ type: "DECREMENT" })}
+});
+const ConnectedCounter = connect(mapState, mapDispatch)(CounterView);
+
+function Demo({ username }) 
+{
+	return	<Provider store={store}>
+				<div>
+					<CounterHooks />
+					<ConnectedCounter />
+				</div>
+			</Provider>;
+}
+
+module.exports = Demo;
+

package/root/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/root/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/root/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/root/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/root/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/root/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;