diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 5922d86..0000000
--- a/.babelrc
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "presets": [
- "es2015",
- "react",
- "stage-2"
- ]
-}
diff --git a/.gitignore b/.gitignore
index 22f3621..efbc25c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,9 @@
### custom ###
+# parcel cache
+.parcel-cache/
# build output
-build/
+dist/
# test coverage output
coverage/
diff --git a/.travis.yml b/.travis.yml
index f8934a7..6eb882a 100644
--- a/.travis.yml
+++ b/.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
diff --git a/README.md b/README.md
index e3e055c..717fc0b 100644
--- a/README.md
+++ b/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)
+[![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)
@@ -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/).
+1. Run `npm start` and navigate to [http://localhost:1234/](http://localhost:1234/).
Hosted locally via the [`example/`](example/) directory
1. [View the live demo here](https://agilgur5.github.io/react-signature-canvas/).
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/)
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..fada44a
--- /dev/null
+++ b/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'
+ ]
+ }
+}
diff --git a/example/index.html b/example/public/index.html
similarity index 62%
rename from example/index.html
rename to example/public/index.html
index 4719ae4..399ff44 100755
--- a/example/index.html
+++ b/example/public/index.html
@@ -4,6 +4,6 @@