typescript support

Author: rpearce

.eslintignore

@@ -1,2 +1,4 @@
+!.eslintrc.js
+!.prettierrc.js
 dist/
 docs/

.eslintrc.js

@@ -6,31 +6,42 @@ module.exports = {
     node: true
   },
   extends: [
-    'eslint:recommended',
-    'plugin:jsx-a11y/recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier/@typescript-eslint',
     'plugin:prettier/recommended',
-    'plugin:react/recommended'
+    'plugin:jsx-a11y/recommended'
   ],
   parserOptions: {
-    ecmaVersion: 2019,
+    ecmaVersion: 2020,
     sourceType: 'module'
   },
-  plugins: [
-    'jsx-a11y',
-    'react'
-  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['jsx-a11y', 'react', 'react-hooks', '@typescript-eslint'],
   rules: {
-    'indent': ['error', 2, { 'SwitchCase': 1 }],
+    '@typescript-eslint/no-explicit-any': 0, // because library is generic
     'jsx-quotes': ['error', 'prefer-double'],
     'jsx-a11y/no-onchange': 0,
     'no-trailing-spaces': 'error',
     'object-curly-spacing': ['error', 'always'],
-    'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],
-    'semi': ['error', 'never']
+    quotes: ['error', 'single', { allowTemplateLiterals: true }],
+    'react-hooks/exhaustive-deps': 'error',
+    'react-hooks/rules-of-hooks': 'error',
+    'react/prop-types': 0,
+    semi: ['error', 'never']
   },
   settings: {
     react: {
-      version: '16'
+      version: 'detect'
+    }
+  },
+  overrides: [
+    {
+      files: ['*.js', '*.jsx'],
+      rules: {
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/no-var-requires': 'off'
+      }
     }
-  }
+  ]
 }

.travis.yml

@@ -1,6 +1,11 @@
 language: node_js
 node_js:
   - "13"
+before_install:
+  - curl -o- -L https://yarnpkg.com/install.sh | bash
+  - export PATH="$HOME/.yarn/bin:$PATH"
 cache: yarn
+script:
+  - yarn ci
 after_success:
-  - npm run coverage
+  - yarn run coverage

CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [0.3.1] - 2020-03-13
+
+### Fixed
+* typescript definitions by rewriting project in typescript
+
+### Removed
+* browser build
+
 ## [0.3.0] - 2019-12-29
 
 ### Added

README.md

