lilact 0.0.0 → 0.1.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 (65) hide show
  1. package/README.md +4 -2
  2. package/dist/lilact.development.min.js +64 -0
  3. package/dist/lilact.development.min.js.LICENSE.txt +77 -0
  4. package/dist/lilact.development.min.js.map +1 -0
  5. package/dist/lilact.production.min.js +1 -1
  6. package/dist/lilact.production.min.js.map +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 +10 -10
  12. package/docs/classes/components.HTMLComponent.html +10 -10
  13. package/docs/classes/components.RootComponent.html +10 -10
  14. package/docs/functions/components.createComponent.html +1 -1
  15. package/docs/functions/components.createRoot.html +1 -1
  16. package/docs/functions/components.render.html +1 -1
  17. package/docs/functions/run.lazy.html +15 -0
  18. package/docs/functions/run.require.html +11 -11
  19. package/docs/functions/run.run.html +3 -5
  20. package/docs/functions/run.runScripts.html +1 -1
  21. package/docs/functions/run.traceError.html +1 -1
  22. package/docs/index.html +3 -2
  23. package/docs/modules/run.html +1 -1
  24. package/docs/static/demos/actionstate.jsx +1 -1
  25. package/docs/static/demos/context.jsx +1 -1
  26. package/docs/static/demos/css-transition.jsx +1 -1
  27. package/docs/static/demos/lazy.jsx +16 -0
  28. package/docs/static/demos/modal.jsx +1 -1
  29. package/docs/static/demos/proptypes.jsx +1 -1
  30. package/docs/static/demos/reducer.jsx +1 -1
  31. package/docs/static/demos/redux.jsx +1 -1
  32. package/docs/static/demos/router.jsx +1 -8
  33. package/docs/static/demos/stopwatch.jsx +1 -1
  34. package/docs/static/demos/suspense.jsx +1 -1
  35. package/{root/demos/use-differed.jsx → docs/static/demos/use-deffered.jsx} +1 -1
  36. package/docs/static/demos/usetransition.jsx +1 -1
  37. package/docs/static/index 2.html +95 -0
  38. package/docs/static/index.html +27 -29
  39. package/docs/static/lilact.development.min.js +64 -0
  40. package/docs/static/lilact.production.min.js +1 -1
  41. package/package.json +1 -2
  42. package/root/demos/actionstate.jsx +1 -1
  43. package/root/demos/context.jsx +1 -1
  44. package/root/demos/css-transition.jsx +1 -1
  45. package/root/demos/lazy.jsx +16 -0
  46. package/root/demos/modal.jsx +1 -1
  47. package/root/demos/proptypes.jsx +1 -1
  48. package/root/demos/reducer.jsx +1 -1
  49. package/root/demos/redux.jsx +1 -1
  50. package/root/demos/router.jsx +1 -8
  51. package/root/demos/stopwatch.jsx +1 -1
  52. package/root/demos/suspense.jsx +1 -1
  53. package/{docs/static/demos/use-differed.jsx → root/demos/use-deffered.jsx} +1 -1
  54. package/root/demos/usetransition.jsx +1 -1
  55. package/root/index 2.html +95 -0
  56. package/root/index.html +27 -29
  57. package/root/lilact.development.min.js +64 -0
  58. package/root/lilact.production.min.js +1 -1
  59. package/src/components.jsx +2 -1
  60. package/src/run.jsx +105 -43
  61. package/webpack.config.js +3 -13
  62. package/dist/lilact.development.js +0 -9344
  63. package/dist/lilact.development.js.map +0 -1
  64. package/docs/static/lilact.development.js +0 -9344
  65. package/root/lilact.development.js +0 -9344
package/docs/index.html CHANGED
@@ -1,6 +1,7 @@
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="200" style="margin-left: -.75rem"/>
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
3
  <h3 id="a-little-jsxreact-runtime-implementation-for-browser" class="tsd-anchor-link">A Little JSX/React Runtime Implementation for Browser<a href="#a-little-jsxreact-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="https://arashkazemi.github.io/lilact/">Docs on GitHub Pages</a> - <a href="https://arashkazemi.github.io/lilact/static">Demos on GitHub Pages</a></p>
4
5
  <p><code>Lilact</code> is an extremely lightweight implementation of the React API that is
5
6
  designed to work in the browser. It can be used as a single script
6
7
  that is around <code>70kb</code> minified and around <code>25kb</code> gzipped and includes everything.
@@ -39,7 +40,7 @@ convention</p>
39
40
  <pre><code> npm install lilact
40
41
  </code></pre>
41
42
  <p>It is also available via unpkg CDN and can be included in HTML files using</p>
