vscode-gem-languageservice 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vscode-gem-languageservice",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Language service for Gem",
   "keywords": [
     "gem",
@@ -14,9 +14,13 @@
   ],
   "scripts": {},
   "dependencies": {
+    "@vscode/emmet-helper": "^2.9.3",
+    "duoyun-ui": "^2.2.0",
     "gem-analyzer": "^2.2.0",
     "ts-morph": "^13.0.0",
     "typescript": "^5.6.2",
+    "vscode-css-languageservice": "^6.3.1",
+    "vscode-html-languageservice": "^5.3.1",
     "vscode-languageserver": "^9.0.1",
     "vscode-languageserver-textdocument": "^1.0.12"
   },

package/src/cache.ts

@@ -0,0 +1,34 @@
+import type { CompletionList } from 'vscode-languageserver';
+import type { Position, TextDocument } from 'vscode-languageserver-textdocument';
+
+export class CompletionsCache {
+  #cachedCompletionsFile?: string;
+  #cachedCompletionsPosition?: Position;
+  #cachedCompletionsContent?: string;
+  #completions?: CompletionList;
+
+  #equalPositions(left: Position, right?: Position) {
+    return !!right && left.line === right.line && left.character === right.character;
+  }
+
+  getCached(doc: TextDocument, position: Position) {
+    if (
+      this.#completions &&
+      doc.uri === this.#cachedCompletionsFile &&
+      this.#equalPositions(position, this.#cachedCompletionsPosition) &&
+      doc.getText() === this.#cachedCompletionsContent
+    ) {
+      return this.#completions;
+    }
+
+    return undefined;
+  }
+
+  updateCached(context: TextDocument, position: Position, completions: CompletionList) {
+    this.#cachedCompletionsFile = context.uri;
+    this.#cachedCompletionsPosition = position;
+    this.#cachedCompletionsContent = context.getText();
+    this.#completions = completions;
+    return completions;
+  }
+}

package/src/color.ts

@@ -0,0 +1,31 @@
+import { rgbToHexColor, parseHexColor } from 'duoyun-ui/lib/color';
+import { Range, Color } from 'vscode-languageserver/node';
+import type { ColorInformation, ColorPresentation } from 'vscode-languageserver/node';
+import type { HexColor } from 'duoyun-ui/lib/color';
+import type { TextDocument } from 'vscode-languageserver-textdocument';
+
+import { COLOR_REG } from './constants';
+
+export class ColorProvider {
+  provideDocumentColors(document: TextDocument) {
+    COLOR_REG.exec('null');
+
+    const documentText = document.getText();
+    const colors: ColorInformation[] = [];
+
+    let match: RegExpExecArray | null;
+    while ((match = COLOR_REG.exec(documentText)) !== null) {
+      const hex = match.groups!.content as HexColor;
+      const [red, green, blue, alpha] = parseHexColor(hex);
+      const offset = match.index + (match.groups!.start?.length || 0);
+      const range = Range.create(document.positionAt(offset), document.positionAt(offset + hex.length));
+      const color = Color.create(red / 255, green / 255, blue / 255, alpha);
+      colors.push({ range, color });
+    }
+    return colors;
+  }
+
+  provideColorPresentations({ red, green, blue, alpha }: Color): ColorPresentation[] {
+    return [{ label: rgbToHexColor([red * 255, green * 255, blue * 255, alpha]) }];
+  }
+}

package/src/constants.ts

