Initial "playground" for examples (#314)

Initial "playground" for examples

dune

@@ -1 +1 @@
-(ignored_subdirs (node_modules _esy))
+(ignored_subdirs (node_modules _esy playground))

examples/Examples.re

@@ -2,6 +2,8 @@ open Revery;
 open Revery.Core;
 /* open Revery.Math; */
 
+open ExampleStubs;
+
 module SliderExample = Slider;
 module ScrollViewExample = ScrollView;
 
@@ -16,6 +18,7 @@ let selectionHighlight = Color.hex("#90f7ff");
 type example = {
   name: string,
   render: Window.t => React.syntheticElement,
+  source: string,
 };
 
 type state = {
@@ -25,35 +28,92 @@ type state = {
 
 let state: state = {
   examples: [
-    {name: "Animation", render: _w => Hello.render()},
-    {name: "Button", render: _ => DefaultButton.render()},
-    {name: "Checkbox", render: _ => CheckboxExample.render()},
-    {name: "Slider", render: _ => SliderExample.render()},
-    {name: "Border", render: _ => Border.render()},
-    {name: "ScrollView", render: _w => ScrollViewExample.render()},
-    {name: "Calculator", render: w => Calculator.render(w)},
-    {name: "Flexbox", render: _ => Flexbox.render()},
-    {name: "Box Shadow", render: _ => Boxshadow.render()},
-    {name: "Focus", render: _ => Focus.render()},
-    {name: "Stopwatch", render: _ => Stopwatch.render()},
-    {name: "Native", render: w => Native.render(w)},
-    {name: "Input", render: w => InputExample.render(w)},
-    {name: "Radio Button", render: _ => RadioButtonExample.render()},
-    {name: "Game Of Life", render: _ => GameOfLife.render()},
-    {name: "Screen Capture", render: w => ScreenCapture.render(w)},
-    {name: "Tree View", render: w => TreeView.render(w)},
-    {name: "Analog Clock", render: _w => AnalogClock.render()},
+    {name: "Animation", render: _w => Hello.render(), source: "Hello.re"},
+    {
+      name: "Button",
+      render: _ => DefaultButton.render(),
+      source: "DefaultButton.re",
+    },
+    {
+      name: "Checkbox",
+      render: _ => CheckboxExample.render(),
+      source: "CheckboxExample.re",
+    },
+    {
+      name: "Slider",
+      render: _ => SliderExample.render(),
+      source: "Slider.re",
+    },
+    {name: "Border", render: _ => Border.render(), source: "Border.re"},
+    {
+      name: "ScrollView",
+      render: _w => ScrollViewExample.render(),
+      source: "ScrollView.re",
+    },
+    {
+      name: "Calculator",
+      render: w => Calculator.render(w),
+      source: "Calculator.re",
+    },
+    {name: "Flexbox", render: _ => Flexbox.render(), source: "Flexbox.re"},
+    {
+      name: "Box Shadow",
+      render: _ => Boxshadow.render(),
+      source: "Boxshadow.re",
+    },
+    {name: "Focus", render: _ => Focus.render(), source: "Focus.re"},
+    {
+      name: "Stopwatch",
+      render: _ => Stopwatch.render(),
+      source: "Stopwatch.re",
+    },
+    {name: "Native", render: w => Native.render(w), source: "Native.re"},
+    {
+      name: "Input",
+      render: w => InputExample.render(w),
+      source: "InputExample.re",
+    },
+    {
+      name: "Radio Button",
+      render: _ => RadioButtonExample.render(),
+      source: "RadioButtonExample.re",
+    },
+    {
+      name: "Game Of Life",
+      render: _ => GameOfLife.render(),
+      source: "GameOfLife.re",
+    },
+    {
+      name: "Screen Capture",
+      render: w => ScreenCapture.render(w),
+      source: "ScreenCapture.re",
+    },
+    {
+      name: "Tree View",
+      render: w => TreeView.render(w),
+      source: "TreeView.re",
+    },
+    {
+      name: "Analog Clock",
+      render: _w => AnalogClock.render(),
+      source: "AnalogClock.re",
+    },
   ],
   selectedExample: "Animation",
 };
 
+let getExampleByName = (state: state, example: string) => {
+  List.filter(x => String.equal(x.name, example), state.examples) |> List.hd;
+};
+
+let getSourceForSample = (state: state, example: string) => {
+  getExampleByName(state, example) |> (s => s.source);
+};
+
 let noop = () => ();
 
 let getRenderFunctionSelector: (state, Window.t) => React.syntheticElement =
-  (s: state) =>
-    List.filter(x => String.equal(x.name, s.selectedExample), state.examples)
-    |> List.hd
-    |> (a => a.render);
+  (s: state) => getExampleByName(s, s.selectedExample) |> (a => a.render);
 
 module ExampleButton = {
   let component = React.component("ExampleButton");
@@ -138,6 +198,8 @@ let init = app => {
            */
           Animated.cancelAll();
 
+          let sourceFile = getSourceForSample(s, x.name);
+          notifyExampleSwitched(sourceFile);
           App.dispatch(app, SelectExample(x.name));
         }}
       />;
@@ -190,12 +252,12 @@ let init = app => {
 
   if (Environment.webGL) {
     Window.maximize(win);
+  } else {
+    let xPosition = (dimensions.width - windowWidth) / 2;
+    let yPosition = (dimensions.height - windowHeight) / 2;
+    Window.setPos(win, xPosition, yPosition);
   };
 
-  let xPosition = (dimensions.width - windowWidth) / 2;
-  let yPosition = (dimensions.height - windowHeight) / 2;
-  Window.setPos(win, xPosition, yPosition);
-
   UI.start(win, render);
 };
 

examples/dune

@@ -3,9 +3,9 @@
     (preprocess (pps lwt_ppx))
     (package Revery)
     (public_names Examples)
-    (js_of_ocaml)
     (libraries
         js_of_ocaml
+        ExampleStubs
         str
         Revery
         flex

examples/index.html

@@ -17,6 +17,14 @@
             // but it's not needed during runtime.
             window.require = false;
         </script>
+        <script>
+            // If we're hosted in an iframe, we'll listen to changes and 'postMessage' them out
+            if (window.parent) {
+                window["__revery_playground_example_notify_changed"] = (s) => {
+                    window.parent.postMessage({ type: "example.switch", payload: s}, "*");
+                }
+            }
+        </script>
         <script src="Examples.bc.js"></script>
     </body>
 </html>

examples/stubs/ExampleStubs.re

@@ -0,0 +1,3 @@
+/* Notify external environments of switching tabs */
+external notifyExampleSwitched: string => unit =
+  "revery_example_notify_changed";

examples/stubs/dune

@@ -0,0 +1,5 @@
+(library 
+  (name ExampleStubs)
+  (c_names example_stubs)
+  (js_of_ocaml (javascript_files example_stubs.js))
+)

examples/stubs/example_stubs.c

@@ -0,0 +1,14 @@
+#include <stdio.h>
+
+#include <caml/alloc.h>
+#include <caml/callback.h>
+#include <caml/memory.h>
+#include <caml/mlvalues.h>
+
+CAMLprim value revery_example_notify_changed(value vExample) {
+  CAMLparam1(vExample);
+  const char *szExampleSource = String_val(vExample);
+
+  printf("Switched to example: %s\n", szExampleSource);
+  return Val_unit;
+}

examples/stubs/example_stubs.js

@@ -0,0 +1,7 @@
+// Provides: revery_example_notify_changed
+function revery_example_notify_changed(src) {
+    var window = joo_global_object.window;
+    if (window && window["__revery_playground_example_notify_changed"]) {
+        window["__revery_playground_example_notify_changed"](caml_to_js_string(src));
+    }
+}

playground/.gitignore

@@ -0,0 +1,3 @@
+_build/
+host/
+sources/

playground/README.md

@@ -0,0 +1,18 @@
+# revery-playground
+
+### Examples w/ code alongside
+
+## Build
+
+### Prerequisites
+
+- Make sure you have run `esy build` from the root directory
+
+### Build
+
+- `npm install`
+- `npm run build`
+
+### Testing
+
+- `npm start`

playground/build.js

@@ -0,0 +1,83 @@
+// Simple build script to copy over files from the release folder
+
+let cp = require("child_process");
+let fs = require("fs-extra");
+let os = require("os");
+let path = require("path");
+
+let playgroundRoot = __dirname
+let playgroundSources = path.join(playgroundRoot, "src");
+let reveryRoot = path.join(playgroundRoot, "..");
+let playgroundBuild = path.join(playgroundRoot, "_build");
+
+let nodeModulesSrc = path.join(playgroundRoot, "node_modules");
+let nodeModulesDest = path.join(playgroundBuild, "node_modules");
+
+let playgroundExampleSources = path.join(playgroundRoot, "_build", "sources");
+let playgroundExampleHost = path.join(playgroundRoot, "_build", "host");
+
+let reveryExampleSources = path.join(reveryRoot, "examples");
+
+let getEsyPath = () => {
+    let result = cp.execSync("where esy");
+    let found = result.toString("utf8");
+
+    let candidates = found.trim().split(os.EOL);
+    return candidates[candidates.length - 1];
+};
+
+let getCommit = () => {
+    let result = cp.execSync("git rev-parse --short HEAD");
+    return result.toString("utf8").trim();
+}
+
+let getVersion = () => {
+    let packageJson = fs.readFileSync(path.join(reveryRoot, "package.json")).toString("utf8");
+    return JSON.parse(packageJson).version;
+}
+
+let esyPath = getEsyPath();
+let commitId = getCommit();
+let version = getVersion();
+console.log("Esy path: " + esyPath);
+console.log("Commit id: " + commitId);
+console.log("Version: " + version);
+
+let getBuildArtifactFolder = () => {
+    let result = cp.spawnSync(esyPath, ["bash", "-c", "echo $cur__bin"], { cwd: reveryRoot });
+    return result.stdout.toString("utf8").trim();
+};
+
+let replace = (str, val, newVal) => {
+    return str.split(val).join(newVal);
+};
+
+let artifactFolder = getBuildArtifactFolder();
+
+console.log("Artifact folder: " + artifactFolder);
+
+console.log(`Copying sources from ${playgroundSources} to ${playgroundBuild}...`);
+fs.copySync(playgroundSources, playgroundBuild);
+console.log("Sources copied.");
+
+console.log(`Copying examples from ${reveryExampleSources} to ${playgroundExampleSources}...`);
+fs.copySync(reveryExampleSources, playgroundExampleSources);
+console.log("Examples copied.");
+
+console.log("Copying artifacts...");
+fs.copySync(artifactFolder, playgroundExampleHost);
+console.log("Artifacts copied.");
+
+console.log("Copying node_modules...");
+fs.copySync(nodeModulesSrc, nodeModulesDest);
+console.log("node_modules copied.");
+
+console.log("Replacing constaints in index.html");
+let indexHtmlPath = path.join(playgroundBuild, "index.html");
+
+let indexHtml = fs.readFileSync(indexHtmlPath).toString("utf8");
+indexHtml = replace(indexHtml, "{#VERSION}", version);
+indexHtml = replace(indexHtml, "{#COMMIT}", commitId);
+
+fs.writeFileSync(indexHtmlPath, indexHtml);
+console.log("Done!");