Use MonacoWebpackPlugin to disable default language tokenizers.

This was confusing things and explains why some languages, like HTML,
appeared to work, but it wasn't because of the TextMate grammar!

Got this idea by reading
https://github.com/NeekSandhu/monaco-editor-textmate/blame/45e137e5604504bcf744ef86215becbbb1482384/README.md#L58-L59

Now nothing is syntax highlighted (e.g., neither Hack nor HTML work),
so now we're sure our code is being used.

package.json

@@ -15,6 +15,7 @@
   "devDependencies": {
     "css-loader": "3.5.3",
     "file-loader": "6.0.0",
+    "monaco-editor-webpack-plugin": "1.9.0",
     "prettier": "2.0.5",
     "style-loader": "1.2.1",
     "ts-loader": "7.0.2",

src/app.ts

@@ -1,71 +1,50 @@
 import type {GrammarStore} from './index';
 
-import * as monaco from 'monaco-editor';
+// Recall we are using MonacoWebpackPlugin. According to the
+// monaco-editor-webpack-plugin docs, we must use:
+//
+// import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+//
+// instead of
+//
+// import * as monaco from 'monaco-editor';
+//
+// because we are shipping only a subset of the languages.
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import nullthrows from 'nullthrows';
 import {createGrammarStore} from './index';
 import {INITIAL} from 'vscode-textmate';
 
-declare global {
-  interface Window {
-    MonacoEnvironment: {
-      getWorkerUrl(moduleId: string, label: string): string;
-    } | null;
-  }
-}
-
 async function main() {
-  window['MonacoEnvironment'] = {
-    getWorkerUrl(_moduleId: string, label: string) {
-      if (label === 'json') {
-        return './json.worker.bundle.js';
-      }
-      if (label === 'css') {
-        return './css.worker.bundle.js';
-      }
-      if (label === 'html') {
-        return './html.worker.bundle.js';
-      }
-      if (label === 'typescript' || label === 'javascript') {
-        return './ts.worker.bundle.js';
-      }
-      return './editor.worker.bundle.js';
-    },
-  };
-
-  // We have to specify a LanguageConfiguration for Hack before we can register
-  // a tokens provider for it.
-  const hackLanguageIdForMonaco = 'hack';
-  monaco.languages.register({
-    id: hackLanguageIdForMonaco,
-    extensions: ['.php'],
-  });
-
-  // Apparently we have to tell Monaco about Smarty, as well.
-  const smartyLanguageIdForMonaco = 'smarty';
-  monaco.languages.register({
-    id: smartyLanguageIdForMonaco,
-    extensions: ['.tpl'],
-  });
-
   // Note that Hack lists text.html.basic as an embedded grammar, so we must
   // provide that grammar (and all of its transitive deps) as well.
   //
-  // [language, scopeName, textMateGrammarURL]
-  const grammars = [
-    ['css', 'source.css', '/grammars/css.plist'],
-    [hackLanguageIdForMonaco, 'source.hack', '/grammars/hack.json'],
-    ['html', 'text.html.basic', '/grammars/html.json'],
-    ['javascript', 'source.js', '/grammars/JavaScript.tmLanguage.json'],
-    ['python', 'source.python', '/grammars/MagicPython.tmLanguage.json'],
-    [smartyLanguageIdForMonaco, 'source.smarty', '/grammars/smarty.tmLanguage.json'],
-    ['sql', 'source.sql', '/grammars/SQL.plist'],
+  // This sort of looks like:
+  // https://github.com/microsoft/vscode-textmate/blob/0730e8ef740d87401764d76e9193f74c6f458b37/test-cases/themes/grammars.json
+  const grammarConfigurations = [
+    {language: 'css', scopeName: 'source.css', url: '/grammars/css.plist'},
+    {language: 'hack', scopeName: 'source.hack', url: '/grammars/hack.json'},
+    {language: 'html', scopeName: 'text.html.basic', url: '/grammars/html.json'},
+    {language: 'javascript', scopeName: 'source.js', url: '/grammars/JavaScript.tmLanguage.json'},
+    {language: 'python', scopeName: 'source.python', url: '/grammars/MagicPython.tmLanguage.json'},
+    {language: 'smarty', scopeName: 'source.smarty', url: '/grammars/smarty.tmLanguage.json'},
+    {language: 'sql', scopeName: 'source.sql', url: '/grammars/SQL.plist'},
   ];
+
+  // We have to register all of the languages with Monaco before we can configure them.
+  for (const {language} of grammarConfigurations) {
+    monaco.languages.register({
+      id: language,
+      extensions: [],
+    });
+  }
+
   const scopeNameToTextMateGrammarURL: Map<string, string> = new Map(
-    grammars.map(([, scopeName, textMateGrammarURL]) => [scopeName, textMateGrammarURL]),
+    grammarConfigurations.map(({scopeName, url}) => [scopeName, url]),
   );
   const grammarStore = await createGrammarStore(scopeNameToTextMateGrammarURL);
 
-  for (const [language, scopeName] of grammars) {
+  for (const {language, scopeName} of grammarConfigurations) {
     // const tokensProvider = await grammarStore.createTokensProvider(scopeName);
     const tokensProvider = await grammarStore.createEncodedTokensProvider(scopeName);
     monaco.languages.setTokensProvider(language, tokensProvider);

src/index.ts

@@ -38,6 +38,8 @@ export class GrammarStore {
     };
   }
 
+  // https://github.com/NeekSandhu/monaco-editor-textmate/issues/11#issuecomment-561984387
+  // provides some insight as to why this isn't working.
   async createEncodedTokensProvider(
     scopeName: string,
   ): Promise<monaco.languages.EncodedTokensProvider> {

webpack.config.cjs

@@ -1,3 +1,4 @@
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const path = require('path');
 
 module.exports = {
@@ -39,4 +40,9 @@ module.exports = {
       },
     ],
   },
+  // As suggested on:
+  // https://github.com/NeekSandhu/monaco-editor-textmate/blame/45e137e5604504bcf744ef86215becbbb1482384/README.md#L58-L59
+  //
+  // Use the MonacoWebpackPlugin to disable all built-in tokenizers/languages.
+  plugins: [new MonacoWebpackPlugin({languages: []})],
 };

yarn.lock

@@ -2594,6 +2594,13 @@ mkdirp@^0.5.1, mkdirp@^0.5.3:
   dependencies:
     minimist "^1.2.5"
 
+monaco-editor-webpack-plugin@1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.9.0.tgz#5b547281b9f404057dc5d8c5722390df9ac90be6"
+  integrity sha512-tOiiToc94E1sb50BgZ8q8WK/bxus77SRrwCqIpAB5er3cpX78SULbEBY4YPOB8kDolOzKRt30WIHG/D6gz69Ww==
+  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"