React-pdf: TypeScript and definitions.

[danno-ax]

Im wondering if typings could be added/maintained for this project? Iv got a patch almost ready to go in my own repo i could add it?
Would it be too bold of me to even propose a conversion to TS?

[wojtekmaj]

Hey! Thanks for asking.
I do not plan to convert the project to TS. I feel like that would slow my development down significantly while not giving much in return; the most vital elements of the project are React components, which are equipped with propTypes which works just fine for my needs. Maybe sometime in the future I'd add Flow or something similar, but I have no plans set up for this.
I'd also want to remind that this project is licensed on MIT license, so you are free to do absolutely anything you would like to do with it, including creating competing versions based on it ;)
Is there any specific problem you would like to solve by migration to TS?

[danno-ax]

Hey! No prob! I don't mean to be that guy.
I guess considering this project isn't too complex at the moment it should be fine not having any type system. There isn't a single specific issue that TS or Flow solves, its that it solves a set of issues common to large applications, which I won't go into rn.
Anyway I think I can just PR my type definitions to definitely typed so all good :)

[alex-sherwin]

Adding typings does not require you to convert any JavaScript to TypeScript

Providing typings is just additional metadata that is fed into the TypeScript compiler so that people who write projects in TypeScript can consume your JavaScript library with strong typing guarantees

To provide these in your project, you would add .d.ts (TypeScript definitions) to your project and include them in your published npm package, which describe the structure of your JavaScript models/classes/functions etc.

More and more people are starting new projects as TypeScript and only consuming libraries which expose TypeScript type information, and I can attest, it makes web development so much smoother. I'd like to use this project, but a lack of typings prevents me from doing so.

If none of the other alternative PDF.js based React components don't either, I'll probably bite the bullet and create typings and contribute them back

[wojtekmaj]

Hmmmm, I don't know if I feel confident enough to do it right now, but it is indeed an interesting idea, so I'm going to keep this issue open in case me or anyone else would like to have some fun with it!

[dimon82]

@alex-sherwin did you get a chance to create typings for this package? If so, can you maybe share them or issue a PR maybe?

[alex-sherwin]

Hi @dimon82

I did not end up using this project at all. I used npm packages pdfjs-dist with typings from@types/pdfjs-dist to directly depend on PDF.js and derived some custom React components to suite my use cases.

[A4Abhiraj]

Anyone still stuck at the transpiler errors, add this as a bare minimum. You won't get any intellisense support.

@types
|- react-pdf
|-index.d.ts

import * as React from 'react';

export class Document extends React.Component<any,any>{}

export class Page extends React.Component<any,any>{}

[saadq]

For those who are using Flow, I published react-pdf libdefs for v2 on flow-typed. Some types could use improvement, but it's pretty complete.

[chandrajob365]

@danno-ax : Can u please share/publish your typescript definition for react-pdf.

[saadq]

I've started learning some TypeScript as well... once v3 is out of alpha/beta, I can look into updating the Flow definitions as well as creating some TypeScript definitions.

[mindblight]

I threw together some basic TS typings that I'm using on my project. They're not well tested, but they could serve as a starting point:. This is for react-pdf 3.0.5

//@types/react-pdf/index.d.ts
declare module 'react-pdf' {
  import * as React from 'react';

  interface CommonPdfProps {
    error?: React.ReactNode | Function;
    // TODO: Change to real ref type
    inputRef?: (ref: any) => void;
    loading?: React.ReactNode | Function;
    noData?: React.ReactNode | Function;
    onLoadError?: (error: Error) => void;
    onLoadSuccess?: (pdf: Pdf) => void;

  }

  interface Pdf {
    numPages: number;
  }

  interface DocumentProps extends CommonPdfProps {
    file: string | File;

    onItemClick?: (pageNumber: number) => void;
    onSourceError?: (error: Error) => void;
    rotate?: 0 | 90 | 180 | 270;

  }
  class Document extends React.Component<DocumentProps>{}


  interface PageProps extends CommonPdfProps {
    customTextRenderer?: (args: { str: string, itemIndex: number }) => React.ReactNode;
    onRenderError?: (error: Error) => void;
    onRenderSuccess?: () => void;
    // TODO: Add array typings
    onGetAnnotationsSuccess?: (annotations: any[]) => void;
    onGetAnnotationsError?: (error: Error) => void;
    // TODO: Add array typings
    onGetTextSuccess?: (items: any[]) => void;
    onGetTextError?: (error: Error) => void;

