Merge pull request #147 from break-stuff/export-file-content-generator

add ability to programmatically generate file contents
break-stuff · Jul 21, 2024 · 84d2040 · 84d2040
2 parents 1643b28 + f709fd6
commit 84d2040
Show file tree

Hide file tree

Showing 14 changed files with 124 additions and 104 deletions.
diff --git 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
@@ -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
@@ -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<radio-group value=\"2\" size=\"3\">\n  <span slot=\"label\">My Label</span>\n  <radio-button value=\"1\">Option 1</radio-button>\n  <radio-button value=\"2\">Option 2</radio-button>\n  <radio-button value=\"3\">Option 3</radio-button>\n</radio-group>\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<radio-group value=\"2\" size=\"3\">\n  <span slot=\"label\">My Label</span>\n  <radio-button value=\"1\">Option 1</radio-button>\n  <radio-button value=\"2\">Option 2</radio-button>\n  <radio-button value=\"3\">Option 3</radio-button>\n</radio-group>\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
@@ -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<radio-group value=\"2\" size=\"3\">\n  <span slot=\"label\">My Label</span>\n  <radio-button value=\"1\">Option 1</radio-button>\n  <radio-button value=\"2\">Option 2</radio-button>\n  <radio-button value=\"3\">Option 3</radio-button>\n</radio-group>\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<radio-group value=\"2\" size=\"3\">\n  <span slot=\"label\">My Label</span>\n  <radio-button value=\"1\">Option 1</radio-button>\n  <radio-button value=\"2\">Option 2</radio-button>\n  <radio-button value=\"3\">Option 3</radio-button>\n</radio-group>\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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",