ts-gem-plugin 0.0.1 → 0.0.6

package/dist/index.js

@@ -299,9 +299,13 @@ var HTMLDataProvider = class {
     const ts = this.#ts;
     const typeChecker = this.#getProgram().getTypeChecker();
     const node = this.#elements.get(tag);
-    if (!node) return [];
+    const result = [
+      { name: "v-if", description: "Similar to vue `v-if`" },
+      { name: "v-else-if", description: "Similar to vue `v-else-if`" },
+      { name: "v-else", description: "Similar to vue `v-else`", valueSet: "v" }
+    ];
+    if (!node) return result;
     const isDep = isDepElement(node);
-    const result = [];
     const props = typeChecker.getTypeAtLocation(node).getApparentProperties();
     props.forEach((e) => {
       const declaration = e.getDeclarations()?.at(0);
@@ -322,7 +326,7 @@ var HTMLDataProvider = class {
           result.push({ name: `?${e.name}`, description });
           break;
       }
-      if (getBasicUnionValues(declaration)) {
+      if (type && getUnionValues(type)) {
         result.push({ name: e.name, description });
       }
       if (typeText?.startsWith("Emitter")) {
@@ -345,31 +349,18 @@ var HTMLDataProvider = class {
     const node = this.#elements.get(tag);
     if (!node) return [];
     const prop = typeChecker.getTypeAtLocation(node).getProperty(getAttrName(attr).attr);
-    const declaration = prop?.getDeclarations()?.at(0);
-    const result = getBasicUnionValues(declaration);
+    const result = prop && getUnionValues(typeChecker.getTypeOfSymbol(prop));
     return result?.map((name) => ({ name })) || [];
   }
 };
-var STRING_REG = /("|')(?<str>.*)\1/;
-function getBasicUnionValues(node) {
-  const typeText = node?.type?.getText();
-  if (!typeText) return;
+function getUnionValues(type) {
+  if (!type.isUnion()) return;
   const result = [];
-  for (const text of typeText.split("|")) {
-    const t = text.trim();
-    if (!t) continue;
-    const number = Number(t);
-    if (!Number.isNaN(number)) {
-      result.push(t);
-      continue;
-    }
-    const match = t.match(STRING_REG);
-    if (!match) {
-      return;
-    }
-    result.push(match.groups.str);
-  }
-  if (result.length) return result;
+  type.types.forEach((e) => {
+    if (!e.isLiteral()) return;
+    result.push(String(e.value));
+  });
+  return result;
 }
 var COMMENT_LINE_CONTENT = /^(\/?[ *\t]*)?(?<str>.*?)(\**\/)?$/gm;
 function getDocComment(typescript, declaration) {
@@ -438,7 +429,7 @@ var Cache = class {
 // src/cache.ts
 var LRUCache = class {
   #bucket;
-  constructor(...args) {
+  constructor(args) {
     this.#bucket = new Cache({ max: 25, renewal: true, ...args });
   }
   #genKey(context, position) {
@@ -508,6 +499,11 @@ var Context = class {
     return this.#virtualHtmlCache.get({ text, fileName: "" }, void 0, () => {
       const vDoc = createVirtualDocument("html", text);
       const vHtml = this.htmlLanguageService.parseHTMLDocument(vDoc);
+      vHtml.roots.forEach(function transform(e, index, arr) {
+        e.prev = arr[index - 1];
+        e.next = arr[index + 1];
+        e.children.forEach(transform);
+      });
       return { vDoc, vHtml };
     });
   }
@@ -549,12 +545,34 @@ var Context = class {
       const name = symbol.escapedName.toString();
       const match = name.match(/^(SVG|HTML)(\w*)Element$/);
       const declaration = symbol.declarations?.find((e) => this.ts.isInterfaceDeclaration(e));
-      if (match && declaration) {
-        this.builtInElements.set(camelToKebabCase(match[2]), declaration);
+      if (!match || !declaration) return;
+      if (name in partialBuiltInElementMap) {
+        partialBuiltInElementMap[name].forEach((e) => this.builtInElements.set(e, declaration));
+      } else {
+        this.builtInElements.set(match[2].toLowerCase(), declaration);
       }
     });
   }
 };
+var partialBuiltInElementMap = {
+  SVGAElement: [],
+  HTMLAnchorElement: ["a"],
+  SVGImageElement: [],
+  HTMLImageElement: ["img"],
+  SVGStyleElement: [],
+  HTMLStyleElement: ["style"],
+  HTMLDListElement: ["dl"],
+  HTMLOListElement: ["ol"],
+  HTMLUListElement: ["ul"],
+  HTMLHeadingElement: ["h1", "h2", "h3", "h4", "h5", "h6"],
+  HTMLModElement: ["del", "ins"],
+  HTMLQuoteElement: ["blockquote", "q", "cite"],
+  HTMLTableCaptionElement: ["caption"],
+  HTMLTableCellElement: ["th", "td"],
+  HTMLTableColElement: ["col"],
+  HTMLTableRowElement: ["tr"],
+  HTMLTableSectionElement: ["thead", "tfoot", "tbody"]
+};
 function createVirtualDocument(languageId, content) {
   return import_vscode_html_languageservice2.TextDocument.create(`embedded://document.${languageId}`, languageId, 1, content);
 }
@@ -755,6 +773,21 @@ function genAttrDefinitionInfo(context, { start, length }, propDeclaration) {
     ]
   };
 }
+function genCurrentCtxDefinitionInfo(context, { start, length }, definitionTextSpan) {
+  return {
+    textSpan: { start, length },
+    definitions: [
+      {
+        containerName: "Attribute",
+        containerKind: context.typescript.ScriptElementKind.unknown,
+        name: context.text.slice(start, start + length),
+        kind: context.typescript.ScriptElementKind.memberVariableElement,
+        fileName: context.fileName,
+        textSpan: definitionTextSpan
+      }
+    ]
+  };
+}
 
 // src/decorate-css.ts
 var CSSLanguageService = class {
@@ -992,7 +1025,9 @@ var HTMLLanguageService = class {
       if (!tagDeclaration) return;
       for (const [attributeName, { value, start, end }] of node.attributesMap) {
         if (attributeName.startsWith("_")) continue;
+        const hasValueSpan = value?.startsWith("_");
         const attrInfo = getAttrName(attributeName);
+        const propType = getPropType(typeChecker, tagDeclaration, attrInfo);
         const diagnostic = {
           category: context.typescript.DiagnosticCategory.Warning,
           file,
@@ -1000,9 +1035,28 @@ var HTMLLanguageService = class {
           length: end - start,
           source: NAME,
           code: 103 /* PropTypeError */,
-          messageText: `'${attributeName}' type error`
+          messageText: !propType ? `'${attributeName}' type error` : `'${attributeName}' not satisfied '${typeChecker.typeToString(propType)}'`
         };
-        const propType = getPropType(typeChecker, tagDeclaration, attrInfo);
+        if ((attributeName === "v-else-if" || attributeName === "v-else") && !node.prev?.attributesMap.has("v-if") && !node.prev?.attributesMap.has("v-else-if")) {
+          diagnostics.push({
+            ...diagnostic,
+            code: 104 /* PropSyntaxError */,
+            messageText: `'${attrInfo.attr}' syntax error`
+          });
+        }
+        if (attributeName === "v-if" || attributeName === "v-else-if") {
+          const spanType = getSpanType(this.#ctx.ts, typeChecker, file, offset, end);
+          if (!hasValueSpan || !typeChecker.isTypeAssignableTo(spanType, typeChecker.getBooleanType())) {
+            diagnostics.push(diagnostic);
+          }
+          continue;
+        }
+        if (attributeName === "v-else") {
+          if (value !== null) {
+            diagnostics.push(diagnostic);
+          }
+          continue;
+        }
         if (!propType) {
           if (attrInfo.decorate !== "@") {
             diagnostics.push({
@@ -1025,10 +1079,8 @@ var HTMLLanguageService = class {
           }
           continue;
         }
-        if (value.startsWith("_")) {
-          const valueOffset = end + offset + 3;
-          const spanExp = getSpanExpression(this.#ctx.ts, file, valueOffset);
-          const spanType = typeChecker.getTypeAtLocation(spanExp);
+        if (hasValueSpan) {
+          const spanType = getSpanType(this.#ctx.ts, typeChecker, file, offset, end);
           switch (attrInfo.decorate) {
             case "?":
               const boolType = getUnionType(typeChecker, [
@@ -1085,7 +1137,7 @@ var HTMLLanguageService = class {
     const node = vHtml.findNodeAt(currentOffset);
     const { text, start, length, before } = getHTMLTextAtPosition(context.text, currentOffset);
     const empty = { textSpan: { start, length } };
-    if (node.tag === "style") {
+    if (node.tag === "style" && currentOffset > node.startTagEnd) {
       const { style, vDoc, position: pos } = this.#getEmbeddedCss(context, position, vHtml);
       const cssNode = style.findChildAtOffset(vDoc.offsetAt(pos), true);
       if (!cssNode) return empty;
@@ -1105,6 +1157,15 @@ var HTMLLanguageService = class {
     }
     const { attr, offset } = getAttrName(text);
     if (before.length > attr.length) return empty;
+    if (attr === "v-else" || attr === "v-else-if") {
+      const ifAttr = node.prev?.attributesMap.get("v-if") || node.prev?.attributesMap.get("v-else-if");
+      if (!ifAttr) return empty;
+      return genCurrentCtxDefinitionInfo(
+        context,
+        { start: start + offset, length: attr.length },
+        { start: ifAttr.start, length: ifAttr.end - ifAttr.start }
+      );
+    }
     const typeChecker = this.#ctx.getProgram().getTypeChecker();
     const propSymbol = typeChecker.getTypeAtLocation(definitionNode).getProperty(kebabToCamelCase(attr));
     const propDeclaration = propSymbol?.getDeclarations()?.at(0);
@@ -1120,8 +1181,16 @@ function getSpanExpression(typescript, file, pos) {
   }
   return node.expression;
 }
+function getSpanType(typescript, typeChecker, file, htmlOffset, attrNameEnd) {
+  const valueOffset = attrNameEnd + htmlOffset + 3;
+  const spanExp = getSpanExpression(typescript, file, valueOffset);
+  return typeChecker.getTypeAtLocation(spanExp);
+}
 function getPropType(typeChecker, tagClassDeclaration, attrInfo) {
   const classType = typeChecker.getTypeAtLocation(tagClassDeclaration);
+  if (attrInfo.attr.startsWith("data-")) {
+    return typeChecker.getStringType();
+  }
   const propName = kebabToCamelCase(attrInfo.attr);
   switch (propName) {
     case "class":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-gem-plugin",
-  "version": "0.0.1",
+  "version": "0.0.6",
   "description": "Typescript language service plugin for Gem",
   "keywords": [
     "gem",
@@ -18,7 +18,7 @@
     "@mantou/typescript-template-language-service-decorator": "^2.3.4",
     "@mantou/vscode-css-languageservice": "^6.3.3",
     "@mantou/vscode-emmet-helper": "^2.9.3",
-    "@mantou/vscode-html-languageservice": "^5.3.3",
+    "@mantou/vscode-html-languageservice": "^5.3.4",
     "duoyun-ui": "^2.2.0",
     "vscode-languageserver-textdocument": "^1.0.12",
     "vscode-languageserver-types": "^3.17.5"