lilact 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (164) hide show
  1. package/Icon/r +0 -0
  2. package/LICENSE.TXT +26 -0
  3. package/README.md +116 -0
  4. package/bin/copy-demo.js +26 -0
  5. package/bin/transpile-dir.js +112 -0
  6. package/bin/transpile.js +137 -0
  7. package/dist/lilact.development.js +9344 -0
  8. package/dist/lilact.development.js.map +1 -0
  9. package/dist/lilact.production.min.js +63 -0
  10. package/dist/lilact.production.min.js.map +1 -0
  11. package/docs/.nojekyll +1 -0
  12. package/docs/assets/hierarchy.js +1 -0
  13. package/docs/assets/highlight.css +71 -0
  14. package/docs/assets/icons.js +18 -0
  15. package/docs/assets/icons.svg +1 -0
  16. package/docs/assets/main.js +60 -0
  17. package/docs/assets/navigation.js +1 -0
  18. package/docs/assets/search.js +1 -0
  19. package/docs/assets/style.css +1633 -0
  20. package/docs/classes/accessories.ErrorBoundary.html +37 -0
  21. package/docs/classes/accessories.Suspense.html +41 -0
  22. package/docs/classes/components.Component.html +45 -0
  23. package/docs/classes/components.HTMLComponent.html +32 -0
  24. package/docs/classes/components.RootComponent.html +32 -0
  25. package/docs/classes/transition.Transition.html +31 -0
  26. package/docs/functions/accessories.Spinner.html +9 -0
  27. package/docs/functions/components.createComponent.html +8 -0
  28. package/docs/functions/components.createRoot.html +5 -0
  29. package/docs/functions/components.render.html +5 -0
  30. package/docs/functions/hooks.createContext.html +3 -0
  31. package/docs/functions/hooks.useActionState.html +3 -0
  32. package/docs/functions/hooks.useCallback.html +5 -0
  33. package/docs/functions/hooks.useContext.html +3 -0
  34. package/docs/functions/hooks.useDeferredValue.html +4 -0
  35. package/docs/functions/hooks.useEffect.html +3 -0
  36. package/docs/functions/hooks.useHook.html +5 -0
  37. package/docs/functions/hooks.useId.html +4 -0
  38. package/docs/functions/hooks.useLayoutEffect.html +3 -0
  39. package/docs/functions/hooks.useLocalStorage.html +4 -0
  40. package/docs/functions/hooks.useMemo.html +4 -0
  41. package/docs/functions/hooks.useReducer.html +6 -0
  42. package/docs/functions/hooks.useRef.html +4 -0
  43. package/docs/functions/hooks.useState.html +3 -0
  44. package/docs/functions/hooks.useTransition.html +3 -0
  45. package/docs/functions/jsx.transpileJSX.html +6 -0
  46. package/docs/functions/misc.Fragment.html +3 -0
  47. package/docs/functions/misc.classNames.html +2 -0
  48. package/docs/functions/misc.deepEqual.html +3 -0
  49. package/docs/functions/misc.findDOMNode.html +3 -0
  50. package/docs/functions/misc.getComponentByPointer.html +3 -0
  51. package/docs/functions/misc.isAsync.html +3 -0
  52. package/docs/functions/misc.isClass.html +3 -0
  53. package/docs/functions/misc.isEmpty.html +3 -0
  54. package/docs/functions/misc.isError.html +3 -0
  55. package/docs/functions/misc.isThenable.html +3 -0
  56. package/docs/functions/misc.isValidElement.html +3 -0
  57. package/docs/functions/misc.shallowEqual.html +3 -0
  58. package/docs/functions/redux.Provider.html +5 -0
  59. package/docs/functions/redux.connect.html +5 -0
  60. package/docs/functions/redux.useDispatch.html +3 -0
  61. package/docs/functions/redux.useSelector.html +5 -0
  62. package/docs/functions/redux.useStore.html +3 -0
  63. package/docs/functions/router.HashRouter.html +5 -0
  64. package/docs/functions/router.Link.html +12 -0
  65. package/docs/functions/router.NavLink.html +10 -0
  66. package/docs/functions/router.Route.html +6 -0
  67. package/docs/functions/router.Routes.html +4 -0
  68. package/docs/functions/router.useLocation.html +3 -0
  69. package/docs/functions/router.useNavigate.html +3 -0
  70. package/docs/functions/run.require.html +14 -0
  71. package/docs/functions/run.run.html +13 -0
  72. package/docs/functions/run.runScripts.html +7 -0
  73. package/docs/functions/run.traceError.html +6 -0
  74. package/docs/functions/timers.animationFramePromise.html +3 -0
  75. package/docs/functions/timers.clearInterval.html +2 -0
  76. package/docs/functions/timers.clearTimeout.html +2 -0
  77. package/docs/functions/timers.grabTimers.html +3 -0
  78. package/docs/functions/timers.pauseTimers.html +2 -0
  79. package/docs/functions/timers.releaseTimers.html +2 -0
  80. package/docs/functions/timers.resetTimers.html +2 -0
  81. package/docs/functions/timers.resumeTimers.html +2 -0
  82. package/docs/functions/timers.setInterval.html +5 -0
  83. package/docs/functions/timers.setTimeout.html +4 -0
  84. package/docs/functions/timers.timeoutPromise.html +4 -0
  85. package/docs/functions/transition.CSSTransition.html +18 -0
  86. package/docs/functions/transition.TransitionGroup.html +5 -0
  87. package/docs/hierarchy.html +1 -0
  88. package/docs/index.html +88 -0
  89. package/docs/media/icon.png +0 -0
  90. package/docs/modules/accessories.html +1 -0
  91. package/docs/modules/components.html +1 -0
  92. package/docs/modules/hooks.html +1 -0
  93. package/docs/modules/jsx.html +1 -0
  94. package/docs/modules/misc.html +1 -0
  95. package/docs/modules/redux.html +1 -0
  96. package/docs/modules/router.html +1 -0
  97. package/docs/modules/run.html +1 -0
  98. package/docs/modules/timers.html +1 -0
  99. package/docs/modules/transition.html +1 -0
  100. package/docs/modules.html +1 -0
  101. package/docs/static/demos/actionstate.jsx +41 -0
  102. package/docs/static/demos/boundary.jsx +52 -0
  103. package/docs/static/demos/context.jsx +68 -0
  104. package/docs/static/demos/css-transition.jsx +65 -0
  105. package/docs/static/demos/modal.jsx +41 -0
  106. package/docs/static/demos/proptypes.jsx +37 -0
  107. package/docs/static/demos/reducer.jsx +71 -0
  108. package/docs/static/demos/redux.jsx +58 -0
  109. package/docs/static/demos/router.jsx +153 -0
  110. package/docs/static/demos/stopwatch.jsx +42 -0
  111. package/docs/static/demos/suspense.jsx +48 -0
  112. package/docs/static/demos/transition.jsx +40 -0
  113. package/docs/static/demos/use-differed.jsx +30 -0
  114. package/docs/static/demos/usetransition.jsx +37 -0
  115. package/docs/static/index.html +212 -0
  116. package/docs/static/lilact.development.js +9344 -0
  117. package/docs/static/lilact.production.min.js +63 -0
  118. package/docs/static/prismjs/LICENSE.md +21 -0
  119. package/docs/static/prismjs/prism-jsx.min.js +1 -0
  120. package/docs/static/prismjs/prism.min.css +1 -0
  121. package/docs/static/prismjs/prism.min.js +16 -0
  122. package/docs/variables/jsx.transpilerConfig.html +1 -0
  123. package/docs/variables/misc.Children.html +10 -0
  124. package/icon.png +0 -0
  125. package/package.json +39 -0
  126. package/root/demos/actionstate.jsx +41 -0
  127. package/root/demos/boundary.jsx +52 -0
  128. package/root/demos/context.jsx +68 -0
  129. package/root/demos/css-transition.jsx +65 -0
  130. package/root/demos/modal.jsx +41 -0
  131. package/root/demos/proptypes.jsx +37 -0
  132. package/root/demos/reducer.jsx +71 -0
  133. package/root/demos/redux.jsx +58 -0
  134. package/root/demos/router.jsx +153 -0
  135. package/root/demos/stopwatch.jsx +42 -0
  136. package/root/demos/suspense.jsx +48 -0
  137. package/root/demos/transition.jsx +40 -0
  138. package/root/demos/use-differed.jsx +30 -0
  139. package/root/demos/usetransition.jsx +37 -0
  140. package/root/index.html +212 -0
  141. package/root/lilact.development.js +9344 -0
  142. package/root/lilact.production.min.js +63 -0
  143. package/root/prismjs/LICENSE.md +21 -0
  144. package/root/prismjs/prism-jsx.min.js +1 -0
  145. package/root/prismjs/prism.min.css +1 -0
  146. package/root/prismjs/prism.min.js +16 -0
  147. package/src/accessories.jsx +287 -0
  148. package/src/components.jsx +1063 -0
  149. package/src/events.jsx +175 -0
  150. package/src/hooks.jsx +461 -0
  151. package/src/jsx.addons.js +70 -0
  152. package/src/jsx.js +1168 -0
  153. package/src/lilact.jsx +115 -0
  154. package/src/loader.cjs +59 -0
  155. package/src/misc.jsx +419 -0
  156. package/src/redux.jsx +198 -0
  157. package/src/router.jsx +282 -0
  158. package/src/run.jsx +275 -0
  159. package/src/timers.jsx +313 -0
  160. package/src/transition.jsx +244 -0
  161. package/src/vlq.js +94 -0
  162. package/tsconfig.json +15 -0
  163. package/typedoc.json +23 -0
  164. package/webpack.config.js +196 -0