@@ -0,0 +1,10 @@
+export const COLOR_REG = /(?<start>'|")?(?<content>#([0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4}))($1|\s*;|\s*\))/g;
+
+// 直接通过正则匹配 css 片段，通过条件的结束 ` 号匹配
+export const CSS_REG = /(?<start>\/\*\s*css\s*\*\/\s*`|(?<!`)(?:css|less|scss)\s*`)(?<content>.*?)(`(?=;|,?\s*\)))/gs;
+// 直接通过正则匹配 style 片段，通过条件的结束 ` 号匹配
+// 语言服务和高亮都只支持 styled 写法
+export const STYLE_REG = /(?<start>\/\*\s*style\s*\*\/\s*`|(?<!`)styled?\s*`)(?<content>.*?)(`(?=,|\s*}\s*\)))/gs;
+
+// 处理后进行正则匹配，所以不需要验证后面的 ` 号
+export const HTML_REG = /(?<start>\/\*\s*html\s*\*\/\s*`|(?<!`)(?:html|raw)\s*`)(?<content>[^`]*)(`)/g;

package/src/css.ts

@@ -0,0 +1,122 @@
+import type { LanguageService as HTMLanguageService } from 'vscode-html-languageservice';
+import type { Position, TextDocument } from 'vscode-languageserver-textdocument';
+import { getLanguageService as getHTMLanguageService, TokenType as HTMLTokenType } from 'vscode-html-languageservice';
+import { getCSSLanguageService } from 'vscode-css-languageservice';
+
+import { matchOffset, createVirtualDocument, removeSlot, translateCompletionList } from './util';
+import { CSS_REG, HTML_REG } from './constants';
+import { CompletionsCache } from './cache';
+
+function getRegionAtOffset(regions: IEmbeddedRegion[], offset: number) {
+  for (const region of regions) {
+    if (region.start <= offset) {
+      if (offset <= region.end) {
+        return region;
+      }
+    } else {
+      break;
+    }
+  }
+  return null;
+}
+
+interface IEmbeddedRegion {
+  languageId: string;
+  start: number;
+  end: number;
+  length: number;
+  content: string;
+}
+
+function getLanguageRegions(service: HTMLanguageService, data: string) {
+  const scanner = service.createScanner(data);
+  const regions: IEmbeddedRegion[] = [];
+  let tokenType: HTMLTokenType;
+
+  while ((tokenType = scanner.scan()) !== HTMLTokenType.EOS) {
+    switch (tokenType) {
+      case HTMLTokenType.Styles:
+        regions.push({
+          languageId: 'css',
+          start: scanner.getTokenOffset(),
+          end: scanner.getTokenEnd(),
+          length: scanner.getTokenLength(),
+          content: scanner.getTokenText(),
+        });
+        break;
+      default:
+        break;
+    }
+  }
+
+  return regions;
+}
+
+export class HTMLStyleCompletionItemProvider {
+  #cssLanguageService = getCSSLanguageService();
+  #htmlLanguageService = getHTMLanguageService();
+  #cache = new CompletionsCache();
+
+  provideCompletionItems(document: TextDocument, position: Position) {
+    const cached = this.#cache.getCached(document, position);
+    if (cached) return cached;
+
+    const currentOffset = document.offsetAt(position);
+    const documentText = document.getText();
+    const match = matchOffset(HTML_REG, documentText, currentOffset);
+
+    if (!match) return;
+
+    const matchContent = match.groups!.content;
+    const matchStartOffset = match.index + match.groups!.start.length;
+    const regions = getLanguageRegions(this.#htmlLanguageService, matchContent);
+
+    if (regions.length <= 0) return;
+
+    const region = getRegionAtOffset(regions, currentOffset - matchStartOffset);
+
+    if (!region) return;
+
+    const virtualOffset = currentOffset - (matchStartOffset + region.start);
+    const virtualDocument = createVirtualDocument('css', removeSlot(region.content));
+    const stylesheet = this.#cssLanguageService.parseStylesheet(virtualDocument);
+
+    const completions = this.#cssLanguageService.doComplete(
+      virtualDocument,
+      virtualDocument.positionAt(virtualOffset),
+      stylesheet,
+    );
+
+    return this.#cache.updateCached(document, position, translateCompletionList(completions, position));
+  }
+}
+
+export class CSSCompletionItemProvider {
+  #cssLanguageService = getCSSLanguageService();
+  #cache = new CompletionsCache();
+
+  provideCompletionItems(document: TextDocument, position: Position) {
+    const cached = this.#cache.getCached(document, position);
+    if (cached) return cached;
+
+    const currentOffset = document.offsetAt(position);
+    const documentText = document.getText();
+    const match = matchOffset(CSS_REG, documentText, currentOffset);
+
+    if (!match) return;
+
+    const matchContent = match.groups!.content;
+    const matchStartOffset = match.index + match.groups!.start.length;
+    const virtualOffset = currentOffset - matchStartOffset;
+    const virtualDocument = createVirtualDocument('css', removeSlot(matchContent));
+    const vCss = this.#cssLanguageService.parseStylesheet(virtualDocument);
+
+    const completions = this.#cssLanguageService.doComplete(
+      virtualDocument,
+      virtualDocument.positionAt(virtualOffset),
+      vCss,
+    );
+
+    return this.#cache.updateCached(document, position, translateCompletionList(completions, position));
+  }
+}

package/src/diagnostic.ts

@@ -0,0 +1,45 @@
+// 只对 CSS 语法和属性做了简单的检查，不做值检查
+// TODO: 激活扩展、打开工作区时需要自动诊断所有文件
+// TODO: 使用 LRU 缓存
+
+import { getCSSLanguageService } from 'vscode-css-languageservice';
+import { Range } from 'vscode-languageserver/node';
+import type { Diagnostic } from 'vscode-languageserver/node';
+import type { TextDocument } from 'vscode-languageserver-textdocument';
+
+import { CSS_REG, STYLE_REG } from './constants';
+import { createVirtualDocument, removeSlot } from './util';
+
+const cssLanguageService = getCSSLanguageService();
+
+export function getDiagnostics(document: TextDocument, _relatedInformation: boolean) {
+  const diagnostics: Diagnostic[] = [];
+  const text = document.getText();
+
+  const matchFragments = (regexp: RegExp, appendBefore: string, appendAfter: string) => {
+    regexp.exec('null');
+
+    let match;
+    while ((match = regexp.exec(text))) {
+      const matchContent = match.groups!.content;
+      const offset = match.index + match.groups!.start.length;
+      const virtualDocument = createVirtualDocument('css', `${appendBefore}${removeSlot(matchContent)}${appendAfter}`);
+      const vCss = cssLanguageService.parseStylesheet(virtualDocument);
+      const oDiagnostics = cssLanguageService.doValidation(virtualDocument, vCss) as Diagnostic[];
+      for (const { message, range } of oDiagnostics) {
+        const { start, end } = range;
+        const startOffset = virtualDocument.offsetAt(start) - appendBefore.length + offset;
+        const endOffset = virtualDocument.offsetAt(end) - appendBefore.length + offset;
+        diagnostics.push({
+          range: Range.create(document.positionAt(startOffset), document.positionAt(endOffset)),
+          message,
+        });
+      }
+    }
+  };
+
+  matchFragments(CSS_REG, '', '');
+  matchFragments(STYLE_REG, ':host { ', ' }');
+
+  return diagnostics;
+}

package/src/hover.ts

@@ -0,0 +1,73 @@
+import { getLanguageService as getHtmlLanguageService } from 'vscode-html-languageservice';
+import { getCSSLanguageService } from 'vscode-css-languageservice';
+import type { LanguageService as CssLanguageService } from 'vscode-css-languageservice';
+import type { Position, TextDocument } from 'vscode-languageserver-textdocument';
+
+import { createVirtualDocument, matchOffset, removeHTMLSlot, removeSlot } from './util';
+import { CSS_REG, HTML_REG, STYLE_REG } from './constants';
+
+export class HTMLHoverProvider {
+  #htmlLanguageService = getHtmlLanguageService();
+
+  provideHover(document: TextDocument, position: Position) {
+    const currentOffset = document.offsetAt(position);
+    const documentText = removeHTMLSlot(document.getText(), currentOffset);
+    const match = matchOffset(HTML_REG, documentText, currentOffset);
+
+    if (!match) return null;
+
+    const matchContent = match.groups!.content;
+    const matchStartOffset = match.index + match.groups!.start.length;
+    const virtualOffset = currentOffset - matchStartOffset;
+    const virtualDocument = createVirtualDocument('html', matchContent);
+    const html = this.#htmlLanguageService.parseHTMLDocument(virtualDocument);
+    return this.#htmlLanguageService.doHover(virtualDocument, virtualDocument.positionAt(virtualOffset), html, {
+      documentation: true,
+      references: true,
+    });
+  }
+}
+
+export class CSSHoverProvider {
+  #cssLanguageService: CssLanguageService = getCSSLanguageService();
+
+  provideHover(document: TextDocument, position: Position) {
+    const currentOffset = document.offsetAt(position);
+    const documentText = document.getText();
+    const match = matchOffset(CSS_REG, documentText, currentOffset);
+
+    if (!match) return null;
+
+    const matchContent = match.groups!.content;
+    const matchStartOffset = match.index + match.groups!.start.length;
+    const virtualOffset = currentOffset - matchStartOffset;
+    const virtualDocument = createVirtualDocument('css', removeSlot(matchContent));
+    const stylesheet = this.#cssLanguageService.parseStylesheet(virtualDocument);
+    return this.#cssLanguageService.doHover(virtualDocument, virtualDocument.positionAt(virtualOffset), stylesheet, {
+      documentation: true,
+      references: true,
+    });
+  }
+}
+
+export class StyleHoverProvider {
+  #cssLanguageService: CssLanguageService = getCSSLanguageService();
+
+  provideHover(document: TextDocument, position: Position) {
+    const currentOffset = document.offsetAt(position);
+    const documentText = document.getText();
+    const match = matchOffset(STYLE_REG, documentText, currentOffset);
+
+    if (!match) return null;
+
+    const matchContent = match.groups!.content;
+    const matchStartOffset = match.index + match.groups!.start.length;
+    const virtualOffset = currentOffset - matchStartOffset + 8;
+    const virtualDocument = createVirtualDocument('css', `:host { ${removeSlot(matchContent)} }`);
+    const stylesheet = this.#cssLanguageService.parseStylesheet(virtualDocument);
+    return this.#cssLanguageService.doHover(virtualDocument, virtualDocument.positionAt(virtualOffset), stylesheet, {
+      documentation: true,
+      references: true,
+    });
+  }
+}

package/src/html.ts

@@ -0,0 +1,85 @@
+import type { CompletionList as HTMLCompletionList } from 'vscode-html-languageservice';
+import { getLanguageService as getHTMLanguageService } from 'vscode-html-languageservice';
+import { doComplete as doEmmetComplete, type VSCodeEmmetConfig } from '@vscode/emmet-helper';
+import type { Position, TextDocument } from 'vscode-languageserver-textdocument';
+import type { Connection } from 'vscode-languageserver';
+
+import { matchOffset, createVirtualDocument, removeHTMLSlot, translateCompletionList } from './util';
+import { HTML_REG } from './constants';
+import { CompletionsCache } from './cache';
+
+export class HTMLCompletionItemProvider {
+  #htmlLanguageService = getHTMLanguageService();
+  #cache = new CompletionsCache();
+  #connection: Connection;
+  #emmetConfig: VSCodeEmmetConfig;
+
+  constructor(connection: Connection) {
+    this.#connection = connection;
+  }
+
+  async #getEmmetConfig() {
+    if (!this.#emmetConfig) {
+      const emmetConfig = await this.#connection.workspace.getConfiguration('emmet');
+      this.#emmetConfig = {
+        showExpandedAbbreviation: emmetConfig.showExpandedAbbreviation,
+        showAbbreviationSuggestions: emmetConfig.showAbbreviationSuggestions,
+        syntaxProfiles: emmetConfig.syntaxProfiles,
+        variables: emmetConfig.variables,
+      };
+    }
+    return this.#emmetConfig;
+  }
+
+  async provideCompletionItems(document: TextDocument, position: Position) {
+    const emmetConfig = await this.#getEmmetConfig();
+    const cached = this.#cache.getCached(document, position);
+    if (cached) return cached;
+
+    const currentOffset = document.offsetAt(position);
+    const documentText = removeHTMLSlot(document.getText(), currentOffset);
+    const match = matchOffset(HTML_REG, documentText, currentOffset);
+
+    if (!match) return;
+
+    const matchContent = match.groups!.content;
+    const matchStartOffset = match.index + match.groups!.start.length;
+    const virtualOffset = currentOffset - matchStartOffset;
+    const virtualDocument = createVirtualDocument('html', matchContent);
+    const vHtml = this.#htmlLanguageService.parseHTMLDocument(virtualDocument);
+
+    let emmetResults: HTMLCompletionList = { isIncomplete: true, items: [] };
+    this.#htmlLanguageService.setCompletionParticipants([
+      {
+        onHtmlContent: async () => {
+          const pos = virtualDocument.positionAt(virtualOffset);
+          const result = doEmmetComplete(virtualDocument, pos, 'html', emmetConfig);
+          if (result) {
+            emmetResults = {
+              ...result,
+              items: result.items.map((item) => ({
+                ...item,
+                command: {
+                  title: 'Emmet Expand Abbreviation',
+                  command: 'editor.emmet.action.expandAbbreviation',
+                },
+              })),
+            };
+          }
+        },
+      },
+    ]);
+
+    const completions = this.#htmlLanguageService.doComplete(
+      virtualDocument,
+      virtualDocument.positionAt(virtualOffset),
+      vHtml,
+    );
+
+    if (emmetResults.items.length) {
+      completions.items.push(...emmetResults.items);
+    }
+
+    return this.#cache.updateCached(document, position, translateCompletionList(completions, position));
+  }
+}

package/src/index.ts

@@ -1,15 +1,21 @@
 #!/usr/bin/env -S node --experimental-transform-types
-import type { Diagnostic, InitializeParams } from 'vscode-languageserver/node';
+import type { InitializeParams } from 'vscode-languageserver/node';
 import {
   createConnection,
   TextDocuments,
-  DiagnosticSeverity,
   ProposedFeatures,
   DidChangeConfigurationNotification,
-  CompletionItemKind,
   TextDocumentSyncKind,
 } from 'vscode-languageserver/node';
 import { TextDocument } from 'vscode-languageserver-textdocument';
+import { debounce } from 'duoyun-ui/lib/timer';
+
+import { ColorProvider } from './color';
+import { getDiagnostics } from './diagnostic';
+import { CSSHoverProvider, HTMLHoverProvider, StyleHoverProvider } from './hover';
+import { CSSCompletionItemProvider, HTMLStyleCompletionItemProvider } from './css';
+import { HTMLCompletionItemProvider } from './html';
+import { StyleCompletionItemProvider } from './style';
 
 const connection = createConnection(ProposedFeatures.all);
 const documents = new TextDocuments(TextDocument);
@@ -24,8 +30,13 @@ connection.onInitialize(({ capabilities }: InitializeParams) => {
   hasDiagnosticRelatedInformationCapability = !!capabilities.textDocument?.publishDiagnostics?.relatedInformation;
   return {
     capabilities: {
+      completionProvider: {
+        resolveProvider: true,
+        triggerCharacters: ['!', '.', '}', ':', '*', '$', ']', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '<'],
+      },
+      hoverProvider: true,
+      colorProvider: true,
       textDocumentSync: TextDocumentSyncKind.Incremental,
-      completionProvider: { resolveProvider: true },
       workspace: !hasWorkspaceFolderCapability ? undefined : { workspaceFolders: { supported: true } },
     },
   };
@@ -60,7 +71,7 @@ connection.onDidChangeConfiguration((change) => {
   documents.all().forEach(validateTextDocument);
 });
 
-async function getDocumentSettings(resource: string) {
+function _getDocumentSettings(resource: string) {
   if (!hasConfigurationCapability) return globalSettings;
   if (!documentSettings.has(resource)) {
     const settings = connection.workspace.getConfiguration({ scopeUri: resource, section: 'languageServerGem' });
@@ -73,74 +84,47 @@ documents.onDidClose((e) => documentSettings.delete(e.document.uri));
 
 documents.onDidChangeContent((change) => validateTextDocument(change.document));
 
-async function validateTextDocument(textDocument: TextDocument) {
-  const settings = await getDocumentSettings(textDocument.uri);
-
-  const text = textDocument.getText();
-  const pattern = /\b[A-Z]{20,}\b/g;
-  let m: RegExpExecArray | null;
-
-  let problems = 0;
-  const diagnostics: Diagnostic[] = [];
-  while ((m = pattern.exec(text)) && problems < settings.maxNumberOfProblems) {
-    problems++;
-    const diagnostic: Diagnostic = {
-      severity: DiagnosticSeverity.Warning,
-      range: { start: textDocument.positionAt(m.index), end: textDocument.positionAt(m.index + m[0].length) },
-      message: `${m[0]} is all uppercase.`,
-      source: 'vscode-gem',
-    };
-    if (hasDiagnosticRelatedInformationCapability) {
-      diagnostic.relatedInformation = [
-        {
-          location: {
-            uri: textDocument.uri,
-            range: Object.assign({}, diagnostic.range),
-          },
-          message: 'Spelling matters',
-        },
-        {
-          location: {
-            uri: textDocument.uri,
-            range: Object.assign({}, diagnostic.range),
-          },
-          message: 'Particularly for names',
-        },
-      ];
-    }
-    diagnostics.push(diagnostic);
-  }
-  connection.sendDiagnostics({ uri: textDocument.uri, diagnostics });
-}
+const validateTextDocument = debounce((textDocument: TextDocument) => {
+  connection.sendDiagnostics({
+    uri: textDocument.uri,
+    diagnostics: getDiagnostics(textDocument, hasDiagnosticRelatedInformationCapability),
+  });
+});
 
 connection.onDidChangeWatchedFiles((_change) => {
   connection.console.log('We received a file change event');
 });
 
-connection.onCompletion((_textDocumentPosition) => {
-  return [
-    {
-      label: 'TypeScript',
-      kind: CompletionItemKind.Text,
-      data: 1,
-    },
-    {
-      label: 'JavaScript',
-      kind: CompletionItemKind.Text,
-      data: 2,
-    },
-  ];
+const completionItemProviders = [
+  new CSSCompletionItemProvider(),
+  new HTMLStyleCompletionItemProvider(),
+  new HTMLCompletionItemProvider(connection),
+  new StyleCompletionItemProvider(),
+];
+connection.onCompletion(async ({ textDocument, position }) => {
+  for (const provider of completionItemProviders) {
+    const result = await provider.provideCompletionItems(documents.get(textDocument.uri)!, position);
+    if (result) return { isIncomplete: true, items: result.items };
+  }
+});
+
+connection.onCompletionResolve((item) => item);
+
+const colorProvider = new ColorProvider();
+connection.onColorPresentation(({ color }) => {
+  return colorProvider.provideColorPresentations(color);
+});
+
+connection.onDocumentColor(({ textDocument }) => {
+  return colorProvider.provideDocumentColors(documents.get(textDocument.uri)!);
 });
 
-connection.onCompletionResolve((item) => {
-  if (item.data === 1) {
-    item.detail = 'TypeScript details';
-    item.documentation = 'TypeScript documentation';
-  } else if (item.data === 2) {
-    item.detail = 'JavaScript details';
-    item.documentation = 'JavaScript documentation';
+const hoverProviders = [new CSSHoverProvider(), new StyleHoverProvider(), new HTMLHoverProvider()];
+connection.onHover(({ textDocument, position }) => {
+  for (const provider of hoverProviders) {
+    const result = provider.provideHover(documents.get(textDocument.uri)!, position);
+    if (result) return result;
   }
-  return item;
 });
 
 documents.listen(connection);

package/src/style.ts

@@ -0,0 +1,36 @@
+import { getCSSLanguageService as getCSSLanguageService } from 'vscode-css-languageservice';
+import type { Position, TextDocument } from 'vscode-languageserver-textdocument';
+
+import { matchOffset, createVirtualDocument, removeSlot, translateCompletionList } from './util';
+import { STYLE_REG } from './constants';
+import { CompletionsCache } from './cache';
+
+export class StyleCompletionItemProvider {
+  #cssLanguageService = getCSSLanguageService();
+  #cache = new CompletionsCache();
+
+  provideCompletionItems(document: TextDocument, position: Position) {
+    const cached = this.#cache.getCached(document, position);
+    if (cached) return cached;
+
+    const currentOffset = document.offsetAt(position);
+    const documentText = document.getText();
+    const match = matchOffset(STYLE_REG, documentText, currentOffset);
+
+    if (!match) return;
+
+    const matchContent = match.groups!.content;
+    const matchStartOffset = match.index + match.groups!.start.length;
+    const virtualOffset = currentOffset - matchStartOffset + 8; // accounting for :host { }
+    const virtualDocument = createVirtualDocument('css', `:host { ${removeSlot(matchContent)} }`);
+    const vCss = this.#cssLanguageService.parseStylesheet(virtualDocument);
+
+    const completions = this.#cssLanguageService.doComplete(
+      virtualDocument,
+      virtualDocument.positionAt(virtualOffset),
+      vCss,
+    );
+
+    return this.#cache.updateCached(document, position, translateCompletionList(completions, position));
+  }
+}

package/src/util.ts

@@ -0,0 +1,59 @@
+import { TextDocument } from 'vscode-html-languageservice';
+import { Position, Range } from 'vscode-languageserver/node';
+import type { CompletionItem } from 'vscode-languageserver/node';
+
+export function removeSlot(text: string) {
+  const v = text.replace(/\$\{[^${]*?\}/g, (str) => str.replaceAll(/[^\n]/g, 'x'));
+  if (v === text) return v;
+  return removeSlot(v);
+}
+
+export function removeHTMLSlot(text: string, position: number) {
+  const left = text.slice(0, position);
+  const right = text.slice(position);
+  const left1 = removeSlot(left);
+  // 处理在插槽中的情况，只保留光标附件的 html 标签
+  const left2 = left1.replace(/(.*(?=html`))/s, (str) => str.replaceAll(/[^\n]/g, ' '));
+  return left2 + removeSlot(right);
+}
+
+export function translateCompletionList(result: any, position: Position) {
+  const getRange = (item: CompletionItem): Range | undefined => {
+    if (item.textEdit && 'range' in item.textEdit) {
+      const { start, end } = item.textEdit.range;
+      return Range.create(
+        Position.create(position.line, start.character),
+        Position.create(position.line, end.character),
+      );
+    }
+  };
+
+  return {
+    ...result,
+    items: result?.items.map((item: CompletionItem) => ({
+      ...item,
+      textEdit: item.textEdit && {
+        ...item.textEdit,
+        range: getRange(item),
+      },
+    })),
+  };
+}
+export function matchOffset(regex: RegExp, docText: string, offset: number) {
+  regex.exec('null');
+
+  let match: RegExpExecArray | null;
+  while ((match = regex.exec(docText)) !== null) {
+    const [fullStr, startStr] = match;
+    const start = match.index + startStr.length;
+    const end = match.index + fullStr.length;
+    if (offset > start && offset < end) {
+      return match;
+    }
+  }
+  return null;
+}
+
+export function createVirtualDocument(languageId: string, content: string) {
+  return TextDocument.create(`embedded://document.${languageId}`, languageId, 1, content);
+}