ARM Monaco Editor

High Level Programming 2018 - Monaco Editor Starter Code

Version

• v0.9 - pre-release

Introduction

This is the skeleton code for the EE3-22: High Level Programming final project. The target language is F#, which is transpiled to Javascript (js) thanks to Fable. Github Electron is then used to convert the developed web-app to a cross-platform native application, providing access to platform-level commands (i.e. file-system, path, multiple processes), which are unavailable to (vanilla) browser web-apps. Webpack is the module bundler, responsible for the transpilation and automated building process. Finally, Monaco Editor is used for as a self-contained javascript component that implements an editor window which your F# code can interact with.

Dependencies

Before proceeding any further, make sure these packages are installed/setup to your machine:

1. dotnet core

2. node.js: Javascript runtime engine

3. yarn: node.js package manager

4. (non-Windows only) mono

5. fsharp

Project Structure

package.json

Electron bundles Chromium (View) and node.js (Engine), therefore as every node.js project, the package.json file specifies the module dependencies. Additionally, the section "scripts":

{
    ...
    "scripts": {
        "start": "cd src/Main && dotnet fable webpack --port free -- -w --config webpack.config.js",
        "build": "cd src/Main && dotnet fable webpack --port free -- -p --config webpack.config.js",
        "launch": "electron ."
    },
    ...
}

is defining the in-project shortcut commands, therefore when we use yarn run <stript_key> is equivalent to calling <script_value>. For example, in the root of the project, running in the terminal yarn run launch is equivalent to running electron .. Go on define your own shortcuts for commands that you use frequently (not-necessary, but can automate development).

webpack.config.js

Webpack configuration file, called when yarn run start is executed, firing a process that watches changes to src folder files and transpiled the F# project to js on save. For example, the main.js file is generated by:

var mainConfig = Object.assign({
  target: "electron-main",
  entry: resolve("src/Main/Main.fsproj"),
  output: {
    path: resolve("."),
    filename: "main.js"
  }
}, basicConfig);

that selects the F# project at src/Main/Main.fsproj, transpiles it using Fable and saves the generated js file at main.js. The rendered.js file is generated similarly, using this configuration:

var rendererConfig = Object.assign({
  target: "electron-renderer",
  devtool: "source-map",
  entry: resolve("src/Renderer/Renderer.fsproj"),
  output: {
    path: resolve("app/js"),
    filename: "renderer.js"
  }
}, basicConfig);

src folder

src/Main and main.js

As already mentioned, Electron bundles Chromium and node.js. Chromium uses a multi-process architecture, consisting of a Main and (at least) one Renderer process, where the main process is responsible for setting-up the windows that the renderer process(es) use to for displaying their content, html & js files - web-app (strictly speaking a main process can be run in a headless fashion, without any renderer process, but it is out of the scope of this project). The src/Main/Main.fsproj is a mini-project controlling the main process, which can be used unchanged throughout the project.

src/Renderer and app/js/renderer.js

The Chromium renderer process F# project. Sets up callbacks and event-listeners for the DOM elements of index.html. Use the documentation of each module to follow its logic.

This project is incomplete, you are supposed to modify the code to customize the View (GUI) and link it with your emulator.

Access to Emulator project

You have access to your Emulator project by the namespace Emulator within the Renderer project, see src/Renderer/Renderer.fs for an example:

open Emulator
/// Access to `Emulator` project
let foo = Emulator.Common.A

Monaco Editor

open Ref
open Update
/// Get code from editor
let code = Ref.code()
/// Set code to editor
Update.code("mov r7, #5")

src/Emulator

Your emulator source F# code. The development of this project can be done outside (i.e. Visual Studio) and then ported back to this project (make sure that the project name and .fsproj file are preserved/updated because otherwise any dependency at src/Renderer/Renderer.fsproj will brake and compilation will fail).

app folder

The web-app, view, project files.

app/index.html

The markup code for the view. src/Renderer/Ref.fs module accesses the elements defined in this DOM tree.

Modify it for customizing the View.

app/css

CSS code to prettify your index.html elements. The PhotonKit library is used by default, but feel free to replace it with any other one you like, such as Materialize, Bootstrap.

app/js

The js scripts loaded by the index.html, after the DOM elements (statically defined) are rendered.

app/js/editor.js

Monaco Editor setup script.

Modify it with care!!

Getting Started

1. Fetch npm packages by executing yarn install

2. Restore dotnet packages by running dotnet restore

3. Compile fsharp code to javascript using webpack by executing yarn run start

4. Open electron application at a new terminal tab by running yarn run launch

Bugs & Issues

Use Issues for reporting bugs or request new API functionalities.