Elmish proof of concept

.gitignore

@@ -291,3 +291,5 @@ __pycache__/
 \.babelrc
 
 public/test \.json5
+
+public/test\.json5

Fable.Samples.Pixi.sln

@@ -49,6 +49,8 @@ Project("{F2A71F9B-5D33-465A-A702-920D77279786}") = "video", "src\video\video.fs
 EndProject
 Project("{F2A71F9B-5D33-465A-A702-920D77279786}") = "transitionOverHtml", "src\transitionOverHtml\transitionOverHtml.fsproj", "{46873FEE-4E07-461E-9333-FDB9935C1B63}"
 EndProject
+Project("{F2A71F9B-5D33-465A-A702-920D77279786}") = "elmish", "src\elmish\elmish.fsproj", "{0B9F6B62-9346-4E8A-B2A0-513FB1062B03}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -590,6 +592,18 @@ Global
 		{46873FEE-4E07-461E-9333-FDB9935C1B63}.Release|x64.Build.0 = Release|x64
 		{46873FEE-4E07-461E-9333-FDB9935C1B63}.Release|x86.ActiveCfg = Release|x86
 		{46873FEE-4E07-461E-9333-FDB9935C1B63}.Release|x86.Build.0 = Release|x86
+		{0B9F6B62-9346-4E8A-B2A0-513FB1062B03}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{0B9F6B62-9346-4E8A-B2A0-513FB1062B03}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{0B9F6B62-9346-4E8A-B2A0-513FB1062B03}.Debug|x64.ActiveCfg = Debug|x64
+		{0B9F6B62-9346-4E8A-B2A0-513FB1062B03}.Debug|x64.Build.0 = Debug|x64
+		{0B9F6B62-9346-4E8A-B2A0-513FB1062B03}.Debug|x86.ActiveCfg = Debug|x86
+		{0B9F6B62-9346-4E8A-B2A0-513FB1062B03}.Debug|x86.Build.0 = Debug|x86
+		{0B9F6B62-9346-4E8A-B2A0-513FB1062B03}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{0B9F6B62-9346-4E8A-B2A0-513FB1062B03}.Release|Any CPU.Build.0 = Release|Any CPU
+		{0B9F6B62-9346-4E8A-B2A0-513FB1062B03}.Release|x64.ActiveCfg = Release|x64
+		{0B9F6B62-9346-4E8A-B2A0-513FB1062B03}.Release|x64.Build.0 = Release|x64
+		{0B9F6B62-9346-4E8A-B2A0-513FB1062B03}.Release|x86.ActiveCfg = Release|x86
+		{0B9F6B62-9346-4E8A-B2A0-513FB1062B03}.Release|x86.Build.0 = Release|x86
 	EndGlobalSection
 	GlobalSection(NestedProjects) = preSolution
 		{CFBC7308-57F9-4425-A3DE-B36C6F361480} = {54CCA114-8C4B-489D-8B9B-77785C19CD22}
@@ -613,5 +627,6 @@ Global
 		{6C0CD6AD-D18A-4AF3-9E40-9F1F9642EFC1} = {54CCA114-8C4B-489D-8B9B-77785C19CD22}
 		{99DA57BE-9C0A-490E-A76B-00499A1BF312} = {54CCA114-8C4B-489D-8B9B-77785C19CD22}
 		{46873FEE-4E07-461E-9333-FDB9935C1B63} = {54CCA114-8C4B-489D-8B9B-77785C19CD22}
+		{0B9F6B62-9346-4E8A-B2A0-513FB1062B03} = {54CCA114-8C4B-489D-8B9B-77785C19CD22}
 	EndGlobalSection
 EndGlobal

package.json

