lilact 0.16.0 → 0.16.2
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 +5 -5
- package/bin/bundle.cjs +19 -16
- package/bin/copy-demo.js +1 -1
- package/dist/lilact.development.js +115 -117
- package/dist/lilact.development.js.map +3 -3
- package/dist/lilact.development.min.js +19 -19
- package/dist/lilact.development.min.js.map +3 -3
- package/dist/lilact.production.min.js +19 -19
- package/docs/functions/accessories.DragHandle.html +2 -2
- package/docs/functions/timers.timeoutPromise.html +1 -1
- package/docs/index.html +4 -4
- package/docs/static/demos/pane.jsx +2 -1
- package/docs/static/index.html +1 -1
- package/docs/static/lilact.development.js +115 -117
- package/docs/static/lilact.development.js.map +3 -3
- package/docs/static/lilact.development.min.js +19 -19
- package/docs/static/lilact.development.min.js.map +3 -3
- package/docs/static/lilact.production.min.js +19 -19
- package/docs/variables/accessories.SplitPane.html +2 -2
- package/{root → examples}/demos/pane.jsx +2 -1
- package/{root → examples}/index.html +1 -1
- package/{root → examples}/lilact.development.js +115 -117
- package/{root → examples}/lilact.development.js.map +3 -3
- package/examples/lilact.development.min.js +107 -0
- package/{root → examples}/lilact.development.min.js.map +3 -3
- package/examples/lilact.production.min.js +106 -0
- package/package.json +3 -3
- package/scripts/build.mjs +29 -0
- package/scripts/copy-dist-to-examples.mjs +42 -0
- package/scripts/esbuild-preprocessor-plugin.cjs +29 -4
- package/scripts/preprocess.mjs +29 -1
- package/src/accessories.jsx +152 -161
- package/src/jsx.js +13 -15
- package/typedoc.json +1 -1
- package/root/lilact.development.min.js +0 -107
- package/root/lilact.production.min.js +0 -106
- package/scripts/copy-dist-to-root.mjs +0 -13
- /package/{root → examples}/demos/actionstate.jsx +0 -0
- /package/{root → examples}/demos/capture.jsx +0 -0
- /package/{root → examples}/demos/context.jsx +0 -0
- /package/{root → examples}/demos/css-transition.jsx +0 -0
- /package/{root → examples}/demos/error-boundary.jsx +0 -0
- /package/{root → examples}/demos/error-callback.jsx +0 -0
- /package/{root → examples}/demos/error-component-stack.jsx +0 -0
- /package/{root → examples}/demos/error-init.jsx +0 -0
- /package/{root → examples}/demos/error-parser.jsx +0 -0
- /package/{root → examples}/demos/form-elements.jsx +0 -0
- /package/{root → examples}/demos/forwardref.jsx +0 -0
- /package/{root → examples}/demos/lazy.jsx +0 -0
- /package/{root → examples}/demos/modal.jsx +0 -0
- /package/{root → examples}/demos/proptypes.jsx +0 -0
- /package/{root → examples}/demos/reducer.jsx +0 -0
- /package/{root → examples}/demos/redux.jsx +0 -0
- /package/{root → examples}/demos/router.jsx +0 -0
- /package/{root → examples}/demos/stopwatch.jsx +0 -0
- /package/{root → examples}/demos/suspense.jsx +0 -0
- /package/{root → examples}/demos/switch-transition.jsx +0 -0
- /package/{root → examples}/demos/transition.jsx +0 -0
- /package/{root → examples}/demos/usedefered.jsx +0 -0
- /package/{root → examples}/demos/usetransition.jsx +0 -0
- /package/{root → examples}/icon.png +0 -0
- /package/{root → examples}/prismjs/LICENSE.md +0 -0
- /package/{root → examples}/prismjs/prism-jsx.min.js +0 -0
- /package/{root → examples}/prismjs/prism.min.css +0 -0
- /package/{root → examples}/prismjs/prism.min.js +0 -0
|
@@ -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>DragHandle | 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/accessories.html">accessories</a></li><li><a href="" aria-current="page">DragHandle</a></li></ul><h1>Function DragHandle</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="draghandle"><span class="tsd-kind-call-signature">DragHandle</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">children</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>DragHandle | 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/accessories.html">accessories</a></li><li><a href="" aria-current="page">DragHandle</a></li></ul><h1>Function DragHandle</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="draghandle"><span class="tsd-kind-call-signature">DragHandle</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">children</span><span class="tsd-signature-symbol">?:</span> <a href="../classes/components.Component.html" class="tsd-signature-type tsd-kind-class">Component</a><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">className</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">data</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">onDelta</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">x</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">y</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">data</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-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEnd</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">event</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">"up"</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">"cancel"</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">data</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-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onStart</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">data</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-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">style</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">object</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="#draghandle" 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>DragHandle - helper component to wire up drag interactions.</p>
|
|
2
2
|
<p>This component does not implement dragging/movement itself. Instead, it
|
|
3
3
|
listens for drag gesture events and delegates them to the provided callbacks.</p>
|
|
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">children</span><span class="tsd-signature-symbol">?:</span> <
|
|
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">children</span><span class="tsd-signature-symbol">?:</span> <a href="../classes/components.Component.html" class="tsd-signature-type tsd-kind-class">Component</a><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">className</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">data</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">onDelta</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">x</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">y</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">data</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-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEnd</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">event</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">"up"</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">"cancel"</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">data</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-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onStart</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">data</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-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">style</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span></span><ul class="tsd-parameters"><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">?: </span><a href="../classes/components.Component.html" class="tsd-signature-type tsd-kind-class">Component</a></h5><div class="tsd-comment tsd-typography"><p>Content rendered inside the handle.</p>
|
|
5
5
|
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">className</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"><p>Optional CSS class applied to the wrapper element.
|
|
6
6
|
A <code>.dragging</code> class will be also applied when dragging.</p>
|
|
7
7
|
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">data</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">any</span></h5><div class="tsd-comment tsd-typography"><p>Arbitrary user data passed through callbacks.</p>
|
|
@@ -69,7 +69,7 @@ If provided, the component uses this value instead of internal state.</p>
|
|
|
69
69
|
</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-leftpanestyle">Param: leftPaneStyle<a href="#param-leftpanestyle" 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></h4><p>Optional styles applied to the left pane (or top pane in vertical mode).</p>
|
|
70
70
|
</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-rightpanestyle">Param: rightPaneStyle<a href="#param-rightpanestyle" 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></h4><p>Optional styles applied to the right pane (or bottom pane in vertical mode).</p>
|
|
71
71
|
</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-splitterstyle">Param: splitterStyle<a href="#param-splitterstyle" 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></h4><p>Optional styles applied to the splitter element.</p>
|
|
72
|
-
</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-children">Param: children<a href="#param-children" 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></h4><p>
|
|
72
|
+
</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-children">Param: children<a href="#param-children" 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></h4><p>Children to be rendered into the two pane containers.</p>
|
|
73
73
|
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">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></h4><pre><code class="tsx"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">ref</span><span class="hl-1"> = </span><span class="hl-0">useRef</span><span class="hl-1"><</span><span class="hl-6">SplitPaneHandle</span><span class="hl-1">>(</span><span class="hl-3">null</span><span class="hl-1">);</span><br/><br/><span class="hl-7"><</span><span class="hl-6">SplitPane</span><br/><span class="hl-1"> </span><span class="hl-10">ref</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-5">ref</span><span class="hl-3">}</span><br/><span class="hl-1"> </span><span class="hl-10">mode</span><span class="hl-1">=</span><span class="hl-2">"horizontal"</span><br/><span class="hl-1"> </span><span class="hl-10">defaultPosition</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-13">0.5</span><span class="hl-3">}</span><br/><span class="hl-1"> </span><span class="hl-10">min</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-13">0.1</span><span class="hl-3">}</span><br/><span class="hl-1"> </span><span class="hl-10">max</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-13">0.9</span><span class="hl-3">}</span><br/><span class="hl-1"> </span><span class="hl-10">onSizeChange</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-9">(</span><span class="hl-5">pos</span><span class="hl-9">) </span><span class="hl-3">=></span><span class="hl-9"> </span><span class="hl-5">console</span><span class="hl-9">.</span><span class="hl-0">log</span><span class="hl-9">(</span><span class="hl-5">pos</span><span class="hl-9">)</span><span class="hl-3">}</span><br/><span class="hl-7">></span><br/><span class="hl-1"> </span><span class="hl-7"><</span><span class="hl-8">div</span><span class="hl-1"> </span><span class="hl-7">/></span><span class="hl-1"> </span><span class="hl-7"><</span><span class="hl-8">div</span><span class="hl-1"> </span><span class="hl-7">/></span><br/><span class="hl-7"></</span><span class="hl-6">SplitPane</span><span class="hl-7">></span>
|
|
74
74
|
</code><button type="button">Copy</button></pre>
|
|
75
75
|
|
package/docs/index.html
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
<a href="https://github.com/sponsors/arashkazemi">Sponsor me on GitHub</a></p>
|
|
21
21
|
<hr>
|
|
22
22
|
<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>
|
|
23
|
-
<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>90kb</code> minified and around <code>32kb</code> gzipped
|
|
23
|
+
<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>90kb</code> minified and around <code>32kb</code> gzipped and includes its whole API.</p>
|
|
24
24
|
<p><code>Lilact</code> is very fast, uses minimal resources, and handles memory very efficiently.</p>
|
|
25
25
|
<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>
|
|
26
26
|
<hr>
|
|
@@ -54,11 +54,11 @@
|
|
|
54
54
|
<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>
|
|
55
55
|
<hr>
|
|
56
56
|
<h2 id="esbuild-based-bundler" class="tsd-anchor-link">ESBuild-based Bundler<a href="#esbuild-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>
|
|
57
|
-
<p>
|
|
58
|
-
<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>
|
|
57
|
+
<p>An <code>ESBuild</code> based bundler is available in the <code>bin</code> directory. It can be used like this:</p>
|
|
58
|
+
<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">--watch</span><span class="hl-1"> </span><span class="hl-3">--minify</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>
|
|
59
59
|
</code><button type="button">Copy</button></pre>
|
|
60
60
|
|
|
61
|
-
<p>If you add a <code>--watch</code> argument, the bundler will
|
|
61
|
+
<p>If you add a <code>--watch</code> argument, the bundler will stay running and keep watching the input file(s),
|
|
62
62
|
and update the bundle if any file is changed.</p>
|
|
63
63
|
<hr>
|
|
64
64
|
<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>
|
|
@@ -11,8 +11,9 @@ module.exports = function Demo() {
|
|
|
11
11
|
Toggle mode
|
|
12
12
|
</button>
|
|
13
13
|
<button onClick={() => ref.current?.setPosition(0.5)}>Center</button>
|
|
14
|
+
<span>Position:{" "}{position.toFixed(2)}</span>
|
|
14
15
|
|
|
15
|
-
<div style={{ height: "calc(100% -
|
|
16
|
+
<div style={{ height: "calc(100% - 4em)", width: "calc(100% - 1rem)", margin: "10px auto 0", border: "1px solid"}}>
|
|
16
17
|
<SplitPane
|
|
17
18
|
ref={ref}
|
|
18
19
|
mode={mode}
|
package/docs/static/index.html
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
6
|
|
|
7
7
|
<title>Lilact Examples</title>
|
|
8
|
-
<script src='./lilact.development.
|
|
8
|
+
<script src='./lilact.development.js' type="module"></script>
|
|
9
9
|
|
|
10
10
|
<script src="prismjs/prism.min.js"></script>
|
|
11
11
|
<script src="prismjs/prism-jsx.min.js"></script>
|
|
@@ -4697,14 +4697,9 @@ function DragHandle({
|
|
|
4697
4697
|
}, [endDrag]);
|
|
4698
4698
|
return createComponent("div", { "role": "button", "tabIndex": 0, "style": { ...style, touchAction: "none" }, "className": cx2(className, isDragging ? "dragging" : ""), "onPointerDown": onPointerDown, "onPointerMove": onPointerMove, "onPointerUp": onPointerUp, "onPointerCancel": onPointerCancel }, children);
|
|
4699
4699
|
}
|
|
4700
|
-
var clamp = (n, min, max) => {
|
|
4701
|
-
if (!Number.isFinite(n)) return n;
|
|
4702
|
-
return Math.min(max, Math.max(min, n));
|
|
4703
|
-
};
|
|
4704
4700
|
var SplitPane = forwardRef(function SplitPane2({
|
|
4705
4701
|
mode = "horizontal",
|
|
4706
4702
|
position: position2,
|
|
4707
|
-
// controlled: number | undefined/null
|
|
4708
4703
|
defaultPosition = 0.5,
|
|
4709
4704
|
min = 0.1,
|
|
4710
4705
|
max = 0.9,
|
|
@@ -4712,135 +4707,139 @@ var SplitPane = forwardRef(function SplitPane2({
|
|
|
4712
4707
|
onSizeChange,
|
|
4713
4708
|
style,
|
|
4714
4709
|
className,
|
|
4715
|
-
|
|
4716
|
-
|
|
4710
|
+
firstPaneStyle,
|
|
4711
|
+
secondPaneStyle,
|
|
4717
4712
|
splitterStyle,
|
|
4718
4713
|
children
|
|
4719
4714
|
}, ref) {
|
|
4720
|
-
|
|
4721
|
-
const
|
|
4722
|
-
const
|
|
4723
|
-
const
|
|
4724
|
-
const rightChild = (_b = panes[1]) != null ? _b : null;
|
|
4725
|
-
const isControlled = position2 != null;
|
|
4726
|
-
const [internalMode, setInternalMode] = useState(mode);
|
|
4727
|
-
const [posUncontrolled, setPosUncontrolled] = useState(
|
|
4728
|
-
() => clamp(
|
|
4729
|
-
position2 != null ? position2 : defaultPosition,
|
|
4730
|
-
min,
|
|
4731
|
-
max
|
|
4732
|
-
)
|
|
4733
|
-
);
|
|
4715
|
+
const initialMode = mode === "vertical" ? "vertical" : "horizontal";
|
|
4716
|
+
const [internalMode, setInternalMode] = useState(initialMode);
|
|
4717
|
+
const [internalPos, setInternalPos] = useState(clamp(defaultPosition, min, max));
|
|
4718
|
+
const posResolved = position2 == null ? internalPos : clamp(position2, min, max);
|
|
4734
4719
|
useEffect(() => {
|
|
4735
|
-
if (
|
|
4720
|
+
if (position2 == null) return;
|
|
4721
|
+
setInternalPos(clamp(position2, min, max));
|
|
4722
|
+
}, [position2, min, max]);
|
|
4723
|
+
useEffect(() => {
|
|
4724
|
+
setInternalMode(mode === "vertical" ? "vertical" : "horizontal");
|
|
4736
4725
|
}, [mode]);
|
|
4737
|
-
useLayoutEffect(() => {
|
|
4738
|
-
if (isControlled) return;
|
|
4739
|
-
setPosUncontrolled((p) => clamp(p, min, max));
|
|
4740
|
-
}, [min, max, isControlled]);
|
|
4741
|
-
const posResolved = isControlled ? clamp(position2, min, max) : posUncontrolled;
|
|
4742
4726
|
const setPosition = (next2) => {
|
|
4743
4727
|
const clamped = clamp(next2, min, max);
|
|
4744
|
-
if (
|
|
4728
|
+
if (position2 == null) setInternalPos(clamped);
|
|
4745
4729
|
onSizeChange == null ? void 0 : onSizeChange(clamped);
|
|
4746
4730
|
};
|
|
4747
|
-
|
|
4748
|
-
|
|
4749
|
-
|
|
4731
|
+
useImperativeHandle(ref, () => ({
|
|
4732
|
+
setPosition,
|
|
4733
|
+
setMode: (nextMode) => setInternalMode(nextMode === "vertical" ? "vertical" : "horizontal"),
|
|
4734
|
+
getPosition: () => posResolved,
|
|
4735
|
+
getMode: () => internalMode
|
|
4736
|
+
}));
|
|
4737
|
+
const containerRef = useRef(null);
|
|
4738
|
+
const sizeRef = useRef({ w: 0, h: 0 });
|
|
4739
|
+
useLayoutEffect(() => {
|
|
4750
4740
|
const el = containerRef.current;
|
|
4751
4741
|
if (!el) return;
|
|
4742
|
+
const ro = new ResizeObserver(() => {
|
|
4743
|
+
const rect2 = el.getBoundingClientRect();
|
|
4744
|
+
sizeRef.current = { w: rect2.width, h: rect2.height };
|
|
4745
|
+
});
|
|
4746
|
+
ro.observe(el);
|
|
4752
4747
|
const rect = el.getBoundingClientRect();
|
|
4748
|
+
sizeRef.current = { w: rect.width, h: rect.height };
|
|
4749
|
+
return () => ro.disconnect();
|
|
4750
|
+
}, []);
|
|
4751
|
+
const startPosRef = useRef(posResolved);
|
|
4752
|
+
const [dragging, setDragging] = useState(false);
|
|
4753
|
+
const handleStart = () => {
|
|
4754
|
+
setDragging(true);
|
|
4755
|
+
startPosRef.current = posResolved;
|
|
4756
|
+
};
|
|
4757
|
+
const handleDelta = (x, y, _data) => {
|
|
4758
|
+
const { w, h } = sizeRef.current;
|
|
4753
4759
|
if (internalMode === "horizontal") {
|
|
4754
|
-
|
|
4755
|
-
if (!Number.isFinite(usable) || usable <= 0) return;
|
|
4756
|
-
const raw = (clientX - rect.left) / usable;
|
|
4757
|
-
if (!Number.isFinite(raw)) return;
|
|
4758
|
-
setPosition(raw);
|
|
4760
|
+
setPosition(startPosRef.current + x / (w || 1));
|
|
4759
4761
|
} else {
|
|
4760
|
-
|
|
4761
|
-
if (!Number.isFinite(usable) || usable <= 0) return;
|
|
4762
|
-
const raw = (clientY - rect.top) / usable;
|
|
4763
|
-
if (!Number.isFinite(raw)) return;
|
|
4764
|
-
setPosition(raw);
|
|
4762
|
+
setPosition(startPosRef.current + y / (h || 1));
|
|
4765
4763
|
}
|
|
4766
4764
|
};
|
|
4767
|
-
|
|
4768
|
-
|
|
4769
|
-
|
|
4770
|
-
|
|
4771
|
-
|
|
4772
|
-
|
|
4773
|
-
|
|
4774
|
-
|
|
4775
|
-
|
|
4776
|
-
|
|
4777
|
-
|
|
4778
|
-
|
|
4779
|
-
|
|
4780
|
-
|
|
4781
|
-
|
|
4782
|
-
|
|
4783
|
-
|
|
4784
|
-
|
|
4785
|
-
|
|
4786
|
-
|
|
4787
|
-
|
|
4788
|
-
const onPointerDown = (e) => {
|
|
4789
|
-
var _a2, _b2;
|
|
4790
|
-
if (e.button != null && e.button !== 0) return;
|
|
4791
|
-
e.preventDefault();
|
|
4792
|
-
draggingRef.current = true;
|
|
4793
|
-
pointerIdRef.current = e.pointerId;
|
|
4794
|
-
try {
|
|
4795
|
-
(_b2 = (_a2 = e.currentTarget).setPointerCapture) == null ? void 0 : _b2.call(_a2, e.pointerId);
|
|
4796
|
-
} catch (e2) {
|
|
4797
|
-
}
|
|
4798
|
-
updateFromClient(e.clientX, e.clientY);
|
|
4765
|
+
const handleEnd = () => setDragging(false);
|
|
4766
|
+
const arr = Children.toArray(children);
|
|
4767
|
+
const firstChild = arr[0];
|
|
4768
|
+
const secondChild = arr[1];
|
|
4769
|
+
const p = posResolved;
|
|
4770
|
+
const pane1StyleAbs = internalMode === "horizontal" ? {
|
|
4771
|
+
position: "absolute",
|
|
4772
|
+
top: 0,
|
|
4773
|
+
bottom: 0,
|
|
4774
|
+
left: 0,
|
|
4775
|
+
width: `calc(${p} * (100% - ${splitterSize}px))`,
|
|
4776
|
+
overflow: "auto",
|
|
4777
|
+
...firstPaneStyle || {}
|
|
4778
|
+
} : {
|
|
4779
|
+
position: "absolute",
|
|
4780
|
+
left: 0,
|
|
4781
|
+
right: 0,
|
|
4782
|
+
top: 0,
|
|
4783
|
+
height: `calc(${p} * (100% - ${splitterSize}px))`,
|
|
4784
|
+
overflow: "auto",
|
|
4785
|
+
...firstPaneStyle || {}
|
|
4799
4786
|
};
|
|
4800
|
-
const
|
|
4801
|
-
|
|
4802
|
-
|
|
4803
|
-
|
|
4804
|
-
|
|
4805
|
-
|
|
4806
|
-
|
|
4807
|
-
|
|
4808
|
-
|
|
4809
|
-
|
|
4810
|
-
|
|
4811
|
-
|
|
4812
|
-
|
|
4813
|
-
|
|
4787
|
+
const pane2StyleAbs = internalMode === "horizontal" ? {
|
|
4788
|
+
position: "absolute",
|
|
4789
|
+
top: 0,
|
|
4790
|
+
bottom: 0,
|
|
4791
|
+
left: `calc(${p} * (100% - ${splitterSize}px) + ${splitterSize}px)`,
|
|
4792
|
+
right: 0,
|
|
4793
|
+
overflow: "auto",
|
|
4794
|
+
...secondPaneStyle || {}
|
|
4795
|
+
} : {
|
|
4796
|
+
position: "absolute",
|
|
4797
|
+
left: 0,
|
|
4798
|
+
right: 0,
|
|
4799
|
+
top: `calc(${p} * (100% - ${splitterSize}px) + ${splitterSize}px)`,
|
|
4800
|
+
bottom: 0,
|
|
4801
|
+
overflow: "auto",
|
|
4802
|
+
...secondPaneStyle || {}
|
|
4814
4803
|
};
|
|
4815
|
-
const
|
|
4816
|
-
|
|
4817
|
-
|
|
4818
|
-
|
|
4819
|
-
}
|
|
4820
|
-
const
|
|
4821
|
-
|
|
4822
|
-
|
|
4804
|
+
const splitterBase = {
|
|
4805
|
+
background: "rgba(0,0,0,0.08)",
|
|
4806
|
+
boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.15)",
|
|
4807
|
+
zIndex: 10
|
|
4808
|
+
};
|
|
4809
|
+
const splitterAbsStyle = internalMode === "horizontal" ? {
|
|
4810
|
+
position: "absolute",
|
|
4811
|
+
top: 0,
|
|
4812
|
+
bottom: 0,
|
|
4813
|
+
left: `calc(${p} * (100% - ${splitterSize}px))`,
|
|
4814
|
+
width: splitterSize,
|
|
4823
4815
|
height: "100%",
|
|
4824
|
-
|
|
4816
|
+
cursor: dragging ? "col-resize" : "col-resize",
|
|
4817
|
+
touchAction: "none",
|
|
4818
|
+
pointerEvents: "auto",
|
|
4819
|
+
...splitterBase,
|
|
4820
|
+
...splitterStyle || {}
|
|
4821
|
+
} : {
|
|
4822
|
+
position: "absolute",
|
|
4823
|
+
left: 0,
|
|
4824
|
+
right: 0,
|
|
4825
|
+
top: `calc(${p} * (100% - ${splitterSize}px))`,
|
|
4826
|
+
height: splitterSize,
|
|
4827
|
+
width: "100%",
|
|
4828
|
+
cursor: dragging ? "row-resize" : "row-resize",
|
|
4825
4829
|
touchAction: "none",
|
|
4826
|
-
|
|
4827
|
-
|
|
4830
|
+
pointerEvents: "auto",
|
|
4831
|
+
...splitterBase,
|
|
4832
|
+
...splitterStyle || {}
|
|
4828
4833
|
};
|
|
4829
|
-
|
|
4830
|
-
|
|
4831
|
-
|
|
4832
|
-
|
|
4833
|
-
|
|
4834
|
-
|
|
4835
|
-
|
|
4836
|
-
getPosition: () => posResolved,
|
|
4837
|
-
getMode: () => internalMode
|
|
4838
|
-
}));
|
|
4839
|
-
return createComponent("div", { "ref": containerRef, "className": className, "style": rootStyle }, createComponent("div", { "style": leftPaneComputed }, leftChild), createComponent("div", { "role": "separator", "aria-orientation": internalMode === "horizontal" ? "vertical" : "horizontal", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": posResolved, "tabIndex": 0, "onPointerDown": onPointerDown, "onPointerCancel": () => {
|
|
4840
|
-
draggingRef.current = false;
|
|
4841
|
-
pointerIdRef.current = null;
|
|
4842
|
-
}, "onKeyDown": onKeyDown, "style": splitterComputed }, createComponent("div", { "style": dividerVisualStyle })), createComponent("div", { "style": rightPaneComputed }, rightChild));
|
|
4834
|
+
return createComponent("div", { "ref": containerRef, "className": className, "style": {
|
|
4835
|
+
position: "relative",
|
|
4836
|
+
width: "100%",
|
|
4837
|
+
height: "100%",
|
|
4838
|
+
overflow: "hidden",
|
|
4839
|
+
...style || {}
|
|
4840
|
+
} }, createComponent("div", { "style": pane1StyleAbs }, firstChild), createComponent("div", { "style": pane2StyleAbs }, secondChild), createComponent(DragHandle, { "onStart": handleStart, "onDelta": handleDelta, "onEnd": handleEnd, "style": splitterAbsStyle }));
|
|
4843
4841
|
});
|
|
4842
|
+
var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
|
|
4844
4843
|
|
|
4845
4844
|
// .tmp/src/vlq.js
|
|
4846
4845
|
var char_to_integer = {};
|
|
@@ -5301,10 +5300,10 @@ function parseXML(code2, index2, container2, look_behind = false) {
|
|
|
5301
5300
|
if (res2[0] > index2) index2 = res2[0];
|
|
5302
5301
|
else index2++;
|
|
5303
5302
|
break;
|
|
5304
|
-
case ">":
|
|
5305
|
-
const
|
|
5306
|
-
if (
|
|
5307
|
-
if (
|
|
5303
|
+
case ">":
|
|
5304
|
+
const j = parseXMLContent(code2, index2, b2);
|
|
5305
|
+
if (j === null) return;
|
|
5306
|
+
if (j > index2) index2 = j;
|
|
5308
5307
|
else index2++;
|
|
5309
5308
|
if (b2.end) {
|
|
5310
5309
|
if (container2) container2.children.push(b2);
|
|
@@ -5313,7 +5312,6 @@ function parseXML(code2, index2, container2, look_behind = false) {
|
|
|
5313
5312
|
index2++;
|
|
5314
5313
|
}
|
|
5315
5314
|
break;
|
|
5316
|
-
}
|
|
5317
5315
|
case " ":
|
|
5318
5316
|
case " ":
|
|
5319
5317
|
case "\n":
|