create-rca-client - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

es/clientWrapper/clientWrapper.js

@@ -15,11 +15,13 @@ 'use strict';
 
-var props = document.getElementById('app-props').textContent;
-props = props.replace("<![CDATA[", "").replace("]]>", "");
-var serverProps = JSON.parse(props);
+var createRcaClient = function createRcaClient(document, config) {
+  var props = document.getElementById('app-props').textContent;
+  props = props.replace("<![CDATA[", "").replace("]]>", "");
+  var serverProps = JSON.parse(props);
 
-var createRcaClient = function createRcaClient(AppContainer) {
+  var Root = config.root;
+
   return _react2.default.createElement(
     _reactRouterDom.BrowserRouter,
     null,
-    _react2.default.createElement(AppContainer, serverProps)
+    _react2.default.createElement(Root, serverProps)
   );
@@ -26,0 +28,0 @@ };

es/RouteHandler/RouteHandler.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -14,7 +16,23 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactRouterDom = require('react-router-dom');
 
+var _requiresPrefetch = require('./../utils/requiresPrefetch');
+
+var _requiresPrefetch2 = _interopRequireDefault(_requiresPrefetch);
+
+var _fetchInitialProps = require('./../utils/fetchInitialProps');
+
+var _fetchInitialProps2 = _interopRequireDefault(_fetchInitialProps);
+
+var _getParamsFromUrl = require('./../utils/getParamsFromUrl');
+
+var _getParamsFromUrl2 = _interopRequireDefault(_getParamsFromUrl);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
 
@@ -27,43 +45,93 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var RouteWithHandler = function (_Component) {
-  _inherits(RouteWithHandler, _Component);
+var renderRoute = function renderRoute(_ref) {
+  var _class, _temp, _initialiseProps;
 
-  function RouteWithHandler() {
-    _classCallCheck(this, RouteWithHandler);
+  var component = _ref.component,
+      path = _ref.path,
+      serverProps = _ref.serverProps;
+  return _temp = _class = function (_Component) {
+    _inherits(Wrapper, _Component);
 
-    return _possibleConstructorReturn(this, (RouteWithHandler.__proto__ || Object.getPrototypeOf(RouteWithHandler)).apply(this, arguments));
-  }
+    function Wrapper(props, context) {
+      _classCallCheck(this, Wrapper);
 
-  _createClass(RouteWithHandler, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var serverProps = this.props.serverProps;
+      var _this = _possibleConstructorReturn(this, (Wrapper.__proto__ || Object.getPrototypeOf(Wrapper)).call(this, props));
 
+      _initialiseProps.call(_this);
 
-      console.log(serverProps);
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      console.log('updateing');
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          Component = _props.component,
-          serverProps = _props.serverProps,
-          rest = _objectWithoutProperties(_props, ['component', 'serverProps']);
+      var pathname = context.router.route.location.pathname;
 
-      return _react2.default.createElement(
-        _reactRouterDom.Route,
-        rest,
-        _react2.default.createElement(Component, serverProps)
-      );
+
+      _this.state = {
+        pathname: pathname,
+        data: serverProps[pathname],
+        getInitialProps: (0, _requiresPrefetch2.default)(component)
+      };
+      return _this;
     }
-  }]);
 
-  return RouteWithHandler;
-}(_react.Component);
+    _createClass(Wrapper, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        this.fetchClientData();
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _state = this.state,
+            data = _state.data,
+            getInitialProps = _state.getInitialProps;
 
-exports.default = RouteWithHandler;
+        var WrappedRoute = component;
+
+        if (!data && getInitialProps) {
+          return null;
+        }
+
+        return _react2.default.createElement(WrappedRoute, { data: data });
+      }
+    }]);
+
+    return Wrapper;
+  }(_react.Component), _class.contextTypes = { router: _propTypes2.default.any }, _initialiseProps = function _initialiseProps() {
+    var _this2 = this;
+
+    this.fetchClientData = _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
+      var _state2, getInitialProps, pathname, data, urlParams, clientData;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _state2 = _this2.state, getInitialProps = _state2.getInitialProps, pathname = _state2.pathname;
+              data = serverProps[pathname];
+              urlParams = (0, _getParamsFromUrl2.default)(path, pathname);
+
+              if (!(!data && getInitialProps)) {
+                _context.next = 8;
+                break;
+              }
+
+              _context.next = 6;
+              return (0, _fetchInitialProps2.default)(component, urlParams);
+
+            case 6:
+              clientData = _context.sent;
+
+              _this2.setState({ data: clientData });
+
+            case 8:
+            case 'end':
+              return _context.stop();
+          }
+        }
+      }, _callee, _this2);
+    }));
+  }, _temp;
+};
+
+var RouteHandler = function RouteHandler(props) {
+  return _react2.default.createElement(_reactRouterDom.Route, _extends({}, props, { component: renderRoute(props) }));
+};
+
+exports.default = RouteHandler;

