diff --git a/demo/lit-app/build.js b/demo/lit-app/build.js index dfa8d16..3514e67 100644 --- a/demo/lit-app/build.js +++ b/demo/lit-app/build.js @@ -1,5 +1,12 @@ -import { generateVsCodeCustomElementData } from "custom-element-vs-code-integration"; -import { generateJetBrainsWebTypes } from "custom-element-jet-brains-integration"; +import { + generateVsCodeCustomElementData, + getVsCodeHtmlCustomData, + getVsCodeCssCustomData, +} from "custom-element-vs-code-integration"; +import { + generateJetBrainsWebTypes, + generateWebTypesFileContents, +} from "custom-element-jet-brains-integration"; import manifest from "./custom-elements.json" assert { type: "json" }; generateVsCodeCustomElementData(manifest); diff --git a/demo/lit-app/package.json b/demo/lit-app/package.json index e00849d..219d97b 100644 --- a/demo/lit-app/package.json +++ b/demo/lit-app/package.json @@ -9,6 +9,7 @@ "scripts": { "analyze": "cem analyze", "dev": "tsc", + "demo": "node build.js", "build": "tsc && cp src/radio-group/types.d.ts dist/radio-group/types.d.ts || copy src/radio-group/types.d.ts dist/radio-group/types.d.ts", "preview": "vite preview" }, diff --git a/demo/lit-app/vscode.html-custom-data.json b/demo/lit-app/vscode.html-custom-data.json index cd443a5..e1acd31 100644 --- a/demo/lit-app/vscode.html-custom-data.json +++ b/demo/lit-app/vscode.html-custom-data.json @@ -4,7 +4,7 @@ "tags": [ { "name": "radio-group", - "description": "\nRadio groups are used to group multiple radios or radio buttons, so they function as a single form control. Here is its [documentation](https://github.com/microsoft/vscode-custom-data/blob/master/samples/webcomponents/src/components/my-component/docs.md).\n\nUse it like this:\n```html\n\n My Label\n Option 1\n Option 2\n Option 3\n\n```\n---\n\n\n### **Events:**\n - **custom-event** - some description for custom-event\n- **typed-event** - some description for typed-event\n- **typed-custom-event** - (@deprecated) some description for typed-custom-event\n\n### **Methods:**\n - **validate()** - Validated the radio inputs\n- **checkStatus(value: _string_, message: _string_): _string_** - This is a test method with parameters\n\n\n### **Slots:**\n - _default_ - add radio buttons to the `default` slot to create options to your radio group\n- **label** - placeholder for the radio group label\n\n### **CSS Properties:**\n - **--radio-border-radius** - Controls the border radius of the radio buttons _(default: undefined)_\n- **--radio-background-color** - Controls the color of bar _(default: red)_\n\n### **CSS Parts:**\n - **radio-label** - Applies custom styles the radio group label", + "description": "\nRadio groups are used to group multiple radios or radio buttons, so they function as a single form control. Here is its [documentation](https://github.com/microsoft/vscode-custom-data/blob/master/samples/webcomponents/src/components/my-component/docs.md).\n\nUse it like this:\n```html\n\n My Label\n Option 1\n Option 2\n Option 3\n\n```\n---\n\n\n### **Events:**\n - **custom-event** - some description for custom-event\n- **typed-event** - some description for typed-event\n- **typed-custom-event**\n\n### **Methods:**\n - **validate()** - Validated the radio inputs\n- **checkStatus(value: _string_, message: _string_): _string_** - This is a test method with parameters\n\n\n### **Slots:**\n - _default_ - add radio buttons to the `default` slot to create options to your radio group\n- **label** - placeholder for the radio group label\n\n### **CSS Properties:**\n - **--radio-border-radius** - Controls the border radius of the radio buttons _(default: undefined)_\n- **--radio-background-color** - Controls the color of bar _(default: red)_\n\n### **CSS Parts:**\n - **radio-label** - Applies custom styles the radio group label", "attributes": [ { "name": "value", @@ -29,56 +29,24 @@ { "name": "variants", "description": "This is a test for internal options", - "values": [ - { "name": "default" }, - { "name": "primary" }, - { "name": "success" }, - { "name": "neutral" }, - { "name": "warning" }, - { "name": "danger" }, - { "name": "text" } - ] - }, - { - "name": "external", - "values": [ - { "name": "value1" }, - { "name": "value2" }, - { "name": "value3" } - ] - }, - { - "name": "deprecated-attribute", - "values": [ - { "name": "value1" }, - { "name": "value2" }, - { "name": "value3" } - ] + "values": [{ "name": "Variants" }] }, + { "name": "external", "values": [{ "name": "Test" }] }, + { "name": "deprecated-attribute", "values": [{ "name": "Test" }] }, { "name": "external2", "description": "This is a test for external .ts options", - "values": [ - { "name": "value4" }, - { "name": "value5" }, - { "name": "value6" }, - { "name": "valueA" }, - { "name": "valueB" } - ] + "values": [{ "name": "Example" }] }, { "name": "external3", "description": "This is a test for external .ts options", - "values": [ - { "name": "value7" }, - { "name": "value8" }, - { "name": "value9" } - ] + "values": [{ "name": "Test3" }] }, { "name": "complex", "description": "This is a test for options from an object", - "values": [{ "name": "single" }, { "name": "multi" }] + "values": [{ "name": "ComplexObjectType" }] }, { "name": "my-attribute", @@ -88,12 +56,7 @@ { "name": "complex-union", "description": "This is a test for options from an object", - "values": [ - { "name": "small" }, - { "name": "medium" }, - { "name": "large" }, - { "name": "extra-small" } - ] + "values": [{ "name": "ChildSize" }] } ], "references": [] @@ -115,12 +78,7 @@ { "name": "target", "description": "A lookup type for example", - "values": [ - { "name": "_blank" }, - { "name": "_self" }, - { "name": "_parent" }, - { "name": "_top" } - ] + "values": [{ "name": "Target" }] }, { "name": "for", diff --git a/demo/lit-app/web-types.json b/demo/lit-app/web-types.json index 914dbb6..abe9dbe 100644 --- a/demo/lit-app/web-types.json +++ b/demo/lit-app/web-types.json @@ -8,7 +8,7 @@ "elements": [ { "name": "radio-group", - "description": "\nRadio groups are used to group multiple radios or radio buttons, so they function as a single form control. Here is its [documentation](https://github.com/microsoft/vscode-custom-data/blob/master/samples/webcomponents/src/components/my-component/docs.md).\n\nUse it like this:\n```html\n\n My Label\n Option 1\n Option 2\n Option 3\n\n```\n---\n\n\n### **Events:**\n - **custom-event** - some description for custom-event\n- **typed-event** - some description for typed-event\n- **typed-custom-event** - (@deprecated) some description for typed-custom-event\n\n### **Methods:**\n - **validate()** - Validated the radio inputs\n- **checkStatus(value: _string_, message: _string_): _string_** - This is a test method with parameters\n\n\n### **Slots:**\n - _default_ - add radio buttons to the `default` slot to create options to your radio group\n- **label** - placeholder for the radio group label\n\n### **CSS Properties:**\n - **--radio-border-radius** - Controls the border radius of the radio buttons _(default: undefined)_\n- **--radio-background-color** - Controls the color of bar _(default: red)_\n\n### **CSS Parts:**\n - **radio-label** - Applies custom styles the radio group label", + "description": "\nRadio groups are used to group multiple radios or radio buttons, so they function as a single form control. Here is its [documentation](https://github.com/microsoft/vscode-custom-data/blob/master/samples/webcomponents/src/components/my-component/docs.md).\n\nUse it like this:\n```html\n\n My Label\n Option 1\n Option 2\n Option 3\n\n```\n---\n\n\n### **Events:**\n - **custom-event** - some description for custom-event\n- **typed-event** - some description for typed-event\n- **typed-custom-event**\n\n### **Methods:**\n - **validate()** - Validated the radio inputs\n- **checkStatus(value: _string_, message: _string_): _string_** - This is a test method with parameters\n\n\n### **Slots:**\n - _default_ - add radio buttons to the `default` slot to create options to your radio group\n- **label** - placeholder for the radio group label\n\n### **CSS Properties:**\n - **--radio-border-radius** - Controls the border radius of the radio buttons _(default: undefined)_\n- **--radio-background-color** - Controls the color of bar _(default: red)_\n\n### **CSS Parts:**\n - **radio-label** - Applies custom styles the radio group label", "doc-url": "", "attributes": [ { @@ -32,45 +32,30 @@ { "name": "variants", "description": "This is a test for internal options", - "value": { - "type": "'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'", - "default": "\"primary\"" - } + "value": { "type": "Variants", "default": "\"primary\"" } }, { "name": "external", - "value": { - "type": "'value1' | 'value2' | 'value3'", - "default": "\"value1\"" - } + "value": { "type": "Test", "default": "\"value1\"" } }, { "name": "deprecated-attribute", - "value": { - "type": "'value1' | 'value2' | 'value3'", - "default": "\"value1\"" - } + "value": { "type": "Test", "default": "\"value1\"" } }, { "name": "external2", "description": "This is a test for external .ts options", - "value": { - "type": "'value4' | 'value5' | 'value6' | 'valueA' | 'valueB'", - "default": "\"value4\"" - } + "value": { "type": "Example", "default": "\"value4\"" } }, { "name": "external3", "description": "This is a test for external .ts options", - "value": { - "type": "'value7' | 'value8' | 'value9'", - "default": "\"value8\"" - } + "value": { "type": "Test3", "default": "\"value8\"" } }, { "name": "complex", "description": "This is a test for options from an object", - "value": { "type": "'single' | 'multi'", "default": "\"single\"" } + "value": { "type": "ComplexObjectType", "default": "\"single\"" } }, { "name": "my-attribute", @@ -80,9 +65,7 @@ { "name": "complex-union", "description": "This is a test for options from an object", - "value": { - "type": "'small' | 'medium' | 'large' | 'extra-small' | undefined" - } + "value": { "type": "ChildSize | undefined" } } ], "slots": [ @@ -108,7 +91,7 @@ { "name": "typed-custom-event", "type": "InterfaceEventType", - "description": "(@deprecated) some description for typed-custom-event" + "description": "" } ], "js": { @@ -131,27 +114,24 @@ { "name": "variants", "description": "This is a test for internal options", - "type": "'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'" - }, - { "name": "external", "type": "'value1' | 'value2' | 'value3'" }, - { - "name": "deprecatedAttribute", - "type": "'value1' | 'value2' | 'value3'" + "type": "Variants" }, + { "name": "external", "type": "Test" }, + { "name": "deprecatedAttribute", "type": "Test" }, { "name": "external2", "description": "This is a test for external .ts options", - "type": "'value4' | 'value5' | 'value6' | 'valueA' | 'valueB'" + "type": "Example" }, { "name": "external3", "description": "This is a test for external .ts options", - "type": "'value7' | 'value8' | 'value9'" + "type": "Test3" }, { "name": "complex", "description": "This is a test for options from an object", - "type": "'single' | 'multi'" + "type": "ComplexObjectType" }, { "name": "myAttribute", @@ -161,12 +141,12 @@ { "name": "data", "description": "This is data object", - "type": "{\n // The name.\n name??: string;\n /** The type. */\n type?: string;\n /** The value. */\n value?: number;\n } | undefined" + "type": "{\n // The name.\n name?: string;\n /** The type. */\n type?: string;\n /** The value. */\n value?: number;\n } | undefined" }, { "name": "complexUnion", "description": "This is a test for options from an object", - "type": "'small' | 'medium' | 'large' | 'extra-small' | undefined" + "type": "ChildSize | undefined" }, { "name": "customTag" } ], @@ -183,7 +163,7 @@ { "name": "typed-custom-event", "type": "InterfaceEventType", - "description": "(@deprecated) some description for typed-custom-event" + "description": "" } ] } @@ -206,9 +186,7 @@ { "name": "target", "description": "A lookup type for example", - "value": { - "type": "'_blank' | '_self' | '_parent' | '_top' | undefined" - } + "value": { "type": "Target | undefined" } }, { "name": "for", @@ -243,7 +221,7 @@ { "name": "target", "description": "A lookup type for example", - "type": "'_blank' | '_self' | '_parent' | '_top' | undefined" + "type": "Target | undefined" }, { "name": "for", diff --git a/packages/jet-brains-integration/CHANGELOG.md b/packages/jet-brains-integration/CHANGELOG.md index e46f78b..a0df29a 100644 --- a/packages/jet-brains-integration/CHANGELOG.md +++ b/packages/jet-brains-integration/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 1.6.0 + +- Added the ability to generate your own web-types file + ## 1.5.0 - Added the ability to hide logs diff --git a/packages/jet-brains-integration/README.md b/packages/jet-brains-integration/README.md index 1a08450..fd1c71c 100644 --- a/packages/jet-brains-integration/README.md +++ b/packages/jet-brains-integration/README.md @@ -377,3 +377,7 @@ If your project is scoping components using prefixes or suffixes in the tag name ## Default Icon If you want to have your icon in the code completion select dialog. The entry is a relative path to the icon representing the symbol or actual SVG of the icon. + +## Generate Your Own File + +If you need to be able tp generate your own file, you can use the `getWebTypesData(manifest, options)` method. This method will return the web-types data and you can choose where and how the file gets written. diff --git a/packages/jet-brains-integration/package.json b/packages/jet-brains-integration/package.json index afa31e0..9ed82c8 100644 --- a/packages/jet-brains-integration/package.json +++ b/packages/jet-brains-integration/package.json @@ -1,6 +1,6 @@ { "name": "custom-element-jet-brains-integration", - "version": "1.5.0", + "version": "1.6.0", "description": "Tools for integrating web components/custom elements into JetBrains IDEs", "main": "index.js", "module": "index.js", diff --git a/packages/jet-brains-integration/src/index.ts b/packages/jet-brains-integration/src/index.ts index acabe4a..b53ba85 100644 --- a/packages/jet-brains-integration/src/index.ts +++ b/packages/jet-brains-integration/src/index.ts @@ -1,3 +1,6 @@ -export { generateJetBrainsWebTypes } from "./web-types-generator.js"; +export { + generateJetBrainsWebTypes, + getWebTypesData, +} from "./web-types-generator.js"; export { customElementJetBrainsPlugin } from "./cem-analyzer-plugin.js"; export type { Options } from "./types"; diff --git a/packages/jet-brains-integration/src/web-types-generator.ts b/packages/jet-brains-integration/src/web-types-generator.ts index 2f01365..71a07fe 100644 --- a/packages/jet-brains-integration/src/web-types-generator.ts +++ b/packages/jet-brains-integration/src/web-types-generator.ts @@ -128,13 +128,13 @@ export function generateJetBrainsWebTypes( customElementsManifest: CEM, options: Options, ) { - if (options.skip) { + if (options?.skip) { logYellow("[jet-brains-web-type-generator] - Skipped", options.hideLogs); return; } log( "[jet-brains-web-type-generator] - Updating Custom Elements Manifest...", - options.hideLogs, + options?.hideLogs, ); options = getOptions(options); @@ -165,6 +165,20 @@ export function generateJetBrainsWebTypes( logGreen(`[jet-brains-web-type-generator] - Generated "${outputPath}".`); } +export function getWebTypesData(customElementsManifest: CEM, options: Options) { + options = getOptions(options); + const components = getComponents( + customElementsManifest, + options.exclude, + ).filter((x) => x.tagName); + + const elements = getTagList(components, options); + const cssProperties = getCssPropertyList(components); + const cssParts = getCssPartList(components); + + return getWebTypesFileContents(elements, cssProperties, cssParts, options); +} + export function getOptions(options: Options) { options = updateConfig(options); options.webTypesFileName = diff --git a/packages/vs-code-integration/CHANGELOG.md b/packages/vs-code-integration/CHANGELOG.md index c306f3c..f90faa9 100644 --- a/packages/vs-code-integration/CHANGELOG.md +++ b/packages/vs-code-integration/CHANGELOG.md @@ -1,5 +1,9 @@ # CHANGELOG +## 1.4.0 + +- Added the ability to generate your own files + ## 1.3.0 - Added the ability to hide logs diff --git a/packages/vs-code-integration/README.md b/packages/vs-code-integration/README.md index fdb0efb..1af4df5 100644 --- a/packages/vs-code-integration/README.md +++ b/packages/vs-code-integration/README.md @@ -450,3 +450,7 @@ If you are generating a custom types property on your CEM component object and y ## Scoping Tags If your project is scoping components using prefixes or suffixes in the tag name, you can generate a custom data config file using your scoping using the `prefix` or `suffix` option (`prefix: "test_"` => `test_my-element`). + +## Generate Your Own Files + +If you need to be able tp generate your own file, you can use the `getVsCodeHtmlCustomData(manifest, options)` and `getVsCodeCssCustomData(manifest, options)` methods. These methods will return the HTML and CSS config data and you can choose where and how the file gets written. diff --git a/packages/vs-code-integration/package.json b/packages/vs-code-integration/package.json index faa44e3..9cee3a5 100644 --- a/packages/vs-code-integration/package.json +++ b/packages/vs-code-integration/package.json @@ -1,6 +1,6 @@ { "name": "custom-element-vs-code-integration", - "version": "1.3.0", + "version": "1.4.0", "description": "Tools for integrating web components/custom elements into VS Code", "main": "index.js", "module": "index.js", diff --git a/packages/vs-code-integration/src/data-file-generator.ts b/packages/vs-code-integration/src/data-file-generator.ts index bb5cddb..dd660a9 100644 --- a/packages/vs-code-integration/src/data-file-generator.ts +++ b/packages/vs-code-integration/src/data-file-generator.ts @@ -20,16 +20,16 @@ export function generateVsCodeCustomElementData( customElementsManifest: CEM, options: Options, ) { - if (options.skip) { + if (options?.skip) { logYellow( "[custom-element-vs-code-integration] - Skipped", - options.hideLogs, + options?.hideLogs, ); return; } log( "[custom-element-vs-code-integration] - Updating Custom Elements Manifest...", - options.hideLogs, + options?.hideLogs, ); options = getOptions(options); @@ -58,6 +58,45 @@ export function generateVsCodeCustomElementData( logGreen(`[vs-code-custom-data-generator] - Generated ${outputPath}.`); } +/** + * Returns the file contents for the VS Code HTML custom data + * @param customElementsManifest + * @param options + * @returns + */ +export function getVsCodeHtmlCustomData( + customElementsManifest: CEM, + options: Options, +) { + options = getOptions(options); + const components = getComponents( + customElementsManifest, + options.exclude, + ).filter((x) => x.tagName); + const htmlTags = getTagList(components, options); + return getCustomHtmlDataFileContents(htmlTags); +} + +/** + * Returns the file contents for the VS Code CSS custom data + * @param customElementsManifest + * @param options + * @returns + */ +export function getVsCodeCssCustomData( + customElementsManifest: CEM, + options: Options, +) { + options = getOptions(options); + const components = getComponents( + customElementsManifest, + options.exclude, + ).filter((x) => x.tagName); + const cssProperties = getCssPropertyList(components, options.cssSets); + const cssParts = getCssPartList(components); + return getCustomCssDataFileContents(cssProperties, cssParts); +} + export function getOptions(options: Options) { options = updateConfig(options); options.htmlFileName = diff --git a/packages/vs-code-integration/src/index.ts b/packages/vs-code-integration/src/index.ts index 8cc2d6d..cf18d73 100644 --- a/packages/vs-code-integration/src/index.ts +++ b/packages/vs-code-integration/src/index.ts @@ -1,3 +1,7 @@ -export { generateVsCodeCustomElementData } from "./data-file-generator.js"; +export { + generateVsCodeCustomElementData, + getVsCodeHtmlCustomData, + getVsCodeCssCustomData, +} from "./data-file-generator.js"; export { customElementVsCodePlugin } from "./cem-analyzer-plugin.js"; export type { Options } from "./types";