Merge pull request #196 from kirill-konshin/dev

Add support of getStaticProps and getServerSideProps

.travis.yml

@@ -19,7 +19,15 @@ deploy:
   script: yarn publish:release ${TRAVIS_TAG} --yes
   skip_cleanup: true
   on:
-    tags: true
+    all_branches: true
+    condition: $TRAVIS_TAG != "" && $TRAVIS_TAG != *"-"*
+    repo: kirill-konshin/next-redux-wrapper
+- provider: script
+  script: yarn publish:release ${TRAVIS_TAG} --yes --dist-tag next
+  skip_cleanup: true
+  on:
+    all_branches: true
+    condition: $TRAVIS_TAG == *"-"*
     repo: kirill-konshin/next-redux-wrapper
 
 after_success: yarn test:coverage

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.0.0",
+  "version": "6.0.0",
   "useWorkspaces": true,
   "npmClient": "yarn"
 }

package.json

@@ -1,33 +1,34 @@
 {
   "name": "next-redux-wrapper-mono",
   "private": true,
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "Redux wrapper for Next.js",
   "scripts": {
     "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
-    "start": "yarn build:quick && lerna run start --parallel",
+    "start": "yarn build:quick && yarn start:quick",
+    "start:quick": "lerna run start --parallel",
     "build": "lerna run build --stream",
     "build:quick": "yarn build --scope=next-redux-wrapper",
-    "test": "lerna run test --stream",
-    "test:quick": "lerna run test:quick --stream",
+    "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 'packages/*/**/*.{ts,tsx}' 'packages/*/*.js'",
     "lint:staged": "lint-staged --debug"
   },
   "devDependencies": {
-    "coveralls": "3.0.9",
-    "eslint": "6.8.0",
+    "coveralls": "3.1.0",
+    "eslint": "7.0.0",
     "eslint-config-ringcentral-typescript": "3.0.0",
-    "husky": "4.2.3",
+    "husky": "4.2.5",
     "lerna": "3.20.2",
-    "lint-staged": "10.0.7",
+    "lint-staged": "10.2.2",
     "rimraf": "3.0.2",
-    "typescript": "3.7.5"
+    "typescript": "3.8.3"
   },
   "resolutions": {
-    "@types/react": "16.9.21"
+    "@types/react": "16.9.31"
   },
   "workspaces": [
     "packages/*"

packages/configs/jest-puppeteer.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    server: {
+        command: 'yarn serve',
+        debug: true,
+        launchTimeout: 30000,
+    },
+};

packages/configs/jest.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-    collectCoverage: true,
     coveragePathIgnorePatterns: ['./node_modules', './.next'],
     testPathIgnorePatterns: ['./node_modules'],
     transform: {

packages/configs/jest.config.puppeteer.js

@@ -0,0 +1,6 @@
+const config = require('./jest.config');
+module.exports = {
+    ...config,
+    preset: 'jest-puppeteer',
+    coveragePathIgnorePatterns: config.coveragePathIgnorePatterns.concat('./jest-puppeteer.config.js'),
+};

packages/configs/package.json

@@ -1,5 +1,5 @@
 {
   "name": "next-redux-wrapper-configs",
   "private": true,
-  "version": "5.0.0"
+  "version": "6.0.0"
 }

packages/demo-page/jest-puppeteer.config.js

@@ -0,0 +1,2 @@
+module.exports = require('next-redux-wrapper-configs/jest-puppeteer.config');
+module.exports.server.port = 4000;

packages/demo-page/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('next-redux-wrapper-configs/jest.config.puppeteer');

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

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

packages/demo-page/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "next-redux-wrapper-demo-page",
+  "private": true,
+  "version": "6.0.0",
+  "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"
+  },
+  "dependencies": {
+    "jsondiffpatch": "0.4.1",
+    "next-redux-wrapper": "^6.0.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-redux": "7.2.0",
+    "redux": "4.0.5",
+    "redux-logger": "3.0.6"
+  },
+  "devDependencies": {
+    "@types/expect-puppeteer": "4.4.1",
+    "@types/jest": "25.2.1",
+    "@types/jest-environment-puppeteer": "4.3.1",
+    "@types/puppeteer": "2.0.1",
+    "@types/react": "16.9.35",
+    "@types/react-dom": "16.9.8",
+    "@types/react-redux": "7.1.8",
+    "@types/redux-logger": "3.0.7",
+    "@types/webpack-env": "1.15.2",
+    "jest": "26.0.1",
+    "jest-puppeteer": "4.4.0",
+    "next": "9.4.0",
+    "next-redux-wrapper-configs": "^6.0.0",
+    "puppeteer": "3.0.4",
+    "rimraf": "3.0.2",
+    "ts-jest": "25.5.1",
+    "typescript": "3.8.3"
+  },
+  "author": "Kirill Konshin",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/kirill-konshin/next-redux-wrapper.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kirill-konshin/next-redux-wrapper/issues"
+  },
+  "homepage": "https://github.com/kirill-konshin/next-redux-wrapper",
+  "license": "MIT"
+}

