Compare commits

..

6 Commits

Author SHA1 Message Date
yutent a3261162de 唉, 又更新了一堆没啥用的 2023-06-06 18:35:39 +08:00
yutent 583b7586df 一大波更新 2023-06-06 15:26:41 +08:00
yutent a52927cbd4 更新打包脚本 2023-06-05 18:45:47 +08:00
yutent 494b9f68e5 移除ts 2023-06-05 18:24:57 +08:00
yutent a3dd345793 更换ts为js 2023-06-05 10:15:03 +00:00
yutent 7d4010cdf6 更新配置 2023-06-05 10:12:40 +00:00
17 changed files with 263 additions and 579 deletions

View File

@ -5,3 +5,4 @@ tests/**
.vscode/**
.gitignore
.git
build.mjs

36
build.mjs Normal file
View File

@ -0,0 +1,36 @@
/**
* {build}
* @author yutent<yutent.io@gmail.com>
* @date 2021/08/09 11:59:41
*/
import Es from 'esbuild'
import fs from 'iofs'
let args = process.argv.slice(2)
let entryPoints = fs.ls('./src', true).filter(it => fs.isfile(it))
if (args.includes('--watch')) {
let res = await Es.context({
entryPoints,
outdir: 'dist',
target: 'es2022',
format: 'cjs',
// external: ['vscode', 'util'],
platform: 'node'
// bundle: true
})
console.log('监听文件变化中...\n')
await res.watch()
} else {
Es.build({
entryPoints,
outdir: 'dist',
target: 'es2022',
format: 'cjs',
minify: true,
// external: ['vscode', 'util'],
platform: 'node'
// bundle: true
})
}

View File

@ -14,27 +14,25 @@
"css",
"template",
"polymer",
"lit-html"
"wkit"
],
"repository": {
"type": "git",
"url": "https://github.com/yutent/vscode-string-html"
},
"engines": {
"vscode": "^1.22.0"
"vscode": "^1.58.0"
},
"scripts": {
"start": "npx tsc --watch -p .",
"build": "npx tsc -p ."
"start": "node build.mjs --watch",
"build": "node build.mjs"
},
"categories": [
"Programming Languages"
],
"activationEvents": [
"onLanguage:javascript",
"onLanguage:typescript",
"onLanguage:javascriptreact",
"onLanguage:typescriptreact"
"onLanguage:javascriptreact"
],
"main": "./dist/main.js",
"contributes": {
@ -47,79 +45,42 @@
"grammars": [
{
"injectTo": [
"source.js",
"source.js.jsx",
"source.jsx",
"source.ts",
"source.ts.tsx",
"source.tsx"
"source.js"
],
"scopeName": "es6.inline.html",
"path": "./syntaxes/es6.inline.html.json",
"embeddedLanguages": {
"meta.embedded.block.html": "html",
"meta.template.expression.ts": "typescript"
"meta.template.expression.js": "javascript"
}
},
{
"injectTo": [
"source.js",
"source.js.jsx",
"source.jsx",
"source.ts",
"source.ts.tsx",
"source.tsx"
"source.js"
],
"scopeName": "es6.inline.css",
"path": "./syntaxes/es6.inline.css.json",
"embeddedLanguages": {
"meta.embedded.block.css": "css",
"meta.template.expression.ts": "typescript"
"meta.template.expression.js": "javascript"
}
},
{
"injectTo": [
"source.js",
"source.js.jsx",
"source.jsx",
"source.ts",
"source.ts.tsx",
"source.tsx"
"source.js"
],
"scopeName": "es6.inline.scss",
"path": "./syntaxes/es6.inline.scss.json",
"embeddedLanguages": {
"meta.embedded.block.css": "scss",
"meta.template.expression.ts": "typescript"
}
},
{
"injectTo": [
"source.js",
"source.js.jsx",
"source.jsx",
"source.ts",
"source.ts.tsx",
"source.tsx"
],
"scopeName": "es6.inline.less",
"path": "./syntaxes/es6.inline.less.json",
"embeddedLanguages": {
"meta.embedded.block.css": "less",
"meta.template.expression.ts": "typescript"
"meta.template.expression.js": "javascript"
}
}
]
},
"devDependencies": {
"@types/node": "^18.14.5",
"@types/vscode": "^1.22.0",
"typescript": "^4.9.5",
"vscode-languageserver-types": "^3.6.0"
},
"dependencies": {
"vscode-css-languageservice": "^3.0.7",
"vscode-emmet-helper": "^1.2.0",
"vscode-html-languageservice": "^2.1.1"
"vscode-css-languageservice": "^6.2.6",
"@vscode/emmet-helper": "^2.8.8",
"vscode-html-languageservice": "^5.0.6"
}
}

