lilact 0.8.1 → 0.8.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 +12 -10
- package/docs/index.html +11 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,11 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
### A Little React/JSX Runtime Implementation for the Browser
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
[Docs on GitHub Pages](https://arashkazemi.github.io/lilact/) — [Demos on GitHub Pages](https://arashkazemi.github.io/lilact/static)
|
|
8
10
|
|
|
9
|
-
[Lilact repo on GitHub](github.
|
|
11
|
+
[Lilact repo on GitHub](https://arashkazemi.github.io/lilact) — [Lilact on npm](https://www.npmjs.com/package/lilact)
|
|
10
12
|
|
|
11
|
-
[Lilact/Node/Express Demo Project](github.
|
|
13
|
+
[Lilact/Node/Express Demo Project](https://arashkazemi.github.io/lilact-express) — [Lilact/PHP Demo Project](https://arashkazemi.github.io/lilact-php-demo) — [Lilact/Python Demo Project](https://arashkazemi.github.io/lilact-python-demo)
|
|
12
14
|
|
|
13
15
|
---
|
|
14
16
|
|
|
@@ -78,7 +80,7 @@ npx lilact-bundle --entry client/App.jsx --mode production --name bundle.js --ou
|
|
|
78
80
|
|
|
79
81
|
## Using Lilact Outside Node.js (Browser / Script Tag Integration)
|
|
80
82
|
|
|
81
|
-
|
|
83
|
+
`Lilact` runs in the browser, so if you use `Lilact` outside Node, it uses `eval` to run the transpiled scripts, so it cannot use `import`/`export` the same way as a module.
|
|
82
84
|
|
|
83
85
|
Import the functions using this convention:
|
|
84
86
|
|
|
@@ -95,13 +97,13 @@ module.exports = ...
|
|
|
95
97
|
Bundled projects can also be used statically on other backends. However, bundling is not required: JSX files can be served and transpiled live.
|
|
96
98
|
|
|
97
99
|
A complete example of a `Lilact` project with an `express` request handler is available at:
|
|
98
|
-
[lilact-express](github.
|
|
100
|
+
[lilact-express](https://arashkazemi.github.io/lilact-express)
|
|
99
101
|
|
|
100
102
|
An example using it with a PHP/MySQL data store is available at:
|
|
101
|
-
[lilact-php-demo](github.
|
|
103
|
+
[lilact-php-demo](https://arashkazemi.github.io/lilact-php-demo)
|
|
102
104
|
|
|
103
105
|
An example using it with a Python/SQLite data store is available at:
|
|
104
|
-
[lilact-python-demo](github.
|
|
106
|
+
[lilact-python-demo](https://arashkazemi.github.io/lilact-python-demo)
|
|
105
107
|
|
|
106
108
|
---
|
|
107
109
|
|
|
@@ -120,13 +122,13 @@ To use `Lilact` in a webpage, first download the source code and extract it. The
|
|
|
120
122
|
It is also available via unpkg CDN and can be included in HTML like:
|
|
121
123
|
|
|
122
124
|
```html
|
|
123
|
-
<script src="unpkg.com/lilact/dist/lilact.development.min.js"></script>
|
|
125
|
+
<script src="https://unpkg.com/lilact/dist/lilact.development.min.js"></script>
|
|
124
126
|
```
|
|
125
127
|
|
|
126
128
|
or
|
|
127
129
|
|
|
128
130
|
```html
|
|
129
|
-
<script src="unpkg.com/lilact/dist/lilact.production.min.js"></script>
|
|
131
|
+
<script src="https://unpkg.com/lilact/dist/lilact.production.min.js"></script>
|
|
130
132
|
```
|
|
131
133
|
|
|
132
134
|
Note: the production version, like the official React API, doesn’t perform PropTypes checks, but you can access PropTypes using `Lilact.PropTypes`.
|
|
@@ -181,7 +183,7 @@ render(<App/>, document.body);
|
|
|
181
183
|
## Learn More / Demos / Beta Status
|
|
182
184
|
|
|
183
185
|
To know more about using `Lilact`, see the included examples:
|
|
184
|
-
[Lilact Demo Examples](arashkazemi.github.io/lilact/static)
|
|
186
|
+
[Lilact Demo Examples](https://arashkazemi.github.io/lilact/static)
|
|
185
187
|
|
|
186
188
|
For the details, see the documentation.
|
|
187
189
|
|
package/docs/index.html
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
<!DOCTYPE html><html class="default" lang="en" data-base="./"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script><script async src="assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>Lilact</h1></div><div class="tsd-panel tsd-typography"><img src="media/icon.png" alt="Description" width="128" style="margin-left: -.76rem"/>
|
|
2
2
|
<h1 id="lilact" class="tsd-anchor-link">Lilact<a href="#lilact" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1>
|
|
3
3
|
<h3 id="a-little-reactjsx-runtime-implementation-for-the-browser" class="tsd-anchor-link">A Little React/JSX Runtime Implementation for the Browser<a href="#a-little-reactjsx-runtime-implementation-for-the-browser" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
4
|
-
<
|
|
5
|
-
<p><a href="github.
|
|
6
|
-
<p><a href="github.
|
|
4
|
+
<hr>
|
|
5
|
+
<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>
|
|
6
|
+
<p><a href="https://arashkazemi.github.io/lilact">Lilact repo on GitHub</a> — <a href="https://www.npmjs.com/package/lilact">Lilact on npm</a></p>
|
|
7
|
+
<p><a href="https://arashkazemi.github.io/lilact-express">Lilact/Node/Express Demo Project</a> — <a href="https://arashkazemi.github.io/lilact-php-demo">Lilact/PHP Demo Project</a> — <a href="https://arashkazemi.github.io/lilact-python-demo">Lilact/Python Demo Project</a></p>
|
|
7
8
|
<hr>
|
|
8
9
|
<p>If you find Lilact useful, please consider sponsoring. Your support funds ongoing maintenance, performance improvements, and new features.<br>
|
|
9
10
|
<a href="github.com/sponsors/arashkazemi">Sponsor me on GitHub</a></p>
|
|
@@ -46,7 +47,7 @@
|
|
|
46
47
|
|
|
47
48
|
<hr>
|
|
48
49
|
<h2 id="using-lilact-outside-nodejs-browser-script-tag-integration" class="tsd-anchor-link">Using Lilact Outside Node.js (Browser / Script Tag Integration)<a href="#using-lilact-outside-nodejs-browser-script-tag-integration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
49
|
-
<p
|
|
50
|
+
<p><code>Lilact</code> runs in the browser, so if you use <code>Lilact</code> outside Node, it uses <code>eval</code> to run the transpiled scripts, so it cannot use <code>import</code>/<code>export</code> the same way as a module.</p>
|
|
50
51
|
<p>Import the functions using this convention:</p>
|
|
51
52
|
<pre><code class="js"><span class="hl-3">const</span><span class="hl-1"> { </span><span class="hl-4">useState</span><span class="hl-1">, </span><span class="hl-4">useRef</span><span class="hl-1">, </span><span class="hl-4">render</span><span class="hl-1"> } = </span><span class="hl-5">Lilact</span><span class="hl-1">;</span>
|
|
52
53
|
</code><button type="button">Copy</button></pre>
|
|
@@ -57,11 +58,11 @@
|
|
|
57
58
|
|
|
58
59
|
<p>Bundled projects can also be used statically on other backends. However, bundling is not required: JSX files can be served and transpiled live.</p>
|
|
59
60
|
<p>A complete example of a <code>Lilact</code> project with an <code>express</code> request handler is available at:<br>
|
|
60
|
-
<a href="github.
|
|
61
|
+
<a href="https://arashkazemi.github.io/lilact-express">lilact-express</a></p>
|
|
61
62
|
<p>An example using it with a PHP/MySQL data store is available at:<br>
|
|
62
|
-
<a href="github.
|
|
63
|
+
<a href="https://arashkazemi.github.io/lilact-php-demo">lilact-php-demo</a></p>
|
|
63
64
|
<p>An example using it with a Python/SQLite data store is available at:<br>
|
|
64
|
-
<a href="github.
|
|
65
|
+
<a href="https://arashkazemi.github.io/lilact-python-demo">lilact-python-demo</a></p>
|
|
65
66
|
<hr>
|
|
66
67
|
<h2 id="installation-and-delivery" class="tsd-anchor-link">Installation and Delivery<a href="#installation-and-delivery" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
67
68
|
<h3 id="nodejs-npm" class="tsd-anchor-link">Node.js (npm)<a href="#nodejs-npm" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
@@ -72,11 +73,11 @@
|
|
|
72
73
|
<h3 id="browser-static-dist--cdn" class="tsd-anchor-link">Browser / Static (dist + CDN)<a href="#browser-static-dist--cdn" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
73
74
|
<p>To use <code>Lilact</code> in a webpage, first download the source code and extract it. The minified script itself is available in the <code>/dist</code> directory, and the documentation can be found in <code>/docs</code> and also in the source files.</p>
|
|
74
75
|
<p>It is also available via unpkg CDN and can be included in HTML like:</p>
|
|
75
|
-
<pre><code class="html"><span class="hl-7"><</span><span class="hl-8">script</span><span class="hl-9"> </span><span class="hl-10">src</span><span class="hl-9">=</span><span class="hl-11">"unpkg.com/lilact/dist/lilact.development.min.js"</span><span class="hl-7">></</span><span class="hl-8">script</span><span class="hl-7">></span>
|
|
76
|
+
<pre><code class="html"><span class="hl-7"><</span><span class="hl-8">script</span><span class="hl-9"> </span><span class="hl-10">src</span><span class="hl-9">=</span><span class="hl-11">"https://unpkg.com/lilact/dist/lilact.development.min.js"</span><span class="hl-7">></</span><span class="hl-8">script</span><span class="hl-7">></span>
|
|
76
77
|
</code><button type="button">Copy</button></pre>
|
|
77
78
|
|
|
78
79
|
<p>or</p>
|
|
79
|
-
<pre><code class="html"><span class="hl-7"><</span><span class="hl-8">script</span><span class="hl-9"> </span><span class="hl-10">src</span><span class="hl-9">=</span><span class="hl-11">"unpkg.com/lilact/dist/lilact.production.min.js"</span><span class="hl-7">></</span><span class="hl-8">script</span><span class="hl-7">></span>
|
|
80
|
+
<pre><code class="html"><span class="hl-7"><</span><span class="hl-8">script</span><span class="hl-9"> </span><span class="hl-10">src</span><span class="hl-9">=</span><span class="hl-11">"https://unpkg.com/lilact/dist/lilact.production.min.js"</span><span class="hl-7">></</span><span class="hl-8">script</span><span class="hl-7">></span>
|
|
80
81
|
</code><button type="button">Copy</button></pre>
|
|
81
82
|
|
|
82
83
|
<p>Note: the production version, like the official React API, doesn’t perform PropTypes checks, but you can access PropTypes using <code>Lilact.PropTypes</code>.</p>
|
|
@@ -96,7 +97,7 @@
|
|
|
96
97
|
<hr>
|
|
97
98
|
<h2 id="learn-more-demos--beta-status" class="tsd-anchor-link">Learn More / Demos / Beta Status<a href="#learn-more-demos--beta-status" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
98
99
|
<p>To know more about using <code>Lilact</code>, see the included examples:<br>
|
|
99
|
-
<a href="arashkazemi.github.io/lilact/static">Lilact Demo Examples</a></p>
|
|
100
|
+
<a href="https://arashkazemi.github.io/lilact/static">Lilact Demo Examples</a></p>
|
|
100
101
|
<p>For the details, see the documentation.</p>
|
|
101
102
|
<p><code>Lilact</code> is currently in its beta state. It is under heavy testing and improvements are being made. Please report any possible issues or bugs—They will be fixed without any hesitation!</p>
|
|
102
103
|
<hr>
|
package/package.json
CHANGED