Add a sample

.gitignore

@@ -185,3 +185,4 @@ docs
 .fake/
 FSharp.Formatting.svclog
 _NCrunch*
+Sample/node_modules

Sample/.editorconfig

@@ -0,0 +1,15 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+insert_final_newline = true
+charset = utf-8
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+[*.styl]
+indent_size = 4

Sample/NuGet.Config

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <packageSources>
+    <clear />
+    <add key="NuGet.org" value="https://api.nuget.org/v3/index.json" />
+  </packageSources>
+  <disabledPackageSources>
+     <clear />
+  </disabledPackageSources>
+</configuration>

Sample/README.md

@@ -0,0 +1,8 @@
+## Build and running the app
+
+1. Install npm dependencies: `yarn install` or `npm install`
+2. Install dotnet dependencies: `dotnet restore`
+3. Start Fable server and Webpack dev server: `dotnet fable npm-run start`
+4. In your browser, open: http://localhost:8080/
+
+Any modification you do to the F# code will be reflected in the web page after saving.

Sample/Sample.fsproj

@@ -0,0 +1,39 @@
+<Project Sdk="FSharp.NET.Sdk;Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <TargetFramework>netstandard1.6</TargetFramework>
+  </PropertyGroup>
+  <ItemGroup>
+    <!-- Global to the app -->
+    <Compile Include="src/Global.fs" />
+    <!-- Info -->
+    <Compile Include="src/Info/View.fs" />
+    <!-- Counter -->
+    <Compile Include="src/Counter/Types.fs" />
+    <Compile Include="src/Counter/State.fs" />
+    <Compile Include="src/Counter/View.fs" />
+    <!-- Home -->
+    <Compile Include="src/Home/Types.fs" />
+    <Compile Include="src/Home/State.fs" />
+    <Compile Include="src/Home/View.fs" />
+    <!-- Navbar -->
+    <Compile Include="src/Navbar/View.fs" />
+    <!-- App -->
+    <Compile Include="src/Types.fs" />
+    <Compile Include="src/State.fs" />
+    <Compile Include="src/App.fs" />
+  </ItemGroup>
+  <ItemGroup>
+    <PackageReference Include="FSharp.NET.Sdk" Version="1.0.*" PrivateAssets="All" />
+    <PackageReference Include="FSharp.Core" Version="4.1.*" />
+    <PackageReference Include="Fable.Core" Version="1.0.0-narumi-*" />
+    <DotNetCliToolReference Include="dotnet-fable" Version="1.0.0-narumi-*" />
+  </ItemGroup>
+  <ItemGroup>
+    <ProjectReference Include="node_modules\fable-powerpack\Fable.PowerPack.fsproj" />
+    <ProjectReference Include="node_modules\fable-elmish\Fable.Elmish.fsproj" />
+    <ProjectReference Include="node_modules\fable-elmish-browser\Fable.Elmish.Browser.fsproj" />
+    <ProjectReference Include="node_modules\fable-react\Fable.React.fsproj" />
+    <ProjectReference Include="node_modules\fable-elmish-react\Fable.Elmish.React.fsproj" />
+    <ProjectReference Include="node_modules\fable-elmish-debugger\Fable.Elmish.Debugger.fsproj" />
+  </ItemGroup>
+</Project>

Sample/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "Sample",
+  "version": "1.0.0",
+  "description": "Simple Fable App",
+  "scripts": {
+    "build": "webpack -p",
+    "start": "webpack-dev-server",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "babel-runtime": "^6.23.0",
+    "fable-core": "1.0.0-narumi-906",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "remotedev": "^0.2.7"
+  },
+  "devDependencies": {
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-es2015": "^6.24.0",
+    "bulma": "^0.4.0",
+    "css-loader": "^0.28.0",
+    "fable-elmish": "^0.9.0-beta-6",
+    "fable-elmish-browser": "0.9.0-beta-5",
+    "fable-elmish-debugger": "0.9.0-beta-6",
+    "fable-elmish-react": "^0.9.0-beta-4",
+    "fable-loader": "^1.0.0-narumi-908",
+    "fable-powerpack": "^1.0.0-narumi-3",
+    "fable-react": "^1.0.0-narumi-4",
+    "node-sass": "^4.5.2",
+    "sass-loader": "^6.0.3",
+    "style-loader": "^0.16.1",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.2"
+  }
+}

Sample/public/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+  <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
+  <title>Elmish  Fable App</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
+  <script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,fetch"></script>
+</head>
+<body>
+  <div id="elmish-app"></div>
+  <script src="bundle.js"></script>
+</body>
+</html>

Sample/sass/main.sass

@@ -0,0 +1,28 @@
+// Colors
+$purple: #7a325d
+$primary: $purple
+$black: #202020
+
+@import '../node_modules/bulma/bulma'
+
+.navbar-bg
+  background-color: $black
+  .nav
+    background-color: $black
+  .title
+    color: #686868
+    font-weight: 600
+
+.twitter
+  color: #55acee !important // Override bulma
+  border-color: #55acee
+
+.github
+  color: $black !important // Override bulma
+  border-color: $black
+
+// Needed otherwise iframes show a disabled scrollbar
+html,
+body
+  overflow-y: auto
+  overflow-x: hidden

Sample/src/App.fs

