feat(ui): monaco syntax (#16003)

2019-11-22 10:13:52 -08:00 · 2019-11-22 10:13:52 -08:00 · 7e8c8004ae
parent 212cec51af
commit 7e8c8004ae
7 changed files with 241 additions and 4 deletions
--- a/ui/package.json
+++ b/ui/package.json
@ -151,7 +151,10 @@
    "memoize-one": "^4.0.2",
    "moment": "^2.13.0",
    "monaco-editor": "^0.18.1",
+    "monaco-editor-textmate": "^2.2.1",
    "monaco-editor-webpack-plugin": "^1.7.0",
+    "monaco-textmate": "^3.0.1",
+    "onigasm": "^2.2.4",
    "papaparse": "^4.6.3",
    "prop-types": "^15.6.1",
    "qs": "^6.5.2",
--- a/ui/src/external/flux.tmLanguage.json
+++ b/ui/src/external/flux.tmLanguage.json
@ -0,0 +1,104 @@
+{
+  "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
+  "name": "flux lang",
+  "patterns": [
+    {
+      "include": "#comments"
+    },
+    {
+      "include": "#root_parens"
+    },
+    {
+      "include": "#keywords"
+    },
+    {
+      "include": "#supports"
+    },
+    {
+      "include": "#strings"
+    },
+    {
+      "include": "#regexps"
+    }
+  ],
+  "repository": {
+    "root_paren": {
+      "begin": "\\(",
+      "end": "(?<=\\()(\\))?|(?:\\))"
+    },
+    "keywords": {
+      "patterns": [
+        {
+          "name": "keyword.control.flux",
+          "match": "\\b(in|import|package|return|option|builtin|test|if|then|else|exists)\\b"
+        },
+        {
+          "name": "keyword.operator",
+          "match": "\\B(\\+|\\-|\\*|\\/|\\%|\\^|\\=\\=|<|>|\\!\\=|\\=\\~|\\!\\~|\\=|\\=>|<\\-)\\B"
+        },
+        {
+          "name": "keyword.operator",
+          "match": "\\b(and|or)\\b"
+        },
+        {
+          "name": "keyword.operator.new",
+          "match": "\\|>"
+        },
+        {
+          "name": "constant.language",
+          "match": "\\b(true|false|empty)\\b"
+        },
+        {
+          "name": "constant.other",
+          "match": "\\b(\\d{4}-\\d{2}-\\d{2}(T\\d{2}\\:\\d{2}\\:\\d{2}(\\.\\d*)?((Z|(\\+|\\-)\\d{2}:\\d{2}))?)?)\\b"
+        },
+        {
+          "name": "constant.time",
+          "match": "\\b(\\d*(y|mo|w|d|h|m|s|ms|us|µs|ns))+\\b"
+        },
+        {
+          "name": "constant.numeric",
+          "match": "\\b((0(x|X)[0-9a-fA-F]*)|((\\d+\\.?\\d*)|(\\.\\d+)))\\b"
+        }
+      ]
+    },
+    "supports": {
+      "patterns": [
+        {
+          "name": "support.function",
+          "match": "\\b(from|to|buckets|join)\\b"
+        },
+        {
+          "name": "support.function",
+          "match": "(^|(?<=[(\\.?)|(\\|>\\s)]))([\\d\\w\\_]+)(?=\\()"
+        },
+        {
+          "name": "support.function",
+          "match": "\\b(fn)(?=\\:)\\b"
+        }
+      ]
+    },
+    "comments": {
+      "name": "comment.line.double-slash",
+      "begin": "//",
+      "end": "\n|\r"
+    },
+    "strings": {
+      "name": "string.quoted.double.flux",
+      "begin": "\"",
+      "end": "\"",
+      "patterns": [
+        {
+          "name": "constant.character.escape.flux",
+          "match": "\\\\."
+        }
+      ]
+    },
+    "regexps": {
+      "name": "string.regexp",
+      "begin": "/(?=\\S.*/)",
+      "end": "[^\\\\/+]\\/"
+    }
+  },
+  "scopeName": "flux"
+}
--- a/ui/src/external/monaco.fluxSyntax.ts
+++ b/ui/src/external/monaco.fluxSyntax.ts
@ -0,0 +1,28 @@
+import {loadWASM} from 'onigasm' // peer dependency of 'monaco-textmate'
+import {Registry} from 'monaco-textmate' // peer dependency
+import {wireTmGrammars} from 'monaco-editor-textmate'
+
+export async function addSyntax(monaco) {
+  await loadWASM(require(`onigasm/lib/onigasm.wasm`))
+
+  monaco.languages.register({id: 'flux'})
+
+  const registry = new Registry({
+    // TODO: this is maintained in influxdata/vsflux, which is currently
+    // a private repo, so we can't use it yet (alex)
+    getGrammarDefinition: async () => ({
+      format: 'json',
+      content: await import(/* webpackPrefetch: 0 */ 'src/external/flux.tmLanguage.json').then(
+        data => {
+          return JSON.stringify(data)
+        }
+      ),
+    }),
+  })
+
+  // map of monaco "language id's" to TextMate scopeNames
+  const grammars = new Map()
+  grammars.set('flux', 'flux')
+
+  await wireTmGrammars(monaco, registry, grammars)
+}
--- a/ui/src/external/monaco.fluxTheme.ts
+++ b/ui/src/external/monaco.fluxTheme.ts
@ -4,6 +4,46 @@ export default function(monaco) {
    base: 'vs-dark',
    inherit: false,
    rules: [
+      {
+        token: 'support.function',
+        foreground: '#9394FF',
+      },
+      {
+        token: 'keyword.operator.new',
+        foreground: '#9394FF',
+      },
+      {
+        token: 'keyword.control.flux',
+        foreground: '#9394FF',
+      },
+      {
+        token: 'comment.line.double-slash',
+        foreground: '#676978',
+      },
+      {
+        token: 'string.quoted.double.flux',
+        foreground: '#7CE490',
+      },
+      {
+        token: 'string.regexp',
+        foreground: '#FFB6A0',
+      },
+      {
+        token: 'constant.time',
+        foreground: '#6BDFFF',
+      },
+      {
+        token: 'constant.numeric',
+        foreground: '#6BDFFF',
+      },
+      {
+        token: 'constant.language',
+        foreground: '#32B08C',
+      },
+      {
+        token: 'keyword.operator',
+        foreground: '#ff4d96',
+      },
      {
        token: '',
        foreground: '#f8f8f8',
--- a/ui/src/shared/components/FluxMonacoEditor.tsx
+++ b/ui/src/shared/components/FluxMonacoEditor.tsx
@ -3,9 +3,9 @@ import React, {FC} from 'react'

 // Components
 import MonacoEditor from 'react-monaco-editor'
-import {tokenizeFlux} from 'src/external/monaco.fluxLang'
 import addFluxTheme, {THEME_NAME} from 'src/external/monaco.fluxTheme'
 import {addSnippets} from 'src/external/monaco.fluxCompletions'
+import {addSyntax} from 'src/external/monaco.fluxSyntax'
 import {OnChangeScript} from 'src/types/flux'
 import './FluxMonacoEditor.scss'

@ -24,8 +24,8 @@ interface Props {
 const FluxEditorMonaco: FC<Props> = props => {
  const editorWillMount = monaco => {
    addFluxTheme(monaco)
-    tokenizeFlux(monaco)
    addSnippets(monaco)
+    addSyntax(monaco)
  }
  const editorDidMount = editor => {
    editor.onDidChangeCursorPosition(evt => {
--- a/ui/webpack.common.ts
+++ b/ui/webpack.common.ts
@ -33,7 +33,8 @@ module.exports = {
    rules: [
      {
        test: /\.wasm$/,
-        type: 'webassembly/experimental',
+        loader: "file-loader",
+        type: "javascript/auto",
      },
      {
        test: /\.tsx?$/,
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@ -2624,6 +2624,11 @@ buffer@^4.3.0:
    ieee754 "^1.1.4"
    isarray "^1.0.0"

+builtin-modules@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+  integrity sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=
+
 builtin-status-codes@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
@ -3217,7 +3222,7 @@ commander@2.8.x:
  dependencies:
    graceful-readlink ">= 1.0.0"

-commander@^2.18.0:
+commander@^2.12.1, commander@^2.18.0:
  version "2.20.3"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@ -4891,6 +4896,11 @@ fast-levenshtein@~2.0.4:
  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=

+fast-plist@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/fast-plist/-/fast-plist-0.1.2.tgz#a45aff345196006d406ca6cdcd05f69051ef35b8"
+  integrity sha1-pFr/NFGWAG1AbKbNzQX2kFHvNbg=
+
 fast.js@^0.1.1:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/fast.js/-/fast.js-0.1.1.tgz#7c024d55ae144882fbcee44b79005fe2dcabd9fe"
@ -7849,6 +7859,11 @@ moment@^2.13.0, moment@^2.8.2:
  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
  integrity sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=

+monaco-editor-textmate@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/monaco-editor-textmate/-/monaco-editor-textmate-2.2.1.tgz#93f3f1932061dd2311b92a42ea1c027cfeb3e439"
+  integrity sha512-RYTNNfvyjK15M0JA8WIi9UduU10eX5724UGNKnaA8MSetehjThGENctUTuKaxPk/k3pq59QzaQ/C06A44iJd3Q==
+
 monaco-editor-webpack-plugin@^1.7.0:
  version "1.7.0"
  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.7.0.tgz#920cbeecca25f15d70d568a7e11b0ba4daf1ae83"
@ -7861,6 +7876,13 @@ monaco-editor@^0.18.1:
  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.18.1.tgz#ced7c305a23109875feeaf395a504b91f6358cfc"
  integrity sha512-fmL+RFZ2Hrezy+X/5ZczQW51LUmvzfcqOurnkCIRFTyjdVjzR7JvENzI6+VKBJzJdPh6EYL4RoWl92b2Hrk9fw==

+monaco-textmate@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/monaco-textmate/-/monaco-textmate-3.0.1.tgz#b6d26d266aa12edaff7069dae0d6e3747cba5cd7"
+  integrity sha512-ZxxY3OsqUczYP1sGqo97tu+CJmMBwuSW+dL0WEBdDhOZ5G1zntw72hvBc68ZQAirosWvbDKgN1dL5k173QtFww==
+  dependencies:
+    fast-plist "^0.1.2"
+
 moo@^0.4.3:
  version "0.4.3"
  resolved "https://registry.yarnpkg.com/moo/-/moo-0.4.3.tgz#3f847a26f31cf625a956a87f2b10fbc013bfd10e"
@ -8402,6 +8424,14 @@ onetime@^5.1.0:
  dependencies:
    mimic-fn "^2.1.0"

+onigasm@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/onigasm/-/onigasm-2.2.4.tgz#b0ad97e3d7c3080476a1e5daae4b4579a976cbba"
+  integrity sha512-BJKxCTsK0mrLh+A6AuNzknxaULZRKM5uywA2goluMLLCjfMm/PTUa0M7oSH1Ltb6CT1oKXn2atHR75Y3JQ0SSg==
+  dependencies:
+    lru-cache "^5.1.1"
+    tslint "^5.20.1"
+
 ono@^5.0.1:
  version "5.0.1"
  resolved "https://registry.yarnpkg.com/ono/-/ono-5.0.1.tgz#a39e0af7ab2c2a143a06f08ad9d187e61f9da0c8"
@ -11481,11 +11511,42 @@ ts-node@^8.3.0:
    source-map-support "^0.5.6"
    yn "^3.0.0"

+tslib@^1.8.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
+  integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
+
 tslib@^1.8.1, tslib@^1.9.0:
  version "1.9.3"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
  integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==

+tslint@^5.20.1:
+  version "5.20.1"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.20.1.tgz#e401e8aeda0152bc44dd07e614034f3f80c67b7d"
+  integrity sha512-EcMxhzCFt8k+/UP5r8waCf/lzmeSyVlqxqMEDQE7rWYiQky8KpIBz1JAoYXfROHrPZ1XXd43q8yQnULOLiBRQg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    builtin-modules "^1.1.1"
+    chalk "^2.3.0"
+    commander "^2.12.1"
+    diff "^4.0.1"
+    glob "^7.1.1"
+    js-yaml "^3.13.1"
+    minimatch "^3.0.4"
+    mkdirp "^0.5.1"
+    resolve "^1.3.2"
+    semver "^5.3.0"
+    tslib "^1.8.0"
+    tsutils "^2.29.0"
+
+tsutils@^2.29.0:
+  version "2.29.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.29.0.tgz#32b488501467acbedd4b85498673a0812aca0b99"
+  integrity sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==
+  dependencies:
+    tslib "^1.8.1"
+
 tsutils@^3.17.1:
  version "3.17.1"
  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"