31
src/cache.js Normal file
View File

@ -0,0 +1,31 @@
// Code from https://github.com/microsoft/typescript-styled-plugin/blob/main/src/_language-service.ts
function arePositionsEqual(left, right) {
return left.line === right.line && left.character === right.character
}
export class CompletionsCache {
_cachedCompletionsFile
_cachedCompletionsPosition
_cachedCompletionsContent
_completions
getCached(context, position) {
if (
this._completions &&
context.fileName === this._cachedCompletionsFile &&
this._cachedCompletionsPosition &&
arePositionsEqual(position, this._cachedCompletionsPosition) &&
context.text === this._cachedCompletionsContent
) {
return this._completions
}
}
updateCached(context, position, completions) {
this._cachedCompletionsFile = context.fileName
this._cachedCompletionsPosition = position
this._cachedCompletionsContent = context.text
this._completions = completions
}
}

View File

@ -1,42 +0,0 @@
// Code from https://github.com/Microsoft/typescript-styled-plugin/blob/master/src/styled-template-language-service.ts
import { CompletionList, TextDocument, Position } from 'vscode'
export class CompletionsCache {
private _cachedCompletionsFile?: string
private _cachedCompletionsPosition?: Position
private _cachedCompletionsContent?: string
private _completions?: CompletionList
private equalPositions(left: Position, right: Position): boolean {
return left.line === right.line && left.character === right.character
}
public getCached(
context: TextDocument,
position: Position
): CompletionList | undefined {
if (
this._completions &&
context.fileName === this._cachedCompletionsFile &&
this._cachedCompletionsPosition &&
this.equalPositions(position, this._cachedCompletionsPosition) &&
context.getText() === this._cachedCompletionsContent
) {
return this._completions
}
return undefined
}
public updateCached(
context: TextDocument,
position: Position,
completions: any
) {
this._cachedCompletionsFile = context.fileName
this._cachedCompletionsPosition = position
this._cachedCompletionsContent = context.getText()
this._completions = completions
}
}

View File

