feat: implement react hooks BREAKING CHANGE (#17)

BREAKING CHANGE: Uses latest release of react, as the implementation was refactored to use Hooks. Also the querystring is now being pass as a page prop under query.
flybondi · Mar 10, 2019 · 1892340 · 1892340
1 parent abcd587
commit 1892340
Show file tree

Hide file tree

Showing 17 changed files with 1,753 additions and 1,366 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,6 +1,6 @@
 {
   "parser": "babel-eslint",
-  "plugins": ["flowtype", "ramda", "react"],
+  "plugins": ["flowtype", "ramda", "react", "react-hooks"],
   "extends": [
     "standard",
     "plugin:flowtype/recommended",
@@ -21,6 +21,8 @@
   "rules": {
     "semi": [2, "always"],
     "no-extra-semi": 2,
-    "react/display-name": 0
+    "react/display-name": 0,
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
   }
 }
diff --git a/flow-typed/beforeComponent_vx.x.x.js b/flow-typed/beforeComponent_vx.x.x.js
@@ -76,7 +76,7 @@ declare module 'Before.component' {
     generateCriticalCSS?: () => string | boolean,
     title?: string,
     extractor?: ?Extractor,
-    location?: LocationType,
+    location: LocationType,
     [key: string]: any
   };
 
@@ -137,13 +137,28 @@ declare module 'Before.component' {
   |};
 
   declare type BeforeState = {
-    data: { [key: string]: any }
+    currentLocation: LocationType,
+    isFetching: boolean,
+    nextLocation: ?LocationType,
+    initialProps: DataType
+  };
+
+  declare type BeforeAction = {
+    type: 'start' | 'end',
+    location: LocationType,
+    props?: DataType
   };
 
   declare type StaticRouterContext = {
     url?: string
   };
 
+  declare type ShouldRenderProps = {
+    children: React$Element<FixMeType>,
+    isFetching: boolean,
+    location: LocationType
+  };
+
   declare type BeforeComponentWithRouterProps = {|
     +history: RouterHistory,
     +location: LocationType,
@@ -154,24 +169,16 @@ declare module 'Before.component' {
     +req: Request
   |};
 
-  declare class BeforeComponent extends React$Component<
-    BeforeComponentWithRouterProps,
-    BeforeState
-  > {
-    constructor(props: BeforeComponentWithRouterProps): void;
-    prefetchInitialPropsFromAllRoutes(): void;
-    componentDidUpdate(prevProps: BeforeComponentWithRouterProps): void;
-    shouldComponentUpdate(
-      nextProps: BeforeComponentWithRouterProps,
-      nextState: BeforeState
-    ): boolean;
-    getData(path: string): ?DataType;
-    render(): React$Element<
-      Class<React$Component<{| children?: React$Node, location?: LocationType |}>>
-    >;
-  }
-
   declare module.exports: {
-    Before: typeof BeforeComponent
+    Before: (
+      props: BeforeComponentWithRouterProps
+    ) => React$Element<
+      Class<
+        React$Component<{|
+          children?: Node,
+          location?: Location
+        |}>
+      >
+    >
   };
 }
diff --git a/flow-typed/documentComponent_vx.x.x.js b/flow-typed/documentComponent_vx.x.x.js
@@ -29,7 +29,7 @@ declare module 'Document.component' {
 
   declare type TagMethods = {
     toString(): string,
-    toComponent(): Array<React$Element<any>> | React$Element<any> | Array<Object>
+    toComponent(): [React$Element<*>] | React$Element<*> | Array<Object>
   };
 
   declare type AttributeTagMethods = {
@@ -66,22 +66,30 @@ declare module 'Document.component' {
     assets: Assets,
     criticalCSS: boolean | string,
     data: DataType,
-    renderPage: (data: { [key: string]: any }) => Promise<any>,
-    generateCriticalCSS: () => string | boolean,
+    renderPage?: (data: { [key: string]: any }) => Promise<any>,
+    generateCriticalCSS?: () => string | boolean,
     title: string,
-    extractor: Extractor,
+    extractor: ?Extractor,
     helmet: Helmet,
     error: Error,
-    errorComponent: React$ComponentType<ErrorProps>,
-    filterServerData: (data: DataType) => DataType,
+    errorComponent?: React$ComponentType<ErrorProps>,
+    filterServerData?: (data: DataType) => DataType,
+    extraHeadTags?: Array<ExtraTag>,
+    extraBodyTags?: Array<ExtraTag>,
+    [key: string]: any
+  };
+
+  declare type DocumentGetInitialProps = {
+    criticalCSS: boolean | string,
+    assets: Assets,
+    data: DataType,
+    extractor: Extractor,
     html: string,
-    extraHeadTags: Array<ExtraTag>,
-    extraBodyTags: Array<ExtraTag>,
     [key: string]: any
   };
 
   declare type DocumentComponent = {
-    getInitialProps(context: Context): Promise<DocumentInitialProps>
+    getInitialProps(context: Context): Promise<DocumentGetInitialProps>
   } & $Subtype<React$ComponentType<DocumentInitialProps>>;
 
   declare module.exports: {

diff --git a/package.json b/package.json
@@ -31,71 +31,73 @@
   "peerDependencies": {
     "@loadable/component": "^5.2.2",
     "@loadable/server": "^5.2.2",
-    "react": ">=16",
-    "react-dom": ">= 16",
+    "react": ">=16.8",
+    "react-dom": ">= 16.8",
     "react-helmet": "^5.2.0",
     "react-router-dom": "^4.3.1"
   },
   "dependencies": {
-    "hoist-non-react-statics": "^3.2.1",
-    "query-string": "^6.2.0",
+    "hoist-non-react-statics": "^3.3.0",
+    "query-string": "^6.3.0",
     "ramda": "^0.26.1",
     "serialize-javascript": "^1.6.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.0",
+    "@babel/core": "^7.3.4",
     "@babel/plugin-external-helpers": "^7.2.0",
     "@babel/preset-flow": "^7.0.0",
-    "@babel/runtime": "^7.3.1",
-    "@commitlint/config-conventional": "^7.3.1",
+    "@babel/runtime": "^7.3.4",
+    "@commitlint/config-conventional": "^7.5.0",
     "@flybondi/rollup-plugin-ramda": "^1.0.0",
-    "@loadable/component": "^5.5.0",
-    "@loadable/server": "^5.5.0",
+    "@loadable/component": "^5.6.1",
+    "@loadable/server": "^5.6.1",
     "babel-core": "^7.0.0-0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.0.0",
-    "babel-preset-react-app": "^7.0.0",
-    "commitlint": "^7.3.2",
+    "babel-jest": "^24.3.1",
+    "babel-preset-react-app": "^7.0.2",
+    "commitlint": "^7.5.2",
     "cross-env": "^5.2.0",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.8.0",
-    "eslint": "^5.12.1",
-    "eslint-config-prettier": "^4.0.0",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.10.0",
+    "eslint": "^5.15.1",
+    "eslint-config-prettier": "^4.1.0",
     "eslint-config-standard": "^12.0.0",
-    "eslint-plugin-flowtype": "^3.2.1",
-    "eslint-plugin-import": "^2.15.0",
+    "eslint-plugin-flowtype": "^3.4.2",
+    "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-node": "^8.0.1",
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-ramda": "^2.5.1",
     "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react-hooks": "^1.5.0",
     "eslint-plugin-standard": "^4.0.0",
-    "flow-bin": "0.91.0",
+    "flow-bin": "0.94.0",
     "flow-typed": "^2.5.1",
     "husky": "^1.3.1",
-    "jest": "^24.0.0",
-    "lint-staged": "^8.1.0",
+    "jest": "^24.3.1",
+    "lint-staged": "^8.1.5",
     "npm-run-all": "^4.1.5",
     "object-assign": "^4.1.1",
-    "prettier": "^1.16.1",
+    "prettier": "^1.16.4",
     "raf": "^3.4.1",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
     "react-helmet": "^5.2.0",
     "react-router-dom": "^4.3.1",
-    "rollup": "^1.1.2",
+    "react-testing-library": "^6.0.0",
+    "rollup": "^1.6.0",
     "rollup-plugin-analyzer": "^3.0.0",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-clean": "^1.0.0",
-    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-commonjs": "^9.2.1",
     "rollup-plugin-filesize": "^6.0.1",
     "rollup-plugin-flow": "^1.1.1",
-    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-node-resolve": "^4.0.1",
     "rollup-plugin-progress": "^1.0.0",
     "rollup-plugin-visualizer": "^0.9.2",
     "run-sequence": "^2.2.1",
-    "webpack": "^4.29.0",
+    "webpack": "^4.29.6",
     "whatwg-fetch": "^3.0.0"
   },
   "lint-staged": {

diff --git a/src/Async.component.jsx b/src/Async.component.jsx
@@ -23,10 +23,10 @@ export function asyncComponent({ LoadableComponent, loader }: AsyncOptions) {
     });
   };
 
-  AsyncRouteComponent.getInitialProps = async (context: Context) =>
-    Component !== null && Component.getInitialProps
-      ? Component.getInitialProps(context)
-      : Promise.resolve(null);
+  AsyncRouteComponent.getInitialProps = async (context: Context) => {
+    const component = Component || (await AsyncRouteComponent.load());
+    return component.getInitialProps ? component.getInitialProps(context) : Promise.resolve(null);
+  };
 
   return AsyncRouteComponent;
 }