custom elements are now declared in settings.json

Author: emmanuelyoussefyoussef

README.md

@@ -174,14 +174,46 @@ Core validation and parsing classes:
 
 - `CustomElement` - The central class of the project that handles custom element processing and validation. To add custom attributes for a specific tag, please add it here in the right place in the hierarchie.
 
+## Add Custom Elements
+
+- `To add a custom elements:`
+
+- Search `customtags` or `Cntr + , then search customtags` then add an element with the following structure
+
+`Valid example`
+
+```Text
+"html-css-template-validator.customTags": [
+        {
+            "name": "input",
+            "description": "demo",
+            "attributes": [
+                {"name": ".checked", "description": "demo"},
+                {"name": "a-valid-attribut-for-input", "description": "demo2"}
+        ] //Make sure to add all Attributes to the Tag and do not add single Attribute to single Tag.
+          // for each Tag is only one declaration valid do not create more than one
+        },
+
+```
+
+`Invalid example`
+
 ```Text
-{
-  name: 'input',
-  description: 'Custom web component',
-  attributes: [
-    { name: 'a-random-valid-tag-only-for-input', description: 'Custom attribute' }
-  ]
-}, ...
+"html-css-template-validator.customTags": [
+        {
+            "name": "input",
+            "description": "demo",
+            "attributes": [
+                {"name": ".checked", "description": "demo"}
+        ]
+        },
+        {
+            "name": "input",
+            "description": "demo",
+            "attributes": [
+                {"name": "a-valid-attribut-for-input", "description": "demo2"}
+        ]
+        },
 
 ```
 

package.json

