Consider using monaco-editor for tutorials

[kitsonk]

Discussion

As far as I am aware, the solutions we have for web editors for tutorials have fairly challenging limitations.

• Do not integrate to TypeScript services, meaning Dojo 2's intellisense is unavailable in the editor. This severely limits the ability to demonstrate the advantages of Dojo 2, like CSS Modules and the rest of the types for @dojo as well as not demonstrating to the user that as they create code, they get the follow on intellisense of their changes.
• Have demonstrated that they will likely be difficult to update as we update our tooling/versions/etc. and make it difficult to test the tutorials to make sure they continue to function.

I have done a really simple POC to see how difficult it is to get the monaco-editor to work in dojo.io. Here is the output of that simple POC:

The code for that is as follows:

---
title: Monaco Example Tutorial
layout: tutorial
overview: An example of the `monaco-editor` as a tutorial
---

# Monaco Example Tutorial

Let's see how this goes...

<div id="container" style="height: 800px; border:1px solid grey;"></div>

<script type="text/javascript" src="/editor/monaco-editor/min/vs/loader.js"></script>
<script>
    require.config({ paths: { 'vs': '/editor/monaco-editor/min/vs' }});

    window.MonacoEnvironment = {
        getWorkerUrl: function (workerId, label) {
            return 'monaco-editor-worker-loader-proxy.js';
        }
    };

    require([ 'vs/editor/editor.main' ], function () {
        monaco.editor.create(document.getElementById('container'), {
            value: [
                'function x() {',
                '\tconsole.log("Hello world!");',
                '}'
            ].join('\n'),
            language: 'typescript'
        });
    });
</script>

And to the deployment I had to run the following:

grunt generate && rm -rf _dist/editor && cp -r site/editor _dist/editor

Path forward

If we were to create a package (e.g. @dojo/web-editor) we could inject additional opinionated way of editing/running additional Dojo 2 application on the web. Here are the high level functionality tasks I would see us needing to do:

• Wrapping monaco-editor to make it super easy to "plop" onto a page. I believe at this point, moanco-editor would solve "out of the box" the following:
  • Ability to edit files of TypeScript/CSS/HTML/JavaScript
  • Ability to integrate to TypeScript services to get whole project code intelligence that is equivalent to the functionality of vscode.
  • APIs to update/display/retrieve file content.
• A way to provide a manifest file of a "project" to be used with the editor to be able to edit and run an application in the browser
• Provide an API/mechanism for navigating the files of the manifest, editing them and having that update the "project"
• Figure out a way of doing what we need to do with postcss to allow CSS modules to be changed and emitted in browser
• Provide an offline build process that can bundle manifests into projects that can be downloaded (or published to npm)
• Provide a way of updating dependencies and updating the manifests in line with changes to the CLI.

The Future

Additional functionality that we would want but would be delivered in the future:

• The ability to generate manifests from dojo CLI and potentially take a manifest and generate an application.
• Creating new projects/code examples and being able to share them.

[devpaul]

We've discussed this in meetings and decided to move forward on a POC. I'm considering this closed by #71