@@ -0,0 +1,78 @@
+module App.View
+
+open Elmish
+open Elmish.Browser.Navigation
+open Elmish.Browser.UrlParser
+open Fable.Core
+open Fable.Core.JsInterop
+open Fable.Import
+open Fable.Import.Browser
+open Types
+open App.State
+open Global
+open Global.Helpers
+
+importAll "../sass/main.sass"
+
+open Fable.Helpers.React
+open Fable.Helpers.React.Props
+
+let menuItem label page currentPage =
+    li
+      [ ]
+      [ a
+          [ classList [ "is-active", page = currentPage ]
+            Href (toHash page) ]
+          [ str label ] ]
+
+let menu currentPage =
+  aside
+    [ ClassName "menu" ]
+    [ p
+        [ ClassName "menu-label" ]
+        [ str "General" ]
+      ul
+        [ ClassName "menu-list" ]
+        [ menuItem "Home" Home currentPage
+          menuItem "Counter sample" Counter currentPage
+          menuItem "About" Page.About currentPage ] ]
+
+let root model dispatch =
+
+  let pageHtml =
+    function
+    | Page.About -> Info.View.root
+    | Counter -> Counter.View.root model.counter (CounterMsg >> dispatch)
+    | Home -> Home.View.root model.home (HomeMsg >> dispatch)
+
+  div
+    []
+    [ div
+        [ ClassName "navbar-bg" ]
+        [ div
+            [ ClassName "container" ]
+            [ Navbar.View.root ] ]
+      div
+        [ ClassName "section" ]
+        [ div
+            [ ClassName "container" ]
+            [ div
+                [ ClassName "columns" ]
+                [ div
+                    [ ClassName "column is-3" ]
+                    [ menu model.currentPage ]
+                  div
+                    [ ClassName "column" ]
+                    [ pageHtml model.currentPage ] ] ] ] ]
+
+open Elmish.React
+open Elmish.Debug
+
+// App
+Program.mkProgram init update root
+|> Program.toNavigable (parseHash pageParser) urlUpdate
+|> Program.withReact "elmish-app"
+#if DEBUG
+|> Program.withDebugger
+#endif
+|> Program.run

Sample/src/Counter/State.fs

@@ -0,0 +1,16 @@
+module Counter.State
+
+open Elmish
+open Types
+
+let init () : Model * Cmd<Msg> =
+  0, []
+
+let update msg model =
+  match msg with
+  | Increment ->
+      model + 1, []
+  | Decrement ->
+      model - 1, []
+  | Reset ->
+      0, []

Sample/src/Counter/Types.fs

@@ -0,0 +1,8 @@
+module Counter.Types
+
+type Model = int
+
+type Msg =
+  | Increment
+  | Decrement
+  | Reset

Sample/src/Counter/View.fs

@@ -0,0 +1,28 @@
+module Counter.View
+
+open Fable.Core
+open Fable.Helpers.React
+open Fable.Helpers.React.Props
+open Types
+
+let simpleButton txt action dispatch =
+  div
+    [ ClassName "column is-narrow" ]
+    [ a
+        [ ClassName "button"
+          OnClick (fun _ -> action |> dispatch) ]
+        [ str txt ] ]
+
+let root model dispatch =
+  div
+    [ ClassName "columns is-vcentered" ]
+    [ div [ ClassName "column" ] [ ]
+      div
+        [ ClassName "column is-narrow"
+          Style
+            [ CSSProp.Width "170px" ] ]
+        [ str (sprintf "Counter value: %i" model) ]
+      simpleButton "+1" Increment dispatch
+      simpleButton "-1" Decrement dispatch
+      simpleButton "Reset" Reset dispatch
+      div [ ClassName "column" ] [ ] ]

Sample/src/Global.fs

@@ -0,0 +1,21 @@
+module Global
+
+type Page =
+  | Home
+  | Counter
+  | About
+
+let toHash =
+  function
+  | About -> "#about"
+  | Counter -> "#counter"
+  | Home -> "#home"
+
+module Helpers =
+
+  open Fable.Helpers.React.Props
+
+  let internal classList classes =
+    classes
+    |> List.fold (fun complete -> function | (name,true) -> complete + " " + name | _ -> complete) ""
+    |> ClassName

Sample/src/Home/State.fs

@@ -0,0 +1,12 @@
+module Home.State
+
+open Elmish
+open Types
+
+let init () : Model * Cmd<Msg> =
+  "", []
+
+let update msg model : Model * Cmd<Msg> =
+  match msg with
+  | ChangeStr str ->
+      str, []

Sample/src/Home/Types.fs

@@ -0,0 +1,6 @@
+module Home.Types
+
+type Model = string
+
+type Msg =
+  | ChangeStr of string

Sample/src/Home/View.fs

@@ -0,0 +1,24 @@
+module Home.View
+
+open Fable.Core
+open Fable.Core.JsInterop
+open Fable.Helpers.React
+open Fable.Helpers.React.Props
+open Types
+
+let root model dispatch =
+  div
+    [ ]
+    [ p
+        [ ClassName "control" ]
+        [ input
+            [ ClassName "input"
+              Type "text"
+              Placeholder "Type your name"
+              DefaultValue !^model
+              AutoFocus true
+              OnChange (fun ev -> !!ev.target?value |> ChangeStr |> dispatch ) ] [ ] ]
+      br [ ] [ ]
+      span
+        [ ]
+        [ str (sprintf "Hello %s" model) ] ]

Sample/src/Info/View.fs

@@ -0,0 +1,14 @@
+module Info.View
+
+open Fable.Helpers.React
+open Fable.Helpers.React.Props
+
+let root =
+  div
+    [ ClassName "content" ]
+    [ h1
+        [ ]
+        [ str "About page" ]
+      p
+        [ ]
+        [ str "This template is a simple application build with Fable + Elmish + React." ] ]