Skip to content

Commit 8081b62

Browse files
LarocceauLarocceau
committed
make compatible with vite; remove excessive use of diff; fix some code snippets; make coherent with new todoapp structure
1 parent 41acbc7 commit 8081b62

File tree

1 file changed

+82
-146
lines changed

1 file changed

+82
-146
lines changed

‎docs/recipes/client-server/fable.forms.md‎

Lines changed: 82 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -7,74 +7,56 @@ First off, you need to create a SAFE app, [install the relevant dependencies](ht
77
dotnet new SAFE
88
dotnet tool restore
99
```
10+
1.Add bulma to your project:
11+
follow [this recipe](../ui/add-bulma.md)
1012

1113
1. Install Fable.Form.Simple.Bulma using Paket:
1214
```sh
13-
dotnet paket add --project src/Client/ Fable.Form.Simple.Bulma --version 3.0.0
15+
dotnet paket add Fable.Form.Simple.Bulma -p Client
1416
```
1517

1618
1. Install bulma and fable-form-simple-bulma npm packages:
1719
```sh
1820
npm add fable-form-simple-bulma
19-
npm add bulma@0.9.0
21+
npm add bulma
2022
```
2123

2224
## Register styles
2325

24-
1. Create `./src/Client/style.scss` with the following contents:
26+
1. Rename `src/Client/Index.css` to `Index.scss`
2527

26-
=== "Code"
27-
``` { .scss title="style.scss" }
28-
@import "~bulma";
29-
@import "~fable-form-simple-bulma";
30-
```
31-
32-
=== "Diff"
33-
``` { .diff title="style.scss" }
34-
+@import "~bulma";
35-
+@import "~fable-form-simple-bulma";
36-
```
28+
2. Update the import in `App.fs`
3729

38-
1. Update webpack config to include the new stylesheet:
39-
40-
a. Add a `cssEntry` property to the `CONFIG` object:
41-
42-
=== "Code"
43-
```{ .js title="webpack.config.js" }
44-
cssEntry: './src/Client/style.scss',
45-
```
46-
47-
=== "Diff"
48-
```{ .diff title="webpack.config.js" }
49-
+cssEntry: './src/Client/style.scss',
50-
```
30+
=== "Code"
31+
```.fs title="App.fs"
32+
...
33+
importSideEffects "./index.scss"
34+
...
35+
```
36+
=== "Diff"
37+
```.diff title="App.fs"
38+
...
39+
- importSideEffects "./index.css"
40+
+ importSideEffects "./index.scss"
41+
...
42+
```
5143

52-
b. Modify the `entry` property of the object returned from `module.exports` to include `cssEntry`:
44+
3. Import bulma and fable-form-simple in `Index.scss`
5345

5446
=== "Code"
55-
```{ .js title="webpack.config.js" }
56-
entry: isProduction ? {
57-
app: [resolve(config.fsharpEntry), resolve(config.cssEntry)]
58-
} : {
59-
app: resolve(config.fsharpEntry),
60-
style: resolve(config.cssEntry)
61-
},
47+
``` .scss title="Index.scss"
48+
@import "~bulma";
49+
@import "~fable-form-simple-bulma";
50+
...
6251
```
63-
6452
=== "Diff"
65-
```{ .diff title="webpack.config.js" }
66-
- entry: {
67-
- app: resolve(config.fsharpEntry)
68-
- },
69-
+ entry: isProduction ? {
70-
+ app: [resolve(config.fsharpEntry), resolve(config.cssEntry)]
71-
+ } : {
72-
+ app: resolve(config.fsharpEntry),
73-
+ style: resolve(config.cssEntry)
74-
+ },
53+
``` .diff title="Index.scss"
54+
+ @import "~bulma";
55+
+ @import "~fable-form-simple-bulma";
56+
...
7557
```
7658

77-
1. Remove the Bulma stylesheet link from `./src/Client/index.html`, as it is no longer needed:
59+
2. Remove the Bulma stylesheet link from `./src/Client/index.html`, as it is no longer needed:
7860

7961
``` { .diff title="index.html (diff)" }
8062
<link rel="icon" type="image/png" href="/favicon.png"/>
@@ -102,17 +84,11 @@ With the above preparation done, you can use Fable.Form.Simple.Bulma in your `./
10284

10385
1. Create type `Values` to represent each input field on the form (a single textbox), and create a type `Form` which is an alias for `Form.View.Model<Values>`:
10486

105-
=== "Code"
106-
``` { .fsharp title="Index.fs" }
107-
type Values = { Todo: string }
108-
type Form = Form.View.Model<Values>
109-
```
11087

111-
=== "Diff"
112-
``` { .diff title="Index.fs" }
113-
+type Values = { Todo: string }
114-
+type Form = Form.View.Model<Values>
115-
```
88+
``` { .fsharp title="Index.fs" }
89+
type Values = { Todo: string }
90+
type Form = Form.View.Model<Values>
91+
```
11692

11793
1. In the `Model` type definition, replace `Input: string` with `Form: Form`
11894

@@ -215,100 +191,60 @@ With the above preparation done, you can use Fable.Form.Simple.Bulma in your `./
215191

216192
1. Create `form`. This defines the logic of the form, and how it responds to interaction:
217193

218-
=== "Code"
219-
``` { .fsharp title="Index.fs" }
220-
let form : Form.Form<Values, Msg, _> =
221-
let todoField =
222-
Form.textField
223-
{
224-
Parser = Ok
225-
Value = fun values -> values.Todo
226-
Update = fun newValue values -> { values with Todo = newValue }
227-
Error = fun _ -> None
228-
Attributes =
229-
{
230-
Label = "New todo"
231-
Placeholder = "What needs to be done?"
232-
HtmlAttributes = []
233-
}
234-
}
235-
236-
Form.succeed AddTodo
237-
|> Form.append todoField
238-
```
239-
240-
=== "Diff"
241-
``` { .diff title="Index.fs" }
242-
+let form : Form.Form<Values, Msg, _> =
243-
+ let todoField =
244-
+ Form.textField
245-
+ {
246-
+ Parser = Ok
247-
+ Value = fun values -> values.Todo
248-
+ Update = fun newValue values -> { values with Todo = newValue }
249-
+ Error = fun _ -> None
250-
+ Attributes =
251-
+ {
252-
+ Label = "New todo"
253-
+ Placeholder = "What needs to be done?"
254-
+ HtmlAttributes = []
255-
+ }
256-
+ }
257-
+
258-
+ Form.succeed AddTodo
259-
+ |> Form.append todoField
260-
```
194+
``` { .fsharp title="Index.fs" }
195+
let form : Form.Form<Values, Msg, _> =
196+
let todoField =
197+
Form.textField
198+
{
199+
Parser = Ok
200+
Value = fun values -> values.Todo
201+
Update = fun newValue values -> { values with Todo = newValue }
202+
Error = fun _ -> None
203+
Attributes =
204+
{
205+
Label = "New todo"
206+
Placeholder = "What needs to be done?"
207+
HtmlAttributes = []
208+
}
209+
}
210+
211+
Form.succeed AddTodo
212+
|> Form.append todoField
213+
```
261214

262-
1. In the function `containerBox`, remove the existing form view. Then replace it using `Form.View.asHtml` to render the view:
215+
1. In the function `todoAction`, remove the existing form view. Then replace it using `Form.View.asHtml` to render the view:
263216

264217
=== "Code"
265-
``` { .fsharp title="Index.fs" }
266-
let containerBox (model: Model) (dispatch: Msg -> unit) =
267-
Bulma.box [
268-
Bulma.content [
269-
Html.ol [
270-
for todo in model.Todos do
271-
Html.li [ prop.text todo.Description ]
272-
]
273-
]
274-
Form.View.asHtml
275-
{
276-
Dispatch = dispatch
277-
OnChange = FormChanged
278-
Action = Form.View.Action.SubmitOnly "Add"
279-
Validation = Form.View.Validation.ValidateOnBlur
280-
}
281-
form
282-
model.Form
283-
]
284-
```
285-
218+
``` { .fsharp title="Index.fs" }
219+
let private todoAction model dispatch =
220+
Form.View.asHtml
221+
{
222+
Dispatch = dispatch
223+
OnChange = FormChanged
224+
Action = Action.SubmitOnly "Add"
225+
Validation = Validation.ValidateOnBlur
226+
}
227+
form
228+
model.Form
229+
```
286230
=== "Diff"
287-
``` { .diff title="Index.fs" }
288-
let containerBox (model: Model) (dispatch: Msg -> unit) =
289-
Bulma.box [
290-
Bulma.content [
291-
Html.ol [
292-
for todo in model.Todos do
293-
Html.li [ prop.text todo.Description ]
294-
]
295-
]
296-
- Bulma.field.div [
297-
- ... removed for brevity ...
298-
- ]
299-
+ Form.View.asHtml
300-
+ {
301-
+ Dispatch = dispatch
302-
+ OnChange = FormChanged
303-
+ Action = Form.View.Action.SubmitOnly "Add"
304-
+ Validation = Form.View.Validation.ValidateOnBlur
305-
+ }
306-
+ form
307-
+ model.Form
308-
]
309-
```
231+
``` { .diff title="Index.fs" }
232+
let private todoAction model dispatch =
233+
- Html.div [
234+
- ...
235+
- ]
236+
+ Form.View.asHtml
237+
+ {
238+
+ Dispatch = dispatch
239+
+ OnChange = FormChanged
240+
+ Action = Action.SubmitOnly "Add"
241+
+ Validation = Validation.ValidateOnBlur
242+
+ }
243+
+ form
244+
+ model.Form
245+
```
310246

311247

312248
## Adding new functionality
313249

314-
With the basic structure in place, it's easy to add functionality to the form. For example, the [changes](https://github.com/CompositionalIT/safe-fable-form/commit/6342ee8f4abcfeed6dd5066718e6845e6e2174d0) necessary to add a high priority checkbox are pretty small.
250+
With the basic structure in place, it's easy to add functionality to the form. For example, the [changes](https://github.com/CompositionalIT/safe-fable-form/commit/6342ee8f4abcfeed6dd5066718e6845e6e2174d0) necessary to add a high priority checkbox are pretty small.

0 commit comments

Comments
 (0)