TypeScript Rewrite

.gitignore

@@ -1,7 +1,9 @@
 ### custom ###
 
+# parcel cache
+.parcel-cache/
 # build output
-build/
+dist/
 # test coverage output
 coverage/
 

.travis.yml

@@ -1,8 +1,10 @@
 language: node_js
-# default is the very old 0.10.48; match local version instead
-node_js: '10.16.0'
+# default is the very old 0.10.48; use oldest LTS instead
+node_js: 12
 
-before_script: npm run lint
+before_script:
+  - npm run lint
+  - npm run tsc
 script: npm test -- --coverage
 after_script:
   # upload coverage reports to CodeCov

README.md

@@ -15,6 +15,7 @@
 [![dm](https://img.shields.io/npm/dm/react-signature-canvas.svg)](https://npmjs.org/package/react-signature-canvas)
 [![dw](https://img.shields.io/npm/dw/react-signature-canvas.svg)](https://npmjs.org/package/react-signature-canvas)
 <br><!-- status / activity -->
+[![typings](https://img.shields.io/npm/types/react-signature-canvas.svg)](src/index.tsx)
 [![build status](https://img.shields.io/travis/com/agilgur5/react-signature-canvas/main.svg)](https://app.travis-ci.com/github/agilgur5/react-signature-canvas/branches)
 [![code coverage](https://img.shields.io/codecov/c/gh/agilgur5/react-signature-canvas/main.svg)](https://codecov.io/gh/agilgur5/react-signature-canvas)
 <br>
@@ -26,7 +27,7 @@ Originally, this was just an _unopinionated_ fork of [react-signature-pad](https
 Hence the naming difference.
 Nowadays, this repo / library has significantly evolved, introducing new features, fixing various bugs, and now wrapping the upstream `signature_pad` to have its updates and bugfixes baked in.
 
-This fork also allows you to directly pass [props](#props) to the underlying canvas element, has new, documented [API methods](#api) you can use, has new, documented [props](#props) you can pass to it, has a [live demo](https://agilgur5.github.io/react-signature-canvas/), has a [CodeSandbox playground](https://codesandbox.io/s/github/agilgur5/react-signature-canvas/tree/cra-example), and has [100% test coverage](https://codecov.io/gh/agilgur5/react-signature-canvas).
+This fork also allows you to directly pass [props](#props) to the underlying canvas element, has new, documented [API methods](#api) you can use, has new, documented [props](#props) you can pass to it, has a [live demo](https://agilgur5.github.io/react-signature-canvas/), has a [CodeSandbox playground](https://codesandbox.io/s/github/agilgur5/react-signature-canvas/tree/cra-example), has [100% test coverage](https://codecov.io/gh/agilgur5/react-signature-canvas), and is [written in TypeScript](src/index.tsx).
 
 ## Installation
 
@@ -106,7 +107,7 @@ The API methods are _mostly_ just wrappers around [`signature_pad`'s API](https:
 
 You can interact with the example in a few different ways:
 
-1. Run `npm start` and navigate to [http://localhost:8080/](http://localhost:8080/).<br>
+1. Run `npm start` and navigate to [http://localhost:1234/](http://localhost:1234/).<br>
 Hosted locally via the [`example/`](example/) directory
 1. [View the live demo here](https://agilgur5.github.io/react-signature-canvas/).<br>
 Hosted via the [`gh-pages` branch](https://github.com/agilgur5/react-signature-canvas/tree/gh-pages), a standalone version of the code in [`example/`](example/)

babel.config.js

@@ -0,0 +1,24 @@
+/** @type {import('@babel/core').ConfigFunction} */
+module.exports = api => {
+  // eslint-disable-next-line dot-notation -- this conflicts with tsc, possibly due to outdated ESLint
+  api.cache.using(() => process.env['NODE_ENV']) // cache based on NODE_ENV
+
+  // normally use browserslistrc, but for Jest, use current version of Node
+  const isTest = api.env('test')
+  const jestTargets = { targets: { node: 'current' } }
+  /** @type {[import('@babel/core').PluginTarget, import('@babel/core').PluginOptions]} */
+  const presetEnv = ['@babel/preset-env', { bugfixes: true }]
+  if (isTest) presetEnv[1] = { ...presetEnv[1], ...jestTargets }
+
+  return {
+    presets: [
+      presetEnv,
+      '@babel/preset-typescript',
+      '@babel/preset-react'
+    ],
+    plugins: [
+      // used with @rollup/plugin-babel
+      '@babel/plugin-transform-runtime'
+    ]
+  }
+}

example/index.html → example/public/index.html

@@ -4,6 +4,6 @@
 </head>
 <body>
   <div id='container'></div>
-  <script src='build/bundle.js'></script>
+  <script type='module' src='../src/index.js'></script>
 </body>
-</html>
+</html>

example/app.js → example/src/index.js

@@ -1,9 +1,9 @@
 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.cssm'
+import * as styles from './styles.module.css'
 
 class App extends Component {
   state = { trimmedDataURL: null }
@@ -15,8 +15,9 @@ class App extends Component {
   }
 
   trim = () => {
-    this.setState({ trimmedDataURL: this.sigPad.getTrimmedCanvas()
-      .toDataURL('image/png') })
+    this.setState({
+      trimmedDataURL: this.sigPad.getTrimmedCanvas().toDataURL('image/png')
+    })
   }
 
   render () {
@@ -35,7 +36,7 @@ class App extends Component {
         </button>
       </div>
       {trimmedDataURL
-        ? <img className={styles.sigImage}
+        ? <img className={styles.sigImage} alt='signature'
           src={trimmedDataURL} />
         : null}
     </div>

jest.config.ts

@@ -0,0 +1,19 @@
+import type { Config } from '@jest/types'
+import { defaults } from 'jest-config'
+
+const config: Config.InitialOptions = {
+  injectGlobals: false, // use @jest/globals
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: [
+    // configure enzyme w/ react adapter
+    '<rootDir>/test/config/configure-enzyme.js',
+    // polyfill window.resizeTo
+    'window-resizeto/polyfill'
+  ],
+  coveragePathIgnorePatterns: [
+    ...defaults.coveragePathIgnorePatterns,
+    '<rootDir>/test/' // ignore any test helper files
+  ]
+}
+
+export default config