Skip to content

Adding Elmish.Toastr to demo css import #1

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

Open
nimzi wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Adding Elmish.Toastr to demo css import #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb86719
Adding Elmish.Toastr to demo css import
Nov 10, 2021
a9957b5
Succefful Bulma experiments with esbuild
Nov 10, 2021
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
4 changes: 3 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,6 @@ node_modules
.build
bin
obj
out
out
.fake
.ionide
3 changes: 3 additions & 0 deletions build.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import {promises as fs} from 'fs';
import {sassPlugin} from "esbuild-sass-plugin";

import esbuild from 'esbuild';

/**
Expand Down Expand Up @@ -34,6 +36,7 @@ const bundle = async (sourceDir, entryFile, destinationDir, productionMode = fal
sourcemap: !productionMode,
// Folder to put all generated files
outdir: destinationDir,
plugins: [sassPlugin()]
});

if (productionMode) {
Expand Down
5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,11 @@
"start": "dotnet fable watch src -s -o .build --run node build.mjs"
},
"dependencies": {
"bulma": "^0.9.3",
"esbuild-sass-plugin": "^1.7.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-dom": "^17.0.2",
"toastr": "^2.1.4"
},
"devDependencies": {
"esbuild": "^0.13.12",
Expand Down
2 changes: 2 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
<head>
<meta charset="utf-8">
<title>Elmish App</title>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css"> -->
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="elmish-app"></div>
Expand Down
110 changes: 102 additions & 8 deletions src/App.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,40 +10,134 @@ open Elmish.React
open Elmish.Debug
open Fable.React
open Fable.React.Props
open Elmish
open Elmish.Toastr

open Feliz
open Feliz.Bulma


Fable.Core.JsInterop.importSideEffects "../node_modules/toastr/toastr.scss"
Fable.Core.JsInterop.importSideEffects "../node_modules/bulma/bulma.sass"

// MODEL

type Model = int

type Msg =
| Increment
| Decrement

let init () : Model = 0
let init () = 0, Cmd.none

// UPDATE

let update (msg: Msg) (model: Model) =
let infoToast =
Toastr.message "You clicked previous toast"
|> Toastr.title "Clicked"
|> Toastr.info

match msg with
| Increment -> model + 1
| Decrement -> model - 1
| Increment -> model + 1, infoToast
| Decrement -> model - 1, Cmd.none

// VIEW (rendered with React)

let view (model: Model) dispatch =
let view (model: Model) dispatch =
let mydiv (clazz:string) (kids:seq<ReactElement>) =
Html.div [
prop.className clazz
prop.children kids
]

let mydiv' classes (kids:seq<ReactElement>) =
Html.div [
prop.classes classes
prop.children kids
]


div [] [
button [ OnClick(fun _ -> dispatch Increment) ] [
Fable.React.Standard.button [ OnClick(fun _ -> dispatch Increment) ] [
str "+"
]
div [] [ str (string model) ]
button [ OnClick(fun _ -> dispatch Decrement) ] [
Fable.React.Standard.button [ OnClick(fun _ -> dispatch Decrement) ] [
str "-"
]

hr []
Bulma.button.button [
Bulma.color.isPrimary
prop.text "Primary"
]

hr []


Bulma.hero [
hero.isFullHeight
color.isLight
prop.children [
Bulma.heroBody [
Bulma.container [
Bulma.columns [
columns.isCentered
prop.children [
Bulma.column [
column.is5Tablet
column.is4Desktop
column.is3Widescreen
// mydiv' ["column"; "is-5-tablet"; "is-4-desktop"; "is-3-widescreen"]

prop.children [
Html.form [
Bulma.field.div [
Bulma.label "Username"
Bulma.control.div [
Bulma.input.text [
prop.placeholder "nickname"
]
]
]
Bulma.field.div [
Bulma.label "Password"
Bulma.control.div [
Bulma.input.password [
prop.placeholder "*****"
]
]
]
Bulma.field.div [
Bulma.field.isGrouped
Bulma.field.isGroupedCentered
prop.children [
Bulma.control.div [
Bulma.button.button [
Bulma.color.isLink
prop.text "Submit"
]
]
]
]
]
]
]
]
]
]
]



]
]


]

// App
Program.mkSimple init update view
Program.mkProgram init update view
|> Program.withReactSynchronous "elmish-app"
|> Program.withConsoleTrace
|> Program.withDebugger
Expand Down
2 changes: 2 additions & 0 deletions src/App.fsproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@
</ItemGroup>

<ItemGroup>
<PackageReference Include="Elmish.Toastr" Version="2.1.0" />
<PackageReference Include="Fable.Core" Version="3.4.0" />
<PackageReference Include="Fable.Elmish.Debugger" Version="3.3.0" />
<PackageReference Include="Fable.Elmish.React" Version="3.0.1" />
<PackageReference Include="Feliz.Bulma" Version="2.18.0" />
</ItemGroup>
</Project>
Loading