lilact 0.8.4 → 0.9.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 +22 -8
- package/bin/bundle.cjs +46 -37
- package/dist/lilact.development.js +1 -1
- package/dist/lilact.development.js.map +1 -1
- package/dist/lilact.development.min.js +1 -1
- package/dist/lilact.development.min.js.map +1 -1
- package/dist/lilact.production.min.js +1 -1
- package/dist/lilact.production.min.js.map +1 -1
- package/docs/index.html +19 -6
- package/docs/static/lilact.development.js +1 -1
- package/docs/static/lilact.development.min.js +1 -1
- package/docs/static/lilact.production.min.js +1 -1
- package/package.json +1 -1
- package/root/lilact.development.js +1 -1
- package/root/lilact.development.min.js +1 -1
- package/root/lilact.production.min.js +1 -1
- package/src/lilact.jsx +1 -1
- package/bin/bundle.js +0 -118
package/docs/index.html
CHANGED
|
@@ -2,12 +2,22 @@
|
|
|
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
4
|
<hr>
|
|
5
|
-
<p><a href="https://arashkazemi.github.io/lilact/">Docs on GitHub Pages</a>
|
|
6
|
-
|
|
7
|
-
<
|
|
5
|
+
<p><a href="https://arashkazemi.github.io/lilact/">Docs on GitHub Pages</a>
|
|
6
|
+
||
|
|
7
|
+
<a href="https://arashkazemi.github.io/lilact/static">Demos on GitHub Pages</a>
|
|
8
|
+
||
|
|
9
|
+
<a href="https://github.com/arashkazemi/lilact">Official Repository</a>
|
|
10
|
+
||
|
|
11
|
+
<a href="https://www.npmjs.com/package/lilact">npm Package</a>
|
|
12
|
+
||
|
|
13
|
+
<a href="https://github.com/arashkazemi/lilact-express">Lilact/Node/Express Demo</a>
|
|
14
|
+
||
|
|
15
|
+
<a href="https://github.com/arashkazemi/lilact-php-demo">Lilact/PHP Demo</a>
|
|
16
|
+
||
|
|
17
|
+
<a href="https://github.com/arashkazemi/lilact-python-demo">Lilact/Python Demo</a></p>
|
|
8
18
|
<hr>
|
|
9
19
|
<p>If you find Lilact useful, please consider sponsoring. Your support funds ongoing maintenance, performance improvements, and new features.<br>
|
|
10
|
-
<a href="github.com/sponsors/arashkazemi">Sponsor me on GitHub</a></p>
|
|
20
|
+
<a href="https://github.com/sponsors/arashkazemi">Sponsor me on GitHub</a></p>
|
|
11
21
|
<hr>
|
|
12
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>
|
|
13
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>80kb</code> minified and around <code>27kb</code> gzipped, and includes its whole API.</p>
|
|
@@ -45,11 +55,14 @@
|
|
|
45
55
|
<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>
|
|
46
56
|
</code><button type="button">Copy</button></pre>
|
|
47
57
|
|
|
58
|
+
<p>If you add a <code>--watch</code> argument, the bundler will not exit and keep watching the input file(s),
|
|
59
|
+
and update the bundle if any file is changed.</p>
|
|
48
60
|
<hr>
|
|
49
61
|
<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>
|
|
50
62
|
<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>
|
|
51
|
-
<p>Import the functions using this convention
|
|
52
|
-
|
|
63
|
+
<p>Import the <code>Lilact</code> functions using this convention. There is also a <code>require</code> function that you can use
|
|
64
|
+
to load other JSX or JS files.</p>
|
|
65
|
+
<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-4">require</span><span class="hl-1"> } = </span><span class="hl-5">Lilact</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">App</span><span class="hl-1"> = </span><span class="hl-0">require</span><span class="hl-1">(</span><span class="hl-2">'./App.jsx'</span><span class="hl-1">);</span>
|
|
53
66
|
</code><button type="button">Copy</button></pre>
|
|
54
67
|
|
|
55
68
|
<p>To export:</p>
|