app/assets/javascripts/design_management/utils/tracking.js

+import Tracking from '~/tracking';
+
+function assembleDesignPayload(payloadArr) {
+  return {
+    value: {
+      'internal-object-refrerer': payloadArr[0],
+      'version-number': payloadArr[1],
+      'current-version': payloadArr[2],
+    },
+  };
+}
+
+// Tracking Constants
+const DESIGN_TRACKING_PAGE_NAME = 'projects:issues:design';
+
+// eslint-disable-next-line import/prefer-default-export
+export function trackDesignDetailView(refrerer = '', designVersion = 1, latestVersion = false) {
+  Tracking.event(DESIGN_TRACKING_PAGE_NAME, 'design_viewed', {
+    label: 'design_viewed',
+    ...assembleDesignPayload([refrerer, designVersion, latestVersion]),
+  });
+}

app/assets/javascripts/diffs/store/utils.js

@@ -233,7 +233,7 @@ export function trimFirstCharOfLineContent(line = {}) {
   // eslint-disable-next-line no-param-reassign
   delete line.text;
 
-  const parsedLine = Object.assign({}, line);
+  const parsedLine = { ...line };
 
   if (line.rich_text) {
     const firstChar = parsedLine.rich_text.charAt(0);

app/assets/javascripts/editor/editor_lite.js

 import { editor as monacoEditor, languages as monacoLanguages, Uri } from 'monaco-editor';
 import { DEFAULT_THEME, themes } from '~/ide/lib/themes';
+import languages from '~/ide/lib/languages';
 import { defaultEditorOptions } from '~/ide/lib/editor_options';
+import { registerLanguages } from '~/ide/utils';
 import { clearDomElement } from './utils';
 
 export default class Editor {
@@ -17,6 +19,8 @@ export default class Editor {
     };
 
     Editor.setupMonacoTheme();
+
+    registerLanguages(...languages);
   }
 
   static setupMonacoTheme() {

app/assets/javascripts/environments/stores/environments_store.js

@@ -58,13 +58,14 @@ export default class EnvironmentsStore {
       let filtered = {};
 
       if (env.size > 1) {
-        filtered = Object.assign({}, env, {
+        filtered = {
+          ...env,
           isFolder: true,
           isLoadingFolderContent: oldEnvironmentState.isLoading || false,
           folderName: env.name,
           isOpen: oldEnvironmentState.isOpen || false,
           children: oldEnvironmentState.children || [],
-        });
+        };
       }
 
       if (env.latest) {
@@ -166,7 +167,7 @@ export default class EnvironmentsStore {
       let updated = env;
 
       if (env.latest) {
-        updated = Object.assign({}, env, env.latest);
+        updated = { ...env, ...env.latest };
         delete updated.latest;
       } else {
         updated = env;
@@ -192,7 +193,7 @@ export default class EnvironmentsStore {
     const { environments } = this.state;
 
     const updatedEnvironments = environments.map(env => {
-      const updateEnv = Object.assign({}, env);
+      const updateEnv = { ...env };
       if (env.id === environment.id) {
         updateEnv[prop] = newValue;
       }

app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js

@@ -120,7 +120,7 @@ export default class FilteredSearchDropdownManager {
         filter: key,
       };
       const extraArguments = mappingKey.extraArguments || {};
-      const glArguments = Object.assign({}, defaultArguments, extraArguments);
+      const glArguments = { ...defaultArguments, ...extraArguments };
 
       // Passing glArguments to `new glClass(<arguments>)`
       mappingKey.reference = new (Function.prototype.bind.apply(glClass, [null, glArguments]))();

app/assets/javascripts/filtered_search/stores/recent_searches_store.js

@@ -2,14 +2,12 @@ import { uniq } from 'lodash';
 
 class RecentSearchesStore {
   constructor(initialState = {}, allowedKeys) {
-    this.state = Object.assign(
-      {
-        isLocalStorageAvailable: true,
-        recentSearches: [],
-        allowedKeys,
-      },
-      initialState,
-    );
+    this.state = {
+      isLocalStorageAvailable: true,
+      recentSearches: [],
+      allowedKeys,
+      ...initialState,
+    };
   }
 
   addRecentSearch(newSearch) {

app/assets/javascripts/gl_dropdown.js

@@ -595,13 +595,14 @@ class GitLabDropdown {
 
     return renderItem({
       instance: this,
-      options: Object.assign({}, this.options, {
+      options: {
+        ...this.options,
         icon: this.icon,
         highlight: this.highlight,
         highlightText: text => this.highlightTextMatches(text, this.filterInput.val()),
         highlightTemplate: this.highlightTemplate.bind(this),
         parent,
-      }),
+      },
       data,
       group,
       index,

app/assets/javascripts/gl_form.js

@@ -8,7 +8,7 @@ export default class GLForm {
   constructor(form, enableGFM = {}) {
     this.form = form;
     this.textarea = this.form.find('textarea.js-gfm-input');
-    this.enableGFM = Object.assign({}, defaultAutocompleteConfig, enableGFM);
+    this.enableGFM = { ...defaultAutocompleteConfig, ...enableGFM };
     // Disable autocomplete for keywords which do not have dataSources available
     const dataSources = (gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources) || {};
     Object.keys(this.enableGFM).forEach(item => {

app/assets/javascripts/groups/new_group_child.js

@@ -2,7 +2,7 @@ import { visitUrl } from '../lib/utils/url_utility';
 import DropLab from '../droplab/drop_lab';
 import ISetter from '../droplab/plugins/input_setter';
 
-const InputSetter = Object.assign({}, ISetter);
+const InputSetter = { ...ISetter };
 
 const NEW_PROJECT = 'new-project';
 const NEW_SUBGROUP = 'new-subgroup';

app/assets/javascripts/ide/components/commit_sidebar/list.vue

 <script>
-import $ from 'jquery';
 import { mapActions } from 'vuex';
 import { __, sprintf } from '~/locale';
+import { GlModal } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
-import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import ListItem from './list_item.vue';
 
@@ -11,7 +10,7 @@ export default {
   components: {
     Icon,
     ListItem,
-    GlModal: DeprecatedModal2,
+    GlModal,
   },
   directives: {
     tooltip,
@@ -58,7 +57,7 @@ export default {
   methods: {
     ...mapActions(['stageAllChanges', 'unstageAllChanges', 'discardAllChanges']),
     openDiscardModal() {
-      $('#discard-all-changes').modal('show');
+      this.$refs.discardAllModal.show();
     },
     unstageAndDiscardAllChanges() {
       this.unstageAllChanges();
@@ -114,11 +113,12 @@ export default {
     </p>
     <gl-modal
       v-if="!stagedList"
-      id="discard-all-changes"
-      :footer-primary-button-text="__('Discard all changes')"
-      :header-title-text="__('Discard all changes?')"
-      footer-primary-button-variant="danger"
-      @submit="unstageAndDiscardAllChanges"
+      ref="discardAllModal"
+      ok-variant="danger"
+      modal-id="discard-all-changes"
+      :ok-title="__('Discard all changes')"
+      :title="__('Discard all changes?')"
+      @ok="unstageAndDiscardAllChanges"
     >
       {{ $options.discardModalText }}
     </gl-modal>

app/assets/javascripts/ide/components/ide.vue

@@ -3,6 +3,7 @@ import Vue from 'vue';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
+import { modalTypes } from '../constants';
 import FindFile from '~/vue_shared/components/file_finder/index.vue';
 import NewModal from './new_dropdown/modal.vue';
 import IdeSidebar from './ide_side_bar.vue';
@@ -67,7 +68,7 @@ export default {
       document.querySelector('.navbar-gitlab').classList.add(`theme-${this.themeName}`);
   },
   methods: {
-    ...mapActions(['toggleFileFinder', 'openNewEntryModal']),
+    ...mapActions(['toggleFileFinder']),
     onBeforeUnload(e = {}) {
       const returnValue = __('Are you sure you want to lose unsaved changes?');
 
@@ -81,6 +82,9 @@ export default {
     openFile(file) {
       this.$router.push(`/project${file.url}`);
     },
+    createNewFile() {
+      this.$refs.newModal.open(modalTypes.blob);
+    },
   },
 };
 </script>
@@ -137,7 +141,7 @@ export default {
                       variant="success"
                       :title="__('New file')"
                       :aria-label="__('New file')"
-                      @click="openNewEntryModal({ type: 'blob' })"
+                      @click="createNewFile()"
                     >
                       {{ __('New file') }}
                     </gl-deprecated-button>
@@ -159,6 +163,6 @@ export default {
       <component :is="rightPaneComponent" v-if="currentProjectId" />
     </div>
     <ide-status-bar />
-    <new-modal />
+    <new-modal ref="newModal" />
   </article>
 </template>

app/assets/javascripts/ide/components/ide_tree.vue

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
+import { modalTypes } from '../constants';
 import IdeTreeList from './ide_tree_list.vue';
 import Upload from './new_dropdown/upload.vue';
 import NewEntryButton from './new_dropdown/button.vue';
+import NewModal from './new_dropdown/modal.vue';
 
 export default {
   components: {
     Upload,
     IdeTreeList,
     NewEntryButton,
+    NewModal,
   },
   computed: {
     ...mapState(['currentBranchId']),
@@ -26,7 +29,13 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['updateViewer', 'openNewEntryModal', 'createTempEntry', 'resetOpenFiles']),
+    ...mapActions(['updateViewer', 'createTempEntry', 'resetOpenFiles']),
+    createNewFile() {
+      this.$refs.newModal.open(modalTypes.blob);
+    },
+    createNewFolder() {
+      this.$refs.newModal.open(modalTypes.tree);
+    },
   },
 };
 </script>
@@ -41,7 +50,7 @@ export default {
           :show-label="false"
           class="d-flex border-0 p-0 mr-3 qa-new-file"
           icon="doc-new"
-          @click="openNewEntryModal({ type: 'blob' })"
+          @click="createNewFile()"
         />
         <upload
           :show-label="false"
@@ -54,9 +63,10 @@ export default {
           :show-label="false"
           class="d-flex border-0 p-0"
           icon="folder-new"
-          @click="openNewEntryModal({ type: 'tree' })"
+          @click="createNewFolder()"
         />
       </div>
+      <new-modal ref="newModal" />
     </template>
   </ide-tree-list>
 </template>

app/assets/javascripts/ide/components/nav_form.vue

@@ -25,13 +25,13 @@ export default {
   <div class="ide-nav-form p-0">
     <tabs v-if="showMergeRequests" stop-propagation>
       <tab active>
-        <template slot="title">
+        <template #title>
           {{ __('Branches') }}
         </template>
         <branches-search-list />
       </tab>
       <tab>
-        <template slot="title">
+        <template #title>
           {{ __('Merge Requests') }}
         </template>
         <merge-request-search-list />

app/assets/javascripts/ide/components/new_dropdown/index.vue

@@ -4,12 +4,14 @@ import icon from '~/vue_shared/components/icon.vue';
 import upload from './upload.vue';
 import ItemButton from './button.vue';
 import { modalTypes } from '../../constants';
+import NewModal from '../new_dropdown/modal.vue';
 
 export default {
   components: {
     icon,
     upload,
     ItemButton,
+    NewModal,
   },
   props: {
     type: {
@@ -37,9 +39,9 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['createTempEntry', 'openNewEntryModal', 'deleteEntry']),
+    ...mapActions(['createTempEntry', 'deleteEntry']),
     createNewItem(type) {
-      this.openNewEntryModal({ type, path: this.path });
+      this.$refs.newModal.open(type, this.path);
       this.$emit('toggle', false);
     },
     openDropdown() {
@@ -109,5 +111,6 @@ export default {
         </li>
       </ul>
     </div>
+    <new-modal ref="newModal" />
   </div>
 </template>

app/assets/javascripts/ide/components/new_dropdown/modal.vue

 <script>
-import $ from 'jquery';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import flash from '~/flash';
 import { __, sprintf, s__ } from '~/locale';
-import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
+import { GlModal } from '@gitlab/ui';
 import { modalTypes } from '../../constants';
 
 export default {
   components: {
-    GlModal: DeprecatedModal2,
+    GlModal,
   },
   data() {
     return {
       name: '',
+      type: modalTypes.blob,
+      path: '',
     };
   },
   computed: {
-    ...mapState(['entries', 'entryModal']),
+    ...mapState(['entries']),
     ...mapGetters('fileTemplates', ['templateTypes']),
     entryName: {
       get() {
-        const entryPath = this.entryModal.entry.path;
-
-        if (this.entryModal.type === modalTypes.rename) {
-          return this.name || entryPath;
+        if (this.type === modalTypes.rename) {
+          return this.name || this.path;
         }
 
-        return this.name || (entryPath ? `${entryPath}/` : '');
+        return this.name || (this.path ? `${this.path}/` : '');
       },
       set(val) {
         this.name = val.trim();
       },
     },
     modalTitle() {
-      if (this.entryModal.type === modalTypes.tree) {
+      const entry = this.entries[this.path];
+
+      if (this.type === modalTypes.tree) {
         return __('Create new directory');
-      } else if (this.entryModal.type === modalTypes.rename) {
-        return this.entryModal.entry.type === modalTypes.tree
-          ? __('Rename folder')
-          : __('Rename file');
+      } else if (this.type === modalTypes.rename) {
+        return entry.type === modalTypes.tree ? __('Rename folder') : __('Rename file');
       }
 
       return __('Create new file');
     },
     buttonLabel() {
-      if (this.entryModal.type === modalTypes.tree) {
+      const entry = this.entries[this.path];
+
+      if (this.type === modalTypes.tree) {
         return __('Create directory');
-      } else if (this.entryModal.type === modalTypes.rename) {
-        return this.entryModal.entry.type === modalTypes.tree
-          ? __('Rename folder')
-          : __('Rename file');
+      } else if (this.type === modalTypes.rename) {
+        return entry.type === modalTypes.tree ? __('Rename folder') : __('Rename file');
       }
 
       return __('Create file');
     },
     isCreatingNewFile() {
-      return this.entryModal.type === 'blob';
+      return this.type === modalTypes.blob;
     },
     placeholder() {
       return this.isCreatingNewFile ? 'dir/file_name' : 'dir/';
@@ -64,7 +63,7 @@ export default {
   methods: {
     ...mapActions(['createTempEntry', 'renameEntry']),
     submitForm() {
-      if (this.entryModal.type === modalTypes.rename) {
+      if (this.type === modalTypes.rename) {
         if (this.entries[this.entryName] && !this.entries[this.entryName].deleted) {
           flash(
             sprintf(s__('The name "%{name}" is already taken in this directory.'), {
@@ -82,7 +81,7 @@ export default {
           parentPath = parentPath.join('/');
 
           this.renameEntry({
-            path: this.entryModal.entry.path,
+            path: this.path,
             name: entryName,
             parentPath,
           });
@@ -90,17 +89,17 @@ export default {
       } else {
         this.createTempEntry({
           name: this.name,
-          type: this.entryModal.type,
+          type: this.type,
         });
       }
     },
     createFromTemplate(template) {
       this.createTempEntry({
         name: template.name,
-        type: this.entryModal.type,
+        type: this.type,
       });
 
-      $('#ide-new-entry').modal('toggle');
+      this.$refs.modal.toggle();
     },
     focusInput() {
       const name = this.entries[this.entryName] ? this.entries[this.entryName].name : null;
@@ -112,8 +111,23 @@ export default {
         this.$refs.fieldName.setSelectionRange(inputValue.indexOf(name), inputValue.length);
       }
     },
-    closedModal() {
+    resetData() {
       this.name = '';
+      this.path = '';
+      this.type = modalTypes.blob;
+    },
+    open(type = modalTypes.blob, path = '') {
+      this.type = type;
+      this.path = path;
+      this.$refs.modal.show();
+
+      // wait for modal to show first
+      this.$nextTick(() => {
+        this.focusInput();
+      });
+    },
+    close() {
+      this.$refs.modal.hide();
     },
   },
 };
@@ -121,15 +135,15 @@ export default {
 
 <template>
   <gl-modal
-    id="ide-new-entry"
-    class="qa-new-file-modal"
-    :header-title-text="modalTitle"
-    :footer-primary-button-text="buttonLabel"
-    footer-primary-button-variant="success"
-    modal-size="lg"
-    @submit="submitForm"
-    @open="focusInput"
-    @closed="closedModal"
+    ref="modal"
+    modal-id="ide-new-entry"
+    modal-class="qa-new-file-modal"
+    :title="modalTitle"
+    :ok-title="buttonLabel"
+    ok-variant="success"
+    size="lg"
+    @ok="submitForm"
+    @hide="resetData"
   >
     <div class="form-group row">
       <label class="label-bold col-form-label col-sm-2"> {{ __('Name') }} </label>

app/assets/javascripts/ide/constants.js

@@ -78,6 +78,7 @@ export const commitItemIconMap = {
 export const modalTypes = {
   rename: 'rename',
   tree: 'tree',
+  blob: 'blob',
 };
 
 export const commitActionTypes = {

app/assets/javascripts/ide/lib/diff/diff.js

@@ -14,13 +14,12 @@ export const computeDiff = (originalContent, newContent) => {
         endLineNumber: lineNumber + change.count - 1,
       });
     } else if ('added' in change || 'removed' in change) {
-      acc.push(
-        Object.assign({}, change, {
-          lineNumber,
-          modified: undefined,
-          endLineNumber: lineNumber + change.count - 1,
-        }),
-      );
+      acc.push({
+        ...change,
+        lineNumber,
+        modified: undefined,
+        endLineNumber: lineNumber + change.count - 1,
+      });
     }
 
     if (!change.removed) {

app/assets/javascripts/ide/lib/editor.js

@@ -7,8 +7,10 @@ import Disposable from './common/disposable';
 import ModelManager from './common/model_manager';
 import editorOptions, { defaultEditorOptions } from './editor_options';
 import { themes } from './themes';
+import languages from './languages';
 import keymap from './keymap.json';
 import { clearDomElement } from '~/editor/utils';
+import { registerLanguages } from '../utils';
 
 function setupThemes() {
   themes.forEach(theme => {
@@ -37,6 +39,7 @@ export default class Editor {
     };
 
     setupThemes();
+    registerLanguages(...languages);
 
     this.debouncedUpdate = debounce(() => {
       this.updateDimensions();

app/assets/javascripts/ide/lib/languages/index.js

+import vue from './vue';
+
+const languages = [vue];
+
+export default languages;

app/assets/javascripts/ide/lib/languages/vue.js

+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See https://github.com/microsoft/monaco-languages/blob/master/LICENSE.md
+ *--------------------------------------------------------------------------------------------*/
+
+// Based on handlebars template in https://github.com/microsoft/monaco-languages/blob/master/src/handlebars/handlebars.ts
+// Look for "vuejs template attributes" in this file for Vue specific syntax.
+
+import { languages } from 'monaco-editor';
+
+/* eslint-disable no-useless-escape */
+/* eslint-disable @gitlab/require-i18n-strings */
+
+const EMPTY_ELEMENTS = [
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'menuitem',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+];
+
+const conf = {
+  wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\$\^\&\*\(\)\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\s]+)/g,
+
+  comments: {
+    blockComment: ['{{!--', '--}}'],
+  },
+
+  brackets: [['<!--', '-->'], ['<', '>'], ['{{', '}}'], ['{', '}'], ['(', ')']],
+
+  autoClosingPairs: [
+    { open: '{', close: '}' },
+    { open: '[', close: ']' },
+    { open: '(', close: ')' },
+    { open: '"', close: '"' },
+    { open: "'", close: "'" },
+  ],
+
+  surroundingPairs: [
+    { open: '<', close: '>' },
+    { open: '"', close: '"' },
+    { open: "'", close: "'" },
+  ],
+
+  onEnterRules: [
+    {
+      beforeText: new RegExp(
+        `<(?!(?:${EMPTY_ELEMENTS.join('|')}))(\\w[\\w\\d]*)([^/>]*(?!/)>)[^<]*$`,
+        'i',
+      ),
+      afterText: /^<\/(\w[\w\d]*)\s*>$/i,
+      action: { indentAction: languages.IndentAction.IndentOutdent },
+    },
+    {
+      beforeText: new RegExp(
+        `<(?!(?:${EMPTY_ELEMENTS.join('|')}))(\\w[\\w\\d]*)([^/>]*(?!/)>)[^<]*$`,
+        'i',
+      ),
+      action: { indentAction: languages.IndentAction.Indent },
+    },
+  ],
+};
+
+const language = {
+  defaultToken: '',
+  tokenPostfix: '',
+  // ignoreCase: true,
+
+  // The main tokenizer for our languages
+  tokenizer: {
+    root: [
+      [/\{\{/, { token: '@rematch', switchTo: '@handlebarsInSimpleState.root' }],
+      [/<!DOCTYPE/, 'metatag.html', '@doctype'],
+      [/<!--/, 'comment.html', '@comment'],
+      [/(<)([\w]+)(\/>)/, ['delimiter.html', 'tag.html', 'delimiter.html']],
+      [/(<)(script)/, ['delimiter.html', { token: 'tag.html', next: '@script' }]],
+      [/(<)(style)/, ['delimiter.html', { token: 'tag.html', next: '@style' }]],
+      [/(<)([:\w]+)/, ['delimiter.html', { token: 'tag.html', next: '@otherTag' }]],
+      [/(<\/)([\w]+)/, ['delimiter.html', { token: 'tag.html', next: '@otherTag' }]],
+      [/</, 'delimiter.html'],
+      [/\{/, 'delimiter.html'],
+      [/[^<{]+/], // text
+    ],
+
+    doctype: [
+      [/\{\{/, { token: '@rematch', switchTo: '@handlebarsInSimpleState.comment' }],
+      [/[^>]+/, 'metatag.content.html'],
+      [/>/, 'metatag.html', '@pop'],
+    ],
+
+    comment: [
+      [/\{\{/, { token: '@rematch', switchTo: '@handlebarsInSimpleState.comment' }],
+      [/-->/, 'comment.html', '@pop'],
+      [/[^-]+/, 'comment.content.html'],
+      [/./, 'comment.content.html'],
+    ],
+
+    otherTag: [
+      [/\{\{/, { token: '@rematch', switchTo: '@handlebarsInSimpleState.otherTag' }],
+      [/\/?>/, 'delimiter.html', '@pop'],
+
+      // -- BEGIN vuejs template attributes
+      [/(v-|@|:)[\w\-\.\:\[\]]+="([^"]*)"/, 'variable'],
+      [/(v-|@|:)[\w\-\.\:\[\]]+='([^']*)'/, 'variable'],
+
+      [/"([^"]*)"/, 'attribute.value'],
+      [/'([^']*)'/, 'attribute.value'],
+
+      [/[\w\-\.\:\[\]]+/, 'attribute.name'],
+      // -- END vuejs template attributes
+
+      [/=/, 'delimiter'],
+      [/[ \t\r\n]+/], // whitespace
+    ],
+
+    // -- BEGIN <script> tags handling
+
+    // After <script
+    script: [
+      [/\{\{/, { token: '@rematch', switchTo: '@handlebarsInSimpleState.script' }],
+      [/type/, 'attribute.name', '@scriptAfterType'],
+      [/"([^"]*)"/, 'attribute.value'],
+      [/'([^']*)'/, 'attribute.value'],
+      [/[\w\-]+/, 'attribute.name'],
+      [/=/, 'delimiter'],
+      [
+        />/,
+        {
+          token: 'delimiter.html',
+          next: '@scriptEmbedded.text/javascript',
+          nextEmbedded: 'text/javascript',
+        },
+      ],
+      [/[ \t\r\n]+/], // whitespace
+      [
+        /(<\/)(script\s*)(>)/,
+        ['delimiter.html', 'tag.html', { token: 'delimiter.html', next: '@pop' }],
+      ],
+    ],
+
+    // After <script ... type
+    scriptAfterType: [
+      [/\{\{/, { token: '@rematch', switchTo: '@handlebarsInSimpleState.scriptAfterType' }],
+      [/=/, 'delimiter', '@scriptAfterTypeEquals'],
+      [
+        />/,
+        {
+          token: 'delimiter.html',
+          next: '@scriptEmbedded.text/javascript',
+          nextEmbedded: 'text/javascript',
+        },
+      ], // cover invalid e.g. <script type>
+      [/[ \t\r\n]+/], // whitespace
+      [/<\/script\s*>/, { token: '@rematch', next: '@pop' }],
+    ],
+
+    // After <script ... type =
+    scriptAfterTypeEquals: [
+      [/\{\{/, { token: '@rematch', switchTo: '@handlebarsInSimpleState.scriptAfterTypeEquals' }],
+      [/"([^"]*)"/, { token: 'attribute.value', switchTo: '@scriptWithCustomType.$1' }],
+      [/'([^']*)'/, { token: 'attribute.value', switchTo: '@scriptWithCustomType.$1' }],
+      [
+        />/,
+        {
+          token: 'delimiter.html',
+          next: '@scriptEmbedded.text/javascript',
+          nextEmbedded: 'text/javascript',
+        },
+      ], // cover invalid e.g. <script type=>
+      [/[ \t\r\n]+/], // whitespace
+      [/<\/script\s*>/, { token: '@rematch', next: '@pop' }],
+    ],
+
+    // After <script ... type = $S2
+    scriptWithCustomType: [
+      [
+        /\{\{/,
+        { token: '@rematch', switchTo: '@handlebarsInSimpleState.scriptWithCustomType.$S2' },
+      ],
+      [/>/, { token: 'delimiter.html', next: '@scriptEmbedded.$S2', nextEmbedded: '$S2' }],
+      [/"([^"]*)"/, 'attribute.value'],
+      [/'([^']*)'/, 'attribute.value'],
+      [/[\w\-]+/, 'attribute.name'],
+      [/=/, 'delimiter'],
+      [/[ \t\r\n]+/], // whitespace
+      [/<\/script\s*>/, { token: '@rematch', next: '@pop' }],
+    ],
+
+    scriptEmbedded: [
+      [
+        /\{\{/,
+        {
+          token: '@rematch',
+          switchTo: '@handlebarsInEmbeddedState.scriptEmbedded.$S2',
+          nextEmbedded: '@pop',
+        },
+      ],
+      [/<\/script/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
+    ],
+
+    // -- END <script> tags handling
+
+    // -- BEGIN <style> tags handling
+
+    // After <style
+    style: [
+      [/\{\{/, { token: '@rematch', switchTo: '@handlebarsInSimpleState.style' }],
+      [/type/, 'attribute.name', '@styleAfterType'],
+      [/"([^"]*)"/, 'attribute.value'],
+      [/'([^']*)'/, 'attribute.value'],
+      [/[\w\-]+/, 'attribute.name'],
+      [/=/, 'delimiter'],
+      [/>/, { token: 'delimiter.html', next: '@styleEmbedded.text/css', nextEmbedded: 'text/css' }],
+      [/[ \t\r\n]+/], // whitespace
+      [
+        /(<\/)(style\s*)(>)/,
+        ['delimiter.html', 'tag.html', { token: 'delimiter.html', next: '@pop' }],
+      ],
+    ],
+
+    // After <style ... type
+    styleAfterType: [
+      [/\{\{/, { token: '@rematch', switchTo: '@handlebarsInSimpleState.styleAfterType' }],
+      [/=/, 'delimiter', '@styleAfterTypeEquals'],
+      [/>/, { token: 'delimiter.html', next: '@styleEmbedded.text/css', nextEmbedded: 'text/css' }], // cover invalid e.g. <style type>
+      [/[ \t\r\n]+/], // whitespace
+      [/<\/style\s*>/, { token: '@rematch', next: '@pop' }],
+    ],
+
+    // After <style ... type =
+    styleAfterTypeEquals: [
+      [/\{\{/, { token: '@rematch', switchTo: '@handlebarsInSimpleState.styleAfterTypeEquals' }],
+      [/"([^"]*)"/, { token: 'attribute.value', switchTo: '@styleWithCustomType.$1' }],
+      [/'([^']*)'/, { token: 'attribute.value', switchTo: '@styleWithCustomType.$1' }],
+      [/>/, { token: 'delimiter.html', next: '@styleEmbedded.text/css', nextEmbedded: 'text/css' }], // cover invalid e.g. <style type=>
+      [/[ \t\r\n]+/], // whitespace
+      [/<\/style\s*>/, { token: '@rematch', next: '@pop' }],
+    ],
+
+    // After <style ... type = $S2
+    styleWithCustomType: [
+      [/\{\{/, { token: '@rematch', switchTo: '@handlebarsInSimpleState.styleWithCustomType.$S2' }],
+      [/>/, { token: 'delimiter.html', next: '@styleEmbedded.$S2', nextEmbedded: '$S2' }],
+      [/"([^"]*)"/, 'attribute.value'],
+      [/'([^']*)'/, 'attribute.value'],
+      [/[\w\-]+/, 'attribute.name'],
+      [/=/, 'delimiter'],
+      [/[ \t\r\n]+/], // whitespace
+      [/<\/style\s*>/, { token: '@rematch', next: '@pop' }],
+    ],
+
+    styleEmbedded: [
+      [
+        /\{\{/,
+        {
+          token: '@rematch',
+          switchTo: '@handlebarsInEmbeddedState.styleEmbedded.$S2',
+          nextEmbedded: '@pop',
+        },
+      ],
+      [/<\/style/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
+    ],
+
+    // -- END <style> tags handling
+
+    handlebarsInSimpleState: [
+      [/\{\{\{?/, 'delimiter.handlebars'],
+      [/\}\}\}?/, { token: 'delimiter.handlebars', switchTo: '@$S2.$S3' }],
+      { include: 'handlebarsRoot' },
+    ],
+
+    handlebarsInEmbeddedState: [
+      [/\{\{\{?/, 'delimiter.handlebars'],
+      [/\}\}\}?/, { token: 'delimiter.handlebars', switchTo: '@$S2.$S3', nextEmbedded: '$S3' }],
+      { include: 'handlebarsRoot' },
+    ],
+
+    handlebarsRoot: [
+      [/"[^"]*"/, 'string.handlebars'],
+      [/[#/][^\s}]+/, 'keyword.helper.handlebars'],
+      [/else\b/, 'keyword.helper.handlebars'],
+      [/[\s]+/],
+      [/[^}]/, 'variable.parameter.handlebars'],
+    ],
+  },
+};
+
+export default {
+  id: 'vue',
+  extensions: ['.vue'],
+  aliases: ['Vue', 'vue'],
+  mimetypes: ['text/x-vue-template'],
+  conf,
+  language,
+};