diff --git a/.prettierrc.mjs b/.prettierrc.mjs index 38a7df3..46be75b 100644 --- a/.prettierrc.mjs +++ b/.prettierrc.mjs @@ -3,7 +3,6 @@ * @type {import("prettier").Config} */ const config = { - trailingComma: "all", tabWidth: 2, semi: true, singleQuote: false, diff --git a/demo/lit-app/custom-element-jsx.d.ts b/demo/lit-app/custom-element-jsx.d.ts index 37dbd18..c50227d 100644 --- a/demo/lit-app/custom-element-jsx.d.ts +++ b/demo/lit-app/custom-element-jsx.d.ts @@ -1,4 +1,7 @@ -import type { RadioGroup, InterfaceEventType } from "./dist/radio-group/RadioGroup.d.ts"; +import type { + RadioGroup, + InterfaceEventType, +} from "./dist/radio-group/RadioGroup.d.ts"; import type { RadioButton } from "./dist/radio-button/RadioButton.d.ts"; import type { DeprecatedElement } from "./dist/deprecated-element/DeprecatedElement.d.ts"; import type { MyButton } from "./dist/my-button/MyButton.d.ts"; @@ -20,7 +23,10 @@ import type { MyButton } from "./dist/my-button/MyButton.d.ts"; * ``` * */ -export type ScopedElements = { +export type ScopedElements< + Prefix extends string = "", + Suffix extends string = "", +> = { [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key]; }; @@ -179,7 +185,9 @@ export type CustomElements = { * --- * */ - "deprecated-element": Partial; + "deprecated-element": Partial< + DeprecatedElementProps | BaseProps | BaseEvents + >; /** * diff --git a/demo/lit-app/custom-element-vuejs.d.ts b/demo/lit-app/custom-element-vuejs.d.ts index 68dcf81..c2a74a0 100644 --- a/demo/lit-app/custom-element-vuejs.d.ts +++ b/demo/lit-app/custom-element-vuejs.d.ts @@ -1,6 +1,9 @@ import type { DefineComponent } from "vue"; -import type { RadioGroup, InterfaceEventType } from "./dist/radio-group/RadioGroup.d.ts"; +import type { + RadioGroup, + InterfaceEventType, +} from "./dist/radio-group/RadioGroup.d.ts"; import type { RadioButton } from "./dist/radio-button/RadioButton.d.ts"; import type { DeprecatedElement } from "./dist/deprecated-element/DeprecatedElement.d.ts"; import type { MyButton } from "./dist/my-button/MyButton.d.ts"; diff --git a/demo/lit-app/custom-elements-svelte.d.ts b/demo/lit-app/custom-elements-svelte.d.ts index 99fdac4..a43d7d7 100644 --- a/demo/lit-app/custom-elements-svelte.d.ts +++ b/demo/lit-app/custom-elements-svelte.d.ts @@ -1,4 +1,7 @@ -import type { RadioGroup, InterfaceEventType } from "./dist/radio-group/RadioGroup.d.ts"; +import type { + RadioGroup, + InterfaceEventType, +} from "./dist/radio-group/RadioGroup.d.ts"; import type { RadioButton } from "./dist/radio-button/RadioButton.d.ts"; import type { DeprecatedElement } from "./dist/deprecated-element/DeprecatedElement.d.ts"; import type { MyButton } from "./dist/my-button/MyButton.d.ts"; @@ -156,7 +159,9 @@ export type CustomElements = { * --- * */ - "deprecated-element": Partial; + "deprecated-element": Partial< + DeprecatedElementProps | BaseProps | BaseEvents + >; /** * diff --git a/demo/lit-app/loader.js b/demo/lit-app/loader.js index be34ec1..c521a69 100644 --- a/demo/lit-app/loader.js +++ b/demo/lit-app/loader.js @@ -68,7 +68,7 @@ async function load(root) { const rootTagName = root instanceof Element ? root.tagName.toLowerCase() : ""; const tags = [...root.querySelectorAll(":not(:defined)")]?.map((el) => - el.tagName.toLowerCase() + el.tagName.toLowerCase(), ) || []; if (rootTagName.includes("-") && !customElements.get(rootTagName)) { tags.push(rootTagName); @@ -97,7 +97,7 @@ function register(tagName) { }) .catch(() => { console.error( - `Unable to load <${tagName}> from ${component.importPath}` + `Unable to load <${tagName}> from ${component.importPath}`, ); reject(); }); diff --git a/demo/lit-app/solid-js.d.ts b/demo/lit-app/solid-js.d.ts index 11e3ba1..1570138 100644 --- a/demo/lit-app/solid-js.d.ts +++ b/demo/lit-app/solid-js.d.ts @@ -1,6 +1,9 @@ import type { JSX } from "solid-js"; -import type { RadioGroup, InterfaceEventType } from "./dist/radio-group/RadioGroup.d.ts"; +import type { + RadioGroup, + InterfaceEventType, +} from "./dist/radio-group/RadioGroup.d.ts"; import type { RadioButton } from "./dist/radio-button/RadioButton.d.ts"; import type { DeprecatedElement } from "./dist/deprecated-element/DeprecatedElement.d.ts"; import type { MyButton } from "./dist/my-button/MyButton.d.ts"; @@ -22,7 +25,10 @@ import type { MyButton } from "./dist/my-button/MyButton.d.ts"; * ``` * */ -export type ScopedElements = { +export type ScopedElements< + Prefix extends string = "", + Suffix extends string = "", +> = { [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key]; }; @@ -179,7 +185,9 @@ export type CustomElements = { * --- * */ - "deprecated-element": Partial; + "deprecated-element": Partial< + DeprecatedElementProps | BaseProps | BaseEvents + >; /** * diff --git a/packages/react-wrappers/src/wrapper-generator.ts b/packages/react-wrappers/src/wrapper-generator.ts index 672d41d..23bce47 100644 --- a/packages/react-wrappers/src/wrapper-generator.ts +++ b/packages/react-wrappers/src/wrapper-generator.ts @@ -14,7 +14,13 @@ import { saveReactUtils, saveScopeProvider, } from "./utils.js"; -import { createOutDir, log, logGreen, logYellow, saveFile } from "../../../tools/integrations/index.js"; +import { + createOutDir, + log, + logGreen, + logYellow, + saveFile, +} from "../../../tools/integrations/index.js"; import { CEM, Component, @@ -43,10 +49,7 @@ export function generateReactWrappers( logYellow("[react-wrappers] - Skipped", options.hideLogs); return; } - log( - "[react-wrappers] - Generating wrappers...", - options.hideLogs - ); + log("[react-wrappers] - Generating wrappers...", options.hideLogs); updateConfig(options); const components = getComponents(customElementsManifest, config.exclude); @@ -87,7 +90,10 @@ export function generateReactWrappers( }); generateManifests(components, config.outdir!); - logGreen(`[react-wrappers] - Generated wrappers in "${config.outdir}".`, config.hideLogs); + logGreen( + `[react-wrappers] - Generated wrappers in "${config.outdir}".`, + config.hideLogs, + ); } function updateConfig(options: Options) { diff --git a/packages/vuejs-integration/CHANGELOG.md b/packages/vuejs-integration/CHANGELOG.md index 998cfb6..812aa74 100644 --- a/packages/vuejs-integration/CHANGELOG.md +++ b/packages/vuejs-integration/CHANGELOG.md @@ -1,5 +1,9 @@ # CHANGELOG +## 1.3.0 + +- Add tag name prefix and suffix support + ## 1.2.0 - Added the ability to hide logs diff --git a/packages/vuejs-integration/README.md b/packages/vuejs-integration/README.md index cbadeb0..bb9c7b4 100644 --- a/packages/vuejs-integration/README.md +++ b/packages/vuejs-integration/README.md @@ -115,6 +115,10 @@ The configuration has the following optional parameters: hideLogs?: boolean; /** Prevents plugin from executing */ skip?: boolean; + /** Adds a prefix to tag name references */ + prefix?: string; + /** Adds a suffix to tag name references */ + suffix?: string; } ``` diff --git a/packages/vuejs-integration/package.json b/packages/vuejs-integration/package.json index 7f7a26c..b9c6bdf 100644 --- a/packages/vuejs-integration/package.json +++ b/packages/vuejs-integration/package.json @@ -1,6 +1,6 @@ { "name": "custom-element-vuejs-integration", - "version": "1.2.0", + "version": "1.3.0", "description": "Types for integrating custom elements into Vue.js projects", "main": "index.js", "module": "index.js", diff --git a/packages/vuejs-integration/src/type-generator.ts b/packages/vuejs-integration/src/type-generator.ts index d4a8a78..7eff388 100644 --- a/packages/vuejs-integration/src/type-generator.ts +++ b/packages/vuejs-integration/src/type-generator.ts @@ -45,15 +45,14 @@ export function generateVuejsTypes(manifest: any, options: Options) { } function getOptions(options: Options) { - options.fileName = - options.fileName === undefined - ? "custom-element-vuejs.d.ts" - : options.fileName; - options.exclude = options.exclude === undefined ? [] : options.exclude; - options.outdir = options.outdir === undefined ? "./" : options.outdir; - options.prefix = options.prefix === undefined ? "" : options.prefix; - options.suffix = options.suffix === undefined ? "" : options.suffix; - return options; + return { + fileName: "custom-element-vuejs.d.ts", + exclude: [], + outdir: "./", + prefix: "", + suffix: "", + ...options, + }; } function getTypeTemplate(components: Component[], options: Options) { diff --git a/packages/vuejs-integration/src/types.d.ts b/packages/vuejs-integration/src/types.d.ts index ac3411b..846d1e3 100644 --- a/packages/vuejs-integration/src/types.d.ts +++ b/packages/vuejs-integration/src/types.d.ts @@ -16,9 +16,9 @@ export interface Options extends BaseOptions { typesSrc?: string; /** Used to add global element props to all component types */ globalEvents?: string; - /** Adds a prefix to tag references */ + /** Adds a prefix to tag name references */ prefix?: string; - /** Adds a suffix to tag references */ + /** Adds a suffix to tag name references */ suffix?: string; }