|
|
@@ -15,53 +15,23 @@ import nullthrows from 'nullthrows';
|
|
|
import {createGrammarStore} from './index';
|
|
|
import {INITIAL} from 'vscode-textmate';
|
|
|
|
|
|
-async function main() {
|
|
|
- // 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.
|
|
|
- //
|
|
|
- // 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: [],
|
|
|
- });
|
|
|
- }
|
|
|
+// From monaco-editor-textmate README.
|
|
|
+import {Registry} from 'monaco-textmate';
|
|
|
+import {wireTmGrammars} from 'monaco-editor-textmate';
|
|
|
+import {loadWASM} from 'onigasm';
|
|
|
|
|
|
- const scopeNameToTextMateGrammarURL: Map<string, string> = new Map(
|
|
|
- grammarConfigurations.map(({scopeName, url}) => [scopeName, url]),
|
|
|
- );
|
|
|
- const grammarStore = await createGrammarStore(scopeNameToTextMateGrammarURL);
|
|
|
+type GrammarConfiguration = {language: string; scopeName: string; url: string};
|
|
|
|
|
|
- for (const {language, scopeName} of grammarConfigurations) {
|
|
|
- // const tokensProvider = await grammarStore.createTokensProvider(scopeName);
|
|
|
- const tokensProvider = await grammarStore.createEncodedTokensProvider(scopeName);
|
|
|
- monaco.languages.setTokensProvider(language, tokensProvider);
|
|
|
- }
|
|
|
+const useEncodedTokens = false;
|
|
|
+main(useEncodedTokens, 'hack');
|
|
|
|
|
|
- const options = [
|
|
|
- {
|
|
|
- language: 'hack',
|
|
|
- value: `<?hh // strict
|
|
|
+const testOptions = {
|
|
|
+ hack: `<?hh // strict
|
|
|
|
|
|
class Example {
|
|
|
}
|
|
|
`,
|
|
|
- },
|
|
|
- {
|
|
|
- language: 'html',
|
|
|
- value: `<!DOCTYPE HTML>
|
|
|
+ html: `<!DOCTYPE HTML>
|
|
|
<html>
|
|
|
<head>
|
|
|
</head>
|
|
|
@@ -69,10 +39,7 @@ class Example {
|
|
|
</body>
|
|
|
</html>
|
|
|
`,
|
|
|
- },
|
|
|
- {
|
|
|
- language: 'javascript',
|
|
|
- value: `
|
|
|
+ javascript: `
|
|
|
const React = require('react');
|
|
|
|
|
|
function create() {
|
|
|
@@ -83,23 +50,50 @@ function create() {
|
|
|
);
|
|
|
}
|
|
|
`,
|
|
|
- },
|
|
|
+};
|
|
|
+
|
|
|
+async function main(useEncodedTokens: boolean, testLanguage: keyof typeof testOptions) {
|
|
|
+ // 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.
|
|
|
+ //
|
|
|
+ // This sort of looks like:
|
|
|
+ // https://github.com/microsoft/vscode-textmate/blob/0730e8ef740d87401764d76e9193f74c6f458b37/test-cases/themes/grammars.json
|
|
|
+ const grammarConfigurations: GrammarConfiguration[] = [
|
|
|
+ {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'},
|
|
|
];
|
|
|
- const {language, value} = options[0];
|
|
|
+
|
|
|
+ // 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: [],
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ if (useEncodedTokens) {
|
|
|
+ await tryEncodedTokensProvider(grammarConfigurations);
|
|
|
+ } else {
|
|
|
+ await tryMonacoEditorTextMate(grammarConfigurations);
|
|
|
+ }
|
|
|
+
|
|
|
+ const value = testOptions[testLanguage];
|
|
|
|
|
|
const theme = 'hackTheme';
|
|
|
defineTheme(theme);
|
|
|
monaco.editor.create(nullthrows(document.getElementById('container')), {
|
|
|
value,
|
|
|
- language,
|
|
|
- // theme,
|
|
|
+ language: testLanguage,
|
|
|
+ theme,
|
|
|
minimap: {
|
|
|
enabled: false,
|
|
|
},
|
|
|
});
|
|
|
-
|
|
|
- // Although the web demo doesn't work, this seems to have sensible output.
|
|
|
- await tryCodeOnVSCodeTextMateReadme(grammarStore);
|
|
|
}
|
|
|
|
|
|
async function tryCodeOnVSCodeTextMateReadme(grammarStore: GrammarStore) {
|
|
|
@@ -126,7 +120,21 @@ class Example {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-main();
|
|
|
+async function tryEncodedTokensProvider(grammarConfigurations: GrammarConfiguration[]) {
|
|
|
+ const scopeNameToTextMateGrammarURL: Map<string, string> = new Map(
|
|
|
+ grammarConfigurations.map(({scopeName, url}) => [scopeName, url]),
|
|
|
+ );
|
|
|
+ const grammarStore = await createGrammarStore(scopeNameToTextMateGrammarURL);
|
|
|
+
|
|
|
+ for (const {language, scopeName} of grammarConfigurations) {
|
|
|
+ // const tokensProvider = await grammarStore.createTokensProvider(scopeName);
|
|
|
+ const tokensProvider = await grammarStore.createEncodedTokensProvider(scopeName);
|
|
|
+ monaco.languages.setTokensProvider(language, tokensProvider);
|
|
|
+ }
|
|
|
+
|
|
|
+ // Although the web demo doesn't work, this seems to have sensible output.
|
|
|
+ await tryCodeOnVSCodeTextMateReadme(grammarStore);
|
|
|
+}
|
|
|
|
|
|
function defineTheme(name: string): void {
|
|
|
// This code is ported from this playground:
|
|
|
@@ -144,3 +152,30 @@ function defineTheme(name: string): void {
|
|
|
],
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+// Adapted from the README for monaco-editor-textmate.
|
|
|
+async function tryMonacoEditorTextMate(grammarConfigurations: GrammarConfiguration[]) {
|
|
|
+ await loadWASM('/node_modules/onigasm/lib/onigasm.wasm');
|
|
|
+
|
|
|
+ const registry = new Registry({
|
|
|
+ getGrammarDefinition: async (scopeName) => {
|
|
|
+ const config = grammarConfigurations.find((config) => config.scopeName === scopeName);
|
|
|
+ if (config == null) {
|
|
|
+ throw Error(`no URL for ${scopeName}`);
|
|
|
+ }
|
|
|
+
|
|
|
+ const {url} = config;
|
|
|
+ const format = url.endsWith('.json') ? 'json' : 'plist';
|
|
|
+ return {
|
|
|
+ format,
|
|
|
+ content: await (await fetch(url)).text(),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const grammars = new Map(
|
|
|
+ grammarConfigurations.map(({language, scopeName}) => [language, scopeName]),
|
|
|
+ );
|
|
|
+
|
|
|
+ await wireTmGrammars(monaco, registry, grammars);
|
|
|
+}
|
Michael Bolin