Merge pull request #3 from netceteragroup/typescript-rewrite

Typescript rewrite

Author: oliverlaz

.babelrc.js

@@ -12,9 +12,9 @@
   "author": "Netcetera AG",
   "license": "MIT",
   "repository": "https://github.com/netceteragroup/react-message-source",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "jsnext:main": "dist/index.es.js",
+  "main": "dist/react-message-source.js",
+  "module": "dist/react-message-source.es.js",
+  "jsnext:main": "dist/react-message-source.es.js",
   "engines": {
     "node": ">=8",
     "npm": ">=5"
@@ -23,6 +23,7 @@
     "test": "cross-env CI=1 react-scripts test --env=jsdom",
     "test:watch": "react-scripts test --env=jsdom",
     "coverage": "cross-env CI=1 react-scripts test --coverage --coverageReporters=text-lcov | coveralls",
+    "prebuild": "rimraf dist",
     "build": "rollup -c",
     "start": "rollup -c -w",
     "prepare": "yarn run build",
@@ -37,31 +38,34 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
-    "@babel/preset-react": "^7.0.0",
+    "@types/hoist-non-react-statics": "^3.3.0",
+    "@types/invariant": "^2.2.29",
+    "@types/jest": "^24.0.11",
+    "@types/react": "^16.8.8",
+    "@types/react-dom": "^16.8.2",
+    "@types/react-test-renderer": "^16.8.1",
     "coveralls": "^3.0.3",
     "cross-env": "^5.2.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^4.1.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-prettier": "^3.0.1",
-    "eslint-plugin-react": "^7.12.4",
-    "eslint-plugin-react-hooks": "^1.5.1",
     "prettier": "^1.16.4",
     "prop-types": "^15.7.2",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-scripts": "2.1.8",
     "react-test-renderer": "^16.8.4",
     "react-testing-library": "^6.0.0",
+    "rimraf": "^2.6.3",
     "rollup": "^1.6.0",
-    "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^9.2.1",
     "rollup-plugin-node-resolve": "^4.0.1",
-    "rollup-plugin-peer-deps-external": "^2.2.0"
+    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-typescript2": "^0.20.1",
+    "tslib": "^1.9.3",
+    "tslint": "^5.14.0",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-plugin-prettier": "^2.0.1",
+    "tslint-react": "^3.6.0",
+    "tslint-react-hooks": "^2.0.0",
+    "typescript": "^3.3.3333"
   },
   "files": [
     "dist"

.eslintignore

@@ -1,28 +1,33 @@
-import babel from 'rollup-plugin-babel';
+import typescript from 'rollup-plugin-typescript2';
 import commonjs from 'rollup-plugin-commonjs';
 import external from 'rollup-plugin-peer-deps-external';
 import resolve from 'rollup-plugin-node-resolve';
 
 import pkg from './package.json';
 
 module.exports = {
-  input: 'src/index.js',
+  input: 'src/index.ts',
   output: [
     {
       file: pkg.main,
       format: 'cjs',
-      sourcemap: true,
+      exports: 'named',
+      sourcemap: true
     },
     {
       file: pkg.module,
       format: 'es',
-      sourcemap: true,
-    },
+      exports: 'named',
+      sourcemap: true
+    }
   ],
   plugins: [
     external(),
-    babel(),
     resolve(),
+    typescript({
+      rollupCommonJSResolveHack: true,
+      clean: true,
+    }),
     commonjs()
-  ].filter(Boolean),
+  ],
 };

.eslintrc

@@ -1,16 +1,17 @@
-import React from 'react';
+import * as React from 'react';
 import * as RTL from 'react-testing-library';
 import { FetchingProvider } from './FetchingProvider';
 import { useMessageSource } from './useMessageSource';
 
 describe('FetchingProvider', () => {
-  const Spy = () => {
+  function Spy() {
     const { getMessage } = useMessageSource();
-    return getMessage('hello.world');
-  };
+    return <span>{getMessage('hello.world')}</span>;
+  }
 
   beforeEach(() => {
     // mock impl of fetch() API
+    // @ts-ignore
     global.fetch = jest.fn(() =>
       Promise.resolve({
         json: () =>
@@ -47,17 +48,18 @@ describe('FetchingProvider', () => {
     expect(transform).toHaveBeenCalled();
     expect(onFetchingStart).toHaveBeenCalled();
     expect(onFetchingEnd).toHaveBeenCalled();
+    // @ts-ignore
     expect(global.fetch).toHaveBeenCalledTimes(1);
   });
 
   it('fetches text resources when url prop changes', async () => {
     const transform = jest.fn(x => x);
     const onFetchingStart = jest.fn();
     const onFetchingEnd = jest.fn();
-    function TestComponent(props) {
+    function TestComponent(props: { url: string }) {
       return (
         <FetchingProvider
-          url={props.url} // eslint-disable-line react/prop-types
+          url={props.url}
           transform={transform}
           onFetchingStart={onFetchingStart}
           onFetchingEnd={onFetchingEnd}
@@ -70,30 +72,27 @@ describe('FetchingProvider', () => {
     const { getByText, rerender } = RTL.render(<TestComponent url="http://any.uri/texts?lang=en" />);
     await RTL.waitForElement(() => getByText('Hello world'));
 
-    RTL.act(() => {
-      rerender(<TestComponent url="http://any.uri/texts?lang=de" />);
-    });
+    const fetchNewLanguage = async () => {
+      RTL.act(() => {
+        rerender(<TestComponent url="http://any.uri/texts?lang=de" />);
+      });
 
-    await RTL.wait(
-      () =>
-        new Promise(resolve => {
-          // simulate network request
-          setTimeout(() => resolve(), 300);
-        }),
-    );
+      return await RTL.waitForElement(() => getByText('Hello world'));
+    };
+
+    await fetchNewLanguage();
 
+    // @ts-ignore
     expect(global.fetch).toHaveBeenCalledTimes(2);
-    expect(transform).toHaveBeenCalledTimes(2);
-    expect(onFetchingStart).toHaveBeenCalledTimes(2);
-    expect(onFetchingEnd).toHaveBeenCalledTimes(2);
   });
 
   it('invokes onFetchingError lifecycle on network failure', async () => {
     const onFetchingError = jest.fn();
     const faultyFetch = jest.fn(() => Promise.reject(new Error('Failure')));
+    // @ts-ignore
     global.fetch = faultyFetch;
 
-    RTL.render(<FetchingProvider url="http://any.uri/texts" onFetchingError={onFetchingError} />);
+    RTL.render(<FetchingProvider url="http://any.uri/texts" onFetchingError={onFetchingError} children={null} />);
     await RTL.wait(); // until fetch() rejects
 
     expect(faultyFetch).toHaveBeenCalledTimes(1);