Typescript event.detail

[jdspugh]

• Framework7 version: 3.4.2
• Platform and Target: All

Describe the bug

Typescript typing for event.detail is missing.

To Reproduce

Add some code that uses event.detail

Dom7(document).on("page:init", '.page[data-name="exercise-edit"]', function( event: Event ) { let page = event.detail;

Expected behavior

No error.

Actual Behavior

Type error.

[nolimits4web]

@JasonKleban do you have idea how can we add it?

[jdspugh]

Seems the PageData type is also missing and needs to be defined. So I'm using this until a deeper solution is found:

Dom7(document).on("page:init", '.page[data-name="exercise-edit"]', function(
  event: Event
) {
  let page = (<Event & {detail:PageData}>event).detail;
  ...

import { View } from "framework7/components/view/view";
import { Dom7 } from "dom7";
interface PageData {
  app?: object;
  view?: View.View;
  router?: object;
  name?: string;
  el: HTMLElement;
  $el: Dom7;
  navbarEl: HTMLElement;
  $navbarEl: Dom7;
  from?: string;
  to?: string;
  position: string;
  direction: string;
  route: {
    url: string;
    path: string;
    query: object;
    params: object;
    name: string;
    hash: object;
    route: object;
    context: object;
  }
  pageFrom: object;
  context?: object;
}

[jdspugh]

Ok I found another solution for this. Using the "declare global" will allow us to extract the "detail" parameter from all Events. But is this what we want? Cause not all events will have the "detail" parameter available.

declare global {
  interface Event {
    detail: PageData;
  }
}
import { View } from "framework7/components/view/view";
import { Dom7 } from "dom7";
interface PageData {
  app?: object;
  view?: View.View;
  router?: object;
  name?: string;
  el: HTMLElement;
  $el: Dom7;
  navbarEl: HTMLElement;
  $navbarEl: Dom7;
  from?: string;
  to?: string;
  position: string;
  direction: string;
  route: {
    url: string;
    path: string;
    query: object;
    params: object;
    name: string;
    hash: object;
    route: object;
    context: object;
  };
  pageFrom: object;
  context?: object;
}

[nolimits4web]

Hey @jdspugh. Page Data definition is available in Router module: https://github.com/framework7io/framework7/blob/master/src/core/modules/router/router.d.ts#L140

import { Router } from 'framework7/modules/router/router';

// Router.Page -> is what you are looking for

[jdspugh]

@nolimits4web Great, thanks. So this code does the trick to be able to access event.detail without any type errors:

import { Router } from 'node_modules/framework7/modules/router/router';
declare global {
  interface Event {
    detail: Router.Page;
  }
}

[nolimits4web]

Yeah, but the issue is that event.detail not always contains Page Data, like in case Sortable events. So still looking for a solution how to handle this correctly

[JasonKleban]

Sorry I haven't had time to dig into this.... would it work if overloads for event methods knows that handlers for page events get Page Data and Sortable events get sortable-related data?

  on(eventName : 'page:init', handler : (event : { detail: ... }) => void) : void
...
  on(eventName : 'textarea:resize', handler : ...) : void
  on(event : string, handler : () => void) : void

Know what I mean?

[jdspugh]

That's the way I imagined it would be done.

[JasonKleban]

I don’t use those features of F7 so I’m not in a good position to judge the ergonomics of an implementation, but I could comment or answer questions about how to solve certain technical problems about it.

[nolimits4web]

@JasonKleban yeah, but how can we specify it? I mean, for example, we have DomEvents in router.d.ts and others but we don't use them anywhere. I guess we need somehow make them extend Event type?