v5

README.md

@@ -63,22 +63,6 @@ class Greeting extends Component {
 register(Greeting);
 ```
 
-If no `observedAttributes` are specified, they will be inferred from the keys of `propTypes` if present on the Component:
-
-```js
-// Other option: use PropTypes:
-function FullName({ first, last }) {
-  return <span>{first} {last}</span>
-}
-
-FullName.propTypes = {
-  first: Object,   // you can use PropTypes, or this
-  last: Object     // trick to define untyped props.
-};
-
-register(FullName, 'full-name');
-```
-
 ### Passing slots as props
 
 The `register()` function also accepts an optional fourth parameter, an options bag. At present, it allows you to opt-in to using shadow DOM for your custom element by setting the `shadow` property to `true`, and if so, you can also specify the encapsulation mode with `mode`, which can be either `'open'` or `'closed'`. Additionally, you may mark the shadow root as being serializable with the boolean `serializable` property.

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

@@ -40,10 +40,7 @@ export default function register(Component, tagName, propNames, options) {
 	/**
 	 * @type {string[]}
 	 */
-	propNames =
-		propNames ||
-		Component.observedAttributes ||
-		Object.keys(Component.propTypes || {});
+	propNames = propNames || Component.observedAttributes || [];
 	PreactElement.observedAttributes = propNames;
 
 	if (Component.formAssociated) {
@@ -118,15 +115,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 +131,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 +179,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/browser/index.test.jsx

@@ -204,41 +204,6 @@ describe('web components', () => {
 		);
 	});
 
-	describe('attribute/property name transformation', () => {
-		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>`
-			);
-		});
-	});
-
 	describe('children', () => {
 		/** @param {string} name */
 		function createTestElement(name) {