@@ -1,7 +1,7 @@
 # react-with-forwarded-ref
 [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
 
-[![npm version](https://img.shields.io/npm/v/react-with-forwarded-ref.svg)](https://www.npmjs.com/package/react-with-forwarded-ref) [![npm downloads](https://img.shields.io/npm/dm/react-with-forwarded-ref.svg)](https://www.npmjs.com/package/react-with-forwarded-ref) [![Build Status](https://travis-ci.org/rpearce/react-with-forwarded-ref.svg?branch=master)](https://travis-ci.org/rpearce/react-with-forwarded-ref) [![Coverage Status](https://coveralls.io/repos/github/rpearce/react-with-forwarded-ref/badge.svg?branch=master)](https://coveralls.io/github/rpearce/react-with-forwarded-ref?branch=master) [![Maintainability](https://api.codeclimate.com/v1/badges/61ace8daca24175f9d16/maintainability)](https://codeclimate.com/github/rpearce/react-with-forwarded-ref/maintainability)
+[![npm version](https://img.shields.io/npm/v/react-with-forwarded-ref.svg)](https://www.npmjs.com/package/react-with-forwarded-ref) [![npm downloads](https://img.shields.io/npm/dm/react-with-forwarded-ref.svg)](https://www.npmjs.com/package/react-with-forwarded-ref) [![bundlephobia size](https://badgen.net/bundlephobia/minzip/react-with-forwarded-ref)](bundlephobia.com/result?p=react-with-forwarded-ref) [![Build Status](https://travis-ci.org/rpearce/react-with-forwarded-ref.svg?branch=master)](https://travis-ci.org/rpearce/react-with-forwarded-ref) [![Coverage Status](https://coveralls.io/repos/github/rpearce/react-with-forwarded-ref/badge.svg?branch=master)](https://coveralls.io/github/rpearce/react-with-forwarded-ref?branch=master) [![Maintainability](https://api.codeclimate.com/v1/badges/61ace8daca24175f9d16/maintainability)](https://codeclimate.com/github/rpearce/react-with-forwarded-ref/maintainability)
 
 This React.js [higher-order component
 (HOC)](https://reactjs.org/docs/higher-order-components.html) exists to provide
@@ -10,8 +10,6 @@ an appropriate wrapper for components that utilize
 `ref` via `props` and renames `ref` to `forwardedRef` along
 with whatever other `props` are passed in.
 
-Please see the [`API Documentation`](./API.md) for usage.
-
 ## Links
 * [Installation](#installation)
 * [Usage](#usage)

__tests__/__snapshots__/index.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`withForwardedRef renders 1`] = `
+<DocumentFragment>
+  <div
+    class="foo"
+  >
+    Testing 123
+  </div>
+</DocumentFragment>
+`;
+
+exports[`withForwardedRef renders, custom displayName 1`] = `
+<DocumentFragment>
+  <div
+    class="foo"
+  >
+    Testing 123
+  </div>
+</DocumentFragment>
+`;

test/index.test.js renamed to __tests__/index.tsx

@@ -1,61 +1,64 @@
-/* eslint react/prop-types: 0 */
-
-import React, { createRef } from 'react'
-import { renderIntoDocument } from 'react-dom/test-utils'
-import { shallow } from 'enzyme'
-import toJson from 'enzyme-to-json'
-
+import React, { FC, ReactNode, RefObject, createRef } from 'react'
+import { render } from '@testing-library/react'
 import withForwardedRef from '../source'
 
+interface Props<A = any> {
+  children: ReactNode
+  className: string
+  forwardedRef?: RefObject<A>
+}
+
 describe('withForwardedRef', () => {
   it('renders', () => {
-    const Comp = ({ children, className, forwardedRef }) => (
+    const Comp: FC<Props> = ({ children, className, forwardedRef }) => (
       <div className={className} ref={forwardedRef}>
         {children}
       </div>
     )
     const WrappedComp = withForwardedRef(Comp)
     const ref = createRef()
-    const wrapper = shallow(
+    const { asFragment } = render(
       <WrappedComp className="foo" ref={ref}>
         Testing 123
       </WrappedComp>
     )
-    const tree = toJson(wrapper)
-    expect(tree).toMatchSnapshot()
+
+    expect(asFragment()).toMatchSnapshot()
   })
 
   it('renders, custom displayName', () => {
-    const Comp = ({ children, className, forwardedRef }) => (
+    const Comp: FC<Props> = ({ children, className, forwardedRef }) => (
       <div className={className} ref={forwardedRef}>
         {children}
       </div>
     )
     Comp.displayName = 'FooBar'
     const WrappedComp = withForwardedRef(Comp)
     const ref = createRef()
-    const wrapper = shallow(
+    const { asFragment } = render(
       <WrappedComp className="foo" ref={ref}>
         Testing 123
       </WrappedComp>
     )
-    const tree = toJson(wrapper)
-    expect(tree).toMatchSnapshot()
+
+    expect(asFragment()).toMatchSnapshot()
   })
 
   it('ref points to HTMLDivElement', () => {
-    const Comp = ({ children, className, forwardedRef }) => (
+    const Comp: FC<Props> = ({ children, className, forwardedRef }) => (
       <div className={className} ref={forwardedRef}>
         {children}
       </div>
     )
     const WrappedComp = withForwardedRef(Comp)
     const ref = createRef()
-    renderIntoDocument(
+
+    render(
       <WrappedComp className="foo" ref={ref}>
         Testing 123
       </WrappedComp>
     )
+
     expect(ref.current).toBeInstanceOf(HTMLDivElement)
   })
 })