42
- <pre><code> &lt;script src=&quot;https://unpkg.com/lilact/dist/lilact.development.js&quot;&gt;&lt;/script&gt;
43
+ <pre><code> &lt;script src=&quot;https://unpkg.com/lilact/dist/lilact.development.min.js&quot;&gt;&lt;/script&gt;
43
44
  </code></pre>
44
45
  <p>or</p>
45
46
  <pre><code> &lt;script src=&quot;https://unpkg.com/lilact/dist/lilact.production.min.js&quot;&gt;&lt;/script&gt;
@@ -61,7 +62,7 @@ the footprint was very important, but it works fine.</p>
61
62
  &lt;head&gt;
62
63
  &lt;meta charset=&quot;utf-8&quot;/&gt;
63
64
  &lt;title&gt;Lilact Demo&lt;/title&gt;
64
- &lt;script src='./lilact.development.js' type=&quot;module&quot;&gt;&lt;/script&gt;
65
+ &lt;script src='./lilact.development.min.js' type=&quot;module&quot;&gt;&lt;/script&gt;
65
66
  &lt;/head&gt;
66
67
  &lt;body&gt;&lt;/body&gt;
67
68
  &lt;script type='text/jsx'&gt;
@@ -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>run | 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">run</a></li></ul><h1>Module run</h1></div><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Functions</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="require"><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/run.require.html">require</a><a href="#require" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="run"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/run.run.html">run</a><a href="#run" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="runscripts"><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/run.runScripts.html">runScripts</a><a href="#runscripts" 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="traceerror"><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/run.traceError.html">traceError</a><a href="#traceerror" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd></dl></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Functions</summary><div><a href="#require"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>require</span></a><a href="#run"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>run</span></a><a href="#runscripts"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>run<wbr/>Scripts</span></a><a href="#traceerror"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>trace<wbr/>Error</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>run | 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">run</a></li></ul><h1>Module run</h1></div><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Functions</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="lazy"><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/run.lazy.html">lazy</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></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="require"><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/run.require.html">require</a><a href="#require" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="run"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/run.run.html">run</a><a href="#run" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="runscripts"><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/run.runScripts.html">runScripts</a><a href="#runscripts" 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="traceerror"><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/run.traceError.html">traceError</a><a href="#traceerror" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd></dl></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Functions</summary><div><a href="#lazy"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>lazy</span></a><a href="#require"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>require</span></a><a href="#run"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>run</span></a><a href="#runscripts"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>run<wbr/>Scripts</span></a><a href="#traceerror"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>trace<wbr/>Error</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,4 +1,4 @@
1
- const { useActionState, useState, render } = Lilact;
1
+ const { useActionState } = Lilact;
2
2
 
