From d16d4d023527a4525b850d10981abbb19859e704 Mon Sep 17 00:00:00 2001
From: Miles Frain <miles.frain@colorado.edu>
Date: Sat, 22 Aug 2020 14:00:05 -0700
Subject: [PATCH 1/2] One-way iframe communication

---
 client/config/dev/Try.Config.purs  |   2 +-
 client/config/prod/Try.Config.purs |   2 +-
 client/public/frame-error.html     |  11 +++
 client/public/index.html           |  36 +-------
 client/public/js/frame.js          | 130 ++++++++++++++++++-----------
 client/spago.dhall                 |   3 +-
 client/src/LzString.js             |  10 +++
 client/src/LzString.purs           |   5 ++
 client/src/Main.js                 |   1 -
 client/src/Main.purs               |  36 ++++++--
 10 files changed, 141 insertions(+), 95 deletions(-)
 create mode 100644 client/public/frame-error.html
 create mode 100644 client/src/LzString.js
 create mode 100644 client/src/LzString.purs
diff --git a/client/config/dev/Try.Config.purs b/client/config/dev/Try.Config.purs
index 5c6218f1..28809489 100644
--- a/client/config/dev/Try.Config.purs
+++ b/client/config/dev/Try.Config.purs
@@ -7,4 +7,4 @@ compileUrl :: String
 compileUrl = "http://localhost:8081"
 
 mainGist :: String
-mainGist = "7ad2b2eef11ac7dcfd14aa1585dd8f69"
+mainGist = "005a86e5c843d3738c1fdd95cc278144"
diff --git a/client/config/prod/Try.Config.purs b/client/config/prod/Try.Config.purs
index e2232d10..f367c756 100644
--- a/client/config/prod/Try.Config.purs
+++ b/client/config/prod/Try.Config.purs
@@ -7,4 +7,4 @@ compileUrl :: String
 compileUrl = "https://compile.purescript.org"
 
 mainGist :: String
-mainGist = "7ad2b2eef11ac7dcfd14aa1585dd8f69"
+mainGist = "005a86e5c843d3738c1fdd95cc278144"
diff --git a/client/public/frame-error.html b/client/public/frame-error.html
new file mode 100644
index 00000000..6bc3a282
--- /dev/null
+++ b/client/public/frame-error.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Try PureScript iFrame</title>
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+  <meta content="utf-8" http-equiv="encoding">
+</head>
+<body>
+  <p>Your browser is missing <a href=https://caniuse.com/#feat=iframe-srcdoc>srcdoc</a> support</p>
+</body>
+</html>
diff --git a/client/public/index.html b/client/public/index.html
index b546efb4..5419a64c 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -10,6 +10,7 @@
   <link rel="icon" type="image/png" href="./img/favicon_clear-32.png" sizes="32x32">
   <link rel="icon" type="image/png" href="./img/favicon_clear-256.png" sizes="256x256">
 
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script>
   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js" charset="utf-8"></script>
@@ -157,41 +158,6 @@
         };
       })(marker));
     }
-
-    function setupIFrame($ctr, data) {
-      var $iframe = $('<iframe sandbox="allow-scripts" id="output-iframe" src="frame.html">');
-
-      $ctr
-        .empty()
-        .append($iframe);
-
-      var tries = 0;
-      var sendSources = setInterval(function() {
-        // Stop after 10 seconds
-        if (tries >= 100) {
-          return clearInterval(sendSources);
-        }
-        tries++;
-        var iframe = $iframe.get(0).contentWindow;
-        if (iframe) {
-          iframe.postMessage(data, "*");
-        } else {
-          console.warn("Frame is not available");
-        }
-      }, 100);
-
-      window.addEventListener("message", function() {
-        clearInterval(sendSources);
-      }, { once: true });
-
-      window.addEventListener("message", function(event) {
-        if (event.data && event.data.gistId && /^[0-9a-f]+$/.test(event.data.gistId)) {
-          window.location.search = "gist=" + event.data.gistId;
-        }
-      });
-
-      return $iframe;
-    }
   </script>
   <script type="text/javascript" src="js/index.js"></script>
 </body>
