Skip to content

Commit 3940da6

Browse files
kaashyapankaashyapan
committed
Add typesafe Elm style DSL for Html and Css
1 parent 7b8e68b commit 3940da6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

139 files changed

+6628
-10276
lines changed

‎dev/Program.fs

+23-15
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,18 @@ open Dash.NET
1717
//----------------------------------------------------------------------------------------------------
1818

1919
//The layout describes the components that Dash will render for you.
20-
open Dash.NET.HTML // this namespace contains the standard html copmponents, such as div, h1, etc.
21-
open Dash.NET.DCC // this namespace contains the dash core components, the heart of your Dash.NET app.
20+
open Dash.NET.Html // this namespace contains the standard html copmponents, such as div, h1, etc.
21+
open Dash.NET.Css // this namespace contains the standard html copmponents, such as div, h1, etc.
22+
open Dash.NET.HtmlProps
2223

23-
open HTMLPropTypes
24+
open Dash.NET.DCC // this namespace contains the dash core components, the heart of your Dash.NET app.
2425
open ComponentPropTypes
2526

2627
type A = {B:string}
2728

2829
//Note that this layout uses css classes defined by Bulma (https://bulma.io/), which gets defined as a css dependency in the app section below.
29-
let dslLayout =
30-
Div.div [ClassName "section"] [ //the style for 'main-section' is actually defined in a custom css that you can serve with the dash app.
30+
let dslLayout =
31+
Html.div [Attr.className "section"] [
3132
Dropdown.dropdown "testInput1" [
3233
Dropdown.Options [
3334
DropdownOption.create "1" "1" false "1"
@@ -37,18 +38,23 @@ let dslLayout =
3738
]
3839
Dropdown.Multi true
3940
] []
40-
Label.label [] [str "selected values:"]
41-
Div.div [Id "output-1"] []
42-
Div.div [Id "output-2"] []
43-
Div.div [Id "output-3"] []
44-
Div.div [Id "output-4"] []
45-
Button.button [ClassName "button is-primary"; Id "testInput2"] [str "Click ME!"]
46-
Br.br [] []
47-
Label.label [] [str "Number of clicks:"]
48-
Div.div [Id "output-5"] []
49-
]
41+
Html.label [] [Html.text "Selected values :"]
42+
Html.br [] []
43+
44+
Html.div [Attr.id "output-1"] []
45+
Html.div [Attr.id "output-2"] []
46+
Html.div [Attr.id "output-3"] []
47+
Html.div [Attr.id "output-4"] []
5048

49+
Html.button [Attr.className "button is-primary"; Attr.id "testInput2"] [Html.text "Click ME!"]
50+
Html.br [] []
5151

52+
Html.label [] [Html.text "Number of clicks:"]
53+
Html.div [Attr.id "output-5"] []
54+
55+
Html.p [Attr.className "has-text-primary"] [(Html.text "Testing custom Html DSL")]
56+
Html.p [Attr.style [(Css.color color.blue); Css.fontSize 30]] [ (Html.text "Testing custom Css DSL")]
57+
]
5258

5359
//----------------------------------------------------------------------------------------------------
5460
//============================================= Callbacks ============================================
@@ -91,6 +97,7 @@ let clickInput =
9197
)
9298
)
9399

100+
94101
//----------------------------------------------------------------------------------------------------
95102
//============================================= The App ==============================================
96103
//----------------------------------------------------------------------------------------------------
@@ -108,6 +115,7 @@ let myDashApp =
108115
|> DashApp.addCallback callbackArrayInput // register the callback that will update the map
109116
|> DashApp.addCallback clickInput // register the callback that will update the map
110117

118+
111119
// The things below are Giraffe/ASP:NetCore specific and will likely be abstracted in the future.
112120

113121
// ---------------------------------

‎src/Dash.NET/Dash.NET.fsproj

