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";