Add support for TypeScript

[zoeleu]

Typings serve for the TypeScript compiler to do type validations. Is it possible to make a typing for this library? Thanks.

[this-fifo]

hey @matteoturini thanks for the suggestion, I have no problems accepting a PR with typings for this library and would welcome anybody to add support for this

it is not something I had planned originally, and I do not need it, so I'll leave it open for whoever wants to do it

[zoeleu]

hey @matteoturini thanks for the suggestion, I have no problems accepting a PR with typings for this library and would welcome anybody to add support for this

it is not something I had planned originally, and I do not need it, so I'll leave it open for whoever wants to do it

btw, IDE's like VSCode can highly profit from typescript typings too.

[Felix-Franz]

You can use following typescript definition:

react-jutsu.d.ts:

declare module "react-jutsu" {
  import React, { ReactNode, ReactElement } from "react";
  export interface JutsuProps extends React.HTMLProps<HTMLDivElement> {
    
    // The meeting room name
    roomName: string;

    // The participant's displayed name
    displayName?: string;

    // The meeting room password
    password?: string;

    // Callback function executed after readyToClose event is fired
    onMeetingEnd?: () => void;

    // The meeting subject (what is displayed at the top)
    subject?: string;

    // Custom jitsi domain
    domain?: string;

    // component displayed while loading
    loadingComponent?: JSX.Element;
    
    // component displayed on error
    errorComponent?: JSX.Element;

    // Internally Jutsu is constructed inside 2 containers, you can add custom styles for each by specifying containerStyles and jitsiContainerstyles
    containerStyles?: CSSProperties;
    jitsiContainerStyles?: CSSProperties;

    // Configuration object to overwrite. Visit https://github.com/jitsi/jitsi-meet/blob/master/config.js
    configOverwrite?: any;
    
    // Interface configuration object to overwrite. Visit https://github.com/jitsi/jitsi-meet/blob/master/interface_config.js
    interfaceConfigOverwrite?: any;

    // Callback function to be called with an error as the only parameter if any.
    onError?: () => void;

    // Callback function to be called with the jitsi API client when instantiated.
    onJitsi?: () => void;

    // Any other prop passed to the component will be passed to jitsi API constructor as part of the options parameter.
    jwt?: any;
    devices?: any;
    userInfo?: any;
  }

  export const Jutsu: (props: JutsuProps) => ReactElement;
}

[zoeleu]

You can use following typescript definition:

react-jutsu.d.ts:

declare module "react-jutsu" {
  import React, { ReactNode, ReactElement } from "react";
  export interface JutsuProps extends React.HTMLProps<HTMLDivElement> {
    
    // The meeting room name
    roomName: string;

    // The participant's displayed name
    displayName?: string;

    // The meeting room password
    password?: string;

    // Callback function executed after readyToClose event is fired
    onMeetingEnd?: () => void;

    // The meeting subject (what is displayed at the top)
    subject?: string;

    // Custom jitsi domain
    domain?: string;

    // component displayed while loading
    loadingComponent?: JSX.Element;
    
    // component displayed on error
    errorComponent?: JSX.Element;

    // Internally Jutsu is constructed inside 2 containers, you can add custom styles for each by specifying containerStyles and jitsiContainerstyles
    containerStyles?: CSSProperties;
    jitsiContainerStyles?: CSSProperties;

    // Configuration object to overwrite. Visit https://github.com/jitsi/jitsi-meet/blob/master/config.js
    configOverwrite?: any;
    
    // Interface configuration object to overwrite. Visit https://github.com/jitsi/jitsi-meet/blob/master/interface_config.js
    interfaceConfigOverwrite?: any;

    // Callback function to be called with an error as the only parameter if any.
    onError?: () => void;

    // Callback function to be called with the jitsi API client when instantiated.
    onJitsi?: () => void;

    // Any other prop passed to the component will be passed to jitsi API constructor as part of the options parameter.
    jwt?: any;
    devices?: any;
    userInfo?: any;
  }

  export const Jutsu: (props: JutsuProps) => ReactElement;
}

mind pushing this into the repo?

[this-fifo]

Just published v3.0.3 with these typing definitions

[yyynnn]

d.ts is absent from final build

[this-fifo]

thank you @yyynnn, it seems like it's missing a step in the rollup configuration to include that in the build, I'm accepting PRs if anyone is willing to take a shot at this, otherwise I can work on it when I have some time.