lilact 0.21.0 → 0.22.0

package/docs/variables/accessories.SplitPane.html

@@ -42,7 +42,7 @@ If provided, the component uses this value instead of internal state.</p>
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-rightpanestyle">Param: rightPaneStyle<a href="#param-rightpanestyle" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Optional styles applied to the right pane (or bottom pane in vertical mode).</p>
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-splitterstyle">Param: splitterStyle<a href="#param-splitterstyle" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Optional styles applied to the splitter element.</p>
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-children">Param: children<a href="#param-children" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Children to be rendered into the two pane containers.</p>
-</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="tsx"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">ref</span><span class="hl-1"> = </span><span class="hl-0">useRef</span><span class="hl-1">&lt;</span><span class="hl-6">SplitPaneHandle</span><span class="hl-1">&gt;(</span><span class="hl-3">null</span><span class="hl-1">);</span><br/><br/><span class="hl-7">&lt;</span><span class="hl-6">SplitPane</span><br/><span class="hl-1">  </span><span class="hl-10">ref</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-5">ref</span><span class="hl-3">}</span><br/><span class="hl-1">  </span><span class="hl-10">mode</span><span class="hl-1">=</span><span class="hl-2">&quot;horizontal&quot;</span><br/><span class="hl-1">  </span><span class="hl-10">defaultPosition</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-13">0.5</span><span class="hl-3">}</span><br/><span class="hl-1">  </span><span class="hl-10">min</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-13">0.1</span><span class="hl-3">}</span><br/><span class="hl-1">  </span><span class="hl-10">max</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-13">0.9</span><span class="hl-3">}</span><br/><span class="hl-1">  </span><span class="hl-10">onSizeChange</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-9">(</span><span class="hl-5">pos</span><span class="hl-9">) </span><span class="hl-3">=&gt;</span><span class="hl-9"> </span><span class="hl-5">console</span><span class="hl-9">.</span><span class="hl-0">log</span><span class="hl-9">(</span><span class="hl-5">pos</span><span class="hl-9">)</span><span class="hl-3">}</span><br/><span class="hl-7">&gt;</span><br/><span class="hl-1">  </span><span class="hl-7">&lt;</span><span class="hl-8">div</span><span class="hl-1"> </span><span class="hl-7">/&gt;</span><span class="hl-1"> </span><span class="hl-7">&lt;</span><span class="hl-8">div</span><span class="hl-1"> </span><span class="hl-7">/&gt;</span><br/><span class="hl-7">&lt;/</span><span class="hl-6">SplitPane</span><span class="hl-7">&gt;</span>
+</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="tsx"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">ref</span><span class="hl-1"> = </span><span class="hl-0">useRef</span><span class="hl-1">&lt;</span><span class="hl-8">SplitPaneHandle</span><span class="hl-1">&gt;(</span><span class="hl-3">null</span><span class="hl-1">);</span><br/><br/><span class="hl-9">&lt;</span><span class="hl-8">SplitPane</span><br/><span class="hl-1">  </span><span class="hl-12">ref</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-5">ref</span><span class="hl-3">}</span><br/><span class="hl-1">  </span><span class="hl-12">mode</span><span class="hl-1">=</span><span class="hl-2">&quot;horizontal&quot;</span><br/><span class="hl-1">  </span><span class="hl-12">defaultPosition</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-14">0.5</span><span class="hl-3">}</span><br/><span class="hl-1">  </span><span class="hl-12">min</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-14">0.1</span><span class="hl-3">}</span><br/><span class="hl-1">  </span><span class="hl-12">max</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-14">0.9</span><span class="hl-3">}</span><br/><span class="hl-1">  </span><span class="hl-12">onSizeChange</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-11">(</span><span class="hl-5">pos</span><span class="hl-11">) </span><span class="hl-3">=&gt;</span><span class="hl-11"> </span><span class="hl-5">console</span><span class="hl-11">.</span><span class="hl-0">log</span><span class="hl-11">(</span><span class="hl-5">pos</span><span class="hl-11">)</span><span class="hl-3">}</span><br/><span class="hl-9">&gt;</span><br/><span class="hl-1">  </span><span class="hl-9">&lt;</span><span class="hl-10">div</span><span class="hl-1"> </span><span class="hl-9">/&gt;</span><span class="hl-1"> </span><span class="hl-9">&lt;</span><span class="hl-10">div</span><span class="hl-1"> </span><span class="hl-9">/&gt;</span><br/><span class="hl-9">&lt;/</span><span class="hl-8">SplitPane</span><span class="hl-9">&gt;</span>
 </code><button type="button">Copy</button></pre>
 
 </div></div><aside class="tsd-sources"><ul><li>Defined in accessories.jsx:425</li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>

package/examples/demos/actionstate.jsx

