lilact 0.8.0 → 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
CHANGED
|
@@ -2,151 +2,194 @@
|
|
|
2
2
|
|
|
3
3
|
# Lilact
|
|
4
4
|
|
|
5
|
-
### A Little React/JSX Runtime Implementation for Browser
|
|
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)
|
|
10
|
+
|
|
11
|
+
[Lilact repo on GitHub](https://arashkazemi.github.io/lilact) — [Lilact on npm](https://www.npmjs.com/package/lilact)
|
|
8
12
|
|
|
9
|
-
[Lilact
|
|
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)
|
|
14
|
+
|
|
15
|
+
---
|
|
10
16
|
|
|
11
|
-
|
|
17
|
+
If you find Lilact useful, please consider sponsoring. Your support funds ongoing maintenance, performance improvements, and new features.
|
|
18
|
+
[Sponsor me on GitHub](github.com/sponsors/arashkazemi)
|
|
12
19
|
|
|
13
20
|
---
|
|
14
21
|
|
|
15
|
-
|
|
16
|
-
|
|
22
|
+
## Overview
|
|
23
|
+
|
|
24
|
+
`Lilact` 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 `80kb` minified and around `27kb` gzipped, and includes its whole API.
|
|
25
|
+
|
|
26
|
+
`Lilact` is very fast, uses minimal resources, and handles memory very efficiently.
|
|
27
|
+
|
|
28
|
+
In a Node.js environment, `Lilact` can be incorporated and imported similarly to React, and it can also be used as a static library in other platforms.
|
|
17
29
|
|
|
18
30
|
---
|
|
19
31
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
32
|
+
## JSX Transpiler
|
|
33
|
+
|
|
34
|
+
`Lilact` uses its own JSX transpiler (not Babel). It is a recursive-descent parser with lookahead. It doesn’t parse the full JavaScript syntax and instead relies on the JS runtime to detect some errors.
|
|
35
|
+
|
|
36
|
+
The transpiler is only a few kilobytes and can be incorporated into other React engines as well. It even generates sourcemaps without relying on any third-party library.
|
|
37
|
+
|
|
38
|
+
There is a `transpile.js` helper in the `bin` directory to demonstrate how to use it.
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## React APIs, Libraries, and Built-in Components
|
|
43
|
+
|
|
44
|
+
`Lilact` implements both the **legacy class-based** API and the **modern hook-based** API, and it includes almost everything you need.
|
|
45
|
+
|
|
46
|
+
In addition to the API itself, it bundles the official `Redux` and `PropTypes` libraries (see the `redux.jsx` and `proptypes.jsx` demos). As a result, it has Redux support and provides many functions and hooks, including `connect` and `useDispatch`.
|
|
47
|
+
|
|
48
|
+
It also includes the amazing `@emotion/css` library to ease working with styles. You can access it via `Lilact.emotion`.
|
|
49
|
+
|
|
50
|
+
For convenience, it already includes components such as:
|
|
51
|
+
|
|
52
|
+
- `HashRouter`
|
|
53
|
+
- `CSSTransition`
|
|
54
|
+
- `ErrorBoundary`
|
|
55
|
+
- `Suspense`
|
|
24
56
|
|
|
25
|
-
|
|
26
|
-
and it also provides a `webpack` based bundler. The bundler is in the `bin` directory, and can
|
|
27
|
-
be used like
|
|
57
|
+
and helper components like:
|
|
28
58
|
|
|
29
|
-
|
|
59
|
+
- `Spinner`
|
|
60
|
+
- `ResizablePane`
|
|
30
61
|
|
|
31
|
-
|
|
32
|
-
[lilact-express](https://github.com/arashkazemi/lilact-express).
|
|
62
|
+
It also includes a specific timeout implementation that can be paused and resumed at will. `Lilact`’s `Suspense` includes additional features beyond the standard API.
|
|
33
63
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
[lilact-python-demo](https://github.com/arashkazemi/lilact-python-demo).
|
|
64
|
+
You can see all available members and methods in the documentation. There is also a list of demos you can view alongside their code at:
|
|
65
|
+
[Lilact Demo Examples](arashkazemi.github.io/lilact/static)
|
|
66
|
+
|
|
67
|
+
Note: modules are separated in the documentation to improve structure, but in practice all members and methods are accessible directly via the `Lilact` object.
|
|
39
68
|
|
|
40
69
|
---
|
|
41
70
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
`Lilact` implements both the **legacy class based** and **modern hook based** APIs. And it
|
|
50
|
-
has almost everything necessary. In addition to the API, it also includes the official
|
|
51
|
-
`Redux` and `PropTypes` libraries to be used (see the `redux.jsx` and `proptypes.jsx` demos).
|
|
52
|
-
So it has redux support and has many of the functions and hooks, i.e. `connect` and
|
|
53
|
-
`useDispatch`.
|
|
54
|
-
|
|
55
|
-
It also includes the amazing `@emotion/css` library to ease working with styles.
|
|
56
|
-
It can be accessed through `Lilact.emotion`.
|
|
57
|
-
|
|
58
|
-
To ease working, it already includes `HashRouter`, `CSSTransition`, `ErrorBoundary`,
|
|
59
|
-
`Suspense`, and some helper components like `Spinner` and `ResizablePane`. It also has
|
|
60
|
-
a specific timeout implementation that can be paused and resumed at will. `Lilact`'s
|
|
61
|
-
`Suspense` has a few more features than the standard API.
|
|
62
|
-
|
|
63
|
-
You can see all the available members and methods in the documentation. And there is a list of
|
|
64
|
-
demos that can all be seen alongside their code at [Lilact Demo Examples](https://arashkazemi.github.io/lilact/static).
|
|
65
|
-
Just note that the modules are separated in the documentation to improve the doc
|
|
66
|
-
structure, and in practice all the methods and members are accessible via the `Lilact` object
|
|
67
|
-
itself directly.
|
|
71
|
+
## Webpack-based Bundler
|
|
72
|
+
|
|
73
|
+
A `webpack` based bundler is available in the `bin` directory. It can be used like this:
|
|
74
|
+
|
|
75
|
+
```bash
|
|
76
|
+
npx lilact-bundle --entry client/App.jsx --mode production --name bundle.js --out public/dist
|
|
77
|
+
```
|
|
68
78
|
|
|
69
79
|
---
|
|
70
80
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
you
|
|
81
|
+
## Using Lilact Outside Node.js (Browser / Script Tag Integration)
|
|
82
|
+
|
|
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.
|
|
84
|
+
|
|
85
|
+
Import the functions using this convention:
|
|
86
|
+
|
|
87
|
+
```js
|
|
88
|
+
const { useState, useRef, render } = Lilact;
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
To export:
|
|
92
|
+
|
|
93
|
+
```js
|
|
94
|
+
module.exports = ...
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
Bundled projects can also be used statically on other backends. However, bundling is not required: JSX files can be served and transpiled live.
|
|
98
|
+
|
|
99
|
+
A complete example of a `Lilact` project with an `express` request handler is available at:
|
|
100
|
+
[lilact-express](https://arashkazemi.github.io/lilact-express)
|
|
74
101
|
|
|
75
|
-
|
|
102
|
+
An example using it with a PHP/MySQL data store is available at:
|
|
103
|
+
[lilact-php-demo](https://arashkazemi.github.io/lilact-php-demo)
|
|
76
104
|
|
|
77
|
-
|
|
105
|
+
An example using it with a Python/SQLite data store is available at:
|
|
106
|
+
[lilact-python-demo](https://arashkazemi.github.io/lilact-python-demo)
|
|
78
107
|
|
|
79
108
|
---
|
|
80
109
|
|
|
81
|
-
|
|
110
|
+
## Installation and Delivery
|
|
82
111
|
|
|
83
|
-
|
|
112
|
+
### Node.js (npm)
|
|
113
|
+
To use `Lilact` in other Node projects, install it from the npm public repository:
|
|
84
114
|
|
|
85
|
-
|
|
115
|
+
```bash
|
|
116
|
+
npm i lilact
|
|
117
|
+
```
|
|
86
118
|
|
|
87
|
-
|
|
119
|
+
### Browser / Static (dist + CDN)
|
|
120
|
+
To use `Lilact` in a webpage, first download the source code and extract it. The minified script itself is available in the `/dist` directory, and the documentation can be found in `/docs` and also in the source files.
|
|
121
|
+
|
|
122
|
+
It is also available via unpkg CDN and can be included in HTML like:
|
|
123
|
+
|
|
124
|
+
```html
|
|
125
|
+
<script src="https://unpkg.com/lilact/dist/lilact.development.min.js"></script>
|
|
126
|
+
```
|
|
88
127
|
|
|
89
128
|
or
|
|
90
129
|
|
|
91
|
-
|
|
130
|
+
```html
|
|
131
|
+
<script src="https://unpkg.com/lilact/dist/lilact.production.min.js"></script>
|
|
132
|
+
```
|
|
92
133
|
|
|
134
|
+
Note: the production version, like the official React API, doesn’t perform PropTypes checks, but you can access PropTypes using `Lilact.PropTypes`.
|
|
93
135
|
|
|
94
|
-
|
|
95
|
-
script itself is available in the `/dist` directory and the documentation
|
|
96
|
-
can be found in the `/docs` and also in the source files.
|
|
136
|
+
After loading, `Lilact` automatically scans the document for any script elements with `type='text/jsx'` and runs them. If the `src` attribute is present on the script, it will load the resource; if the script contains inner content, it will be executed.
|
|
97
137
|
|
|
98
|
-
|
|
99
|
-
checks, but you can access PropTypes using Lilact.PropTypes.
|
|
138
|
+
This is not the only way to use it—inside Node projects you can use standard module imports and treat `Lilact` like a normal module.
|
|
100
139
|
|
|
101
|
-
|
|
102
|
-
with `type='text/jsx'` and it will run them. If the `src` attribute is script it will load
|
|
103
|
-
the resource, and if there is inner content it will be executed. Of course this is not the
|
|
104
|
-
only way and in node projects you can have your `jsx` files and import `Lilact` as a
|
|
105
|
-
standard module.
|
|
140
|
+
`Lilact` wraps browser events to mimic React events. This mimicry is not perfect on some edge cases (because the footprint was important), but it works well overall.
|
|
106
141
|
|
|
107
|
-
|
|
108
|
-
some edge cases, as the footprint was very important, but it works without a problem overall.
|
|
142
|
+
---
|
|
109
143
|
|
|
110
|
-
|
|
144
|
+
## Example
|
|
111
145
|
|
|
112
|
-
|
|
146
|
+
### Node.js example
|
|
113
147
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
render(<App/>, document.body);
|
|
148
|
+
```js
|
|
149
|
+
import { render } from "lilact";
|
|
119
150
|
|
|
120
|
-
|
|
151
|
+
function App() {
|
|
152
|
+
return <div>Hello World</div>;
|
|
153
|
+
}
|
|
121
154
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
<head>
|
|
125
|
-
<meta charset="utf-8"/>
|
|
126
|
-
<title>Lilact Demo</title>
|
|
127
|
-
<script src='./lilact.development.min.js' type="module"></script>
|
|
128
|
-
</head>
|
|
129
|
-
<body></body>
|
|
130
|
-
<script type='text/jsx'>
|
|
131
|
-
const { render } = Lilact;
|
|
155
|
+
render(<App/>, document.body);
|
|
156
|
+
```
|
|
132
157
|
|
|
133
|
-
|
|
134
|
-
return <div>Hello World</div>;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
render(<App/>, document.body);
|
|
138
|
-
</script>
|
|
139
|
-
</html>
|
|
158
|
+
### Outside Node.js (e.g., PHP / Python integration)
|
|
140
159
|
|
|
160
|
+
```html
|
|
161
|
+
<!DOCTYPE html>
|
|
162
|
+
<html>
|
|
163
|
+
<head>
|
|
164
|
+
<meta charset="utf-8"/>
|
|
165
|
+
<title>Lilact Demo</title>
|
|
166
|
+
<script src='./lilact.development.min.js' type="module"></script>
|
|
167
|
+
</head>
|
|
168
|
+
<body></body>
|
|
169
|
+
<script type='text/jsx'>
|
|
170
|
+
const { render } = Lilact;
|
|
141
171
|
|
|
142
|
-
|
|
143
|
-
|
|
172
|
+
function App() {
|
|
173
|
+
return <div>Hello World</div>;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
render(<App/>, document.body);
|
|
177
|
+
</script>
|
|
178
|
+
</html>
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
---
|
|
144
182
|
|
|
145
|
-
|
|
146
|
-
being made. Please report any possible issues or bugs, they will be fixed
|
|
147
|
-
without any hesitation!
|
|
183
|
+
## Learn More / Demos / Beta Status
|
|
148
184
|
|
|
149
|
-
|
|
185
|
+
To know more about using `Lilact`, see the included examples:
|
|
186
|
+
[Lilact Demo Examples](https://arashkazemi.github.io/lilact/static)
|
|
187
|
+
|
|
188
|
+
For the details, see the documentation.
|
|
189
|
+
|
|
190
|
+
`Lilact` 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!
|
|
191
|
+
|
|
192
|
+
---
|
|
150
193
|
|
|
151
194
|
Copyright (C) 2024-2026 Arash Kazemi <contact.arash.kazemi@gmail.com>. All rights reserved.
|
|
152
195
|
|
|
@@ -1,30 +1,34 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--light-hl-0: #
|
|
3
|
-
--dark-hl-0: #
|
|
4
|
-
--light-hl-1: #
|
|
5
|
-
--dark-hl-1: #
|
|
6
|
-
--light-hl-2: #
|
|
7
|
-
--dark-hl-2: #
|
|
8
|
-
--light-hl-3: #
|
|
9
|
-
--dark-hl-3: #
|
|
10
|
-
--light-hl-4: #
|
|
11
|
-
--dark-hl-4: #
|
|
12
|
-
--light-hl-5: #
|
|
13
|
-
--dark-hl-5: #
|
|
14
|
-
--light-hl-6: #
|
|
15
|
-
--dark-hl-6: #
|
|
16
|
-
--light-hl-7: #
|
|
17
|
-
--dark-hl-7: #
|
|
2
|
+
--light-hl-0: #795E26;
|
|
3
|
+
--dark-hl-0: #DCDCAA;
|
|
4
|
+
--light-hl-1: #000000;
|
|
5
|
+
--dark-hl-1: #D4D4D4;
|
|
6
|
+
--light-hl-2: #A31515;
|
|
7
|
+
--dark-hl-2: #CE9178;
|
|
8
|
+
--light-hl-3: #0000FF;
|
|
9
|
+
--dark-hl-3: #569CD6;
|
|
10
|
+
--light-hl-4: #0070C1;
|
|
11
|
+
--dark-hl-4: #4FC1FF;
|
|
12
|
+
--light-hl-5: #001080;
|
|
13
|
+
--dark-hl-5: #9CDCFE;
|
|
14
|
+
--light-hl-6: #267F99;
|
|
15
|
+
--dark-hl-6: #4EC9B0;
|
|
16
|
+
--light-hl-7: #800000;
|
|
17
|
+
--dark-hl-7: #808080;
|
|
18
18
|
--light-hl-8: #800000;
|
|
19
|
-
--dark-hl-8: #
|
|
20
|
-
--light-hl-9: #
|
|
21
|
-
--dark-hl-9: #
|
|
22
|
-
--light-hl-10: #
|
|
23
|
-
--dark-hl-10: #
|
|
24
|
-
--light-hl-11: #
|
|
25
|
-
--dark-hl-11: #
|
|
26
|
-
--light-hl-12: #
|
|
27
|
-
--dark-hl-12: #
|
|
19
|
+
--dark-hl-8: #569CD6;
|
|
20
|
+
--light-hl-9: #000000FF;
|
|
21
|
+
--dark-hl-9: #D4D4D4;
|
|
22
|
+
--light-hl-10: #E50000;
|
|
23
|
+
--dark-hl-10: #9CDCFE;
|
|
24
|
+
--light-hl-11: #0000FF;
|
|
25
|
+
--dark-hl-11: #CE9178;
|
|
26
|
+
--light-hl-12: #AF00DB;
|
|
27
|
+
--dark-hl-12: #C586C0;
|
|
28
|
+
--light-hl-13: #008000;
|
|
29
|
+
--dark-hl-13: #6A9955;
|
|
30
|
+
--light-hl-14: #098658;
|
|
31
|
+
--dark-hl-14: #B5CEA8;
|
|
28
32
|
--light-code-background: #FFFFFF;
|
|
29
33
|
--dark-code-background: #1E1E1E;
|
|
30
34
|
}
|
|
@@ -43,6 +47,8 @@
|
|
|
43
47
|
--hl-10: var(--light-hl-10);
|
|
44
48
|
--hl-11: var(--light-hl-11);
|
|
45
49
|
--hl-12: var(--light-hl-12);
|
|
50
|
+
--hl-13: var(--light-hl-13);
|
|
51
|
+
--hl-14: var(--light-hl-14);
|
|
46
52
|
--code-background: var(--light-code-background);
|
|
47
53
|
} }
|
|
48
54
|
|
|
@@ -60,6 +66,8 @@
|
|
|
60
66
|
--hl-10: var(--dark-hl-10);
|
|
61
67
|
--hl-11: var(--dark-hl-11);
|
|
62
68
|
--hl-12: var(--dark-hl-12);
|
|
69
|
+
--hl-13: var(--dark-hl-13);
|
|
70
|
+
--hl-14: var(--dark-hl-14);
|
|
63
71
|
--code-background: var(--dark-code-background);
|
|
64
72
|
} }
|
|
65
73
|
|
|
@@ -77,6 +85,8 @@
|
|
|
77
85
|
--hl-10: var(--light-hl-10);
|
|
78
86
|
--hl-11: var(--light-hl-11);
|
|
79
87
|
--hl-12: var(--light-hl-12);
|
|
88
|
+
--hl-13: var(--light-hl-13);
|
|
89
|
+
--hl-14: var(--light-hl-14);
|
|
80
90
|
--code-background: var(--light-code-background);
|
|
81
91
|
}
|
|
82
92
|
|
|
@@ -94,6 +104,8 @@
|
|
|
94
104
|
--hl-10: var(--dark-hl-10);
|
|
95
105
|
--hl-11: var(--dark-hl-11);
|
|
96
106
|
--hl-12: var(--dark-hl-12);
|
|
107
|
+
--hl-13: var(--dark-hl-13);
|
|
108
|
+
--hl-14: var(--dark-hl-14);
|
|
97
109
|
--code-background: var(--dark-code-background);
|
|
98
110
|
}
|
|
99
111
|
|
|
@@ -110,4 +122,6 @@
|
|
|
110
122
|
.hl-10 { color: var(--hl-10); }
|
|
111
123
|
.hl-11 { color: var(--hl-11); }
|
|
112
124
|
.hl-12 { color: var(--hl-12); }
|
|
125
|
+
.hl-13 { color: var(--hl-13); }
|
|
126
|
+
.hl-14 { color: var(--hl-14); }
|
|
113
127
|
pre, code { background: var(--code-background); }
|
|
@@ -1,5 +1,5 @@
|
|
|
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>HTMLComponent | 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/components.html">components</a></li><li><a href="" aria-current="page">HTMLComponent</a></li></ul><h1>Class HTMLComponent</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>HTMLComponent</p>
|
|
2
|
-
</div><div class="tsd-comment tsd-typography"><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="ts"><span class="hl-
|
|
2
|
+
</div><div class="tsd-comment tsd-typography"><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="ts"><span class="hl-1"><</span><span class="hl-5">div</span><span class="hl-1"> {...</span><span class="hl-5">props</span><span class="hl-1">}>...</</span><span class="hl-5">div</span><span class="hl-1">></span><br/><span class="hl-5">or</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">el</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-0">HTMLComponent</span><span class="hl-1">(</span><span class="hl-2">'div'</span><span class="hl-1">, { </span><span class="hl-5">className:</span><span class="hl-1"> </span><span class="hl-2">'box'</span><span class="hl-1"> });</span>
|
|
3
3
|
</code><button type="button">Copy</button></pre>
|
|
4
4
|
|
|
5
5
|
</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-entity">Param: entity<a href="#param-entity" 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>The HTML tag/type to create (e.g., 'div', 'span', 'button').</p>
|
|
@@ -1,5 +1,5 @@
|
|
|
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>RootComponent | 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/components.html">components</a></li><li><a href="" aria-current="page">RootComponent</a></li></ul><h1>Class RootComponent</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>RootComponent</p>
|
|
2
|
-
</div><div class="tsd-comment tsd-typography"><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="ts"><span class="hl-
|
|
2
|
+
</div><div class="tsd-comment tsd-typography"><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="ts"><span class="hl-13">// Accept an element reference</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">root</span><span class="hl-1"> = </span><span class="hl-5">document</span><span class="hl-1">.</span><span class="hl-0">getElementById</span><span class="hl-1">(</span><span class="hl-2">'app'</span><span class="hl-1">)</span><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-3">new</span><span class="hl-1"> </span><span class="hl-0">RootComponent</span><span class="hl-1">(</span><span class="hl-5">root</span><span class="hl-1">, { </span><span class="hl-5">children:</span><span class="hl-1"> [...] })</span><br/><br/><span class="hl-13">// Or accept a selector string</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">app2</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-0">RootComponent</span><span class="hl-1">(</span><span class="hl-2">'#app'</span><span class="hl-1">, { </span><span class="hl-5">children:</span><span class="hl-1"> [...] })</span>
|
|
3
3
|
</code><button type="button">Copy</button></pre>
|
|
4
4
|
|
|
5
5
|
</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-rootelement">Param: rootElement<a href="#param-rootelement" 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>Root HTML element (or a selector string resolved via <code>document.querySelector</code>).</p>
|
package/docs/index.html
CHANGED
|
@@ -1,116 +1,106 @@
|
|
|
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
|
-
<h3 id="a-little-reactjsx-runtime-implementation-for-browser" class="tsd-anchor-link">A Little React/JSX Runtime Implementation for Browser<a href="#a-little-reactjsx-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>
|
|
5
|
-
<p><a href="https://github.com/arashkazemi/lilact">Lilact repo on GitHub</a> - <a href="https://www.npmjs.com/package/lilact">Lilact on npm</a></p>
|
|
6
|
-
<p><a href="https://github.com/arashkazemi/lilact-php-demo">Lilact/PHP Demo</a> - <a href="https://github.com/arashkazemi/lilact-python-demo">Lilact/Python Demo</a></p>
|
|
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>
|
|
7
4
|
<hr>
|
|
8
|
-
<p>
|
|
9
|
-
|
|
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>
|
|
10
8
|
<hr>
|
|
11
|
-
<p
|
|
12
|
-
|
|
13
|
-
that is around <code>80kb</code> minified and around <code>27kb</code> gzipped and includes its whole api.
|
|
14
|
-
<code>Lilact</code> is very fast, it uses minimal resources and handles memory very efficiently.</p>
|
|
15
|
-
<p>When used in node environment, <code>Lilact</code> can be incorporated and imported similar to React,
|
|
16
|
-
and it also provides a <code>webpack</code> based bundler. The bundler is in the <code>bin</code> directory, and can
|
|
17
|
-
be used like</p>
|
|
18
|
-
<pre><code> lilact-bundle --entry client/App.jsx --mode production --name bundle.js --out public/dist
|
|
19
|
-
</code></pre>
|
|
20
|
-
<p>A complete example of a <code>Lilact</code> project with an <code>express</code> request handler is available on
|
|
21
|
-
<a href="https://github.com/arashkazemi/lilact-express">lilact-express</a>.</p>
|
|
22
|
-
<p><code>Lilact</code> essentially works in the browser, so it doesn't rely on node environment and can
|
|
23
|
-
work with any kind of webserver/back-end. An example of using it with a PHP/MySQL
|
|
24
|
-
data store is available on <a href="https://github.com/arashkazemi/lilact-php-demo">lilact-php-demo</a>.
|
|
25
|
-
And an example of using it with a Python/SQLite data store is available on
|
|
26
|
-
<a href="https://github.com/arashkazemi/lilact-python-demo">lilact-python-demo</a>.</p>
|
|
9
|
+
<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>
|
|
27
11
|
<hr>
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
be incorporated
|
|
32
|
-
on any 3rd party library. There is a <code>transpile.js</code> helper in the bin directory to show
|
|
33
|
-
how you can use it.</p>
|
|
34
|
-
<p><code>Lilact</code> implements both the <strong>legacy class based</strong> and <strong>modern hook based</strong> APIs. And it
|
|
35
|
-
has almost everything necessary. In addition to the API, it also includes the official
|
|
36
|
-
<code>Redux</code> and <code>PropTypes</code> libraries to be used (see the <code>redux.jsx</code> and <code>proptypes.jsx</code> demos).
|
|
37
|
-
So it has redux support and has many of the functions and hooks, i.e. <code>connect</code> and
|
|
38
|
-
<code>useDispatch</code>.</p>
|
|
39
|
-
<p>It also includes the amazing <code>@emotion/css</code> library to ease working with styles.
|
|
40
|
-
It can be accessed through <code>Lilact.emotion</code>.</p>
|
|
41
|
-
<p>To ease working, it already includes <code>HashRouter</code>, <code>CSSTransition</code>, <code>ErrorBoundary</code>,
|
|
42
|
-
<code>Suspense</code>, and some helper components like <code>Spinner</code> and <code>ResizablePane</code>. It also has
|
|
43
|
-
a specific timeout implementation that can be paused and resumed at will. <code>Lilact</code>'s
|
|
44
|
-
<code>Suspense</code> has a few more features than the standard API.</p>
|
|
45
|
-
<p>You can see all the available members and methods in the documentation. And there is a list of
|
|
46
|
-
demos that can all be seen alongside their code at <a href="https://arashkazemi.github.io/lilact/static">Lilact Demo Examples</a>.
|
|
47
|
-
Just note that the modules are separated in the documentation to improve the doc
|
|
48
|
-
structure, and in practice all the methods and members are accessible via the <code>Lilact</code> object
|
|
49
|
-
itself directly.</p>
|
|
12
|
+
<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
|
+
<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>
|
|
14
|
+
<p><code>Lilact</code> is very fast, uses minimal resources, and handles memory very efficiently.</p>
|
|
15
|
+
<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>
|
|
50
16
|
<hr>
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<
|
|
55
|
-
</code></pre>
|
|
56
|
-
<p>And to export you can use <code>module.exports = ...</code>.</p>
|
|
17
|
+
<h2 id="jsx-transpiler" class="tsd-anchor-link">JSX Transpiler<a href="#jsx-transpiler" 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>
|
|
18
|
+
<p><code>Lilact</code> uses its own JSX transpiler (not Babel). It is a recursive-descent parser with lookahead. It doesn’t parse the full JavaScript syntax and instead relies on the JS runtime to detect some errors.</p>
|
|
19
|
+
<p>The transpiler is only a few kilobytes and can be incorporated into other React engines as well. It even generates sourcemaps without relying on any third-party library.</p>
|
|
20
|
+
<p>There is a <code>transpile.js</code> helper in the <code>bin</code> directory to demonstrate how to use it.</p>
|
|
57
21
|
<hr>
|
|
58
|
-
<
|
|
59
|
-
<
|
|
60
|
-
</code
|
|
61
|
-
<p>It
|
|
62
|
-
<
|
|
63
|
-
|
|
22
|
+
<h2 id="react-apis-libraries-and-built-in-components" class="tsd-anchor-link">React APIs, Libraries, and Built-in Components<a href="#react-apis-libraries-and-built-in-components" 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> implements both the <strong>legacy class-based</strong> API and the <strong>modern hook-based</strong> API, and it includes almost everything you need.</p>
|
|
24
|
+
<p>In addition to the API itself, it bundles the official <code>Redux</code> and <code>PropTypes</code> libraries (see the <code>redux.jsx</code> and <code>proptypes.jsx</code> demos). As a result, it has Redux support and provides many functions and hooks, including <code>connect</code> and <code>useDispatch</code>.</p>
|
|
25
|
+
<p>It also includes the amazing <code>@emotion/css</code> library to ease working with styles. You can access it via <code>Lilact.emotion</code>.</p>
|
|
26
|
+
<p>For convenience, it already includes components such as:</p>
|
|
27
|
+
<ul>
|
|
28
|
+
<li><code>HashRouter</code></li>
|
|
29
|
+
<li><code>CSSTransition</code></li>
|
|
30
|
+
<li><code>ErrorBoundary</code></li>
|
|
31
|
+
<li><code>Suspense</code></li>
|
|
32
|
+
</ul>
|
|
33
|
+
<p>and helper components like:</p>
|
|
34
|
+
<ul>
|
|
35
|
+
<li><code>Spinner</code></li>
|
|
36
|
+
<li><code>ResizablePane</code></li>
|
|
37
|
+
</ul>
|
|
38
|
+
<p>It also includes a specific timeout implementation that can be paused and resumed at will. <code>Lilact</code>’s <code>Suspense</code> includes additional features beyond the standard API.</p>
|
|
39
|
+
<p>You can see all available members and methods in the documentation. There is also a list of demos you can view alongside their code at:<br>
|
|
40
|
+
<a href="arashkazemi.github.io/lilact/static">Lilact Demo Examples</a></p>
|
|
41
|
+
<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>
|
|
42
|
+
<hr>
|
|
43
|
+
<h2 id="webpack-based-bundler" class="tsd-anchor-link">Webpack-based Bundler<a href="#webpack-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>
|
|
44
|
+
<p>A <code>webpack</code> based bundler is available in the <code>bin</code> directory. It can be used like this:</p>
|
|
45
|
+
<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
|
+
</code><button type="button">Copy</button></pre>
|
|
47
|
+
|
|
48
|
+
<hr>
|
|
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>
|
|
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>
|
|
51
|
+
<p>Import the functions using this convention:</p>
|
|
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>
|
|
53
|
+
</code><button type="button">Copy</button></pre>
|
|
54
|
+
|
|
55
|
+
<p>To export:</p>
|
|
56
|
+
<pre><code class="js"><span class="hl-6">module</span><span class="hl-1">.</span><span class="hl-6">exports</span><span class="hl-1"> = ...</span>
|
|
57
|
+
</code><button type="button">Copy</button></pre>
|
|
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>
|
|
60
|
+
<p>A complete example of a <code>Lilact</code> project with an <code>express</code> request handler is available at:<br>
|
|
61
|
+
<a href="https://arashkazemi.github.io/lilact-express">lilact-express</a></p>
|
|
62
|
+
<p>An example using it with a PHP/MySQL data store is available at:<br>
|
|
63
|
+
<a href="https://arashkazemi.github.io/lilact-php-demo">lilact-php-demo</a></p>
|
|
64
|
+
<p>An example using it with a Python/SQLite data store is available at:<br>
|
|
65
|
+
<a href="https://arashkazemi.github.io/lilact-python-demo">lilact-python-demo</a></p>
|
|
66
|
+
<hr>
|
|
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>
|
|
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>
|
|
69
|
+
<p>To use <code>Lilact</code> in other Node projects, install it from the npm public repository:</p>
|
|
70
|
+
<pre><code class="bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">i</span><span class="hl-1"> </span><span class="hl-2">lilact</span>
|
|
71
|
+
</code><button type="button">Copy</button></pre>
|
|
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>
|
|
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>
|
|
75
|
+
<p>It is also available via unpkg CDN and can be included in HTML like:</p>
|
|
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>
|
|
77
|
+
</code><button type="button">Copy</button></pre>
|
|
78
|
+
|
|
64
79
|
<p>or</p>
|
|
65
|
-
<pre><code>
|
|
66
|
-
</code></pre>
|
|
67
|
-
<p>To use in a webpage, first download the source code and extract it. The minified
|
|
68
|
-
script itself is available in the <code>/dist</code> directory and the documentation
|
|
69
|
-
can be found in the <code>/docs</code> and also in the source files.</p>
|
|
70
|
-
<p>Note that the production version, like the official React API, doesn't do the PropTypes
|
|
71
|
-
checks, but you can access PropTypes using Lilact.PropTypes.</p>
|
|
72
|
-
<p>After being loaded, Lilact automatically scans the document for any script elements
|
|
73
|
-
with <code>type='text/jsx'</code> and it will run them. If the <code>src</code> attribute is script it will load
|
|
74
|
-
the resource, and if there is inner content it will be executed. Of course this is not the
|
|
75
|
-
only way and in node projects you can have your <code>jsx</code> files and import <code>Lilact</code> as a
|
|
76
|
-
standard module.</p>
|
|
77
|
-
<p>Lilact wraps the browser events to mimic React events, this mimicry is not perfect on
|
|
78
|
-
some edge cases, as the footprint was very important, but it works without a problem overall.</p>
|
|
79
|
-
<p>As a simple example <code>Lilact</code> can be used like this in <code>node</code> environment:</p>
|
|
80
|
-
<pre><code> import render from "lilact";
|
|
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>
|
|
81
|
+
</code><button type="button">Copy</button></pre>
|
|
81
82
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
<
|
|
89
|
-
<pre><code>
|
|
90
|
-
|
|
91
|
-
<head>
|
|
92
|
-
<meta charset="utf-8"/>
|
|
93
|
-
<title>Lilact Demo</title>
|
|
94
|
-
<script src='./lilact.development.min.js' type="module"></script>
|
|
95
|
-
</head>
|
|
96
|
-
<body></body>
|
|
97
|
-
<script type='text/jsx'>
|
|
98
|
-
const { render } = Lilact;
|
|
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>
|
|
84
|
+
<p>After loading, <code>Lilact</code> automatically scans the document for any script elements with <code>type='text/jsx'</code> and runs them. If the <code>src</code> attribute is present on the script, it will load the resource; if the script contains inner content, it will be executed.</p>
|
|
85
|
+
<p>This is not the only way to use it—inside Node projects you can use standard module imports and treat <code>Lilact</code> like a normal module.</p>
|
|
86
|
+
<p><code>Lilact</code> wraps browser events to mimic React events. This mimicry is not perfect on some edge cases (because the footprint was important), but it works well overall.</p>
|
|
87
|
+
<hr>
|
|
88
|
+
<h2 id="example" class="tsd-anchor-link">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></h2>
|
|
89
|
+
<h3 id="nodejs-example" class="tsd-anchor-link">Node.js example<a href="#nodejs-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></h3>
|
|
90
|
+
<pre><code class="js"><span class="hl-12">import</span><span class="hl-1"> { </span><span class="hl-5">render</span><span class="hl-1"> } </span><span class="hl-12">from</span><span class="hl-1"> </span><span class="hl-2">"lilact"</span><span class="hl-1">;</span><br/><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-0">App</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-12">return</span><span class="hl-1"> </span><span class="hl-7"><</span><span class="hl-8">div</span><span class="hl-7">></span><span class="hl-1">Hello World</span><span class="hl-7"></</span><span class="hl-8">div</span><span class="hl-7">></span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-0">render</span><span class="hl-1">(</span><span class="hl-7"><</span><span class="hl-6">App</span><span class="hl-7">/></span><span class="hl-1">, </span><span class="hl-5">document</span><span class="hl-1">.</span><span class="hl-5">body</span><span class="hl-1">);</span>
|
|
91
|
+
</code><button type="button">Copy</button></pre>
|
|
99
92
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
</
|
|
108
|
-
<p>
|
|
109
|
-
and
|
|
110
|
-
<p><code>Lilact</code> is currently in its beta state. It is under heavy tests and improvements are
|
|
111
|
-
being made. Please report any possible issues or bugs, they will be fixed
|
|
112
|
-
without any hesitation!</p>
|
|
93
|
+
<h3 id="outside-nodejs-eg-php-python-integration" class="tsd-anchor-link">Outside Node.js (e.g., PHP / Python integration)<a href="#outside-nodejs-eg-php-python-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></h3>
|
|
94
|
+
<pre><code class="html"><span class="hl-7"><!</span><span class="hl-8">DOCTYPE</span><span class="hl-1"> </span><span class="hl-10">html</span><span class="hl-7">></span><br/><span class="hl-7"><</span><span class="hl-8">html</span><span class="hl-7">></span><br/><span class="hl-7"><</span><span class="hl-8">head</span><span class="hl-7">></span><br/><span class="hl-1"> </span><span class="hl-7"><</span><span class="hl-8">meta</span><span class="hl-1"> </span><span class="hl-10">charset</span><span class="hl-1">=</span><span class="hl-11">"utf-8"</span><span class="hl-7">/></span><br/><span class="hl-1"> </span><span class="hl-7"><</span><span class="hl-8">title</span><span class="hl-7">></span><span class="hl-1">Lilact Demo</span><span class="hl-7"></</span><span class="hl-8">title</span><span class="hl-7">></span><br/><span class="hl-1"> </span><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">'./lilact.development.min.js'</span><span class="hl-9"> </span><span class="hl-10">type</span><span class="hl-9">=</span><span class="hl-11">"module"</span><span class="hl-7">></</span><span class="hl-8">script</span><span class="hl-7">></span><br/><span class="hl-7"></</span><span class="hl-8">head</span><span class="hl-7">></span><br/><span class="hl-7"><</span><span class="hl-8">body</span><span class="hl-7">></</span><span class="hl-8">body</span><span class="hl-7">></span><br/><span class="hl-7"><</span><span class="hl-8">script</span><span class="hl-9"> </span><span class="hl-10">type</span><span class="hl-9">=</span><span class="hl-11">'text/jsx'</span><span class="hl-7">></span><br/><span class="hl-9"> const { render } = Lilact;</span><br/><br/><span class="hl-9"> function App() {</span><br/><span class="hl-9"> return <div>Hello World</div>;</span><br/><span class="hl-9"> }</span><br/><span class="hl-9"> </span><br/><span class="hl-9"> render(<App/>, document.body);</span><br/><span class="hl-7"></</span><span class="hl-8">script</span><span class="hl-7">></span><br/><span class="hl-7"></</span><span class="hl-8">html</span><span class="hl-7">></span>
|
|
95
|
+
</code><button type="button">Copy</button></pre>
|
|
96
|
+
|
|
97
|
+
<hr>
|
|
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>
|
|
99
|
+
<p>To know more about using <code>Lilact</code>, see the included examples:<br>
|
|
100
|
+
<a href="https://arashkazemi.github.io/lilact/static">Lilact Demo Examples</a></p>
|
|
101
|
+
<p>For the details, see the documentation.</p>
|
|
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>
|
|
113
103
|
<hr>
|
|
114
104
|
<p>Copyright (C) 2024-2026 Arash Kazemi <a href="mailto:contact.arash.kazemi@gmail.com">contact.arash.kazemi@gmail.com</a>. All rights reserved.</p>
|
|
115
105
|
<p>Lilact project is subject to the terms of BSD-2-Clause License. See the <code>LICENSE.TXT</code> file for more details.</p>
|
|
116
|
-
<style>.tsd-page-title{display: none}</style></div></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"><a href="#lilact"><span>Lilact</span></a><ul><li><a href="#a-little-reactjsx-runtime-implementation-for-browser"><span>A <wbr/>Little <wbr/>React/<wbr/>JSX <wbr/>Runtime <wbr/>Implementation for <wbr/>Browser</span></a></li></ul></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>
|
|
106
|
+
<style>.tsd-page-title{display: none}</style></div></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"><a href="#lilact"><span>Lilact</span></a><ul><li><ul><li><a href="#a-little-reactjsx-runtime-implementation-for-the-browser"><span>A <wbr/>Little <wbr/>React/<wbr/>JSX <wbr/>Runtime <wbr/>Implementation for the <wbr/>Browser</span></a></li></ul></li><li><a href="#overview"><span>Overview</span></a></li><li><a href="#jsx-transpiler"><span>JSX <wbr/>Transpiler</span></a></li><li><a href="#react-apis-libraries-and-built-in-components"><span>React <wbr/>AP<wbr/>Is, <wbr/>Libraries, and <wbr/>Built-<wbr/>in <wbr/>Components</span></a></li><li><a href="#webpack-based-bundler"><span>Webpack-<wbr/>based <wbr/>Bundler</span></a></li><li><a href="#using-lilact-outside-nodejs-browser-script-tag-integration"><span>Using <wbr/>Lilact <wbr/>Outside <wbr/>Node.js (<wbr/>Browser / <wbr/>Script <wbr/>Tag <wbr/>Integration)</span></a></li><li><a href="#installation-and-delivery"><span>Installation and <wbr/>Delivery</span></a></li><li><ul><li><a href="#nodejs-npm"><span>Node.js (npm)</span></a></li><li><a href="#browser-static-dist--cdn"><span>Browser / <wbr/>Static (dist + <wbr/>CDN)</span></a></li></ul></li><li><a href="#example"><span>Example</span></a></li><li><ul><li><a href="#nodejs-example"><span>Node.js example</span></a></li><li><a href="#outside-nodejs-eg-php-python-integration"><span>Outside <wbr/>Node.js (e.g., <wbr/>PHP / <wbr/>Python integration)</span></a></li></ul></li><li><a href="#learn-more-demos--beta-status"><span>Learn <wbr/>More / <wbr/>Demos / <wbr/>Beta <wbr/>Status</span></a></li></ul></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>
|
|
@@ -42,7 +42,7 @@ If provided, the component uses this value instead of internal state.</p>
|
|
|
42
42
|
</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>
|
|
43
43
|
</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>
|
|
44
44
|
</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>React children to be rendered into the two pane containers.</p>
|
|
45
|
-
</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-
|
|
45
|
+
</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">ResizablePaneHandle</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">ResizablePane</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-14">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-14">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-14">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">ResizablePane</span><span class="hl-7">></span>
|
|
46
46
|
</code><button type="button">Copy</button></pre>
|
|
47
47
|
|
|
48
48
|
</div></div><aside class="tsd-sources"><ul><li>Defined in pane.js:65</li></ul></aside></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></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>
|
package/package.json
CHANGED