v5

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;

src/index.js

@@ -118,15 +118,6 @@ function connectedCallback(options) {
 	(this.hasAttribute('hydrate') ? hydrate : render)(this._vdom, this._root);
 }
 
-/**
- * Camel-cases a string
- * @param {string} str The string to transform to camelCase
- * @returns camel case version of the string
- */
-function toCamelCase(str) {
-	return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''));
-}
-
 /**
  * Changed whenver an attribute of the HTML element changed
  * @this {PreactCustomElement}
@@ -143,7 +134,6 @@ function attributeChangedCallback(name, oldValue, newValue) {
 	newValue = newValue == null ? undefined : newValue;
 	const props = {};
 	props[name] = newValue;
-	props[toCamelCase(name)] = newValue;
 	this._vdom = cloneElement(this._vdom, props);
 	render(this._vdom, this._root);
 }
@@ -192,7 +182,6 @@ function toVdom(element, nodeName, options) {
 	for (i = a.length; i--; ) {
 		if (a[i].name !== 'slot') {
 			props[a[i].name] = a[i].value;
-			props[toCamelCase(a[i].name)] = a[i].value;
 		}
 	}
 

test/index.test.jsx

@@ -210,39 +210,6 @@ describe('web components', () => {
 		);
 	});
 
-	const kebabName = 'custom-date-long-name';
-	const camelName = 'customDateLongName';
-	const lowerName = camelName.toLowerCase();
-	function PropNameTransform(props) {
-		return (
-			<span>
-				{props[kebabName]} {props[lowerName]} {props[camelName]}
-			</span>
-		);
-	}
-	registerElement(PropNameTransform, 'x-prop-name-transform', [
-		kebabName,
-		camelName,
-	]);
-
-	it('handles kebab-case attributes with passthrough', () => {
-		const el = document.createElement('x-prop-name-transform');
-		el.setAttribute(kebabName, '11/11/2011');
-		el.setAttribute(camelName, 'pretended to be camel');
-
-		root.appendChild(el);
-		assert.equal(
-			root.innerHTML,
-			`<x-prop-name-transform ${kebabName}="11/11/2011" ${lowerName}="pretended to be camel"><span>11/11/2011 pretended to be camel 11/11/2011</span></x-prop-name-transform>`
-		);
-
-		el.setAttribute(kebabName, '01/01/2001');
-		assert.equal(
-			root.innerHTML,
-			`<x-prop-name-transform ${kebabName}="01/01/2001" ${lowerName}="pretended to be camel"><span>01/01/2001 pretended to be camel 01/01/2001</span></x-prop-name-transform>`
-		);
-	});
-
 	const Theme = createContext('light');
 
 	function DisplayTheme() {