From df8814299d13cbef58d0f145ea8da4757fb1bd4f Mon Sep 17 00:00:00 2001
From: Benedikt Meurer <bmeurer@chromium.org>
Date: Tue, 17 Jan 2023 07:40:06 +0100
Subject: [PATCH] [sources] Add Vue SFC (Single File Component) syntax support.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This hooks up @codemirror/lang-vue provided syntax support for all *.vue
files.

Fixed: chromium:1385678
Bug: chromium:1385374
Change-Id: If8500b3928f95b91553bb047e032b49816eed806
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4171288
Reviewed-by: Simon Zünd <szuend@chromium.org>
---
 front_end/core/common/ResourceType.ts                       | 2 +-
 front_end/ui/components/code_highlighter/CodeHighlighter.ts | 3 +++
 test/unittests/front_end/core/common/ResourceType_test.ts   | 4 ++--
 .../front_end/ui/components/CodeHighlighter_test.ts         | 6 +++---
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/front_end/core/common/ResourceType.ts b/front_end/core/common/ResourceType.ts
index 0db7848537..ee464cf7ba 100644
--- a/front_end/core/common/ResourceType.ts
+++ b/front_end/core/common/ResourceType.ts
@@ -563,5 +563,5 @@ export const mimeTypeByExtension = new Map([
   ['svelte', 'text/x.svelte'],
 
   // Vue
-  ['vue', 'text/html'],
+  ['vue', 'text/x.vue'],
 ]);
diff --git a/front_end/ui/components/code_highlighter/CodeHighlighter.ts b/front_end/ui/components/code_highlighter/CodeHighlighter.ts
index 9c9cfadd92..93db830d01 100644
--- a/front_end/ui/components/code_highlighter/CodeHighlighter.ts
+++ b/front_end/ui/components/code_highlighter/CodeHighlighter.ts
@@ -166,6 +166,9 @@ export async function languageFromMIME(mimeType: string): Promise<CodeMirror.Lan
     case 'text/x.svelte':
       return (await CodeMirror.svelte()).svelte();
 
+    case 'text/x.vue':
+      return (await CodeMirror.vue()).vue();
+
     default:
       return null;
   }
diff --git a/test/unittests/front_end/core/common/ResourceType_test.ts b/test/unittests/front_end/core/common/ResourceType_test.ts
index 08cd40d7ba..730d358e4b 100644
--- a/test/unittests/front_end/core/common/ResourceType_test.ts
+++ b/test/unittests/front_end/core/common/ResourceType_test.ts
@@ -462,7 +462,7 @@ describe('ResourceType', () => {
     });
 
     it('returns correct MIME type for .vue files', () => {
-      assert.strictEqual(ResourceType.mimeFromExtension('vue'), 'text/html');
+      assert.strictEqual(ResourceType.mimeFromExtension('vue'), 'text/x.vue');
     });
 
     it('returns correct MIME type for .webmanifest files', () => {
@@ -527,7 +527,7 @@ describe('ResourceType', () => {
 
     it('returns correct MIME type for .vue files', () => {
       const url = 'http://localhost/App.vue' as Platform.DevToolsPath.UrlString;
-      assert.strictEqual(ResourceType.mimeFromURL(url), 'text/html');
+      assert.strictEqual(ResourceType.mimeFromURL(url), 'text/x.vue');
     });
 
     it('returns correct MIME type for .webmanifest files', () => {
diff --git a/test/unittests/front_end/ui/components/CodeHighlighter_test.ts b/test/unittests/front_end/ui/components/CodeHighlighter_test.ts
index 25a2ffaafe..73f41d27e3 100644
--- a/test/unittests/front_end/ui/components/CodeHighlighter_test.ts
+++ b/test/unittests/front_end/ui/components/CodeHighlighter_test.ts
@@ -120,10 +120,10 @@ it('can highlight Angular Templates', testHighlight(`
 
   it('can highlight Vue Templates', testHighlight(`
 <[tag template]>
-  <[tag Header] [attribute v-show]=[attribute-value "view"] />
-  <[tag Main] [attribute @hide]=[attribute-value "onHide"] />
+  <[tag Header] [keyword v-show]=[attribute-value "][variable view][attribute-value "] />
+  <[tag Main] @[variable hide]=[attribute-value "][variable onHide][attribute-value "] />
   <[tag router-view] />
-</[tag template]>`, 'text/html'));
+</[tag template]>`, 'text/x.vue'));
 
   it('can highlight CSS', testHighlight(`
 [tag span].[type cls]#[atom id] {