lilact 0.0.0 → 0.2.0

package/docs/static/demos/proptypes.jsx

@@ -1,4 +1,4 @@
-const { PropTypes, createRoot } = Lilact;
+const { PropTypes } = Lilact;
 
 function UserCard({ name, age, tags, onClick }) {
   return (
@@ -23,15 +23,12 @@ UserCard.defaultProps = {
   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>
-  );
+  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/docs/static/demos/reducer.jsx

@@ -1,4 +1,4 @@
-const { useReducer, render } = Lilact;
+const { useReducer } = Lilact;
 
 function createInitialState(username) {
 	const initialTodos = [];
@@ -43,29 +43,27 @@ function Demo({ username })
 		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>
-		</>
-		);
+	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/docs/static/demos/redux.jsx

@@ -1,4 +1,4 @@
-const { Provider, useSelector, useDispatch, connect, render } = Lilact;
+const { Provider, useSelector, useDispatch, connect } = Lilact;
 const { createStore } = Lilact.redux;
 
 // Reducer + store

package/docs/static/demos/router.jsx

@@ -1,11 +1,4 @@
-const { createRoot,HashRouter,
-  NavLink,
-  Routes,
-  Route,
-  useNavigate,
-  useLocation,
-  useState
-} = Lilact;
+const { HashRouter, NavLink, Routes, Route, useNavigate, useLocation } = Lilact;
 
 /* Simple pages */
 function Home() {

package/docs/static/demos/stopwatch.jsx

@@ -1,4 +1,4 @@
-const { useState, useRef, render } = Lilact;
+const { useState, useRef } = Lilact;
 
 function Demo() 
 {

package/docs/static/demos/suspense.jsx

@@ -1,4 +1,4 @@
-const {Suspense, Spinner} = Lilact;
+const { Suspense, Spinner } = Lilact;
 
 // resource factory that throws its internal promise until resolved
 function createResource(delay, value) {
@@ -36,12 +36,10 @@ function Child2() {
 }
 
 function Demo() {
-  return (
-    <Suspense minDelay={200} minShowTime={400} fallback={<Spinner/>}>
-      <Child1 />
-      <Child2 />
-    </Suspense>
-  );
+  return  <Suspense minDelay={200} minShowTime={400} fallback={<Spinner/>}>
+            <Child1 />
+            <Child2 />
+          </Suspense>
 }
 
 

package/docs/static/demos/transition.jsx

@@ -8,33 +8,33 @@ function Demo() {
   };
 
   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) => (
+          <p>See the console for logs.</p>
           <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>}
+            <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>
-        )}
-      </Transition>
-    </div>
-  </>;
+        </>;
 };
 
 module.exports = Demo;

package/{root/demos/use-differed.jsx → docs/static/demos/use-deffered.jsx}

@@ -1,4 +1,4 @@
-const { useState, useDeferredValue, render } = Lilact;
+const { useState, useDeferredValue } = Lilact;
 
 function ExpensiveList({ query }) {
   const items = Array.from({ length: 5000 }, (_, i) => `${query} item ${i}`);

package/docs/static/demos/usetransition.jsx

@@ -1,4 +1,4 @@
-const { useTransition, useState, useCallback, useId, render } = Lilact;
+const { useTransition, useState, useCallback, useId } = Lilact;
 const { css, cx } = Lilact.emotion;
 
 const Demo = ()=>{
@@ -24,13 +24,11 @@ const Demo = ()=>{
 						} )
 					}, [] );
 	return (
-
 		<div className={css({background:bg})}>
-		<h4>{id}</h4>
+			<h4>{id}</h4>
 			{isPending? <b>PENDING...</b> : <i>NOT PENDING</i>}
 			<button onclick={startCB}>START CB</button>
 		</div>
-
 	);
 };
 