    pageIndex?: number;
    pageNumber?: number;
    renderAnnotations?: boolean;
    renderTextLayer?: boolean;
    rotate?: 0 | 90 | 180 | 270;
    scale?: number;
    width?: number;
  }
  class Page extends React.Component<PageProps>{}


  interface OutlineProps {
    onItemClick?: (pageNumber: number) => void;
    onLoadError?: (error: Error) => void;
    onLoadSuccess?: (pdf: Pdf) => void;
    onParseError?: (error: Error) => void;
    // TODO: Add array typings
    onParseSuccess?: (outline: any[]) => void;
  }
  class Outline extends React.Component<OutlineProps>{}  
}

It would be great to include some typings in the project. Material UI is a good example of coding in JS but including TS definitions: https://github.com/mui-org/material-ui/tree/v1-beta/packages/material-ui/src

UPDATE I changed declare module 'react-pdf' to declare module 'react-pdf/dist/entry.webpack' to get webpack and workers to work properly

[amogower]

I threw together some basic TS typings that I'm using on my project. They're not well tested, but they could serve as a starting point:. This is for react-pdf 3.0.5

//@types/react-pdf/index.d.ts
declare module 'react-pdf' {
  import * as React from 'react';

  interface CommonPdfProps {
    error?: React.ReactNode | Function;
    // TODO: Change to real ref type
    inputRef?: (ref: any) => void;
    loading?: React.ReactNode | Function;
    noData?: React.ReactNode | Function;
    onLoadError?: (error: Error) => void;
    onLoadSuccess?: (pdf: Pdf) => void;

  }

  interface Pdf {
    numPages: number;
  }

  interface DocumentProps extends CommonPdfProps {
    file: string | File;

    onItemClick?: (pageNumber: number) => void;
    onSourceError?: (error: Error) => void;
    rotate?: 0 | 90 | 180 | 270;

  }
  class Document extends React.Component<DocumentProps>{}


  interface PageProps extends CommonPdfProps {
    customTextRenderer?: (args: { str: string, itemIndex: number }) => React.ReactNode;
    onRenderError?: (error: Error) => void;
    onRenderSuccess?: () => void;
    // TODO: Add array typings
    onGetAnnotationsSuccess?: (annotations: any[]) => void;
    onGetAnnotationsError?: (error: Error) => void;
    // TODO: Add array typings
    onGetTextSuccess?: (items: any[]) => void;
    onGetTextError?: (error: Error) => void;

    pageIndex?: number;
    pageNumber?: number;
    renderAnnotations?: boolean;
    renderTextLayer?: boolean;
    rotate?: 0 | 90 | 180 | 270;
    scale?: number;
    width?: number;
  }
  class Page extends React.Component<PageProps>{}


  interface OutlineProps {
    onItemClick?: (pageNumber: number) => void;
    onLoadError?: (error: Error) => void;
    onLoadSuccess?: (pdf: Pdf) => void;
    onParseError?: (error: Error) => void;
    // TODO: Add array typings
    onParseSuccess?: (outline: any[]) => void;
  }
  class Outline extends React.Component<OutlineProps>{}  
}

It would be great to include some typings in the project. Material UI is a good example of coding in JS but including TS definitions: https://github.com/mui-org/material-ui/tree/v1-beta/packages/material-ui/src

UPDATE I changed declare module 'react-pdf' to declare module 'react-pdf/dist/entry.webpack' to get webpack and workers to work properly

You're most likely better off leaving it as declare module 'react-pdf' and adding a "react-pdf": ["react-pdf/dist/entry.webpack"] to the paths object in your tsconfig.json and 'react-pdf': 'react-pdf/dist/entry.webpack' to the alias object in your webpack config.

But nice work with the declaration!

[moffsugita]

@alex-sherwin pdfjs is better than this?

[moffsugita]

@saadq I tried. but error...

