Self closing tags for jsx,xml,xsl in emmet Fixes microsoft#32698

nexes · Sep 4, 2017 · 3e23c21 · 3e23c21
1 parent 74d3d0c
commit 3e23c21
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 7 deletions.
diff --git a/extensions/emmet/src/abbreviationActions.ts b/extensions/emmet/src/abbreviationActions.ts
@@ -5,7 +5,7 @@
 
 import * as vscode from 'vscode';
 import { Node, HtmlNode, Rule } from 'EmmetNode';
-import { getNode, getInnerRange, getMappingForIncludedLanguages, parseDocument, validate } from './util';
+import { getNode, getInnerRange, getMappingForIncludedLanguages, parseDocument, validate, getEmmetConfiguration } from './util';
 import { getExpandOptions, extractAbbreviation, extractAbbreviationFromText, isStyleSheet, isAbbreviationValid, getEmmetMode, expandAbbreviation } from 'vscode-emmet-helper';
 
 const trimRegex = /[\u00a0]*[\d|#|\-|\*|\u2022]+\.?/;
@@ -271,9 +271,7 @@ function expandAbbreviationInRange(editor: vscode.TextEditor, expandAbbrList: Ex
  * Expands abbreviation as detailed in given input.
  */
 function expandAbbr(input: ExpandAbbreviationInput): string {
-	const emmetConfig = vscode.workspace.getConfiguration('emmet');
-	const expandOptions = getExpandOptions(input.syntax, emmetConfig, input.filter);
-
+	const expandOptions = getExpandOptions(input.syntax, getEmmetConfiguration(input.syntax), input.filter);
 
 	if (input.textToWrap) {
 		if (input.filter && input.filter.indexOf('t') > -1) {

diff --git a/extensions/emmet/src/defaultCompletionProvider.ts b/extensions/emmet/src/defaultCompletionProvider.ts
@@ -55,7 +55,7 @@ export class DefaultCompletionItemProvider implements vscode.CompletionItemProvi
 				return;
 			}
 
-			let result: vscode.CompletionList = doComplete(document, position, syntax, getEmmetConfiguration());
+			let result: vscode.CompletionList = doComplete(document, position, syntax, getEmmetConfiguration(syntax));
 			let newItems: vscode.CompletionItem[] = [];
 			if (result && result.items) {
 				result.items.forEach(item => {

diff --git a/extensions/emmet/src/test/abbreviationAction.test.ts b/extensions/emmet/src/test/abbreviationAction.test.ts
@@ -318,7 +318,50 @@ suite('Tests for Wrap with Abbreviations', () => {
 	});
 });
 
+suite('Tests for jsx, xml and xsl', () => {
+	teardown(closeAllEditors);
+
+		test('Expand abbreviation with className instead of class in jsx', () => {
+			return withRandomFileEditor('ul.nav', 'javascriptreact', (editor, doc) => {
+				editor.selection = new Selection(0, 6, 0, 6);
+				return expandEmmetAbbreviation({language: 'javascriptreact'}).then(() => {
+					assert.equal(editor.document.getText(), '<ul className="nav"></ul>');
+					return Promise.resolve();
+				});
+			});
+		});
 
+		test('Expand abbreviation with self closing tags for jsx', () => {
+			return withRandomFileEditor('img', 'javascriptreact', (editor, doc) => {
+				editor.selection = new Selection(0, 6, 0, 6);
+				return expandEmmetAbbreviation({language: 'javascriptreact'}).then(() => {
+					assert.equal(editor.document.getText(), '<img src="" alt=""/>');
+					return Promise.resolve();
+				});
+			});
+		});
+
+		test('Expand abbreviation with self closing tags for xml', () => {
+			return withRandomFileEditor('img', 'xml', (editor, doc) => {
+				editor.selection = new Selection(0, 6, 0, 6);
+				return expandEmmetAbbreviation({language: 'xml'}).then(() => {
+					assert.equal(editor.document.getText(), '<img src="" alt=""/>');
+					return Promise.resolve();
+				});
+			});
+		});
+
+		test('Expand abbreviation with no self closing tags for html', () => {
+			return withRandomFileEditor('img', 'html', (editor, doc) => {
+				editor.selection = new Selection(0, 6, 0, 6);
+				return expandEmmetAbbreviation({language: 'html'}).then(() => {
+					assert.equal(editor.document.getText(), '<img src="" alt="">');
+					return Promise.resolve();
+				});
+			});
+		});
+
+});
 
 function testHtmlExpandAbbreviation(selection: Selection, abbreviation: string, expandedText: string, shouldFail?: boolean): Thenable<any> {
 	return withRandomFileEditor(htmlContents, 'html', (editor, doc) => {

diff --git a/extensions/emmet/src/util.ts b/extensions/emmet/src/util.ts
@@ -256,13 +256,26 @@ export function sameNodes(node1: Node, node2: Node): boolean {
 	return (<vscode.Position>node1.start).isEqual(node2.start) && (<vscode.Position>node1.end).isEqual(node2.end);
 }
 
-export function getEmmetConfiguration() {
+export function getEmmetConfiguration(syntax: string) {
 	const emmetConfig = vscode.workspace.getConfiguration('emmet');
+	const syntaxProfiles = Object.assign({}, emmetConfig['syntaxProfiles'] || {});
+
+	// jsx, xml and xsl syntaxes need to have self closing tags unless otherwise configured by user
+	if (syntax === 'jsx' || syntax === 'xml' || syntax === 'xsl') {
+		syntaxProfiles[syntax] = syntaxProfiles[syntax] || {};
+		if (typeof syntaxProfiles[syntax] === 'object'
+			&& !syntaxProfiles[syntax].hasOwnProperty('self_closing_tag') // Old Emmet format
+			&& !syntaxProfiles[syntax].hasOwnProperty('selfClosingStyle') // Emmet 2.0 format
+		) {
+			syntaxProfiles[syntax]['selfClosingStyle'] = 'xml';
+		}
+	}
+
 	return {
 		preferences: emmetConfig['preferences'],
 		showExpandedAbbreviation: emmetConfig['showExpandedAbbreviation'],
 		showAbbreviationSuggestions: emmetConfig['showAbbreviationSuggestions'],
-		syntaxProfiles: emmetConfig['syntaxProfiles'],
+		syntaxProfiles,
 		variables: emmetConfig['variables']
 	};
 }