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..b6a11e4 100644 --- a/package.json +++ b/package.json @@ -3,12 +3,13 @@ "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", "scripts": { - "build": "microbundle -f cjs,es,umd", + "prepare": "npx simple-git-hooks", + "build": "microbundle -f cjs,es,umd --no-generateTypes", "lint": "eslint src/*.{js,jsx}", "test": "wtr src/*.test.{js,jsx}", "prettier": "prettier **/*.{js,jsx} --write", @@ -51,6 +52,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..5c0bab3 --- /dev/null +++ b/src/index.d.ts @@ -0,0 +1,53 @@ +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[]; + }; + +/** + * 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, + propNames?: string[], + options?: Options +): void; diff --git a/src/index.js b/src/index.js index 355cb68..b7815a7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,41 +1,12 @@ 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 - * @example - * ```ts - * // 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' - * }); - * ``` + * @type {import('./index.d.ts').default} */ export default function register(Component, tagName, propNames, options) { function PreactElement() {