/
Boot.purs
144 lines (135 loc) · 5.43 KB
/
Boot.purs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
module Elmish.Boot
( BootRecord
, boot
, defaultMain
) where
import Prelude
import Data.Maybe (Maybe(..))
import Effect (Effect)
import Effect.Class.Console as Console
import Elmish.Component as Comp
import Elmish.React as React
import Web.DOM.NonElementParentNode (getElementById) as DOM
import Web.HTML (window) as DOM
import Web.HTML.HTMLDocument (toNonElementParentNode) as DOM
import Web.HTML.Window (document) as DOM
-- | Support for the most common case entry point - i.e. mounting an Elmish
-- | component (i.e. `ComponentDef'` structure) to an HTML DOM element with a
-- | known ID, with support for server-side rendering.
-- |
-- | The function `boot` returns what we call `BootRecord` - a record of three
-- | functions:
-- |
-- | * `mount` - takes HTML element ID and props¹, creates an instance of the
-- | component, and mounts it to the HTML element in question
-- | * `hydrate` - same as `mount`, but expects the HTML element to already
-- | contain pre-rendered HTML inside. See React docs for more on
-- | server-side rendering:
-- | https://reactjs.org/docs/react-dom.html#hydrate
-- | * `renderToString` - meant to be called on the server (e.g. by running
-- | the code under NodeJS) to perform the server-side render. Takes
-- | props¹ and returns a `String` containing the resulting HTML.
-- |
-- | The idea is that the PureScript code would export such `BootRecord` for
-- | consumption by bootstrap JavaScript code in the page and/or server-side
-- | NodeJS code (which could be written in PureScript or not). For "plain
-- | React" scenario, the JavaScript code in the page would just call `mount`.
-- | For "server-side rendering", the server would first call `renderToString`
-- | and serve the HTML to the client, and then the client-side JavaScript code
-- | would call `hydrate`.
-- |
-- | -------------------------------------------------------------------------
-- | ¹ "props" here is a parameter used to instantiate the component (see
-- | example below). It is recommended that this parameter is a JavaScript
-- | record (hence the name "props"), because it would likely need to be
-- | supplied by some bootstrap JavaScript code.
-- |
-- | -------------------------------------------------------------------------
-- |
-- | Example:
-- |
-- | -- PureScript:
-- | module Foo(bootRecord) where
-- |
-- | type Props = { hello :: String, world :: Int }
-- |
-- | component :: Props -> ComponentDef' Aff Message State
-- | component = ...
-- |
-- | bootRecord :: BootRecord Props
-- | bootRecord = boot component
-- |
-- |
-- | // Server-side JavaScript NodeJS code
-- | const foo = require('output/Foo/index.js')
-- | const fooHtml = foo.bootRecord.renderToString({ hello: "Hi!", world: 42 })
-- | serveToClient("<html><body><div id='foo'>" + fooHtml + "</div></body></html>")
-- |
-- |
-- | // Client-side HTML + JS:
-- | <html>
-- | <body>
-- | <div id='foo'>
-- | ... server-side-rendered HTML goes here
-- | </div>
-- | </body>
-- | <script src="foo_bundle.js" />
-- | <script>
-- | Foo.bootRecord.hydrate('foo', { hello: "Hi!", world: 42 })
-- | </script>
-- | </html>
-- |
type BootRecord props =
{ mount :: String -> props -> Effect Unit
-- ^ Mount the component to a DOM element with given string ID
, renderToString :: props -> String
-- ^ Server-side render: render the component as an HTML string
, hydrate :: String -> props -> Effect Unit
-- ^ Mount the component to a DOM element with given string ID, where the DOM
-- element is expected to have HTML contents previously generated via
-- `renderToString`. See React docs for more gotchas:
-- https://reactjs.org/docs/react-dom.html#hydrate
}
-- | Creates a boot record for the given component. See comments for `BootRecord`.
boot :: forall msg state props. (props -> Comp.ComponentDef msg state) -> BootRecord props
boot mkDef =
{ mount: mountVia React.render
, renderToString
, hydrate: mountVia React.hydrate
}
where
renderToString props = React.renderToString $ def.view state0 (const $ pure unit)
where
def = mkDef props
Comp.Transition state0 _ = def.init
mountVia f domElementId props =
DOM.window
>>= (map DOM.toNonElementParentNode <<< DOM.document)
>>= DOM.getElementById domElementId
>>= case _ of
Nothing ->
Console.error $ "Element #" <> domElementId <> " not found"
Just e -> do
render <- Comp.construct (mkDef props)
f render e
-- | This function supports the simplest (almost toy?) use case where there is
-- | no server, no server-side rendering, all that exists is an HTML page that
-- | loads the JS bundle (compiled from PureScript), and expects the bundle to
-- | breath life into the page. For this case, declare your bundle entry point
-- | (i.e. your `main` function) as a call to `defaultMain`, passing it DOM
-- | element ID to bind to and the UI component to bind to it.
-- |
-- | Example:
-- |
-- | module Main
-- | import MyComponent(def)
-- | import Elmish.Boot as Boot
-- |
-- | main :: Effect Unit
-- | main = Boot.defaultMain { elementId: "app", def: def }
-- |
defaultMain :: forall msg state. { elementId :: String, def :: Comp.ComponentDef msg state } -> Effect Unit
defaultMain { elementId, def } =
bootRec.mount elementId unit
where
bootRec = boot \_ -> def