[RFR] Migrate ra-core to TypeScript

examples/demo/src/App.js

@@ -1,4 +1,3 @@
-import 'babel-polyfill';
 import React, { Component } from 'react';
 import { Admin, Resource } from 'react-admin';
 

examples/graphcool-demo/src/App.js

@@ -1,4 +1,3 @@
-import 'babel-polyfill';
 import React, { Component } from 'react';
 import { Admin, Resource } from 'react-admin';
 

packages/ra-core/package.json

@@ -26,13 +26,18 @@
         "watch": "rimraf ./lib && tsc --watch"
     },
     "devDependencies": {
+        "@types/history": "^4.7.2",
+        "@types/node-polyglot": "^0.4.31",
+        "@types/react-router": "^4.4.1",
+        "@types/recompose": "^0.27.0",
         "cross-env": "^5.2.0",
-        "enzyme": "~3.3.0",
-        "enzyme-adapter-react-16": "~1.1.1",
+        "enzyme": "~3.7.0",
+        "enzyme-adapter-react-16": "~1.6.0",
         "ignore-styles": "~5.0.1",
         "react": "~16.3.1",
         "react-dom": "~16.3.1",
         "react-test-renderer": "~16.3.1",
+        "react-testing-library": "^5.2.3",
         "rimraf": "^2.6.2"
     },
     "peerDependencies": {

packages/ra-core/src/CoreAdmin.js → packages/ra-core/src/CoreAdmin.tsx

@@ -1,4 +1,9 @@
-import React, { createElement } from 'react';
+import React, {
+    createElement,
+    Component,
+    ReactNode,
+    ComponentType,
+} from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import createHistory from 'history/createHashHistory';
@@ -9,35 +14,33 @@ import withContext from 'recompose/withContext';
 import createAdminStore from './createAdminStore';
 import TranslationProvider from './i18n/TranslationProvider';
 import CoreAdminRouter from './CoreAdminRouter';
+import { AuthProvider, I18nProvider, DataProvider } from './types';
 
-const componentPropType = PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.string,
-]);
+export type ChildrenFunction = () => ComponentType[];
 
