some small fixes and refactoring

build/typings/code-highlighter.d.ts

@@ -4,12 +4,21 @@
 export default class CodeHighlighter {
     private editor;
     private readonly theme;
+    private tsvLanguageIndex;
+    /**
+     *
+     * @param theme
+     */
     constructor(theme: string);
     /**
      *
      * @param shadowRoot
      * @param element
      */
     init(shadowRoot: ShadowRoot, element: HTMLTextAreaElement): Promise<void>;
-    setCode(value: any): void;
+    /**
+     *
+     * @param value
+     */
+    setCode(value: any): Promise<void>;
 }

build/typings/index.d.ts

@@ -18,6 +18,7 @@ export default class TSVWidgetElement extends HTMLElement {
      * Runs each time the element is appended to or moved in the DOM
      */
     connectedCallback(): Promise<void>;
+    bindTabChangeEvents(): void;
     /**
      * fetch sources from the verified contract json url
      */

package.json

@@ -5,7 +5,7 @@
   "main": "build/index.js",
   "scripts": {
     "start": "webpack-dev-server --hot",
-    "build": "rm -rf build && webpack",
+    "build": "rm -rf build && webpack --devtool eval",
     "npm-publish" : "npm publish --access=public"
   },
   "repository": {

src/lib/code-highlighter.ts

@@ -12,7 +12,12 @@ export default class CodeHighlighter {
 
     private editor: CodeMirror.EditorFromTextArea
     private readonly theme: string
+    private tsvLanguageIndex: number = 0
 
+    /**
+     *
+     * @param theme
+     */
     constructor(theme: string) {
 
         this.theme = theme
@@ -28,45 +33,30 @@ export default class CodeHighlighter {
 
         setRoot(shadowRoot)
 
+        const scopeName = 'source.func'
+        const language = 'func'
+
+        this.tsvLanguageIndex++
+
         await loadWASM(
             Utils.base64ToArrayBuffer(wasmBase64String)
             // webpack has been configured to resolve `.wasm` files to actual 'paths" as opposed to using the built-in wasm-loader
             // oniguruma is a low-level library and stock wasm-loader isn't equipped with advanced low-level API's to interact with libonig
         )
 
-        const grammars = {
-            'source.func': {
-                loader: () => import('./tm/grammar/func.tmLanguage.json'),
-                language: 'func',
-                priority: 'now'
-            }
-        }
-
-        // To avoid FOUC, await for high priority languages to get ready (loading/compiling takes time, and it's an async process for which CM won't wait)
-        await Promise.all(Object.keys(grammars).map(async scopeName => {
-            const {loader, language, priority} = grammars[scopeName]
-
-            addGrammar(scopeName, loader)
+        await addGrammar(scopeName, () => import('./tm/grammar/func.tmLanguage.json') as any)
 
-            if (language) {
-                const prom = activateLanguage(scopeName, language, priority)
-
-                // We must "wait" for high priority languages to load/compile before we render editor to avoid FOUC (Flash of Unstyled Content)
-                if (priority === 'now') {
-                    await prom
-                }
-
-                // 'asap' although "awaitable", is a medium priority, and doesn't need to be waited for
-                // 'defer' doesn't support awaiting at all
-                return
-            }
-        }))
+        await activateLanguage(
+            scopeName,
+            language,
+            'now'
+        )
 
         this.editor = CodeMirror.fromTextArea(element, {
             lineNumbers: true,
             // If you know in advance a language is going to be set on CodeMirror editor and it isn't preloaded by setting the third argument
             // to `activateLanguage` to 'now', the contents of the editor would start of and remain as unhighlighted text, until loading is complete
-            mode: 'func'
+            mode: language
         })
 
         // Using Textmate theme in CodeMirror
@@ -83,11 +73,7 @@ export default class CodeHighlighter {
 
         this.editor.setOption('theme', themeX.name)
 
-        // Grammar injections, example code below will highlight css-in-js (styled-components, emotion)
-        // injections are "injections", they are not standalone-grammars, therefore no `activateLanguage`
-        addGrammar('source.func', () => import('./tm/grammar/func.tmLanguage.json') as any)
-
-        const affectedLanguages = await linkInjections('source.func', ['source.func'])
+        const affectedLanguages = await linkInjections(scopeName, [scopeName])
 
         console.log(affectedLanguages)
         // You must re-trigger tokenization to apply the update above (if applicable)
@@ -98,9 +84,13 @@ export default class CodeHighlighter {
         }
     }
 
-    setCode(value) {
+    /**
+     *
+     * @param value
+     */
+    async setCode(value) {
 
-        this.editor.setValue(value)
+        return this.editor.setValue(value)
 
     }
 

src/lib/index.ts

@@ -3,8 +3,6 @@ import * as SVG from "./static/svg.json"
 
 const style = require("./style.css")
 
-const template = document.createElement('template')
-
 /**
  *
  */
@@ -52,12 +50,39 @@ export default class TSVWidgetElement extends HTMLElement {
 
         await this.buildTabs()
 
+        this.bindTabChangeEvents()
+
         this.selectFile(
             this.selectedFile
         )
 
     }
 
+    bindTabChangeEvents() {
+
+        const tabButtonsElements = this.shadowRoot.querySelectorAll("div.nav-tabs div.tab-button ");
+
+        for (const tabButtonsElement of tabButtonsElements) {
+
+            tabButtonsElement.addEventListener("click", () => {
+
+                for (const _tabButtonsElement of tabButtonsElements) {
+
+                    if (_tabButtonsElement !== tabButtonsElement) {
+                        _tabButtonsElement.classList.remove('active')
+                    }
+
+                }
+
+                tabButtonsElement.classList.add('active')
+
+                this.selectFile(tabButtonsElement.getAttribute('file-name'))
+            })
+
+        }
+
+    }
+
     /**
      * fetch sources from the verified contract json url
      */
@@ -89,6 +114,8 @@ export default class TSVWidgetElement extends HTMLElement {
 
         const codeMirrorCss = (require("codemirror/lib/codemirror.css")).toString()
 
+        const template = document.createElement('template')
+
         template.innerHTML = `      
                 <style>${codeMirrorCss}</style>
                 <style>${style}</style>     
@@ -143,27 +170,6 @@ export default class TSVWidgetElement extends HTMLElement {
             this.cmHost
         )
 
-        const tabButtonsElements = this.shadowRoot.querySelectorAll("div.nav-tabs div.tab-button ");
-
-        for (const tabButtonsElement of tabButtonsElements) {
-
-            tabButtonsElement.addEventListener("click", () => {
-
-                for (const _tabButtonsElement of tabButtonsElements) {
-
-                    if (_tabButtonsElement !== tabButtonsElement) {
-                        _tabButtonsElement.classList.remove('active')
-                    }
-
-                }
-
-                tabButtonsElement.classList.add('active')
-
-                this.selectFile(tabButtonsElement.getAttribute('file-name'))
-            })
-
-        }
-
     }
 
     /**
@@ -185,7 +191,9 @@ export default class TSVWidgetElement extends HTMLElement {
      * Runs when the element is removed from the DOM
      */
     disconnectedCallback() {
+
         console.log('disconnected', this)
+
     }
 
     /**

webpack.config.js

@@ -24,8 +24,8 @@ module.exports = {
         port: 8080
     },
     performance: {
-        maxEntrypointSize: 512000,
-        maxAssetSize: 512000
+        maxEntrypointSize: 2048000,
+        maxAssetSize: 2048000
     },
     optimization: {
         minimize: true,