@@ -9,10 +9,17 @@
   },
   "dependencies": {
     "animejs": "^2.2.0",
+    "bulma": "^0.6.0",
     "core-js": "^2.5.1",
+    "css-loader": "^0.28.7",
+    "node-sass": "^4.5.3",
     "pixi-particles": "^2.1.8",
     "pixi-sound": "^1.4.2",
-    "pixi.js": "^4.6.0"
+    "pixi.js": "^4.6.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.19.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",

paket.dependencies

@@ -3,12 +3,16 @@ storage:none
 
 clitool dotnet-fable
 nuget Fable.Core
+nuget Fable.Elmish.React
 nuget Fable.Import.Browser
 nuget Fable.Import.Pixi
 nuget Fable.Import.Pixi.Sound
 nuget Fable.Import.Pixi.Particles
 nuget Fable.Import.Animejs
+nuget Fable.Elmish
+nuget Fable.React
+nuget Fulma
 
 group Build
   source https://nuget.org/api/v2
-  nuget FAKE
+  nuget FAKE

paket.lock

@@ -23,6 +23,16 @@ NUGET
       FSharp.Core (>= 4.2.3) - restriction: >= netstandard1.6
       NETStandard.Library (>= 1.6.1) - restriction: >= netstandard1.6
       System.ValueTuple (>= 4.4) - restriction: >= netstandard1.6
+    Fable.Elmish (1.0)
+      Fable.Core (>= 1.2.4) - restriction: >= netstandard1.6
+      Fable.PowerPack (>= 1.3) - restriction: >= netstandard1.6
+      FSharp.Core (>= 4.2.3) - restriction: >= netstandard1.6
+    Fable.Elmish.React (1.0)
+      Fable.Core (>= 1.2.4) - restriction: >= netstandard1.6
+      Fable.Elmish (>= 1.0) - restriction: >= netstandard1.6
+      Fable.PowerPack (>= 1.3) - restriction: >= netstandard1.6
+      Fable.React (>= 1.2) - restriction: >= netstandard1.6
+      FSharp.Core (>= 4.2.3) - restriction: >= netstandard1.6
     Fable.Import.Animejs (0.2)
       Fable.Core (>= 1.1.15) - restriction: >= netstandard1.6
       Fable.Import.Browser (>= 0.1) - restriction: >= netstandard1.6
@@ -44,6 +54,14 @@ NUGET
       Fable.Import.Browser (>= 0.1) - restriction: >= netstandard1.6
       Fable.Import.Pixi (>= 0.1.1) - restriction: >= netstandard1.6
       FSharp.Core (>= 4.2.3) - restriction: >= netstandard1.6
+    Fable.PowerPack (1.3.1) - restriction: >= netstandard1.6
+      Fable.Core (>= 1.2.4) - restriction: >= netstandard1.6
+      Fable.Import.Browser (>= 0.1.2) - restriction: >= netstandard1.6
+      FSharp.Core (>= 4.2.3) - restriction: >= netstandard1.6
+    Fable.React (1.2.1)
+      Fable.Core (>= 1.2.4) - restriction: >= netstandard1.6
+      Fable.Import.Browser (>= 0.1) - restriction: >= netstandard1.6
+      FSharp.Core (>= 4.2.3) - restriction: >= netstandard1.6
     FSharp.Compiler.Service (16.0.2) - restriction: >= netcoreapp2.0
       FSharp.Core (>= 4.1.18) - restriction: && (< net45) (>= netstandard1.6)
       NETStandard.Library (>= 1.6.1) - restriction: && (< net45) (>= netstandard1.6)
@@ -80,6 +98,9 @@ NUGET
       System.Threading.Thread (>= 4.0) - restriction: && (< net45) (>= netstandard1.6)
       System.Threading.ThreadPool (>= 4.0.10) - restriction: && (< net45) (>= netstandard1.6)
       System.Threading.Timer (>= 4.0.1) - restriction: && (< net45) (>= netstandard1.6)
+    Fulma (1.0.0-beta-004)
+      Fable.Core (>= 1.2.4) - restriction: >= netstandard1.6
+      Fable.React (>= 1.2.1) - restriction: >= netstandard1.6
     Microsoft.CSharp (4.4) - restriction: >= netcoreapp2.0
     Microsoft.NETCore.App (2.0) - restriction: >= netcoreapp2.0
       Microsoft.NETCore.DotNetHostPolicy (>= 2.0) - restriction: >= netcoreapp2.0

public/elmish/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+<head>
+  <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Fable · Pixi</title>
+  <style>
+    html, 
+    body {
+      overflow-y: hidden !important;
+    }
+    #pixi-layout {
+      background-color: #444444;
+    }
+    #elmish-app {
+      position:absolute;
+      top:0;
+      left:0;
+      margin:0;
+      width:100%;
+    }
+    p.title.counter {
+      color: yellowgreen;
+    }
+    div.box {
+      background-color:yellowgreen;
+      color: black;
+      padding: 0.7rem;
+    }
+  </style>
+</head>
+<body>
+  <div id="pixi-layout"></div>
+  <div id="elmish-app"></div>
+  <script src="bundle.js"></script>
+</body>
+</html>

public/index.html

@@ -327,6 +327,19 @@ <h1 class="title is-4"><a href="transitionOverHtml">Pixi transition using Canvas
                   </div>
                 </div>
 
+                <div class="card">
+                    <div class="card-content">
+                      <article class="media">
+                        <figure class="media-left">
+                          <figure class="image is-128x128"><a href="elmish"><img src="img/pixijs.png"/></a></figure>
+                        </figure>
+                        <div class="media-content">
+                          <h1 class="title is-4"><a href="elmish">Interaction proof-of-concept between Elmish and Pixi</a></h1>
+                        </div>
+                      </article>
+                    </div>
+                  </div>                
+
               </ul>
           </ul>
         </div>

public/samples.json5

@@ -178,4 +178,15 @@
     "desc": "Simple renderization with [PixiJS](http://www.pixijs.com/), a fast and flexible library to render 2D WebGL content.",
     "img": "pixi.jpeg"
   },
+  "elmish": {
+    "dependencies": [
+      "pixi.js",
+      "animejs",
+      "react",
+      "react-dom",
+    ],
+    "title": "Pixi sample",
+    "desc": "Simple renderization with [PixiJS](http://www.pixijs.com/), a fast and flexible library to render 2D WebGL content.",
+    "img": "pixi.jpeg"
+  },  
 }

public/sass/main.sass

@@ -0,0 +1,3 @@
+// ******************************************************* Bulma ****************************************************
+
+@import '../../node_modules/bulma/bulma'