From 08c4ed421bf496a2d4dcb4c8ce39c7f852b452dc Mon Sep 17 00:00:00 2001
From: Alice <alice.writes.wrongs@gmail.com>
Date: Tue, 1 Nov 2022 14:58:51 -0400
Subject: [PATCH] fix(declarations): correct event handler names for
 composition events (#3777)

This updates a fewevent handler names in `src/declarations/stencil-public-runtime.ts`
so that the composition events have the correct casing.
---
 BREAKING_CHANGES.md                        | 18 +++++++++++++++++-
 src/declarations/stencil-public-runtime.ts | 12 ++++++------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md
index 9d1b4a9e8636..c134c1983010 100644
--- a/BREAKING_CHANGES.md
+++ b/BREAKING_CHANGES.md
@@ -19,6 +19,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   * [Strongly Typed Inputs](#strongly-typed-inputs)
   * [Narrowed Typing for `autocapitalize` Attribute](#narrowed-typing-for-autocapitalize-attribute)
   * [Custom Types for Props and Events are now Exported from `components.d.ts`](#custom-types-for-props-and-events-are-now-exported-from-componentsdts)
+  * [Composition Event Handlers Renamed](#composition-event-handlers-renamed)
 * [Output Targets](#output-targets)
   * [`dist-custom-elements` Output Target](#dist-custom-elements-output-target)
     * [Add `customElementsExportBehavior` to Control Export Behavior](#add-customelementsexportbehavior-to-control-export-behavior)
@@ -100,7 +101,7 @@ The [`autocaptialize` attribute](https://developer.mozilla.org/en-US/docs/Web/HT
 This change brings Stencil into closer alignment with TypeScript's typings for the attribute.
 No explicit changes are needed, unless a project was passing non-strings to the attribute.
 
-### Custom Types for Props and Events are now Exported from `components.d.ts`
+#### Custom Types for Props and Events are now Exported from `components.d.ts`
 
 Custom types for props and custom events are now re-exported from a project's `components.d.ts` file.
 
@@ -161,6 +162,21 @@ Projects that manually create type definitions from `components.d.ts` will eithe
 - remove the manually created type (if the types generated in `components.d.ts` suffice)
 - update their type creation logic to account for potential naming collisions with the newly generated types
 
+#### Composition Event Handlers Renamed
+
+The names of Stencil's composition event handlers have been changed in order to
+correct a casing issue which prevented handlers from being called when events
+fired. The changes are as follows:
+
+| previous name                | new name                     |
+| ---------------------------- | ---------------------------- |
+| `onCompositionEnd`           | `onCompositionend`           |
+| `onCompositionEndCapture`    | `onCompositionendCapture`    |
+| `onCompositionStart`         | `onCompositionstart`         |
+| `onCompositionStartCapture`  | `onCompositionstartCapture`  |
+| `onCompositionUpdate`        | `onCompositionupdate`        |
+| `onCompositionUpdateCapture` | `onCompositionupdateCapture` |
+
 ### Output Targets
 
 #### `dist-custom-elements` Output Target
diff --git a/src/declarations/stencil-public-runtime.ts b/src/declarations/stencil-public-runtime.ts
index 71b3da2c998e..4d03ffefdea7 100644
--- a/src/declarations/stencil-public-runtime.ts
+++ b/src/declarations/stencil-public-runtime.ts
@@ -1669,12 +1669,12 @@ export namespace JSXBase {
     onPasteCapture?: (event: ClipboardEvent) => void;
 
     // Composition Events
-    onCompositionEnd?: (event: CompositionEvent) => void;
-    onCompositionEndCapture?: (event: CompositionEvent) => void;
-    onCompositionStart?: (event: CompositionEvent) => void;
-    onCompositionStartCapture?: (event: CompositionEvent) => void;
-    onCompositionUpdate?: (event: CompositionEvent) => void;
-    onCompositionUpdateCapture?: (event: CompositionEvent) => void;
+    onCompositionend?: (event: CompositionEvent) => void;
+    onCompositionendCapture?: (event: CompositionEvent) => void;
+    onCompositionstart?: (event: CompositionEvent) => void;
+    onCompositionstartCapture?: (event: CompositionEvent) => void;
+    onCompositionupdate?: (event: CompositionEvent) => void;
+    onCompositionupdateCapture?: (event: CompositionEvent) => void;
 
     // Focus Events
     onFocus?: (event: FocusEvent) => void;