@@ -1,4 +1,4 @@
-const { useActionState, Spinner } = Lilact;
+import { useActionState, Spinner } from "lilact";
 
 async function addToCart(prevState, queryData) {
 
@@ -36,4 +36,4 @@ function Demo() {
 }
 
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/capture.jsx

@@ -1,6 +1,6 @@
-const { useEffect } = Lilact;
+import { useEffect } from "lilact";
 
-module.exports = function Demo() {
+export default function Demo() {
   useEffect(() => {
     // Just to make it obvious in the console that this is running once
     console.log("mount");

package/examples/demos/context.jsx

@@ -1,5 +1,5 @@
-const { createContext, useContext, useState } = Lilact;
-const { css, cx } = Lilact.emotion;
+import { createContext, useContext, useState } from "lilact";
+import { css, cx } from "@emotion/css";
 
 const ThemeContext = createContext(null);
 
@@ -63,4 +63,4 @@ function Demo() {
 			</ThemeContext.Provider>
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/css-transition.jsx

@@ -1,4 +1,4 @@
-const { CSSTransition, useState, useRef } = Lilact;
+import { CSSTransition, useState, useRef } from "lilact";
 
 
 Lilact.emotion.injectGlobal(`
@@ -29,7 +29,7 @@ function Demo()
 
   const chs = [];
 
-  for(let i=0; i<10;i++) chs.push( <div className='test'>{i}</div> );
+  for(let i=1; i<10;i++) chs.push( <div className='test'>{i}</div> );
 
   return (
     <div style={{overflow:"hidden", textAlign: "center"}}>
@@ -62,4 +62,4 @@ function Demo()
   );
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/error-boundary.jsx

@@ -1,4 +1,4 @@
-const { ErrorBoundary, useState } = Lilact;
+import { ErrorBoundary, useState } from "lilact";
 
 function Demo() {
   const [mode, setMode] = useState("safe"); // "safe" | "direct" | "deep"
@@ -56,4 +56,4 @@ function MyFallback({ error, reset }) {
   );
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/error-callback.jsx

@@ -1,4 +1,4 @@
-module.exports = function() {
+export default function() {
 
   return <center>
           <button onClick={()=>{doUnknown()}}>

package/examples/demos/error-component-stack.jsx

@@ -1,4 +1,4 @@
-const { useState } = Lilact;
+import { useState } from "lilact";
 
 function Demo() {
   const [mode, setMode] = useState("safe"); // "safe" | "direct" | "deep"
@@ -36,4 +36,4 @@ function DeepTree() {
   return <section><Middle /></section>;
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/error-init.jsx

@@ -1,4 +1,4 @@
-module.exports = function Demo() {
+export default function Demo() {
 
   return <>
       <NotDefined/>

package/examples/demos/error-parser.jsx

@@ -1,4 +1,4 @@
-module.exports = function() {
+export default function() {
 
   return <>
 

package/examples/demos/form-elements.jsx

@@ -1,4 +1,4 @@
-module.exports = function() {
+export default function() {
 
   return <>
 

package/examples/demos/forwardref.jsx

@@ -1,4 +1,4 @@
-const { forwardRef, useImperativeHandle, useRef } = Lilact;
+import { forwardRef, useImperativeHandle, useRef } from "lilact";
 
 const Child = forwardRef(function Child({ id }, ref) {
   // Each child exposes a custom imperative API on its *own* ref
@@ -11,7 +11,7 @@ const Child = forwardRef(function Child({ id }, ref) {
   return <div>Child {id}</div>;
 });
 
-module.exports = function Demo() {
+export default function Demo() {
   const childRefs = useRef([]);
 
   // helper: store the function ref for each child index

package/examples/demos/lazy.jsx

@@ -1,6 +1,6 @@
-const {Suspense, Spinner, lazy, require} = Lilact;
+import {Suspense, Spinner, lazy } from "lilact";
 
-const StopWatch = lazy( ()=>require('demos/stopwatch.jsx') );
+const StopWatch = lazy( () => require('./stopwatch.jsx') );
 
 function Demo({file}) 
 {
@@ -12,4 +12,4 @@ function Demo({file})
 			</div>
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/legacy-context.jsx

@@ -4,7 +4,7 @@
 // - static contextTypes
 // - instance.context available during render
 
-const { Component, PropTypes, render } = Lilact;
+import { Component, PropTypes, render } from "lilact";
 
 
 // ----- Consumer -----
@@ -74,6 +74,6 @@ function Demo() {
          </>
 }
 
-module.exports = Demo;
+export default Demo;
 
 

package/examples/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/examples/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/examples/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/examples/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/examples/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/examples/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/examples/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/examples/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/examples/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/examples/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/examples/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/examples/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/examples/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/examples/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/examples/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/examples/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);
 		});