Update parsec widget to use a javascript display for its JS

ihaskell-display/ihaskell-parsec/IHaskell/Display/Parsec.hs

@@ -6,19 +6,20 @@ import System.Random
 import Data.String.Here
 import Data.HashMap.Strict as Map
 
-import Text.Parsec
-import Text.Parsec.Prim
-import Text.Parsec.String
-import Text.Parsec.Error
+import Text.Parsec (parse, sourceLine, sourceColumn)
+--import Text.Parsec.Prim (Parser)
+import Text.Parsec.String (Parser)
+import Text.Parsec.Error (errorPos, ParseError)
 
 import Data.Aeson
 
 import IHaskell.Display
 
 instance Show a => IHaskellDisplay (Parser a) where
-  display renderable = return $ Display [html dom]
+  display renderable = return $ many [Display [javascript js], Display [html dom]]
     where 
       dom = [hereFile|widget.html|]
+      js = [hereFile|widget.js|]
 
 -- | Text to parse.
 data ParseText = ParseText String

ihaskell-display/ihaskell-parsec/widget.html

@@ -2,87 +2,6 @@
 <link rel="stylesheet" href="/static/components/codemirror/addon/lint/lint.css">
 <script src="/static/components/codemirror/addon/lint/lint.js" charset="utf-8"></script>
 
-<!-- Parsec widget -->
-<script>
-// Only load this script once.
-var kernel = IPython.notebook.kernel;
-var initialized = kernel !== undefined && kernel != null;
-console.log("Initialized", initialized);
-if (initialized && window.parsecWidgetRegistered === undefined) {
-
-// Do not load this script again.
-window.parsecWidgetRegistered = true;
-
-// Register the comm target.
-var ParsecWidget = function (comm) {
-    this.comm = comm;
-    this.comm.on_msg($.proxy(this.handler, this));
-
-    // Get the cell that was probably executed.
-    // The msg_id:cell mapping will make this possible without guessing.
-    this.cell = IPython.notebook.get_cell(IPython.notebook.get_selected_index()-1);
-
-    // Store this widget so we can use it from callbacks.
-    var widget = this;
-
-    // Editor options.
-    var options = {
-        lineNumbers: true,
-        // Show parsec errors as lint errors.
-        gutters: ["CodeMirror-lint-markers"],
-        lintWith: {
-            "getAnnotations": function(cm, update, opts) {
-                var errs = [];
-                if (widget.hasError) {
-                    var col = widget.error["col"];
-                    var line = widget.error["line"];
-                    errs = [{
-                        from: CodeMirror.Pos(line - 1, col - 1),
-                        to: CodeMirror.Pos(line - 1, col),
-                        message: widget.error["msg"],
-                        severity: "error"
-                    }];
-                }
-                update(cm, errs);
-            },
-            "async": true,
-        }
-    };
-
-    // Create the editor.
-    var out = this.cell.output_area.element;
-    this.textarea = out.find("#parsec-editor")[0];
-    this.output = out.find("#parsec-output")[0];
-
-    var editor = CodeMirror.fromTextArea(this.textarea, options);
-    var editor = editor;
-
-    // Update every key press.
-    editor.on("keyup", function() {
-        var text = editor.getDoc().getValue();
-        comm.send({"text": text});
-    });
-};
-
-ParsecWidget.prototype.handler = function(msg) {
-    var data = msg.content.data;
-    this.hasError = data["status"] == "error";
-    if (this.hasError) {
-        out = data["msg"];
-        this.error = data;
-    } else {
-        out = data["result"];
-    }
-    // Update viewed output.
-    this.output.innerHTML = out;
-};
-
-// Register this widget.
-IPython.notebook.kernel.comm_manager.register_target('parsec', IPython.utils.always_new(ParsecWidget));
-console.log("Registering Parsec widget.");
-}
-</script>
-
 <!-- Parsec widget DOM -->
 <form><textarea id="parsec-editor">Insert parser text here...</textarea></form>
 <pre id="parsec-output"></pre>

ihaskell-display/ihaskell-parsec/widget.js

