From 7aea39a559259ec004d35e50d1963fe68b436b86 Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Tue, 2 Sep 2025 18:32:34 -0500 Subject: [PATCH 1/4] refactor: Switch to '.d.ts' for declaring types --- jsconfig.json | 14 ++++++++++++++ package.json | 3 ++- src/index.d.ts | 25 +++++++++++++++++++++++++ src/index.js | 13 +++++-------- 4 files changed, 46 insertions(+), 9 deletions(-) create mode 100644 jsconfig.json create mode 100644 src/index.d.ts diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..2864c03 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "target": "ESNext", + "module": "NodeNext", + "moduleResolution": "Node", + "noEmit": true, + "allowJs": true, + "checkJs": true, + "skipLibCheck": false, + "jsx": "react", + "jsxFactory": "h", + "jsxFragmentFactory": "Fragment", + } +} diff --git a/package.json b/package.json index 39bb308..c53d272 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "4.4.0", "description": "Wrap your component up as a custom element", "source": "src/index.js", - "types": "dist/index.d.ts", + "types": "src/index.d.ts", "main": "dist/preact-custom-element.js", "module": "dist/preact-custom-element.esm.js", "unpkg": "dist/preact-custom-element.umd.js", @@ -51,6 +51,7 @@ "bugs": "https://github.com/preactjs/preact-custom-element/issues", "homepage": "https://github.com/preactjs/preact-custom-element", "files": [ + "src", "dist", "LICENSE", "package.json", diff --git a/src/index.d.ts b/src/index.d.ts new file mode 100644 index 0000000..86a3f3e --- /dev/null +++ b/src/index.d.ts @@ -0,0 +1,25 @@ +import { h, AnyComponent } from 'preact'; + +type PreactCustomElement = HTMLElement & { + _root: ShadowRoot | HTMLElement; + _vdomComponent: AnyComponent; + _vdom: ReturnType | null; + _props: Record; +}; + +type Options = + | { + shadow: false; + } + | { + shadow: true; + mode?: 'open' | 'closed'; + adoptedStyleSheets?: CSSStyleSheet[]; + }; + +export default function register( + Component: AnyComponent, + tagName?: string, + propNames?: string[], + options?: Options +): void; diff --git a/src/index.js b/src/index.js index 355cb68..831e849 100644 --- a/src/index.js +++ b/src/index.js @@ -1,19 +1,16 @@ import { h, cloneElement, render, hydrate } from 'preact'; /** - * @typedef {import('preact').FunctionComponent | import('preact').ComponentClass | import('preact').FunctionalComponent } ComponentDefinition - * @typedef {{ shadow: false } | { shadow: true, mode?: 'open' | 'closed', adoptedStyleSheets?: CSSStyleSheet[] }} Options - * @typedef {HTMLElement & { _root: ShadowRoot | HTMLElement, _vdomComponent: ComponentDefinition, _vdom: ReturnType | null }} PreactCustomElement + * @typedef {import('./index.d.ts').PreactCustomElement} PreactCustomElement */ /** * Register a preact component as web-component. - * @param {ComponentDefinition} Component The preact component to register - * @param {string} [tagName] The HTML element tag-name (must contain a hyphen and be lowercase) - * @param {string[]} [propNames] HTML element attributes to observe - * @param {Options} [options] Additional element options + * + * @type {import('./index.d.ts').default} + * * @example - * ```ts + * ```jsx * // use custom web-component class * class PreactWebComponent extends Component { * static tagName = 'my-web-component'; From 57bb12cdde44e5dd5cd70e273cb135cf963ea5fb Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Tue, 2 Sep 2025 18:36:35 -0500 Subject: [PATCH 2/4] chore: Stop Microbundle from trying to generate types --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c53d272..d813673 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "module": "dist/preact-custom-element.esm.js", "unpkg": "dist/preact-custom-element.umd.js", "scripts": { - "build": "microbundle -f cjs,es,umd", + "build": "microbundle -f cjs,es,umd --no-generateTypes", "lint": "eslint src/*.{js,jsx}", "test": "wtr src/*.test.{js,jsx}", "prettier": "prettier **/*.{js,jsx} --write", From dbae4bb829af0901c259dd5b661fa9636035283e Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Tue, 2 Sep 2025 18:54:48 -0500 Subject: [PATCH 3/4] chore: Move jsdoc example comment into ts definition where it can be used --- src/index.d.ts | 28 ++++++++++++++++++++++++++++ src/index.js | 28 +--------------------------- 2 files changed, 29 insertions(+), 27 deletions(-) diff --git a/src/index.d.ts b/src/index.d.ts index 86a3f3e..5c0bab3 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -17,6 +17,34 @@ type Options = adoptedStyleSheets?: CSSStyleSheet[]; }; +/** + * Register a preact component as web-component. + * + * @example + * ```jsx + * // use custom web-component class + * class PreactWebComponent extends Component { + * static tagName = 'my-web-component'; + * render() { + * return

Hello world!

+ * } + * } + * + * register(PreactComponent); + * + * // use a preact component + * function PreactComponent({ prop }) { + * return

Hello {prop}!

+ * } + * + * register(PreactComponent, 'my-component'); + * register(PreactComponent, 'my-component', ['prop']); + * register(PreactComponent, 'my-component', ['prop'], { + * shadow: true, + * mode: 'closed' + * }); + * ``` + */ export default function register( Component: AnyComponent, tagName?: string, diff --git a/src/index.js b/src/index.js index 831e849..b7815a7 100644 --- a/src/index.js +++ b/src/index.js @@ -4,35 +4,9 @@ import { h, cloneElement, render, hydrate } from 'preact'; * @typedef {import('./index.d.ts').PreactCustomElement} PreactCustomElement */ + /** - * Register a preact component as web-component. - * * @type {import('./index.d.ts').default} - * - * @example - * ```jsx - * // use custom web-component class - * class PreactWebComponent extends Component { - * static tagName = 'my-web-component'; - * render() { - * return

Hello world!

- * } - * } - * - * register(PreactComponent); - * - * // use a preact component - * function PreactComponent({ prop }) { - * return

Hello {prop}!

- * } - * - * register(PreactComponent, 'my-component'); - * register(PreactComponent, 'my-component', ['prop']); - * register(PreactComponent, 'my-component', ['prop'], { - * shadow: true, - * mode: 'closed' - * }); - * ``` */ export default function register(Component, tagName, propNames, options) { function PreactElement() { From 63cfbae0dce4be3384cdaa7c48660dd591cde606 Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Wed, 3 Sep 2025 14:46:24 -0500 Subject: [PATCH 4/4] chore: Make sure to install 'git-simple-hooks' --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index d813673..b6a11e4 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "module": "dist/preact-custom-element.esm.js", "unpkg": "dist/preact-custom-element.umd.js", "scripts": { + "prepare": "npx simple-git-hooks", "build": "microbundle -f cjs,es,umd --no-generateTypes", "lint": "eslint src/*.{js,jsx}", "test": "wtr src/*.test.{js,jsx}",