lilact 0.7.12 → 0.8.1
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.
- package/README.md +146 -83
- package/bin/bundle.cjs +122 -0
- package/bin/bundle.js +118 -0
- package/dist/lilact.development.js +220 -4
- package/dist/lilact.development.js.map +1 -1
- package/dist/lilact.development.min.js +2 -2
- package/dist/lilact.development.min.js.map +1 -1
- package/dist/lilact.production.min.js +1 -1
- package/dist/lilact.production.min.js.map +1 -1
- package/docs/assets/highlight.css +39 -25
- package/docs/classes/components.HTMLComponent.html +1 -1
- package/docs/classes/components.RootComponent.html +1 -1
- package/docs/functions/accessories.Spinner.html +2 -2
- package/docs/functions/redux.Provider.html +2 -2
- package/docs/functions/redux.connect.html +2 -2
- package/docs/functions/router.HashRouter.html +2 -2
- package/docs/functions/router.Link.html +2 -2
- package/docs/functions/router.NavLink.html +2 -2
- package/docs/functions/router.Routes.html +2 -2
- package/docs/functions/run.lazy.html +2 -2
- package/docs/functions/transition.CSSTransition.html +2 -2
- package/docs/index.html +95 -88
- package/docs/static/lilact.development.js +220 -4
- package/docs/static/lilact.development.min.js +2 -2
- package/docs/static/lilact.production.min.js +1 -1
- package/docs/variables/pane.ResizablePane.html +1 -1
- package/package.json +9 -4
- package/root/lilact.development.js +220 -4
- package/root/lilact.development.min.js +2 -2
- package/root/lilact.production.min.js +1 -1
- package/src/lilact.jsx +20 -7
- package/webpack.config.factory.cjs +124 -0
- package/webpack.config.js +32 -16
|
@@ -1,4 +1,4 @@
|
|
|
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>Routes | 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="../modules/router.html">router</a></li><li><a href="" aria-current="page">Routes</a></li></ul><h1>Function Routes</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="routes"><span class="tsd-kind-call-signature">Routes</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{</span> <span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span> <span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">
|
|
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>Routes | 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="../modules/router.html">router</a></li><li><a href="" aria-current="page">Routes</a></li></ul><h1>Function Routes</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="routes"><span class="tsd-kind-call-signature">Routes</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{</span> <span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span> <span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../classes/components.HTMLComponent.html" class="tsd-signature-type tsd-kind-class">HTMLComponent</a> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">null</span><a href="#routes" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Route container component that groups multiple <Route> definitions.</p>
|
|
2
2
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">props</span>: <span class="tsd-signature-symbol">{</span> <span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span> <span class="tsd-signature-symbol">}</span></span><div class="tsd-comment tsd-typography"><p>Component props.</p>
|
|
3
3
|
</div><ul class="tsd-parameters"><li class="tsd-parameter"><h5><span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span></h5><div class="tsd-comment tsd-typography"><p>One or more route elements to register under the router.</p>
|
|
4
|
-
</div></li></ul></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">
|
|
4
|
+
</div></li></ul></li></ul></div><h4 class="tsd-returns-title">Returns <a href="../classes/components.HTMLComponent.html" class="tsd-signature-type tsd-kind-class">HTMLComponent</a> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">null</span></h4><aside class="tsd-sources"><ul><li>Defined in router.js:264</li></ul></aside></div></li></ul></section></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,7 +1,7 @@
|
|
|
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>lazy | 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="../modules/run.html">run</a></li><li><a href="" aria-current="page">lazy</a></li></ul><h1>Function lazy</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="lazy"><span class="tsd-kind-call-signature">lazy</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">factory</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <
|
|
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>lazy | 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="../modules/run.html">run</a></li><li><a href="" aria-current="page">lazy</a></li></ul><h1>Function lazy</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="lazy"><span class="tsd-kind-call-signature">lazy</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">factory</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <a href="../classes/components.HTMLComponent.html" class="tsd-signature-type tsd-kind-class">HTMLComponent</a><a href="#lazy" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Wrapper that enables async, code-split component loading. <code>lazy</code> should be used
|
|
2
2
|
outside the component definintion or it will produce new components on each rerender.</p>
|
|
3
3
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">factory</span>: <span class="tsd-signature-type">any</span></span><div class="tsd-comment tsd-typography"><p>A function with <strong>no arguments</strong> that returns a <code>Promise</code>.
|
|
4
4
|
The promise must resolve to a module whose module.exports.default is a Lilact component
|
|
5
5
|
or otherwise it will be whatever the module.exports is set to.</p>
|
|
6
|
-
</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <
|
|
6
|
+
</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <a href="../classes/components.HTMLComponent.html" class="tsd-signature-type tsd-kind-class">HTMLComponent</a></h4><p>A Lilact component that should be rendered inside a Suspense boundary.</p>
|
|
7
7
|
<aside class="tsd-sources"><ul><li>Defined in run.js:180</li></ul></aside></div></li></ul></section></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,4 +1,4 @@
|
|
|
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>CSSTransition | 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="../modules/transition.html">transition</a></li><li><a href="" aria-current="page">CSSTransition</a></li></ul><h1>Function CSSTransition</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="csstransition"><span class="tsd-kind-call-signature">CSSTransition</span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{</span><br/> <span class="tsd-kind-property">appear</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">classNames</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">in</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">mountOnEnter</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEnter</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntered</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntering</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExit</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExited</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExiting</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">timeout</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">unmountOnExit</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <
|
|
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>CSSTransition | 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="../modules/transition.html">transition</a></li><li><a href="" aria-current="page">CSSTransition</a></li></ul><h1>Function CSSTransition</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="csstransition"><span class="tsd-kind-call-signature">CSSTransition</span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{</span><br/> <span class="tsd-kind-property">appear</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">classNames</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">in</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">mountOnEnter</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEnter</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntered</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntering</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExit</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExited</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExiting</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">timeout</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">unmountOnExit</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../classes/components.HTMLComponent.html" class="tsd-signature-type tsd-kind-class">HTMLComponent</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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>CSSTransition component that extends Transition by applying CSS class names during enter/exit phases.</p>
|
|
2
2
|
<p>Lilact accepts multiple children for CSSTransition. This has the benefit
|
|
3
3
|
of receiving single events on multiple animated components.</p>
|
|
4
4
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">props</span>: <span class="tsd-signature-symbol">{</span><br/> <span class="tsd-kind-property">appear</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">classNames</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">in</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">mountOnEnter</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEnter</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntered</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntering</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExit</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExited</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExiting</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">timeout</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">unmountOnExit</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span></span><div class="tsd-comment tsd-typography"><p>Component props.</p>
|
|
@@ -15,4 +15,4 @@ of receiving single events on multiple animated components.</p>
|
|
|
15
15
|
</div></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">onExiting</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span></h5><div class="tsd-comment tsd-typography"><p>Called while the component is exiting.</p>
|
|
16
16
|
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">timeout</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">any</span></h5><div class="tsd-comment tsd-typography"><p>Duration (or durations) for the transition.</p>
|
|
17
17
|
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">unmountOnExit</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span></h5><div class="tsd-comment tsd-typography"><p>If true, unmount the child after exiting.</p>
|
|
18
|
-
</div></li></ul></li></ul></div><h4 class="tsd-returns-title">Returns <
|
|
18
|
+
</div></li></ul></li></ul></div><h4 class="tsd-returns-title">Returns <a href="../classes/components.HTMLComponent.html" class="tsd-signature-type tsd-kind-class">HTMLComponent</a></h4><aside class="tsd-sources"><ul><li>Defined in transition.js:201</li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
package/docs/index.html
CHANGED
|
@@ -1,98 +1,105 @@
|
|
|
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><div class="tsd-panel tsd-typography"><img src="media/icon.png" alt="Description" width="128" style="margin-left: -.76rem"/>
|
|
2
2
|
<h1 id="lilact" class="tsd-anchor-link">Lilact<a href="#lilact" 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></h1>
|
|
3
|
-
<h3 id="a-little-reactjsx-runtime-implementation-for-browser" class="tsd-anchor-link">A Little React/JSX Runtime Implementation for Browser<a href="#a-little-reactjsx-runtime-implementation-for-browser" 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></h3>
|
|
4
|
-
<p><a href="
|
|
5
|
-
<p><a href="
|
|
6
|
-
<p><a href="
|
|
3
|
+
<h3 id="a-little-reactjsx-runtime-implementation-for-the-browser" class="tsd-anchor-link">A Little React/JSX Runtime Implementation for the Browser<a href="#a-little-reactjsx-runtime-implementation-for-the-browser" 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></h3>
|
|
4
|
+
<p><a href="arashkazemi.github.io/lilact/">Docs on GitHub Pages</a> — <a href="arashkazemi.github.io/lilact/static">Demos on GitHub Pages</a></p>
|
|
5
|
+
<p><a href="github.com/arashkazemi/lilact">Lilact repo on GitHub</a> — <a href="www.npmjs.com/package/lilact">Lilact on npm</a></p>
|
|
6
|
+
<p><a href="github.com/arashkazemi/lilact-express">Lilact/Node/Express Demo Project</a> — <a href="github.com/arashkazemi/lilact-php-demo">Lilact/PHP Demo Project</a> — <a href="github.com/arashkazemi/lilact-python-demo">Lilact/Python Demo Project</a></p>
|
|
7
7
|
<hr>
|
|
8
|
-
<p>If you find Lilact useful, please consider sponsoring. Your support funds ongoing maintenance,
|
|
9
|
-
|
|
8
|
+
<p>If you find Lilact useful, please consider sponsoring. Your support funds ongoing maintenance, performance improvements, and new features.<br>
|
|
9
|
+
<a href="github.com/sponsors/arashkazemi">Sponsor me on GitHub</a></p>
|
|
10
10
|
<hr>
|
|
11
|
-
<
|
|
12
|
-
designed to
|
|
13
|
-
|
|
14
|
-
<code>Lilact</code>
|
|
15
|
-
<p><code>Lilact</code> works in the browser, so it doesn't rely on any JS/node back-end and can
|
|
16
|
-
essentially work with any kind of web server/back-end. An example of using it with a PHP/MySQL
|
|
17
|
-
data store is available on <a href="https://github.com/arashkazemi/lilact-php-demo">lilact-php-demo</a>.
|
|
18
|
-
And an example of using it with a Python/SQLite data store is available on
|
|
19
|
-
<a href="https://github.com/arashkazemi/lilact-python-demo">lilact-python-demo</a>.</p>
|
|
20
|
-
<p><code>Lilact</code> uses its own JSX transpiler (not Babel). It is a recursive-descent
|
|
21
|
-
parser with lookahead, that doesn't parse the JS syntax completely and relies on the
|
|
22
|
-
JS runtime to detect some errors. The transpiler weights only a few kilobytes and can
|
|
23
|
-
be incorporated into other React engines too. It even generates sourcemaps without relying
|
|
24
|
-
on any 3rd party library. There is a <code>transpile.js</code> helper in the bin directory to show
|
|
25
|
-
how you can use it.</p>
|
|
26
|
-
<p><code>Lilact</code> implements both the <strong>legacy class based</strong> and <strong>modern hook based</strong> APIs. And it
|
|
27
|
-
has almost everything necessary. In addition to the API, it also includes the official
|
|
28
|
-
<code>Redux</code> and <code>PropTypes</code> libraries to be used (see the <code>redux.jsx</code> and <code>proptypes.jsx</code> demos).
|
|
29
|
-
So it has redux support and has many of the functions and hooks, i.e. <code>connect</code> and
|
|
30
|
-
<code>useDispatch</code>.</p>
|
|
31
|
-
<p>It also includes the amazing <code>@emotion/css</code> library to ease working with styles.
|
|
32
|
-
It can be accessed through <code>Lilact.emotion</code>.</p>
|
|
33
|
-
<p>To ease working, it already includes a <code>HashRouter</code>, <code>CSSTransition</code>, <code>ErrorBoundary</code>,
|
|
34
|
-
<code>Suspense</code>, and some helper components like <code>Spinner</code> and <code>ResizablePane</code>. It also has
|
|
35
|
-
a specific timeout implementation that can be paused and resumed at will. <code>Lilact</code>'s
|
|
36
|
-
<code>Suspense</code> has a few more features than the standard API.</p>
|
|
37
|
-
<p>You can see all the available methods in the documentation. And there is a list of
|
|
38
|
-
demos that can all be seen alongside their code at <a href="./static/index.html">Lilact Demo Examples</a>.
|
|
39
|
-
Just note that the modules are separated in the documentation to improve the doc
|
|
40
|
-
structure, and in practice all the methods and members are accessible via the <code>Lilact</code> object
|
|
41
|
-
itself directly.</p>
|
|
42
|
-
<p><code>Lilact</code> runs in the browser, so it uses <code>eval</code> to run the transpiled scripts, and cannot
|
|
43
|
-
use import and exports the same as a module. So you should import the functions using the following
|
|
44
|
-
convention</p>
|
|
45
|
-
<pre><code> const { useState, useRef, render } = Lilact;
|
|
46
|
-
</code></pre>
|
|
47
|
-
<p>And to export you can use <code>module.exports = ...</code>.</p>
|
|
11
|
+
<h2 id="overview" class="tsd-anchor-link">Overview<a href="#overview" 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></h2>
|
|
12
|
+
<p><code>Lilact</code> is a very lightweight implementation of the React API designed to run in the browser. It can be used as a single script that is around <code>80kb</code> minified and around <code>27kb</code> gzipped, and includes its whole API.</p>
|
|
13
|
+
<p><code>Lilact</code> is very fast, uses minimal resources, and handles memory very efficiently.</p>
|
|
14
|
+
<p>In a Node.js environment, <code>Lilact</code> can be incorporated and imported similarly to React, and it can also be used as a static library in other platforms.</p>
|
|
48
15
|
<hr>
|
|
49
|
-
<
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
<p>
|
|
53
|
-
<
|
|
54
|
-
|
|
16
|
+
<h2 id="jsx-transpiler" class="tsd-anchor-link">JSX Transpiler<a href="#jsx-transpiler" 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></h2>
|
|
17
|
+
<p><code>Lilact</code> uses its own JSX transpiler (not Babel). It is a recursive-descent parser with lookahead. It doesn’t parse the full JavaScript syntax and instead relies on the JS runtime to detect some errors.</p>
|
|
18
|
+
<p>The transpiler is only a few kilobytes and can be incorporated into other React engines as well. It even generates sourcemaps without relying on any third-party library.</p>
|
|
19
|
+
<p>There is a <code>transpile.js</code> helper in the <code>bin</code> directory to demonstrate how to use it.</p>
|
|
20
|
+
<hr>
|
|
21
|
+
<h2 id="react-apis-libraries-and-built-in-components" class="tsd-anchor-link">React APIs, Libraries, and Built-in Components<a href="#react-apis-libraries-and-built-in-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></h2>
|
|
22
|
+
<p><code>Lilact</code> implements both the <strong>legacy class-based</strong> API and the <strong>modern hook-based</strong> API, and it includes almost everything you need.</p>
|
|
23
|
+
<p>In addition to the API itself, it bundles the official <code>Redux</code> and <code>PropTypes</code> libraries (see the <code>redux.jsx</code> and <code>proptypes.jsx</code> demos). As a result, it has Redux support and provides many functions and hooks, including <code>connect</code> and <code>useDispatch</code>.</p>
|
|
24
|
+
<p>It also includes the amazing <code>@emotion/css</code> library to ease working with styles. You can access it via <code>Lilact.emotion</code>.</p>
|
|
25
|
+
<p>For convenience, it already includes components such as:</p>
|
|
26
|
+
<ul>
|
|
27
|
+
<li><code>HashRouter</code></li>
|
|
28
|
+
<li><code>CSSTransition</code></li>
|
|
29
|
+
<li><code>ErrorBoundary</code></li>
|
|
30
|
+
<li><code>Suspense</code></li>
|
|
31
|
+
</ul>
|
|
32
|
+
<p>and helper components like:</p>
|
|
33
|
+
<ul>
|
|
34
|
+
<li><code>Spinner</code></li>
|
|
35
|
+
<li><code>ResizablePane</code></li>
|
|
36
|
+
</ul>
|
|
37
|
+
<p>It also includes a specific timeout implementation that can be paused and resumed at will. <code>Lilact</code>’s <code>Suspense</code> includes additional features beyond the standard API.</p>
|
|
38
|
+
<p>You can see all available members and methods in the documentation. There is also a list of demos you can view alongside their code at:<br>
|
|
39
|
+
<a href="arashkazemi.github.io/lilact/static">Lilact Demo Examples</a></p>
|
|
40
|
+
<p>Note: modules are separated in the documentation to improve structure, but in practice all members and methods are accessible directly via the <code>Lilact</code> object.</p>
|
|
41
|
+
<hr>
|
|
42
|
+
<h2 id="webpack-based-bundler" class="tsd-anchor-link">Webpack-based Bundler<a href="#webpack-based-bundler" 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></h2>
|
|
43
|
+
<p>A <code>webpack</code> based bundler is available in the <code>bin</code> directory. It can be used like this:</p>
|
|
44
|
+
<pre><code class="bash"><span class="hl-0">npx</span><span class="hl-1"> </span><span class="hl-2">lilact-bundle</span><span class="hl-1"> </span><span class="hl-3">--entry</span><span class="hl-1"> </span><span class="hl-2">client/App.jsx</span><span class="hl-1"> </span><span class="hl-3">--mode</span><span class="hl-1"> </span><span class="hl-2">production</span><span class="hl-1"> </span><span class="hl-3">--name</span><span class="hl-1"> </span><span class="hl-2">bundle.js</span><span class="hl-1"> </span><span class="hl-3">--out</span><span class="hl-1"> </span><span class="hl-2">public/dist</span>
|
|
45
|
+
</code><button type="button">Copy</button></pre>
|
|
46
|
+
|
|
47
|
+
<hr>
|
|
48
|
+
<h2 id="using-lilact-outside-nodejs-browser-script-tag-integration" class="tsd-anchor-link">Using Lilact Outside Node.js (Browser / Script Tag Integration)<a href="#using-lilact-outside-nodejs-browser-script-tag-integration" 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></h2>
|
|
49
|
+
<p>If you use <code>Lilact</code> outside Node.js, <code>Lilact</code> runs in the browser. In this mode it uses <code>eval</code> to run the transpiled scripts, so it cannot use <code>import</code>/<code>export</code> the same way as a module.</p>
|
|
50
|
+
<p>Import the functions using this convention:</p>
|
|
51
|
+
<pre><code class="js"><span class="hl-3">const</span><span class="hl-1"> { </span><span class="hl-4">useState</span><span class="hl-1">, </span><span class="hl-4">useRef</span><span class="hl-1">, </span><span class="hl-4">render</span><span class="hl-1"> } = </span><span class="hl-5">Lilact</span><span class="hl-1">;</span>
|
|
52
|
+
</code><button type="button">Copy</button></pre>
|
|
53
|
+
|
|
54
|
+
<p>To export:</p>
|
|
55
|
+
<pre><code class="js"><span class="hl-6">module</span><span class="hl-1">.</span><span class="hl-6">exports</span><span class="hl-1"> = ...</span>
|
|
56
|
+
</code><button type="button">Copy</button></pre>
|
|
57
|
+
|
|
58
|
+
<p>Bundled projects can also be used statically on other backends. However, bundling is not required: JSX files can be served and transpiled live.</p>
|
|
59
|
+
<p>A complete example of a <code>Lilact</code> project with an <code>express</code> request handler is available at:<br>
|
|
60
|
+
<a href="github.com/arashkazemi/lilact-express">lilact-express</a></p>
|
|
61
|
+
<p>An example using it with a PHP/MySQL data store is available at:<br>
|
|
62
|
+
<a href="github.com/arashkazemi/lilact-php-demo">lilact-php-demo</a></p>
|
|
63
|
+
<p>An example using it with a Python/SQLite data store is available at:<br>
|
|
64
|
+
<a href="github.com/arashkazemi/lilact-python-demo">lilact-python-demo</a></p>
|
|
65
|
+
<hr>
|
|
66
|
+
<h2 id="installation-and-delivery" class="tsd-anchor-link">Installation and Delivery<a href="#installation-and-delivery" 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></h2>
|
|
67
|
+
<h3 id="nodejs-npm" class="tsd-anchor-link">Node.js (npm)<a href="#nodejs-npm" 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></h3>
|
|
68
|
+
<p>To use <code>Lilact</code> in other Node projects, install it from the npm public repository:</p>
|
|
69
|
+
<pre><code class="bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">i</span><span class="hl-1"> </span><span class="hl-2">lilact</span>
|
|
70
|
+
</code><button type="button">Copy</button></pre>
|
|
71
|
+
|
|
72
|
+
<h3 id="browser-static-dist--cdn" class="tsd-anchor-link">Browser / Static (dist + CDN)<a href="#browser-static-dist--cdn" 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></h3>
|
|
73
|
+
<p>To use <code>Lilact</code> in a webpage, first download the source code and extract it. The minified script itself is available in the <code>/dist</code> directory, and the documentation can be found in <code>/docs</code> and also in the source files.</p>
|
|
74
|
+
<p>It is also available via unpkg CDN and can be included in HTML like:</p>
|
|
75
|
+
<pre><code class="html"><span class="hl-7"><</span><span class="hl-8">script</span><span class="hl-9"> </span><span class="hl-10">src</span><span class="hl-9">=</span><span class="hl-11">"unpkg.com/lilact/dist/lilact.development.min.js"</span><span class="hl-7">></</span><span class="hl-8">script</span><span class="hl-7">></span>
|
|
76
|
+
</code><button type="button">Copy</button></pre>
|
|
77
|
+
|
|
55
78
|
<p>or</p>
|
|
56
|
-
<pre><code>
|
|
57
|
-
</code></pre>
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<p>
|
|
62
|
-
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<
|
|
70
|
-
<pre><code> <
|
|
71
|
-
|
|
72
|
-
<head>
|
|
73
|
-
<meta charset="utf-8"/>
|
|
74
|
-
<title>Lilact Demo</title>
|
|
75
|
-
<script src='./lilact.development.min.js' type="module"></script>
|
|
76
|
-
</head>
|
|
77
|
-
<body></body>
|
|
78
|
-
<script type='text/jsx'>
|
|
79
|
-
const { render } = Lilact;
|
|
79
|
+
<pre><code class="html"><span class="hl-7"><</span><span class="hl-8">script</span><span class="hl-9"> </span><span class="hl-10">src</span><span class="hl-9">=</span><span class="hl-11">"unpkg.com/lilact/dist/lilact.production.min.js"</span><span class="hl-7">></</span><span class="hl-8">script</span><span class="hl-7">></span>
|
|
80
|
+
</code><button type="button">Copy</button></pre>
|
|
81
|
+
|
|
82
|
+
<p>Note: the production version, like the official React API, doesn’t perform PropTypes checks, but you can access PropTypes using <code>Lilact.PropTypes</code>.</p>
|
|
83
|
+
<p>After loading, <code>Lilact</code> automatically scans the document for any script elements with <code>type='text/jsx'</code> and runs them. If the <code>src</code> attribute is present on the script, it will load the resource; if the script contains inner content, it will be executed.</p>
|
|
84
|
+
<p>This is not the only way to use it—inside Node projects you can use standard module imports and treat <code>Lilact</code> like a normal module.</p>
|
|
85
|
+
<p><code>Lilact</code> wraps browser events to mimic React events. This mimicry is not perfect on some edge cases (because the footprint was important), but it works well overall.</p>
|
|
86
|
+
<hr>
|
|
87
|
+
<h2 id="example" class="tsd-anchor-link">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
88
|
+
<h3 id="nodejs-example" class="tsd-anchor-link">Node.js example<a href="#nodejs-example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
89
|
+
<pre><code class="js"><span class="hl-12">import</span><span class="hl-1"> { </span><span class="hl-5">render</span><span class="hl-1"> } </span><span class="hl-12">from</span><span class="hl-1"> </span><span class="hl-2">"lilact"</span><span class="hl-1">;</span><br/><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-0">App</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-12">return</span><span class="hl-1"> </span><span class="hl-7"><</span><span class="hl-8">div</span><span class="hl-7">></span><span class="hl-1">Hello World</span><span class="hl-7"></</span><span class="hl-8">div</span><span class="hl-7">></span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-0">render</span><span class="hl-1">(</span><span class="hl-7"><</span><span class="hl-6">App</span><span class="hl-7">/></span><span class="hl-1">, </span><span class="hl-5">document</span><span class="hl-1">.</span><span class="hl-5">body</span><span class="hl-1">);</span>
|
|
90
|
+
</code><button type="button">Copy</button></pre>
|
|
91
|
+
|
|
92
|
+
<h3 id="outside-nodejs-eg-php-python-integration" class="tsd-anchor-link">Outside Node.js (e.g., PHP / Python integration)<a href="#outside-nodejs-eg-php-python-integration" 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></h3>
|
|
93
|
+
<pre><code class="html"><span class="hl-7"><!</span><span class="hl-8">DOCTYPE</span><span class="hl-1"> </span><span class="hl-10">html</span><span class="hl-7">></span><br/><span class="hl-7"><</span><span class="hl-8">html</span><span class="hl-7">></span><br/><span class="hl-7"><</span><span class="hl-8">head</span><span class="hl-7">></span><br/><span class="hl-1"> </span><span class="hl-7"><</span><span class="hl-8">meta</span><span class="hl-1"> </span><span class="hl-10">charset</span><span class="hl-1">=</span><span class="hl-11">"utf-8"</span><span class="hl-7">/></span><br/><span class="hl-1"> </span><span class="hl-7"><</span><span class="hl-8">title</span><span class="hl-7">></span><span class="hl-1">Lilact Demo</span><span class="hl-7"></</span><span class="hl-8">title</span><span class="hl-7">></span><br/><span class="hl-1"> </span><span class="hl-7"><</span><span class="hl-8">script</span><span class="hl-9"> </span><span class="hl-10">src</span><span class="hl-9">=</span><span class="hl-11">'./lilact.development.min.js'</span><span class="hl-9"> </span><span class="hl-10">type</span><span class="hl-9">=</span><span class="hl-11">"module"</span><span class="hl-7">></</span><span class="hl-8">script</span><span class="hl-7">></span><br/><span class="hl-7"></</span><span class="hl-8">head</span><span class="hl-7">></span><br/><span class="hl-7"><</span><span class="hl-8">body</span><span class="hl-7">></</span><span class="hl-8">body</span><span class="hl-7">></span><br/><span class="hl-7"><</span><span class="hl-8">script</span><span class="hl-9"> </span><span class="hl-10">type</span><span class="hl-9">=</span><span class="hl-11">'text/jsx'</span><span class="hl-7">></span><br/><span class="hl-9"> const { render } = Lilact;</span><br/><br/><span class="hl-9"> function App() {</span><br/><span class="hl-9"> return <div>Hello World</div>;</span><br/><span class="hl-9"> }</span><br/><span class="hl-9"> </span><br/><span class="hl-9"> render(<App/>, document.body);</span><br/><span class="hl-7"></</span><span class="hl-8">script</span><span class="hl-7">></span><br/><span class="hl-7"></</span><span class="hl-8">html</span><span class="hl-7">></span>
|
|
94
|
+
</code><button type="button">Copy</button></pre>
|
|
80
95
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
</html>
|
|
88
|
-
</code></pre>
|
|
89
|
-
<p>To know more about using <code>Lilact</code>, see the included example and for the details
|
|
90
|
-
see the class documentation. And of course don't forget to check the
|
|
91
|
-
<a href="./static/index.html">Lilact Demo Examples</a>.</p>
|
|
92
|
-
<p><code>Lilact</code> is currently in its beta state. It is under heavy tests and improvements are
|
|
93
|
-
being made. Please report any possible issues or bugs, they will be fixed
|
|
94
|
-
without any hesitation!</p>
|
|
96
|
+
<hr>
|
|
97
|
+
<h2 id="learn-more-demos--beta-status" class="tsd-anchor-link">Learn More / Demos / Beta Status<a href="#learn-more-demos--beta-status" 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></h2>
|
|
98
|
+
<p>To know more about using <code>Lilact</code>, see the included examples:<br>
|
|
99
|
+
<a href="arashkazemi.github.io/lilact/static">Lilact Demo Examples</a></p>
|
|
100
|
+
<p>For the details, see the documentation.</p>
|
|
101
|
+
<p><code>Lilact</code> is currently in its beta state. It is under heavy testing and improvements are being made. Please report any possible issues or bugs—They will be fixed without any hesitation!</p>
|
|
95
102
|
<hr>
|
|
96
103
|
<p>Copyright (C) 2024-2026 Arash Kazemi <a href="mailto:contact.arash.kazemi@gmail.com">contact.arash.kazemi@gmail.com</a>. All rights reserved.</p>
|
|
97
104
|
<p>Lilact project is subject to the terms of BSD-2-Clause License. See the <code>LICENSE.TXT</code> file for more details.</p>
|
|
98
|
-
<style>.tsd-page-title{display: none}</style></div></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"><a href="#lilact"><span>Lilact</span></a><ul><li><a href="#a-little-reactjsx-runtime-implementation-for-browser"><span>A <wbr/>Little <wbr/>React/<wbr/>JSX <wbr/>Runtime <wbr/>Implementation for <wbr/>Browser</span></a></li></ul></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>
|
|
105
|
+
<style>.tsd-page-title{display: none}</style></div></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"><a href="#lilact"><span>Lilact</span></a><ul><li><ul><li><a href="#a-little-reactjsx-runtime-implementation-for-the-browser"><span>A <wbr/>Little <wbr/>React/<wbr/>JSX <wbr/>Runtime <wbr/>Implementation for the <wbr/>Browser</span></a></li></ul></li><li><a href="#overview"><span>Overview</span></a></li><li><a href="#jsx-transpiler"><span>JSX <wbr/>Transpiler</span></a></li><li><a href="#react-apis-libraries-and-built-in-components"><span>React <wbr/>AP<wbr/>Is, <wbr/>Libraries, and <wbr/>Built-<wbr/>in <wbr/>Components</span></a></li><li><a href="#webpack-based-bundler"><span>Webpack-<wbr/>based <wbr/>Bundler</span></a></li><li><a href="#using-lilact-outside-nodejs-browser-script-tag-integration"><span>Using <wbr/>Lilact <wbr/>Outside <wbr/>Node.js (<wbr/>Browser / <wbr/>Script <wbr/>Tag <wbr/>Integration)</span></a></li><li><a href="#installation-and-delivery"><span>Installation and <wbr/>Delivery</span></a></li><li><ul><li><a href="#nodejs-npm"><span>Node.js (npm)</span></a></li><li><a href="#browser-static-dist--cdn"><span>Browser / <wbr/>Static (dist + <wbr/>CDN)</span></a></li></ul></li><li><a href="#example"><span>Example</span></a></li><li><ul><li><a href="#nodejs-example"><span>Node.js example</span></a></li><li><a href="#outside-nodejs-eg-php-python-integration"><span>Outside <wbr/>Node.js (e.g., <wbr/>PHP / <wbr/>Python integration)</span></a></li></ul></li><li><a href="#learn-more-demos--beta-status"><span>Learn <wbr/>More / <wbr/>Demos / <wbr/>Beta <wbr/>Status</span></a></li></ul></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>
|