Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-21 17:19:01 +01:00
Code Issues Packages Projects Releases Wiki Activity

html headless

Browse Source
This commit is contained in:
Martin Aeschlimann
2020-06-19 23:35:45 +02:00
parent c23285f8c8
commit d16e306c2e
32 changed files with 1529 additions and 967 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
extensions/html-language-features/server/src/modes/cssMode.ts
View File

@@ -5,7 +5,7 @@
import { LanguageModelCache, getLanguageModelCache } from '../languageModelCache';
import { Stylesheet, LanguageService as CSSLanguageService } from 'vscode-css-languageservice';
import { FoldingRange, LanguageMode, Workspace, Color, TextDocument, Position, Range, CompletionList } from './languageModes';
import { FoldingRange, LanguageMode, Workspace, Color, TextDocument, Position, Range, CompletionList, DocumentContext } from './languageModes';
import { HTMLDocumentRegions, CSS_STYLE_RULE } from './embeddedSupport';
export function getCSSMode(cssLanguageService: CSSLanguageService, documentRegions: LanguageModelCache<HTMLDocumentRegions>, workspace: Workspace): LanguageMode {
@@ -20,10 +20,10 @@ export function getCSSMode(cssLanguageService: CSSLanguageService, documentRegio
let embedded = embeddedCSSDocuments.get(document);
return cssLanguageService.doValidation(embedded, cssStylesheets.get(embedded), settings && settings.css);
},
doComplete(document: TextDocument, position: Position, _settings = workspace.settings) {
doComplete(document: TextDocument, position: Position, documentContext: DocumentContext, _settings = workspace.settings) {
let embedded = embeddedCSSDocuments.get(document);
const stylesheet = cssStylesheets.get(embedded);
return cssLanguageService.doComplete(embedded, position, stylesheet) || CompletionList.create();
return cssLanguageService.doComplete2(embedded, position, stylesheet, documentContext) || CompletionList.create();
},
doHover(document: TextDocument, position: Position) {
let embedded = embeddedCSSDocuments.get(document);

11
extensions/html-language-features/server/src/modes/htmlMode.ts
View File

@@ -7,10 +7,9 @@ import { getLanguageModelCache } from '../languageModelCache';
import {
LanguageService as HTMLLanguageService, HTMLDocument, DocumentContext, FormattingOptions,
HTMLFormatConfiguration, SelectionRange,
TextDocument, Position, Range, CompletionItem, FoldingRange,
TextDocument, Position, Range, FoldingRange,
LanguageMode, Workspace
} from './languageModes';
import { getPathCompletionParticipant } from './pathCompletion';
export function getHTMLMode(htmlLanguageService: HTMLLanguageService, workspace: Workspace): LanguageMode {
let htmlDocuments = getLanguageModelCache<HTMLDocument>(10, 60, document => htmlLanguageService.parseHTMLDocument(document));
@@ -21,19 +20,15 @@ export function getHTMLMode(htmlLanguageService: HTMLLanguageService, workspace:
getSelectionRange(document: TextDocument, position: Position): SelectionRange {
return htmlLanguageService.getSelectionRanges(document, [position])[0];
},
doComplete(document: TextDocument, position: Position, settings = workspace.settings) {
doComplete(document: TextDocument, position: Position, documentContext: DocumentContext, settings = workspace.settings) {
let options = settings && settings.html && settings.html.suggest;
let doAutoComplete = settings && settings.html && settings.html.autoClosingTags;
if (doAutoComplete) {
options.hideAutoCompleteProposals = true;
}
let pathCompletionProposals: CompletionItem[] = [];
let participants = [getPathCompletionParticipant(document, workspace.folders, pathCompletionProposals)];
htmlLanguageService.setCompletionParticipants(participants);
const htmlDocument = htmlDocuments.get(document);
let completionList = htmlLanguageService.doComplete(document, position, htmlDocument, options);
completionList.items.push(...pathCompletionProposals);
let completionList = htmlLanguageService.doComplete2(document, position, htmlDocument, documentContext, options);
return completionList;
},
doHover(document: TextDocument, position: Position) {

14
extensions/html-language-features/server/src/modes/javascriptMode.ts
View File

@@ -8,20 +8,21 @@ import {
SymbolInformation, SymbolKind, CompletionItem, Location, SignatureHelp, SignatureInformation, ParameterInformation,
Definition, TextEdit, TextDocument, Diagnostic, DiagnosticSeverity, Range, CompletionItemKind, Hover, MarkedString,
DocumentHighlight, DocumentHighlightKind, CompletionList, Position, FormattingOptions, FoldingRange, FoldingRangeKind, SelectionRange,
LanguageMode, Settings, SemanticTokenData, Workspace
LanguageMode, Settings, SemanticTokenData, Workspace, DocumentContext
} from './languageModes';
import { getWordAtText, startsWith, isWhitespaceOnly, repeat } from '../utils/strings';
import { HTMLDocumentRegions } from './embeddedSupport';
import * as ts from 'typescript';
import { join } from 'path';
import { getSemanticTokens, getSemanticTokenLegend } from './javascriptSemanticTokens';
import { joinPath } from '../requests';
const JS_WORD_REGEX = /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g;
let jquery_d_ts = join(__dirname, '../lib/jquery.d.ts'); // when packaged
let jquery_d_ts = joinPath(__dirname, '../lib/jquery.d.ts'); // when packaged
if (!ts.sys.fileExists(jquery_d_ts)) {
jquery_d_ts = join(__dirname, '../../lib/jquery.d.ts'); // from source
jquery_d_ts = joinPath(__dirname, '../../lib/jquery.d.ts'); // from source
}
export function getJavaScriptMode(documentRegions: LanguageModelCache<HTMLDocumentRegions>, languageId: 'javascript' | 'typescript', workspace: Workspace): LanguageMode {
@@ -64,7 +65,8 @@ export function getJavaScriptMode(documentRegions: LanguageModelCache<HTMLDocume
};
},
getCurrentDirectory: () => '',
getDefaultLibFileName: (options) => ts.getDefaultLibFilePath(options)
getDefaultLibFileName: (options) => ts.getDefaultLibFilePath(options),
};
let jsLanguageService = ts.createLanguageService(host);
@@ -88,7 +90,7 @@ export function getJavaScriptMode(documentRegions: LanguageModelCache<HTMLDocume
};
});
},
doComplete(document: TextDocument, position: Position): CompletionList {
async doComplete(document: TextDocument, position: Position, _documentContext: DocumentContext): Promise<CompletionList> {
updateCurrentTextDocument(document);
let offset = currentTextDocument.offsetAt(position);
let completions = jsLanguageService.getCompletionsAtPosition(workingFile, offset, { includeExternalModuleExports: false, includeInsertTextCompletions: false });

13
extensions/html-language-features/server/src/modes/languageModes.ts
View File

@@ -16,6 +16,7 @@ import { getCSSMode } from './cssMode';
import { getDocumentRegions, HTMLDocumentRegions } from './embeddedSupport';
import { getHTMLMode } from './htmlMode';
import { getJavaScriptMode } from './javascriptMode';
import { RequestService } from '../requests';
export * from 'vscode-html-languageservice';
export { WorkspaceFolder } from 'vscode-languageserver';
@@ -42,7 +43,7 @@ export interface LanguageMode {
getId(): string;
getSelectionRange?: (document: TextDocument, position: Position) => SelectionRange;
doValidation?: (document: TextDocument, settings?: Settings) => Diagnostic[];
doComplete?: (document: TextDocument, position: Position, settings?: Settings) => CompletionList;
doComplete?: (document: TextDocument, position: Position, documentContext: DocumentContext, settings?: Settings) => Promise<CompletionList>;
doResolve?: (document: TextDocument, item: CompletionItem) => CompletionItem;
doHover?: (document: TextDocument, position: Position) => Hover | null;
doSignatureHelp?: (document: TextDocument, position: Position) => SignatureHelp | null;
@@ -66,6 +67,7 @@ export interface LanguageMode {
}
export interface LanguageModes {
updateDataProviders(dataProviders: IHTMLDataProvider[]): void;
getModeAtPosition(document: TextDocument, position: Position): LanguageMode | undefined;
getModesInRange(document: TextDocument, range: Range): LanguageModeRange[];
getAllModes(): LanguageMode[];
@@ -80,9 +82,9 @@ export interface LanguageModeRange extends Range {
attributeValue?: boolean;
}
export function getLanguageModes(supportedLanguages: { [languageId: string]: boolean; }, workspace: Workspace, clientCapabilities: ClientCapabilities, customDataProviders?: IHTMLDataProvider[]): LanguageModes {
const htmlLanguageService = getHTMLLanguageService({ customDataProviders, clientCapabilities });
const cssLanguageService = getCSSLanguageService({ clientCapabilities });
export function getLanguageModes(supportedLanguages: { [languageId: string]: boolean; }, workspace: Workspace, clientCapabilities: ClientCapabilities, requestService: RequestService): LanguageModes {
const htmlLanguageService = getHTMLLanguageService({ clientCapabilities, fileSystemProvider: requestService });
const cssLanguageService = getCSSLanguageService({ clientCapabilities, fileSystemProvider: requestService });
let documentRegions = getLanguageModelCache<HTMLDocumentRegions>(10, 60, document => getDocumentRegions(htmlLanguageService, document));
@@ -99,6 +101,9 @@ export function getLanguageModes(supportedLanguages: { [languageId: string]: boo
modes['typescript'] = getJavaScriptMode(documentRegions, 'typescript', workspace);
}
return {
async updateDataProviders(dataProviders: IHTMLDataProvider[]): Promise<void> {
htmlLanguageService.setDataProviders(true, dataProviders);
},
getModeAtPosition(document: TextDocument, position: Position): LanguageMode | undefined {
let languageId = documentRegions.get(document).getLanguageAtPosition(position);
if (languageId) {

183
extensions/html-language-features/server/src/modes/pathCompletion.ts
View File

@@ -1,183 +0,0 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import * as path from 'path';
import * as fs from 'fs';
import { URI } from 'vscode-uri';
import { ICompletionParticipant, TextDocument, CompletionItemKind, CompletionItem, TextEdit, Range, Position, WorkspaceFolder } from './languageModes';
import { startsWith } from '../utils/strings';
import { contains } from '../utils/arrays';
export function getPathCompletionParticipant(
document: TextDocument,
workspaceFolders: WorkspaceFolder[],
result: CompletionItem[]
): ICompletionParticipant {
return {
onHtmlAttributeValue: ({ tag, attribute, value: valueBeforeCursor, range }) => {
const fullValue = stripQuotes(document.getText(range));
if (shouldDoPathCompletion(tag, attribute, fullValue)) {
if (workspaceFolders.length === 0) {
return;
}
const workspaceRoot = resolveWorkspaceRoot(document, workspaceFolders);
const paths = providePaths(valueBeforeCursor, URI.parse(document.uri).fsPath, workspaceRoot);
result.push(...paths.map(p => pathToSuggestion(p, valueBeforeCursor, fullValue, range)));
}
}
};
}
function stripQuotes(fullValue: string) {
if (startsWith(fullValue, `'`) || startsWith(fullValue, `"`)) {
return fullValue.slice(1, -1);
} else {
return fullValue;
}
}
function shouldDoPathCompletion(tag: string, attr: string, value: string) {
if (startsWith(value, 'http') || startsWith(value, 'https') || startsWith(value, '//')) {
return false;
}
if (PATH_TAG_AND_ATTR[tag]) {
if (typeof PATH_TAG_AND_ATTR[tag] === 'string') {
return PATH_TAG_AND_ATTR[tag] === attr;
} else {
return contains(<string[]>PATH_TAG_AND_ATTR[tag], attr);
}
}
return false;
}
/**
* Get a list of path suggestions. Folder suggestions are suffixed with a slash.
*/
function providePaths(valueBeforeCursor: string, activeDocFsPath: string, root?: string): string[] {
const lastIndexOfSlash = valueBeforeCursor.lastIndexOf('/');
const valueBeforeLastSlash = valueBeforeCursor.slice(0, lastIndexOfSlash + 1);
const startsWithSlash = startsWith(valueBeforeCursor, '/');
let parentDir: string;
if (startsWithSlash) {
if (!root) {
return [];
}
parentDir = path.resolve(root, '.' + valueBeforeLastSlash);
} else {
parentDir = path.resolve(activeDocFsPath, '..', valueBeforeLastSlash);
}
try {
const paths = fs.readdirSync(parentDir).map(f => {
return isDir(path.resolve(parentDir, f))
? f + '/'
: f;
});
return paths.filter(p => p[0] !== '.');
} catch (e) {
return [];
}
}
function isDir(p: string) {
try {
return fs.statSync(p).isDirectory();
} catch (e) {
return false;
}
}
function pathToSuggestion(p: string, valueBeforeCursor: string, fullValue: string, range: Range): CompletionItem {
const isDir = p[p.length - 1] === '/';
let replaceRange: Range;
const lastIndexOfSlash = valueBeforeCursor.lastIndexOf('/');
if (lastIndexOfSlash === -1) {
replaceRange = shiftRange(range, 1, -1);
} else {
// For cases where cursor is in the middle of attribute value, like <script src="./s|rc/test.js">
// Find the last slash before cursor, and calculate the start of replace range from there
const valueAfterLastSlash = fullValue.slice(lastIndexOfSlash + 1);
const startPos = shiftPosition(range.end, -1 - valueAfterLastSlash.length);
// If whitespace exists, replace until there is no more
const whitespaceIndex = valueAfterLastSlash.indexOf(' ');
let endPos;
if (whitespaceIndex !== -1) {
endPos = shiftPosition(startPos, whitespaceIndex);
} else {
endPos = shiftPosition(range.end, -1);
}
replaceRange = Range.create(startPos, endPos);
}
if (isDir) {
return {
label: p,
kind: CompletionItemKind.Folder,
textEdit: TextEdit.replace(replaceRange, p),
command: {
title: 'Suggest',
command: 'editor.action.triggerSuggest'
}
};
} else {
return {
label: p,
kind: CompletionItemKind.File,
textEdit: TextEdit.replace(replaceRange, p)
};
}
}
function resolveWorkspaceRoot(activeDoc: TextDocument, workspaceFolders: WorkspaceFolder[]): string | undefined {
for (const folder of workspaceFolders) {
if (startsWith(activeDoc.uri, folder.uri)) {
return path.resolve(URI.parse(folder.uri).fsPath);
}
}
return undefined;
}
function shiftPosition(pos: Position, offset: number): Position {
return Position.create(pos.line, pos.character + offset);
}
function shiftRange(range: Range, startOffset: number, endOffset: number): Range {
const start = shiftPosition(range.start, startOffset);
const end = shiftPosition(range.end, endOffset);
return Range.create(start, end);
}
// Selected from https://stackoverflow.com/a/2725168/1780148
const PATH_TAG_AND_ATTR: { [tag: string]: string | string[] } = {
// HTML 4
a: 'href',
area: 'href',
body: 'background',
del: 'cite',
form: 'action',
frame: ['src', 'longdesc'],
img: ['src', 'longdesc'],
ins: 'cite',
link: 'href',
object: 'data',
q: 'cite',
script: 'src',
// HTML 5
audio: 'src',
button: 'formaction',
command: 'icon',
embed: 'src',
html: 'manifest',
input: ['src', 'formaction'],
source: 'src',
track: 'src',
video: ['src', 'poster']
};