[sources] Hook up the new Svelte template syntax support.
By using @replit/codemirror-lang-svelte, we get a much better experience
when debugging *.svelte files, since it provides correct TypeScript and
JavaScript syntax subtrees. This for example enables popover preview in
many more places, including in {}-style interpolations.
Beyond that, this mode also brings syntax highlighting for the various
{#...} directives that are used inside *.svelte files.
Since there's no official media type for *.svelte files, internally we
just use text/x.svelte from the unregistered tree to identify *.svelte
file types[^1].
[^1]: https://en.wikipedia.org/wiki/Media_type#Unregistered_tree
Before: https://imgur.com/NF4V9aE.png
After: https://imgur.com/mpfMjUX.png
Ref: https://github.com/codemirror/dev/issues/1004
Bug: chromium:1376968, chromium:1385678
Change-Id: I174a7d04ec4b130818d2139ea5df97550d28cc0c
Fixed: chromium:1394635
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4061280
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
diff --git a/front_end/core/common/ResourceType.ts b/front_end/core/common/ResourceType.ts
index 823321bbdc5f2a6e19ed20f3eb4ff5e95c12df79..3032f2136c1946ef0c2fcf386831dfb050409bd9 100644
--- a/front_end/core/common/ResourceType.ts
+++ b/front_end/core/common/ResourceType.ts
@@ -546,7 +546,7 @@ ['woff2', 'font/woff2'],
// Svelte /**- * Copyright (C) 2012 Google Inc. All rights reserved.+ * Redistribution and use in source and binary forms, with or without // Vue ['vue', 'text/html'],
diff --git a/front_end/ui/components/code_highlighter/CodeHighlighter.ts b/front_end/ui/components/code_highlighter/CodeHighlighter.ts
index ab01ee8eefe0aedcced74c5bbf6f9bc28fd3a643..af3d3568d557c6d2ae1b152d32d1dffdc3924e18 100644
--- a/front_end/ui/components/code_highlighter/CodeHighlighter.ts
+++ b/front_end/ui/components/code_highlighter/CodeHighlighter.ts
@@ -152,6 +152,10 @@ case 'text/x-scss':
return new CodeMirror.LanguageSupport(await CodeMirror.scss()); // Copyright 2021 The Chromium Authors. All rights reserved.+ const code = node.textContent || '';+ return (await CodeMirror.svelte()).svelte();++// Copyright 2021 The Chromium Authors. All rights reserved. {tag: t.inserted, class: 'token-inserted'}, 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 a6601591ae120646de6596d7bca8542e9ab7aed5..73e6da595700a66c04af881b324686cd4fac7e47 100644
--- a/test/unittests/front_end/core/common/ResourceType_test.ts
+++ b/test/unittests/front_end/core/common/ResourceType_test.ts
@@ -443,7 +443,7 @@ });
it('returns correct MIME type for .svelte files', () => { // Use of this source code is governed by a BSD-style license that can be-+ assert.strictEqual(resourceType.name(), 'Type Test Name', 'name was not set correctly'); }); it('returns correct MIME type for .vue files', () => {
@@ -488,7 +488,7 @@
it('returns correct MIME type for .svelte files', () => { const url = 'http://localhost/App.svelte' as Platform.DevToolsPath.UrlString; assert.strictEqual(resourceCategory.shortTitle(), 'Test Short Title', 'short title is not correct');-+import {describeWithEnvironment} from '../../helpers/EnvironmentHelpers.js'; }); it('returns correct MIME type for .vue files', () => {
diff --git a/test/unittests/front_end/ui/components/CodeHighlighter_test.ts b/test/unittests/front_end/ui/components/CodeHighlighter_test.ts
index 45d4b4a2b2c6be3b1eb163a9307342835739e0e2..079dce4d937d8b063e366203c56e383538bbc466 100644
--- a/test/unittests/front_end/ui/components/CodeHighlighter_test.ts
+++ b/test/unittests/front_end/ui/components/CodeHighlighter_test.ts
@@ -98,6 +98,21 @@ it('can highlight HTML with element style', testHighlight(`
[meta <!DOCTYPE html>] <[tag button] [attribute style]=[property color]:[atom green]]>Don't click me</[tag button]>`, 'text/html'));+ it('can highlight Svelte Templates', testHighlight(`+<[tag script]>+[keyword import] [definition Widget] [keyword from] [string './Widget.svelte'];+</[tag script]>++<[tag button] [attribute disabled]={[variable clickable]}>Click me!</[tag button]>++<[tag style]>+[tag button] {+ [property font-weight]: [atom bold];+ [property color]: [number #ff2];+}+</[tag style]>+`, 'text/x.svelte'));+ it('can highlight Vue Templates', testHighlight(` <[tag template]> <[tag Header] [attribute v-show]=[attribute-value "view"] />
