Merge e0d0bf8 into c435ed5

.github/workflows/publish.yml

@@ -1,6 +1,10 @@
 name: Publish
 
-on: [push, pull_request]
+on:
+  push:
+    branches:
+      - master
+  pull_request:
 
 jobs:
   build:
@@ -49,11 +53,9 @@ jobs:
       env:
         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-#    - run: yarn test:coverage
-#      env:
-#        COVERALLS_REPO_TOKEN: ${{ secrets.COVERALLS_REPO_TOKEN }}
-#    - uses: coverallsapp/github-action@master
-#      if: success()
-#      with:
-#        github-token: ${{ secrets.GITHUB_TOKEN }}
-#        path-to-lcov: 'packages/*/coverage/lcov.info'
+    - uses: coverallsapp/github-action@master
+      if: success()
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        path-to-lcov: packages/wrapper/coverage/lcov.info
+        base-path: packages/wrapper

.gitignore

@@ -9,4 +9,13 @@ node_modules
 npm-debug*
 out
 types
-lerna-debug.log
+lerna-debug.log
+
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*

README.md

@@ -421,7 +421,7 @@ The wrapper can also be attached to your `_app` component (located in `/pages`).
 # pages/_app.tsx
 
 import React from 'react';
-import App, {AppInitialProps, AppContext} from 'next/app';
+import App, {AppInitialProps} from 'next/app';
 import {wrapper} from '../components/store';
 import {State} from '../components/reducer';
 
