WIP

marlowe-playground-client/entry.js

@@ -9,4 +9,7 @@ import 'ace-builds/src-min-noconflict/keybinding-vim.js';
 import 'ace-builds/src-min-noconflict/theme-monokai.js';
 import 'node-blockly/browser';
 
+import * as monaco from 'monaco-editor';
+global.monaco = monaco;
+
 import './src/Main.purs';

marlowe-playground-client/package.json

@@ -24,6 +24,8 @@
     "file-loader": "^2.0.0",
     "html-webpack-plugin": "^3.2.0",
     "jquery": "^3.3.1",
+    "monaco-editor": "^0.20.0",
+    "monaco-editor-webpack-plugin": "^1.8.2",
     "node-blockly": "^1.0.36",
     "node-sass": "^4.12.0",
     "popper.js": "^1.14.4",
@@ -36,6 +38,6 @@
     "webpack-dev-server": "^3.1.10",
     "xhr2": "^0.1.4"
   },
-  "resolutions": { },
+  "resolutions": {},
   "license": "Apache-2.0"
 }

marlowe-playground-client/src/Halogen/Monaco.purs

@@ -0,0 +1 @@
+module Halogen.Monaco where

marlowe-playground-client/src/Main.purs

@@ -1,9 +1,11 @@
 module Main where
 
 import Prelude
+
 import Control.Coroutine (Consumer, Process, connect, consumer, runProcess, ($$))
 import Control.Monad.Reader.Trans (runReaderT)
 import Data.Maybe (Maybe(..))
+import Debug.Trace (trace)
 import Effect (Effect)
 import Effect.Aff (forkAff, Aff)
 import Effect.Class (liftEffect)
@@ -12,6 +14,7 @@ import Effect.Unsafe (unsafePerformEffect)
 import Foreign.Generic (defaultOptions)
 import Halogen (hoist)
 import Halogen.Aff (awaitBody, runHalogenAff)
+import Monaco as Monaco
 import Halogen.VDom.Driver (runUI)
 import LocalStorage (RawStorageEvent)
 import LocalStorage as LocalStorage
@@ -38,6 +41,8 @@ ajaxSettings = SPSettings_ $ (settings { decodeJson = decodeJson, encodeJson = e
 main ::
   Effect Unit
 main = do
+  monaco <- Monaco.getMonaco
+  trace monaco \_ -> pure unit
   -- TODO: need to get the proper url, same as the client
   window <- W.window
   location <- WW.location window

marlowe-playground-client/src/Monaco.js

@@ -0,0 +1,19 @@
+/*eslint-env node*/
+'use strict';
+
+exports.getMonaco = function () {
+    return global.monaco;
+}
+
+exports.create_ = function(monaco, nodeId) {
+    return function() {
+        monaco.editor.create(document.getElementById(nodeId), {
+            value: [
+              'function x() {',
+              '\tconsole.log("Hello world!");',
+              '}'
+            ].join('\n'),
+            language: 'javascript'
+          });
+    }
+}

marlowe-playground-client/src/Monaco.purs

@@ -0,0 +1,11 @@
+module Monaco where
+
+import Prelude
+
+import Effect (Effect)
+
+foreign import data Monaco :: Type
+
+foreign import getMonaco :: Effect Monaco
+
+foreign import create_ :: Monaco -> String -> Effect Unit

marlowe-playground-client/src/Simulation.purs

@@ -89,6 +89,7 @@ simulationPane state =
           , br_
           , errorList
           , analysisPane state
+          , div [id_ "monacoPane"] []
           ]
         ]
     )

marlowe-playground-client/webpack.config.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const webpack = require('webpack');
@@ -10,14 +10,14 @@ const isWebpackDevServer = process.argv.some(a => path.basename(a) === 'webpack-
 const isWatch = process.argv.some(a => a === '--watch');
 
 const plugins =
-      isWebpackDevServer || !isWatch ? [] : [
-          function(){
-              this.plugin('done', function(stats){
-                  process.stderr.write(stats.toString('errors-only'));
-              });
-          }
-      ]
-;
+    isWebpackDevServer || !isWatch ? [] : [
+        function () {
+            this.plugin('done', function (stats) {
+                process.stderr.write(stats.toString('errors-only'));
+            });
+        }
+    ]
+    ;
 
 module.exports = {
     devtool: 'eval-source-map',
@@ -79,6 +79,10 @@ module.exports = {
             {
                 test: /\.(gif|png|jpe?g|svg)$/i,
                 use: 'url-loader'
+            },
+            {
+                test: /\.ttf$/,
+                use: ['file-loader'],
             }
         ]
     },
@@ -87,7 +91,7 @@ module.exports = {
         modules: [
             'node_modules'
         ],
-        extensions: [ '.purs', '.js']
+        extensions: ['.purs', '.js']
     },
 
     plugins: [
@@ -101,6 +105,7 @@ module.exports = {
             productName: 'marlowe-playground',
             googleAnalyticsId: isWebpackDevServer ? 'UA-XXXXXXXXX-X' : 'UA-119953429-7'
         }),
-        new webpack.NormalModuleReplacementPlugin(/^echarts$/, 'echarts/dist/echarts.min.js')
+        new webpack.NormalModuleReplacementPlugin(/^echarts$/, 'echarts/dist/echarts.min.js'),
+        new MonacoWebpackPlugin()
     ].concat(plugins)
 };

marlowe-playground-client/yarn.lock

@@ -2834,6 +2834,18 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1:
   dependencies:
     minimist "0.0.8"
 
+monaco-editor-webpack-plugin@^1.8.2:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.8.2.tgz#3721b8d9a3e2e41b154cf2a2955a7d7246c03714"
+  integrity sha512-g9G7A/lxQtpPsYaZFBqm73dwVkOziGUXExIR6iW7ksZUaiMkpvdTiE9O8edgdJGo+XtCmjycmIKB1Lt8VKbSTQ==
+  dependencies:
+    loader-utils "^1.2.3"
+
+monaco-editor@^0.20.0:
+  version "0.20.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.20.0.tgz#5d5009343a550124426cb4d965a4d27a348b4dea"
+  integrity sha512-hkvf4EtPJRMQlPC3UbMoRs0vTAFAYdzFQ+gpMb8A+9znae1c43q8Mab9iVsgTcg/4PNiLGGn3SlDIa8uvK1FIQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"