gatsby-plugin-react-redux - npm Package Compare versions

Comparing version 1.0.10 to 1.1.0-0

constants.js

 "use strict";
 
 exports.__esModule = true;
-exports.GLOBAL_KEY = exports.ELEMENT_ID = void 0;
-var ELEMENT_ID = 'redux-ssr';
-exports.ELEMENT_ID = ELEMENT_ID;
-var GLOBAL_KEY = '__PRELOADED_STATE__';
-exports.GLOBAL_KEY = GLOBAL_KEY;
+exports.DEFAULT_OPTIONS = exports.SCRIPT_ELEMENT_ID = void 0;
+var SCRIPT_ELEMENT_ID = 'redux-ssr';
+exports.SCRIPT_ELEMENT_ID = SCRIPT_ELEMENT_ID;
+var DEFAULT_OPTIONS = {
+  serialize: {
+    space: 0,
+    isJSON: true,
+    unsafe: false
+  },
+  cleanupOnClient: true,
+  windowKey: '__PRELOADED_STATE__'
+};
+exports.DEFAULT_OPTIONS = DEFAULT_OPTIONS;

gatsby-browser.js

@@ -8,2 +8,4 @@ "use strict";
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
@@ -17,5 +19,12 @@
 
-var wrapRootElement = function wrapRootElement(_ref) {
+var wrapRootElement = function wrapRootElement(_ref, pluginOptions) {
   var element = _ref.element;
-  var store = (0, _createStore["default"])(window[_constants.GLOBAL_KEY]);
+
+  if (pluginOptions === void 0) {
+    pluginOptions = {};
+  }
+
+  var options = (0, _extends2["default"])({}, _constants.DEFAULT_OPTIONS, {}, pluginOptions);
+  var preloadedState = window[options.windowKey];
+  var store = (0, _createStore["default"])(preloadedState);
   return _react["default"].createElement(_reactRedux.Provider, {
@@ -28,10 +37,13 @@ store: store
 
-var onInitialClientRender = function onInitialClientRender() {
-  if (process.env.BUILD_STAGE !== 'build-javascript') {
-    return;
-  } // Remove the server-side injected state.
+var onInitialClientRender = function onInitialClientRender(_, pluginOptions) {
+  if (pluginOptions === void 0) {
+    pluginOptions = {};
+  }
 
+  var options = (0, _extends2["default"])({}, _constants.DEFAULT_OPTIONS, {}, pluginOptions);
+  if (process.env.BUILD_STAGE !== 'build-javascript') return;
+  if (!options.cleanupOnClient) return;
+  delete window[options.windowKey];
+  var preloadedStateEl = document.getElementById(_constants.SCRIPT_ELEMENT_ID);
 
-  var preloadedStateEl = document.getElementById(_constants.ELEMENT_ID);
-
   if (preloadedStateEl) {
@@ -38,0 +50,0 @@ preloadedStateEl.parentNode.removeChild(preloadedStateEl);

gatsby-node.js

@@ -20,6 +20,8 @@ "use strict";
 
-var onPreBootstrap = function onPreBootstrap(_ref, _ref2) {
+var onPreBootstrap = function onPreBootstrap(_ref, _temp) {
   var store = _ref.store;
-  var pathToCreateStoreModule = _ref2.pathToCreateStoreModule;
 
+  var _ref2 = _temp === void 0 ? {} : _temp,
+      pathToCreateStoreModule = _ref2.pathToCreateStoreModule;
+
   if (!pathToCreateStoreModule) {
@@ -26,0 +28,0 @@ throw new Error('[gatsby-plugin-react-redux]: missing required option "pathToCreateStoreModule"');

gatsby-ssr.js

@@ -38,2 +38,6 @@ "use strict";
 
+  if (pluginOptions === void 0) {
+    pluginOptions = {};
+  }
+
   if (process.env.BUILD_STAGE !== 'build-html') {
@@ -44,39 +48,17 @@ return;
   var store = storesByPaths.get(pathname);
+  if (!store) return;
+  var options = (0, _extends2["default"])({}, _constants.DEFAULT_OPTIONS, {}, pluginOptions);
+  var serializedState = (0, _serializeJavascript["default"])(store.getState(), options.serialize).replace(/'/g, "\\'"); // escape single quotes inside because we wrap it in them
 
-  if (store) {
-    var serializedState = serializeStore(store, pluginOptions.serialize);
-    setHeadComponents([renderScriptElement(serializedState)]);
-    storesByPaths["delete"](pathname);
-  }
-};
-
-exports.onRenderBody = onRenderBody;
-var DEFAULT_SERIALIZE_OPTIONS = {
-  space: 0,
-  isJSON: true,
-  unsafe: false
-};
-/**
- * @param {Object} store - redux store
- * @param {Object} [options]
- * @returns {string}
- */
-
-function serializeStore(store, options) {
-  return (0, _serializeJavascript["default"])(store.getState(), (0, _extends2["default"])({}, DEFAULT_SERIALIZE_OPTIONS, options));
-}
-/**
- * @param {string} serializedState
- * @returns {ReactElement}
- */
-
-
-function renderScriptElement(serializedState) {
-  return _react["default"].createElement("script", {
+  var parseFn = options.serialize.isJSON ? 'JSON.parse' : 'eval';
+  setHeadComponents([_react["default"].createElement("script", {
     key: "redux-state",
-    id: _constants.ELEMENT_ID,
+    id: _constants.SCRIPT_ELEMENT_ID,
     dangerouslySetInnerHTML: {
-      __html: "window['" + _constants.GLOBAL_KEY + "'] = " + serializedState
+      __html: "window['" + options.windowKey + "'] = " + parseFn + "('" + serializedState + "')"
     }
-  });
-}
+  })]);
+  storesByPaths["delete"](pathname);
+};
+
+exports.onRenderBody = onRenderBody;

package.json

 {
   "name": "gatsby-plugin-react-redux",
-  "version": "1.0.10",
+  "version": "1.1.0-0",
   "description": "Gatsby plugin for React-Redux with built-in server-side rendering support",
@@ -26,3 +26,3 @@ "keywords": [
   "dependencies": {
-    "serialize-javascript": "^1.7.0"
+    "serialize-javascript": "^2.1.0"
   },
@@ -34,18 +34,19 @@ "peerDependencies": {
   "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.5",
-    "babel-eslint": "^10.0.2",
-    "babel-preset-gatsby-package": "^0.2.0",
-    "cross-env": "^5.2.0",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^6.0.0",
-    "eslint-config-react-app": "^4.0.1",
-    "eslint-plugin-flowtype": "^3.11.1",
-    "eslint-plugin-import": "^2.18.0",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.14.2",
-    "eslint-plugin-react-hooks": "^1.6.1",
-    "jest": "^24.8.0",
-    "prettier": "^1.18.2",
+    "@babel/cli": "^7.7.4",
+    "@babel/core": "^7.7.4",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
+    "babel-eslint": "^10.0.3",
+    "babel-preset-gatsby-package": "^0.2.12",
+    "cross-env": "^6.0.3",
+    "eslint": "^6.7.1",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-config-react-app": "^5.0.2",
+    "eslint-plugin-flowtype": "^4.5.2",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react-hooks": "^2.3.0",
+    "jest": "^24.9.0",
+    "prettier": "^1.19.1",
     "react": "^16.8.6",
@@ -52,0 +53,0 @@ "react-redux": "^7.0.3"

README.md

@@ -13,3 +13,2 @@ # gatsby-plugin-react-redux
 
-
 `./src/state/createStore.js` // same path you provided in gatsby-config
@@ -46,2 +45,6 @@ ```javascript
         },
+        // [optional] - if true will clean up after itself on the client, default:
+        cleanupOnClient: true,
+        // [optional] - name of key on `window` where serialized state will be stored, default:
+        windowKey: '__PRELOADED_STATE__',
       },
@@ -48,0 +51,0 @@ },

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11722

7.8%

Lines of code

129

2.38%

Number of lines in readme file

57

5.56%

Worsened metrics

Dev dependency count

19

5.56%

Number of low quality alerts

1

Infinity%

Dependency changes

• + Added

  serialize-javascript@2.1.2
  (transitive)

• - Removed

  serialize-javascript@1.9.1
  (transitive)

• Updated

  serialize-javascript@^2.1.0