Import ace code editor into webpack, es6, typescript project

Question

I'm trying to build a web component that will host the ace editor. The trouble is that I don't find enough information on how to import the module and set the types. The code bellow was working just fine using simple <script> tags and global vars.

So far this is what I have:

npm install ace-code-editor --save
npm install @types/ace --save-dev

code-editor.cmp.ts

// Error: [ts] File '.../node_modules/@types/ace/index.d.ts' is not a module.
import * as ace from 'ace';

export class CodeEditorCmp extends HTMLElement {

    // DOM
    private editor: AceAjax;  // How do I import the type. What type to use?

    constructor() {
        super();
    }

    connectedCallback() {
        this.initCodeEditor();
    }

    initCodeEditor(){

        this.editor = ace.edit("editor-vsc");

        // How do I import the editor themes?
        this.editor.setTheme("ace/theme/xcode"); 

        // How do I import the editor modes?
        var JavaScriptMode = ace.require("ace/mode/html").Mode; 

        this.editor.session.setMode(new JavaScriptMode());
        this.editor.getSession().setTabSize(4);
        this.editor.getSession().setUseSoftTabs(true);
        this.editor.getSession().setUseWrapMode(true);
        this.editor.setAutoScrollEditorIntoView(true);

        // Update document
        this.editor.getSession().on('change', this.onEditorChange);
    }

    onEditorChange(){
    }

}

require('./code-editor.cmp.scss');
window.customElements.define('editor-vsc', CodeEditorCmp);

Answer 1

For those who don't want to use the brace module, I saw that my issue was that I was importing the wrong version of ace. Once installed, make sure to import from src-noconflict. The noconflict version uses ace.require which seems to play a lot more nicely than the other iterations that use require.

I would suggest that you do the following:

npm install ace-builds --save
npm install @types/ace --save-dev

Afterwards in your file just import the noconflict like below:

import * as ace from 'ace-builds/src-noconflict/ace';

This will result in a variable ace being defined. You will then be able to reference methods and properties of ace as normal, such as ace.edit()

You can get more information about the different versions of ace check out the git page.

Answer 2

After a lot of digging I managed to find brace module. It's a browserify wrapper for ace. Fortunately it works straight away with webpack. No need to use separate types, they come prepackaged.

import * as ace from 'brace';
import 'brace/mode/javascript';
import 'brace/theme/monokai';

export class CodeEditorCmp extends HTMLElement {

    private editor: ace.Editor;

    initCodeEditor(){
        this.editor = ace.edit('javascript-editor');
        this.editor.getSession().setMode('ace/mode/javascript');
        this.editor.setTheme('ace/theme/monokai');
        //...
    }

    //...
}