(refactor/types): re-write src/index.js in TypeScript

- make heavy use of the multiple iterations on types in others' PRs,
  my own iterations on that, and then @types/react-signature-canvas
  - credit where credit is due!
  - NOTE: the naming of the props type and the class type do not include
    the word "React" unlike @types/react-signature-canvas
    - it is convention in React components to leave it out and you're
      already importing from a package with "react" in its name

- refactor init logic a bit to get around `| null` everywhere
  - kinda hacky but better than ifs or ! (non-nullable) everywhere
- use ! for canvas.getContext('2d') calls for same reason
  - c.f. microsoft/TypeScript#19229

- refactor naming everywhere to src/index.tsx

- configure tsconfig -- no need for allowJs anymore, but jsx needs to
  be set as TS is actually reading it now
- configure jest -- ts-jest needed to read TSX files

(deps): add DT typings for prop-types, react, and signature_pad
(deps): add a declaration file for trim-canvas as it doesn't have
types built-in yet (TODO for me!)
  - use typings/ to hold external declarations

example/src/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 
-import SignaturePad from '../../src/index.js'
+import SignaturePad from '../../src/index.tsx'
 
 import styles from './styles.module.css'
 

jest.config.js

@@ -9,7 +9,8 @@ module.exports = {
  ],
  transform: {
  // support babel-jest. TSDX defaults to just ts-jest. see https://github.com/jaredpalmer/tsdx/pull/486
- '\\.js$': 'babel-jest'
+ '\\.js$': 'babel-jest',
+ '\\.tsx$': 'ts-jest'
  },
  // support JS + JSX. TSDX defaults to just TS + TSX. see https://github.com/jaredpalmer/tsdx/pull/486
  testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],

package.json

@@ -55,13 +55,16 @@
  "react-dom": "0.14 - 17"
  },
  "dependencies": {
+ "@types/signature_pad": "^2.3.0",
  "signature_pad": "^2.3.2",
  "trim-canvas": "^0.1.0"
  },
  "devDependencies": {
  "@agilgur5/changelog-maker": "^3.0.0",
  "@babel/core": "^7.8.4",
  "@babel/preset-react": "^7.8.3",
+ "@types/prop-types": "^15.7.3",
+ "@types/react": "^17.0.44",
  "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
  "babel-eslint": "^10.0.2",
  "canvas": "^2.9.0",

src/index.js → src/index.tsx

@@ -3,7 +3,12 @@ import React, { Component } from 'react'
 import SignaturePad from 'signature_pad'
 import trimCanvas from 'trim-canvas'
 
-export class SignatureCanvas extends Component {
+export interface SignatureCanvasProps extends SignaturePad.SignaturePadOptions {
+ canvasProps?: React.CanvasHTMLAttributes<HTMLCanvasElement>,
+ clearOnResize?: boolean
+}
+
+export class SignatureCanvas extends Component<SignatureCanvasProps> {
  static propTypes = {
  // signature_pad's props
  velocityFilterWeight: PropTypes.number,
@@ -24,7 +29,15 @@ export class SignatureCanvas extends Component {
  clearOnResize: true
  }
 
- _sigPad = null
+ // this is some hack-ish init and casting to avoid `| null` everywhere :/
+ _sigPad: SignaturePad = {} as SignaturePad
+ _canvas: HTMLCanvasElement = {} as HTMLCanvasElement
+
+ private readonly setRef = (ref: HTMLCanvasElement | null) => {
+ if (ref) {
+ this._canvas = ref
+ }
+ }
 
  _excludeOurProps = () => {
  const { canvasProps, clearOnResize, ...sigPadProps } = this.props
@@ -47,23 +60,23 @@ export class SignatureCanvas extends Component {
  }
 
  // return the canvas ref for operations like toDataURL
- getCanvas = () => {
+ getCanvas = (): HTMLCanvasElement => {
  return this._canvas
  }
 
  // return a trimmed copy of the canvas
- getTrimmedCanvas = () => {
+ getTrimmedCanvas = (): HTMLCanvasElement => {
  // copy the canvas
  const copy = document.createElement('canvas')
  copy.width = this._canvas.width
  copy.height = this._canvas.height
- copy.getContext('2d').drawImage(this._canvas, 0, 0)
+ copy.getContext('2d')!.drawImage(this._canvas, 0, 0)
  // then trim it
  return trimCanvas(copy)
  }
 
  // return the internal SignaturePad reference
- getSignaturePad = () => {
+ getSignaturePad = (): SignaturePad => {
  return this._sigPad
  }
 
@@ -94,48 +107,48 @@ export class SignatureCanvas extends Component {
  if (!height) {
  canvas.height = canvas.offsetHeight * ratio
  }
- canvas.getContext('2d').scale(ratio, ratio)
+ canvas.getContext('2d')!.scale(ratio, ratio)
  this.clear()
  }
 
  render () {
  const { canvasProps } = this.props
- return <canvas ref={(ref) => { this._canvas = ref }} {...canvasProps} />
+ return <canvas ref={this.setRef} {...canvasProps} />
  }
 
  // all wrapper functions below render
  //
- on = () => {
+ on: SignaturePad['on'] = () => {
  window.addEventListener('resize', this._checkClearOnResize)
  return this._sigPad.on()
  }
 
- off = () => {
+ off: SignaturePad['off'] = () => {
  window.removeEventListener('resize', this._checkClearOnResize)
  return this._sigPad.off()
  }
 
- clear = () => {
+ clear: SignaturePad['clear'] = () => {
  return this._sigPad.clear()
  }
 
- isEmpty = () => {
+ isEmpty: SignaturePad['isEmpty'] = () => {
  return this._sigPad.isEmpty()
  }
 
- fromDataURL = (dataURL, options) => {
+ fromDataURL: SignaturePad['fromDataURL'] = (dataURL, options) => {
  return this._sigPad.fromDataURL(dataURL, options)
  }
 
- toDataURL = (type, encoderOptions) => {
+ toDataURL: SignaturePad['toDataURL'] = (type, encoderOptions) => {
  return this._sigPad.toDataURL(type, encoderOptions)
  }
 
- fromData = (pointGroups) => {
+ fromData: SignaturePad['fromData'] = (pointGroups) => {
  return this._sigPad.fromData(pointGroups)
  }
 
- toData = () => {
+ toData: SignaturePad['toData'] = () => {
  return this._sigPad.toData()
  }
 }

test/index.spec.js

@@ -2,7 +2,7 @@ import { jest, describe, it, test, expect } from 'jest-without-globals'
 import { mount } from 'enzyme'
 import React from 'react'
 
-import SignatureCanvas from '../src/index.js'
+import SignatureCanvas from '../src/index.tsx'
 import { propsF, dotF } from './fixtures.js'
 
 test('mounts canvas and instance properly', () => {

tsconfig.json

@@ -1,5 +1,5 @@
 {
- "include": ["src", "types"],
+ "include": ["src", "typings"],
  "compilerOptions": {
  "module": "esnext",
  "lib": ["dom", "esnext"],
@@ -18,6 +18,6 @@
  "*": ["src/*", "node_modules/*"]
  },
  "esModuleInterop": true,
- "allowJs": true
+ "jsx": "react"
  }
 }

typings/trim-canvas.d.ts

@@ -0,0 +1,3 @@
+declare module 'trim-canvas' {
+ export default function trimCanvas (canvas: HTMLCanvasElement): HTMLCanvasElement
+}