package.json

 {
   "name": "create-rca-client",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "main": "es/index.js",
@@ -5,0 +5,0 @@ "repository": "[e-mail]:craig-collie/create-rca-app.git",

src/clientWrapper/clientWrapper.js

 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
-let props = document.getElementById('app-props').textContent;
-props = props.replace("<![CDATA[", "").replace("]]>", "");
-const serverProps = JSON.parse(props);
+const createRcaClient = (document, config) => {
+  let props = document.getElementById('app-props').textContent;
+  props = props.replace("<![CDATA[", "").replace("]]>", "");
+  const serverProps = JSON.parse(props);
 
-const createRcaClient = (AppContainer) => (
-  <BrowserRouter>
-    <AppContainer {...serverProps} />
-  </BrowserRouter>
-);
+  const { root: Root } = config;
+  return (
+    <BrowserRouter>
+      <Root {...serverProps} />
+    </BrowserRouter>
+  );
+};
 
 export default createRcaClient;

src/RouteHandler/RouteHandler.js

 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Route } from 'react-router-dom';
 
-class RouteWithHandler extends Component {
-  componentDidMount() {
-    const { serverProps } = this.props;
+import requiresPrefetch from './../utils/requiresPrefetch';
+import fetchInitialProps from './../utils/fetchInitialProps';
+import getParamsFromUrl from './../utils/getParamsFromUrl';
 
-    console.log(serverProps);
-  }
+const renderRoute = ({ component, path, serverProps }) => (
+  class Wrapper extends Component {
+    static contextTypes = { router: PropTypes.any }
 
-  componentDidUpdate() {
-    console.log('updateing')
-  }
+    constructor(props, context) {
+      super(props);
+      const { pathname } = context.router.route.location;
 
-  render() {
-    const {
-      component: Component,
-      serverProps,
-      ...rest,
-    } = this.props;
+      this.state = {
+        pathname,
+        data: serverProps[pathname],
+        getInitialProps: requiresPrefetch(component),
+      };
+    }
 
-    return (
-      <Route {...rest}>
-        <Component {...serverProps} />
-      </Route>
-    );
+    componentDidMount() {
+      this.fetchClientData();
+    }
+
+    fetchClientData = async () => {
+      const { getInitialProps, pathname } = this.state;
+      const data = serverProps[pathname];
+      const urlParams = getParamsFromUrl(path, pathname);
+
+      if (!data && getInitialProps) {
+        const clientData = await fetchInitialProps(component, urlParams);
+        this.setState({ data: clientData });
+      }
+    }
+
+    render() {
+      const { data, getInitialProps } = this.state;
+      const WrappedRoute = component;
+
+      if (!data && getInitialProps) {
+        return null
+      }
+
+      return (<WrappedRoute data={data}/>);
+    }
   }
-}
+);
 
-export default RouteWithHandler;
+const RouteHandler = (props) => (
+  <Route {...props} component={renderRoute(props)} />
+);
+
+export default RouteHandler;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

92106

increased by7.33%

Number of package files

16

increased by60%

Lines of code

255

increased by123.68%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes