lilact 0.17.0 → 0.18.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 (56) hide show
  1. package/dist/lilact.development.js +127 -114
  2. package/dist/lilact.development.js.map +2 -2
  3. package/dist/lilact.development.min.js +19 -19
  4. package/dist/lilact.development.min.js.map +3 -3
  5. package/dist/lilact.production.min.js +17 -17
  6. package/docs/assets/hierarchy.js +1 -1
  7. package/docs/assets/navigation.js +1 -1
  8. package/docs/assets/search.js +1 -1
  9. package/docs/classes/accessories.ErrorBoundary.html +8 -8
  10. package/docs/classes/accessories.Suspense.html +7 -7
  11. package/docs/classes/components.Component.html +11 -11
  12. package/docs/classes/components.HTMLComponent.html +11 -11
  13. package/docs/classes/components.RootComponent.html +11 -11
  14. package/docs/functions/components.createComponent.html +1 -1
  15. package/docs/functions/components.createRoot.html +1 -1
  16. package/docs/functions/components.memo.html +7 -0
  17. package/docs/functions/components.render.html +1 -1
  18. package/docs/functions/hooks.startTransition.html +1 -1
  19. package/docs/functions/hooks.useActionState.html +1 -1
  20. package/docs/functions/hooks.useDebugValue.html +3 -3
  21. package/docs/functions/hooks.useDeferredValue.html +1 -1
  22. package/docs/functions/hooks.useEffect.html +4 -3
  23. package/docs/functions/hooks.useImperativeHandle.html +1 -1
  24. package/docs/functions/hooks.useInsertionEffect.html +4 -3
  25. package/docs/functions/hooks.useLayoutEffect.html +4 -3
  26. package/docs/functions/hooks.useMemo.html +4 -3
  27. package/docs/functions/hooks.useReducer.html +1 -1
  28. package/docs/functions/misc.deepEqual.html +1 -1
  29. package/docs/functions/misc.isAsync.html +1 -1
  30. package/docs/functions/misc.isClass.html +1 -1
  31. package/docs/functions/misc.isError.html +1 -1
  32. package/docs/functions/misc.isThenable.html +1 -1
  33. package/docs/functions/misc.shallowEqual.html +3 -2
  34. package/docs/functions/misc.toBool.html +1 -1
  35. package/docs/functions/timers.timeoutPromise.html +3 -3
  36. package/docs/hierarchy.html +1 -1
  37. package/docs/modules/components.html +1 -1
  38. package/docs/static/demos/memo.jsx +26 -0
  39. package/docs/static/index.html +2 -1
  40. package/docs/static/lilact.development.js +127 -114
  41. package/docs/static/lilact.development.js.map +2 -2
  42. package/docs/static/lilact.development.min.js +19 -19
  43. package/docs/static/lilact.development.min.js.map +3 -3
  44. package/docs/static/lilact.production.min.js +17 -17
  45. package/examples/demos/memo.jsx +26 -0
  46. package/examples/index.html +2 -1
  47. package/examples/lilact.development.js +127 -114
  48. package/examples/lilact.development.js.map +2 -2
  49. package/examples/lilact.development.min.js +19 -19
  50. package/examples/lilact.development.min.js.map +3 -3
  51. package/examples/lilact.production.min.js +17 -17
  52. package/package.json +1 -1
  53. package/src/components.jsx +59 -28
  54. package/src/hooks.jsx +10 -6
  55. package/src/lilact.jsx +1 -1
  56. package/src/misc.jsx +4 -3
