Hydration fix (#523)

* Hydration fix
* HOCs removed
* Proper GIAP+GSP/GSSP
* Removed HYDRATE
* Coverage

---------

Co-authored-by: bjoluc <[email protected]>

Author: kirill-konshin

.github/workflows/publish.yml

@@ -13,17 +13,16 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
           node-version: '16.x'
-          registry-url: 'https://registry.npmjs.org'
 
       - id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v2
+      - uses: actions/cache@v3
         with:
           path: |
             ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -42,6 +41,15 @@ jobs:
         env:
           CI: true
 
+      # FIXME Coverage report
+
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          path: |
+            packages/*/test-results
+            packages/*/coverage
+
       - run: echo "TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV
 
       - run: yarn publish:release ${TAG} --yes

.gitignore

@@ -8,6 +8,7 @@ lib
 node_modules
 npm-debug*
 out
+test-results
 types
 lerna-debug.log
 

.lintstagedrc

@@ -1,4 +1,4 @@
 {
-  "*.{js,jsx,ts,tsx}": ["yarn eslint", "git add"],
+  "*.{js,jsx,ts,tsx}": ["yarn lint", "git add"],
   "*.{js,jsx,ts,tsx,css,scss,sass,less,md,yml,json}": ["yarn prettier", "git add"]
 }

README.md

@@ -13,20 +13,19 @@
     "test:quick": "lerna run test:quick --stream --concurrency=1",
     "publish:release": "lerna publish --tag-version-prefix=\"\" --force-publish=* --no-push --no-git-tag-version",
     "prettier": "prettier --write --ignore-path=.eslintignore --loglevel=warn",
-    "eslint": "eslint --cache --cache-location node_modules/.cache/eslint --fix",
-    "lint": "eslint --cache --cache-location .eslint/cache --fix",
-    "lint:all": "yarn eslint . && yarn prettier .",
+    "lint": "eslint --cache --cache-location node_modules/.cache/eslint --fix",
+    "lint:all": "yarn lint . && yarn prettier .",
     "lint:staged": "lint-staged --debug"
   },
   "devDependencies": {
-    "eslint": "8.29.0",
+    "eslint": "8.33.0",
     "eslint-config-ringcentral-typescript": "7.0.3",
     "husky": "7.0.4",
     "lerna": "4.0.0",
     "lint-staged": "11.1.2",
-    "prettier": "2.5.1",
-    "rimraf": "3.0.2",
-    "typescript": "4.5.2"
+    "prettier": "2.8.3",
+    "rimraf": "4.1.2",
+    "typescript": "4.5.5"
   },
   "workspaces": [
     "packages/*"
@@ -43,6 +42,7 @@
   "license": "MIT",
   "packageManager": "[email protected]",
   "resolutions": {
-    "@types/react": "17.0.37"
+    "@types/react": "18.0.27",
+    "typescript": "4.5.5"
   }
 }

package.json

@@ -1,4 +1,17 @@
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
 module.exports = {
+    use: {
+        trace: process.env.CI ? 'retain-on-failure' : 'off',
+        video: 'retain-on-failure',
+        screenshot: 'on',
+    },
+    outputDir: process.cwd() + '/test-results/out',
+    reporter: [
+        ['html', {outputFolder: process.cwd() + '/test-results/html', open: 'never'}],
+        ['list'],
+        ['junit', {outputFile: process.cwd() + '/test-results/junit.xml'}],
+        ['json', {outputFile: process.cwd() + '/test-results/results.json'}],
+    ],
     webServer: {
         command: 'yarn start',
         port: 3000,

packages/configs/playwright.js

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

packages/demo-page/next-env.d.ts

@@ -0,0 +1,5 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+    // transpilePackages: ['next-redux-wrapper'], // @see https://nextjs.org/docs/advanced-features/compiler#module-transpilation
+    swcMinify: true,
+};

packages/demo-page/next.config.js

@@ -11,23 +11,23 @@
   "dependencies": {
     "jsondiffpatch": "0.4.1",
     "next-redux-wrapper": "*",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-redux": "7.2.6",
     "redux": "4.1.2",
     "redux-logger": "3.0.6"
   },
   "devDependencies": {
-    "@playwright/test": "1.17.1",
-    "@types/react": "17.0.37",
-    "@types/react-dom": "17.0.11",
+    "@playwright/test": "1.30.0",
+    "@types/react": "18.0.27",
+    "@types/react-dom": "18.0.10",
     "@types/react-redux": "7.1.20",
     "@types/redux-logger": "3.0.9",
-    "next": "12.0.4",
+    "next": "13.1.6",
     "next-redux-wrapper-configs": "*",
-    "playwright": "1.17.1",
+    "playwright": "1.30.0",
     "rimraf": "3.0.2",
-    "typescript": "4.5.2"
+    "typescript": "4.9.5"
   },
   "author": "Kirill Konshin",
   "repository": {

packages/demo-page/package.json

@@ -1,25 +1,11 @@
 import {AnyAction} from 'redux';
-import {HYDRATE} from 'next-redux-wrapper';
-import {diff} from 'jsondiffpatch';
 
 export interface State {
     page: string;
 }
 
 const reducer = (state: State = {page: 'init'}, action: AnyAction) => {
     switch (action.type) {
-        case HYDRATE:
-            const stateDiff = diff(state, action.payload) as any;
-            const wasBumpedOnClient = stateDiff?.page?.[0]?.endsWith('X');
-            console.log('HYDRATE action handler', {
-                stateDiff,
-                wasBumpedOnClient,
-            });
-            return {
-                ...state,
-                ...action.payload,
-                page: wasBumpedOnClient ? state.page : action.payload.page,
-            };
         case 'PAGE':
             return {...state, page: action.payload};
         case 'BUMP':