Skip to content

Replace Giraffe.ViewEngine with Feliz.Engine for a new Html & Css DSL #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 5, 2021
Merged

Replace Giraffe.ViewEngine with Feliz.Engine for a new Html & Css DSL #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 92 additions & 66 deletions dev/Program.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,47 +16,62 @@ open Dash.NET
//============================================== LAYOUT ==============================================
//----------------------------------------------------------------------------------------------------

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

open HTMLPropTypes
open Dash.NET.DCC // this namespace contains the dash core components, the heart of your Dash.NET app.
open ComponentPropTypes

type A = {B:string}
type A = { B: string }

//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.
let dslLayout =
Div.div [ClassName "section"] [ //the style for 'main-section' is actually defined in a custom css that you can serve with the dash app.
Dropdown.dropdown "testInput1" [
Dropdown.Options [
DropdownOption.create "1" "1" false "1"
DropdownOption.create 2 2 false "2"
DropdownOption.create 3L 3L false "3"
DropdownOption.create 4.1 4.1 false "4.1"
]
Dropdown.Multi true
] []
Label.label [] [str "selected values:"]
Div.div [Id "output-1"] []
Div.div [Id "output-2"] []
Div.div [Id "output-3"] []
Div.div [Id "output-4"] []
Button.button [ClassName "button is-primary"; Id "testInput2"] [str "Click ME!"]
Br.br [] []
Label.label [] [str "Number of clicks:"]
Div.div [Id "output-5"] []
let dslLayout =
Html.div [
Attr.className "section"
Attr.children [
Dropdown.dropdown "testInput1" [
Dropdown.Options [
DropdownOption.create "1" "1" false "1"
DropdownOption.create 2 2 false "2"
DropdownOption.create 3L 3L false "3"
DropdownOption.create 4.1 4.1 false "4.1"
]
Dropdown.Multi true
] []
Html.br []
Html.label [ Attr.children (Html.text "Selected values :") ]
Html.br []
Html.div [ Attr.id "output-1" ]
Html.div [ Attr.id "output-2" ]
Html.div [ Attr.id "output-3" ]
Html.div [ Attr.id "output-4" ]
Html.button [
Attr.className "button is-primary"
Attr.id "testInput2"
Attr.children "Click ME!" ]
Html.br []
Html.label [ Attr.children (Html.text "Number of clicks:") ]
Html.div [ Attr.id "output-5" ]
Html.p [
Attr.className "has-text-primary"
Attr.children (Html.text "Testing Attribute DSL") ]
Html.text "Testing Html DSL"
Html.custom ("P", [Attr.children (Html.text "This is a custom Html element")])
Html.p [
Attr.style [(Css.color Feliz.color.blue); Css.fontSize 30]
Attr.children (Html.text "Testing Css DSL")]
]
]



//----------------------------------------------------------------------------------------------------
//============================================= Callbacks ============================================
//----------------------------------------------------------------------------------------------------

//Callbacks define how your components can be updated and update each other. A callback has one or
//more Input components (defined by their id and the property that acts as input) and an output
//component (again defined by its id and output property). Additionally, a function that handles the
//Callbacks define how your components can be updated and update each other. A callback has one or
//more Input components (defined by their id and the property that acts as input) and an output
//component (again defined by its id and output property). Additionally, a function that handles the
//input and returns the desired output is needed.

open Newtonsoft.Json
Expand All @@ -83,84 +98,95 @@ let callbackArrayInput =

// usage of the new operators:
let clickInput =
Callback.singleOut(
Callback.singleOut (
"testInput2" @. N_Clicks,
"output-5" @. Children,
(fun (x:float) ->
"output-5" @. Children => sprintf "%A" x
)
(fun (x: float) -> "output-5" @. Children => sprintf "%A" x)
)

//----------------------------------------------------------------------------------------------------
//============================================= The App ==============================================
//----------------------------------------------------------------------------------------------------

//The 'DashApp' type is your central DashApp that contains all settings, configs, the layout, styles,
//scripts, etc. that makes up your Dash.NET app.
//The 'DashApp' type is your central DashApp that contains all settings, configs, the layout, styles,
//scripts, etc. that makes up your Dash.NET app.

let myDashApp =
DashApp.initDefault() // create a Dash.NET app with default settings
DashApp.initDefault () // create a Dash.NET app with default settings
|> DashApp.withLayout dslLayout // register the layout defined above.
|> DashApp.appendCSSLinks [
"main.css" // serve your custom css
"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css" // register bulma as an external css dependency
]
|> DashApp.addCallback callbackArrayInput // register the callback that will update the map
|> DashApp.addCallback clickInput // register the callback that will update the map



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

// ---------------------------------
// Error handler
// ---------------------------------

let errorHandler (ex : Exception) (logger : ILogger) =
let errorHandler (ex: Exception) (logger: ILogger) =
logger.LogError(ex, "An unhandled exception has occurred while executing the request.")
clearResponse >=> setStatusCode 500 >=> text ex.Message

clearResponse
>=> setStatusCode 500
>=> text ex.Message

// ---------------------------------
// Config and Main
// ---------------------------------

let configureCors (builder : CorsPolicyBuilder) =
builder.WithOrigins("http://localhost:8080")
.AllowAnyMethod()
.AllowAnyHeader()
|> ignore
let configureCors (builder: CorsPolicyBuilder) =
builder
.WithOrigins("http://localhost:8080")
.AllowAnyMethod()
.AllowAnyHeader()
|> ignore

let configureApp (app: IApplicationBuilder) =
let env =
app.ApplicationServices.GetService<IWebHostEnvironment>()

let configureApp (app : IApplicationBuilder) =
let env = app.ApplicationServices.GetService<IWebHostEnvironment>()
(match env.EnvironmentName with
| "Development" -> app.UseDeveloperExceptionPage()
| _ -> app.UseGiraffeErrorHandler(errorHandler))
| "Development" -> app.UseDeveloperExceptionPage()
| _ -> app.UseGiraffeErrorHandler(errorHandler))
.UseHttpsRedirection()
.UseCors(configureCors)
.UseStaticFiles()
.UseGiraffe(DashApp.toHttpHandler myDashApp)

let configureServices (services : IServiceCollection) =
services.AddCors() |> ignore
let configureServices (services: IServiceCollection) =
services.AddCors() |> ignore
services.AddGiraffe() |> ignore

let configureLogging (builder : ILoggingBuilder) =
builder.AddFilter(fun l -> l.Equals LogLevel.Debug)
.AddConsole()
.AddDebug() |> ignore
let configureLogging (builder: ILoggingBuilder) =
builder
.AddFilter(fun l -> l.Equals LogLevel.Debug)
.AddConsole()
.AddDebug()
|> ignore

[<EntryPoint>]
let main args =
let contentRoot = Directory.GetCurrentDirectory()
let webRoot = Path.Combine(contentRoot, "WebRoot")
Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(
fun webHostBuilder ->
webHostBuilder
.UseContentRoot(contentRoot)
.UseWebRoot(webRoot)
.Configure(Action<IApplicationBuilder> configureApp)
.ConfigureServices(configureServices)
.ConfigureLogging(configureLogging)
|> ignore)
let webRoot = Path.Combine(contentRoot, "WebRoot")

Host
.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(fun webHostBuilder ->
webHostBuilder
.UseContentRoot(contentRoot)
.UseWebRoot(webRoot)
.UseUrls("http://localhost:5000")
.Configure(Action<IApplicationBuilder> configureApp)
.ConfigureServices(configureServices)
.ConfigureLogging(configureLogging)
|> ignore)
.Build()
.Run()
0

0
135 changes: 2 additions & 133 deletions src/Dash.NET/Dash.NET.fsproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,138 +31,7 @@
<None Include="DashComponents\BackboneGenerator.fsx" />
<Compile Include="DashComponents\ComponentBase.fs" />
<None Include="DashComponents\HTMLComponents\Readme.md" />
<Compile Include="DashComponents\HTMLComponents\RawString.fs" />
<Compile Include="DashComponents\HTMLComponents\A.fs" />
<Compile Include="DashComponents\HTMLComponents\Abbr.fs" />
<Compile Include="DashComponents\HTMLComponents\Acronym.fs" />
<Compile Include="DashComponents\HTMLComponents\Address.fs" />
<Compile Include="DashComponents\HTMLComponents\Area.fs" />
<Compile Include="DashComponents\HTMLComponents\Article.fs" />
<Compile Include="DashComponents\HTMLComponents\Aside.fs" />
<Compile Include="DashComponents\HTMLComponents\Audio.fs" />
<Compile Include="DashComponents\HTMLComponents\B.fs" />
<Compile Include="DashComponents\HTMLComponents\Base.fs" />
<Compile Include="DashComponents\HTMLComponents\Basefont.fs" />
<Compile Include="DashComponents\HTMLComponents\Bdi.fs" />
<Compile Include="DashComponents\HTMLComponents\Bdo.fs" />
<Compile Include="DashComponents\HTMLComponents\Big.fs" />
<Compile Include="DashComponents\HTMLComponents\Blink.fs" />
<Compile Include="DashComponents\HTMLComponents\Blockquote.fs" />
<Compile Include="DashComponents\HTMLComponents\Br.fs" />
<Compile Include="DashComponents\HTMLComponents\Button.fs" />
<Compile Include="DashComponents\HTMLComponents\Canvas.fs" />
<Compile Include="DashComponents\HTMLComponents\Caption.fs" />
<Compile Include="DashComponents\HTMLComponents\Center.fs" />
<Compile Include="DashComponents\HTMLComponents\Cite.fs" />
<Compile Include="DashComponents\HTMLComponents\Code.fs" />
<Compile Include="DashComponents\HTMLComponents\Col.fs" />
<Compile Include="DashComponents\HTMLComponents\Colgroup.fs" />
<Compile Include="DashComponents\HTMLComponents\Command.fs" />
<Compile Include="DashComponents\HTMLComponents\Content.fs" />
<Compile Include="DashComponents\HTMLComponents\Data.fs" />
<Compile Include="DashComponents\HTMLComponents\Datalist.fs" />
<Compile Include="DashComponents\HTMLComponents\Dd.fs" />
<Compile Include="DashComponents\HTMLComponents\Del.fs" />
<Compile Include="DashComponents\HTMLComponents\Details.fs" />
<Compile Include="DashComponents\HTMLComponents\Dfn.fs" />
<Compile Include="DashComponents\HTMLComponents\Dialog.fs" />
<Compile Include="DashComponents\HTMLComponents\Dl.fs" />
<Compile Include="DashComponents\HTMLComponents\Dt.fs" />
<Compile Include="DashComponents\HTMLComponents\Element.fs" />
<Compile Include="DashComponents\HTMLComponents\Em.fs" />
<Compile Include="DashComponents\HTMLComponents\Embed.fs" />
<Compile Include="DashComponents\HTMLComponents\Fieldset.fs" />
<Compile Include="DashComponents\HTMLComponents\Figcaption.fs" />
<Compile Include="DashComponents\HTMLComponents\Figure.fs" />
<Compile Include="DashComponents\HTMLComponents\Font.fs" />
<Compile Include="DashComponents\HTMLComponents\Footer.fs" />
<Compile Include="DashComponents\HTMLComponents\Form.fs" />
<Compile Include="DashComponents\HTMLComponents\Frame.fs" />
<Compile Include="DashComponents\HTMLComponents\Frameset.fs" />
<Compile Include="DashComponents\HTMLComponents\H1.fs" />
<Compile Include="DashComponents\HTMLComponents\H2.fs" />
<Compile Include="DashComponents\HTMLComponents\H3.fs" />
<Compile Include="DashComponents\HTMLComponents\H4.fs" />
<Compile Include="DashComponents\HTMLComponents\H5.fs" />
<Compile Include="DashComponents\HTMLComponents\H6.fs" />
<Compile Include="DashComponents\HTMLComponents\Header.fs" />
<Compile Include="DashComponents\HTMLComponents\Hgroup.fs" />
<Compile Include="DashComponents\HTMLComponents\Hr.fs" />
<Compile Include="DashComponents\HTMLComponents\I.fs" />
<Compile Include="DashComponents\HTMLComponents\Iframe.fs" />
<Compile Include="DashComponents\HTMLComponents\Img.fs" />
<Compile Include="DashComponents\HTMLComponents\Ins.fs" />
<Compile Include="DashComponents\HTMLComponents\Isindex.fs" />
<Compile Include="DashComponents\HTMLComponents\Kbd.fs" />
<Compile Include="DashComponents\HTMLComponents\Keygen.fs" />
<Compile Include="DashComponents\HTMLComponents\Label.fs" />
<Compile Include="DashComponents\HTMLComponents\Legend.fs" />
<Compile Include="DashComponents\HTMLComponents\Li.fs" />
<Compile Include="DashComponents\HTMLComponents\Link.fs" />
<Compile Include="DashComponents\HTMLComponents\Listing.fs" />
<Compile Include="DashComponents\HTMLComponents\Main.fs" />
<Compile Include="DashComponents\HTMLComponents\MapEl.fs" />
<Compile Include="DashComponents\HTMLComponents\Mark.fs" />
<Compile Include="DashComponents\HTMLComponents\Marquee.fs" />
<Compile Include="DashComponents\HTMLComponents\Meta.fs" />
<Compile Include="DashComponents\HTMLComponents\Meter.fs" />
<Compile Include="DashComponents\HTMLComponents\Multicol.fs" />
<Compile Include="DashComponents\HTMLComponents\Nav.fs" />
<Compile Include="DashComponents\HTMLComponents\Nextid.fs" />
<Compile Include="DashComponents\HTMLComponents\Nobr.fs" />
<Compile Include="DashComponents\HTMLComponents\Noscript.fs" />
<Compile Include="DashComponents\HTMLComponents\ObjectEl.fs" />
<Compile Include="DashComponents\HTMLComponents\Ol.fs" />
<Compile Include="DashComponents\HTMLComponents\Optgroup.fs" />
<Compile Include="DashComponents\HTMLComponents\Option.fs" />
<Compile Include="DashComponents\HTMLComponents\Output.fs" />
<Compile Include="DashComponents\HTMLComponents\P.fs" />
<Compile Include="DashComponents\HTMLComponents\Param.fs" />
<Compile Include="DashComponents\HTMLComponents\Picture.fs" />
<Compile Include="DashComponents\HTMLComponents\Plaintext.fs" />
<Compile Include="DashComponents\HTMLComponents\Pre.fs" />
<Compile Include="DashComponents\HTMLComponents\Progress.fs" />
<Compile Include="DashComponents\HTMLComponents\Q.fs" />
<Compile Include="DashComponents\HTMLComponents\Rb.fs" />
<Compile Include="DashComponents\HTMLComponents\Rp.fs" />
<Compile Include="DashComponents\HTMLComponents\Rt.fs" />
<Compile Include="DashComponents\HTMLComponents\Rtc.fs" />
<Compile Include="DashComponents\HTMLComponents\Ruby.fs" />
<Compile Include="DashComponents\HTMLComponents\S.fs" />
<Compile Include="DashComponents\HTMLComponents\Samp.fs" />
<Compile Include="DashComponents\HTMLComponents\Script.fs" />
<Compile Include="DashComponents\HTMLComponents\Section.fs" />
<Compile Include="DashComponents\HTMLComponents\Select.fs" />
<Compile Include="DashComponents\HTMLComponents\Shadow.fs" />
<Compile Include="DashComponents\HTMLComponents\Slot.fs" />
<Compile Include="DashComponents\HTMLComponents\Small.fs" />
<Compile Include="DashComponents\HTMLComponents\Source.fs" />
<Compile Include="DashComponents\HTMLComponents\Spacer.fs" />
<Compile Include="DashComponents\HTMLComponents\Span.fs" />
<Compile Include="DashComponents\HTMLComponents\Strike.fs" />
<Compile Include="DashComponents\HTMLComponents\Strong.fs" />
<Compile Include="DashComponents\HTMLComponents\Sub.fs" />
<Compile Include="DashComponents\HTMLComponents\Summary.fs" />
<Compile Include="DashComponents\HTMLComponents\Sup.fs" />
<Compile Include="DashComponents\HTMLComponents\Table.fs" />
<Compile Include="DashComponents\HTMLComponents\Tbody.fs" />
<Compile Include="DashComponents\HTMLComponents\Td.fs" />
<Compile Include="DashComponents\HTMLComponents\Template.fs" />
<Compile Include="DashComponents\HTMLComponents\Textarea.fs" />
<Compile Include="DashComponents\HTMLComponents\Tfoot.fs" />
<Compile Include="DashComponents\HTMLComponents\Th.fs" />
<Compile Include="DashComponents\HTMLComponents\Thead.fs" />
<Compile Include="DashComponents\HTMLComponents\Time.fs" />
<Compile Include="DashComponents\HTMLComponents\Tr.fs" />
<Compile Include="DashComponents\HTMLComponents\Track.fs" />
<Compile Include="DashComponents\HTMLComponents\U.fs" />
<Compile Include="DashComponents\HTMLComponents\Ul.fs" />
<Compile Include="DashComponents\HTMLComponents\Var.fs" />
<Compile Include="DashComponents\HTMLComponents\Video.fs" />
<Compile Include="DashComponents\HTMLComponents\Wbr.fs" />
<Compile Include="DashComponents\HTMLComponents\Xmp.fs" />
<Compile Include="DashComponents\HTMLComponents\Title.fs" />
<Compile Include="DashComponents\HTMLComponents\Div.fs" />
<Compile Include="DashComponents\HTMLComponents\Html.fs" />
<Compile Include="DashComponents\CoreComponents\RadioItems.fs" />
<Compile Include="DashComponents\CoreComponents\Dropdown.fs" />
<Compile Include="DashComponents\CoreComponents\Graph.fs" />
Expand All @@ -184,8 +53,8 @@

<ItemGroup>
<PackageReference Include="Giraffe" Version="5.0.0" />
<PackageReference Include="Giraffe.ViewEngine" Version="1.4.0" />
<PackageReference Include="Plotly.NET" Version="2.0.0-preview.2" />
<PackageReference Include="Feliz.Engine" Version="1.0.0-beta-004" />
</ItemGroup>

</Project>
15 changes: 0 additions & 15 deletions src/Dash.NET/DashComponents/ComponentBase.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,21 +134,6 @@ module ComponentPropTypes =
}
static member create border primary background = {Border=border; Primary=primary; Background=background}

module HTMLPropTypes =

type HTMLProps =
| Id of string
| ClassName of string
| Style of DashComponentStyle
| Custom of (string*obj)

static member toDynamicMemberDef (prop:HTMLProps) =
match prop with
| Id p -> "id", box p
| ClassName p -> "className", box p
| Style p -> "style", box p
| Custom p -> p

type ComponentProperty =
| Children
| Value
Expand Down
Loading