3
3
  async function addToCart(prevState, queryData) {
4
4
 
@@ -1,4 +1,4 @@
1
- const { createContext, useContext, useState, render } = Lilact;
1
+ const { createContext, useContext, useState } = Lilact;
2
2
  const { css, cx } = Lilact.emotion;
3
3
 
4
4
  const ThemeContext = createContext(null);
@@ -1,4 +1,4 @@
1
- const { Transition, CSSTransition, render, useState, useRef } = Lilact;
1
+ const { CSSTransition, useState, useRef } = Lilact;
2
2
 
3
3
 
4
4
  Lilact.emotion.injectGlobal(`
@@ -0,0 +1,16 @@
1
+ const {Suspense, Spinner, lazy, require} = Lilact;
2
+
3
+ const StopWatch = lazy( ()=>require('demos/stopwatch.jsx') );
4
+
5
+ function Demo({file})
6
+ {
7
+ return <>
8
+ <div>
9
+ <Suspense minDelay="0" fallback={<Spinner/>}>
10
+ <StopWatch/>
11
+ </Suspense>
12
+ </div>
13
+ </>
14
+ }
15
+
16
+ module.exports = Demo;
@@ -1,4 +1,4 @@
1
- const { useEffect, useRef, useState, render } = Lilact;
1
+ const { useEffect, useRef, useState } = Lilact;
2
2
 
3
3
  function ModalDialog({ isOpen, children }) {
4
4
  const ref = useRef();
@@ -1,4 +1,4 @@
1
- const { PropTypes, createRoot } = Lilact;
1
+ const { PropTypes } = Lilact;
2
2
 
3
3
  function UserCard({ name, age, tags, onClick }) {
4
4
  return (
@@ -1,4 +1,4 @@
1
- const { useReducer, render } = Lilact;
1
+ const { useReducer } = Lilact;
2
2
 
3
3
  function createInitialState(username) {
4
4
  const initialTodos = [];
@@ -1,4 +1,4 @@
1
- const { Provider, useSelector, useDispatch, connect, render } = Lilact;
1
+ const { Provider, useSelector, useDispatch, connect } = Lilact;
2
2
  const { createStore } = Lilact.redux;
3
3
 
4
4
  // Reducer + store
@@ -1,11 +1,4 @@
1
- const { createRoot,HashRouter,
2
- NavLink,
3
- Routes,
4
- Route,
5
- useNavigate,
6
- useLocation,
7
- useState
8
- } = Lilact;
1
+ const { HashRouter, NavLink, Routes, Route, useNavigate, useLocation } = Lilact;
9
2
 
10
3
  /* Simple pages */
11
4
  function Home() {
@@ -1,4 +1,4 @@
1
- const { useState, useRef, render } = Lilact;
1
+ const { useState, useRef } = Lilact;
2
2
 
3
3
  function Demo()
4
4
  {
@@ -1,4 +1,4 @@
1
- const {Suspense, Spinner} = Lilact;
1
+ const { Suspense, Spinner } = Lilact;
2
2
 
3
3
  // resource factory that throws its internal promise until resolved
4
4
  function createResource(delay, value) {
@@ -1,4 +1,4 @@
1
- const { useState, useDeferredValue, render } = Lilact;
1
+ const { useState, useDeferredValue } = Lilact;
2
2
 
3
3
  function ExpensiveList({ query }) {
4
4
  const items = Array.from({ length: 5000 }, (_, i) => `${query} item ${i}`);
@@ -1,4 +1,4 @@
1
- const { useTransition, useState, useCallback, useId, render } = Lilact;
1
+ const { useTransition, useState, useCallback, useId } = Lilact;
2
2
  const { css, cx } = Lilact.emotion;
3
3
 
4
4
  const Demo = ()=>{
@@ -0,0 +1,95 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8"/>
5
+ <title>Lilact Demo</title>
6
+ <script src='./lilact.development.min.js' type="module"></script>
7
+
8
+ <script src="prismjs/prism.min.js"></script>
9
+ <script src="prismjs/prism-jsx.min.js"></script>
10
+ <link rel="stylesheet" href="prismjs/prism.min.css">
11
+
12
+ </head>
13
+
14
+ <body></body>
15
+
16
+ <script type='text/jsx'>
17
+
18
+ const { useRef, useEffect, useState, Suspense, Spinner, run, render, lazy, require } = Lilact;
19
+ const { css,cx,injectGlobal } = Lilact.emotion;
20
+
21
+
22
+
23
+ injectGlobal({"*:not(code):not(code *)" : {fontFamily: "Ubuntu, 'Segoe UI', 'Noto Sans', helvetica, sans", fontSize: "14px"}});
24
+
25
+
26
+ injectGlobal({ code: { whiteSpace: "pre !important",
27
+ padding: "10px 0",
28
+ fontSize: "14px !important",
29
+ display: "block",
30
+ overflowWrap: "anywhere" }
31
+ });
32
+
33
+ const outer = css({
34
+ display: "flex",
35
+ flexDirection: "row",
36
+ gap: 2,
37
+ alignItems: "stretch",
38
+ width: "100%",
39
+ });
40
+
41
+ const collapsible = css({
42
+ width: "100%",
43
+ display: "block",
44
+ fontSize: "16px",
45
+ border: "1px solid #888",
46
+ padding: "5px"
47
+ });
48
+
49
+ const responsiveOuter = css({
50
+ "@media (max-width: 600px)": {
51
+ flexDirection: "column",
52
+ },
53
+ });
54
+
55
+ const pane = css({ flex: "1 1 0",
56
+ border: "1px solid",
57
+ height: "400px",
58
+ minHeight: "400px",
59
+ overflowY: "auto",
60
+ padding: "10px"
61
+ });
62
+
63
+ const left = css({ float: "left" });
64
+ const right = css({ float: "right" });
65
+
66
+
67
+
68
+ const Mod = lazy( ()=>require('demos/stopwatch.jsx') );
69
+
70
+ function DemoBlock({file})
71
+ {
72
+ return <>
73
+ <div>
74
+ <Suspense fallback={<Spinner/>}>
75
+ <Mod/>
76
+ </Suspense>
77
+ </div>
78
+ </>
79
+ ;
80
+ }
81
+
82
+
83
+ function App()
84
+ {
85
+
86
+ return <>
87
+ <DemoBlock/>
88
+ </>
89
+ }
90
+
91
+ render(<App/>, document.body);
92
+
93
+ </script>
94
+
95
+ </html>
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="utf-8"/>
5
5
  <title>Lilact Demo</title>
6
- <script src='./lilact.development.js' type="module"></script>
6
+ <script src='./lilact.development.min.js' type="module"></script>
7
7
 
8
8
  <script src="prismjs/prism.min.js"></script>
9
9
  <script src="prismjs/prism-jsx.min.js"></script>
@@ -68,15 +68,6 @@ injectGlobal({ code: { whiteSpace: "pre !important",
68
68
  overflowWrap: "anywhere" }
69
69
  });
70
70
 
71
-
72
- injectGlobal({ code: { whiteSpace: "pre !important",
73
- padding: "10px 0",
74
- fontSize: "14px !important",
75
- display: "block",
76
- overflowWrap: "anywhere" }
77
- });
78
-
79
-
80
71
  const outer = css({
81
72
  display: "flex",
82
73
  flexDirection: "row",
@@ -88,7 +79,9 @@ const outer = css({
88
79
  const collapsible = css({
89
80
  width: "100%",
90
81
  display: "block",
91
- fontSize: "16px"
82
+ fontSize: "16px",
83
+ border: "1px solid #888",
84
+ padding: "5px"
92
85
  });
93
86
 
94
87
  const responsiveOuter = css({
@@ -105,6 +98,9 @@ const pane = css({ flex: "1 1 0",
105
98
  padding: "10px"
106
99
  });
107
100
 
101
+ const left = css({ float: "left" });
102
+ const right = css({ float: "right" });
103
+
108
104
 
109
105
 
110
106
  function DemoView({ file })
@@ -114,7 +110,7 @@ function DemoView({ file })
114
110
  const viewRef = useRef();
115
111
  const codeRef = useRef();
116
112
 
117
- const resource = createResource("./demos/"+file);
113
+ const resource = createResource("./demos/"+file[0]);
118
114
  const code = resource.read(); // Suspense will handle the promise
119
115
 
120
116
  if(isOpen) {
@@ -130,13 +126,14 @@ function DemoView({ file })
130
126
 
131
127
  return <>
132
128
  <button onClick={()=>setOpen(!isOpen)} className={collapsible}>
133
- {(isOpen?'- ':'+ ')+file}
129
+ <span className={left}>{ (isOpen?'- ':'+ ') + file[0] + ' '}</span>
130
+ <b className={right}>{file[1]}</b>
134
131
  </button>
135
132
  {isOpen &&
136
133
  <div style={{width:"100%"}}>
137
134
  <div className={cx(responsiveOuter,outer)}>
138
135
  <div className={pane} style={{background:"#f5f2f0"}}>
139
- <code className="language-jsx" ref={codeRef}>{code}</code>
136
+ <code className="language-jsx code_style" ref={codeRef}>{code}</code>
140
137
  </div>
141
138
  <div className={pane} ref={viewRef}></div>
142
139
  </div>
@@ -162,26 +159,27 @@ function DemoBlock({file})
162
159
  function App()
163
160
  {
164
161
  const demos =[
165
- 'stopwatch.jsx',
166
- 'modal.jsx',
167
- 'actionstate.jsx',
168
- 'context.jsx',
169
- 'proptypes.jsx',
170
- 'router.jsx',
171
- 'use-differed.jsx',
172
- 'boundary.jsx',
173
- 'css-transition.jsx',
174
- 'reducer.jsx',
175
- 'usetransition.jsx',
176
- 'redux.jsx',
177
- 'suspense.jsx',
178
- 'transition.jsx'
162
+ ['stopwatch.jsx', '( useState, useRef )'],
163
+ ['modal.jsx', '( useEffect, useRef, useState )'],
164
+ ['actionstate.jsx', '( useActionState, useState )'],
165
+ ['context.jsx', '( createContext, useContext, useState ), emotion:( css, cx )'],
166
+ ['proptypes.jsx', '( PropTypes )'],
167
+ ['router.jsx', '( HashRouter, NavLink, Routes, Route, useNavigate, useLocation )'],
168
+ ['use-deffered.jsx', '( useState, useDeferredValue )'],
169
+ ['boundary.jsx', '( ErrorBoundary, useState )'],
170
+ ['css-transition.jsx', '( CSSTransition, useState, useRef )'],
171
+ ['reducer.jsx', '( useReducer )'],
172
+ ['usetransition.jsx', '( useTransition, useState, useCallback, useId ), emotion:( css, cx )'],
173
+ ['redux.jsx', '( Provider, useSelector, useDispatch, connect ), redux:( createStore )'],
174
+ ['suspense.jsx', '( Suspense, Spinner )'],
175
+ ['transition.jsx', '( useState, Transition )'],
176
+ ['lazy.jsx', '( lazy, require, Suspene, Spinner )']
179
177
  ];
180
178
 
181
179
  return <>
182
180
  <h3>Lilact Demos</h3>
183
181
 
184
- <p>These scripts are transpiled and run directly in your browser. You have already loaded the complete Lilact toolchain!</p>
182
+ <p>These scripts are transpiled and run directly in your browser. You have already loaded Lilact completely!</p>
185
183
 
186
184
  <p>These examples are not meant to be pretty.
187
185