@@ -14,6 +14,39 @@
   ],
   "main": "./out/extension.js",
   "contributes": {
+    "configuration": {
+      "title": "Html-Css Template Validator",
+      "properties": {
+        "html-css-template-validator.customTags": {
+          "type": "array",
+          "default": [],
+          "scope": "resource",
+          "description": "Custom tags + attributes (leer = keine Custom-Regeln).",
+          "items": {
+            "type": "object",
+            "required": ["name", "attributes"],
+            "additionalProperties": false,
+            "properties": {
+              "name": { "type": "string" },
+              "description": { "type": "string", "default": "" },
+              "attributes": {
+                "type": "array",
+                "default": [],
+                "items": {
+                  "type": "object",
+                  "required": ["name"],
+                  "additionalProperties": false,
+                  "properties": {
+                    "name": { "type": "string" },
+                    "description": { "type": "string", "default": "" }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     "grammars": [
       {
         "injectTo": [

src/class/HtmlValidator.ts

@@ -10,20 +10,25 @@ import { IHtmlValidator } from "../interface/IHtmlValidator";
 
 type Parse5 = typeof import("parse5", { with: { "resolution-mode": "import" } });
 const htmlLanguageService = htmlService.getDefaultHTMLDataProvider();
-const customHtmlElements = new CustomElement();
 
 export class HtmlValidator implements IHtmlValidator {
 
   private validTagNames: Set<string>;
   private ps: Parse5;
   private document: vscode.TextDocument;
+  private customHtmlElements: CustomElement;
   diagnosticCollection: vscode.Diagnostic[];
 
-  constructor(ps: Parse5,document: vscode.TextDocument,diagnosticCollection: vscode.Diagnostic[]) {
+  constructor(ps: Parse5,document: vscode.TextDocument,diagnosticCollection: vscode.Diagnostic[],userConfig: vscode.WorkspaceConfiguration) {
     this.ps = ps;
     this.document = document;
     this.diagnosticCollection = diagnosticCollection;
+    
+    this.customHtmlElements = new CustomElement(userConfig);
+
     this.validTagNames = new Set(htmlLanguageService.provideTags().map(t => t.name));
+      for (const t of this.customHtmlElements.provideTags()) this.validTagNames.add(t.name);
+    
   }
 
   validate(htmlTemplateArray: Array<{ htmlTemplate: HtmlTagTemplate }>): void {
@@ -76,7 +81,7 @@ export class HtmlValidator implements IHtmlValidator {
     );
 
     const customValidAttributeNames = new Set(
-      customHtmlElements.provideAttributes(tagName).map(t => t.name)
+      this.customHtmlElements.provideAttributes(tagName).map(t => t.name)
     );
 
     return validAttributeNames.has(attributeName) || 

src/class/customElement.ts

@@ -1,24 +1,50 @@
 import { IHTMLDataProvider, ITagData, IAttributeData, IValueData } from 'vscode-html-languageservice';
+import * as vscode from "vscode"
 
+type CustomTagSetting = {
+  name: string;
+  description?: string;
+  attributes?: Array<{ name: string; description?: string }>;
+};
+
+function normalizeCustomTags(raw: unknown): ITagData[] {
+  if (!Array.isArray(raw)) return [];
+
+  return raw
+    .filter((t): t is CustomTagSetting => !!t && typeof (t as any).name === "string")
+    .map((t) => {
+      const attributesRaw = Array.isArray(t.attributes) ? t.attributes : [];
+      const attributes: IAttributeData[] = attributesRaw
+        .filter((a) => a && typeof (a as any).name === "string")
+        .map((a) => ({
+          name: String(a.name),
+          description: typeof a.description === "string" ? a.description : ""
+        }));
+
+      return {
+        name: String(t.name),
+        description: typeof t.description === "string" ? t.description : "",
+        attributes
+      };
+    });
+}
+
+function mergeTagsByName(defaults: ITagData[], user: ITagData[]): ITagData[] {
+  const map = new Map<string, ITagData>();
+  for (const t of defaults) map.set(t.name, t);
+  for (const t of user) map.set(t.name, t); // user überschreibt defaults bei gleichem Namen
+  return [...map.values()];
+}
 // Eigener Data Provider
 class CustomElement implements IHTMLDataProvider {
-  private customTags: ITagData[] = [
-    {
-      name: 'input',
-      description: 'Custom web component',
-      attributes: [
-        { name: '.checked', description: 'Custom attribute' },
-        { name: 'a-valid-attribut-for-input', description: 'Custom attribute' }
-      ]
-    },
-    {
-      name: 'img',
-      description: 'Custom web component',
-      attributes: [
-        { name: 'a-valid-attribut-for-img', description: 'Custom attribute' }
-      ]
-    }
-  ];
+  
+  private customTags: ITagData[];
+  
+  constructor(userConfig?: vscode.WorkspaceConfiguration) {
+      const cfg = userConfig ?? vscode.workspace.getConfiguration("html-css-template-validator");
+      const raw = cfg.get<unknown>("customTags", []);
+      this.customTags = normalizeCustomTags(raw);
+  }
 
   getId(): string {
     return 'custom-html-provider';
@@ -33,12 +59,7 @@ class CustomElement implements IHTMLDataProvider {
   }
 
   provideAttributes(tag: string): IAttributeData[] {
-    const tagData = this.customTags.find(t => t.name === tag);
-    const tagSpecificAttributes = tagData?.attributes || [];
-    
-    return [
-      ...tagSpecificAttributes
-    ];
+    return this.customTags.find((t) => t.name === tag)?.attributes ?? [];
   }
 
   provideValues(tag: string, attribute: string): IValueData[] {

src/extension.ts

@@ -14,13 +14,15 @@ function htmlValidator(
   ps: Parse5,
   htmlTemplateArray: Array<{ htmlTemplate: HtmlTagTemplate }>,
   document: vscode.TextDocument,
-  diagnosticCollection: vscode.Diagnostic[]
+  diagnosticCollection: vscode.Diagnostic[],
+  userConfig: vscode.WorkspaceConfiguration
 ):void
 {
   const validator = new HtmlValidator(
     ps,
     document,
     diagnosticCollection,
+    userConfig
   ).validate(htmlTemplateArray);
 }
 
@@ -41,37 +43,51 @@ export async function activate(context: vscode.ExtensionContext) {
   const ps = await import("parse5");
 
   const diagnostics = vscode.languages.createDiagnosticCollection("myExtension");
+
+  
 
   context.subscriptions.push(diagnostics);
 
   vscode.window.showInformationMessage("Validator is now active");
+
   const timers = new Map<string, NodeJS.Timeout>();
+  const supported = new Set(["typescript","javascript","typescriptreact","javascriptreact"]);
   const schedule = (doc: vscode.TextDocument) => {
-    if (timers.get(doc.uri.toString())) clearTimeout(timers.get(doc.uri.toString()));
+    if (!supported.has(doc.languageId)) {
+      errorCollection.delete(doc.uri);
+      return;
+    }
+    const key = doc.uri.toString();
+    if (timers.get(key)) clearTimeout(timers.get(key));
     timers.set
     (
-      doc.uri.toString(), setTimeout
+      key, setTimeout
       (() => 
       {
+      timers.delete(key);
       const diagnosticCollection: vscode.Diagnostic[] = [];
-      
+      const userConfig = vscode.workspace.getConfiguration("html-css-template-validator");
       const htmlTemplates = extractHtmlTemplateBlock(doc);
       if (!htmlTemplates){return}
-      htmlValidator(ps,htmlTemplates,doc,diagnosticCollection);
+      htmlValidator(ps,htmlTemplates,doc,diagnosticCollection,userConfig);
       const cssTemplates = extractCssTemplateBlock(doc)
       if(!cssTemplates){return}
       cssValidator(cssTemplates,doc,diagnosticCollection)
 
       errorCollection.set(doc.uri,diagnosticCollection)
-      }
-      )
-    )
-  }
+      },300))}
 
   context.subscriptions.push(
     vscode.workspace.onDidChangeTextDocument((e) => schedule(e.document)),
     vscode.workspace.onDidOpenTextDocument((doc) => schedule(doc)),
-    vscode.workspace.onDidCloseTextDocument((doc) => diagnostics.delete(doc.uri))
+    vscode.workspace.onDidCloseTextDocument((doc) => diagnostics.delete(doc.uri)),
+    vscode.workspace.onDidChangeConfiguration((e) => {
+    if (e.affectsConfiguration("html-css-template-validator")) {
+    for (const doc of vscode.workspace.textDocuments) {
+      if (["typescript", "javascript", "typescriptreact", "javascriptreact"].includes(doc.languageId)) {
+        schedule(doc);
+      }}}
+    })
   );
 };
 export function deactivate() {}