custom-element-jet-brains-integration: Improve JS property and event generation

packages/jet-brains-integration/src/types.d.ts

@@ -41,17 +41,25 @@ export interface WebTypeAttribute {
   value: WebTypeValue;
 }
 
+export interface WebTypeJsProperty {
+  name: string;
+  description?: string;
+  type?: string;
+  default?: string;
+}
+
 export interface WebTypeValue {
   type?: string | string[];
 }
 
 export interface JsProperties {
-  properties: WebTypeAttribute[];
+  properties: WebTypeJsProperty[];
   events: WebTypeEvent[];
 }
 
 export interface WebTypeEvent {
   name: string;
+  type?: string
   description?: string;
 }
 

packages/jet-brains-integration/src/web-types-generator.ts

@@ -3,10 +3,10 @@ import type {
   JsProperties,
   Options,
   Reference,
-  WebTypeAttribute,
   WebTypeCssProperty,
   WebTypeElement,
   WebTypeEvent,
+  WebTypeJsProperty,
   WebTypePseudoElement,
 } from "./types";
 import {
@@ -55,49 +55,56 @@ export function getTagList(
           description: slot.description,
         };
       }),
-      events: getWebTypeEvents(component),
-      js: getJsProperties(component, options.typesSrc),
+      js: getJsProperties(component),
     };
   });
 }
 
-function getJsProperties(
-  component: Component,
-  typesSrc?: string
-): JsProperties {
+function getJsProperties(component: Component): JsProperties {
   return {
-    properties: getWebTypeProperties(component, typesSrc),
+    properties: getWebTypeProperties(component),
     events: getWebTypeEvents(component),
   };
 }
 
-function getWebTypeProperties(
-  component: Component,
-  typesSrc = "types"
-): WebTypeAttribute[] {
+/**
+ * @param field The Custom Elements Manifest class field to evaluate
+ * @return Whether the Custom Elements Manifest class field is considered a JS property by JetBrains
+ * Web Types
+ */
+function isWebTypeProperty(field: schema.ClassField): boolean {
+  // It appears that JetBrains Web Types assumes that all properties are public (TS only) and not
+  // static.
+  return field.static !== true && (field.privacy === 'public' || field.privacy === undefined)
+}
+
+function getWebTypeProperties(component: Component,): WebTypeJsProperty[] {
   return (
-    ((component.attributes || component.members) as schema.Attribute[])?.map(
-      (attr) => {
+    (component.members?.filter((member) => member.kind === 'field') as schema.ClassField[])
+      .filter(isWebTypeProperty)
+      .map((field) => {
         return {
-          name: attr.name,
-          description: attr.description,
-          value: {
-            type: (attr as any)[`${typesSrc}`]?.text || attr.type?.text,
-          },
-        };
-      }
-    ) || []
+          name: field.name,
+          description: field.description,
+          type: field.type?.text,
+        }
+      }) || []
   );
 }
 
 function getWebTypeEvents(component: Component): WebTypeEvent[] {
   return (
-    component.events?.map((event) => {
-      return {
-        name: event.name,
-        description: event.description,
-      };
-    }) || []
+    // The CEM analyzer will generate a custom event without a name if it is dispatched inside the
+    // custom element using a predefined constructor, but JetBrains IDEs seemingly can't do anything
+    // with unnamed Web Type events, so ignore them.
+    component.events?.filter((event) => event.name !== undefined && event.name !== null)
+      .map((event) => {
+        return {
+          name: event.name,
+          type: event.type?.text,
+          description: event.description,
+        };
+      }) || []
   );
 }
 

tools/cem-utils/src/description-templates.ts

@@ -107,7 +107,8 @@ export function getMethodsTemplate(
 
 function getEventDocs(events: schema.Event[]) {
   return events
-    ?.map((event) => `- **${event.name}** - ${event.description}`)
+    ?.filter((event) => event.name !== null && event.name !== undefined)
+  .map((event) => `- **${event.name}**${event.description ? ` - ${event.description}` : ''}`)
     .join("\n");
 }