lilact 0.21.1 → 0.23.0

package/docs/static/demos/router.jsx

@@ -1,4 +1,4 @@
-const { HashRouter, NavLink, Routes, Route, useNavigate, useLocation } = Lilact;
+import { HashRouter, NavLink, Routes, Route, useNavigate, useLocation } from "lilact";
 
 /* Simple pages */
 function Home() {
@@ -79,7 +79,7 @@ function NavControls() {
         }
         style={{ marginLeft: 8 }}
       >
-        Go Profile (replace + state)
+        Go Profile (replace + state) (Clears History)
       </button>
       <button onClick={() => navigate(-1)} style={{ marginLeft: 8 }}>
         Back
@@ -143,4 +143,4 @@ function Demo() {
   );
 }
 
-module.exports = Demo;
+export default Demo;

package/docs/static/demos/stopwatch.jsx

@@ -1,4 +1,4 @@
-const { useState, useRef } = Lilact;
+import { useState, useRef } from "lilact";
 
 function Demo() 
 {
@@ -39,4 +39,4 @@ function Demo()
   );
 }
 
-module.exports = Demo;
+export default Demo;

package/docs/static/demos/suspense.jsx

@@ -1,4 +1,4 @@
-const { Suspense, Spinner } = Lilact;
+import { Suspense, Spinner } from "lilact";
 
 // resource factory that throws its internal promise until resolved
 function createResource(delay, value) {
@@ -43,4 +43,4 @@ function Demo() {
 }
 
 
-module.exports = Demo;
+export default Demo;

package/docs/static/demos/switch-transition.jsx

@@ -1,4 +1,4 @@
-const { useState, SwitchTransition } = Lilact;
+import { useState, SwitchTransition } from "lilact";
 
 Lilact.emotion.injectGlobal(`
 .switch-enter,
@@ -51,4 +51,4 @@ function Demo() {
   );
 }
 
-module.exports = Demo;
+export default Demo;

package/docs/static/demos/transition.jsx

@@ -1,4 +1,4 @@
-const { useState, Transition } = Lilact;
+import { useState, Transition } from "lilact";
 
 function Demo() {
   const [inProp, setInProp] = useState(false);
@@ -38,4 +38,4 @@ function Demo() {
         </>;
 };
 
-module.exports = Demo;
+export default Demo;

package/docs/static/demos/usedefered.jsx

@@ -1,4 +1,4 @@
-const { useState, useDeferredValue } = Lilact;
+import { useState, useDeferredValue } from "lilact";
 
 function ExpensiveList({ query }) {
   const items = Array.from({ length: 5000 }, (_, i) => `${query} item ${i}`);
@@ -30,4 +30,4 @@ function Demo() {
   );
 }
 
-module.exports = Demo;
+export default Demo;

package/docs/static/demos/usetransition.jsx

@@ -1,5 +1,5 @@
-const { useTransition, useState, useCallback, useId } = Lilact;
-const { css, cx } = Lilact.emotion;
+import { useTransition, useState, useCallback, useId } from "lilact";
+import { css, cx } from "@emotion/css";
 
 const Demo = ()=>{
 
@@ -32,4 +32,4 @@ const Demo = ()=>{
 	);
 };
 
-module.exports = Demo;
+export default Demo;

package/docs/static/index.html

@@ -20,8 +20,8 @@
 
 <script type='text/jsx'>
 	
-const { useRef, useEffect, useState, Suspense, Spinner, run, render } = Lilact;
-const { css,cx,keyframes,injectGlobal } = Lilact.emotion;
+import { useRef, useEffect, useState, Suspense, Spinner, run, render } from "lilact";
+import { css,cx,keyframes,injectGlobal } from "@emotion/css";
 
 
 const cache = new Map();
@@ -161,7 +161,7 @@ function DemoView({ entry })
 	//console.log(code);
 	if(isOpen) {
 		useEffect(() => {
-			const Comp = run(code, "demos/"+entry[0]);
+			const Comp = run(code, "demos/"+entry[0]).default;
 			Lilact.render(<Comp/>, viewRef.current);
 		});
 
@@ -172,8 +172,8 @@ function DemoView({ entry })
 	
 	return 	<>
 						<button onClick={()=>setOpen(!isOpen)} className={collapsible} type="button">
-							<span className={left}>{ (isOpen?'- ':'+ ') + entry[0] + ' '}</span>
-							<b className={right}>{entry[1]}</b>
+							<b className={left}>{ (isOpen?'- ':'+ ') + entry[1] + ' '}</b>
+							<span className={right}>{entry[0]}</span>
 						</button>
 						{isOpen &&
 						<div style={{width:"100%"}}>
@@ -216,40 +216,41 @@ function App()
 {
 	const demos =[
 		"Hooks",
-		['stopwatch.jsx',				'( useState, useRef )'],
-		['actionstate.jsx',			'( useActionState, Spinner )'],
-		['usedefered.jsx',		'( useState, useDeferredValue )'],
-		['usetransition.jsx',		'( useTransition, useState, useCallback, useId ), emotion:( css, cx )'],
-		['reducer.jsx',					'( useReducer )'],
-		['context.jsx',					'( createContext, useContext, useState ), emotion:( css, cx )'],
+		['stopwatch.jsx',				'Stop Watch ( useState, useRef )'],
+		['actionstate.jsx',			'Action State ( useActionState, Spinner )'],
+		['usedefered.jsx',		'Deferred List Update ( useState, useDeferredValue )'],
+		['usetransition.jsx',		'Transition ( useTransition, useState, useCallback, useId ), emotion:( css, cx )'],
+		['reducer.jsx',					'Todo List: ( useReducer )'],
+		['context.jsx',					'Modern Context API ( createContext, useContext, useState ), emotion:( css, cx )'],
 		
 		"API",
-		['capture.jsx',						'-- Event Capture and Bubble --'],
-		['priorities.jsx',						'-- Effect Priorities --'],
-		['forwardref.jsx',						'( forwardRef, useImperativeHandle, useRef )'],
-		['memo.jsx',						'( memo, useState )'],
-		['lazy.jsx',						'( lazy, require, Suspene, Spinner )'],
-		['proptypes.jsx',				'( PropTypes )'],
-		['legacy-context.jsx',				'-- Legacy Context API --'],
-		['redux.jsx',						'( Provider, useSelector, useDispatch, connect ), redux:( createStore )'],
-		['transition.jsx',			'( useState, Transition )'],
+		['capture.jsx',						'Event Capture and Bubble'],
+		['priorities.jsx',						'Effect Priorities'],
+		['forwardref.jsx',						'ForwardRef with Function Refs ( forwardRef, useImperativeHandle, useRef )'],
+		['memo.jsx',						'Component Memoization ( memo, useState )'],
+		['lazy.jsx',						'Lazy Loading ( lazy, require, Suspene, Spinner )'],
+		['proptypes.jsx',				'PropTypes Validation'],
+		['legacy-context.jsx',				'Legacy Context API'],
+		['redux.jsx',						'Redux and Despatch ( Provider, useSelector, useDispatch, connect ), redux:( createStore )'],
+		['transition.jsx',			'Transition States ( useState, Transition )'],
+		['cloneelement.jsx',			'Cloning Components ( cloneElement, import as React )'],
 
 		"Components",
-		['router.jsx',					'( HashRouter, NavLink, Routes, Route, useNavigate, useLocation )'],
-		['modal.jsx',						'( useEffect, useRef, useState )'],
-		['portal.jsx',						'(createPortal, useState )'],
-		['pane.jsx',						'( useRef, useState, SplitPane )'],
-		['css-transition.jsx',		'( CSSTransition, useState, useRef )'],
-		['switch-transition.jsx',		'( SwitchTransition )'],
-		['suspense.jsx',				'( Suspense, Spinner )'],
-		['form-elements.jsx',		'()'],
+		['router.jsx',					'Hash Router ( HashRouter, NavLink, Routes, Route, useNavigate, useLocation )'],
+		['modal.jsx',						'Simple Modal ( useEffect, useRef, useState )'],
+		['portal.jsx',						'Portal (createPortal, useState )'],
+		['pane.jsx',						'SplitPane ( useRef, useState, SplitPane )'],
+		['css-transition.jsx',		'CSSTransition ( CSSTransition, useState, useRef )'],
+		['switch-transition.jsx',		'SwitchTransition'],
+		['suspense.jsx',				'Suspense and Spinner'],
+		['form-elements.jsx',		'Form Elements'],
 
 		"Error Report and Handling",
-		['error-boundary.jsx',						'( ErrorBoundary, useState )'],
-		['error-parser.jsx',							'-- JSX Parser Error --'],
-		['error-init.jsx',								'-- Error in Component initialization --'],
-		['error-component-stack.jsx',			'-- Error Component Stack --'],
-		['error-callback.jsx',						'-- Error in Callback --'],
+		['error-boundary.jsx',						'Error Boundary'],
+		['error-parser.jsx',							'JSX Parser Error'],
+		['error-init.jsx',								'Error in Component initialization'],
+		['error-component-stack.jsx',			'Error Component Stack'],
+		['error-callback.jsx',						'Error in Callback'],
 	];
 
 	return<>