packages/demo-page/src/components/reducer.tsx

@@ -0,0 +1,29 @@
+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':
+            return {...state, page: state.page + 'X'};
+        default:
+            return state;
+    }
+};
+
+export default reducer;

packages/demo-page/src/components/store.tsx

@@ -0,0 +1,19 @@
+import {createStore, applyMiddleware} from 'redux';
+import logger from 'redux-logger';
+import {MakeStore, createWrapper, Context} from 'next-redux-wrapper';
+import reducer, {State} from './reducer';
+
+export const makeStore: MakeStore<State> = (context: Context) => {
+    const store = createStore(reducer, applyMiddleware(logger));
+
+    if (module.hot) {
+        module.hot.accept('./reducer', () => {
+            console.log('Replacing reducer');
+            store.replaceReducer(require('./reducer').default);
+        });
+    }
+
+    return store;
+};
+
+export const wrapper = createWrapper<State>(makeStore, {debug: true});

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

@@ -0,0 +1,31 @@
+import React, {Component} from 'react';
+import Link from 'next/link';
+import {NextPageContext} from 'next';
+import {connect} from 'react-redux';
+import {wrapper} from '../components/store';
+import {State} from '../components/reducer';
+
+class ErrorPage extends Component<State> {
+    public static getInitialProps = ({store, pathname}: NextPageContext) => {
+        console.log('2. Page.getInitialProps uses the store to dispatch things');
+        store.dispatch({type: 'PAGE', payload: 'was set in error page ' + pathname});
+    };
+
+    render() {
+        const {page} = this.props;
+        return (
+            <>
+                <p>
+                    This is an error page, it also has access to store: <code>{page}</code>
+                </p>
+                <nav>
+                    <Link href="/">
+                        <a>Navigate to index</a>
+                    </Link>
+                </nav>
+            </>
+        );
+    }
+}
+
+export default wrapper.withRedux(connect((state: State) => state)(ErrorPage));

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import {NextPage} from 'next';
+import Link from 'next/link';
+import {useSelector} from 'react-redux';
+import {wrapper} from '../components/store';
+import {State} from '../components/reducer';
+
+export interface ConnectedPageProps {
+    custom: string;
+}
+
+// Page itself is not connected to Redux Store, it has to render Provider to allow child components to connect to Redux Store
+const Page: NextPage<ConnectedPageProps> = ({custom}) => {
+    const {page} = useSelector<State, State>(state => state);
+    return (
+        <div className="index">
+            <pre>{JSON.stringify({page, custom}, null, 2)}</pre>
+            <Link href="/other">
+                <a>Navigate</a>
+            </Link>
+            {' | '}
+            <Link href="/error">
+                <a>Navigate to error</a>
+            </Link>
+        </div>
+    );
+};
+
+export const getServerSideProps = wrapper.getServerSideProps(({store, req}) => {
+    console.log('2. Page.getServerSideProps uses the store to dispatch things');
+    store.dispatch({type: 'PAGE', payload: 'was set in index page ' + req.url});
+    return {props: {custom: 'custom'}};
+});
+
+export default wrapper.withRedux(Page);

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import {NextPage} from 'next';
+import Link from 'next/link';
+import {useSelector, useDispatch} from 'react-redux';
+import {State} from '../components/reducer';
+import {wrapper} from '../components/store';
+
+export const getStaticProps = wrapper.getStaticProps(({store, previewData}) => {
+    console.log('2. Page.getStaticProps uses the store to dispatch things');
+    store.dispatch({type: 'PAGE', payload: 'was set in other page ' + JSON.stringify({previewData})});
+});
+
+const OtherPage: NextPage<State> = () => {
+    const {page} = useSelector<State, State>(state => state);
+    const dispatch = useDispatch();
+    const bump = () => dispatch({type: 'BUMP'});
+    return (
+        <div className="other">
+            <p>Using Next.js default prop in a wrapped component.</p>
+            <pre>{JSON.stringify({page}, null, 2)}</pre>
+            <nav>
+                <button onClick={bump}>bump</button>
+                <Link href="/">
+                    <a>Navigate to index</a>
+                </Link>
+                <Link href="/other2">
+                    <a>Navigate to other 2</a>
+                </Link>
+            </nav>
+        </div>
+    );
+};
+
+export default wrapper.withRedux(OtherPage);

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import {NextPage} from 'next';
+import Link from 'next/link';
+import {useSelector, useDispatch} from 'react-redux';
+import {State} from '../components/reducer';
+import {wrapper} from '../components/store';
+
+export const getStaticProps = wrapper.getStaticProps(({store, previewData}) => {
+    console.log('2. Page.getStaticProps uses the store to dispatch things');
+    store.dispatch({type: 'PAGE', payload: 'was set in other (SECOND) page ' + JSON.stringify({previewData})});
+});
+
+const OtherPage: NextPage<State> = () => {
+    const {page} = useSelector<State, State>(state => state);
+    const dispatch = useDispatch();
+    const bump = () => dispatch({type: 'BUMP'});
+    return (
+        <div className="other">
+            <p>Using Next.js default prop in a wrapped component.</p>
+            <pre>{JSON.stringify({page}, null, 2)}</pre>
+            <nav>
+                <button onClick={bump}>bump</button>
+                <Link href="/">
+                    <a>Navigate to index</a>
+                </Link>
+                <Link href="/other">
+                    <a>Navigate to other</a>
+                </Link>
+            </nav>
+        </div>
+    );
+};
+
+export default wrapper.withRedux(OtherPage);

