Add support for TypeScript about jutsu HOT 7 OPEN

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.

from jutsu.

d.ts is absent from final build

from jutsu.

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

from jutsu.

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;
}

from jutsu.

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?

from jutsu.

Just published v3.0.3 with these typing definitions

from jutsu.

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.

from jutsu.