[html] support script type=module. Fixes #34488

0943cc3d · Martin Aeschlimann · 4a34d8e5 · 0943cc3d · 0943cc3d · 0943cc3d
7 changed file
--- a/extensions/html/server/src/modes/embeddedSupport.ts
+++ b/extensions/html/server/src/modes/embeddedSupport.ts
@@ -58,7 +58,7 @@ export function getDocumentRegions(languageService: LanguageService, document: T
 					}
 					importedScripts.push(value);
 				} else if (lastAttributeName === 'type' && lastTagName.toLowerCase() === 'script') {
-					if (/["'](text|application)\/(java|ecma)script["']/.test(scanner.getTokenText())) {
+					if (/["'](module|(text|application)\/(java|ecma)script)["']/.test(scanner.getTokenText())) {
 						languageIdFromType = 'javascript';
 					} else {
 						languageIdFromType = void 0;

--- a/extensions/html/server/src/modes/htmlMode.ts
+++ b/extensions/html/server/src/modes/htmlMode.ts
@@ -5,7 +5,7 @@
 'use strict';

 import { getLanguageModelCache } from '../languageModelCache';
-import { LanguageService as HTMLLanguageService, HTMLDocument, DocumentContext, FormattingOptions } from 'vscode-html-languageservice';
+import { LanguageService as HTMLLanguageService, HTMLDocument, DocumentContext, FormattingOptions, HTMLFormatConfiguration } from 'vscode-html-languageservice';
 import { TextDocument, Position, Range } from 'vscode-languageserver-types';
 import { LanguageMode, Settings } from './languageModes';

@@ -40,12 +40,18 @@ export function getHTMLMode(htmlLanguageService: HTMLLanguageService): LanguageM
 			return htmlLanguageService.findDocumentSymbols(document, htmlDocuments.get(document));
 		},
 		format(document: TextDocument, range: Range, formatParams: FormattingOptions, settings: Settings = globalSettings) {
-			let formatSettings = settings && settings.html && settings.html.format;
-			if (!formatSettings) {
-				formatSettings = formatParams;
+			let formatSettings: HTMLFormatConfiguration = settings && settings.html && settings.html.format;
+			if (formatSettings) {
+				formatSettings = merge(formatSettings, {});
 			} else {
-				formatSettings = merge(formatParams, merge(formatSettings, {}));
+				formatSettings = {};
 			}
+			if (formatSettings.contentUnformatted) {
+				formatSettings.contentUnformatted = formatSettings.contentUnformatted + ',script';
+			} else {
+				formatSettings.contentUnformatted = 'script';
+			}
+			formatSettings = merge(formatParams, formatSettings);
 			return htmlLanguageService.format(document, range, formatSettings);
 		},
 		doAutoClose(document: TextDocument, position: Position) {

--- a/extensions/html/server/src/test/fixtures/expected/19813-4spaces.html
+++ b/extensions/html/server/src/test/fixtures/expected/19813-4spaces.html
@@ -13,7 +13,6 @@
                }
            },
        });
-
    </script>
 </head>


--- a/extensions/html/server/src/test/fixtures/expected/19813-tab.html
+++ b/extensions/html/server/src/test/fixtures/expected/19813-tab.html
@@ -13,7 +13,6 @@
 				}
 			},
 		});
-
 	</script>
 </head>


--- a/extensions/html/server/src/test/fixtures/expected/19813.html
+++ b/extensions/html/server/src/test/fixtures/expected/19813.html
@@ -13,7 +13,6 @@
        }
      },
    });
-
  </script>
 </head>


--- a/extensions/html/server/src/test/fixtures/expected/21634.html
+++ b/extensions/html/server/src/test/fixtures/expected/21634.html
@@ -3,5 +3,4 @@
 <script>
  Polymer({
  });
-
 </script>