@@ -434,15 +434,14 @@ declare module 'next/dist/next-server/lib/utils' {
 
 class MyApp extends App<AppInitialProps> {
 
-    public static getInitialProps = wrapper.getInitialAppProps(store => async ({Component, ctx}) => {
+    public static getInitialProps = wrapper.getInitialAppProps(store => async context => {
 
         store.dispatch({type: 'TOE', payload: 'was set in _app'});
 
         return {
             pageProps: {
-                // Call page-level getInitialProps
-                // DON'T FORGET TO PROVIDE STORE TO PAGE
-                ...(Component.getInitialProps ? await Component.getInitialProps({...ctx, store}) : {}),
+                // https://nextjs.org/docs/advanced-features/custom-app#caveats
+                ...(await App.getInitialProps(context)).pageProps,
                 // Some custom thing for all pages
                 pathname: ctx.pathname,
             },
@@ -473,15 +472,14 @@ import App from 'next/app';
 import {wrapper} from '../components/store';
 
 class MyApp extends App {
-    static getInitialProps = wrapper.getInitialAppProps(store => async ({Component, ctx}) => {
+    static getInitialProps = wrapper.getInitialAppProps(store => async context => {
 
         store.dispatch({type: 'TOE', payload: 'was set in _app'});
 
         return {
             pageProps: {
-                // Call page-level getInitialProps
-                // DON'T FORGET TO PROVIDE STORE TO PAGE
-                ...(Component.getInitialProps ? await Component.getInitialProps({...ctx, store}) : {}),
+                // https://nextjs.org/docs/advanced-features/custom-app#caveats
+                ...(await App.getInitialProps(context)).pageProps,
                 // Some custom thing for all pages
                 pathname: ctx.pathname,
             },
@@ -784,7 +782,7 @@ const reducer = (state = {tick: 'init'}, action) => {
 If you prefer an isomorphic approach for some (preferably small) portions of your state, you can share them between client and server on server-rendered pages using [next-redux-cookie-wrapper](https://github.com/bjoluc/next-redux-cookie-wrapper), an extension to next-redux-wrapper.
 In this case, for selected substates, the server is aware of the client's state (unless in `getStaticProps`) and there is no need to separate server and client state.
 
-Also you can use a library like https://github.com/benjamine/jsondiffpatch to analyze diff and apply it properly.
+Also, you can use a library like https://github.com/benjamine/jsondiffpatch to analyze diff and apply it properly.
 
 ### Document
 
@@ -917,7 +915,7 @@ export const makeStore = (context) => {
     const store = createStore(reducer, applyMiddleware(sagaMiddleware));
 
     // 3: Run your sagas on server
-    (store as SagaStore).sagaTask = sagaMiddleware.run(rootSaga);
+    store.sagaTask = sagaMiddleware.run(rootSaga);
 
     // 4: now return the store:
     return store;
@@ -933,28 +931,27 @@ Then in the `pages/_app` wait stop saga and wait for it to finish when execution
 
 ```typescript
 import React from 'react';
-import App, {AppInitialProps, AppContext} from 'next/app';
+import App, {AppInitialProps} from 'next/app';
 import {END} from 'redux-saga';
 import {SagaStore, wrapper} from '../components/store';
 
 class WrappedApp extends App<AppInitialProps> {
-    public static getInitialProps = async ({Component, ctx}: AppContext) => {
+    public static getInitialProps = wrapper.getInitialAppProps(store => async context => {
         // 1. Wait for all page actions to dispatch
         const pageProps = {
-            ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
+            // https://nextjs.org/docs/advanced-features/custom-app#caveats
+            ...(await App.getInitialProps(context)).pageProps,
         };
 
         // 2. Stop the saga if on server
-        if (ctx.req) {
-            ctx.store.dispatch(END);
-            await (ctx.store as SagaStore).sagaTask.toPromise();
+        if (context.ctx.req) {
+            store.dispatch(END);
+            await (store as SagaStore).sagaTask.toPromise();
         }
 
         // 3. Return props
-        return {
-            pageProps,
-        };
-    };
+        return {pageProps};
+    });
 
     public render() {
         const {Component, pageProps} = this.props;
@@ -975,23 +972,22 @@ import {END} from 'redux-saga';
 import {SagaStore, wrapper} from '../components/store';
 
 class WrappedApp extends App {
-    public static getInitialProps = async ({Component, ctx}) => {
+    static getInitialProps = wrapper.getInitialAppProps(store => async context => {
         // 1. Wait for all page actions to dispatch
         const pageProps = {
-            ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
+            // https://nextjs.org/docs/advanced-features/custom-app#caveats
+            ...(await App.getInitialProps(context)).pageProps,
         };
 
         // 2. Stop the saga if on server
-        if (ctx.req) {
-            ctx.store.dispatch(END);
-            await (ctx.store as SagaStore).sagaTask.toPromise();
+        if (context.ctx.req) {
+            store.dispatch(END);
+            await store.sagaTask.toPromise();
         }
 
         // 3. Return props
-        return {
-            pageProps,
-        };
-    };
+        return {pageProps};
+    });
 
     public render() {
         const {Component, pageProps} = this.props;
@@ -1217,14 +1213,12 @@ If your project was using Next.js 5 and Next Redux Wrapper 1.x these instruction
     import {wrapper} from '../store';
 
     class MyApp extends App {
-        static async getInitialProps({Component, ctx}) {
-            return {
-                pageProps: {
-                    // Call page-level getInitialProps
-                    ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
-                }
-            };
-        }
+        static async getInitialProps = (context) => ({
+            pageProps: {
+                // https://nextjs.org/docs/advanced-features/custom-app#caveats
+                ...(await App.getInitialProps(context)).pageProps,
+            }
+        });
 
         render() {
             const {Component, pageProps} = this.props;

package.json

@@ -5,31 +5,24 @@
   "description": "Redux wrapper for Next.js",
   "scripts": {
     "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
-    "start": "yarn build:quick && yarn start:quick",
-    "start:quick": "lerna run start --parallel",
+    "start": "yarn build && yarn start:all",
+    "start:all": "lerna run start --parallel",
     "build": "lerna run build --stream",
-    "build:quick": "yarn build --scope=next-redux-wrapper",
     "test": "lerna run test --parallel",
     "test:quick": "lerna run test:quick --parallel",
-    "test:coverage": "cat packages/*/coverage/lcov.info | coveralls",
     "publish:release": "lerna publish --tag-version-prefix=\"\" --force-publish=* --no-push --no-git-tag-version",
     "lint": "eslint --cache --cache-location .eslint/cache --fix",
     "lint:all": "yarn lint '**/*.{ts,tsx,js,jsx}'",
     "lint:staged": "lint-staged --debug"
   },
   "devDependencies": {
-    "@types/webpack": "^4.41.25",
-    "coveralls": "3.1.0",
-    "eslint": "7.0.0",
+    "eslint": "7.32.0",
     "eslint-config-ringcentral-typescript": "3.0.0",
-    "husky": "4.3.5",
-    "lerna": "3.22.1",
-    "lint-staged": "10.5.3",
+    "husky": "7.0.2",
+    "lerna": "4.0.0",
+    "lint-staged": "11.1.2",
     "rimraf": "3.0.2",
-    "typescript": "4.1.2"
-  },
-  "resolutions": {
-    "@types/react": "17.0.0"
+    "typescript": "4.4.3"
   },
   "workspaces": [
     "packages/*"
@@ -43,5 +36,6 @@
     "url": "https://github.com/kirill-konshin/next-redux-wrapper/issues"
   },
   "homepage": "https://github.com/kirill-konshin/next-redux-wrapper",
-  "license": "MIT"
+  "license": "MIT",
+  "packageManager": "yarn@3.0.2"
 }

packages/configs/playwright.js

@@ -0,0 +1,8 @@
+module.exports = {
+    webServer: {
+        command: 'yarn start',
+        port: 3000,
+        timeout: 120 * 1000,
+        reuseExistingServer: !process.env.CI,
+    },
+};

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

@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/demo-page/package.json

@@ -5,38 +5,28 @@
   "description": "Demo of redux wrapper for Next.js",
   "scripts": {
     "clean": "rimraf .next coverage",
-    "test": "jest",
-    "start": "next --port=4000",
-    "build": "next build",
-    "serve": "next start --port=4000"
+    "test": "playwright test",
+    "start": "next --port=4000"
   },
   "dependencies": {
     "jsondiffpatch": "0.4.1",
-    "next-redux-wrapper": "^7.0.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-redux": "7.2.2",
-    "redux": "4.0.5",
+    "next-redux-wrapper": "*",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-redux": "7.2.5",
+    "redux": "4.1.1",
     "redux-logger": "3.0.6"
   },
   "devDependencies": {
-    "@types/expect-puppeteer": "4.4.5",
-    "@types/jest": "26.0.19",
-    "@types/jest-environment-puppeteer": "4.4.1",
-    "@types/puppeteer": "5.4.2",
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
-    "@types/react-redux": "7.1.11",
-    "@types/redux-logger": "3.0.8",
-    "@types/webpack-env": "1.16.0",
-    "jest": "26.6.3",
-    "jest-puppeteer": "4.4.0",
-    "next": "10.0.3",
-    "next-redux-wrapper-configs": "^7.0.0",
-    "puppeteer": "5.5.0",
+    "@playwright/test": "1.14.1",
+    "@types/react-dom": "17.0.9",
+    "@types/react-redux": "7.1.18",
+    "@types/redux-logger": "3.0.9",
+    "next": "11.1.0",
+    "next-redux-wrapper-configs": "*",
+    "playwright": "1.14.1",
     "rimraf": "3.0.2",
-    "ts-jest": "26.4.4",
-    "typescript": "4.1.2"
+    "typescript": "4.4.3"
   },
   "author": "Kirill Konshin",
   "repository": {

packages/demo-page/playwright.config.ts

@@ -0,0 +1,12 @@
+import {PlaywrightTestConfig} from '@playwright/test';
+import defaultConfig from 'next-redux-wrapper-configs/playwright';
+
+const config: PlaywrightTestConfig = {
+    ...defaultConfig,
+    webServer: {
+        ...defaultConfig.webServer,
+        port: 4000,
+    },
+};
+
+export default config;

packages/demo-page/src/pages/index.tsx

@@ -29,7 +29,7 @@ const Page: NextPage<ConnectedPageProps> = ({custom}) => {
 export const getServerSideProps = wrapper.getServerSideProps(store => async ({req}) => {
     console.log('2. Page.getServerSideProps uses the store to dispatch things');
     store.dispatch({type: 'PAGE', payload: 'was set in index page ' + req.url});
-    await new Promise(res => setTimeout(res, 1000));
+    await new Promise(res => setTimeout(res, 100));
     return {props: {custom: 'custom'}};
 });