package/docs/static/index 2.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8"/>
+	<title>Lilact Demo</title>
+	<script src='./lilact.development.min.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, lazy, require } = Lilact;
+const { css,cx,injectGlobal } = Lilact.emotion;
+
+
+
+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" } 
+							});
+
+const outer = css({
+	display: "flex",
+	flexDirection: "row",
+	gap: 2,
+	alignItems: "stretch",
+	width: "100%",
+});
+
+const collapsible = css({
+	width: "100%",
+	display: "block",
+	fontSize: "16px",
+	border: "1px solid #888",
+	padding: "5px"
+});
+
+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" 
+									});
+
+const left = css({ float: "left" });
+const right = css({ float: "right" });
+
+
+
+const Mod = lazy( ()=>require('demos/stopwatch.jsx') );
+
+function DemoBlock({file}) 
+{
+	return 	<> 
+						<div>
+							<Suspense fallback={<Spinner/>}>
+					      <Mod/>
+							</Suspense>
+						</div>
+					</>
+	;
+}
+
+
+function App()
+{
+
+	return 	<>
+						<DemoBlock/>
+					</>
+}
+
+render(<App/>, document.body);
+
+</script>
+
+</html>

package/docs/static/index.html

@@ -3,7 +3,7 @@
 <head>
 	<meta charset="utf-8"/>
 	<title>Lilact Demo</title>
-	<script src='./lilact.development.js' type="module"></script>
+	<script src='./lilact.development.min.js' type="module"></script>
 
 	<script src="prismjs/prism.min.js"></script>
 	<script src="prismjs/prism-jsx.min.js"></script>
@@ -68,15 +68,6 @@ injectGlobal({ 	code: { 	whiteSpace: "pre !important",
 												overflowWrap: "anywhere" } 
 							});
 
-
-injectGlobal({ 	code: { 	whiteSpace: "pre !important",
-												padding: "10px 0",
-												fontSize: "14px !important",
-												display: "block",
-												overflowWrap: "anywhere" } 
-							});
-
-
 const outer = css({
 	display: "flex",
 	flexDirection: "row",
@@ -88,7 +79,9 @@ const outer = css({
 const collapsible = css({
 	width: "100%",
 	display: "block",
-	fontSize: "16px"
+	fontSize: "16px",
+	border: "1px solid #888",
+	padding: "5px"
 });
 
 const responsiveOuter = css({
@@ -105,6 +98,9 @@ const pane = css({ flex: "1 1 0",
 										padding: "10px" 
 									});
 
+const left = css({ float: "left" });
+const right = css({ float: "right" });
+
 
 
 function DemoView({ file }) 
@@ -114,7 +110,7 @@ function DemoView({ file })
 	const viewRef = useRef();
 	const codeRef = useRef();
 
-  const resource = createResource("./demos/"+file);
+  const resource = createResource("./demos/"+file[0]);
   const code = resource.read(); // Suspense will handle the promise
 
   if(isOpen) {
@@ -130,13 +126,14 @@ function DemoView({ file })
 	
 	return 	<>
 						<button onClick={()=>setOpen(!isOpen)} className={collapsible}>
-							{(isOpen?'- ':'+ ')+file}
+							<span className={left}>{ (isOpen?'- ':'+ ') + file[0] + ' '}</span>
+							<b className={right}>{file[1]}</b>
 						</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>
+									<code className="language-jsx code_style" ref={codeRef}>{code}</code>
 								</div>
 								<div className={pane} ref={viewRef}></div>
 							</div>
@@ -162,26 +159,27 @@ function DemoBlock({file})
 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'
+		['stopwatch.jsx',				'( useState, useRef )'],
+		['modal.jsx',						'( useEffect, useRef, useState )'],
+		['actionstate.jsx',			'( useActionState, useState )'],
+		['context.jsx',					'( createContext, useContext, useState ), emotion:( css, cx )'],
+		['proptypes.jsx',				'( PropTypes )'],
+		['router.jsx',					'( HashRouter, NavLink, Routes, Route, useNavigate, useLocation )'],
+		['use-deffered.jsx',		'( useState, useDeferredValue )'],
+		['boundary.jsx',				'( ErrorBoundary, useState )'],
+		['css-transition.jsx',	'( CSSTransition, useState, useRef )'],
+		['reducer.jsx',					'( useReducer )'],
+		['usetransition.jsx',		'( useTransition, useState, useCallback, useId ), emotion:( css, cx )'],
+		['redux.jsx',						'( Provider, useSelector, useDispatch, connect ), redux:( createStore )'],
+		['suspense.jsx',				'( Suspense, Spinner )'],
+		['transition.jsx',			'( useState, Transition )'],
+		['lazy.jsx',						'( lazy, require, Suspene, Spinner )']
 	];
 
 	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 scripts are transpiled and run directly in your browser. You have already loaded Lilact completely!</p>
 
 						<p>These examples are not meant to be pretty.