+3-133
Original file line numberDiff line numberDiff line change
@@ -30,139 +30,9 @@
3030
<None Include="DashComponents\Readme.md" />
3131
<None Include="DashComponents\BackboneGenerator.fsx" />
3232
<Compile Include="DashComponents\ComponentBase.fs" />
33-
<None Include="DashComponents\HTMLComponents\Readme.md" />
34-
<Compile Include="DashComponents\HTMLComponents\RawString.fs" />
35-
<Compile Include="DashComponents\HTMLComponents\A.fs" />
36-
<Compile Include="DashComponents\HTMLComponents\Abbr.fs" />
37-
<Compile Include="DashComponents\HTMLComponents\Acronym.fs" />
38-
<Compile Include="DashComponents\HTMLComponents\Address.fs" />
39-
<Compile Include="DashComponents\HTMLComponents\Area.fs" />
40-
<Compile Include="DashComponents\HTMLComponents\Article.fs" />
41-
<Compile Include="DashComponents\HTMLComponents\Aside.fs" />
42-
<Compile Include="DashComponents\HTMLComponents\Audio.fs" />
43-
<Compile Include="DashComponents\HTMLComponents\B.fs" />
44-
<Compile Include="DashComponents\HTMLComponents\Base.fs" />
45-
<Compile Include="DashComponents\HTMLComponents\Basefont.fs" />
46-
<Compile Include="DashComponents\HTMLComponents\Bdi.fs" />
47-
<Compile Include="DashComponents\HTMLComponents\Bdo.fs" />
48-
<Compile Include="DashComponents\HTMLComponents\Big.fs" />
49-
<Compile Include="DashComponents\HTMLComponents\Blink.fs" />
50-
<Compile Include="DashComponents\HTMLComponents\Blockquote.fs" />
51-
<Compile Include="DashComponents\HTMLComponents\Br.fs" />
52-
<Compile Include="DashComponents\HTMLComponents\Button.fs" />
53-
<Compile Include="DashComponents\HTMLComponents\Canvas.fs" />
54-
<Compile Include="DashComponents\HTMLComponents\Caption.fs" />
55-
<Compile Include="DashComponents\HTMLComponents\Center.fs" />
56-
<Compile Include="DashComponents\HTMLComponents\Cite.fs" />
57-
<Compile Include="DashComponents\HTMLComponents\Code.fs" />
58-
<Compile Include="DashComponents\HTMLComponents\Col.fs" />
59-
<Compile Include="DashComponents\HTMLComponents\Colgroup.fs" />
60-
<Compile Include="DashComponents\HTMLComponents\Command.fs" />
61-
<Compile Include="DashComponents\HTMLComponents\Content.fs" />
62-
<Compile Include="DashComponents\HTMLComponents\Data.fs" />
63-
<Compile Include="DashComponents\HTMLComponents\Datalist.fs" />
64-
<Compile Include="DashComponents\HTMLComponents\Dd.fs" />
65-
<Compile Include="DashComponents\HTMLComponents\Del.fs" />
66-
<Compile Include="DashComponents\HTMLComponents\Details.fs" />
67-
<Compile Include="DashComponents\HTMLComponents\Dfn.fs" />
68-
<Compile Include="DashComponents\HTMLComponents\Dialog.fs" />
69-
<Compile Include="DashComponents\HTMLComponents\Dl.fs" />
70-
<Compile Include="DashComponents\HTMLComponents\Dt.fs" />
71-
<Compile Include="DashComponents\HTMLComponents\Element.fs" />
72-
<Compile Include="DashComponents\HTMLComponents\Em.fs" />
73-
<Compile Include="DashComponents\HTMLComponents\Embed.fs" />
74-
<Compile Include="DashComponents\HTMLComponents\Fieldset.fs" />
75-
<Compile Include="DashComponents\HTMLComponents\Figcaption.fs" />
76-
<Compile Include="DashComponents\HTMLComponents\Figure.fs" />
77-
<Compile Include="DashComponents\HTMLComponents\Font.fs" />
78-
<Compile Include="DashComponents\HTMLComponents\Footer.fs" />
79-
<Compile Include="DashComponents\HTMLComponents\Form.fs" />
80-
<Compile Include="DashComponents\HTMLComponents\Frame.fs" />
81-
<Compile Include="DashComponents\HTMLComponents\Frameset.fs" />
82-
<Compile Include="DashComponents\HTMLComponents\H1.fs" />
83-
<Compile Include="DashComponents\HTMLComponents\H2.fs" />
84-
<Compile Include="DashComponents\HTMLComponents\H3.fs" />
85-
<Compile Include="DashComponents\HTMLComponents\H4.fs" />
86-
<Compile Include="DashComponents\HTMLComponents\H5.fs" />
87-
<Compile Include="DashComponents\HTMLComponents\H6.fs" />
88-
<Compile Include="DashComponents\HTMLComponents\Header.fs" />
89-
<Compile Include="DashComponents\HTMLComponents\Hgroup.fs" />
90-
<Compile Include="DashComponents\HTMLComponents\Hr.fs" />
91-
<Compile Include="DashComponents\HTMLComponents\I.fs" />
92-
<Compile Include="DashComponents\HTMLComponents\Iframe.fs" />
93-
<Compile Include="DashComponents\HTMLComponents\Img.fs" />
94-
<Compile Include="DashComponents\HTMLComponents\Ins.fs" />
95-
<Compile Include="DashComponents\HTMLComponents\Isindex.fs" />
96-
<Compile Include="DashComponents\HTMLComponents\Kbd.fs" />
97-
<Compile Include="DashComponents\HTMLComponents\Keygen.fs" />
98-
<Compile Include="DashComponents\HTMLComponents\Label.fs" />
99-
<Compile Include="DashComponents\HTMLComponents\Legend.fs" />
100-
<Compile Include="DashComponents\HTMLComponents\Li.fs" />
101-
<Compile Include="DashComponents\HTMLComponents\Link.fs" />
102-
<Compile Include="DashComponents\HTMLComponents\Listing.fs" />
103-
<Compile Include="DashComponents\HTMLComponents\Main.fs" />
104-
<Compile Include="DashComponents\HTMLComponents\MapEl.fs" />
105-
<Compile Include="DashComponents\HTMLComponents\Mark.fs" />
106-
<Compile Include="DashComponents\HTMLComponents\Marquee.fs" />
107-
<Compile Include="DashComponents\HTMLComponents\Meta.fs" />
108-
<Compile Include="DashComponents\HTMLComponents\Meter.fs" />
109-
<Compile Include="DashComponents\HTMLComponents\Multicol.fs" />
110-
<Compile Include="DashComponents\HTMLComponents\Nav.fs" />
111-
<Compile Include="DashComponents\HTMLComponents\Nextid.fs" />
112-
<Compile Include="DashComponents\HTMLComponents\Nobr.fs" />
113-
<Compile Include="DashComponents\HTMLComponents\Noscript.fs" />
114-
<Compile Include="DashComponents\HTMLComponents\ObjectEl.fs" />
115-
<Compile Include="DashComponents\HTMLComponents\Ol.fs" />
116-
<Compile Include="DashComponents\HTMLComponents\Optgroup.fs" />
117-
<Compile Include="DashComponents\HTMLComponents\Option.fs" />
118-
<Compile Include="DashComponents\HTMLComponents\Output.fs" />
119-
<Compile Include="DashComponents\HTMLComponents\P.fs" />
120-
<Compile Include="DashComponents\HTMLComponents\Param.fs" />
121-
<Compile Include="DashComponents\HTMLComponents\Picture.fs" />
122-
<Compile Include="DashComponents\HTMLComponents\Plaintext.fs" />
123-
<Compile Include="DashComponents\HTMLComponents\Pre.fs" />
124-
<Compile Include="DashComponents\HTMLComponents\Progress.fs" />
125-
<Compile Include="DashComponents\HTMLComponents\Q.fs" />
126-
<Compile Include="DashComponents\HTMLComponents\Rb.fs" />
127-
<Compile Include="DashComponents\HTMLComponents\Rp.fs" />
128-
<Compile Include="DashComponents\HTMLComponents\Rt.fs" />
129-
<Compile Include="DashComponents\HTMLComponents\Rtc.fs" />
130-
<Compile Include="DashComponents\HTMLComponents\Ruby.fs" />
131-
<Compile Include="DashComponents\HTMLComponents\S.fs" />
132-
<Compile Include="DashComponents\HTMLComponents\Samp.fs" />
133-
<Compile Include="DashComponents\HTMLComponents\Script.fs" />
134-
<Compile Include="DashComponents\HTMLComponents\Section.fs" />
135-
<Compile Include="DashComponents\HTMLComponents\Select.fs" />
136-
<Compile Include="DashComponents\HTMLComponents\Shadow.fs" />
137-
<Compile Include="DashComponents\HTMLComponents\Slot.fs" />
138-
<Compile Include="DashComponents\HTMLComponents\Small.fs" />
139-
<Compile Include="DashComponents\HTMLComponents\Source.fs" />
140-
<Compile Include="DashComponents\HTMLComponents\Spacer.fs" />
141-
<Compile Include="DashComponents\HTMLComponents\Span.fs" />
142-
<Compile Include="DashComponents\HTMLComponents\Strike.fs" />
143-
<Compile Include="DashComponents\HTMLComponents\Strong.fs" />
144-
<Compile Include="DashComponents\HTMLComponents\Sub.fs" />
145-
<Compile Include="DashComponents\HTMLComponents\Summary.fs" />
146-
<Compile Include="DashComponents\HTMLComponents\Sup.fs" />
147-
<Compile Include="DashComponents\HTMLComponents\Table.fs" />
148-
<Compile Include="DashComponents\HTMLComponents\Tbody.fs" />
149-
<Compile Include="DashComponents\HTMLComponents\Td.fs" />
150-
<Compile Include="DashComponents\HTMLComponents\Template.fs" />
151-
<Compile Include="DashComponents\HTMLComponents\Textarea.fs" />
152-
<Compile Include="DashComponents\HTMLComponents\Tfoot.fs" />
153-
<Compile Include="DashComponents\HTMLComponents\Th.fs" />
154-
<Compile Include="DashComponents\HTMLComponents\Thead.fs" />
155-
<Compile Include="DashComponents\HTMLComponents\Time.fs" />
156-
<Compile Include="DashComponents\HTMLComponents\Tr.fs" />
157-
<Compile Include="DashComponents\HTMLComponents\Track.fs" />
158-
<Compile Include="DashComponents\HTMLComponents\U.fs" />
159-
<Compile Include="DashComponents\HTMLComponents\Ul.fs" />
160-
<Compile Include="DashComponents\HTMLComponents\Var.fs" />
161-
<Compile Include="DashComponents\HTMLComponents\Video.fs" />
162-
<Compile Include="DashComponents\HTMLComponents\Wbr.fs" />
163-
<Compile Include="DashComponents\HTMLComponents\Xmp.fs" />
164-
<Compile Include="DashComponents\HTMLComponents\Title.fs" />
165-
<Compile Include="DashComponents\HTMLComponents\Div.fs" />
33+
<Compile Include="DashComponents\HTMLComponents\Css.fs" />
34+
<Compile Include="DashComponents\HTMLComponents\HtmlProps.fs" />
35+
<Compile Include="DashComponents\HTMLComponents\Html.fs" />
16636
<Compile Include="DashComponents\CoreComponents\RadioItems.fs" />
16737
<Compile Include="DashComponents\CoreComponents\Dropdown.fs" />
16838
<Compile Include="DashComponents\CoreComponents\Graph.fs" />

‎src/Dash.NET/DashComponents/ComponentBase.fs

-15
Original file line numberDiff line numberDiff line change
@@ -134,21 +134,6 @@ module ComponentPropTypes =
134134
}
135135
static member create border primary background = {Border=border; Primary=primary; Background=background}
136136

137-
module HTMLPropTypes =
138-
139-
type HTMLProps =
140-
| Id of string
141-
| ClassName of string
142-
| Style of DashComponentStyle
143-
| Custom of (string*obj)
144-
145-
static member toDynamicMemberDef (prop:HTMLProps) =
146-
match prop with
147-
| Id p -> "id", box p
148-
| ClassName p -> "className", box p
149-
| Style p -> "style", box p
150-
| Custom p -> p
151-
152137
type ComponentProperty =
153138
| Children
154139
| Value

‎src/Dash.NET/DashComponents/HTMLComponents/A.fs

-77
This file was deleted.

‎src/Dash.NET/DashComponents/HTMLComponents/Abbr.fs

-77
This file was deleted.

0 commit comments

Comments
 (0)