2022-09-09 11:53:35 +00:00
|
|
|
@startuml
|
|
|
|
|
actor User
|
|
|
|
|
participant Browser
|
|
|
|
|
participant Vercel
|
2023-02-17 09:21:02 +00:00
|
|
|
participant article.page.server.ts
|
2022-09-09 11:53:35 +00:00
|
|
|
participant Solid
|
|
|
|
|
participant Store
|
|
|
|
|
|
|
|
|
|
User -> Browser: discours.io
|
|
|
|
|
activate Browser
|
|
|
|
|
Browser -> Vercel: GET <slug>
|
|
|
|
|
activate Vercel
|
2023-02-17 09:21:02 +00:00
|
|
|
Vercel -> article.page.server.ts: render
|
|
|
|
|
activate article.page.server.ts
|
|
|
|
|
article.page.server.ts -> apiClient: getArticle({ slug })
|
2022-09-09 11:53:35 +00:00
|
|
|
activate apiClient
|
|
|
|
|
apiClient -> DB: query: articleBySlug
|
|
|
|
|
activate DB
|
|
|
|
|
DB --> apiClient: response
|
|
|
|
|
deactivate DB
|
2023-02-17 09:21:02 +00:00
|
|
|
apiClient --> article.page.server.ts: article data
|
2022-09-09 11:53:35 +00:00
|
|
|
deactivate apiClient
|
2023-02-17 09:21:02 +00:00
|
|
|
article.page.server.ts -> Solid: render <ArticlePage article={article} />
|
2022-09-09 11:53:35 +00:00
|
|
|
activate Solid
|
|
|
|
|
Solid -> Store: useCurrentArticleStore(article)
|
|
|
|
|
activate Store
|
|
|
|
|
Store -> Store: create store with initial data (server)
|
|
|
|
|
Store --> Solid: currentArticle
|
|
|
|
|
deactivate Store
|
|
|
|
|
Solid -> Solid: render component
|
2023-02-17 09:21:02 +00:00
|
|
|
Solid --> article.page.server.ts: rendered component
|
2022-09-09 11:53:35 +00:00
|
|
|
deactivate Solid
|
2023-02-17 09:21:02 +00:00
|
|
|
article.page.server.ts --> Vercel: rendered page
|
2022-09-09 11:53:35 +00:00
|
|
|
Vercel -> Vercel: save rendered page to CDN
|
2023-02-17 09:21:02 +00:00
|
|
|
deactivate article.page.server.ts
|
2022-09-09 11:53:35 +00:00
|
|
|
Vercel --> Browser: rendered page
|
|
|
|
|
deactivate Vercel
|
|
|
|
|
Browser --> User: rendered page
|
|
|
|
|
deactivate Browser
|
|
|
|
|
Browser -> Browser: load client scripts
|
|
|
|
|
Browser -> Solid: render <ArticlePage article={article} />
|
|
|
|
|
Solid -> Store: useCurrentArticleStore(article)
|
|
|
|
|
activate Store
|
|
|
|
|
Store -> Store: create store with initial data (client)
|
|
|
|
|
Store --> Solid: currentArticle
|
|
|
|
|
deactivate Store
|
|
|
|
|
Solid -> Solid: render component (no changes)
|
|
|
|
|
Solid -> Solid: onMount
|
|
|
|
|
Solid -> Store: loadArticleComments
|
|
|
|
|
activate Store
|
|
|
|
|
Store -> apiClient: getArticleComments
|
|
|
|
|
activate apiClient
|
2023-02-17 09:21:02 +00:00
|
|
|
apiClient -> DB: query: getReactions
|
2022-09-09 11:53:35 +00:00
|
|
|
activate DB
|
|
|
|
|
DB --> apiClient: response
|
|
|
|
|
deactivate DB
|
|
|
|
|
apiClient --> Store: comments data
|
|
|
|
|
deactivate apiClient
|
|
|
|
|
Store -> Store: update store
|
|
|
|
|
Store --> Solid: store updated
|
|
|
|
|
deactivate Store
|
|
|
|
|
Solid -> Solid: render comments
|
|
|
|
|
Solid --> Browser: rendered comments
|
|
|
|
|
Browser --> User: comments
|
|
|
|
|
@enduml
|
|
|
|
|
|
