@live-change/vue3-ssr 0.9.197 → 0.9.199
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 +88 -0
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: @live-change/vue3-ssr
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
## @live-change/vue3-ssr
|
|
6
|
+
|
|
7
|
+
Pakiet `@live-change/vue3-ssr` dostarcza **warstwę API dla Vue 3** nad Live Change DAO oraz narzędzia do SSR:
|
|
8
|
+
|
|
9
|
+
- **client API** – obiekt `$lc` z widokami, akcjami, modelami i konfiguracją klienta
|
|
10
|
+
- **hooki Vue** – `useApi`, `usePath`, `useLive`, `useFetch`, `useViews`, `useActions`, `useClient`, `useUid`
|
|
11
|
+
- **SSR i prerender** – cache DAO na serwerze i na kliencie, prefetch tras
|
|
12
|
+
- **metadane** – `api.metadata` z definicjami usług, modeli, widoków i klienta
|
|
13
|
+
|
|
14
|
+
Ten pakiet jest używany w każdej aplikacji frontendowej opartej o Live Change (np. `family-tree`, `speed-dating`).
|
|
15
|
+
|
|
16
|
+
### Podstawowe pojęcia
|
|
17
|
+
|
|
18
|
+
- **DAO** – warstwa danych Live Change (observable views, commands, metadata)
|
|
19
|
+
- **API** – instancja klasy `Api` owinięta nad DAO
|
|
20
|
+
- **Path** – ścieżka DAO opisująca widok (`[service, view, params]`)
|
|
21
|
+
- **SSR cache** – dane wstrzykiwane z serwera do klienta, aby uniknąć podwójnych fetchy
|
|
22
|
+
|
|
23
|
+
### Użycie hooków w komponentach
|
|
24
|
+
|
|
25
|
+
Najczęściej używane hooki:
|
|
26
|
+
|
|
27
|
+
- `useApi()` – dostęp do `$lc` (klienta, configu, metadanych)
|
|
28
|
+
- `usePath()` – generowanie ścieżek widoków i akcji
|
|
29
|
+
- `useLive(path)` – żywe obserwowanie widoku (reaktywny wynik)
|
|
30
|
+
- `useActions()` – wywoływanie akcji jako metod
|
|
31
|
+
|
|
32
|
+
Przykład minimalnej integracji w komponencie:
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
import { computed } from 'vue'
|
|
36
|
+
import { useApi, usePath, useLive, useActions } from '@live-change/vue3-ssr'
|
|
37
|
+
|
|
38
|
+
const api = useApi()
|
|
39
|
+
const path = usePath()
|
|
40
|
+
const actions = useActions()
|
|
41
|
+
|
|
42
|
+
const userPath = computed(() => path.user.profile({ user: api.client.value.user }))
|
|
43
|
+
const user = await useLive(userPath)
|
|
44
|
+
|
|
45
|
+
async function saveProfile(changes) {
|
|
46
|
+
await actions.user.updateProfile({ ...changes })
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Metadane i definicje usług
|
|
51
|
+
|
|
52
|
+
`vue3-ssr` pobiera metadane API i generuje wygodne struktury:
|
|
53
|
+
|
|
54
|
+
- `api.services[serviceName].actions[...].definition`
|
|
55
|
+
- `api.services[serviceName].views[...].definition`
|
|
56
|
+
- `api.services[serviceName].models[... ]`
|
|
57
|
+
- `api.services[serviceName].config` – konfiguracja klienta usługi
|
|
58
|
+
|
|
59
|
+
Możesz np. pobrać definicję modelu:
|
|
60
|
+
|
|
61
|
+
```javascript
|
|
62
|
+
import { useApi } from '@live-change/vue3-ssr'
|
|
63
|
+
|
|
64
|
+
const api = useApi()
|
|
65
|
+
const eventDefinition = api.services.speedDating.models.Event
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Synchronizacja czasu
|
|
69
|
+
|
|
70
|
+
`useTimeSynchronization()` zapewnia spójny czas między serwerem a przeglądarką:
|
|
71
|
+
|
|
72
|
+
```javascript
|
|
73
|
+
import { currentTime } from '@live-change/frontend-base'
|
|
74
|
+
import { useTimeSynchronization } from '@live-change/vue3-ssr'
|
|
75
|
+
|
|
76
|
+
const timeSync = useTimeSynchronization()
|
|
77
|
+
const serverTime = timeSync.localToServerComputed(currentTime)
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Przykłady z projektów
|
|
81
|
+
|
|
82
|
+
- `family-tree/front/src/App.vue`:
|
|
83
|
+
- użycie `useApi`, `usePath`, `useActions`, `live` do zgody na regulaminy i analitykę
|
|
84
|
+
- `speed-dating/front/src/App.vue`:
|
|
85
|
+
- użycie `useClient`, `useApi`, `usePath`, `live` do identyfikacji użytkownika i zgód
|
|
86
|
+
|
|
87
|
+
Te projekty są dobrym źródłem „żywych” przykładów korzystania z `@live-change/vue3-ssr` w złożonych aplikacjach SSR.
|
|
88
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@live-change/vue3-ssr",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.199",
|
|
4
4
|
"description": "Live Change Framework - vue components",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
},
|
|
22
22
|
"homepage": "https://github.com/live-change/live-change-stack",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@live-change/dao-vue3": "^0.9.
|
|
25
|
-
"@live-change/uid": "^0.9.
|
|
24
|
+
"@live-change/dao-vue3": "^0.9.199",
|
|
25
|
+
"@live-change/uid": "^0.9.199",
|
|
26
26
|
"@vueuse/core": "^12.3.0",
|
|
27
27
|
"debug": "^4.3.4"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "1900043a10cf9ad49b9cc33a539fb973706de962"
|
|
30
30
|
}
|