diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..6e4a826 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,30 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "parser": "@typescript-eslint/parser", + "plugins": ["@typescript-eslint"], + "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"], + "overrides": [ + { + "env": { + "node": true + }, + "files": [ + ".eslintrc.{js,cjs,ts}" + ], + "parserOptions": { + "sourceType": "script" + } + } + ], + "parserOptions": { + "ecmaVersion": "latest", + "sourceType": "module" + }, + "rules": { + "@typescript-eslint/no-unused-vars": "error", + "@typescript-eslint/consistent-type-definitions": ["error", "type"] + } +} diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 5b999ef..0000000 --- a/.eslintrc.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - root: true, - // This tells ESLint to load the config from the package `eslint-config-custom` - extends: ["custom"], - settings: { - next: { - rootDir: ["apps/*/"], - }, - }, -}; diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index eda3e1c..bcdc255 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -20,17 +20,22 @@ jobs: with: fetch-depth: 2 + - name: Setup pnpm + uses: pnpm/action-setup@v3 + with: + version: 8 + - name: Setup Node.js environment uses: actions/setup-node@v3 with: - node-version: 18 - cache: 'npm' - + node-version: 20 + cache: 'pnpm' + - name: Install dependencies - run: npm ci + run: pnpm install - name: Analyze - run: npm run analyze + run: pnpm analyze - name: Test - run: npm run test \ No newline at end of file + run: pnpm test \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..f2e9362 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +**/*.d.ts +**/node_modules +**/dist diff --git a/.prettierrc.mjs b/.prettierrc.mjs new file mode 100644 index 0000000..4223cf4 --- /dev/null +++ b/.prettierrc.mjs @@ -0,0 +1,10 @@ +/** @type {import("prettier").Config} */ +const config = { + trailingComma: "es5", + tabWidth: 2, + semi: true, + singleQuote: true, + bracketSpacing: true, +}; + +export default config; \ No newline at end of file diff --git a/README.md b/README.md index 695a080..b68e02d 100644 --- a/README.md +++ b/README.md @@ -12,4 +12,4 @@ This is a collection of tools based off the [Custom Elements Manifest](https://g - [React Wrappers](https://github.com/break-stuff/cem-tools/tree/main/packages/react-wrappers#readme) - a tool for generating react-compatible wrappers for custom elements - [SolidJS Integration](https://github.com/break-stuff/cem-tools/tree/main/packages/solidjs-integration#readme) - a custom type generator to convert the CEM data into usable types to integrate custom elements into [SolidJS projects](https://www.solidjs.com/) - [Vue.js Integration](https://github.com/break-stuff/cem-tools/tree/main/packages/vuejs-integration#readme) - a custom type generator to convert the CEM data into usable types to integrate custom elements into [Vue.js projects](https://vuejs.org/) -- [VS Code Integration](https://github.com/break-stuff/cem-tools/tree/main/packages/vs-code-integration#readme) - a mapper to take the information captured in the CEM and generate the appropriate HTML and CSS data files for for VS Code integration \ No newline at end of file +- [VS Code Integration](https://github.com/break-stuff/cem-tools/tree/main/packages/vs-code-integration#readme) - a mapper to take the information captured in the CEM and generate the appropriate HTML and CSS data files for for VS Code integration diff --git a/demo/lit-app/custom-element-vuejs.d.ts b/demo/lit-app/custom-element-vuejs.d.ts deleted file mode 100644 index dced227..0000000 --- a/demo/lit-app/custom-element-vuejs.d.ts +++ /dev/null @@ -1,118 +0,0 @@ -import type { DefineComponent } from "vue"; - -import type { RadioGroup, InterfaceEventType } from "./dist/radio-group/RadioGroup.d.ts"; -import type { RadioButton } from "./dist/radio-button/RadioButton.d.ts"; - -type RadioGroupProps = { - /** The value assigned to the radio button. This will reflect in the radio group when clicked. */ - value?: RadioGroup["value"]; - /** Disables the radio group and all of its radio buttons */ - disabled?: RadioGroup["disabled"]; - /** This will control the size of the radio buttons */ - size?: RadioGroup["size"]; - /** This is a test for internal options */ - variants?: RadioGroup["variants"]; - /** This is a test for external d.ts options */ - external?: RadioGroup["external"]; - /** This is a test for external .ts options */ - external2?: RadioGroup["external2"]; - /** This is a test for external .ts options */ - external3?: RadioGroup["external3"]; - /** This is a test for options from an object */ - complex?: RadioGroup["complex"]; - /** This is a camel-case attribute */ - "my-attribute"?: RadioGroup["myAttribute"]; - /** This is a test for options from an object */ - "complex-union"?: RadioGroup["complexUnion"]; - /** This is data object */ - data?: RadioGroup["data"]; - /** */ - customTag?: RadioGroup["customTag"]; - /** some description for custom-event */ - onCustomEvent?: (e: CustomEvent) => void; - /** some description for typed-event */ - onTypedEvent?: (e: CustomEvent) => void; - /** some description for typed-custom-event */ - onTypedCustomEvent?: (e: CustomEvent) => void; -}; - -type RadioButtonProps = { - /** The value assigned to the radio button. This will reflect in the radio group when clicked. */ - value?: RadioButton["value"]; - /** Disables the radio button */ - disabled?: RadioButton["disabled"]; - /** A lookup type for example */ - target?: RadioButton["target"]; - /** A mapped attribute for react wrapper example */ - for?: RadioButton["for"]; - /** Enum example */ - position?: RadioButton["position"]; -}; - -export type CustomElements = { - /** - * - * Radio 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). - * - * Use it like this: - * ```html - * - * My Label - * Option 1 - * Option 2 - * Option 3 - * - * ``` - * --- - * - * - * ### **Events:** - * - **custom-event** - some description for custom-event - * - **typed-event** - some description for typed-event - * - **typed-custom-event** - some description for typed-custom-event - * - * ### **Methods:** - * - **validate()** - Validated the radio inputs - * - **checkStatus(value: _string_, message: _string_): _string_** - This is a test method with parameters - * - * - * ### **Slots:** - * - _default_ - add radio buttons to the `default` slot to create options to your radio group - * - **label** - placeholder for the radio group label - * - * ### **CSS Properties:** - * - **--radio-border-radius** - Controls the border radius of the radio buttons _(default: undefined)_ - * - **--radio-background-color** - Controls the color of bar _(default: red)_ - * - * ### **CSS Parts:** - * - **radio-label** - Applies custom styles the radio group label - */ - "radio-group": DefineComponent; - - /** - * Radio buttons allow users to select a single option from a group. Here is its [documentation](https://my-site.com/documentation). - * - * Use it like this: - * ```html - * Your label - * ``` - * --- - * - * - * ### **Slots:** - * - _default_ - add text here to label your radio button - */ - "radio-button": DefineComponent; -}; - -declare module "vue" { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - interface GlobalComponents extends CustomElements {} -} - -declare global { - namespace JSX { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - interface IntrinsicElements extends CustomElements {} - } -} diff --git a/demo/lit-app/custom-elements.json b/demo/lit-app/custom-elements.json index e153d9c..dc328ae 100644 --- a/demo/lit-app/custom-elements.json +++ b/demo/lit-app/custom-elements.json @@ -4,10 +4,805 @@ "modules": [ { "kind": "javascript-module", - "path": "src/radio-group/alt-types.ts", + "path": "build.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "*", + "declaration": { + "name": "*", + "package": "\"./src/index.js\"" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "loader.js", + "declarations": [ + { + "kind": "function", + "name": "updateConfig", + "parameters": [ + { + "name": "config" + } + ], + "description": "Update the lazy-loader configuration at runtime" + } + ], + "exports": [ + { + "kind": "js", + "name": "updateConfig", + "declaration": { + "name": "updateConfig", + "module": "loader.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "test.ts", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/index.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "RadioGroup", + "declaration": { + "name": "RadioGroup", + "module": "\"./radio-group/RadioGroup\"" + } + }, + { + "kind": "js", + "name": "RadioButton", + "declaration": { + "name": "RadioButton", + "module": "\"./radio-button/RadioButton\"" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/lit-app.js", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "l", + "members": [ + { + "kind": "method", + "name": "validate", + "description": "Validated the radio inputs" + }, + { + "kind": "method", + "name": "checkStatus", + "parameters": [ + { + "name": "e" + }, + { + "name": "o" + } + ], + "description": "This is a test method with parameters" + }, + { + "kind": "method", + "name": "protectedMethod", + "description": "This is a test method that is protected" + }, + { + "kind": "method", + "name": "render" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"" + }, + { + "kind": "field", + "name": "size", + "type": { + "text": "string" + }, + "default": "\"md\"" + }, + { + "kind": "field", + "name": "variants", + "type": { + "text": "string" + }, + "default": "\"primary\"" + }, + { + "kind": "field", + "name": "external", + "type": { + "text": "string" + }, + "default": "\"value1\"" + }, + { + "kind": "field", + "name": "external2", + "type": { + "text": "string" + }, + "default": "\"value4\"" + }, + { + "kind": "field", + "name": "complex", + "type": { + "text": "string" + }, + "default": "\"single\"" + } + ], + "superclass": { + "name": "v", + "package": "lit" + } + }, + { + "kind": "class", + "description": "", + "name": "y", + "members": [ + { + "kind": "method", + "name": "render" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"" + } + ], + "superclass": { + "name": "v", + "package": "lit" + } + } + ], + "exports": [ + { + "kind": "js", + "name": "RadioButton", + "declaration": { + "name": "y", + "module": "dist/lit-app.js" + } + }, + { + "kind": "js", + "name": "RadioGroup", + "declaration": { + "name": "l", + "module": "dist/lit-app.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/index.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "RadioGroup", + "declaration": { + "name": "RadioGroup", + "module": "\"./radio-group/RadioGroup\"" + } + }, + { + "kind": "js", + "name": "ComplexObjectType", + "declaration": { + "name": "ComplexObjectType", + "module": "\"./radio-group/RadioGroup\"" + } + }, + { + "kind": "js", + "name": "InterfaceEventType", + "declaration": { + "name": "InterfaceEventType", + "module": "\"./radio-group/RadioGroup\"" + } + }, + { + "kind": "js", + "name": "RadioButton", + "declaration": { + "name": "RadioButton", + "module": "\"./radio-button/RadioButton\"" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/lazy/loader.js", + "declarations": [ + { + "kind": "function", + "name": "updateConfig", + "parameters": [ + { + "name": "config" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "updateConfig", + "declaration": { + "name": "updateConfig", + "module": "dist/lazy/loader.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/radio-button/RadioButton.js", + "declarations": [ + { + "kind": "variable", + "name": "Direction" + }, + { + "kind": "class", + "description": "", + "name": "RadioButton", + "slots": [ + { + "description": "add text here to label your radio button", + "name": "" + } + ], + "members": [ + { + "kind": "method", + "name": "render" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "description": "The value assigned to the radio button. This will reflect in the radio group when clicked.", + "default": "\"\"" + }, + { + "kind": "field", + "name": "position", + "description": "Enum example" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "radio-button", + "summary": "Radio buttons allow users to select a single option from a group. Here is its [documentation](https://my-site.com/documentation).\\n\\nUse it like this:\\n```html\\nYour label\\n```", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "Direction", + "declaration": { + "name": "Direction", + "module": "dist/radio-button/RadioButton.js" + } + }, + { + "kind": "js", + "name": "RadioButton", + "declaration": { + "name": "RadioButton", + "module": "dist/radio-button/RadioButton.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/radio-button/radio-button.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "RadioButton", + "declaration": { + "name": "RadioButton", + "module": "dist/radio-button/radio-button.js" + } + }, + { + "kind": "custom-element-definition", + "name": "radio-button", + "declaration": { + "name": "RadioButton", + "module": "/dist/radio-button/RadioButton.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/react/RadioButton.js", + "declarations": [ + { + "kind": "variable", + "name": "RadioButton" + } + ], + "exports": [ + { + "kind": "js", + "name": "RadioButton", + "declaration": { + "name": "RadioButton", + "module": "dist/react/RadioButton.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/react/RadioGroup.js", + "declarations": [ + { + "kind": "variable", + "name": "RadioGroup" + } + ], + "exports": [ + { + "kind": "js", + "name": "RadioGroup", + "declaration": { + "name": "RadioGroup", + "module": "dist/react/RadioGroup.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/react/index.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "*", + "declaration": { + "name": "*", + "package": "\"./RadioGroup.js\"" + } + }, + { + "kind": "js", + "name": "*", + "declaration": { + "name": "*", + "package": "\"./RadioButton.js\"" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/react/react-utils.js", + "declarations": [ + { + "kind": "function", + "name": "useProperties", + "parameters": [ + { + "name": "targetElement" + }, + { + "name": "propName" + }, + { + "name": "value" + } + ] + }, + { + "kind": "function", + "name": "useEventListener", + "parameters": [ + { + "name": "targetElement" + }, + { + "name": "eventName" + }, + { + "name": "eventHandler" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "useProperties", + "declaration": { + "name": "useProperties", + "module": "dist/react/react-utils.js" + } + }, + { + "kind": "js", + "name": "useEventListener", + "declaration": { + "name": "useEventListener", + "module": "dist/react/react-utils.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/radio-group/RadioGroup.js", + "declarations": [ + { + "kind": "variable", + "name": "ComplexObject", + "type": { + "text": "object" + }, + "default": "{\n /** Designates only a single can be open a time. */\n single: \"single\",\n /** Designates multiple can be open simultaneously. */\n multi: \"multi\",\n}" + }, + { + "kind": "class", + "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```", + "name": "RadioGroup", + "cssProperties": [ + { + "type": { + "text": "set:radiuses" + }, + "description": "Controls the border radius of the radio buttons", + "name": "--radio-border-radius" + }, + { + "description": "Controls the color of bar", + "name": "--radio-background-color", + "default": "red" + } + ], + "cssParts": [ + { + "description": "Applies custom styles the radio group label", + "name": "radio-label" + } + ], + "slots": [ + { + "description": "add radio buttons to the `default` slot to create options to your radio group", + "name": "" + }, + { + "description": "placeholder for the radio group label", + "name": "label" + } + ], + "members": [ + { + "kind": "method", + "name": "validate", + "description": "Validated the radio inputs" + }, + { + "kind": "method", + "name": "checkStatus", + "parameters": [ + { + "name": "value" + }, + { + "name": "message" + } + ], + "description": "This is a test method with parameters" + }, + { + "kind": "field", + "name": "customTag" + }, + { + "kind": "method", + "name": "protectedMethod", + "description": "This is a test method that is protected" + }, + { + "kind": "method", + "name": "render" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "description": "The value assigned to the radio button. This will reflect in the radio group when clicked.", + "default": "\"\"" + }, + { + "kind": "field", + "name": "size", + "type": { + "text": "string" + }, + "description": "This will control the size of the radio buttons", + "default": "\"md\"" + }, + { + "kind": "field", + "name": "variants", + "type": { + "text": "string" + }, + "description": "This is a test for internal options", + "default": "\"primary\"" + }, + { + "kind": "field", + "name": "external", + "type": { + "text": "string" + }, + "description": "This is a test for external d.ts options", + "default": "\"value1\"" + }, + { + "kind": "field", + "name": "external2", + "type": { + "text": "string" + }, + "description": "This is a test for external .ts options", + "default": "\"value4\"" + }, + { + "kind": "field", + "name": "external3", + "type": { + "text": "string" + }, + "description": "This is a test for external .ts options", + "default": "\"value8\"" + }, + { + "kind": "field", + "name": "complex", + "type": { + "text": "string" + }, + "description": "This is a test for options from an object", + "default": "\"single\"" + } + ], + "events": [ + { + "description": "some description for custom-event", + "name": "custom-event" + }, + { + "type": { + "text": "HTMLInputElement" + }, + "description": "some description for typed-event", + "name": "typed-event" + }, + { + "type": { + "text": "InterfaceEventType" + }, + "description": "some description for typed-custom-event", + "name": "typed-custom-event" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "radio-group", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "ComplexObject", + "declaration": { + "name": "ComplexObject", + "module": "dist/radio-group/RadioGroup.js" + } + }, + { + "kind": "js", + "name": "RadioGroup", + "declaration": { + "name": "RadioGroup", + "module": "dist/radio-group/RadioGroup.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/radio-group/alt-types.js", "declarations": [], "exports": [] }, + { + "kind": "javascript-module", + "path": "dist/radio-group/radio-group.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "RadioGroup", + "declaration": { + "name": "RadioGroup", + "module": "dist/radio-group/radio-group.js" + } + }, + { + "kind": "custom-element-definition", + "name": "radio-group", + "declaration": { + "name": "RadioGroup", + "module": "/dist/radio-group/RadioGroup.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/radio-button/RadioButton.ts", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "RadioButton", + "slots": [ + { + "description": "add text here to label your radio button", + "name": "" + } + ], + "members": [ + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "The value assigned to the radio button. This will reflect in the radio group when clicked." + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean | undefined" + }, + "description": "Disables the radio button" + }, + { + "kind": "field", + "name": "target", + "type": { + "text": "Target | undefined" + }, + "description": "A lookup type for example" + }, + { + "kind": "field", + "name": "for", + "type": { + "text": "string | undefined" + }, + "description": "A mapped attribute for react wrapper example" + }, + { + "kind": "field", + "name": "position", + "type": { + "text": "string | undefined" + }, + "description": "Enum example" + }, + { + "kind": "method", + "name": "render" + } + ], + "superclass": { + "name": "LitElement", + "package": "lit" + }, + "tagName": "radio-button", + "summary": "Radio buttons allow users to select a single option from a group. Here is its [documentation](https://my-site.com/documentation).\\n\\nUse it like this:\\n```html\\nYour label\\n```", + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "RadioButton", + "declaration": { + "name": "RadioButton", + "module": "src/radio-button/RadioButton.ts" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "src/radio-button/radio-button.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "RadioButton", + "declaration": { + "name": "RadioButton", + "module": "src/radio-button/radio-button.ts" + } + }, + { + "kind": "custom-element-definition", + "name": "radio-button", + "declaration": { + "name": "RadioButton", + "module": "/src/radio-button/RadioButton.js" + } + } + ] + }, { "kind": "javascript-module", "path": "src/radio-group/RadioGroup.ts", @@ -16,9 +811,9 @@ "kind": "variable", "name": "ComplexObject", "type": { - "text": "{\n /** Designates only a single can be open a time. */\n single: 'single',\n\n /** Designates multiple can be open simultaneously. */\n multi: 'multi',\n}" + "text": "{\n /** Designates only a single can be open a time. */\n single: \"single\",\n\n /** Designates multiple can be open simultaneously. */\n multi: \"multi\",\n}" }, - "default": "{\n /** Designates only a single can be open a time. */\n single: 'single',\n\n /** Designates multiple can be open simultaneously. */\n multi: 'multi',\n}" + "default": "{\n /** Designates only a single can be open a time. */\n single: \"single\",\n\n /** Designates multiple can be open simultaneously. */\n multi: \"multi\",\n}" }, { "kind": "class", @@ -62,8 +857,7 @@ "text": "string" }, "default": "\"\"", - "description": "The value assigned to the radio button. This will reflect in the radio group when clicked.", - "attribute": "value" + "description": "The value assigned to the radio button. This will reflect in the radio group when clicked." }, { "kind": "field", @@ -71,18 +865,16 @@ "type": { "text": "boolean | undefined" }, - "description": "Disables the radio group and all of its radio buttons", - "attribute": "disabled" + "description": "Disables the radio group and all of its radio buttons" }, { "kind": "field", "name": "size", "type": { - "text": "'sm' | 'md' | 'lg' | 'xl'" + "text": "\"sm\" | \"md\" | \"lg\" | \"xl\"" }, - "default": "'md'", - "description": "This will control the size of the radio buttons", - "attribute": "size" + "default": "\"md\"", + "description": "This will control the size of the radio buttons" }, { "kind": "field", @@ -90,12 +882,8 @@ "type": { "text": "Variants" }, - "default": "'primary'", - "description": "This is a test for internal options", - "attribute": "variants", - "expandedType": { - "text": "'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'" - } + "default": "\"primary\"", + "description": "This is a test for internal options" }, { "kind": "field", @@ -103,12 +891,8 @@ "type": { "text": "Test" }, - "default": "'value1'", - "description": "This is a test for external d.ts options", - "attribute": "external", - "expandedType": { - "text": "'value1' | 'value2' | 'value3'" - } + "default": "\"value1\"", + "description": "This is a test for external d.ts options" }, { "kind": "field", @@ -116,12 +900,8 @@ "type": { "text": "Example" }, - "default": "'value4'", - "description": "This is a test for external .ts options", - "attribute": "external2", - "expandedType": { - "text": "'value4' | 'value5' | 'value6' | 'valueA' | 'valueB'" - } + "default": "\"value4\"", + "description": "This is a test for external .ts options" }, { "kind": "field", @@ -129,12 +909,8 @@ "type": { "text": "Test3" }, - "default": "'value8'", - "description": "This is a test for external .ts options", - "attribute": "external3", - "expandedType": { - "text": "'value7' | 'value8' | 'value9'" - } + "default": "\"value8\"", + "description": "This is a test for external .ts options" }, { "kind": "field", @@ -142,12 +918,8 @@ "type": { "text": "ComplexObjectType" }, - "default": "'single'", - "description": "This is a test for options from an object", - "attribute": "complex", - "expandedType": { - "text": "'single' | 'multi'" - } + "default": "\"single\"", + "description": "This is a test for options from an object" }, { "kind": "field", @@ -155,19 +927,15 @@ "type": { "text": "string | undefined" }, - "description": "This is a camel-case attribute", - "attribute": "my-attribute" + "description": "This is a camel-case attribute" }, { "kind": "field", "name": "data", "type": { - "text": "{\n // The name.\n name?: string,\n /** The type. */\n type?: string,\n /** The value. */\n value?: number,\n } | undefined" + "text": "{\n // The name.\n name?: string;\n /** The type. */\n type?: string;\n /** The value. */\n value?: number;\n } | undefined" }, - "description": "This is data object", - "expandedType": { - "text": "{\n // The name.\n name??: string,\n /** The type. */\n type?: string,\n /** The value. */\n value?: number,\n } | undefined" - } + "description": "This is data object" }, { "kind": "field", @@ -175,11 +943,7 @@ "type": { "text": "ChildSize | undefined" }, - "description": "This is a test for options from an object", - "attribute": "complex-union", - "expandedType": { - "text": "'small' | 'medium' | 'large' | 'extra-small' | undefined" - } + "description": "This is a test for options from an object" }, { "kind": "field", @@ -188,7 +952,7 @@ "type": { "text": "string" }, - "default": "'private'", + "default": "\"private\"", "description": "This is a test for a private property" }, { @@ -234,6 +998,10 @@ "name": "protectedMethod", "privacy": "protected", "description": "This is a test method that is protected" + }, + { + "kind": "method", + "name": "render" } ], "events": [ @@ -256,123 +1024,6 @@ "name": "typed-custom-event" } ], - "attributes": [ - { - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "The value assigned to the radio button. This will reflect in the radio group when clicked.", - "fieldName": "value", - "propName": "value" - }, - { - "name": "disabled", - "type": { - "text": "boolean | undefined" - }, - "description": "Disables the radio group and all of its radio buttons", - "fieldName": "disabled", - "propName": "disabled" - }, - { - "name": "size", - "type": { - "text": "'sm' | 'md' | 'lg' | 'xl'" - }, - "default": "'md'", - "description": "This will control the size of the radio buttons", - "fieldName": "size", - "propName": "size" - }, - { - "name": "variants", - "type": { - "text": "Variants" - }, - "default": "'primary'", - "description": "This is a test for internal options", - "fieldName": "variants", - "expandedType": { - "text": "'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'" - }, - "propName": "variants" - }, - { - "name": "external", - "type": { - "text": "Test" - }, - "default": "'value1'", - "description": "This is a test for external d.ts options", - "fieldName": "external", - "expandedType": { - "text": "'value1' | 'value2' | 'value3'" - }, - "propName": "external" - }, - { - "name": "external2", - "type": { - "text": "Example" - }, - "default": "'value4'", - "description": "This is a test for external .ts options", - "fieldName": "external2", - "expandedType": { - "text": "'value4' | 'value5' | 'value6' | 'valueA' | 'valueB'" - }, - "propName": "external2" - }, - { - "name": "external3", - "type": { - "text": "Test3" - }, - "default": "'value8'", - "description": "This is a test for external .ts options", - "fieldName": "external3", - "expandedType": { - "text": "'value7' | 'value8' | 'value9'" - }, - "propName": "external3" - }, - { - "name": "complex", - "type": { - "text": "ComplexObjectType" - }, - "default": "'single'", - "description": "This is a test for options from an object", - "fieldName": "complex", - "expandedType": { - "text": "'single' | 'multi'" - }, - "propName": "complex" - }, - { - "name": "my-attribute", - "type": { - "text": "string | undefined" - }, - "description": "This is a camel-case attribute", - "fieldName": "myAttribute", - "propName": "myAttribute" - }, - { - "name": "complex-union", - "type": { - "text": "ChildSize | undefined" - }, - "description": "This is a test for options from an object", - "fieldName": "complexUnion", - "expandedType": { - "text": "'small' | 'medium' | 'large' | 'extra-small' | undefined" - }, - "propName": "complexUnion" - } - ], "superclass": { "name": "LitElement", "package": "lit" @@ -402,201 +1053,9 @@ }, { "kind": "javascript-module", - "path": "src/radio-button/RadioButton.ts", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "RadioButton", - "slots": [ - { - "description": "add text here to label your radio button", - "name": "" - } - ], - "members": [ - { - "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "The value assigned to the radio button. This will reflect in the radio group when clicked.", - "attribute": "value" - }, - { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean | undefined" - }, - "description": "Disables the radio button", - "attribute": "disabled" - }, - { - "kind": "field", - "name": "target", - "type": { - "text": "Target | undefined" - }, - "description": "A lookup type for example", - "attribute": "target", - "expandedType": { - "text": "'_blank' | '_self' | '_parent' | '_top' | undefined" - } - }, - { - "kind": "field", - "name": "for", - "type": { - "text": "string | undefined" - }, - "description": "A mapped attribute for react wrapper example", - "attribute": "for" - }, - { - "kind": "field", - "name": "position", - "type": { - "text": "string | undefined" - }, - "description": "Enum example", - "attribute": "position" - } - ], - "attributes": [ - { - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "The value assigned to the radio button. This will reflect in the radio group when clicked.", - "fieldName": "value", - "propName": "value" - }, - { - "name": "disabled", - "type": { - "text": "boolean | undefined" - }, - "description": "Disables the radio button", - "fieldName": "disabled", - "propName": "disabled" - }, - { - "name": "target", - "type": { - "text": "Target | undefined" - }, - "description": "A lookup type for example", - "fieldName": "target", - "expandedType": { - "text": "'_blank' | '_self' | '_parent' | '_top' | undefined" - }, - "propName": "target" - }, - { - "name": "for", - "type": { - "text": "string | undefined" - }, - "description": "A mapped attribute for react wrapper example", - "fieldName": "for", - "propName": "for" - }, - { - "name": "position", - "type": { - "text": "string | undefined" - }, - "description": "Enum example", - "fieldName": "position", - "propName": "position" - } - ], - "superclass": { - "name": "LitElement", - "package": "lit" - }, - "tagName": "radio-button", - "summary": "Radio buttons allow users to select a single option from a group. Here is its [documentation](https://my-site.com/documentation).\\n\\nUse it like this:\\n```html\\nYour label\\n```", - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "RadioButton", - "declaration": { - "name": "RadioButton", - "module": "src/radio-button/RadioButton.ts" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/index.ts", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "RadioGroup", - "declaration": { - "name": "RadioGroup", - "module": "./radio-group/RadioGroup" - } - }, - { - "kind": "js", - "name": "ComplexObjectType", - "declaration": { - "name": "ComplexObjectType", - "module": "./radio-group/RadioGroup" - } - }, - { - "kind": "js", - "name": "InterfaceEventType", - "declaration": { - "name": "InterfaceEventType", - "module": "./radio-group/RadioGroup" - } - }, - { - "kind": "js", - "name": "RadioButton", - "declaration": { - "name": "RadioButton", - "module": "./radio-button/RadioButton" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "src/radio-button/radio-button.ts", + "path": "src/radio-group/alt-types.ts", "declarations": [], - "exports": [ - { - "kind": "js", - "name": "RadioButton", - "declaration": { - "name": "RadioButton", - "module": "src/radio-button/radio-button.ts" - } - }, - { - "kind": "custom-element-definition", - "name": "radio-button", - "declaration": { - "name": "RadioButton", - "module": "/src/radio-button/RadioButton.js" - } - } - ] + "exports": [] }, { "kind": "javascript-module", diff --git a/demo/lit-app/index.ts b/demo/lit-app/index.ts index 411323e..e258df1 100644 --- a/demo/lit-app/index.ts +++ b/demo/lit-app/index.ts @@ -1 +1 @@ -export * from "./src/index.js"; \ No newline at end of file +export * from "./src/index.js"; diff --git a/demo/lit-app/package.json b/demo/lit-app/package.json index 6a8e34e..0eecd36 100644 --- a/demo/lit-app/package.json +++ b/demo/lit-app/package.json @@ -16,6 +16,7 @@ "lit": "^2.7.6" }, "devDependencies": { + "@custom-elements-manifest/analyzer": "^0.6.6", "cem-plugin-expanded-types": "*", "custom-element-jet-brains-integration": "*", "custom-element-jsx-integration": "*", diff --git a/demo/lit-app/solid-js.d.ts b/demo/lit-app/solid-js.d.ts index 7dd74fa..bfb3c2b 100644 --- a/demo/lit-app/solid-js.d.ts +++ b/demo/lit-app/solid-js.d.ts @@ -35,12 +35,12 @@ type BaseProps = { dir?: "ltr" | "rtl"; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; - /** For