Generate source module path and symbol in web-types

Author: Kouzukii

packages/jet-brains-integration/README.md

@@ -108,6 +108,9 @@ export interface Options {
   };
   /** Used to create links within the component info bubble */
   referencesTemplate?: (name: string, tag?: string) => Reference;
+  /** Used to specify the path to the given component's source module, defaults to `module.path` from the CEM.
+   *  When `undefined` is returned, no source reference is generated */
+  sourceModuleTemplate?: (args: {name: string, tag?: string, modulePath: string}) => string | undefined;
   /** The property form your CEM component object to display your types */
   typesSrc?: string;
   /** Automatically adds reference to yor package.json */
@@ -171,6 +174,10 @@ const options = {
     url: `https://example.com/components/${tag}`
   },
 
+  /** Used to specify the path to the given component's source module, defaults to `module.path` from the CEM.
+   *  When `undefined` is returned, no source reference is generated */
+  sourceModuleTemplate: ({name, tag, modulePath}) => `src/components/${tag}/${name}.ts`,
+
   /** The property form your CEM component object to display your types */
   typesSrc: 'expandedType'
 };

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

@@ -20,6 +20,9 @@ export interface Options extends BaseOptions {
   packageJson?: boolean;
   /** Used to create a link within the component info bubble */
   referenceTemplate?: (name: string, tag?: string) => Reference;
+  /** Used to specify the path to the given component's source module, defaults to `module.path` from the CEM.
+   *  When `undefined` is returned, no source reference is generated */
+  sourceModuleTemplate?: (args: {name: string, tag?: string, modulePath: string}) => string | undefined;
 }
 
 export interface Params {

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

@@ -2,7 +2,6 @@ import fs from "fs";
 import type {
   JsProperties,
   Options,
-  Reference,
   WebTypeAttribute,
   WebTypeCssProperty,
   WebTypeElement,
@@ -13,6 +12,7 @@ import {
   getComponents,
   type CEM,
   Component,
+  ComponentWithModule,
   getComponentDetailsTemplate,
 } from "../../../tools/cem-utils";
 import type * as schema from "custom-elements-manifest/schema";
@@ -33,20 +33,33 @@ import { updateConfig } from "../../../tools/configurations";
 const packageJson = JSON.parse(fs.readFileSync("package.json", "utf8"));
 
 export function getTagList(
-  components: Component[],
-  options: Options,
-  referenceTemplate?: (name: string, tag?: string) => Reference
+  components: ComponentWithModule[],
+  options: Options
 ): WebTypeElement[] {
-  return components.map((component: Component) => {
-    const reference = referenceTemplate
-      ? referenceTemplate(component.name, component.tagName)
+  return components.map((component: ComponentWithModule) => {
+    const reference = options.referenceTemplate
+      ? options.referenceTemplate(component.name, component.tagName)
       : undefined;
 
+    const sourceModule = options.sourceModuleTemplate
+      ? options.sourceModuleTemplate({
+          name: component.name,
+          tag: component.tagName,
+          modulePath: component.module.path,
+        })
+      : component.module.path;
+
     return {
       name: `${options.prefix}${
         component.tagName || toKebabCase(component.name)
       }${options.suffix}`,
       description: getComponentDetailsTemplate(component, options),
+      source: sourceModule
+        ? {
+            symbol: component.name,
+            module: sourceModule,
+          }
+        : undefined,
       ["doc-url"]: reference?.url || "",
       attributes: getComponentAttributes(component, options.typesSrc),
       slots: component.slots?.map((slot) => {

tools/cem-utils/src/cem-utilities.ts

@@ -1,6 +1,6 @@
 import { removeQuoteWrappers } from "../../utilities";
 import type * as schema from "custom-elements-manifest";
-import type { CEM, Component } from "./types";
+import type { CEM, Component, ComponentWithModule } from "./types";
 
 export const EXCLUDED_TYPES = [
   "any",
@@ -51,17 +51,18 @@ export function getComponentDescription(
 export function getComponents(
   customElementsManifest: CEM,
   exclude?: string[]
-): Component[] {
+): ComponentWithModule[] {
   return (
     customElementsManifest.modules?.map(
       (mod) =>
-        mod?.declarations?.filter(
-          (dec) =>
-            !exclude?.includes(dec.name) &&
-            ((dec as Component).customElement || (dec as Component).tagName)
-        ) || []
+        mod?.declarations
+          ?.filter(
+            (dec) =>
+              !exclude?.includes(dec.name) && (dec.customElement || dec.tagName)
+          )
+          .map((dec) => ({ ...dec, module: mod })) || []
     ) || []
-  ).flat() as Component[];
+  ).flat();
 }
 /**
  * Gets a list of public properties from a CEM component
@@ -111,7 +112,7 @@ export function getComponentMethods(
       member.kind === "method" &&
       member.privacy !== "private" &&
       member.description?.length &&
-      !member.name.startsWith("#") 
+      !member.name.startsWith("#")
   ) as schema.ClassMethod[];
 }
 

tools/cem-utils/src/index.ts

@@ -1,3 +1,3 @@
 export * from "./cem-utilities.js";
 export * from "./description-templates.js";
-export type { CEM, Component } from "./types.js";
+export type { CEM, Component, ComponentWithModule } from "./types.js";

tools/cem-utils/src/types.d.ts

@@ -20,6 +20,10 @@ export interface Component extends schema.CustomElementDeclaration {
   };
 }
 
+export interface ComponentWithModule extends Component {
+  module: CustomModule;
+}
+
 export interface CustomModule extends schema.JavaScriptModule {
   /**
    * The declarations of a module.