Merge pull request #20 from XbyOrange/v1.1.0

V1.1.0

Author: javierbrea

.travis.yml

@@ -20,7 +20,7 @@ script:
   - npm run lint
   - npm run test-ci
   - npm run build
-#  - npm run coveralls
+  - npm run coveralls
   - 'if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then sonar-scanner; fi'
 
 deploy:

CHANGELOG.md

@@ -11,9 +11,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Removed
 ### BREAKING CHANGES
 
+## [1.1.0] - 2019-08-21
+### Added
+- Add server side data behavior tests and documentation.
+
 ## [1.1.0-beta.2] - 2019-08-19
 ### Added
-- Add helper for registering sources that should be loaded during server side data rendering.
+- Add method for registering sources that should be loaded during server side data rendering.
 
 ### Fixed
 - Fix server side data connect. Load data in client when no server data is available

README.md

@@ -177,6 +177,71 @@ export const ConnectedModule = connect(
 
 > This parser function should not be used as a replacement to Mercury Selectors. As a good practice, the preference is to use Selectors if possible instead of this function.
 
+## Prefetching data on server side rendering
+
+Methods for prefetching data on server side rendering are available too. When data is prefetched in server side, the connect function will pass the `value` property calculated on server side to the components directly. It will not modify the `loading` property until the first load on client side is finished (At first client-side load, the resource will not be considered as `loading` to maintain the server-side value in the component until it finish loading).
+
+### Server side data methods and components
+
+* `addServerSideData(source)`
+	* Arguments
+		* source - `<Object> or <Array> of <Objects>` Mercury source or sources that should be read when `readServerSideData` method is executed. Can be Mercury origins or selectors of any type, queried or not.
+* `readServerSideData([source])`
+	* Arguments
+		* source - `<Object> or <Array> of <Objects>` Mercury source or sources that should be read when `readServerSideData` method is executed. Can be Mercury origins or selectors of any type, queried or not.
+	* Returns
+		* `<Object>` This method is asynchronous, and returns an object containing all server side data ready to be set on the `<ServerSideData>` context component.
+* `<ServerSideData data={data} clientSide={true}><App/></ServerSideData>` Component that sets the result of the `readServerSideData` method in a context to make it available from all mercury connected children components.
+	* Props
+		* data - `<Object>` Object containing the result of the `readServerSideData` method.
+		* clientSide - `<Boolean>` If false, the connect method will not dispatch automatically the read method of the sources marked as "server-side", so, for example, api requests will not be repeated on client side, and data retrieved in server side will be always passed to connected components.
+
+### Example of server side prefecth implementation in a Next project:
+
+In the next example, the data of the "myDataSource" mercury source will be fetched on server side and request will not be repeated on client side. The component will be rendered directly with server side data, and no loading state will be set:
+
+```jsx
+// src/home.js
+import { addServerSideData, connect } from "@xbyorange/react-mercury";
+import { myDataSource } from "src/data";
+
+addServerSideData(myDataSource); // source is marked to be read when readServerSideData method is executed.
+
+export const HomeComponent = ({data}) => {
+  if(data.loading) {
+    return <div>Loading...</div>
+  }
+  return <div>{data.value}</div>
+};
+
+export const mapDataSourceToProps = () => ({
+  data: myDataSource.read
+});
+
+export const Home = connect(mapDataSourceToProps)(HomeComponent)
+
+```
+
+```jsx
+// pages/index.js
+import { readServerSideData, ServerSideData } from "@xbyorange/react-mercury";
+import { Home } from "src/home";
+
+const Page = ({ serverSideData }) => (
+  <ServerSideData data={serverSideData} clientSide={false} >
+    <Home/>
+  </ServerSideData>
+);
+
+Page.getInitialProps = async () => {
+  return {
+    serverSideData: await readServerSideData()
+  }
+}
+
+export default Page;
+```
+
 ## Demo
 
 To run a real implementation example in a React app, you can clone the project and execute the provided demo:

jest.config.js

@@ -17,10 +17,10 @@ module.exports = {
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
     global: {
-      branches: 75,
-      functions: 75,
-      lines: 80,
-      statements: 80
+      branches: 100,
+      functions: 100,
+      lines: 100,
+      statements: 100
     }
   },
 

package-lock.json

@@ -32,7 +32,8 @@
     "coveralls": "cat ./coverage/lcov.info | coveralls"
   },
   "peerDependencies": {
-    "react": "^16.7.0"
+    "react": "^16.7.0",
+    "@xbyorange/mercury": "^1.1.0"
   },
   "dependencies": {
     "hoist-non-react-statics": "^3.2.1",
@@ -42,7 +43,8 @@
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
-    "@xbyorange/mercury-api": "1.0.1",
+    "@xbyorange/mercury-api": "1.2.0",
+    "@xbyorange/mercury": "^1.1.0",
     "axios": "^0.19.0",
     "axios-retry": "^3.1.2",
     "babel-core": "^7.0.0-bridge.0",

package.json

@@ -22,15 +22,15 @@ const resultsToObject = results => {
 };
 
 export const addServerSideData = sources => {
-  const sourcesToAdd = isArray(sources) ? sources : [sources];
-  sourcesToAdd.forEach(source => {
-    serverSideData.add(source);
-  });
+  if (sources) {
+    const sourcesToAdd = isArray(sources) ? sources : [sources];
+    sourcesToAdd.forEach(source => {
+      serverSideData.add(source);
+    });
+  }
 };
 
-export const readServerSideData = (...args) => {
-  args.forEach(source => {
-    addServerSideData(source);
-  });
+export const readServerSideData = sources => {
+  addServerSideData(sources);
   return Promise.all(Array.from(serverSideData).map(getSourceData)).then(resultsToObject);
 };