virtual-dom: client and server Roc files with shared interface

This commit is contained in:
Brian Carroll 2022-12-19 22:29:10 +00:00
parent e963f1f37e
commit 20f4e77d5d
No known key found for this signature in database
GPG Key ID: 5C7B2EC4101703C0
4 changed files with 50 additions and 35 deletions

View File

@ -0,0 +1,38 @@
interface ExampleApp
exposes [exampleApp, State]
imports [
pf.Html.{ App, Html, html, head, body, div, text, h1 },
]
State : {
answer : U32,
}
exampleApp : App State State
exampleApp = {
init,
render,
wasmUrl: "assets/example-client.wasm",
}
init = \result ->
when result is
Ok state -> state
Err _ -> { answer : 0 }
render : State -> Html State
render = \state ->
num = Num.toStr state.answer
html [] [
head [] [],
body [] [
h1 [] [text "The app"],
div [] [text "The answer is \(num)"],
],
]
expect
Html.renderStatic (Html.translateStatic (render { answer: 42 }))
==
"<!DOCTYPE html><html><head></head><body><h1>The app</h1><div>The answer is 42</div></body></html>"

View File

@ -1,35 +0,0 @@
app "app-server"
packages { pf: "platform/server-side.roc" }
imports [
pf.Html.{ App, Html, html, head, body, div, text, h1 },
]
provides [app] to pf
State : {
answer : U32,
}
app : App State State
app = {
init: \state -> state,
render,
wasmUrl: "assets/app.wasm",
}
# This function must be identical in both server and client.
# Of course, it should be in a separate .roc file imported into both,
# but that has not been implemented yet. Currently apps are single-file
# and can only import from the platform!
render : State -> Html State
render = \state ->
num = Num.toStr state.answer
html [] [
head [] [],
body [] [
h1 [] [text "The app"],
div [] [text "The answer is \(num)"],
],
]
expect Html.renderStatic (Html.translateStatic (render { answer: 42 })) == ""

View File

@ -0,0 +1,6 @@
app "example-client"
packages { pf: "platform/client-side.roc" }
imports [ExampleApp.{ exampleApp }]
provides [app] to pf
app = exampleApp

View File

@ -0,0 +1,6 @@
app "example-server"
packages { pf: "platform/server-side.roc" }
imports [ExampleApp.{ exampleApp }]
provides [app] to pf
app = exampleApp