@@ -1 +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"><h1>Lilact</h1></div><h2>Hierarchy Summary</h2><ul class="tsd-full-hierarchy"><li data-refl="212" id="components.Component"><a href="classes/components.Component.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="assets/icons.svg#icon-128"></use></svg>Component</a><ul><li data-refl="87" id="accessories.ErrorBoundary"><a href="classes/accessories.ErrorBoundary.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="assets/icons.svg#icon-128"></use></svg>ErrorBoundary</a></li><li data-refl="137" id="accessories.Suspense"><a href="classes/accessories.Suspense.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="assets/icons.svg#icon-128"></use></svg>Suspense</a></li><li data-refl="249" id="components.HTMLComponent"><a href="classes/components.HTMLComponent.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="assets/icons.svg#icon-128"></use></svg>HTMLComponent</a><ul><li data-refl="289" id="components.RootComponent"><a href="classes/components.RootComponent.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="assets/icons.svg#icon-128"></use></svg>RootComponent</a></li></ul></li></ul></li></ul></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>
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"><h1>Lilact</h1></div><h2>Hierarchy Summary</h2><ul class="tsd-full-hierarchy"><li data-refl="215" id="components.Component"><a href="classes/components.Component.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="assets/icons.svg#icon-128"></use></svg>Component</a><ul><li data-refl="87" id="accessories.ErrorBoundary"><a href="classes/accessories.ErrorBoundary.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="assets/icons.svg#icon-128"></use></svg>ErrorBoundary</a></li><li data-refl="137" id="accessories.Suspense"><a href="classes/accessories.Suspense.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="assets/icons.svg#icon-128"></use></svg>Suspense</a></li><li data-refl="252" id="components.HTMLComponent"><a href="classes/components.HTMLComponent.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="assets/icons.svg#icon-128"></use></svg>HTMLComponent</a><ul><li data-refl="292" id="components.RootComponent"><a href="classes/components.RootComponent.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="assets/icons.svg#icon-128"></use></svg>RootComponent</a></li></ul></li></ul></li></ul></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>
@@ -1 +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>components | 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">components</a></li></ul><h1>Module components</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="component"><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/components.Component.html">Component</a><a href="#component" 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="htmlcomponent"><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/components.HTMLComponent.html">HTMLComponent</a><a href="#htmlcomponent" 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="rootcomponent"><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/components.RootComponent.html">RootComponent</a><a href="#rootcomponent" 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="createcomponent"><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/components.createComponent.html">createComponent</a><a href="#createcomponent" 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="createroot"><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/components.createRoot.html">createRoot</a><a href="#createroot" 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="render"><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/components.render.html">render</a><a href="#render" 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="#component"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="../assets/icons.svg#icon-128"></use></svg><span>Component</span></a><a href="#htmlcomponent"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="../assets/icons.svg#icon-128"></use></svg><span>HTML<wbr/>Component</span></a><a href="#rootcomponent"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="../assets/icons.svg#icon-128"></use></svg><span>Root<wbr/>Component</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="#createcomponent"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>create<wbr/>Component</span></a><a href="#createroot"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>create<wbr/>Root</span></a><a href="#render"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>render</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>
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>components | 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">components</a></li></ul><h1>Module components</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="component"><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/components.Component.html">Component</a><a href="#component" 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="htmlcomponent"><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/components.HTMLComponent.html">HTMLComponent</a><a href="#htmlcomponent" 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="rootcomponent"><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/components.RootComponent.html">RootComponent</a><a href="#rootcomponent" 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="createcomponent"><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/components.createComponent.html">createComponent</a><a href="#createcomponent" 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="createroot"><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/components.createRoot.html">createRoot</a><a href="#createroot" 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="memo"><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/components.memo.html">memo</a><a href="#memo" 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="render"><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/components.render.html">render</a><a href="#render" 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="#component"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="../assets/icons.svg#icon-128"></use></svg><span>Component</span></a><a href="#htmlcomponent"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="../assets/icons.svg#icon-128"></use></svg><span>HTML<wbr/>Component</span></a><a href="#rootcomponent"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="../assets/icons.svg#icon-128"></use></svg><span>Root<wbr/>Component</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="#createcomponent"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>create<wbr/>Component</span></a><a href="#createroot"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>create<wbr/>Root</span></a><a href="#memo"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>memo</span></a><a href="#render"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>render</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>
@@ -0,0 +1,26 @@
1
+ const { useState, memo } = Lilact;
2
+
3
+ const Child = memo(function Child({ count }) {
4
+ console.log("Child render. count =", count);
5
+ return <div>Child count: {count}</div>;
6
+ });
7
+
8
+ module.exports = function Demo() {
9
+ const [tick, setTick] = useState(0);
10
+ const [count] = useState(5); // never changes
11
+
12
+ return (
13
+ <div>
14
+ <p>This is a demonstration of `memo`. When the button is pressed the parent div is updated but as the count
15
+ is not changed the Child does not update, so its render is only logged once.
16
+ </p>
17
+ <center>
18
+ <button onClick={() => setTick(tick + 1)}>Parent re-render</button>
19
+ <div>Tick: {tick}</div>
20
+
21
+ {/* Parent updates, but count prop stays 5 */}
22
+ <Child count={count} />
23
+ </center>
24
+ </div>
25
+ );
26
+ }
@@ -214,7 +214,7 @@ function App()
214
214
  const demos =[
215
215
  "Hooks",
216
216
  ['stopwatch.jsx', '( useState, useRef )'],
217
- ['actionstate.jsx', '( useActionState, useState )'],
217
+ ['actionstate.jsx', '( useActionState, Spinner )'],
218
218
  ['usedefered.jsx', '( useState, useDeferredValue )'],
219
219
  ['usetransition.jsx', '( useTransition, useState, useCallback, useId ), emotion:( css, cx )'],
220
220
  ['reducer.jsx', '( useReducer )'],
@@ -224,6 +224,7 @@ function App()
224
224
  ['capture.jsx', '-- Event Capture and Bubble --'],
225
225
  ['priorities.jsx', '-- Effect Priorities --'],
226
226
  ['forwardref.jsx', '( forwardRef, useImperativeHandle, useRef )'],
227
+ ['memo.jsx', '( memo, useState )'],
227
228
  ['lazy.jsx', '( lazy, require, Suspene, Spinner )'],
228
229
  ['proptypes.jsx', '( PropTypes )'],
229
230
  ['redux.jsx', '( Provider, useSelector, useDispatch, connect ), redux:( createStore )'],
@@ -1982,6 +1982,7 @@ __export(components_exports, {
1982
1982
  insertion_effects: () => insertion_effects,
1983
1983
  layout_effects: () => layout_effects,
1984
1984
  length_css_attributes_set: () => length_css_attributes_set,
1985
+ memo: () => memo,
1985
1986
  passive_effects: () => passive_effects,
1986
1987
  processEffects: () => processEffects,
1987
1988
  render: () => render,
@@ -2136,7 +2137,7 @@ function isEmpty(value) {
2136
2137
  for (let i2 in value) return false;
2137
2138
  return true;
2138
2139
  }
2139
- var shallowEqual = (source, target) => {
2140
+ var shallowEqual = (source, target, ignore) => {
2140
2141
  if (typeOf(source) !== typeOf(target)) {
2141
2142
  return false;
2142
2143
  }
@@ -2144,9 +2145,9 @@ var shallowEqual = (source, target) => {
2144
2145
  if (source.length !== target.length) {
2145
2146
  return false;
2146
2147
  }
2147
- return source.every((el, index2) => el === target[index2]);
2148
+ return source.every((el, index2) => el === target[index2] || index2 === ignore);
2148
2149
  } else if (typeOf(source) === "object") {
2149
- return Object.keys(source).every((key) => source[key] === target[key]);
2150
+ return Object.keys(source).every((key) => source[key] === target[key] || key === ignore);
2150
2151
  } else if (typeOf(source) === "date") {
2151
2152
  return source.getTime() === target.getTime();
2152
2153
  }
@@ -2285,116 +2286,116 @@ var ComponentCore = class {
2285
2286
  this.props = props || {};
2286
2287
  }
2287
2288
  /*
2288
- //let do_rerender = true;
2289
-
2290
- // if(this.outlet && this.entity[MEMOIZED]) {
2291
- // if(shallowEqual(this.props, next_props)) do_rerender=false;
2292
- // delete this.entity[MEMOIZED];
2293
- // }
2294
-
2295
- if(do_rerender) {
2296
- */
2289
+ */
2297
2290
  // TODO: should componentDidUpdate be called after arranging/appending the outlet or before?
2298
2291
  apply(next_props = this.props, next_state = this.next_state || this.state) {
2299
- var _a, _b, _c, _d;
2300
- if (true) {
2301
- if ((_a = this.entity) == null ? void 0 : _a.propTypes) {
2302
- PropTypes.checkPropTypes(this.entity.propTypes, this.props, "prop", this.entity.name);
2303
- } else if ((_b = this.component) == null ? void 0 : _b.propTypes) {
2304
- PropTypes.checkPropTypes(this.component.propTypes, this.props, "prop", this.component.name);
2292
+ var _a, _b, _c, _d, _e;
2293
+ let do_rerender = true;
2294
+ if (this.outlet && (this == null ? void 0 : this[MEMOIZED])) {
2295
+ if (shallowEqual(this.props, next_props, "children") && shallowEqual((_a = this.props) == null ? void 0 : _a.children, next_props == null ? void 0 : next_props.children)) {
2296
+ do_rerender = false;
2305
2297
  }
2306
2298
  }
2307
- if (typeof next_state === "function") next_state = next_state(this.state);
2308
- if (this.component.constructor.defaultProps) {
2309
- next_props = { ...this.component.constructor.defaultProps, ...next_props };
2310
- }
2311
- if (this.component.shouldComponentUpdate && !this.component.shouldComponentUpdate(next_state, next_props, this.context)) return;
2312
- if (typeof this.entity === "string") {
2313
- if (!(this.element instanceof Element)) {
2314
- this.element = document.createElement(this.entity);
2315
- if (next_props == null ? void 0 : next_props.defaultValue) this.element.value = String(next_props.defaultValue).slice(0, next_props == null ? void 0 : next_props.maxLength);
2316
- if (next_props == null ? void 0 : next_props.defaultChecked) this.element.checked = next_props.defaultChecked;
2299
+ if (do_rerender) {
2300
+ if (true) {
2301
+ if ((_b = this.entity) == null ? void 0 : _b.propTypes) {
2302
+ PropTypes.checkPropTypes(this.entity.propTypes, this.props, "prop", this.entity.name);
2303
+ } else if ((_c = this.component) == null ? void 0 : _c.propTypes) {
2304
+ PropTypes.checkPropTypes(this.component.propTypes, this.props, "prop", this.component.name);
2305
+ }
2317
2306
  }
2318
- this.element[COMPONENT] = this.component;
2319
- }
2320
- if (next_props.ref) {
2321
- if (typeof next_props.ref === "function") {
2322
- next_props.ref(this.element || this.component);
2323
- } else {
2324
- next_props.ref.current = this.element || this.component;
2307
+ if (typeof next_state === "function") next_state = next_state(this.state);
2308
+ if (this.component.constructor.defaultProps) {
2309
+ next_props = { ...this.component.constructor.defaultProps, ...next_props };
2325
2310
  }
2326
- }
2327
- if (next_props !== void 0 && this.component.componentWillReceiveProps) {
2328
- this.component.componentWillReceiveProps(next_props);
2329
- }
2330
- if (this.component.componentWillUpdate) {
2331
- this.component.componentWillUpdate(next_props, next_state);
2332
- }
2333
- const prev_state = this.state, prev_props = this.props;
2334
- if (this.element) {
2335
- this.updateElementProps(next_props);
2336
- }
2337
- this.props = next_props;
2338
- if (typeof this.next_state === "object") {
2339
- if (!this.state) this.state = { ...next_state };
2340
- else Object.assign(this.state, next_state);
2341
- } else if (this.next_state !== void 0) throw new Error("Component.setState only accepts objects or functions is new state.");
2342
- if (this.next_state) delete this.next_state;
2343
- if (this.hooks !== void 0) {
2344
- this.hook_index = 0;
2345
- lilact_default.current_component = [this, lilact_default.current_component];
2346
- try {
2347
- this.outlet = this.component.render(next_props, { current: this.element || this.component });
2348
- } catch (e) {
2349
- renderErrorHandler(this, e);
2311
+ if (this.component.shouldComponentUpdate && !this.component.shouldComponentUpdate(next_state, next_props, this.context)) return;
2312
+ if (typeof this.entity === "string") {
2313
+ if (!(this.element instanceof Element)) {
2314
+ this.element = document.createElement(this.entity);
2315
+ if (next_props == null ? void 0 : next_props.defaultValue) this.element.value = String(next_props.defaultValue).slice(0, next_props == null ? void 0 : next_props.maxLength);
2316
+ if (next_props == null ? void 0 : next_props.defaultChecked) this.element.checked = next_props.defaultChecked;
2317
+ }
2318
+ this.element[COMPONENT] = this.component;
2350
2319
  }
2351
- lilact_default.current_component = lilact_default.current_component[1];
2352
- } else {
2353
- try {
2354
- this.outlet = this.component.render({ current: this.element || this.component });
2355
- } catch (e) {
2356
- renderErrorHandler(this, e);
2320
+ if (next_props.ref) {
2321
+ if (typeof next_props.ref === "function") {
2322
+ next_props.ref(this.element || this.component);
2323
+ } else {
2324
+ next_props.ref.current = this.element || this.component;
2325
+ }
2357
2326
  }
2358
- }
2359
- if (((_d = (_c = this.outlet) == null ? void 0 : _c.constructor) == null ? void 0 : _d.name) !== "Array") {
2360
- this.outlet = [this.outlet];
2361
- }
2362
- this.outlet = [...this.outlet];
2363
- for (let i2 = 0; i2 < this.outlet.length; i2++) {
2364
- let item = this.outlet[i2];
2365
- if (item === void 0 || item === null || typeof item === "boolean") {
2366
- this.outlet.splice(i2, 1);
2367
- i2--;
2368
- } else if (typeof item === "function") {
2369
- const res2 = this.childFunctionHandler(item);
2370
- this.outlet.splice(i2, 1, res2);
2371
- i2--;
2372
- } else if (item.constructor.name === "Array") {
2373
- this.outlet.splice(i2, 1, ...item);
2374
- i2--;
2327
+ if (next_props !== void 0 && this.component.componentWillReceiveProps) {
2328
+ this.component.componentWillReceiveProps(next_props);
2329
+ }
2330
+ if (this.component.componentWillUpdate) {
2331
+ this.component.componentWillUpdate(next_props, next_state);
2332
+ }
2333
+ const prev_state = this.state, prev_props = this.props;
2334
+ if (this.element) {
2335
+ this.updateElementProps(next_props);
2336
+ }
2337
+ this.props = next_props;
2338
+ if (typeof this.next_state === "object") {
2339
+ if (!this.state) this.state = { ...next_state };
2340
+ else Object.assign(this.state, next_state);
2341
+ } else if (this.next_state !== void 0) throw new Error("Component.setState only accepts objects or functions is new state.");
2342
+ if (this.next_state) delete this.next_state;
2343
+ if (this.hooks !== void 0) {
2344
+ this.hook_index = 0;
2345
+ lilact_default.current_component = [this, lilact_default.current_component];
2346
+ try {
2347
+ this.outlet = this.component.render(next_props, { current: this.element || this.component });
2348
+ } catch (e) {
2349
+ renderErrorHandler(this, e);
2350
+ }
2351
+ lilact_default.current_component = lilact_default.current_component[1];
2375
2352
  } else {
2376
- const core = prepareCore(this, item);
2377
- this.outlet[i2] = core;
2378
- if (core[TEXT2] === void 0) {
2379
- core.container = this.element ? this : this.container;
2380
- core.apply(item.props);
2353
+ try {
2354
+ this.outlet = this.component.render({ current: this.element || this.component });
2355
+ } catch (e) {
2356
+ renderErrorHandler(this, e);
2357
+ }
2358
+ }
2359
+ if (((_e = (_d = this.outlet) == null ? void 0 : _d.constructor) == null ? void 0 : _e.name) !== "Array") {
2360
+ this.outlet = [this.outlet];
2361
+ }
2362
+ this.outlet = [...this.outlet];
2363
+ for (let i2 = 0; i2 < this.outlet.length; i2++) {
2364
+ let item = this.outlet[i2];
2365
+ if (item === void 0 || item === null || typeof item === "boolean") {
2366
+ this.outlet.splice(i2, 1);
2367
+ i2--;
2368
+ } else if (typeof item === "function") {
2369
+ const res2 = this.childFunctionHandler(item);
2370
+ this.outlet.splice(i2, 1, res2);
2371
+ i2--;
2372
+ } else if (item.constructor.name === "Array") {
2373
+ this.outlet.splice(i2, 1, ...item);
2374
+ i2--;
2381
2375
  } else {
2382
- if (!core.element) {
2383
- core.element = document.createTextNode(item[TEXT2]);
2384
- core[TEXT2] = item[TEXT2];
2385
- } else if (core[TEXT2] !== item[TEXT2]) {
2386
- core.element.textContent = item[TEXT2];
2387
- core[TEXT2] = item[TEXT2];
2376
+ const core = prepareCore(this, item);
2377
+ this.outlet[i2] = core;
2378
+ if (core[TEXT2] === void 0) {
2379
+ core.container = this.element ? this : this.container;
2380
+ core.apply(item.props);
2381
+ } else {
2382
+ if (!core.element) {
2383
+ core.element = document.createTextNode(item[TEXT2]);
2384
+ core[TEXT2] = item[TEXT2];
2385
+ } else if (core[TEXT2] !== item[TEXT2]) {
2386
+ core.element.textContent = item[TEXT2];
2387
+ core[TEXT2] = item[TEXT2];
2388
+ }
2388
2389
  }
2389
2390
  }
2390
2391
  }
2392
+ if (this.cache) this.cache.commit();
2393
+ if (this.element) this.arrangeOutlet();
2394
+ if (this.component.componentDidUpdate) {
2395
+ this.component.componentDidUpdate(prev_props, prev_state, this.last_snapshot);
2396
+ }
2397
+ if (this.last_snapshot) delete this.last_snapshot;
2391
2398
  }
2392
- if (this.cache) this.cache.commit();
2393
- if (this.element) this.arrangeOutlet();
2394
- if (this.component.componentDidUpdate) {
2395
- this.component.componentDidUpdate(prev_props, prev_state, this.last_snapshot);
2396
- }
2397
- if (this.last_snapshot) delete this.last_snapshot;
2398
2399
  }
2399
2400
  async cleanup() {
2400
2401
  var _a, _b, _c;
@@ -2622,18 +2623,23 @@ var renderErrorHandler = (c, e) => {
2622
2623
  } else throw e;
2623
2624
  };
2624
2625
  function constructFunc(core, parent) {
2625
- var _a, _b;
2626
2626
  let comp = core;
2627
2627
  if (core[TEXT2] !== void 0) {
2628
2628
  } else {
2629
- if (typeof core.entity === "string") {
2630
- comp = new HTMLComponent(core.entity, core.props);
2629
+ let entity = core.entity;
2630
+ let memoized = false;
2631
+ if (typeof entity === "object" && entity[MEMOIZED]) {
2632
+ memoized = true;
2633
+ entity = entity[MEMOIZED];
2634
+ }
2635
+ if (typeof entity === "string") {
2636
+ comp = new HTMLComponent(entity, core.props);
2631
2637
  } else {
2632
- if (isClass(core.entity)) {
2633
- if ((_a = core.entity) == null ? void 0 : _a.defaultProps) {
2634
- core.props = { ...core.entity.defaultProps, ...core.props };
2638
+ if (isClass(entity)) {
2639
+ if (entity == null ? void 0 : entity.defaultProps) {
2640
+ core.props = { ...entity.defaultProps, ...core.props };
2635
2641
  }
2636
- comp = new core.entity(core.props);
2642
+ comp = new entity(core.props);
2637
2643
  const desc = Object.getOwnPropertyDescriptor(comp, "state");
2638
2644
  if (desc) {
2639
2645
  if (typeof desc.get !== "function" && typeof desc.set !== "function") {
@@ -2652,22 +2658,23 @@ function constructFunc(core, parent) {
2652
2658
  });
2653
2659
  }
2654
2660
  }
2655
- } else if (typeof core.entity === "function") {
2656
- if ((_b = core.entity) == null ? void 0 : _b.defaultProps) {
2657
- core.props = { ...core.entity.defaultProps, ...core.props };
2661
+ } else if (typeof entity === "function") {
2662
+ if (entity == null ? void 0 : entity.defaultProps) {
2663
+ core.props = { ...entity.defaultProps, ...core.props };
2658
2664
  }
2659
2665
  comp = new Component(core.props);
2660
- comp.render = core.entity.bind(comp);
2666
+ comp.render = entity.bind(comp);
2661
2667
  comp[CORE].hooks = [];
2662
2668
  comp[CORE].hook_index = 0;
2663
2669
  } else {
2664
- throw new Error("Invalid entity for createComponent.");
2670
+ throw new Error("Error in constructing component.");
2665
2671
  }
2666
- comp[CORE].entity = core.entity;
2672
+ comp[CORE].entity = entity;
2667
2673
  if (core.container) {
2668
2674
  comp[CORE].container = core.container;
2669
2675
  }
2670
2676
  }
2677
+ if (memoized) comp[CORE][MEMOIZED] = true;
2671
2678
  }
2672
2679
  if (parent instanceof ComponentCore) comp[CORE].parent = parent;
2673
2680
  return comp;
@@ -2904,7 +2911,9 @@ var RootComponent = class extends HTMLComponent {
2904
2911
  };
2905
2912
  function createComponent2(entity, props = {}, ...children) {
2906
2913
  if (typeof entity !== "string" && typeof entity !== "function") {
2907
- throw new Error("Invalid entity for createComponent.");
2914
+ if (typeof entity !== "object" || !entity[MEMOIZED]) {
2915
+ throw new Error("Invalid entity for createComponent.");
2916
+ }
2908
2917
  }
2909
2918
  for (let i2 = 0; i2 < children.length; i2++) {
2910
2919
  let ch2 = children[i2];
@@ -2953,6 +2962,9 @@ function render(component, element) {
2953
2962
  }
2954
2963
  return createRoot(element).render(component);
2955
2964
  }
2965
+ function memo(component) {
2966
+ return { [MEMOIZED]: component };
2967
+ }
2956
2968
  var createElement = createComponent2;
2957
2969
  var current_component = [];
2958
2970
  var update_set = /* @__PURE__ */ new Set();
@@ -5815,7 +5827,7 @@ function transpileJSX(jsx2, {
5815
5827
 
5816
5828
  // .tmp/src/lilact.jsx
5817
5829
  var Lilact2 = {
5818
- VERSION: "beta.17",
5830
+ VERSION: "beta.18",
5819
5831
  // Configuration
5820
5832
  defaultTransitionTimeout: 300,
5821
5833
  defaultIsEqual: Object.is,
@@ -5917,6 +5929,7 @@ export {
5917
5929
  layout_effects,
5918
5930
  lazy,
5919
5931
  length_css_attributes_set,
5932
+ memo,
5920
5933
  passive_effects,
5921
5934
  pauseTimers,
5922
5935
  processEffects,