@llui/vike 0.0.1 → 0.0.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 +46 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,13 +1,56 @@
|
|
|
1
1
|
# @llui/vike
|
|
2
2
|
|
|
3
|
-
[Vike](https://vike.dev) SSR adapter for [LLui](https://github.com/fponticelli/llui).
|
|
4
|
-
|
|
5
|
-
Provides `onRenderHtml` and `onRenderClient` hooks for server-side rendering with hydration.
|
|
3
|
+
[Vike](https://vike.dev) SSR adapter for [LLui](https://github.com/fponticelli/llui). Server-side rendering with client hydration.
|
|
6
4
|
|
|
7
5
|
```bash
|
|
8
6
|
pnpm add @llui/vike
|
|
9
7
|
```
|
|
10
8
|
|
|
9
|
+
## Setup
|
|
10
|
+
|
|
11
|
+
Export the hooks from your Vike render files:
|
|
12
|
+
|
|
13
|
+
```ts
|
|
14
|
+
// pages/+onRenderHtml.ts
|
|
15
|
+
export { onRenderHtml } from '@llui/vike'
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
```ts
|
|
19
|
+
// pages/+onRenderClient.ts
|
|
20
|
+
export { onRenderClient } from '@llui/vike'
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## How It Works
|
|
24
|
+
|
|
25
|
+
### Server (`onRenderHtml`)
|
|
26
|
+
|
|
27
|
+
Renders the component tree to an HTML string on the server. Runs `resolveEffects()` to prefetch async data before serializing the initial state into the page.
|
|
28
|
+
|
|
29
|
+
```ts
|
|
30
|
+
// What happens internally:
|
|
31
|
+
// 1. resolveEffects(componentDef) -- resolve SSR data
|
|
32
|
+
// 2. renderToString(componentDef, resolvedState) -- generate HTML
|
|
33
|
+
// 3. Serialize state into <script> tag for hydration
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Client (`onRenderClient`)
|
|
37
|
+
|
|
38
|
+
Hydrates the server-rendered HTML on the client. Attaches event listeners and reactive bindings to existing DOM nodes without re-rendering.
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
// What happens internally:
|
|
42
|
+
// 1. Read serialized state from the page
|
|
43
|
+
// 2. hydrateApp(componentDef, existingDOM, state)
|
|
44
|
+
// 3. Component is now interactive
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## API
|
|
48
|
+
|
|
49
|
+
| Export | Description |
|
|
50
|
+
| ----------------- | -------------------------------------------------------- |
|
|
51
|
+
| `onRenderHtml` | Vike server hook -- renders component to HTML string |
|
|
52
|
+
| `onRenderClient` | Vike client hook -- hydrates server-rendered DOM |
|
|
53
|
+
|
|
11
54
|
## License
|
|
12
55
|
|
|
13
56
|
MIT
|