make completions more powerful and generic

Author: andrewgryan

src/main.ts

@@ -223,28 +223,18 @@ interface CompletionItem {
 }
 
 const textDocumentCompletionResult = (): CompletionItem[] => {
-  return [
-    {
-      label: "l-map",
-      detail: "l-map",
-      documentation: "Leaflet L.map component",
-    },
-    {
-      label: "l-tile-layer",
-      detail: "l-tile-layer",
-      documentation: "Leaflet L.tileLayer component",
-    },
-    {
-      label: "l-marker",
-      detail: "l-marker",
-      documentation: "Leaflet L.marker component",
-    },
-    {
-      label: "l-icon",
-      detail: "l-icon",
-      documentation: "Leaflet L.icon component",
-    },
-  ];
+  return ELEMENT_DEFINITIONS.map(({ tagName, attributes, documentation }) => {
+    let dom = parse(`<${tagName}></${tagName}>`)
+    let el = dom.querySelector(tagName)
+    attributes.forEach((attribute) => {
+      el?.setAttribute(attribute.name, attribute.default)
+    })
+    return {
+      label: dom.toString(),
+      detail: tagName,
+      documentation,
+    }
+  })
 };
 
 // Diagnostics

src/schema.ts

@@ -5,22 +5,25 @@ interface TypedAttribute {
   default: string;
 }
 
-type Definition = { tagName: string; attributes: TypedAttribute[] };
+type Definition = { tagName: string; attributes: TypedAttribute[], documentation: string };
 
 export const ELEMENT_DEFINITIONS: Definition[] = [
   {
     tagName: "l-map",
+    documentation: "L.map() custom HTML element.",
     attributes: [
       { name: "center", format: "json", default: "[0, 0]" },
       { name: "zoom", format: "number", default: "0" },
     ],
   },
   {
     tagName: "l-tile-layer",
+    documentation: "L.tileLayer() custom HTML element.",
     attributes: [{ name: "url-template", format: "string", default: "" }],
   },
   {
     tagName: "l-circle",
+    documentation: "L.circle() custom HTML element.",
     attributes: [{ name: "lat-lng", format: "json", default: "[0, 0]" }],
   },
 ];