package/docs/modules/timers.html ADDED
@@ -0,0 +1 @@
1
+ <!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>timers | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">timers</a></li></ul><h1>Module timers</h1></div><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Functions</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="animationframepromise"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/timers.animationFramePromise.html">animationFramePromise</a><a href="#animationframepromise" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="clearinterval"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/timers.clearInterval.html">clearInterval</a><a href="#clearinterval" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="cleartimeout"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/timers.clearTimeout.html">clearTimeout</a><a href="#cleartimeout" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="grabtimers"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/timers.grabTimers.html">grabTimers</a><a href="#grabtimers" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="pausetimers"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/timers.pauseTimers.html">pauseTimers</a><a href="#pausetimers" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="releasetimers"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/timers.releaseTimers.html">releaseTimers</a><a href="#releasetimers" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="resettimers"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/timers.resetTimers.html">resetTimers</a><a href="#resettimers" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="resumetimers"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/timers.resumeTimers.html">resumeTimers</a><a href="#resumetimers" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="setinterval"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/timers.setInterval.html">setInterval</a><a href="#setinterval" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="settimeout"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/timers.setTimeout.html">setTimeout</a><a href="#settimeout" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="timeoutpromise"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/timers.timeoutPromise.html">timeoutPromise</a><a href="#timeoutpromise" 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></span></dt><dd class="tsd-member-summary"></dd></dl></details></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><details open class="tsd-accordion tsd-page-navigation"><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>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Functions</summary><div><a href="#animationframepromise"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>animation<wbr/>Frame<wbr/>Promise</span></a><a href="#clearinterval"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>clear<wbr/>Interval</span></a><a href="#cleartimeout"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>clear<wbr/>Timeout</span></a><a href="#grabtimers"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>grab<wbr/>Timers</span></a><a href="#pausetimers"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>pause<wbr/>Timers</span></a><a href="#releasetimers"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>release<wbr/>Timers</span></a><a href="#resettimers"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>reset<wbr/>Timers</span></a><a href="#resumetimers"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>resume<wbr/>Timers</span></a><a href="#setinterval"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>set<wbr/>Interval</span></a><a href="#settimeout"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>set<wbr/>Timeout</span></a><a href="#timeoutpromise"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>timeout<wbr/>Promise</span></a></div></details></div></details></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/docs/modules/transition.html ADDED
@@ -0,0 +1 @@
1
+ <!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>transition | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">transition</a></li></ul><h1>Module transition</h1></div><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Classes"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Classes</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="transition"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="../assets/icons.svg#icon-128"></use></svg><a href="../classes/transition.Transition.html">Transition</a><a href="#transition" 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></span></dt><dd class="tsd-member-summary"></dd></dl></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Functions</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="csstransition"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/transition.CSSTransition.html">CSSTransition</a><a href="#csstransition" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="transitiongroup"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/transition.TransitionGroup.html">TransitionGroup</a><a href="#transitiongroup" 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></span></dt><dd class="tsd-member-summary"></dd></dl></details></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><details open class="tsd-accordion tsd-page-navigation"><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>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Classes"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Classes</summary><div><a href="#transition"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="../assets/icons.svg#icon-128"></use></svg><span>Transition</span></a></div></details><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Functions</summary><div><a href="#csstransition"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>CSS<wbr/>Transition</span></a><a href="#transitiongroup"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>Transition<wbr/>Group</span></a></div></details></div></details></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/docs/modules.html ADDED
@@ -0,0 +1 @@
1
+ <!DOCTYPE html><html class="default" lang="en" data-base="./"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script><script async src="assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"></ul><h1>Lilact</h1></div><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Modules"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h2>Modules</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="accessories"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><a href="modules/accessories.html">accessories</a><a href="#accessories" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="components"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><a href="modules/components.html">components</a><a href="#components" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="hooks"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><a href="modules/hooks.html">hooks</a><a href="#hooks" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="jsx"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><a href="modules/jsx.html">jsx</a><a href="#jsx" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="misc"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><a href="modules/misc.html">misc</a><a href="#misc" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="redux"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><a href="modules/redux.html">redux</a><a href="#redux" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="router"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><a href="modules/router.html">router</a><a href="#router" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="run"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><a href="modules/run.html">run</a><a href="#run" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="timers"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><a href="modules/timers.html">timers</a><a href="#timers" 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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="transition"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><a href="modules/transition.html">transition</a><a href="#transition" 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></span></dt><dd class="tsd-member-summary"></dd></dl></details></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><details open class="tsd-accordion tsd-page-navigation"><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>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Modules"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Modules</summary><div><a href="#accessories"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><span>accessories</span></a><a href="#components"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><span>components</span></a><a href="#hooks"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><span>hooks</span></a><a href="#jsx"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><span>jsx</span></a><a href="#misc"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><span>misc</span></a><a href="#redux"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><span>redux</span></a><a href="#router"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><span>router</span></a><a href="#run"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><span>run</span></a><a href="#timers"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><span>timers</span></a><a href="#transition"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Module"><use href="assets/icons.svg#icon-2"></use></svg><span>transition</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current">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/docs/static/demos/actionstate.jsx ADDED
@@ -0,0 +1,41 @@
1
+ const { useActionState, useState, render } = Lilact;
2
+
3
+ async function addToCart(prevState, queryData) {
4
+
5
+ const itemID = queryData.get('itemID');
6
+
7
+ if (itemID === "1") {
8
+ return "Added to cart";
9
+ } else {
10
+ // Add a fake delay to make waiting noticeable.
11
+ await new Promise(resolve => {
12
+ setTimeout(resolve, 2000);
13
+ });
14
+ return "Couldn't add to cart: the item is sold out.";
15
+ }
16
+ }
17
+
18
+ function AddToCartForm({itemID, itemTitle}) {
19
+ const [message, formAction, isPending] = useActionState(addToCart, null);
20
+
21
+ return (
22
+ <form action={formAction}>
23
+ <h2>{itemTitle}</h2>
24
+ <input type="hidden" name="itemID" value={itemID} />
25
+ <button type="submit">Add to Cart </button>
26
+ {isPending ? "Loading..." : message}
27
+ </form>
28
+ );
29
+ }
30
+
31
+ function Demo() {
32
+ return (
33
+ <>
34
+ <AddToCartForm itemID="1" itemTitle="JavaScript: The Definitive Guide" />
35
+ <AddToCartForm itemID="2" itemTitle="JavaScript: The Good Parts" />
36
+ </>
37
+ )
38
+ }
39
+
40
+
41
+ module.exports = Demo;
package/docs/static/demos/boundary.jsx ADDED
@@ -0,0 +1,52 @@
1
+ const { ErrorBoundary, useState } = Lilact;
2
+
3
+ function Demo() {
4
+ const [mode, setMode] = useState("safe"); // "safe" | "direct" | "deep"
5
+
6
+ return (
7
+ <div>
8
+ Check the console for component stack!
9
+ <div style={{ marginBottom: 12 }}>
10
+ <button onClick={() => setMode("safe")}>Safe</button>{" "}
11
+ <button onClick={() => setMode("direct")}>Direct-child throws</button>{" "}
12
+ <button onClick={() => setMode("deep")}>Deep-child throws</button>
13
+ </div>
14
+
15
+ <ErrorBoundary Fallback={MyFallback} onError={(e, info) => console.log("reported", info.componentStackLog)}>
16
+ {mode === "safe" && <p>All good — no errors.</p>}
17
+ {mode === "direct" && <ExplodingChild />}
18
+ {mode === "deep" && <DeepTree />}
19
+ </ErrorBoundary>
20
+ </div>
21
+ );
22
+ }
23
+
24
+ /* Direct descendant that throws during render */
25
+ function ExplodingChild() {
26
+ throw new Error("Direct child error");
27
+ // return <div>won't render</div>;
28
+ }
29
+
30
+ /* Deeply nested tree where a leaf throws */
31
+ function Leaf() {
32
+ throw new Error("Deep child error");
33
+ // return <div>leaf</div>;
34
+ }
35
+ function Middle() {
36
+ return <div><Leaf /></div>;
37
+ }
38
+ function DeepTree() {
39
+ return <section><Middle /></section>;
40
+ }
41
+
42
+ /* Fallback component received via Fallback prop */
43
+ function MyFallback({ error, reset }) {
44
+ return (
45
+ <div role="alert" style={{ border: "1px solid #f00", padding: 12 }}>
46
+ <p><strong>Something went wrong:</strong> {error?.message}</p>
47
+ <button onClick={reset}>Try again</button>
48
+ </div>
49
+ );
50
+ }
51
+
52
+ module.exports = Demo;
package/docs/static/demos/context.jsx ADDED
@@ -0,0 +1,68 @@
1
+ const { createContext, useContext, useState, render } = Lilact;
2
+ const { css, cx } = Lilact.emotion;
3
+
4
+ const ThemeContext = createContext(null);
5
+
6
+ function Form({ children }) {
7
+ return (
8
+ <Panel title="Welcome">
9
+ <Button>Sign up</Button>
10
+ <Button>Log in</Button>
11
+ </Panel>
12
+ );
13
+ }
14
+
15
+ function Panel({ title, children }) {
16
+ const theme = useContext(ThemeContext);
17
+ const className = 'panel-' + theme;
18
+ return (
19
+ <section className={cx(className,css`
20
+
21
+ &.panel-dark {
22
+ background: #333;
23
+ color: #eee;
24
+ }
25
+ `)}>
26
+ <h1 className={css`
27
+ &:hover {
28
+ color: red;
29
+ }
30
+
31
+ `}>{title}
32
+ </h1>
33
+ {children}
34
+ </section>
35
+ )
36
+ }
37
+
38
+ function Button({ children }) {
39
+ const theme = useContext(ThemeContext);
40
+ const className = 'button-' + theme;
41
+ return (
42
+ <button className={className}>
43
+ {children}
44
+ </button>
45
+ );
46
+ }
47
+
48
+ function Demo() {
49
+ const [theme, setTheme] = useState('dark');
50
+
51
+ return (
52
+ <ThemeContext.Provider value={theme}>
53
+ <Form />
54
+ <label>
55
+ <input
56
+ type="checkbox"
57
+ checked={theme === 'dark'}
58
+ onchange={(e) => {
59
+ setTheme(e.target.checked ? 'dark' : 'light')
60
+ }}
61
+ />
62
+ Use dark mode
63
+ </label>
64
+ </ThemeContext.Provider>
65
+ )
66
+ }
67
+
68
+ module.exports = Demo;
package/docs/static/demos/css-transition.jsx ADDED
@@ -0,0 +1,65 @@
1
+ const { Transition, CSSTransition, render, useState, useRef } = Lilact;
2
+
3
+
4
+ Lilact.emotion.injectGlobal(`
5
+ .test {
6
+ -position: absolute;
7
+ transition: opacity 1000ms, transform 1000ms;
8
+ }
9
+
10
+ .test-appear {
11
+ opacity: 0;
12
+ }
13
+ .test-enter-active, .test-enter-done {
14
+ opacity: 1;
15
+ -transform: scale(1);
16
+ }
17
+ .test-exit-active, .test-exit-done {
18
+ opacity: 0.2;
19
+ -transform: scale(0.9);
20
+ }
21
+
22
+ `);
23
+
24
+
25
+ function Demo()
26
+ {
27
+ const [inProp, setInProp] = useState(false);
28
+ const nodeRef = useRef(null);
29
+
30
+ const chs = [];
31
+
32
+ for(let i=0; i<10;i++) chs.push( <div className='test'>{i}</div> );
33
+
34
+ return (
35
+ <div>
36
+
37
+ <CSSTransition in={inProp} classNames='test'
38
+
39
+ onEnter={function(){console.log('onEnter', arguments)}}
40
+ onEntering={function(){console.log('onEntering', arguments)}}
41
+ onEntered={function(){console.log('onEntered', arguments)}}
42
+ onExit={function(){console.log('onExit', arguments)}}
43
+ onExiting={function(){console.log('onExiting', arguments)}}
44
+ onExited={function(){console.log('onExited', arguments)}}
45
+
46
+ timeout={1000}
47
+
48
+ unmountOnExit={false}
49
+ mountOnEnter={false}
50
+ >
51
+ {chs}
52
+ </CSSTransition>
53
+
54
+ <button ref={nodeRef} className="test" onClick={() => setInProp(!inProp)}>
55
+ Click to {inProp?" OUT":" IN"}
56
+ </button>
57
+
58
+ <br/>
59
+ <br/>
60
+
61
+ </div>
62
+ );
63
+ }
64
+
65
+ module.exports = Demo;
package/docs/static/demos/modal.jsx ADDED
@@ -0,0 +1,41 @@
1
+ const { useEffect, useRef, useState, render } = Lilact;
2
+
3
+ function ModalDialog({ isOpen, children }) {
4
+ const ref = useRef();
5
+ useEffect(() => {
6
+
7
+ if (!isOpen) {
8
+ return;
9
+ }
10
+ const dialog = ref.current;
11
+
12
+ dialog.showModal();
13
+
14
+ return () => {
15
+ dialog.close();
16
+ };
17
+ }, [isOpen]);
18
+
19
+ return <dialog ref={ref}>{children}</dialog>;
20
+ }
21
+
22
+ function Demo() {
23
+ const [show, setShow] = useState(false);
24
+ console.log(show);
25
+ return (
26
+ <>
27
+ <button onClick={() => setShow(true)}>
28
+ Open dialog
29
+ </button>
30
+ <ModalDialog isOpen={show}>
31
+ Hello there!
32
+ <br />
33
+ <button onClick={() => {
34
+ setShow(false);
35
+ }}>Close</button>
36
+ </ModalDialog>
37
+ </>
38
+ );
39
+ }
40
+
41
+ module.exports = Demo;
package/docs/static/demos/proptypes.jsx ADDED
@@ -0,0 +1,37 @@
1
+ const { PropTypes, createRoot } = Lilact;
2
+
3
+ function UserCard({ name, age, tags, onClick }) {
4
+ return (
5
+ <div onClick={onClick} style={{border:'1px solid #ddd', padding:8, width:200}}>
6
+ <h4>{name}</h4>
7
+ <div>Age: {age}</div>
8
+ <ul>{tags.map((t,i) => <li key={i}>{t}</li>)}</ul>
9
+ </div>
10
+ );
11
+ }
12
+
13
+ UserCard.propTypes = {
14
+ name: PropTypes.string.isRequired,
15
+ age: PropTypes.number,
16
+ tags: PropTypes.arrayOf(PropTypes.string),
17
+ onClick: PropTypes.func,
18
+ };
19
+
20
+ UserCard.defaultProps = {
21
+ age: 0,
22
+ tags: [],
23
+ onClick: () => {},
24
+ };
25
+
26
+ /* App render */
27
+ function Demo() {
28
+ return (
29
+ <div><p>Check your browser console to see the logs.</p>
30
+ <UserCard name="Alex" age={29} tags={['react','js']} />
31
+ {/* Missing name -> will warn in dev console */}
32
+ <UserCard age={"not-a-number"} />
33
+ </div>
34
+ );
35
+ }
36
+
37
+ module.exports = Demo;
package/docs/static/demos/reducer.jsx ADDED
@@ -0,0 +1,71 @@
1
+ const { useReducer, render } = Lilact;
2
+
3
+ function createInitialState(username) {
4
+ const initialTodos = [];
5
+ for (let i = 0; i < 10; i++) {
6
+ initialTodos.push({
7
+ id: i,
8
+ text: username + "'s task #" + (i + 1)
9
+ });
10
+ }
11
+ return {
12
+ draft: '',
13
+ todos: initialTodos,
14
+ };
15
+ }
16
+
17
+ function reducer(state, action) {
18
+
19
+ switch (action.type) {
20
+ case 'changed_draft': {
21
+ return {
22
+ draft: action.nextDraft,
23
+ todos: state.todos,
24
+ };
25
+ };
26
+ case 'added_todo': {
27
+ return {
28
+ draft: '',
29
+ todos: [{
30
+ id: state.todos.length,
31
+ text: state.draft
32
+ }, ...state.todos]
33
+ }
34
+ }
35
+ }
36
+ throw Error('Unknown action: ' + action.type);
37
+ }
38
+
39
+ function Demo({ username })
40
+ {
41
+ const [state, dispatch] = useReducer(
42
+ reducer,
43
+ username,
44
+ createInitialState
45
+ );
46
+ return (
47
+ <>
48
+ <input
49
+ value={state.draft}
50
+ onChange={e => {
51
+ dispatch({
52
+ type: 'changed_draft',
53
+ nextDraft: e.target.value
54
+ })
55
+ }}
56
+ />
57
+ <button onClick={() => {
58
+ dispatch({ type: 'added_todo' });
59
+ }}>Add</button>
60
+ <ul>
61
+ {state.todos.map(item => (
62
+ <li key={item.id}>
63
+ {item.text}
64
+ </li>
65
+ ))}
66
+ </ul>
67
+ </>
68
+ );
69
+ }
70
+
71
+ module.exports = Demo;
package/docs/static/demos/redux.jsx ADDED
@@ -0,0 +1,58 @@
1
+ const { Provider, useSelector, useDispatch, connect, render } = Lilact;
2
+ const { createStore } = Lilact.redux;
3
+
4
+ // Reducer + store
5
+ function counterReducer(state = { count: 0 }, action) {
6
+ switch (action.type) {
7
+ case "INCREMENT": return { count: state.count + 1 };
8
+ case "DECREMENT": return { count: state.count - 1 };
9
+ default: return state;
10
+ }
11
+ }
12
+ const store = createStore(counterReducer);
13
+
14
+ // Hooks-based component
15
+ function CounterHooks() {
16
+ const count = useSelector(state => state.count);
17
+ const dispatch = useDispatch();
18
+ return (
19
+ <div>
20
+ <h3>Hooks Counter</h3>
21
+ <div>Count: {count}</div>
22
+ <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
23
+ <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
24
+ </div>
25
+ );
26
+ }
27
+
28
+ // connect-based component
29
+ function CounterView({ count, increment, decrement }) {
30
+ return (
31
+ <div>
32
+ <h3>Connected Counter</h3>
33
+ <div>Count: {count}</div>
34
+ <button onClick={decrement}>-</button>
35
+ <button onClick={increment}>+</button>
36
+ </div>
37
+ );
38
+ }
39
+ const mapState = (state) => ({ count: state.count });
40
+ const mapDispatch = (dispatch) => ({
41
+
42
+ increment: () => { dispatch({ type: "INCREMENT" })},
43
+ decrement: () => { dispatch({ type: "DECREMENT" })}
44
+ });
45
+ const ConnectedCounter = connect(mapState, mapDispatch)(CounterView);
46
+
47
+ function Demo({ username })
48
+ {
49
+ return <Provider store={store}>
50
+ <div>
51
+ <CounterHooks />
52
+ <ConnectedCounter />
53
+ </div>
54
+ </Provider>;
55
+ }
56
+
57
+ module.exports = Demo;
58
+