anew
Version:
React and Redux Framework with additional power.
459 lines (368 loc) • 18.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AppCore = undefined;
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
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; }; }();
var _lodash = require('lodash');
var _reactRedux = require('react-redux');
var _reactRouterConfig = require('react-router-config');
var _reactRouterDom = require('react-router-dom');
var _reactDom = require('react-dom');
var _pathToRegexp = require('path-to-regexp');
var _pathToRegexp2 = _interopRequireDefault(_pathToRegexp);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _invariant = require('invariant');
var _invariant2 = _interopRequireDefault(_invariant);
var _createBrowserHistory = require('history/createBrowserHistory');
var _createBrowserHistory2 = _interopRequireDefault(_createBrowserHistory);
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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var emptyComponent = function emptyComponent() {
return null;
};
var AppCore = function () {
function AppCore() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
entry = _ref.entry,
store = _ref.store,
_ref$routes = _ref.routes,
routes = _ref$routes === undefined ? [] : _ref$routes;
_classCallCheck(this, AppCore);
this.config = {
entry: entry,
store: store,
routes: routes,
routesByName: {}
};
}
/**
| ------------------------
| Config Methods
| ------------------------
*/
/**
* Assign Global Fallback Store
*
* @param {Object} an instance/object store
*/
_createClass(AppCore, [{
key: 'store',
value: function store(_store) {
this.config.store = _store;
}
}, {
key: 'entry',
value: function entry() {
var _entry = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : emptyComponent;
this.config.entry = _entry;
}
/**
| ------------------------
| HOC Methods
| ------------------------
*/
/**
* Connect to anewStore object
*
* @param { Object|Component } Config Connection Configuration
* @return { Component } Connected HOC
*/
}, {
key: 'connect',
value: function connect(Config) {
var _this = this;
var component = Config.component,
mapStateToProps = Config.mapStateToProps,
mapDispatchToProps = Config.mapDispatchToProps,
mergeProps = Config.mergeProps,
options = Config.options;
return (0, _reactRedux.connect)(mapStateToProps ? function (state, props) {
return mapStateToProps(_this.config.store.getState, state, props);
} : null, mapDispatchToProps, mergeProps, options)(component || Config);
}
/**
| ------------------------
| Render Methods
| ------------------------
*/
/**
* Render Application Routes
*
* @param {Object} route route
* @param {Object} extraProps Props passed down to routes
* @return {Function} React Switch/Route
*/
}, {
key: 'render',
value: function render() {
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
routes = _ref3.routes;
var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _ref2$switch = _ref2.switch,
Switch = _ref2$switch === undefined ? _reactRouterDom.Switch : _ref2$switch,
_ref2$route = _ref2.route,
Route = _ref2$route === undefined ? _reactRouterDom.Route : _ref2$route,
extraProps = _objectWithoutProperties(_ref2, ['switch', 'route']);
return routes ? _react2.default.createElement(
Switch,
null,
routes.map(function (route, i) {
return _react2.default.createElement(Route, {
key: route.key || i,
path: route.path,
exact: route.exact,
strict: route.strict,
render: function render(props) {
return route.render ? route.render(_extends({}, props, extraProps, { route: route })) : _react2.default.createElement(route.component, _extends({}, props, extraProps, { route: route }));
}
});
})
) : null;
}
/**
* Mount Application
*
* @param {String|Function} Navigation DOM ID Selector String | Navigation Stack
* @param {Object} props BrowserRouter Props
*/
}, {
key: 'mount',
value: function mount(id) {
var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _ref4$history = _ref4.history,
history = _ref4$history === undefined ? (0, _createBrowserHistory2.default)() : _ref4$history,
_ref4$provider = _ref4.provider,
Provider = _ref4$provider === undefined ? _reactRedux.Provider : _ref4$provider,
_ref4$router = _ref4.router,
Router = _ref4$router === undefined ? _reactRouterDom.Router : _ref4$router,
props = _objectWithoutProperties(_ref4, ['history', 'provider', 'router']);
var _config = this.config,
entry = _config.entry,
store = _config.store,
routes = _config.routes;
(0, _invariant2.default)(typeof entry === 'function', "Anew Error: It looks like you haven't defined a view entry component. " + "Please pass the entry property.");
(0, _reactDom.render)((typeof store === 'undefined' ? 'undefined' : _typeof(store)) === 'object' ? _react2.default.createElement(
Provider,
{ store: store },
_react2.default.createElement(
Router,
_extends({ history: history }, props),
(0, _reactRouterConfig.renderRoutes)([{ component: entry, routes: routes }])
)
) : _react2.default.createElement(
Router,
_extends({ history: history }, props),
(0, _reactRouterConfig.renderRoutes)([{ component: entry, routes: routes }])
), document.getElementById(id));
}
/**
| ------------------------
| Route Methods
| ------------------------
*/
/**
* Define Application Route
*
* @param {String} path Route path
* @param {Function} component React Component
* @param {Object} props Extra Props to pass to React Route
* @param {String} base base path (not public API)
* @param {Object} route Route reference (not public API)
* @return {Object} Route reference
*/
}, {
key: 'route',
value: function route() {
var path = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var component = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var _this2 = this;
var base = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
var _route = arguments[4];
var routes = !_route ? this.config.routes : _route;
var index = routes.length;
var selectedPath = (base + path).replace(/\/{2,}/, "/");
var name = props.name;
if (name) {
this.config.routesByName[name] = {
path: (0, _pathToRegexp.compile)(selectedPath),
data: function data(prop) {
return prop ? routes[index][prop] : routes[index];
},
routes: function routes(pathname) {
var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
strict = _ref5.strict;
return _this2.match(pathname, name, { strict: strict });
},
contains: function contains(pathname) {
var _ref6 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
strict = _ref6.strict;
return _this2.isRoute(pathname, name, { strict: strict });
},
is: function is(pathname) {
return _this2.isMatch(pathname, selectedPath);
}
};
}
routes.push(_extends({
exact: true
}, props, {
component: component,
path: selectedPath,
route: function route() {
var siblings_path = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var siblings_component = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var siblings_props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
return _this2.route(siblings_path, siblings_component, siblings_props, path);
}
}));
return routes[index];
}
/**
* Define Application Route Container
*
* @param {String} path base path
* @param {Function} callBack A callback with the group container passed as a parameter
* @param {Function} component React Component (optional)
* @param {Object} route Route reference (not public API)
*/
}, {
key: 'group',
value: function group(path, callBack) {
var Props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var _this3 = this;
var component = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
var /*not public API*/route = arguments[4];
var routes = !route ? this.config.routes : route;
var index = routes.length;
var isPropsComponent = (typeof Props === 'undefined' ? 'undefined' : _typeof(Props)) !== 'object' && _react2.default.isValidElement(_react2.default.createElement(Props, null));
var selectedComponent = isPropsComponent ? Props : component;
var selectedProps = isPropsComponent ? {} : Props;
var name = selectedProps.name;
if (name) {
this.config.routesByName[name] = {
path: (0, _pathToRegexp.compile)(path),
data: function data(prop) {
return prop ? routes[index][prop] : routes[index];
},
routes: function routes(pathname) {
var _ref7 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
strict = _ref7.strict;
return _this3.match(pathname, name, { strict: strict });
},
contains: function contains(pathname) {
var _ref8 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
strict = _ref8.strict;
return _this3.isRoute(pathname, name, { strict: strict });
},
is: function is(pathname) {
return _this3.isMatch(pathname, path);
}
};
}
routes.push(_extends({}, selectedProps, {
path: path,
routes: [],
component: !selectedComponent ? function () {
return _this3.render(routes[index]);
} : selectedComponent,
group: function group(childs_path, callBack, props, component) {
return _this3.group(path + childs_path, callBack, props, component, routes[index].routes);
},
route: function route() {
var siblings_path = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var siblings_component = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var siblings_props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
return _extends({}, _this3.route(siblings_path, siblings_component, siblings_props, path, routes[index].routes), {
route: function route() {
var grandchilds_path = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var grandchilds_component = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var grandchilds_props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
return routes[index].route(siblings_path + grandchilds_path, grandchilds_component, grandchilds_props);
}
});
}
}));
callBack(routes[index]);
}
/**
* Get Public Route Object
*
* @param { String } name Route name if assigned
* @return { Object } Methods binded to route name
*/
}, {
key: 'get',
value: function get(name) {
return this.config.routesByName[name];
}
/**
* Get All matching routes for pathname in first level routes group
*
* @param { String } pathname Check string
* @param { String|Array } name Route group name/routes (Optional)
* @param { Boolean } strict Strict pathname check
* @return { Array } Matched routes
*/
}, {
key: 'match',
value: function match(pathname, name) {
var _ref9 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
_ref9$strict = _ref9.strict,
strict = _ref9$strict === undefined ? true : _ref9$strict;
switch (typeof name === 'undefined' ? 'undefined' : _typeof(name)) {
case 'string':
var _get$data = this.get(name).data(),
routes = _get$data.routes,
path = _get$data.path;
if (routes) {
return (0, _reactRouterConfig.matchRoutes)(routes, strict ? pathname : path + '/' + (0, _lodash.trimStart)(pathname, '/'));
}
return [];
case 'object':
return (0, _reactRouterConfig.matchRoutes)(name, pathname);
default:
return (0, _reactRouterConfig.matchRoutes)(this.config.routes, pathname);
}
}
/**
* Check if path exists in first level routes
*
* @param { String } pathname Check string
* @param { String } name Route group name (Optional)
* @param { Boolean } strict Strict pathname check
* @return { Boolean }
*/
}, {
key: 'isRoute',
value: function isRoute(pathname, name) {
var _ref10 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
strict = _ref10.strict;
return !!this.match(pathname, name, strict).length;
}
/**
* Check if compiled path aganist source path
* @param { String } compiledPathname Encoded pathname
* @param { String } sourcePathname Regex string pathname
* @return { Boolean }
*/
}, {
key: 'isMatch',
value: function isMatch(compiledPathname, sourcePathname) {
if (sourcePathname === null) {
return false;
}
var routeRegEx = (0, _pathToRegexp2.default)(sourcePathname);
return !!compiledPathname.match(routeRegEx);
}
}]);
return AppCore;
}();
exports.AppCore = AppCore;
AppCore.displayName = 'AppCore';
exports.default = new AppCore();