feat(jet-brains-integration): add source module and symbol in web-types

packages/jet-brains-integration/README.md

@@ -118,6 +118,8 @@ export interface Options {
   hideLogs?: boolean;
   /** Prevents plugin from executing */
   skip?: boolean;
+  /** Used to amend the modules paths to actual source (when outdir is a subdirectory for instance) */
+  modulePathTemplate?: (name: string, modulePath: string) => string;
 }
 ```
 

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

@@ -1,6 +1,10 @@
 import { expect, describe, test } from "vitest";
 import { customElementsManifest } from "./test-data";
-import { getOptions, getTagList } from "../web-types-generator";
+import {
+  getOptions,
+  getTagList,
+  getComponentsExportsMap,
+} from "../web-types-generator";
 import { getComponents } from "../../../../tools/cem-utils";
 
 describe("web-types-generator", () => {
@@ -28,9 +32,10 @@ describe("web-types-generator", () => {
           slots: slotLabel,
         },
       });
+      const symbols = getComponentsExportsMap(customElementsManifest, options);
 
       // Act
-      const tagList = getTagList(components, options);
+      const tagList = getTagList(components, symbols, options);
 
       // Assert
       expect(options.labels?.slots).toBe("Slug");
@@ -43,9 +48,10 @@ describe("web-types-generator", () => {
       const options = getOptions({
         hideSlotDocs: false,
       });
+      const symbols = getComponentsExportsMap(customElementsManifest, options);
 
       // Act
-      const tagList = getTagList(components, options);
+      const tagList = getTagList(components, symbols, options);
 
       // Assert
       expect(JSON.stringify(tagList).includes("**Slots:**")).toBe(false);
@@ -56,9 +62,10 @@ describe("web-types-generator", () => {
       const options = getOptions({
         hideEventDocs: false,
       });
+      const symbols = getComponentsExportsMap(customElementsManifest, options);
 
       // Act
-      const tagList = getTagList(components, options);
+      const tagList = getTagList(components, symbols, options);
 
       // Assert
       expect(JSON.stringify(tagList).includes("**Events:**")).toBe(false);
@@ -70,8 +77,10 @@ describe("web-types-generator", () => {
         hideCssPropertiesDocs: false,
       });
 
+      const symbols = getComponentsExportsMap(customElementsManifest, options);
+
       // Act
-      const tagList = getTagList(components, options);
+      const tagList = getTagList(components, symbols, options);
 
       // Assert
       expect(JSON.stringify(tagList).includes("**CSS Properties:**")).toBe(
@@ -84,9 +93,10 @@ describe("web-types-generator", () => {
       const options = getOptions({
         hideCssPartsDocs: false,
       });
+      const symbols = getComponentsExportsMap(customElementsManifest, options);
 
       // Act
-      const tagList = getTagList(components, options);
+      const tagList = getTagList(components, symbols, options);
 
       // Assert
       expect(JSON.stringify(tagList).includes("**CSS Parts:**")).toBe(false);

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

@@ -22,6 +22,8 @@ export interface Options extends BaseOptions {
   referenceTemplate?: (name: string, tag?: string) => Reference;
   /** Adds an icon link to the webtypes.json  **/
   defaultIcon?: string;
+  /** Used to amend the modules paths to actual source (when outdir is a subdirectory for instance) */
+  modulePathTemplate?: (name: string, modulePath: string) => string;
 }
 
 export interface Params {
@@ -31,6 +33,7 @@ export interface Params {
 export interface WebTypeElement {
   name: string;
   description: string;
+  source?: WebTypeSourceSymbol;
   ["doc-url"]?: string;
   attributes: WebTypeAttribute[];
   js?: JsProperties;
@@ -83,3 +86,8 @@ export interface Reference {
   name: string;
   url: string;
 }
+
+export interface WebTypeSourceSymbol {
+  module?: string;
+  symbol: string;
+}

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

@@ -7,6 +7,7 @@ import type {
   WebTypeEvent,
   WebTypeJsProperty,
   WebTypePseudoElement,
+  WebTypeSourceSymbol,
 } from "./types";
 import {
   getComponents,
@@ -35,13 +36,18 @@ const packageJson = JSON.parse(fs.readFileSync("package.json", "utf8"));
 
 export function getTagList(
   components: Component[],
+  sourceSymbols: Map<string, WebTypeSourceSymbol>,
   options: Options,
 ): WebTypeElement[] {
   return components.map((component: Component) => {
     const reference = options.referenceTemplate
       ? options.referenceTemplate(component.name, component.tagName)
       : undefined;
 
+    const symbol = component.tagName
+      ? sourceSymbols.get(component.tagName)
+      : undefined;
+
     return {
       name: `${options.prefix}${
         component.tagName || toKebabCase(component.name)
@@ -57,10 +63,40 @@ export function getTagList(
       }),
       events: getWebTypeEvents(component),
       js: getJsProperties(component, options.typesSrc),
+      source: symbol,
     };
   });
 }
 
+export function getComponentsExportsMap(
+  customElementsManifest: CEM,
+  options: Options,
+): Map<string, WebTypeSourceSymbol> {
+  return new Map(
+    customElementsManifest.modules
+      ?.map((mod) =>
+        mod.exports
+          ?.filter(
+            (e) =>
+              e.kind === "custom-element-definition" && e.declaration.module,
+          )
+          .map((e) => [
+            e.name,
+            {
+              symbol: e.declaration.name,
+              module: options.modulePathTemplate
+                ? options.modulePathTemplate(
+                    e.declaration.name,
+                    e.declaration.module!,
+                  )
+                : e.declaration.module,
+            } as WebTypeSourceSymbol,
+          ]),
+      )
+      .flat() as Array<[string, WebTypeSourceSymbol]>,
+  );
+}
+
 function getJsProperties(
   component: Component,
   typesSrc?: string,
@@ -147,9 +183,10 @@ export function generateJetBrainsWebTypes(
     );
     return;
   }
+  const exports = getComponentsExportsMap(customElementsManifest, options);
 
   const elements = options.webTypesFileName
-    ? getTagList(components, options)
+    ? getTagList(components, exports, options)
     : [];
   const cssProperties = getCssPropertyList(components);
   const cssParts = getCssPartList(components);
@@ -170,7 +207,8 @@ export function getWebTypesData(customElementsManifest: CEM, options: Options) {
     options.exclude,
   ).filter((x) => x.tagName);
 
-  const elements = getTagList(components, options);
+  const exports = getComponentsExportsMap(customElementsManifest, options);
+  const elements = getTagList(components, exports, options);
   const cssProperties = getCssPropertyList(components);
   const cssParts = getCssPartList(components);