@loona/react
Version:
App State Management done with GraphQL (react integration)
374 lines (360 loc) • 15.7 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@loona/core'), require('react'), require('prop-types'), require('react-apollo')) :
typeof define === 'function' && define.amd ? define(['exports', '@loona/core', 'react', 'prop-types', 'react-apollo'], factory) :
(factory((global.loona = global.loona || {}, global.loona.react = {}),global.loona.core,global.React,global.PropTypes,global['react-apollo']));
}(this, (function (exports,core,React,PropTypes,reactApollo) { 'use strict';
var __assign = (undefined && undefined.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var Loona = /** @class */ (function () {
function Loona(client, manager, states) {
var _this = this;
this.client = client;
this.manager = manager;
this.effects = {};
manager.getClient = function () { return client; };
states.forEach(function (state) {
var instance = new state();
var meta = state[core.METADATA_KEY];
_this.manager.addState(instance, meta);
_this.addEffects(instance, meta.effects);
});
}
Loona.prototype.dispatch = function (action) {
if (core.isMutation(action)) {
var mutation = core.getMutation(action);
var config = __assign({ mutation: mutation }, action);
this.wrapMutation(this.client.mutate(core.withUpdates(config, this.manager)), config);
}
else {
this.runEffects(__assign({ type: core.getActionType(action) }, action));
}
};
Loona.prototype.addEffects = function (instance, meta) {
var _this = this;
if (!meta) {
return;
}
var _loop_1 = function (type) {
if (!this_1.effects[type]) {
this_1.effects[type] = [];
}
meta[type].forEach(function (_a) {
var propName = _a.propName;
_this.effects[type].push(instance[propName].bind(instance));
});
};
var this_1 = this;
for (var type in meta) {
_loop_1(type);
}
};
Loona.prototype.runEffects = function (action) {
var type = action.type;
var cache = this.client.cache;
var context = __assign({}, core.buildContext({
cache: cache,
getCacheKey: core.buildGetCacheKey(cache),
}, this.client), { dispatch: this.dispatch.bind(this) });
if (core.isMutationAsAction(action)) {
type = core.getNameOfMutation(action.options.mutation);
}
var effectsToRun = this.effects[type];
if (effectsToRun) {
effectsToRun.forEach(function (effect) {
effect(action, context);
});
}
};
Loona.prototype.wrapMutation = function (mutationPromise, config, shouldThrow) {
var _this = this;
if (shouldThrow === void 0) { shouldThrow = true; }
mutationPromise
.then(function (result) {
_this.runEffects(core.buildActionFromResult(config, result));
})
.catch(function (error) {
_this.runEffects(core.buildActionFromError(config, error));
if (shouldThrow) {
throw error;
}
});
};
return Loona;
}());
var LoonaContext = React.createContext({});
var __extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var LoonaProvider = /** @class */ (function (_super) {
__extends(LoonaProvider, _super);
function LoonaProvider() {
return _super !== null && _super.apply(this, arguments) || this;
}
LoonaProvider.prototype.render = function () {
var _a = this.props, children = _a.children, loona = _a.loona, states = _a.states;
return (React.createElement(reactApollo.ApolloConsumer, null, function (apolloClient) {
return (React.createElement(LoonaContext.Provider, { value: {
loona: new Loona(apolloClient, loona.manager, states),
} }, children));
}));
};
LoonaProvider.propTypes = {
states: PropTypes.array,
loona: PropTypes.object.isRequired,
children: PropTypes.node.isRequired,
};
return LoonaProvider;
}(React.Component));
function createLoona(cache) {
return new core.LoonaLink({
cache: cache,
});
}
function decorate(thing, decorators) {
var target = typeof thing === 'function' ? thing.prototype : thing;
var _loop_1 = function (prop) {
var propertyDecorators = decorators[prop];
if (!Array.isArray(propertyDecorators)) {
propertyDecorators = [propertyDecorators];
}
var descriptor = Object.getOwnPropertyDescriptor(target, prop);
var newDescriptor = propertyDecorators.reduce(function (accDescriptor, decorator) {
return decorator(target, prop, accDescriptor);
}, descriptor);
if (newDescriptor)
Object.defineProperty(target, prop, newDescriptor);
};
for (var prop in decorators) {
_loop_1(prop);
}
return thing;
}
function getDisplayName(component) {
return component.displayName || component.name || 'Component';
}
function isMutationType(doc) {
return doc.definitions.some(function (x) { return x.kind === 'OperationDefinition' && x.operation === 'mutation'; });
}
var __extends$1 = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign$1 = (undefined && undefined.__assign) || function () {
__assign$1 = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign$1.apply(this, arguments);
};
var Action = /** @class */ (function (_super) {
__extends$1(Action, _super);
function Action() {
return _super !== null && _super.apply(this, arguments) || this;
}
Action.prototype.createDispatch = function (loona) {
var _this = this;
return function (actionOrPayload) {
if (!loona) {
throw new Error('No Loona no fun!');
}
var action;
if (core.isMutation(actionOrPayload)) {
action = actionOrPayload;
}
else {
action = _this.props.action
? __assign$1({ type: _this.props.action }, actionOrPayload) : __assign$1({ type: core.getActionType(actionOrPayload) }, actionOrPayload);
}
loona.dispatch(action);
};
};
Action.prototype.render = function () {
var _this = this;
var children = this.props.children;
return (React.createElement(LoonaContext.Consumer, null, function (_a) {
var loona = _a.loona;
return children(_this.createDispatch(loona));
}));
};
Action.propTypes = {
action: PropTypes.any,
children: PropTypes.func.isRequired,
};
return Action;
}(React.Component));
var __extends$2 = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign$2 = (undefined && undefined.__assign) || function () {
__assign$2 = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign$2.apply(this, arguments);
};
var Mutation = /** @class */ (function (_super) {
__extends$2(Mutation, _super);
function Mutation() {
return _super !== null && _super.apply(this, arguments) || this;
}
Mutation.prototype.render = function () {
var _this = this;
var children = this.props.children;
return (React.createElement(LoonaContext.Consumer, null, function (_a) {
var loona = _a.loona;
return (React.createElement(reactApollo.Mutation, __assign$2({}, _this.props), function (mutation, result) {
return children(wrapMutation(loona, mutation, _this.props.mutation), result);
}));
}));
};
Mutation.propTypes = reactApollo.Mutation.propTypes;
return Mutation;
}(React.Component));
function wrapMutation(loona, mutate, doc) {
if (!loona) {
throw new Error('No Loona No Mutation!');
}
return function (mutation) {
var config = doc
? __assign$2({ mutation: doc }, mutation) : __assign$2({}, mutation);
var promise = mutate(core.withUpdates(config, loona.manager));
loona.wrapMutation(promise, config, false);
return promise;
};
}
var __assign$3 = (undefined && undefined.__assign) || function () {
__assign$3 = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign$3.apply(this, arguments);
};
function connect(factory) {
return function wrapWithConnect(WrappedComponent) {
var displayName = "Connect(" + getDisplayName(WrappedComponent) + ")";
function wrapWithDispatch(props, loona) {
if (!loona) {
throw new Error('No Loona no fun!');
}
var childProps = factory(loona.dispatch.bind(loona));
return React.createElement(WrappedComponent, __assign$3({}, props, childProps));
}
function Connect(props) {
return (React.createElement(LoonaContext.Consumer, null, function (_a) {
var loona = _a.loona;
return wrapWithDispatch(props, loona);
}));
}
Connect.displayName = displayName;
Connect.WrappedComponent = WrappedComponent;
return Connect;
};
}
var __assign$4 = (undefined && undefined.__assign) || function () {
__assign$4 = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign$4.apply(this, arguments);
};
function withMutation(document, operationOptions) {
if (operationOptions === void 0) { operationOptions = {}; }
return function (WrappedComponent) {
var name = operationOptions.name || 'mutate';
var wrappedComponentName = getDisplayName(WrappedComponent);
var displayName = "LoonaMutate(" + wrappedComponentName + ")";
function GraphQLComponent(props) {
var mutate = props[name];
return (React.createElement(LoonaContext.Consumer, null, function (_a) {
var loona = _a.loona;
var _b;
var childProps = (_b = {},
_b[name] = wrapMutation(loona, mutate, document),
_b);
return React.createElement(WrappedComponent, __assign$4({}, props, childProps));
}));
}
GraphQLComponent.displayName = displayName;
GraphQLComponent.WrappedComponent = WrappedComponent;
return reactApollo.graphql(document, operationOptions)(GraphQLComponent);
};
}
function graphql(document, operationOptions) {
if (operationOptions === void 0) { operationOptions = {}; }
if (isMutationType(document)) {
return withMutation(document, operationOptions);
}
return reactApollo.graphql(document, operationOptions);
}
exports.LoonaLink = core.LoonaLink;
exports.state = core.State;
exports.mutation = core.Mutation;
exports.update = core.Update;
exports.resolve = core.Resolve;
exports.effect = core.Effect;
exports.Query = reactApollo.Query;
exports.Subscription = reactApollo.Subscription;
exports.LoonaProvider = LoonaProvider;
exports.createLoona = createLoona;
exports.decorate = decorate;
exports.Action = Action;
exports.Mutation = Mutation;
exports.connect = connect;
exports.graphql = graphql;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=loona.react.umd.js.map