packages/demo-page/tests/index.spec.ts

@@ -0,0 +1,29 @@
+import config from '../jest-puppeteer.config';
+
+const openPage = (url = '/') => page.goto(`http://localhost:${config.server.port}${url}`);
+
+describe('Basic integration', () => {
+    it('shows the page', async () => {
+        await openPage();
+
+        await page.waitForSelector('div.index');
+
+        await expect(page).toMatch('"page": "was set in index page /"');
+        await expect(page).toMatch('"custom": "custom"');
+    });
+
+    it('clicks the button', async () => {
+        await openPage('/other');
+
+        await page.waitForSelector('div.other');
+
+        await expect(page).toMatch('"page": "was set in other page {}"');
+
+        await expect(page).toClick('a', {text: 'Navigate to index'});
+
+        await page.waitForSelector('div.index');
+
+        await expect(page).toMatch('"page": "was set in index page');
+        await expect(page).toMatch('"custom": "custom"');
+    });
+});

packages/demo-page/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../configs/tsconfig.json",
+  "include": [
+    "tests",
+    "src/pages"
+  ],
+  "compilerOptions": {
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "module": "esnext",
+    "outDir": "lib",
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}

packages/demo-saga/jest-puppeteer.config.js

@@ -0,0 +1,2 @@
+module.exports = require('next-redux-wrapper-configs/jest-puppeteer.config');
+module.exports.server.port = 5000;