Skip to content

[jet-brains-integration] Include source module and symbol in web-types #94

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kouzukii wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[jet-brains-integration] Include source module and symbol in web-types #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ee1210a
Generate source module path and symbol in web-types
Kouzukii Feb 27, 2024
a62e363
Add type WebTypeSource to WebTypeElement
Kouzukii Mar 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions packages/jet-brains-integration/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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'
};
Expand Down
16 changes: 16 additions & 0 deletions packages/jet-brains-integration/src/types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -29,6 +32,7 @@ export interface Params {
export interface WebTypeElement {
name: string;
description: string;
source?: WebTypeSource;
["doc-url"]?: string;
attributes: WebTypeAttribute[];
js?: JsProperties;
Expand Down Expand Up @@ -73,3 +77,15 @@ export interface Reference {
name: string;
url: string;
}

export type WebTypeSource = WebTypeSourceSymbol | WebTypeSourceFile;

export interface WebTypeSourceSymbol {
module?: string;
symbol: string;
}

export interface WebTypeSourceFile {
file: string;
offset: number;
}
27 changes: 20 additions & 7 deletions packages/jet-brains-integration/src/web-types-generator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import fs from "fs";
import type {
JsProperties,
Options,
Reference,
WebTypeAttribute,
WebTypeCssProperty,
WebTypeElement,
Expand All @@ -13,6 +12,7 @@ import {
getComponents,
type CEM,
Component,
ComponentWithModule,
getComponentDetailsTemplate,
} from "../../../tools/cem-utils";
import type * as schema from "custom-elements-manifest/schema";
Expand All @@ -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) => {
Expand Down
19 changes: 10 additions & 9 deletions tools/cem-utils/src/cem-utilities.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -51,17 +51,18 @@ export function getComponentDescription(
export function getComponents(
customElementsManifest: CEM,
exclude?: string[]
): Component[] {
): ComponentWithModule[] {
Copy link
Owner

@break-stuff break-stuff May 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this needs to be reverted.

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
Expand Down Expand Up @@ -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[];
}

Expand Down
2 changes: 1 addition & 1 deletion tools/cem-utils/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
4 changes: 4 additions & 0 deletions tools/cem-utils/src/types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ export interface Component extends schema.CustomElementDeclaration {
};
}

export interface ComponentWithModule extends Component {
module: CustomModule;
Copy link
Owner

@break-stuff break-stuff Mar 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this is correct. There shouldn't be an array of components in a component.

Copy link
Owner

@break-stuff break-stuff Mar 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the WebTypeElement type needs to be updated instead.

Copy link
Author

@Kouzukii Kouzukii Mar 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The addition of the module here is necessary to pass module.path along. But you're right WebTypeElement also needs to be adjusted.

Copy link
Owner

@break-stuff break-stuff Mar 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CustomModule has a property called declarations that contains an array of Components.

}

export interface CustomModule extends schema.JavaScriptModule {
/**
* The declarations of a module.
Expand Down