mono-jsx 0.1.1 → 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 +12 -12
- package/package.json +1 -1
- package/types/css.d.ts +699 -586
- package/types/mono.d.ts +1 -1
package/README.md
CHANGED
|
@@ -5,9 +5,9 @@
|
|
|
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
|
|
|
@@ -57,7 +57,7 @@ bunx mono-jsx setup
|
|
|
57
57
|
|
|
58
58
|
## Usage
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
mono-jsx allows you to return an `<html>` JSX element as a `Response` object in the `fetch` handler.
|
|
61
61
|
|
|
62
62
|
```tsx
|
|
63
63
|
// app.tsx
|
|
@@ -113,11 +113,11 @@ mono-jsx uses [**JSX**](https://react.dev/learn/describing-the-ui) to describe t
|
|
|
113
113
|
|
|
114
114
|
### Using Standard HTML Property Names
|
|
115
115
|
|
|
116
|
-
mono-jsx
|
|
116
|
+
mono-jsx adopts standard HTML property names, avoiding React's custom property naming conventions.
|
|
117
117
|
|
|
118
|
-
- `className`
|
|
119
|
-
- `htmlFor`
|
|
120
|
-
- `onChange`
|
|
118
|
+
- `className` becomes `class`
|
|
119
|
+
- `htmlFor` becomes `for`
|
|
120
|
+
- `onChange` becomes `onInput`
|
|
121
121
|
|
|
122
122
|
### Composition `class`
|
|
123
123
|
|
|
@@ -148,7 +148,7 @@ mono-jsx allows you to use [pseudo classes](https://developer.mozilla.org/en-US/
|
|
|
148
148
|
|
|
149
149
|
### `<slot>` Element
|
|
150
150
|
|
|
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`
|
|
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.
|
|
152
152
|
|
|
153
153
|
```jsx
|
|
154
154
|
function Container() {
|
|
@@ -208,7 +208,7 @@ function Button() {
|
|
|
208
208
|
```
|
|
209
209
|
|
|
210
210
|
> [!NOTE]
|
|
211
|
-
> 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.**
|
|
212
212
|
|
|
213
213
|
```tsx
|
|
214
214
|
function Button(this: FC, props: { role: string }) {
|
|
@@ -333,12 +333,12 @@ function App(this: FC<{ lang: "en" | "zh" | "emoji" }>) {
|
|
|
333
333
|
|
|
334
334
|
## Streaming Rendering
|
|
335
335
|
|
|
336
|
-
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.
|
|
337
337
|
|
|
338
338
|
```jsx
|
|
339
339
|
async function Sleep(ms) {
|
|
340
340
|
await new Promise((resolve) => setTimeout(resolve, ms));
|
|
341
|
-
return <
|
|
341
|
+
return <slot />;
|
|
342
342
|
}
|
|
343
343
|
|
|
344
344
|
export default {
|
|
@@ -358,7 +358,7 @@ You can also set `rendering` attribute to "eager" to render the async component
|
|
|
358
358
|
```jsx
|
|
359
359
|
async function Sleep(ms) {
|
|
360
360
|
await new Promise((resolve) => setTimeout(resolve, ms));
|
|
361
|
-
return <
|
|
361
|
+
return <slot />;
|
|
362
362
|
}
|
|
363
363
|
|
|
364
364
|
export default {
|