@ -1,28 +1,21 @@
import {
languages as Languages,
ExtensionContext,
commands as Commands,
DocumentSelector
} from 'vscode'
import { HTMLCompletionItemProvider } from './providers/html'
import { languages } from 'vscode'
import { HTMLCompletionItemProvider } from './providers/html.js'
import {
CSSCompletionItemProvider,
HTMLStyleCompletionItemProvider
} from './providers/css'
import { HTMLHoverProvider, CSSHoverProvider } from './providers/hover'
import { CodeFormatterProvider } from './providers/formatting'
} from './providers/css.js'
import { HTMLHoverProvider, CSSHoverProvider } from './providers/hover.js'
import { CodeFormatterProvider } from './providers/formatting.js'
const selector = ['javascriptreact', 'javascript']
const selector: DocumentSelector = [
'typescriptreact',
'javascriptreact',
'typescript',
'javascript'
]
export function activate(Context: ExtensionContext) {
export function activate(Context) {
new CodeFormatterProvider()
Languages.registerCompletionItemProvider(
languages.registerHoverProvider(selector, new HTMLHoverProvider())
languages.registerHoverProvider(selector, new CSSHoverProvider())
// HTMLCompletionItemProvider
languages.registerCompletionItemProvider(
selector,
new HTMLCompletionItemProvider(),
'<',
@ -44,8 +37,9 @@ export function activate(Context: ExtensionContext) {
'8',
'9'
)
Languages.registerHoverProvider(selector, new HTMLHoverProvider())
Languages.registerCompletionItemProvider(
// HTMLStyleCompletionItemProvider
languages.registerCompletionItemProvider(
selector,
new HTMLStyleCompletionItemProvider(),
'!',
@ -66,8 +60,9 @@ export function activate(Context: ExtensionContext) {
'8',
'9'
)
Languages.registerHoverProvider(selector, new CSSHoverProvider())
Languages.registerCompletionItemProvider(
// CSSCompletionItemProvider
languages.registerCompletionItemProvider(
selector,
new CSSCompletionItemProvider(),
'!',

View File

@ -1,25 +1,6 @@
import {
CompletionList,
CompletionItem,
TextDocument,
Position,
CancellationToken,
CompletionItemProvider
} from 'vscode'
import {
getLanguageService as GetHTMLanguageService,
LanguageService as HTMLanguageService,
CompletionList as HTMLCompletionList
} from 'vscode-html-languageservice'
import {
getSCSSLanguageService as GetSCSSLanguageService,
LanguageService as CSSLanguageService,
CompletionList as CSSCompletionList
} from 'vscode-css-languageservice'
import * as emmet from 'vscode-emmet-helper'
import { getLanguageService } from 'vscode-html-languageservice'
import { getSCSSLanguageService } from 'vscode-css-languageservice'
import * as emmet from '@vscode/emmet-helper'
import {
GetEmmetConfiguration,
MatchOffset,
@ -27,71 +8,54 @@ import {
GetLanguageRegions,
GetRegionAtOffset,
TranslateCompletionItems
} from '../util'
} from '../util.js'
import { CompletionsCache } from '../cache.js'
import { CompletionsCache } from '../cache'
export class HTMLStyleCompletionItemProvider {
_cssLanguageService = getSCSSLanguageService()
_HTMLanguageService = getLanguageService()
_expression = /(html\s*`)([^`]*)(`)/g
_cache = new CompletionsCache()
export class HTMLStyleCompletionItemProvider implements CompletionItemProvider {
private _cssLanguageService: CSSLanguageService = GetSCSSLanguageService()
private _HTMLanguageService: HTMLanguageService = GetHTMLanguageService()
private _expression = /(\/\*\s*html\s*\*\/\s*`|html\s*`)([^`]*)(`)/g
private _cache = new CompletionsCache()
public provideCompletionItems(
document: TextDocument,
position: Position,
_token: CancellationToken
): CompletionList {
provideCompletionItems(document, position, _token) {
const cached = this._cache.getCached(document, position)
if (cached) {
return cached
}
const currentLine = document.lineAt(position.line)
const empty = {
isIncomplete: false,
items: []
} as CompletionList
}
if (currentLine.isEmptyOrWhitespace) {
return empty
}
const currentLineText = currentLine.text.trim()
const currentOffset = document.offsetAt(position)
const documentText = document.getText()
const match = MatchOffset(this._expression, documentText, currentOffset)
if (!match) {
return empty
}
// tslint:disable-next-line:no-magic-numbers
const matchContent: string = match[2]
const matchContent = match[2]
const matchStartOffset = match.index + match[1].length
const matchEndOffset = match.index + match[0].length
const regions = GetLanguageRegions(this._HTMLanguageService, matchContent)
if (regions.length <= 0) {
return empty
}
const region = GetRegionAtOffset(regions, currentOffset - matchStartOffset)
if (!region) {
return empty
}
const virtualOffset = currentOffset - (matchStartOffset + region.start)
const virtualDocument = CreateVirtualDocument('css', region.content)
const stylesheet = this._cssLanguageService.parseStylesheet(virtualDocument)
const emmetResults: HTMLCompletionList = {
const emmetResults = {
isIncomplete: true,
items: []
}
this._cssLanguageService.setCompletionParticipants([
emmet.getEmmetCompletionParticipants(
virtualDocument,
@ -101,85 +65,64 @@ export class HTMLStyleCompletionItemProvider implements CompletionItemProvider {
emmetResults
)
])
const completions = this._cssLanguageService.doComplete(
virtualDocument,
virtualDocument.positionAt(virtualOffset),
stylesheet
)
if (emmetResults.items.length) {
completions.items.push(...emmetResults.items)
completions.isIncomplete = true
}
this._cache.updateCached(document, position, completions)
return {
isIncomplete: completions.isIncomplete,
items: TranslateCompletionItems(completions.items, currentLine)
} as CompletionList
}
public resolveCompletionItem?(
item: CompletionItem,
_token: CancellationToken
): CompletionItem | Thenable<CompletionItem> {
}
resolveCompletionItem(item, _token) {
return item
}
}
export class CSSCompletionItemProvider implements CompletionItemProvider {
private _CSSLanguageService: CSSLanguageService = GetSCSSLanguageService()
private _expression =
/(\/\*\s*(css|less|scss|sass)\s*\*\/\s*`|css\s*`)([^`]*)(`)/g
private _cache = new CompletionsCache()
export class CSSCompletionItemProvider {
_CSSLanguageService = getSCSSLanguageService()
_expression = /(css\s*`)([^`]*)(`)/g
_cache = new CompletionsCache()
public provideCompletionItems(
document: TextDocument,
position: Position,
_token: CancellationToken
): CompletionList {
provideCompletionItems(document, position, _token) {
const cached = this._cache.getCached(document, position)
if (cached) {
return cached
}
const currentLine = document.lineAt(position.line)
const empty = {
isIncomplete: false,
items: []
} as CompletionList
}
if (currentLine.isEmptyOrWhitespace) {
return empty
}
const currentLineText = currentLine.text.trim()
const currentOffset = document.offsetAt(position)
const documentText = document.getText()
const match = MatchOffset(this._expression, documentText, currentOffset)
if (!match) {
return empty
}
const dialect = match[2]
// tslint:disable-next-line:no-magic-numbers
const matchContent: string = match[3]
const matchContent = match[3]
const matchStartOffset = match.index + match[1].length
const matchEndOffset = match.index + match[0].length
const matchPosition = document.positionAt(matchStartOffset)
const virtualOffset = currentOffset - matchStartOffset
const virtualDocument = CreateVirtualDocument(dialect, matchContent)
const vCss = this._CSSLanguageService.parseStylesheet(virtualDocument)
const emmetResults: CSSCompletionList = {
const emmetResults = {
isIncomplete: true,
items: []
}
this._CSSLanguageService.setCompletionParticipants([
emmet.getEmmetCompletionParticipants(
virtualDocument,
@ -189,30 +132,22 @@ export class CSSCompletionItemProvider implements CompletionItemProvider {
emmetResults
)
])
const completions = this._CSSLanguageService.doComplete(
virtualDocument,
virtualDocument.positionAt(virtualOffset),
vCss
)
if (emmetResults.items.length) {
completions.items.push(...emmetResults.items)
completions.isIncomplete = true
}
this._cache.updateCached(document, position, completions)
return {
isIncomplete: completions.isIncomplete,
items: TranslateCompletionItems(completions.items, currentLine)
} as CompletionList
}
public resolveCompletionItem?(
item: CompletionItem,
_token: CancellationToken
): CompletionItem | Thenable<CompletionItem> {
}
resolveCompletionItem(item, _token) {
return item
}
}

View File

@ -1,78 +1,54 @@
import {
Range,
TextDocument,
WorkspaceEdit,
workspace as Workspace,
TextEditor,
commands as Commands,
Uri,
TextEdit,
Position
} from 'vscode'
import {
getLanguageService as GetHTMLanguageService,
Position as HTMLPosition
} from 'vscode-html-languageservice'
import { Range, WorkspaceEdit, workspace, commands } from 'vscode'
import { getLanguageService } from 'vscode-html-languageservice'
import {
CreateVirtualDocument,
TranslateHTMLTextEdits,
Match,
GetLanguageRegions,
IEmbeddedRegion
} from '../util'
Match
} from '../util.js'
export class CodeFormatterProvider {
private _expression = /(\/\*\s*html\s*\*\/\s*`|html\s*`)([^`]*)(`)/g
private document: TextDocument
_expression = /(html\s*`)([^`]*)(`)/g
document
constructor() {
Commands.registerTextEditorCommand(
commands.registerTextEditorCommand(
'editor.action.formatInlineHtml',
this.format,
this
)
}
public format(textEditor: TextEditor) {
format(textEditor) {
this.document = textEditor.document
var documentText = this.document.getText()
var match = Match(this._expression, documentText)
if (!match) {
return []
}
// TODO - Refactor, This have been used multiple times thourgh out the
// TODO - extension.
var matchStartOffset = match.index + match[1].length
var matchEndOffset = match.index + (match[2].length + match[3].length + 1)
var matchStartPosition = this.document.positionAt(matchStartOffset)
var matchEndPosition = this.document.positionAt(matchEndOffset)
var text = this.document.getText(
new Range(matchStartPosition, matchEndPosition)
)
var vHTML = CreateVirtualDocument('html', text)
// TODO - Expose Formatting Options
const edits = TranslateHTMLTextEdits(
GetHTMLanguageService().format(vHTML, null, {
getLanguageService().format(vHTML, null, {
indentInnerHtml: false,
preserveNewLines: true,
tabSize: <number>textEditor.options.tabSize,
insertSpaces: <boolean>textEditor.options.insertSpaces,
tabSize: textEditor.options.tabSize,
insertSpaces: textEditor.options.insertSpaces,
endWithNewline: true
}),
matchStartPosition.line + 1
)
Workspace.applyEdit(this.composeEdits(this.document.uri, edits))
workspace.applyEdit(this.composeEdits(this.document.uri, edits))
}
private composeEdits(uri: Uri, edits: TextEdit[]): WorkspaceEdit {
composeEdits(uri, edits) {
var ws = new WorkspaceEdit()
ws.set(uri, edits)
return ws

View File

@ -1,45 +1,21 @@
import {
HoverProvider,
TextDocument,
Position,
CancellationToken,
Hover
} from 'vscode'
import { getLanguageService } from 'vscode-html-languageservice'
import { getCSSLanguageService } from 'vscode-css-languageservice'
import { CreateVirtualDocument, MatchOffset } from '../util.js'
import {
getLanguageService as GetHtmlLanguageService,
LanguageService as HtmlLanguageService,
CompletionList as HtmlCompletionList
} from 'vscode-html-languageservice'
export class HTMLHoverProvider {
_htmlLanguageService = getLanguageService()
_cssLanguageService = getCSSLanguageService()
_expression = /(html\s*`)([^`]*)(`)/g
import {
getCSSLanguageService as GetCssLanguageService,
LanguageService as CssLanguageService
} from 'vscode-css-languageservice'
import { CreateVirtualDocument, MatchOffset } from '../util'
export class HTMLHoverProvider implements HoverProvider {
private _htmlLanguageService: HtmlLanguageService = GetHtmlLanguageService()
private _cssLanguageService: CssLanguageService = GetCssLanguageService()
// private _expression = /(html\s*`)([^`]*)(`)/g
private _expression = /(\/\*\s*html\s*\*\/\s*`|html\s*`)([^`]*)(`)/g
provideHover(
document: TextDocument,
position: Position,
token: CancellationToken
): Hover {
provideHover(document, position, token) {
const currentOffset = document.offsetAt(position)
const documentText = document.getText()
const match = MatchOffset(this._expression, documentText, currentOffset)
if (!match) {
return null
}
// tslint:disable-next-line:no-magic-numbers
const matchContent: string = match[2]
const matchContent = match[2]
const matchStartOffset = match.index + match[1].length
const virtualOffset = currentOffset - matchStartOffset
const virtualDocument = CreateVirtualDocument('html', matchContent)
@ -56,33 +32,25 @@ export class HTMLHoverProvider implements HoverProvider {
virtualDocument.positionAt(virtualOffset),
stylesheet
)
return hover as Hover
return hover
}
}
export class CSSHoverProvider implements HoverProvider {
private _htmlLanguageService: HtmlLanguageService = GetHtmlLanguageService()
private _cssLanguageService: CssLanguageService = GetCssLanguageService()
private _expression = /(\/\*\s*(css|less|scss)\s*\*\/\s*`|css\s*`)([^`]*)(`)/g
export class CSSHoverProvider {
_htmlLanguageService = getLanguageService()
_cssLanguageService = getCSSLanguageService()
_expression = /(css\s*`)([^`]*)(`)/g
provideHover(
document: TextDocument,
position: Position,
token: CancellationToken
): Hover {
provideHover(document, position, token) {
const currentOffset = document.offsetAt(position)
const documentText = document.getText()
const match = MatchOffset(this._expression, documentText, currentOffset)
if (!match) {
return null
}
const dialect = match[2]
// tslint:disable-next-line:no-magic-numbers
const matchContent: string = match[3]
const matchContent = match[3]
const matchStartOffset = match.index + match[1].length
const virtualOffset = currentOffset - matchStartOffset
const virtualDocument = CreateVirtualDocument(dialect, matchContent)
@ -92,7 +60,6 @@ export class CSSHoverProvider implements HoverProvider {
virtualDocument.positionAt(virtualOffset),
stylesheet
)
return hover as Hover
return hover
}
}

View File

@ -1,78 +1,50 @@
import {
CompletionList,
CompletionItem,
TextDocument,
Position,
CancellationToken,
CompletionItemProvider
} from 'vscode'
import {
getLanguageService as GetHTMLanguageService,
LanguageService as HTMLanguageService,
CompletionList as HTMLCompletionList
} from 'vscode-html-languageservice'
import * as emmet from 'vscode-emmet-helper'
import { getLanguageService } from 'vscode-html-languageservice'
import * as emmet from '@vscode/emmet-helper'
import {
GetEmmetConfiguration,
MatchOffset,
CreateVirtualDocument,
TranslateCompletionItems
} from '../util'
} from '../util.js'
import { CompletionsCache } from '../cache.js'
import { CompletionsCache } from '../cache'
export class HTMLCompletionItemProvider {
_htmlLanguageService = getLanguageService()
_expression = /(html\s*`)([^`]*)(`)/g
_cache = new CompletionsCache()
export class HTMLCompletionItemProvider implements CompletionItemProvider {
private _htmlLanguageService: HTMLanguageService = GetHTMLanguageService()
private _expression = /(\/\*\s*html\s*\*\/\s*`|html\s*`)([^`]*)(`)/g
// private _expression = /(html\s*`)([^`]*)(`)/g
private _cache = new CompletionsCache()
public provideCompletionItems(
document: TextDocument,
position: Position,
token: CancellationToken
): CompletionList {
provideCompletionItems(document, position, token) {
const cached = this._cache.getCached(document, position)
if (cached) {
return cached
}
const currentLine = document.lineAt(position.line)
const empty = {
isIncomplete: false,
items: []
} as CompletionList
}
if (currentLine.isEmptyOrWhitespace) {
return empty
}
const currentLineText = currentLine.text.trim()
const currentOffset = document.offsetAt(position)
const documentText = document.getText()
const match = MatchOffset(this._expression, documentText, currentOffset)
if (!match) {
return empty
}
// tslint:disable-next-line:no-magic-numbers
const matchContent: string = match[2]
const matchContent = match[2]
const matchStartOffset = match.index + match[1].length
const matchEndOffset = match.index + match[0].length
const matchPosition = document.positionAt(matchStartOffset)
const virtualOffset = currentOffset - matchStartOffset
const virtualDocument = CreateVirtualDocument('html', matchContent)
const vHtml = this._htmlLanguageService.parseHTMLDocument(virtualDocument)
const emmetResults: HTMLCompletionList = {
const emmetResults = {
isIncomplete: true,
items: []
}
this._htmlLanguageService.setCompletionParticipants([
emmet.getEmmetCompletionParticipants(
virtualDocument,
@ -82,30 +54,22 @@ export class HTMLCompletionItemProvider implements CompletionItemProvider {
emmetResults
)
])
const completions = this._htmlLanguageService.doComplete(
virtualDocument,
virtualDocument.positionAt(virtualOffset),
vHtml
)
if (emmetResults.items.length) {
completions.items.push(...emmetResults.items)
completions.isIncomplete = true
}
this._cache.updateCached(document, position, completions)
return {
isIncomplete: completions.isIncomplete,
items: TranslateCompletionItems(completions.items, currentLine, true)
} as CompletionList
}
public resolveCompletionItem?(
item: CompletionItem,
token: CancellationToken
): CompletionItem | Thenable<CompletionItem> {
}
resolveCompletionItem(item, token) {
return item
}
}

View File

@ -1,23 +1,7 @@
import {
workspace,
TextLine,
TextEdit,
Position,
Range,
CompletionItem,
Command
} from 'vscode'
import { workspace, TextEdit, Position, Range } from 'vscode'
import { TextDocument, TokenType } from 'vscode-html-languageservice'
import {
TextDocument as HTMLTextDocument,
LanguageService,
TokenType as HTMLTokenType,
TextEdit as HTMLTextEdit
} from 'vscode-html-languageservice'
import { EmmetConfiguration } from 'vscode-emmet-helper'
export function GetEmmetConfiguration(): EmmetConfiguration {
export function GetEmmetConfiguration() {
const emmetConfig = workspace.getConfiguration('emmet')
return {
useNewEmmet: true,
@ -25,24 +9,19 @@ export function GetEmmetConfiguration(): EmmetConfiguration {
showAbbreviationSuggestions: emmetConfig.showAbbreviationSuggestions,
syntaxProfiles: emmetConfig.syntaxProfiles,
variables: emmetConfig.variables
} as EmmetConfiguration
}
export function NotNull<T>(input: any): T {
if (!input) {
return {} as T
}
return input as T
}
export function MatchOffset(
regex: RegExp,
data: string,
offset: number
): RegExpMatchArray {
regex.exec(null)
export function NotNull(input) {
if (!input) {
return {}
}
return input
}
let match: RegExpExecArray
export function MatchOffset(regex, data, offset) {
regex.exec(null)
let match
while ((match = regex.exec(data)) !== null) {
if (
offset > match.index + match[1].length &&
@ -53,28 +32,21 @@ export function MatchOffset(
}
return null
}
export function Match(regex: RegExp, data: string): RegExpMatchArray {
export function Match(regex, data) {
regex.exec(null)
let match: RegExpExecArray
let match
while ((match = regex.exec(data)) !== null) {
return match
}
return null
}
export function GetLanguageRegions(
service: LanguageService,
data: string
): IEmbeddedRegion[] {
export function GetLanguageRegions(service, data) {
const scanner = service.createScanner(data)
const regions: IEmbeddedRegion[] = []
let tokenType: HTMLTokenType
while ((tokenType = scanner.scan()) !== HTMLTokenType.EOS) {
const regions = []
let tokenType
while ((tokenType = scanner.scan()) !== TokenType.EOS) {
switch (tokenType) {
case HTMLTokenType.Styles:
case TokenType.Styles:
regions.push({
languageId: 'css',
start: scanner.getTokenOffset(),
@ -87,14 +59,9 @@ export function GetLanguageRegions(
break
}
}
return regions
}
export function GetRegionAtOffset(
regions: IEmbeddedRegion[],
offset: number
): IEmbeddedRegion {
export function GetRegionAtOffset(regions, offset) {
for (let region of regions) {
if (region.start <= offset) {
if (offset <= region.end) {
@ -106,12 +73,8 @@ export function GetRegionAtOffset(
}
return null
}
export function TranslateHTMLTextEdits(
input: HTMLTextEdit[],
offset: number
): TextEdit[] {
return input.map((item: HTMLTextEdit) => {
export function TranslateHTMLTextEdits(input, offset) {
return input.map(item => {
const startPosition = new Position(
item.range.start.line + offset,
item.range.start.character
@ -124,56 +87,37 @@ export function TranslateHTMLTextEdits(
return new TextEdit(itemRange, item.newText)
})
}
export function TranslateCompletionItems(
items,
line: TextLine,
expand: boolean = false
): CompletionItem[] {
return items.map((item: CompletionItem) => {
const result = item as CompletionItem
export function TranslateCompletionItems(items, line, expand = false) {
return items.map(item => {
const result = item
const range = new Range(
new Position(line.lineNumber, result.textEdit.range.start.character),
new Position(line.lineNumber, result.textEdit.range.end.character)
)
result.textEdit = null
// @ts-ignore - setting range for intellisense to show results properly
result.range = range
if (expand) {
// i use this to both expand html abbreviations and auto complete tags
result.command = {
title: 'Emmet Expand Abbreviation',
command: 'editor.emmet.action.expandAbbreviation'
} as Command
}
}
return result
})
}
export function CreateVirtualDocument(
// context: TextDocument | HTMLTextDocument,
languageId: string,
// context: TextDocument | TextDocument,
languageId,
// position: Position | HtmlPosition,
content: string
): HTMLTextDocument {
const doc = HTMLTextDocument.create(
content
) {
const doc = TextDocument.create(
`embedded://document.${languageId}`,
languageId,
1,
content
)
return doc
}
export interface IEmbeddedRegion {
languageId: string
start: number
end: number
length: number
content: string
}

View File

@ -1,27 +1,28 @@
{
"fileTypes": ["js", "jsx", "ts", "tsx"],
"injectionSelector": "L:source.js -comment -string, L:source.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string",
"scopeName": "es6.inline.css",
"fileTypes": ["js"],
"injectionSelector": "L:source.js -comment -string",
"patterns": [
{
"contentName": "meta.embedded.block.css",
"begin": "(?x)(\\s*?(\\w+\\.)?(?:css|/\\*\\s*css\\s*\\*/)\\s*)(`)",
"begin": "(?i)(\\s*css)(`)",
"beginCaptures": {
"0": {
"name": "string.template.ts, punctuation.definition.string.template.begin.ts"
"name": "string.template.js, punctuation.definition.string.template.begin.js"
},
"1": {
"name": "entity.name.function.tagged-template.ts"
"name": "entity.name.function.tagged-template.js"
}
},
"end": "(`)",
"endCaptures": {
"0": {
"name": "string.template.ts, punctuation.definition.string.template.end.ts"
"name": "string.template.js, punctuation.definition.string.template.end.js"
}
},
"patterns": [
{
"include": "source.ts#template-substitution-element"
"include": "source.js#template-substitution-element"
},
{
"include": "source.css.scss"
@ -29,8 +30,7 @@
]
},
{
"include": "source.ts#template-substitution-element"
"include": "source.js#template-substitution-element"
}
],
"scopeName": "es6.inline.css"
]
}

View File

@ -1,6 +1,7 @@
{
"fileTypes": ["js", "jsx", "ts", "tsx"],
"injectionSelector": "L:source.js -comment -string, L:source.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string",
"scopeName": "es6.inline.html",
"fileTypes": ["js"],
"injectionSelector": "L:source.js -comment -string",
"injections": {
"L:source": {
"patterns": [
@ -14,24 +15,24 @@
"patterns": [
{
"contentName": "meta.embedded.block.html",
"begin": "(?x)(\\s*?(\\w+\\.)?(?:html|/\\*\\s*html\\s*\\*/)\\s*)(`)",
"begin": "(?i)(\\s*html)(`)",
"beginCaptures": {
"0": {
"name": "string.template.ts, punctuation.definition.string.template.begin.ts"
"name": "string.template.js, punctuation.definition.string.template.begin.js"
},
"1": {
"name": "entity.name.function.tagged-template.ts"
"name": "entity.name.function.tagged-template.js"
}
},
"end": "(`)",
"endCaptures": {
"0": {
"name": "string.template.ts, punctuation.definition.string.template.end.ts"
"name": "string.template.js, punctuation.definition.string.template.end.js"
}
},
"patterns": [
{
"include": "source.ts#template-substitution-element"
"include": "source.js#template-substitution-element"
},
{
"include": "text.html.basic"
@ -39,8 +40,7 @@
]
},
{
"include": "source.ts#template-substitution-element"
"include": "source.js#template-substitution-element"
}
],
"scopeName": "es6.inline.html"
]
}

View File

@ -1,36 +0,0 @@
{
"fileTypes": ["js", "jsx", "ts", "tsx"],
"injectionSelector": "L:source.js -comment -string, L:source.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string",
"patterns": [
{
"contentName": "meta.embedded.block.css",
"begin": "(?x)(\\s*?(\\w+\\.)?(?:less|/\\*\\s*less\\s*\\*/)\\s*)(`)",
"beginCaptures": {
"0": {
"name": "string.template.ts, punctuation.definition.string.template.begin.ts"
},
"1": {
"name": "entity.name.function.tagged-template.ts"
}
},
"end": "(`)",
"endCaptures": {
"0": {
"name": "string.template.ts, punctuation.definition.string.template.end.ts"
}
},
"patterns": [
{
"include": "source.ts#template-substitution-element"
},
{
"include": "source.css.less"
}
]
},
{
"include": "source.ts#template-substitution-element"
}
],
"scopeName": "es6.inline.less"
}

View File

@ -1,27 +1,28 @@
{
"fileTypes": ["js", "jsx", "ts", "tsx"],
"injectionSelector": "L:source.js -comment -string, L:source.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string",
"scopeName": "es6.inline.scss",
"fileTypes": ["js"],
"injectionSelector": "L:source.js -comment -string",
"patterns": [
{
"contentName": "meta.embedded.block.css",
"begin": "(?x)(\\s*?(\\w+\\.)?(?:scss|/\\*\\s*scss\\s*\\*/)\\s*)(`)",
"begin": "(?i)(\\s*scss)(`)",
"beginCaptures": {
"0": {
"name": "string.template.ts, punctuation.definition.string.template.begin.ts"
"name": "string.template.js, punctuation.definition.string.template.begin.js"
},
"1": {
"name": "entity.name.function.tagged-template.ts"
"name": "entity.name.function.tagged-template.js"
}
},
"end": "(`)",
"endCaptures": {
"0": {
"name": "string.template.ts, punctuation.definition.string.template.end.ts"
"name": "string.template.js, punctuation.definition.string.template.end.js"
}
},
"patterns": [
{
"include": "source.ts#template-substitution-element"
"include": "source.js#template-substitution-element"
},
{
"include": "source.css.scss"
@ -29,8 +30,7 @@
]
},
{
"include": "source.ts#template-substitution-element"
"include": "source.js#template-substitution-element"
}
],
"scopeName": "es6.inline.scss"
]
}

View File

@ -1,6 +1,4 @@
function html()
{
html`
html`
<style>
:host {
display: block;
@ -8,7 +6,7 @@ function html()
</style>
<body>
<input type="button" @click=${(e) => this.click(e)} value="deadmau5 🐭" />
<input type="button" @click=${e => this.click(e)} value="deadmau5 🐭" />
<div></div>
<div></div>
@ -16,62 +14,27 @@ function html()
<h3>${['❤️', '💛', '💚', '💙', '💜', '🖤']}</h3>
</body>
`;
`
/* html */`
<div></div>
<div></div>
<div></div>
<div></div>
<div>
<p></p>
</div>
`;
bug(html` <div></div> `)
bug(/* html*/`
<div></div>
`);
bug(html`
<div></div>
`);
function bug() {
html`div...`
}
function bug()
{
html`div...`;
}
function css()
{
css`
:host {
css`
.foo {
display: block;
.bar {
color: #f30;
}
`;
}
`
/* css */`
css`
:host {
display: block;
display: flex;
height: 50px;
}
`;
/* css */`
:host {
display: block;
}
`;
bug(/*css */`
:host {
display: block;
}
`)
bug(css`
:host {
display: block;
}
`)
}
`

View File

@ -1,11 +0,0 @@
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"sourceMap": false,
"outDir": "dist",
"rootDir": "src",
"lib": ["es2016"]
},
"exclude": ["node_modules", "tests"]
}