\ No newline at end of file
--- a/extensions/html/server/src/test/formatting.test.ts
+++ b/extensions/html/server/src/test/formatting.test.ts
@@ -58,12 +58,11 @@ suite('HTML Embedded Formatting', () => {

 	test('HTML & Scripts', function (): any {
 		assertFormat('<html><head><script></script></head></html>', '<html>\n\n<head>\n  <script></script>\n</head>\n\n</html>');
-		assertFormat('<html><head><script>var x=1;</script></head></html>', '<html>\n\n<head>\n  <script>\n    var x = 1;\n  </script>\n</head>\n\n</html>');
-		assertFormat('<html><head><script>\nvar x=2;\n</script></head></html>', '<html>\n\n<head>\n  <script>\n    var x = 2;\n\n  </script>\n</head>\n\n</html>');
-		assertFormat('<html><head>\n  <script>\nvar x=3;\n</script></head></html>', '<html>\n\n<head>\n  <script>\n    var x = 3;\n\n  </script>\n</head>\n\n</html>');
-		assertFormat('<html><head>\n  <script>\nvar x=4;\nconsole.log("Hi");\n</script></head></html>', '<html>\n\n<head>\n  <script>\n    var x = 4;\n    console.log("Hi");\n\n  </script>\n</head>\n\n</html>');
-
-		assertFormat('<html><head>\n  |<script>\nvar x=5;\n</script>|</head></html>', '<html><head>\n  <script>\n    var x = 5;\n\n  </script></head></html>');
+		assertFormat('<html><head><script>var x=1;</script></head></html>', '<html>\n\n<head>\n  <script>var x = 1;</script>\n</head>\n\n</html>');
+		assertFormat('<html><head><script>\nvar x=2;\n</script></head></html>', '<html>\n\n<head>\n  <script>\n    var x = 2;\n  </script>\n</head>\n\n</html>');
+		assertFormat('<html><head>\n  <script>\nvar x=3;\n</script></head></html>', '<html>\n\n<head>\n  <script>\n    var x = 3;\n  </script>\n</head>\n\n</html>');
+		assertFormat('<html><head>\n  <script>\nvar x=4;\nconsole.log("Hi");\n</script></head></html>', '<html>\n\n<head>\n  <script>\n    var x = 4;\n    console.log("Hi");\n  </script>\n</head>\n\n</html>');
+		assertFormat('<html><head>\n  |<script>\nvar x=5;\n</script>|</head></html>', '<html><head>\n  <script>\n    var x = 5;\n  </script></head></html>');
 	});

 	test('HTLM & Scripts - Fixtures', function () {
@@ -74,11 +73,11 @@ suite('HTML Embedded Formatting', () => {
 	});

 	test('Script end tag', function (): any {
-		assertFormat('<html>\n<head>\n  <script>\nvar x  =  0;\n</script></head></html>', '<html>\n\n<head>\n  <script>\n    var x = 0;\n\n  </script>\n</head>\n\n</html>');
+		assertFormat('<html>\n<head>\n  <script>\nvar x  =  0;\n</script></head></html>', '<html>\n\n<head>\n  <script>\n    var x = 0;\n  </script>\n</head>\n\n</html>');
 	});

 	test('HTML & Multiple Scripts', function (): any {
-		assertFormat('<html><head>\n<script>\nif(x){\nbar(); }\n</script><script>\nfunction(x){    }\n</script></head></html>', '<html>\n\n<head>\n  <script>\n    if (x) {\n      bar();\n    }\n\n  </script>\n  <script>\n    function(x) {}\n\n  </script>\n</head>\n\n</html>');
+		assertFormat('<html><head>\n<script>\nif(x){\nbar(); }\n</script><script>\nfunction(x){    }\n</script></head></html>', '<html>\n\n<head>\n  <script>\n    if (x) {\n      bar();\n    }\n  </script>\n  <script>\n    function(x) {}\n  </script>\n</head>\n\n</html>');
 	});

 	test('HTML & Styles', function (): any {
@@ -95,7 +94,7 @@ suite('HTML Embedded Formatting', () => {
 		};
 		assertFormat('<html><body><p>Hello</p></body></html>', '<html>\n\n<body>\n  <p>Hello</p>\n</body>\n\n</html>\n', options);
 		assertFormat('<html>|<body><p>Hello</p></body>|</html>', '<html><body>\n  <p>Hello</p>\n</body></html>', options);
-		assertFormat('<html><head><script>\nvar x=1;\n</script></head></html>', '<html>\n\n<head>\n  <script>\n    var x = 1;\n\n  </script>\n</head>\n\n</html>\n', options);
+		assertFormat('<html><head><script>\nvar x=1;\n</script></head></html>', '<html>\n\n<head>\n  <script>\n    var x = 1;\n  </script>\n</head>\n\n</html>\n', options);
 	});

 	test('Inside script', function (): any {
@@ -104,7 +103,7 @@ suite('HTML Embedded Formatting', () => {
 	});

 	test('Range after new line', function (): any {
-		assertFormat('<html><head>\n  |<script>\nvar x=6;\n</script>\n|</head></html>', '<html><head>\n  <script>\n    var x = 6;\n\n  </script>\n</head></html>');
+		assertFormat('<html><head>\n  |<script>\nvar x=6;\n</script>\n|</head></html>', '<html><head>\n  <script>\n    var x = 6;\n  </script>\n</head></html>');
 	});

 });