ts-gem-plugin 0.0.9 → 0.0.12

package/dist/index.js

@@ -27,6 +27,26 @@ var import_typescript_template_language_service_decorator = require("@mantou/typ
 
 // ../gem/lib/utils.js
 var { assign, fromEntries, entries, keys } = Object;
+function queueMicrotask(cb) {
+  Promise.resolve().then(cb);
+}
+var microtaskSet = /* @__PURE__ */ new Set();
+function addMicrotask(func, method = queueMicrotask) {
+  if (microtaskSet.has(func))
+    return;
+  method(() => {
+    microtaskSet.delete(func);
+    func();
+  });
+  microtaskSet.add(func);
+}
+function createUpdater(initState, fn) {
+  const state = fn;
+  delete state.name;
+  delete state.length;
+  assign(state, initState);
+  return state;
+}
 var LinkedList = class extends EventTarget {
   #map = /* @__PURE__ */ new Map();
   #firstItem;
@@ -101,6 +121,10 @@ var LinkedList = class extends EventTarget {
     }
     return deleteItem;
   }
+  clear() {
+    this.#map.clear();
+    this.#firstItem = this.#lastItem = void 0;
+  }
   /** 获取头部元素，会从链表删除 */
   get() {
     const firstItem = this.#firstItem;
@@ -117,8 +141,25 @@ function kebabToCamelCase(str) {
   return str.replace(/-(.)/g, (_substr, $1) => $1.toUpperCase());
 }
 
+// ../gem/lib/store.js
+var _StoreListenerMap = /* @__PURE__ */ new WeakMap();
+function createStore(originStore) {
+  const store = createUpdater(originStore, (value) => {
+    Object.assign(store, value);
+    _StoreListenerMap.get(store)?.forEach((func) => addMicrotask(func));
+  });
+  _StoreListenerMap.set(store, /* @__PURE__ */ new Set());
+  return store;
+}
+function connect(store, func) {
+  const listeners = _StoreListenerMap.get(store);
+  listeners?.add(func);
+  return () => listeners?.delete(func);
+}
+
 // src/configuration.ts
 var defaultConfiguration = {
+  strict: false,
   emmet: {},
   elementDefineRules: {
     "Duoyun*Element": "dy-*",
@@ -140,26 +181,27 @@ var Rules = class {
     }
   }
 };
+var configurationStore = createStore({});
+function onConfigurationUpdate(fn) {
+  return connect(configurationStore, fn);
+}
 var Configuration = class {
-  #emmet = defaultConfiguration.emmet;
-  #elementDefineRules = new Rules(defaultConfiguration.elementDefineRules);
-  update(config) {
-    this.#emmet = config.emmet || defaultConfiguration.emmet;
-    this.#elementDefineRules = new Rules({
+  strict = defaultConfiguration.strict;
+  emmet = defaultConfiguration.emmet;
+  elementDefineRules = new Rules(defaultConfiguration.elementDefineRules);
+  update({ update, ...config }) {
+    Object.assign(this, defaultConfiguration, config);
+    this.elementDefineRules = new Rules({
       ...defaultConfiguration.elementDefineRules,
       ...config.elementDefineRules
     });
-  }
-  get emmet() {
-    return this.#emmet;
-  }
-  get elementDefineRules() {
-    return this.#elementDefineRules;
+    configurationStore();
   }
 };
 
 // src/constants.ts
 var NAME = "gem-plugin";
+var HTML_SUBSTITUTION_CHAR = "_";
 var Decorators = {
   Attr: "attribute",
   NumAttr: "numattribute",
@@ -168,6 +210,7 @@ var Decorators = {
   Emitter: "emitter",
   GlobalEmitter: "globalemitter",
   AdoptedStyle: "adoptedStyle",
+  Shadow: "shadow",
   CustomElement: "customElement",
   Part: "part",
   Slot: "slot"
@@ -279,6 +322,11 @@ var Cache = class {
     this.#addedLinked.add(value);
     return value;
   }
+  clear() {
+    this.#map.clear();
+    this.#reverseMap.clear();
+    this.#addedLinked.clear();
+  }
 };
 
 // src/cache.ts
@@ -293,6 +341,9 @@ var LRUCache = class {
   get(context, position, init) {
     return this.#bucket.get(this.#genKey(context, position), init);
   }
+  clear() {
+    this.#bucket.clear?.();
+  }
 };
 
 // src/data-provider.ts
@@ -318,6 +369,16 @@ function forEachNode(roots, fn) {
     list.push(..."getChildren" in currentNode ? currentNode.getChildren() : currentNode.children);
   }
 }
+function hasDecorator(typescript, node, decorates) {
+  return node.modifiers?.some(
+    (modifier) => typescript.isDecorator(modifier) && typescript.isIdentifier(modifier.expression) && (!decorates || decorates.includes(modifier.expression.text))
+  );
+}
+function hasCallDecorator(typescript, node, decorates) {
+  return node.modifiers?.some(
+    (modifier) => typescript.isDecorator(modifier) && typescript.isCallExpression(modifier.expression) && (!decorates || decorates.includes(modifier.expression.expression.getText()))
+  );
+}
 function getTemplateNode(typescript, node) {
   if (typescript.isTaggedTemplateExpression(node)) return node.template;
   if (typescript.isTemplateExpression(node)) return node;
@@ -469,7 +530,7 @@ var HTMLDataProvider = class {
       const declaration = e.getDeclarations()?.at(0);
       const prop = declaration && ts.isPropertyDeclaration(declaration);
       if (!prop) return;
-      const hasPropDecorator = declaration.modifiers?.some((m) => ts.isDecorator(m) && ts.isIdentifier(m.expression));
+      const hasPropDecorator = hasDecorator(ts, declaration);
       if (!hasPropDecorator && !isDep) return;
       const type = declaration.type && typeChecker.getTypeFromTypeNode(declaration.type);
       const typeText = declaration.type?.getText();
@@ -644,7 +705,7 @@ var Context = class {
       const vHtml = this.htmlLanguageService.parseHTMLDocument(vDoc);
       const tagNodeMap = new NodeMap();
       const classIdNodeMap = new NodeMap();
-      vHtml.roots.forEach(function process2(e, index, arr) {
+      vHtml.roots.forEach(function process(e, index, arr) {
         e.prev = arr[index - 1];
         e.next = arr[index + 1];
         e.tag && tagNodeMap.add(e.tag, e);
@@ -667,7 +728,7 @@ var Context = class {
             });
           });
         }
-        e.children.forEach(process2);
+        e.children.forEach(process);
       });
       return { vDoc, vHtml, tagNodeMap, classIdNodeMap };
     });
@@ -801,7 +862,7 @@ function createVirtualDocument(languageId, content) {
   return import_vscode_html_languageservice2.TextDocument.create(`embedded://document.${languageId}`, languageId, 1, content);
 }
 function getSubstitution(templateString, start, end) {
-  return templateString.slice(start, end).replaceAll(/[^\n]/g, "_");
+  return templateString.slice(start, end).replaceAll(/[^\n]/g, HTML_SUBSTITUTION_CHAR);
 }
 function isValidCSSTemplate(typescript, node, callName) {
   switch (node.kind) {
@@ -1067,6 +1128,7 @@ var CSSLanguageService = class {
   #ctx;
   constructor(ctx) {
     this.#ctx = ctx;
+    onConfigurationUpdate(() => this.#diagnosticsCache.clear());
   }
   #normalize(context, position) {
     const parent = context.node.parent;
@@ -1117,20 +1179,40 @@ var CSSLanguageService = class {
   #getSyntacticDiagnostics(context) {
     const { text, offset } = this.#normalize(context, { line: 0, character: 0 });
     const { vDoc, vCss } = this.#ctx.getCssDoc(text);
+    const result = [];
     const oDiagnostics = this.#ctx.cssLanguageService.doValidation(vDoc, vCss);
     const file = this.#ctx.getProgram().getSourceFile(context.fileName);
-    return oDiagnostics.map(({ message, range }) => {
+    const baseDiagnostic = { code: 0, file, source: NAME, category: context.typescript.DiagnosticCategory.Warning };
+    if (this.#ctx.config.strict) {
+      const scopeSelectors = /* @__PURE__ */ new Set([":host", ":scope", "&"]);
+      vCss.getChildren().forEach((rule) => {
+        if (rule.type !== import_vscode_css_languageservice2.NodeType.Ruleset) return;
+        const [selectors, declarations] = rule.getChildren();
+        const isScopeSelector = selectors?.getChildren().every((s) => scopeSelectors.has(s.getText()));
+        if (!isScopeSelector) return;
+        declarations.getChildren().forEach((decl) => {
+          const [property] = decl.getChildren();
+          if (property?.getText() === "display") {
+            result.push({
+              ...baseDiagnostic,
+              start: property.offset,
+              length: property.length,
+              messageText: `Do not set 'display' directly in '${selectors.getText()}', which will cause the 'hidden' attribute to be unavailable`
+            });
+          }
+        });
+      });
+    }
+    oDiagnostics.forEach(({ message, range }) => {
       const start = context.toOffset(range.start);
-      return {
-        category: context.typescript.DiagnosticCategory.Warning,
-        code: 0,
-        file,
+      result.push({
+        ...baseDiagnostic,
         start: range.start.line === 0 ? start - offset : start,
         length: context.toOffset(range.end) - start,
-        messageText: message,
-        source: NAME
-      };
+        messageText: message
+      });
     });
+    return result;
   }
   getSyntacticDiagnostics(context) {
     this.#ctx.initElements();
@@ -1345,36 +1427,44 @@ var HTMLLanguageService = class {
   }
   #getHtmlSemanticDiagnostics(context) {
     const offset = context.node.getStart() + 1;
+    const templateTag = context.node.parent.tag?.getText();
     const { vHtml } = this.#ctx.getHtmlDoc(context.text);
     const program = this.#ctx.getProgram();
     const file = program.getSourceFile(context.fileName);
     const typeChecker = program.getTypeChecker();
     const diagnostics = [];
+    const baseDiagnostic = { file, source: NAME };
     forEachNode(vHtml.roots, (node) => {
       if (!node.tag) return;
       const customElementTagDecl = this.#ctx.elements.get(node.tag);
       const builtInElementTagDecl = this.#ctx.builtInElements.get(node.tag);
+      const baseTagDiagnostic = { ...baseDiagnostic, start: node.start + 1, length: node.tag.length };
+      if (this.#ctx.config.strict && templateTag !== "raw" && node.tag === "style") {
+        diagnostics.push({
+          ...baseTagDiagnostic,
+          category: context.typescript.DiagnosticCategory.Warning,
+          code: 106 /* NoStyleTag */,
+          messageText: `Use 'adoptedStyle' or 'createDecoratorTheme' instead of the style tag`
+        });
+      }
       if (isCustomElementTag(node.tag) && !customElementTagDecl) {
         diagnostics.push({
+          ...baseTagDiagnostic,
           category: context.typescript.DiagnosticCategory.Warning,
           code: 101 /* UnknownTag */,
-          file,
-          start: node.start + 1,
-          length: node.tag.length,
-          messageText: `Unknown element tag '${node.tag}'`,
-          source: NAME
+          messageText: `Unknown element tag '${node.tag}'`
         });
       }
       const tagDeclaration = customElementTagDecl || builtInElementTagDecl;
       if (!tagDeclaration) return;
+      const classType = typeChecker.getTypeAtLocation(tagDeclaration);
+      const isSVG = builtInElementTagDecl?.name.getText().startsWith("SVG");
       if (tagDeclaration.name && isDeprecate(typeChecker.getSymbolAtLocation(tagDeclaration.name))) {
-        [node.start + 1, node.endTagStart && node.endTagStart + 2].forEach((tagStart) => {
-          tagStart && diagnostics.push({
-            category: context.typescript.DiagnosticCategory.Suggestion,
-            file,
+        [node.start + 1, node.endTagStart && node.endTagStart + 2].filter(isNotNullish).forEach((tagStart) => {
+          diagnostics.push({
+            ...baseTagDiagnostic,
             start: tagStart,
-            length: node.tag.length,
-            source: NAME,
+            category: context.typescript.DiagnosticCategory.Suggestion,
             code: 105 /* Deprecated */,
             messageText: `Deprecated tag '${node.tag}'`,
             reportsDeprecated: "true"
@@ -1382,30 +1472,45 @@ var HTMLLanguageService = class {
         });
       }
       for (const [attributeName, { value, start, end }] of node.attributesMap) {
-        if (attributeName.startsWith("_")) continue;
-        const hasValueSpan = value?.startsWith("_");
+        if (attributeName.startsWith(HTML_SUBSTITUTION_CHAR)) continue;
+        const hasValueSpan = value?.startsWith(HTML_SUBSTITUTION_CHAR);
         const attrInfo = getAttrName(attributeName);
-        const propType = getPropType(typeChecker, tagDeclaration, !customElementTagDecl, attrInfo, () => {
+        const propName = getPropName(attrInfo, !!builtInElementTagDecl);
+        const propType = getPropType(typeChecker, classType, propName, attrInfo.decorate === "@");
+        const attrBaseDiagnostic = { ...baseDiagnostic, start, length: end - start };
+        if (isDeprecate(classType.getProperty(propName))) {
           diagnostics.push({
+            ...attrBaseDiagnostic,
             category: context.typescript.DiagnosticCategory.Suggestion,
-            file,
-            start,
-            length: end - start,
-            source: NAME,
             code: 105 /* Deprecated */,
             messageText: `Deprecated prop '${attrInfo.attr}'`,
             reportsDeprecated: "true"
           });
-        });
+        }
         const diagnostic = {
+          ...attrBaseDiagnostic,
           category: context.typescript.DiagnosticCategory.Warning,
-          file,
-          start,
-          length: end - start,
-          source: NAME,
           code: 103 /* PropTypeError */,
           messageText: !propType ? `'${attributeName}' type error` : `'${attributeName}' not satisfied '${typeChecker.typeToString(propType)}'`
         };
+        if (templateTag === "raw") {
+          if (attrInfo.decorate) {
+            diagnostics.push({
+              ...diagnostic,
+              code: 104 /* PropSyntaxError */,
+              messageText: `Raw HTML templates only support attributes`
+            });
+            continue;
+          }
+          if (hasValueSpan) {
+            diagnostics.push({
+              ...diagnostic,
+              code: 104 /* PropSyntaxError */,
+              messageText: `Please wrap the raw html template attribute value with "" to avoid parsing errors when the value is an empty string`
+            });
+            continue;
+          }
+        }
         if ((attributeName === "v-else-if" || attributeName === "v-else") && !node.prev?.attributesMap.has("v-if") && !node.prev?.attributesMap.has("v-else-if")) {
           diagnostics.push({
             ...diagnostic,
@@ -1427,7 +1532,10 @@ var HTMLLanguageService = class {
           }
           continue;
         }
-        if (attrInfo.decorate === "" && attributeName !== camelToKebabCase(attrInfo.attr)) {
+        if (
+          // SVG 大小写敏感
+          !isSVG && attrInfo.decorate === "" && attributeName !== camelToKebabCase(attrInfo.attr)
+        ) {
           diagnostics.push({
             ...diagnostic,
             code: 2552 /* AttrFormatError */,
@@ -1436,8 +1544,10 @@ var HTMLLanguageService = class {
           continue;
         }
         if (!propType) {
-          if (attrInfo.decorate !== "@" && // SVG 元素有很多 css 属性，所以不检查
-          !builtInElementTagDecl?.name.getText().startsWith("SVG")) {
+          if (
+            // SVG 元素有很多 css 属性，所以不检查
+            !isSVG && attrInfo.decorate !== "@"
+          ) {
             diagnostics.push({
               ...diagnostic,
               code: 102 /* UnknownProp */,
@@ -1489,7 +1599,11 @@ var HTMLLanguageService = class {
               }
               continue;
             default: {
-              const nullablePropType = getUnionType(typeChecker, [propType, typeChecker.getNullType()]);
+              const nullablePropType = getUnionType(typeChecker, [
+                propType,
+                typeChecker.getNullType(),
+                typeChecker.getUndefinedType()
+              ]);
               if (!typeChecker.isTypeAssignableTo(spanType, nullablePropType) && (!typeChecker.isTypeAssignableTo(propType, typeChecker.getStringType()) || !typeChecker.isTypeAssignableTo(spanType, typeChecker.getStringType()))) {
                 diagnostics.push(diagnostic);
               }
@@ -1680,12 +1794,16 @@ var globalEnumeratedBooleanAttr = /* @__PURE__ */ new Map([
   ["spellcheck", []],
   ["contenteditable", ["plaintext-only"]]
 ]);
-function getPropType(typeChecker, tagClassDeclaration, isBuiltInTag, attrInfo, reportDeprecate) {
-  const classType = typeChecker.getTypeAtLocation(tagClassDeclaration);
+function getPropName(attrInfo, isNativeTag) {
   if (attrInfo.attr.startsWith("data-")) {
+    return attrInfo.attr;
+  }
+  return globalAttrPropMap.get(attrInfo.attr) || (isNativeTag ? buildInElementNoGlobalAttrPropMap.get(attrInfo.attr) || kebabToCamelCase(attrInfo.attr) : kebabToCamelCase(attrInfo.attr));
+}
+function getPropType(typeChecker, classType, propName, isEvent) {
+  if (propName.startsWith("data-")) {
     return typeChecker.getStringType();
   }
-  const propName = globalAttrPropMap.get(attrInfo.attr) || (isBuiltInTag ? buildInElementNoGlobalAttrPropMap.get(attrInfo.attr) || kebabToCamelCase(attrInfo.attr) : kebabToCamelCase(attrInfo.attr));
   switch (propName) {
     case "class":
     case "style":
@@ -1718,9 +1836,7 @@ function getPropType(typeChecker, tagClassDeclaration, isBuiltInTag, attrInfo, r
         typeChecker.getUndefinedType()
       ]);
     default: {
-      const isEvent = attrInfo.decorate === "@";
       const propSymbol = classType.getProperty(propName);
-      if (isDeprecate(propSymbol)) reportDeprecate();
       const propType = propSymbol && typeChecker.getTypeOfSymbol(propSymbol);
       if (!isEvent) return propType;
       const eventHandleType = getEmitterHandleType(typeChecker, classType, propType);
@@ -1805,19 +1921,45 @@ function decorateLanguageService(ctx, languageService) {
     ts.forEachChild(file, (node) => {
       const tag = ctx.getTagFromNode(node);
       if (tag && ts.isClassDeclaration(node)) {
+        if (node.name && !node.name.text.endsWith("Element")) {
+          result.push({
+            file,
+            start: node.name.getStart(),
+            length: node.name.getEnd() - node.name.getStart(),
+            category: ctx.config.strict ? ts.DiagnosticCategory.Warning : ts.DiagnosticCategory.Suggestion,
+            code: 108 /* SuggestionClassName */,
+            messageText: "Element definition class suggests the suffix to use `Element`"
+          });
+        }
+        const isShadowDom = hasCallDecorator(ts, node, [Decorators.Shadow]);
         node.members.forEach((member) => {
+          const memberStart = member.getStart();
+          const baseMemberDiagnostic = { file, start: memberStart, length: member.getEnd() - memberStart };
+          if (ctx.config.strict && member.name && ts.isIdentifier(member.name) && member.name.text.length > 3 && member.name.text === member.name.text.toLowerCase() && member.name.text.startsWith("on")) {
+            result.push({
+              ...baseMemberDiagnostic,
+              category: ts.DiagnosticCategory.Warning,
+              code: 110 /* SuggestionPropName */,
+              messageText: "Consider changing the name, it looks too much like the html event handler"
+            });
+          }
           if (!ts.isPropertyDeclaration(member) || !member.modifiers) return;
-          const shouldIsStatic = member.modifiers.some(
-            (modifier) => ts.isDecorator(modifier) && ts.isIdentifier(modifier.expression) && [Decorators.Slot, Decorators.Part].includes(modifier.expression.text)
-          );
-          if (shouldIsStatic && member.modifiers.every((e) => e.kind !== ts.SyntaxKind.StaticKeyword)) {
+          if (hasDecorator(ts, member, [Decorators.Prop]) && !member.questionToken && !member.initializer) {
             result.push({
-              file,
-              start: member.getStart(),
-              length: member.getEnd() - member.getStart(),
+              ...baseMemberDiagnostic,
+              category: ctx.config.strict ? ts.DiagnosticCategory.Warning : ts.DiagnosticCategory.Suggestion,
+              code: 109 /* SuggestionPropOptional */,
+              messageText: "Custom element property should be optional"
+            });
+          }
+          if (!hasDecorator(ts, member, [Decorators.Slot, Decorators.Part])) return;
+          const missStaticKeyword = member.modifiers.every((e) => e.kind !== ts.SyntaxKind.StaticKeyword);
+          if (missStaticKeyword || !isShadowDom) {
+            result.push({
+              ...baseMemberDiagnostic,
               category: ts.DiagnosticCategory.Warning,
-              code: 2552 /* DecoratorSyntaxError */,
-              messageText: "Use static field for `@part` and `@slot`"
+              code: 107 /* DecoratorSyntaxError */,
+              messageText: missStaticKeyword ? "Use static field for `@part` and `@slot`" : "Not available on light dom `@part` and `@slot`"
             });
           }
         });
@@ -1826,10 +1968,15 @@ function decorateLanguageService(ctx, languageService) {
     return result.filter(({ start, reportsUnnecessary, category }) => {
       if (!reportsUnnecessary || category !== ts.DiagnosticCategory.Suggestion) return true;
       const node = getAstNodeAtPosition(ts, file, start);
-      if (!node || !ts.isPrivateIdentifier(node)) return true;
-      const declaration = node.parent;
-      if (!ts.isMethodDeclaration(declaration) && !ts.isPropertyDeclaration(declaration)) return true;
-      return !declaration.modifiers?.some((e) => e?.kind === ts.SyntaxKind.Decorator);
+      const declaration = node?.parent;
+      if (!declaration) return true;
+      if (ts.isClassDeclaration(declaration)) {
+        return !hasCallDecorator(ts, declaration, [Decorators.CustomElement]);
+      }
+      if (ts.isMethodDeclaration(declaration) || ts.isPropertyDeclaration(declaration)) {
+        return !declaration.modifiers?.some((e) => e?.kind === ts.SyntaxKind.Decorator);
+      }
+      return true;
     });
   };
   languageService.findReferences = (...args) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-gem-plugin",
-  "version": "0.0.9",
+  "version": "0.0.12",
   "description": "Typescript language service plugin for Gem",
   "keywords": [
     "gem",
@@ -14,17 +14,17 @@
     "prepublishOnly": "pnpm run build"
   },
   "dependencies": {
-    "@mantou/gem": "^2.2.1",
+    "@mantou/gem": "^2.2.4",
     "@mantou/typescript-template-language-service-decorator": "^2.3.6",
     "@mantou/vscode-css-languageservice": "^6.3.6",
     "@mantou/vscode-emmet-helper": "^2.9.3",
     "@mantou/vscode-html-languageservice": "^5.3.6",
-    "duoyun-ui": "^2.2.1",
+    "duoyun-ui": "^2.2.3",
     "vscode-languageserver-textdocument": "^1.0.12",
     "vscode-languageserver-types": "^3.17.5"
   },
   "devDependencies": {
-    "@gemjs/config": "^2.1.1",
+    "@gemjs/config": "^2.1.3",
     "typescript": "^5.6.2"
   },
   "author": "mantou132",