+// Only load this script once.
+var kernel = IPython.notebook.kernel;
+var initialized = kernel !== undefined && kernel != null;
+console.log("Initialized", initialized);
+if (initialized && window.parsecWidgetRegistered === undefined) {
+
+// Do not load this script again.
+window.parsecWidgetRegistered = true;
+
+// Register the comm target.
+var ParsecWidget = function (comm) {
+    this.comm = comm;
+    this.comm.on_msg($.proxy(this.handler, this));
+
+    // Get the cell that was probably executed.
+    // The msg_id:cell mapping will make this possible without guessing.
+    this.cell = IPython.notebook.get_cell(IPython.notebook.get_selected_index()-1);
+
+    // Store this widget so we can use it from callbacks.
+    var widget = this;
+
+    // Editor options.
+    var options = {
+        lineNumbers: true,
+        // Show parsec errors as lint errors.
+        gutters: ["CodeMirror-lint-markers"],
+        lintWith: {
+            "getAnnotations": function(cm, update, opts) {
+                var errs = [];
+                if (widget.hasError) {
+                    var col = widget.error["col"];
+                    var line = widget.error["line"];
+                    errs = [{
+                        from: CodeMirror.Pos(line - 1, col - 1),
+                        to: CodeMirror.Pos(line - 1, col),
+                        message: widget.error["msg"],
+                        severity: "error"
+                    }];
+                }
+                update(cm, errs);
+            },
+            "async": true,
+        }
+    };
+
+    // Create the editor.
+    var out = this.cell.output_area.element;
+    this.textarea = out.find("#parsec-editor")[0];
+    this.output = out.find("#parsec-output")[0];
+
+    var editor = CodeMirror.fromTextArea(this.textarea, options);
+    var editor = editor;
+
+    // Update every key press.
+    editor.on("keyup", function() {
+        var text = editor.getDoc().getValue();
+        comm.send({"text": text});
+    });
+};
+
+ParsecWidget.prototype.handler = function(msg) {
+    var data = msg.content.data;
+    this.hasError = data["status"] == "error";
+    if (this.hasError) {
+        out = data["msg"];
+        this.error = data;
+    } else {
+        out = data["result"];
+    }
+    // Update viewed output.
+    this.output.innerHTML = out;
+};
+
+// Register this widget.
+IPython.notebook.kernel.comm_manager.register_target('parsec', IPython.utils.always_new(ParsecWidget));
+console.log("Registering Parsec widget.");
+}

notebooks/Test.ipynb

@@ -2,7 +2,7 @@
  "metadata": {
   "language": "haskell",
   "name": "",
-  "signature": "sha256:e714927a2d2b479853e19f3784692d8043ea0de9bcba6778363470d13d4f3f85"
+  "signature": "sha256:82a2a991a98051acbda06fcf18983a1920f3295003c796f6aaba212cd0a71ae5"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
@@ -84,20 +84,14 @@
       "      \n",
       "    -- Parse any whitespace\n",
       "    whitespace = many $ oneOf \" \\t\"\n",
-      "\n",
+      "    \n",
       "parser"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
-       "html": [
-        "<!-- CodeMirror component -->\n",
-        "<link rel=\"stylesheet\" href=\"/static/components/codemirror/addon/lint/lint.css\">\n",
-        "<script src=\"/static/components/codemirror/addon/lint/lint.js\" charset=\"utf-8\"></script>\n",
-        "\n",
-        "<!-- Parsec widget -->\n",
-        "<script>\n",
+       "javascript": [
         "// Only load this script once.\n",
         "var kernel = IPython.notebook.kernel;\n",
         "var initialized = kernel !== undefined && kernel != null;\n",
@@ -174,8 +168,16 @@
         "// Register this widget.\n",
         "IPython.notebook.kernel.comm_manager.register_target('parsec', IPython.utils.always_new(ParsecWidget));\n",
         "console.log(\"Registering Parsec widget.\");\n",
-        "}\n",
-        "</script>\n",
+        "}\n"
+       ],
+       "metadata": {},
+       "output_type": "display_data"
+      },
+      {
+       "html": [
+        "<!-- CodeMirror component -->\n",
+        "<link rel=\"stylesheet\" href=\"/static/components/codemirror/addon/lint/lint.css\">\n",
+        "<script src=\"/static/components/codemirror/addon/lint/lint.js\" charset=\"utf-8\"></script>\n",
         "\n",
         "<!-- Parsec widget DOM -->\n",
         "<form><textarea id=\"parsec-editor\">Insert parser text here...</textarea></form>\n",

src/IHaskell/Display.hs

@@ -2,7 +2,7 @@
 module IHaskell.Display (
   IHaskellDisplay(..),
   IHaskellWidget(..),
-  plain, html, png, jpg, svg, latex,
+  plain, html, png, jpg, svg, latex, javascript, many,
   serializeDisplay,
   Width, Height, Base64(..),
   encode64, base64,
@@ -69,14 +69,18 @@ plain = DisplayData PlainText . pack . rstrip
 html :: String -> DisplayData
 html = DisplayData MimeHtml . pack
 
--- | Genreate an SVG display.
+-- | Generate an SVG display.
 svg :: String -> DisplayData
 svg = DisplayData MimeSvg . pack
 
--- | Genreate a LaTeX display.
+-- | Generate a LaTeX display.
 latex :: String -> DisplayData
 latex = DisplayData MimeLatex . pack
 
+-- | Generate a Javascript display.
+javascript :: String -> DisplayData
+javascript = DisplayData MimeJavascript . pack
+
 -- | Generate a PNG display of the given width and height. Data must be
 -- provided in a Base64 encoded manner, suitable for embedding into HTML.
 -- The @base64@ function may be used to encode data into this format.

src/IHaskell/IPython/Types.hs

@@ -394,6 +394,7 @@ data MimeType = PlainText
               | MimeJpg Width Height
               | MimeSvg
               | MimeLatex
+              | MimeJavascript
               deriving (Eq, Typeable, Generic)
 
 -- Extract the plain text from a list of displays.
@@ -412,3 +413,4 @@ instance Show MimeType where
   show (MimeJpg _ _)   = "image/jpeg"
   show MimeSvg   = "image/svg+xml"
   show MimeLatex = "text/latex"
+  show MimeJavascript = "application/javascript"