Merge pull request #144 from grucloud/fix-event-types

Fix event types

Author: FredericHeem

bau-ui/examples/bau-storybook/src/pages/form/form-simple-state.ts

@@ -36,7 +36,8 @@ export default (context: Context) => {
             name: "check",
             required: true,
             value: inputState,
-            oninput: (event: any) => (inputState.val = event.target.value),
+            oninput: ({ target }: { target: HTMLInputElement }) =>
+              (inputState.val = target.value),
           })
         )
       ),

bau-ui/radioButtonGroup/index.d.ts

@@ -11,11 +11,14 @@ declare module "@grucloud/bau-ui/radioButtonGroup" {
   export type RadioButtonGroupProps = {
     name: string;
     value?: any;
-    oninput?: (event) => any;
+    oninput?: ({ target }: { target: HTMLInputElement }) => void;
     radios: RadioItem[];
   } & DefaultDesignProps;
 
-  type Component = import("../bau-ui").Component<RadioButtonGroupProps>;
+  type Component = import("../bau-ui").Component<
+    RadioButtonGroupProps,
+    HTMLInputElement
+  >;
 
   export default function (context: any, option?: ComponentOption): Component;
 }

bau/bau.d.ts

@@ -42,63 +42,32 @@ export type BindAttributeFunc<TElement extends HTMLElement> = (input: {
   element: TElement;
 }) => Primitive | Function;
 
-type EventListener = (
-  event:
-    | InputEvent
-    | SubmitEvent
-    | Event
-    | AnimationEvent
-    | BeforeUnloadEvent
-    | BlobEvent
-    | ClipboardEvent
-    | CloseEvent
-    | CompositionEvent
-    | DeviceMotionEvent
-    | DeviceOrientationEvent
-    | DragEvent
-    | ErrorEvent
-    | FocusEvent
-    | FontFaceSetLoadEvent
-    | FormDataEvent
-    | GamepadEvent
-    | HashChangeEvent
-    | IDBVersionChangeEvent
-    | InputEvent
-    | KeyboardEvent
-    | MessageEvent
-    | MouseEvent
-    | OfflineAudioCompletionEvent
-    | PageTransitionEvent
-    | PaymentRequestUpdateEvent
-    | PointerEvent
-    | PopStateEvent
-    | ProgressEvent
-    | RTCDataChannelEvent
-    | RTCPeerConnectionIceEvent
-    | StorageEvent
-    | SubmitEvent
-    | TouchEvent
-    | TrackEvent
-    | TransitionEvent
-    | UIEvent
-    | WebGLContextEvent
-    | WheelEvent
-) => any;
-
 export type Props<TElement extends HTMLElement> = {
   readonly [key: string]:
     | PropValue
-    | EventListener
     | StateView<PropValue>
     | BindAttributeFunc<TElement>
     | DerivedProp;
 };
 
+// This helper will replace the Event parameter of an event handler
+// with something else (technically it takes the union of the Event and ReplaceWith)
+type ReplaceEventHandlerParameter<EventHandler, ReplaceWith> =
+  EventHandler extends (...args: infer Params) => infer R
+  ? (...args: {[K in keyof Params]: Params[K] extends Event ? Params[K] & ReplaceWith : Params[K]}) => R
+  : never;
+
 export type PropsHTMLElement<TElement extends HTMLElement> = {
-  readonly [key in keyof TElement]?:
-    | PropValue
-    | StateView<PropValue>
-    | BindAttributeFunc<TElement>;
+  readonly [
+    key in keyof TElement as key extends `on${string}`
+    ? key
+    : never
+  ]?: key extends 'oninput'
+    // we use InputEvent for 'oninput'
+    // this is not 100% type correct, but it is convenient and backwards compatible
+    ? ReplaceEventHandlerParameter<ReplaceEventHandlerParameter<TElement[key], { target: TElement}>, InputEvent>
+    // for all other events (and also for oninput) we set the target to TElement
+    : ReplaceEventHandlerParameter<TElement[key], { target: TElement}>
 };
 
 export type PropsLifecycle<TElement extends HTMLElement> = {
@@ -112,9 +81,8 @@ export type PropsLifecycle<TElement extends HTMLElement> = {
 };
 
 export type PropsAll<TElement extends HTMLElement> =
-  | PropsHTMLElement<TElement>
-  | PropsLifecycle<TElement>
-  | Props<TElement>
+  PropsLifecycle<TElement>
+  | (Props<TElement> & PropsHTMLElement<TElement>)
   | ChildDom;
 
 export type BindElementFunc = (input?: {

bau/examples/bau-ts-test/src/main.ts

@@ -506,8 +506,7 @@ const TestDerived = () => {
     input({
       placeholder: "Enter username",
       value: inputState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (inputState.val = target.value),
+      oninput: ({ target }) => (inputState.val = target.value),
     }),
     button(
       {
@@ -532,8 +531,7 @@ const TestDerivedSideEffect = () => {
     input({
       placeholder: "Enter username",
       value: inputState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (inputState.val = target.value),
+      oninput: ({ target }) => (inputState.val = target.value),
     })
   );
 };
@@ -753,8 +751,7 @@ const TestInputOninput = () => {
     input({
       placeholder: "Enter username",
       value: inputState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (inputState.val = target.value),
+      oninput: ({ target }) => (inputState.val = target.value),
     }),
     button(
       {
@@ -776,8 +773,7 @@ const TestInputSearch = () => {
       type: "search",
       placeholder: "Search...",
       value: inputState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (inputState.val = target.value),
+      oninput: ({ target }) => (inputState.val = target.value),
     }),
     button(
       {
@@ -820,7 +816,7 @@ const TestEventHandlingKeyUp = () => {
     input({
       type: "search",
       size: 25,
-      onkeyup: ({ target, key }: { key: string; target: HTMLInputElement }) => {
+      onkeyup: ({ target, key }) => {
         if (key == "Enter") {
           alert(target.value);
         }
@@ -838,8 +834,7 @@ const TestInputCheckboxOninput = () => {
     input({
       type: "checkbox",
       checked: checkedState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (checkedState.val = target.checked),
+      oninput: ({ target }) => (checkedState.val = target.checked),
     }),
     div("Is checked: ", () => (checkedState.val ? "Checked" : "Not Checked"))
   );
@@ -1044,5 +1039,16 @@ const App = ({}) => {
   );
 };
 
+input({
+  type: "text",
+  oninput: (event) => {
+    console.log(event.data);
+    console.log(event.target);
+  },
+  onchange: (event) => {
+    console.log(event.target.value);
+  },
+});
+
 const app = document.getElementById("app");
 app?.replaceChildren(App({}));

doc/BauDerive.md

@@ -46,8 +46,7 @@ const TestDerived = () => {
     input({
       placeholder: "Enter username",
       value: inputState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (inputState.val = target.value),
+      oninput: ({ target }) => (inputState.val = target.value),
     }),
     button(
       {

doc/BauEventHandling.md

@@ -91,8 +91,7 @@ const TestInputOninput = () => {
     input({
       placeholder: "Enter username",
       value: inputState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (inputState.val = target.value),
+      oninput: ({ target }) => (inputState.val = target.value),
     }),
     button(
       {
@@ -149,8 +148,7 @@ const TestInputCheckboxOninput = () => {
     input({
       type: "checkbox",
       checked: checkedState,
-      oninput: ({ target }: { target: HTMLInputElement }) =>
-        (checkedState.val = target.checked),
+      oninput: ({ target }) => (checkedState.val = target.checked),
     }),
     div("Is checked: ", () => (checkedState.val ? "Checked" : "Not Checked"))
   );