diff --git a/client/public/js/frame.js b/client/public/js/frame.js
index 4530ec45..7debb121 100644
--- a/client/public/js/frame.js
+++ b/client/public/js/frame.js
@@ -1,51 +1,87 @@
-(function() {
-  function evalSources(sources) {
-    var modules = {};
-    function dirname(str) {
-      var ix = str.lastIndexOf("/");
-      return ix < 0 ? "" : str.slice(0, ix);
+/*
+This script executes the JS files returned by PS compilation.
+*/
+
+// Get directory name of path
+function dirname(str) {
+  let ix = str.lastIndexOf("/");
+  return ix < 0 ? "" : str.slice(0, ix);
+};
+
+// Concatenates paths together
+function resolvePath(a, b) {
+  // `b` relative to current directory with `./`
+  if (b[0] === "." && b[1] === "/") {
+    return dirname(a) + b.slice(1);
+  }
+  // `b` relative to `a` parent directory with `../`
+  if (b[0] === "." && b[1] === "." && b[2] === "/") {
+    return dirname(dirname(a)) + b.slice(2);
+  }
+  // `b` is either shim or path from root
+  return b;
+};
+
+// Executes JS source and all dependencies.
+// Maintains cache of previously-executed sources.
+function evalSources(sources) {
+  // Cache all modules
+  var modules = {};
+  // Executes module source, or returns cached exports.
+  return function load(name) {
+    // Check if module is already cached
+    if (modules[name]) {
+      return modules[name].exports;
     }
-    function resolvePath(a, b) {
-      if (b[0] === "." && b[1] === "/") {
-        return dirname(a) + b.slice(1);
-      }
-      if (b[0] === "." && b[1] === "." && b[2] === "/") {
-        return dirname(dirname(a)) + b.slice(2);
-      }
-      return b;
+    // Not cached, so execute contents.
+    // Provide custom `require`, `module`, and `exports`.
+    // Custom `require` which executes file contents, as well as any dependencies.
+    function require(path) {
+      return load(resolvePath(name, path));
     }
-    return function load(name) {
-      if (modules[name]) {
-        return modules[name].exports;
-      }
-      function require(path) {
-        return load(resolvePath(name, path));
-      }
-      var module = modules[name] = { exports: {} };
-      new Function("module", "exports", "require", sources[name])(module, module.exports, require);
-      return module.exports;
-    };
+    // Provide empty exports, which will be set, and then returned.
+    var module = modules[name] = { exports: {} };
+    // Create a function from the module's file contents,
+    // and execute this function with our substitutions.
+    new Function("module", "exports", "require", sources[name])(module, module.exports, require);
+    return module.exports;
+  };
+};
+
+function loadFrame(str) {
+  // Convert JSON string back to object.
+  // keys: file paths
+  // values: compressed JS source
+  obj = JSON.parse(str);
+
+  // Decompress values back to JS source
+  Object.keys(obj).forEach(function (key) {
+    obj[key] = LZString.decompressFromEncodedURIComponent(obj[key]);
+  });
+
+  // Execute all sources, and save returned `exports` from `<file>`.
+  // Expecting a `exports.main` entry point.
+  let file = evalSources(obj)("<file>");
+
+  // Check if `main` can be launched
+  if (!file.main) {
+    console.log('Missing "main"');
+  } else if (typeof file.main !== "function") {
+    console.log('"main" is not a function');
+  } else {
+    // Launch entry point
+    file.main();
   }
+};
 
-  var parent;
-
-  document.addEventListener("DOMContentLoaded", function() {
-    window.addEventListener("message", function(event) {
-      parent = event.source;
-      parent.postMessage("trypurescript", "*");
-      var file = evalSources(event.data)("<file>");
-      if (file.main && typeof file.main === "function") {
-        file.main();
-      }
-    }, { once: true });
-  }, { once: true });
-
-  document.addEventListener("click", function(event) {
-    if (parent && event.target.nodeName === "A" && event.target.hostname === "gist.github.com") {
-      event.preventDefault();
-      parent.postMessage({
-        gistId: event.target.pathname.split("/").slice(-1)[0]
-      }, "*");
-    }
-  }, false);
-})();
+// Call script tag contents when frame loads.
+// Expects a call to loadFrame, passing JS sources.
+window.onload = function() {
+  // https://stackoverflow.com/a/8677590
+  //grab the last script tag in the DOM
+  //this will always be the one that is currently evaluating during load
+  let tags = document.getElementsByTagName('script');
+  let tag = tags[tags.length -1];
+  //force evaluation of the contents
+  eval( tag.innerHTML );
+};
\ No newline at end of file
diff --git a/client/spago.dhall b/client/spago.dhall
index 8cfd517e..191a569e 100644
--- a/client/spago.dhall
+++ b/client/spago.dhall
@@ -4,7 +4,8 @@ You can edit this file as you like.
 -}
 { name = "try-purescript"
 , dependencies =
-  [ "arrays"
+  [ "argonaut"
+  , "arrays"
   , "bifunctors"
   , "console"
   , "const"
diff --git a/client/src/LzString.js b/client/src/LzString.js
new file mode 100644
index 00000000..6c6f4272
--- /dev/null
+++ b/client/src/LzString.js
@@ -0,0 +1,10 @@
+"use strict";
+
+exports.compressToEncodedURIComponent = function (input) {
+  return LZString.compressToEncodedURIComponent(input);
+}
+
+exports.decompressFromEncodedURIComponent = function (input) {
+  let result = LZString.decompressFromEncodedURIComponent(input);
+  return result || "Failed to decompress URI";
+}
\ No newline at end of file
diff --git a/client/src/LzString.purs b/client/src/LzString.purs
new file mode 100644
index 00000000..74ba7714
--- /dev/null
+++ b/client/src/LzString.purs
@@ -0,0 +1,5 @@
+module LzString where
+
+foreign import compressToEncodedURIComponent :: String -> String
+
+foreign import decompressFromEncodedURIComponent :: String -> String
diff --git a/client/src/Main.js b/client/src/Main.js
index 7c9d6860..e4000703 100644
--- a/client/src/Main.js
+++ b/client/src/Main.js
@@ -5,4 +5,3 @@ exports.onEditorChanged = onEditorChanged;
 exports.cleanUpMarkers = cleanUpMarkers;
 exports.addMarker = addMarker;
 exports.setAnnotations = setAnnotations;
-exports.setupIFrame = setupIFrame;
diff --git a/client/src/Main.purs b/client/src/Main.purs
index cc5d7b15..7d0f8254 100644
--- a/client/src/Main.purs
+++ b/client/src/Main.purs
@@ -4,12 +4,14 @@ import Prelude
 
 import Control.Monad.Cont.Trans (ContT(..), runContT)
 import Control.Monad.Except.Trans (runExceptT)
+import Data.Argonaut (encodeJson, stringify)
 import Data.Array (mapMaybe)
 import Data.Array as Array
 import Data.Either (Either(..))
 import Data.Foldable (elem, fold, for_, intercalate, traverse_)
 import Data.FoldableWithIndex (forWithIndex_)
 import Data.Maybe (Maybe(..), fromMaybe)
+import Data.Newtype (unwrap)
 import Effect (Effect)
 import Effect.Console (error)
 import Effect.Uncurried (EffectFn1, EffectFn2, EffectFn5, mkEffectFn1, runEffectFn1, runEffectFn2, runEffectFn5)
@@ -18,6 +20,7 @@ import Foreign.Object (Object)
 import Foreign.Object as Object
 import JQuery as JQuery
 import JQuery.Extras as JQueryExtras
+import LzString (compressToEncodedURIComponent)
 import Try.API (CompileError(..), CompileResult(..), CompileWarning(..), CompilerError(..), ErrorPosition(..), FailedResult(..), SuccessResult(..))
 import Try.API as API
 import Try.Config as Config
@@ -114,13 +117,6 @@ foreign import setAnnotations :: EffectFn1 (Array Annotation) Unit
 clearAnnotations :: Effect Unit
 clearAnnotations = runEffectFn1 setAnnotations []
 
--- | Set up a fresh iframe in the specified container, and use it
--- | to execute the provided JavaScript code.
-foreign import setupIFrame
-  :: EffectFn2 JQuery.JQuery
-               (Object JS)
-               Unit
-
 loader :: Loader
 loader = makeLoader Config.loaderUrl
 
@@ -188,9 +184,31 @@ compile = do
 -- | Execute the compiled code in a new iframe.
 execute :: JS -> Object JS -> Effect Unit
 execute js modules = do
-  let eventData = Object.insert "<file>" js modules
+  let
+    -- Add JS entry file, labeled with '<file>' key.
+    eventData = Object.insert "<file>" js modules
+    -- Convert object of JS files to JSON string.
+    -- Compress each file with LZString to avoid
+    -- non-trivial HTML + JSON string escaping.
+    jsonStr
+      = stringify
+      $ encodeJson
+      $ map (unwrap >>> compressToEncodedURIComponent) eventData
+    -- HTML for iframe srcdoc attribute.
+    -- We pass the above JSON string to `loadFrame`, which is defined in frame.js.
+    -- Note that we must also point to lz-string cdn for decompressing contents.
+    iframeSrcDoc
+      = "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js\"></script>"
+      <> "<script src='js/frame.js'> loadFrame('" <> jsonStr <> "'); </script>"
+
+  -- Set up an iframe and use it to execute the provided JavaScript code.
   column2 <- JQuery.select "#column2"
-  runEffectFn2 setupIFrame column2 eventData
+  iframe <- JQuery.create "<iframe>"
+  -- allow-top-navigation lets us click on links to other examples
+  JQuery.setAttr "sandbox" "allow-scripts allow-top-navigation" iframe
+  JQuery.setAttr "src" "frame-error.html" iframe
+  JQuery.setAttr "srcdoc" iframeSrcDoc iframe
+  JQuery.append iframe column2
 
 -- | Setup the editor component and some event handlers.
 setupEditor :: forall r. { code :: String | r } -> Effect Unit

From 182a11b371836353a3c8397190867ee03b4e3904 Mon Sep 17 00:00:00 2001
From: Miles Frain <miles.frain@colorado.edu>
Date: Sat, 22 Aug 2020 18:06:35 -0700
Subject: [PATCH 2/2] Require a user's click to redirect

---
 client/src/Main.purs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/Main.purs b/client/src/Main.purs
index 7d0f8254..eabfc7c0 100644
--- a/client/src/Main.purs
+++ b/client/src/Main.purs
@@ -204,8 +204,8 @@ execute js modules = do
   -- Set up an iframe and use it to execute the provided JavaScript code.
   column2 <- JQuery.select "#column2"
   iframe <- JQuery.create "<iframe>"
-  -- allow-top-navigation lets us click on links to other examples
-  JQuery.setAttr "sandbox" "allow-scripts allow-top-navigation" iframe
+  -- allow-top-navigation-by-user-activation lets us click on links to other examples
+  JQuery.setAttr "sandbox" "allow-scripts allow-top-navigation-by-user-activation" iframe
   JQuery.setAttr "src" "frame-error.html" iframe
   JQuery.setAttr "srcdoc" iframeSrcDoc iframe
   JQuery.append iframe column2
