lilact 0.21.0 → 0.22.0

package/docs/static/demos/memo.jsx

@@ -1,11 +1,11 @@
-const { useState, memo } = Lilact;
+import { useState, memo } from "lilact"
 
 const Child = memo(function Child({ count }) {
   console.log("Child render. count =", count);
   return <div>Child count: {count}</div>;
 });
 
-module.exports = function Demo() {
+export default function Demo() {
   const [tick, setTick] = useState(0);
   const [count] = useState(5); // never changes
 

package/docs/static/demos/modal.jsx

@@ -1,4 +1,4 @@
-const { useEffect, useRef, useState } = Lilact;
+import { useEffect, useRef, useState } from "lilact";
 
 function ModalDialog({ isOpen, children }) {
 	const ref = useRef();
@@ -37,4 +37,4 @@ function Demo() {
 			</>;
 }
 
-module.exports = Demo;
+export default Demo;

package/docs/static/demos/pane.jsx

@@ -1,6 +1,6 @@
-const { useRef, useState, SplitPane } = Lilact;
+import { useRef, useState, SplitPane } from "lilact";
 
-module.exports = function Demo() {
+export default function Demo() {
   const ref = useRef(null);
   const [mode, setMode] = useState("horizontal");
   const [position, setPosition] = useState(0.35);

package/docs/static/demos/portal.jsx

@@ -1,4 +1,4 @@
-const { createPortal, useState } = Lilact;
+import { createPortal, useState } from "lilact";
 
 function Modal({ open, onClose, children }) {
   if (!open) return null;
@@ -41,11 +41,13 @@ function Modal({ open, onClose, children }) {
   );
 }
 
-module.exports = function Demo() {
+export default function Demo() {
   const [open, setOpen] = useState(false);
 
   return (
     <>
+      <p>This example creates a modal, but uses a portal for it.</p>
+      <p>Notice that the modal close button style does not obey this container CSS rules as it is rendered outside.</p>
       <button onClick={() => setOpen(true)}>Open modal</button>
       <Modal open={open} onClose={() => setOpen(false)}>
         <b>Hello World!</b><br/>

package/docs/static/demos/priorities.jsx

@@ -1,4 +1,4 @@
-const {useEffect, useLayoutEffect, useInsertionEffect, useState, startTransition} = Lilact;
+import {useEffect, useLayoutEffect, useInsertionEffect, useState, startTransition} from "lilact";
 
 function Demo() {
   const [n, setN] = useState(0);
@@ -65,4 +65,4 @@ function Demo() {
   </>);
 }
 
-module.exports = Demo;
+export default Demo;

package/docs/static/demos/proptypes.jsx

@@ -1,4 +1,4 @@
-const { PropTypes } = Lilact;
+import { PropTypes } from "lilact";
 
 function UserCard({ name, age, tags, onClick }) {
   return (
@@ -31,4 +31,4 @@ function Demo() {
           </div>
 }
 
-module.exports = Demo;
+export default Demo;

package/docs/static/demos/reducer.jsx

@@ -1,4 +1,4 @@
-const { useReducer } = Lilact;
+import { useReducer } from "lilact";
 
 function createInitialState(username) {
 	const initialTodos = [];
@@ -73,4 +73,4 @@ function Demo({ username })
 	</>
 }
 
-module.exports = Demo;
+export default Demo;

package/docs/static/demos/redux.jsx

@@ -1,5 +1,5 @@
-const { Provider, useSelector, useDispatch, connect } = Lilact;
-const { createStore } = Lilact.redux;
+import { Provider, useSelector, useDispatch, connect } from "lilact";
+import { createStore } from "redux";
 
 // Reducer + store
 function counterReducer(state = { count: 0 }, action) {
@@ -54,5 +54,5 @@ function Demo({ username })
 			</Provider>;
 }
 
-module.exports = Demo;
+export default Demo;
 

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() {
@@ -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);
 		});