> flow-typed install react-pdf
UNCAUGHT ERROR: Error: Failed to find a flow-bin dependency in package.json.
Please install flow-bin: `npm install --save-dev flow-bin`
    at findFlowSpecificVer$ (/usr/local/lib/node_modules/flow-typed/dist/lib/npm/npmProjectUtils.js:245:17)
    at tryCatch (/usr/local/lib/node_modules/flow-typed/node_modules/regenerator-runtime/runtime.js:65:40)
    at Generator.invoke [as _invoke] (/usr/local/lib/node_modules/flow-typed/node_modules/regenerator-runtime/runtime.js:303:22)
    at Generator.prototype.(anonymous function) [as next] (/usr/local/lib/node_modules/flow-typed/node_modules/regenerator-runtime/runtime.js:117:21)
    at tryCatch (/usr/local/lib/node_modules/flow-typed/node_modules/regenerator-runtime/runtime.js:65:40)
    at invoke (/usr/local/lib/node_modules/flow-typed/node_modules/regenerator-runtime/runtime.js:155:20)
    at /usr/local/lib/node_modules/flow-typed/node_modules/regenerator-runtime/runtime.js:165:13
    at <anonymous>

> npm install --save-dev flow-bin
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of jest@^22.0.1 || ^22.1.0-alpha.1 || ^23.0.0-alpha.1 but none is installed. You must install peer dependencies yourself.
npm WARN The package ts-jest is included as both a dev and production dependency.

+ [email protected]

> flow-typed install react-pdf
Error: Unable to find a flow project in the current dir or any of it's parent dirs!
Please run this command from within a Flow project.

[moffsugita]

@mindblight

could you append them in the file?

  interface GlobalWorkerOptionsProps {
    workerSrc: string;
  }

  interface PDFjsStatic {
    version: string;
    GlobalWorkerOptions: GlobalWorkerOptionsProps;
  }

  let pdfjs: PDFjsStatic;

@wojtekmaj

Will you do pull-request to DefinitelyTyped/DefinitelyTyped?

[saadq]

Hey @moffsugita, in regards to this message:

flow-typed install react-pdf
Error: Unable to find a flow project in the current dir or any of it's parent dirs!
Please run this command from within a Flow project.

This usually means that the flow project you are currently in is missing a .flowconfig file. Can you double check to make sure you have it there?

[wojtekmaj]

@moffsugita I will not since I don't feel like an expert in that matter. As I said, I welcome all PRs though, so if anyone would like to add typings to this repo, I will certainly appreciate it.

[moffsugita]

Hello @saadq

I created .flowconfig. but I didn't understand how to install your type files.

npx flow init

edited .flowconfig file.

[ignore]
.*/node_modules/.*

[include]

[libs]
./src/decls

[lints]

[options]

[strict]

ran flow-typed install react-pdf

• Searching for 1 libdefs...
• rebasing flow-typed cache...
!! No [email protected] libdefs found in flow-typed for the explicitly requested libdefs. !!

Consider using `flow-typed create-stub react-pdf` to generate an empty libdef that you can fill in.

flow-typed create-stub react-pdf

• Creating 1 stub...
  • [email protected]
    └> flow-typed/npm/react-pdf_vx.x.x.js

[moffsugita]

@saadq Perhaps. I had should append your module's version when run install command like below.

flow-typed install [email protected]

it pulled to flow-typed/npm/react-pdf_v2.1.x.js from your type file.

however... my project (create-react-app created) didn't recognize the file yet.

(5,44): Could not find a declaration file for module 'react-pdf'. '/path/to/node_modules/react-pdf/dist/entry.js' implicitly has an 'any' type.
  Try `npm install @types/react-pdf` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-pdf';`

[moffsugita]

@saadq perhaps..
flow is just for JavaScript? just checking type?
I just wanted to use react-pdf for TypeScript.

[moffsugita]

Finally. It is my good practice which I thought before releasing type file in DefinitelyTyped/DefinitelyTyped repository.

I created files in the project.

> tree workspace/
workspace/
└── react-pdf
    ├── index.d.ts
    └── package.json

index.d.ts is from @mindblight 's

package.json is like below. It is temporary so 0.0.1

{
  "version": "0.0.1"
}

[saadq]

@moffsugita So both Flow and TypeScript are two separate typecheckers people use for projects. TypeScript is both the type checker and compiler while Flow is just the type checker (babel is used to do the compilation).

So the problem you ran into with Flow is that flow-typed currently only has types for v2 of react-pdf, I hadn't gotten around to doing v3 so there aren't types for it as of right now. Glad you got it sorted out though.

[CodeDaraW]

Hi all, I have just contributed @types/react-pdf to DefinitelyTyped, see Add types for react-pdf by CodeDaraW · Pull Request #35317 · DefinitelyTyped/DefinitelyTyped. So we can use @types/react-pdf now.