[labs/react] Do not override attribtues with event listeners (#3067)

* faster types, clearer types

* faster build that builds

* faster builds actually builds

* reduce type complexity, remove events

* more atomic typing, default event object

* remove unnecessary type

* move static non-generated types to top of doc

* add changeset

* remove extra react import

* use Events as base type

* put types back

* reduce to smallest change

* add test to catch unmapped event errors

* better changeset message

* more straightforward names

* mention compiling TS in changeset

* comment to explain test

.changeset/healthy-cherries-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@lit-labs/react': patch
+---
+
+Fixed an error that occurs when when compiling TS. The error occurs when createComponent() is not provided an event map causing instance properties to be confused with event handlers.

packages/labs/react/src/create-component.ts

@@ -127,7 +127,7 @@ type EventProps<R extends Events> = {
  * messages. Default value is inferred from the name of custom element class
  * registered via `customElements.define`.
  */
-export const createComponent = <I extends HTMLElement, E extends Events>(
+export const createComponent = <I extends HTMLElement, E extends Events = {}>(
   React: typeof ReactModule,
   tagName: string,
   elementClass: Constructor<I>,

packages/labs/react/src/test/create-component_test.tsx

@@ -93,6 +93,29 @@ suite('createComponent', () => {
     await el.updateComplete;
   };
 
+  /*
+    The following test will not build if an incorrect typing occurs
+    when events are not provided to `createComponent`.
+  */
+  test('renders element without optional event map', async () => {
+    const ComponentWithoutEventMap = createComponent(
+      window.React,
+      elementName,
+      BasicElement,
+    );
+
+    const name = 'Component without event map.';
+    window.ReactDOM.render(
+      <ComponentWithoutEventMap>{name}</ComponentWithoutEventMap>,
+      container
+    );
+
+    el = container.querySelector(elementName)! as BasicElement;
+    await el.updateComplete;
+
+    assert.equal(el.textContent, 'Component without event map.');
+  });
+
   test('works with text children', async () => {
     const name = 'World';
     window.ReactDOM.render(