mono-jsx 0.1.0 → 0.1.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 +16 -27
- package/index.mjs +1 -1
- package/package.json +1 -1
- package/types/css.d.ts +699 -586
- package/types/jsx.d.ts +1 -1
- package/types/mono.d.ts +1 -1
package/README.md
CHANGED
|
@@ -1,26 +1,16 @@
|
|
|
1
1
|
# mono-jsx
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
mono-jsx is a JSX runtime that renders `<html>` element to a `Response` object in JavaScript runtimes like Node.js, Deno, Bun, Cloudflare Workers, etc.
|
|
6
6
|
|
|
7
7
|
- 🚀 No build step needed
|
|
8
|
-
- 🦋 Lightweight(8KB gzipped), zero dependencies
|
|
8
|
+
- 🦋 Lightweight (8KB gzipped), zero dependencies
|
|
9
9
|
- 🔫 Minimal state runtime
|
|
10
|
-
- 🚨
|
|
10
|
+
- 🚨 Complete Web API Typescript definitions
|
|
11
11
|
- ⏳ Streaming rendering
|
|
12
12
|
- 🌎 Universal, works in Node.js, Deno, Bun, Cloudflare Workers, etc.
|
|
13
13
|
|
|
14
|
-
```jsx
|
|
15
|
-
export default {
|
|
16
|
-
fetch: (req) => (
|
|
17
|
-
<html>
|
|
18
|
-
<h1>Hello World!</h1>
|
|
19
|
-
</html>
|
|
20
|
-
),
|
|
21
|
-
};
|
|
22
|
-
```
|
|
23
|
-
|
|
24
14
|
## Installation
|
|
25
15
|
|
|
26
16
|
mono-jsx supports all modern JavaScript runtimes including Node.js, Deno, Bun, Cloudflare Workers, etc.
|
|
@@ -43,8 +33,7 @@ To use mono-jsx as JSX runtime, add the following configuration to your `tsconfi
|
|
|
43
33
|
{
|
|
44
34
|
"compilerOptions": {
|
|
45
35
|
"jsx": "react-jsx",
|
|
46
|
-
"jsxImportSource": "mono-jsx"
|
|
47
|
-
"allowJs": true // required for supporting `.jsx` extension in Node.js
|
|
36
|
+
"jsxImportSource": "mono-jsx"
|
|
48
37
|
}
|
|
49
38
|
}
|
|
50
39
|
```
|
|
@@ -68,7 +57,7 @@ bunx mono-jsx setup
|
|
|
68
57
|
|
|
69
58
|
## Usage
|
|
70
59
|
|
|
71
|
-
|
|
60
|
+
mono-jsx allows you to return an `<html>` JSX element as a `Response` object in the `fetch` handler.
|
|
72
61
|
|
|
73
62
|
```tsx
|
|
74
63
|
// app.tsx
|
|
@@ -112,7 +101,7 @@ serve({
|
|
|
112
101
|
});
|
|
113
102
|
```
|
|
114
103
|
|
|
115
|
-
and you will need [tsx](https://www.npmjs.com/package/tsx) to start the app.
|
|
104
|
+
and you will need [tsx](https://www.npmjs.com/package/tsx) to start the app without a build step.
|
|
116
105
|
|
|
117
106
|
```bash
|
|
118
107
|
npx tsx app.tsx
|
|
@@ -124,11 +113,11 @@ mono-jsx uses [**JSX**](https://react.dev/learn/describing-the-ui) to describe t
|
|
|
124
113
|
|
|
125
114
|
### Using Standard HTML Property Names
|
|
126
115
|
|
|
127
|
-
mono-jsx
|
|
116
|
+
mono-jsx adopts standard HTML property names, avoiding React's custom property naming conventions.
|
|
128
117
|
|
|
129
|
-
- `className`
|
|
130
|
-
- `htmlFor`
|
|
131
|
-
- `onChange`
|
|
118
|
+
- `className` becomes `class`
|
|
119
|
+
- `htmlFor` becomes `for`
|
|
120
|
+
- `onChange` becomes `onInput`
|
|
132
121
|
|
|
133
122
|
### Composition `class`
|
|
134
123
|
|
|
@@ -159,7 +148,7 @@ mono-jsx allows you to use [pseudo classes](https://developer.mozilla.org/en-US/
|
|
|
159
148
|
|
|
160
149
|
### `<slot>` Element
|
|
161
150
|
|
|
162
|
-
mono-jsx uses [`<slot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) element to render the slotted content(Equivalent to React's `children`
|
|
151
|
+
mono-jsx uses [`<slot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) element to render the slotted content (Equivalent to React's `children` property). Plus, you also can add the `name` attribute to define a named slot.
|
|
163
152
|
|
|
164
153
|
```jsx
|
|
165
154
|
function Container() {
|
|
@@ -219,7 +208,7 @@ function Button() {
|
|
|
219
208
|
```
|
|
220
209
|
|
|
221
210
|
> [!NOTE]
|
|
222
|
-
> the event handler would never be called in server-side.
|
|
211
|
+
> the event handler would never be called in server-side. It will be serialized to a string and sent to the client-side. **This means you should NOT use any server-side variables or functions in the event handler.**
|
|
223
212
|
|
|
224
213
|
```tsx
|
|
225
214
|
function Button(this: FC, props: { role: string }) {
|
|
@@ -260,7 +249,7 @@ function App() {
|
|
|
260
249
|
mono-jsx provides a minimal state runtime that allows you to update view based on state changes in client-side.
|
|
261
250
|
|
|
262
251
|
```tsx
|
|
263
|
-
function
|
|
252
|
+
function Counter(
|
|
264
253
|
this: FC<{ count: number }>,
|
|
265
254
|
props: { initialCount?: number },
|
|
266
255
|
) {
|
|
@@ -344,12 +333,12 @@ function App(this: FC<{ lang: "en" | "zh" | "emoji" }>) {
|
|
|
344
333
|
|
|
345
334
|
## Streaming Rendering
|
|
346
335
|
|
|
347
|
-
mono-jsx renders your `<html>` as a readable stream, that allows async function components are rendered
|
|
336
|
+
mono-jsx renders your `<html>` as a readable stream, that allows async function components are rendered asynchronously. You can set a `placeholder` attribute to show a loading state while the async component is loading.
|
|
348
337
|
|
|
349
338
|
```jsx
|
|
350
339
|
async function Sleep(ms) {
|
|
351
340
|
await new Promise((resolve) => setTimeout(resolve, ms));
|
|
352
|
-
return <
|
|
341
|
+
return <slot />;
|
|
353
342
|
}
|
|
354
343
|
|
|
355
344
|
export default {
|
|
@@ -369,7 +358,7 @@ You can also set `rendering` attribute to "eager" to render the async component
|
|
|
369
358
|
```jsx
|
|
370
359
|
async function Sleep(ms) {
|
|
371
360
|
await new Promise((resolve) => setTimeout(resolve, ms));
|
|
372
|
-
return <
|
|
361
|
+
return <slot />;
|
|
373
362
|
}
|
|
374
363
|
|
|
375
364
|
export default {
|
package/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// index.ts
|
|
2
|
-
console.log("
|
|
2
|
+
console.log("Welcome to mono-jsx!");
|