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.
- package/README.md +4 -2
- package/dist/lilact.development.min.js +64 -0
- package/dist/lilact.development.min.js.LICENSE.txt +77 -0
- package/dist/lilact.development.min.js.map +1 -0
- package/dist/lilact.production.min.js +1 -1
- package/dist/lilact.production.min.js.map +1 -1
- package/docs/assets/navigation.js +1 -1
- package/docs/assets/search.js +1 -1
- package/docs/classes/accessories.ErrorBoundary.html +8 -8
- package/docs/classes/accessories.Suspense.html +7 -7
- package/docs/classes/components.Component.html +10 -10
- package/docs/classes/components.HTMLComponent.html +10 -10
- package/docs/classes/components.RootComponent.html +10 -10
- package/docs/functions/components.createComponent.html +1 -1
- package/docs/functions/components.createRoot.html +1 -1
- package/docs/functions/components.render.html +1 -1
- package/docs/functions/run.lazy.html +15 -0
- package/docs/functions/run.require.html +11 -11
- package/docs/functions/run.run.html +3 -5
- package/docs/functions/run.runScripts.html +1 -1
- package/docs/functions/run.traceError.html +1 -1
- package/docs/index.html +3 -2
- package/docs/modules/run.html +1 -1
- package/docs/static/demos/actionstate.jsx +1 -1
- package/docs/static/demos/context.jsx +1 -1
- package/docs/static/demos/css-transition.jsx +1 -1
- package/docs/static/demos/lazy.jsx +16 -0
- package/docs/static/demos/modal.jsx +1 -1
- package/docs/static/demos/proptypes.jsx +1 -1
- package/docs/static/demos/reducer.jsx +1 -1
- package/docs/static/demos/redux.jsx +1 -1
- package/docs/static/demos/router.jsx +1 -8
- package/docs/static/demos/stopwatch.jsx +1 -1
- package/docs/static/demos/suspense.jsx +1 -1
- package/{root/demos/use-differed.jsx → docs/static/demos/use-deffered.jsx} +1 -1
- package/docs/static/demos/usetransition.jsx +1 -1
- package/docs/static/index 2.html +95 -0
- package/docs/static/index.html +27 -29
- package/docs/static/lilact.development.min.js +64 -0
- package/docs/static/lilact.production.min.js +1 -1
- package/package.json +1 -2
- package/root/demos/actionstate.jsx +1 -1
- package/root/demos/context.jsx +1 -1
- package/root/demos/css-transition.jsx +1 -1
- package/root/demos/lazy.jsx +16 -0
- package/root/demos/modal.jsx +1 -1
- package/root/demos/proptypes.jsx +1 -1
- package/root/demos/reducer.jsx +1 -1
- package/root/demos/redux.jsx +1 -1
- package/root/demos/router.jsx +1 -8
- package/root/demos/stopwatch.jsx +1 -1
- package/root/demos/suspense.jsx +1 -1
- package/{docs/static/demos/use-differed.jsx → root/demos/use-deffered.jsx} +1 -1
- package/root/demos/usetransition.jsx +1 -1
- package/root/index 2.html +95 -0
- package/root/index.html +27 -29
- package/root/lilact.development.min.js +64 -0
- package/root/lilact.production.min.js +1 -1
- package/src/components.jsx +2 -1
- package/src/run.jsx +105 -43
- package/webpack.config.js +3 -13
- package/dist/lilact.development.js +0 -9344
- package/dist/lilact.development.js.map +0 -1
- package/docs/static/lilact.development.js +0 -9344
- 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> <script src="https://unpkg.com/lilact/dist/lilact.development.js"></script>
|
|
43
|
+
<pre><code> <script src="https://unpkg.com/lilact/dist/lilact.development.min.js"></script>
|
|
43
44
|
</code></pre>
|
|
44
45
|
<p>or</p>
|
|
45
46
|
<pre><code> <script src="https://unpkg.com/lilact/dist/lilact.production.min.js"></script>
|
|
@@ -61,7 +62,7 @@ the footprint was very important, but it works fine.</p>
|
|
|
61
62
|
<head>
|
|
62
63
|
<meta charset="utf-8"/>
|
|
63
64
|
<title>Lilact Demo</title>
|
|
64
|
-
<script src='./lilact.development.js' type="module"></script>
|
|
65
|
+
<script src='./lilact.development.min.js' type="module"></script>
|
|
65
66
|
</head>
|
|
66
67
|
<body></body>
|
|
67
68
|
<script type='text/jsx'>
|
package/docs/modules/run.html
CHANGED
|
@@ -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>
|
|
@@ -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;
|
|
@@ -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>
|
package/docs/static/index.html
CHANGED
|
@@ -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-
|
|
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
|
|
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
|
|