Merge pull request #26 from XbyOrange/v1.2.0

V1.2.0

Author: javierbrea

.eslintrc.json

@@ -1,4 +1,8 @@
 {
+  "env": {
+    "node": true,
+    "es6": true
+  },
   "parser": "babel-eslint",
   "plugins": ["prettier"],
   "rules": {
@@ -9,6 +13,7 @@
         "parser": "flow"
       }
     ],
+    "no-undef": "error",
     "no-unused-vars": ["error", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }]
   },
   "extends": ["plugin:react/recommended", "prettier"],

CHANGELOG.md

@@ -11,6 +11,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Removed
 ### BREAKING CHANGES
 
+## [1.2.0] - 2019-10-19
+### Changed
+- Upgrade dependencies
+- Rename server side data methods. Maintain old ones due to retrocompatibility.
+- Use mercury ids for identification during server-side-data.
+
+### Fixed
+- Fix demo installation
+
 ## [1.1.0] - 2019-08-21
 ### Added
 - Add server side data behavior tests and documentation.

README.md

@@ -181,19 +181,23 @@ export const ConnectedModule = connect(
 
 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).
 
+> __It is important to define custom an unique "uuids" for your mercury sources when are going to be read on server side. Otherwise, the `readServerSide` method will throw an error if detects duplicated "ids".__
+
 ### Server side data methods and components
 
-* `addServerSideData(source)`
+* `readOnServerSide(source)`
+	* Alias - `addServerSideData`
 	* 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])`
+		* source - `<Object> or <Array> of <Objects>` Mercury source or sources that should be read when `readServerSide` method is executed. Can be Mercury origins or selectors of any type, queried or not.
+* `readServerSide([source])`
+	* Alias - `readServerSideData`
 	* 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.
+		* source - `<Object> or <Array> of <Objects>` Mercury source or sources. Will be added to be read with the `readOnServerSide` method.
 	* 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.
+		* `<Object>` This method is asynchronous, and, when resolved, it 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 `readServerSide` 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.
+		* data - `<Object>` Object containing the result of the `readServerSide` 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:
@@ -202,10 +206,10 @@ In the next example, the data of the "myDataSource" mercury source will be fetch
 
 ```jsx
 // src/home.js
-import { addServerSideData, connect } from "@xbyorange/react-mercury";
+import { readOnServerSide, connect } from "@xbyorange/react-mercury";
 import { myDataSource } from "src/data";
 
-addServerSideData(myDataSource); // source is marked to be read when readServerSideData method is executed.
+readOnServerSide(myDataSource); // source is marked to be read when readServerSide method is executed.
 
 export const HomeComponent = ({data}) => {
   if(data.loading) {
@@ -224,7 +228,7 @@ export const Home = connect(mapDataSourceToProps)(HomeComponent)
 
 ```jsx
 // pages/index.js
-import { readServerSideData, ServerSideData } from "@xbyorange/react-mercury";
+import { readServerSide, ServerSideData } from "@xbyorange/react-mercury";
 import { Home } from "src/home";
 
 const Page = ({ serverSideData }) => (
@@ -235,7 +239,7 @@ const Page = ({ serverSideData }) => (
 
 Page.getInitialProps = async () => {
   return {
-    serverSideData: await readServerSideData()
+    serverSideData: await readServerSide()
   }
 }
 

demo/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "globals": {
+    "document": true,
+    "window": true
+  }
+}

demo/.gitignore

@@ -5,6 +5,7 @@
 /node_modules
 /.pnp
 .pnp.js
+/src/react-mercury
 
 # testing
 /coverage

demo/config-overrides.js

@@ -0,0 +1,39 @@
+module.exports = function override(config) {
+  // Remove eslint execution for running app
+  let eslintRuleIndex;
+  config.module.rules.forEach((rule, ruleIndex) => {
+    if (rule.use && Array.isArray(rule.use)) {
+      rule.use.forEach(loaderDetails => {
+        if (loaderDetails.loader.indexOf("eslint-loader") > -1) {
+          eslintRuleIndex = ruleIndex;
+        }
+      });
+    }
+  });
+  if (eslintRuleIndex) {
+    config.module.rules.splice(eslintRuleIndex, 1);
+  }
+
+  // Add babel alias for react-mercury
+  config.module.rules.unshift({
+    test: /\.(js|jsx|mjs)$/,
+    include: /src/,
+    loader: require.resolve("babel-loader"),
+    options: {
+      plugins: [
+        [
+          "module-resolver",
+          {
+            root: ["."],
+            alias: {
+              "@xbyorange/react-mercury": "./src/react-mercury/react-mercury.esm.js"
+            }
+          }
+        ]
+      ],
+      cacheDirectory: true
+    }
+  });
+
+  return config;
+};