refactor: Switch to .d.ts for types (#100)

* refactor: Switch to '.d.ts' for declaring types

* chore: Stop Microbundle from trying to generate types

* chore: Move jsdoc example comment into ts definition where it can be used

* chore: Make sure to install 'git-simple-hooks'

Author: rschristian

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",
+  }
+}

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",

src/index.d.ts

@@ -0,0 +1,53 @@
+import { h, AnyComponent } from 'preact';
+
+type PreactCustomElement = HTMLElement & {
+	_root: ShadowRoot | HTMLElement;
+	_vdomComponent: AnyComponent;
+	_vdom: ReturnType<typeof h> | null;
+	_props: Record<string, unknown>;
+};
+
+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 <p>Hello world!</p>
+ *   }
+ * }
+ *
+ * register(PreactComponent);
+ *
+ * // use a preact component
+ * function PreactComponent({ prop }) {
+ *   return <p>Hello {prop}!</p>
+ * }
+ *
+ * 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;

src/index.js

@@ -1,41 +1,12 @@
 import { h, cloneElement, render, hydrate } from 'preact';
 
 /**
- * @typedef {import('preact').FunctionComponent<any> | import('preact').ComponentClass<any> | import('preact').FunctionalComponent<any> } ComponentDefinition
- * @typedef {{ shadow: false } | { shadow: true, mode?: 'open' | 'closed', adoptedStyleSheets?: CSSStyleSheet[] }} Options
- * @typedef {HTMLElement & { _root: ShadowRoot | HTMLElement, _vdomComponent: ComponentDefinition, _vdom: ReturnType<typeof import("preact").h> | 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 <p>Hello world!</p>
- *   }
- * }
- *
- * register(PreactComponent);
- *
- * // use a preact component
- * function PreactComponent({ prop }) {
- *   return <p>Hello {prop}!</p>
- * }
- *
- * 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() {