-class CoreAdmin extends React.Component {
-    static propTypes = {
-        appLayout: componentPropType,
-        authProvider: PropTypes.func,
-        children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-        catchAll: componentPropType,
-        customSagas: PropTypes.array,
-        customReducers: PropTypes.object,
-        customRoutes: PropTypes.array,
-        dashboard: componentPropType,
-        dataProvider: PropTypes.func,
-        history: PropTypes.object,
-        i18nProvider: PropTypes.func,
-        initialState: PropTypes.object,
-        loading: componentPropType,
-        locale: PropTypes.string,
-        loginPage: componentPropType,
-        logoutButton: componentPropType,
-        menu: componentPropType,
-        theme: PropTypes.object,
-        title: PropTypes.node,
-    };
+interface Props {
+    appLayout: ComponentType;
+    authProvider: AuthProvider;
+    children: ReactNode | ChildrenFunction;
+    catchAll: ComponentType;
+    customSagas: any[];
+    customReducers: object;
+    customRoutes: any[];
+    dashboard: ComponentType;
+    dataProvider: DataProvider;
+    history: object;
+    i18nProvider: I18nProvider;
+    initialState: object;
+    loading: ComponentType;
+    locale: string;
+    loginPage: ComponentType;
+    logoutButton: ComponentType;
+    menu: ComponentType;
+    theme: object;
+    title: ReactNode;
+}
 
+class CoreAdmin extends Component<Props> {
     static contextTypes = {
         store: PropTypes.object,
     };
@@ -123,12 +126,28 @@ React-admin requires a valid dataProvider function to work.`);
     }
 
     render() {
+        const {
+            authProvider,
+            customReducers,
+            customSagas,
+            dataProvider,
+            i18nProvider,
+            initialState,
+            locale,
+        } = this.props;
+
         return this.reduxIsAlreadyInitialized ? (
             this.renderCore()
         ) : (
             <Provider
                 store={createAdminStore({
-                    ...this.props,
+                    authProvider,
+                    customReducers,
+                    customSagas,
+                    dataProvider,
+                    i18nProvider,
+                    initialState,
+                    locale,
                     history: this.history,
                 })}
             >

packages/ra-core/src/auth/Authenticated.js → packages/ra-core/src/auth/Authenticated.tsx

@@ -1,8 +1,16 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, ReactElement } from 'react';
 import { connect } from 'react-redux';
+import isEqual from 'lodash/isEqual';
 
-import { userCheck } from '../actions/authActions';
+import { userCheck as userCheckAction } from '../actions/authActions';
+import { UserCheck } from './types';
+
+interface Props {
+    authParams: object;
+    children: ReactElement<any>;
+    location: object;
+    userCheck: UserCheck;
+}
 
 /**
  * Restrict access to children to authenticated users
@@ -31,20 +39,13 @@ import { userCheck } from '../actions/authActions';
  *         </Admin>
  *     );
  */
-export class Authenticated extends Component {
-    static propTypes = {
-        authParams: PropTypes.object,
-        children: PropTypes.element.isRequired,
-        location: PropTypes.object,
-        userCheck: PropTypes.func,
-    };
-
+export class Authenticated extends Component<Props> {
     componentWillMount() {
         this.checkAuthentication(this.props);
     }
 
     componentWillReceiveProps(nextProps) {
-        if (nextProps.location !== this.props.location) {
+        if (!isEqual(nextProps.location, this.props.location)) {
             this.checkAuthentication(nextProps);
         }
     }
@@ -69,5 +70,5 @@ export class Authenticated extends Component {
 
 export default connect(
     null,
-    { userCheck }
+    { userCheck: userCheckAction }
 )(Authenticated);

packages/ra-core/src/auth/WithPermissions.js → packages/ra-core/src/auth/WithPermissions.tsx

@@ -1,13 +1,40 @@
-import { Children, Component } from 'react';
+import { Children, Component, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import compose from 'recompose/compose';
 import getContext from 'recompose/getContext';
 
-import { userCheck } from '../actions/authActions';
-import { AUTH_GET_PERMISSIONS } from '../auth/types';
-import { isLoggedIn } from '../reducer';
+import { userCheck as userCheckAction } from '../actions/authActions';
+import { AUTH_GET_PERMISSIONS } from './types';
+import { isLoggedIn as getIsLoggedIn } from '../reducer';
 import warning from '../util/warning';
+import { AuthProvider } from '../types';
+import { UserCheck } from './types';
+import { Location } from 'history';
+import { match as Match } from 'react-router';
+
+interface WithPermissionsChildrenParams {
+    authParams: object;
+    location?: Location;
+    match: Match;
+    permissions: any;
+}
+
+type WithPermissionsChildren = (
+    params: WithPermissionsChildrenParams
+) => ReactNode;
+
+interface Props {
+    authProvider: AuthProvider;
+    authParams: object;
+    children: WithPermissionsChildren;
+    location: Location;
+    match: Match;
+    render: WithPermissionsChildren;
+    isLoggedIn: boolean;
+    staticContext: object;
+    userCheck: UserCheck;
+}
 
 const isEmptyChildren = children => Children.count(children) === 0;
 
@@ -45,19 +72,7 @@ const isEmptyChildren = children => Children.count(children) === 0;
  *         </Admin>
  *     );
  */
-export class WithPermissions extends Component {
-    static propTypes = {
-        authProvider: PropTypes.func,
-        authParams: PropTypes.object,
-        children: PropTypes.func,
-        location: PropTypes.object,
-        match: PropTypes.object,
-        render: PropTypes.func,
-        isLoggedIn: PropTypes.bool,
-        staticContext: PropTypes.object,
-        userCheck: PropTypes.func,
-    };
-
+export class WithPermissions extends Component<Props> {
     cancelled = false;
 
     state = { permissions: null };
@@ -91,12 +106,12 @@ export class WithPermissions extends Component {
         }
     }
 
-    checkAuthentication(params) {
+    checkAuthentication(params: Props) {
         const { userCheck, authParams, location } = params;
         userCheck(authParams, location && location.pathname);
     }
 
-    async checkPermissions(params) {
+    async checkPermissions(params: Props) {
         const { authProvider, authParams, location, match } = params;
         try {
             const permissions = await authProvider(AUTH_GET_PERMISSIONS, {
@@ -139,7 +154,7 @@ export class WithPermissions extends Component {
     }
 }
 const mapStateToProps = state => ({
-    isLoggedIn: isLoggedIn(state),
+    isLoggedIn: getIsLoggedIn(state),
 });
 
 export default compose(
@@ -148,6 +163,6 @@ export default compose(
     }),
     connect(
         mapStateToProps,
-        { userCheck }
+        { userCheck: userCheckAction }
     )
 )(WithPermissions);

packages/ra-core/src/auth/types.ts

@@ -0,0 +1,13 @@
+import { AuthActionType } from '../types';
+
+export type UserCheck = (
+    payload: object,
+    pathName: string,
+    routeParams?: object
+) => void;
+
+export const AUTH_LOGIN: AuthActionType = 'AUTH_LOGIN';
+export const AUTH_CHECK: AuthActionType = 'AUTH_CHECK';
+export const AUTH_ERROR: AuthActionType = 'AUTH_ERROR';
+export const AUTH_LOGOUT: AuthActionType = 'AUTH_LOGOUT';
+export const AUTH_GET_PERMISSIONS: AuthActionType = 'AUTH_GET_PERMISSIONS';