refactor: Support package.json#exports & .mjs

Author: rschristian

package.json

@@ -5,8 +5,26 @@
 	"source": "src/index.js",
 	"types": "src/index.d.ts",
 	"main": "dist/preact-custom-element.js",
-	"module": "dist/preact-custom-element.esm.js",
+	"module": "dist/preact-custom-element.mjs",
 	"unpkg": "dist/preact-custom-element.umd.js",
+	"exports": {
+		".": {
+			"module": {
+				"types": "./src/index.d.mts",
+				"default": "./dist/preact-custom-element.mjs"
+			},
+			"umd": "./dist/preact-custom-element.umd.js",
+			"import": {
+				"types": "./src/index.d.mts",
+				"default": "./dist/preact-custom-element.mjs"
+			},
+			"require": {
+				"types": "./src/index.d.ts",
+				"default": "./dist/preact-custom-element.js"
+			}
+		},
+		"./package.json": "./package.json"
+	},
 	"scripts": {
 		"prepare": "npx simple-git-hooks",
 		"build": "microbundle -f cjs,es,umd --no-generateTypes",

src/index.d.mts

@@ -0,0 +1,48 @@
+import { AnyComponent } from 'preact';
+
+type Options =
+	| {
+			shadow: false;
+	  }
+	| {
+			shadow: true;
+			mode?: 'open' | 'closed';
+			adoptedStyleSheets?: CSSStyleSheet[];
+			serializable?: boolean;
+	  };
+
+/**
+ * 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'
+ * });
+ * const klass = register(PreactComponent, 'my-component');
+ * ```
+ */
+export default function register<P = {}, S = {}>(
+	Component: AnyComponent<P, S>,
+	tagName?: string,
+	propNames?: (keyof P)[],
+	options?: Options
+): HTMLElement;