Repository URL to install this package:
|
Version:
1.1.21 ▾
|
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "registry", {
enumerable: true,
get: function get() {
return _containerRegistry.default;
}
});
exports.default = exports.ObservableContainer = void 0;
var _exotic = require("../exotic");
var _mobx = require("xmobx/mobx");
var _mobxReact = require("xmobx/mobx-react");
var _localStorage = _interopRequireDefault(require("../persistance/local-storage"));
var _cookies = _interopRequireDefault(require("../persistance/cookies"));
var _router = _interopRequireDefault(require("../router"));
var _oneRequest = require("../oneRequest");
var _deps = require("./deps");
var _connectToData = require("./connectToData");
var _containerRegistry = _interopRequireDefault(require("./containerRegistry"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
/**
* @description mutates to fix
* @see autofixSafe
* @see modules/state-tree
*/
function mutateTypesToFixMobx(types) {
const autofixBuiltIn = property => {
const type = types[property];
if (type === Array) {
types[property] = [];
}
};
Object.keys(types).forEach(autofixBuiltIn);
}
const intellisense = {
get OmniStore() {
return require('state/OmniStore').OmniStoreX;
},
get oneRouter() {
return _router.default;
},
get OneRequest() {
return _oneRequest.Request;
}
};
/**
*
* @description when the view mounts or gets new data
* we can handle things going through
* @event componentWillMount
* @event componentWillReceiveProps
*
*
* @alias interceptProps
* @param {React.Props} props container.oneStore
*
* @return {React.Props} decorated props available to the component we are wrapping
*
* @note if the store has any handle props function
* call it, so it can change the props
*
* by default, we use tapProps which adds routing props
* and the omnistore
*/
function handleProps(props) {
return (0, _deps.tapProps)(this, props);
}
/**
* !!!!!
* @TODO there should be many classes extending this these
* these are observable observable container, only 1 instance like singleton pattern
* but only 1 `oneState` 1 `oneRouter` ever
* !!!!!
*
* @tutorial https://mobx.js.org/refguide/map.html
* @extends BaseChain
* @see modules/oneRequest
* @param {Mobx.observable} store
*/
let ObservableContainer = class ObservableContainer {
// could take in debug name in props...
constructor() {
this.dynamicState = void 0;
this.Query = void 0;
this.Mutate = void 0;
this.QueryPropsMapper = props => props;
this.connectToData = Target => {
// return compose(this.injectContext, withStore(this))(Target)
return (0, _connectToData.withStore)(this, Target);
};
this.connectToGraph = Target => {
return (0, _connectToData.withStore)(this, Target);
};
this.named = this.constructor.debugName || this.constructor.name;
if (process.env.NODE_ENV !== 'production') {
_containerRegistry.default.set(this.named, this);
}
}
get containers() {
return _containerRegistry.default;
} // this helps put it at the bottom of our inspector in dev tools
get oneRouter() {
return _router.default;
}
get oneCookie() {
return _cookies.default;
}
get oneStorage() {
// .cookies
// .ls
return _localStorage.default;
} // :-(
get oneRequest() {
return _oneRequest.Request;
}
/**
* graphqlyo
* @todo
*/
get isLoading() {
// this.extendObservable({
// dynamicState: {
// isLoading: false,
// },
// })
return this.dynamicState.isLoading;
}
set isLoading(isLoading) {
if ((0, _exotic.isObj)(this.dynamicState) === false) {
this.dynamicState = _mobx.observable.object();
}
this.dynamicState.isLoading = isLoading;
} // query<T>(options: WatchQueryOptions): Promise<ApolloQueryResult<T>>;
// mutate<T>(options: MutationOptions<T>): Promise<FetchResult<T>>;
// subscribe(options: SubscriptionOptions): Observable<any>;
// readQuery<T>(options: DataProxy.Query): T | null;
// readFragment<T>(options: DataProxy.Fragment): T | null;
// writeQuery(options: DataProxy.WriteQueryOptions): void;
// writeFragment(options: DataProxy.WriteFragmentOptions): void;
// gql = {
// // CRUD
// query: 'QueryHere',
// // dynamic
// // variables: {},
// }
// === not really needed
get previousQueryResult() {
return this.dynamicState.previousData || this.dynamicState.observableQuery.getLastResult();
}
get queryResult() {
return this.dynamicState.observableQuery.currentResult();
} // variables,
// pollInterval,
// query,
// fetchPolicy,
// errorPolicy,
// notifyOnNetworkStatusChange,
// this.dynamicState.observableQuery = client.watchQuery(this.queryOptions)
// this.dynamicState.observableQueryResult = this.dynamicState.observableQuery.currentResult()
// @private
apollo(response, queryOptions) {
const data = response.data; // @perf @todo
this.dynamicState.response = response;
this.dynamicState.isLoading = response.loading;
this.dynamicState.queryOptions = queryOptions;
return data;
} // private
_SERVER_SIDE_RENDERING_DO_NOT_USE_ME_OR_ELSE_DOT_DOT_DOT() {
if (this.ClientOptions && this.ClientOptions.mutation) {
return this.mutate();
} else {
return this.query();
}
} // this first arg is not used........
async mutate(mutate, configOrVariables = undefined) {
// @todo make sure dynamicState updates
const queryOptions = configOrVariables || this.ClientOptions || this.dynamicState.queryOptions || configOrVariables;
const response = await this.client.mutate({
mutate,
queryOptions
});
return this.apollo(response, queryOptions);
} // @michael, first arg is not used...
async query(query, configOrVariables = _exotic.EMPTY_OBJ) {
// this lets you pass in `variables` or the whole config
const Query = this.Query;
const defaultQueryArgs = {
query: Query,
// variables: configOrVariables,
// !!! options.variables !!!
options: configOrVariables
};
const queryOptions = configOrVariables || this.ClientOptions || configOrVariables.options || configOrVariables.query ? configOrVariables : defaultQueryArgs;
if (configOrVariables === _exotic.EMPTY_OBJ) {
return Promise.resolve(_exotic.EMPTY_OBJ);
}
const response = await this.client.query({
query,
queryOptions
});
return this.apollo(response, queryOptions);
}
/**
* @protected
* @description because of the way transpiling works,
* we cannot use static types in a decorator
* and we cannot use class properties,
* because they get auto-added to constructor + js prototype inheritance
* but this removes the need for importing observable +
*
* @param {Object} types normal javascript object or any data to make observable as properties
* @return {ObservableContainer} @chainable
*/
extendObservable(types = _exotic.EMPTY_OBJ) {
mutateTypesToFixMobx(types); // console.dev(this.named)
(0, _mobx.extendObservable)(this, _objectSpread({}, types)); // this.connectToDevtools()
return this;
}
extendShallowObservable(types = _exotic.EMPTY_OBJ) {
mutateTypesToFixMobx(types); // extendShallowObservable(this, types)
(0, _mobx.extendShallowObservable)(this, _objectSpread({}, types));
return this;
} // -------
/**
* @protected
* @type {handlePropsType}
* @see handlePropsType
* @override this function to handle props easily
* @param {*} props
*/
_handleProps(props, ref) {
// console.info('DEFAULT_HANDLEPROPS', props)
Object.defineProperty(this, 'props', {
enumerable: false,
configurable: true,
// writable: true,
get() {
return props;
}
});
Object.defineProperty(this, 'context', {
enumerable: false,
configurable: true,
// writable: true,
get() {
return ref.context;
}
}); // this.props = props
// this.context = ref.context
if ((0, _exotic.isFunction)(this.handleProps) === true) {
return this.handleProps(props);
} else {
return handleProps.call(this, props);
}
}
/**
* @protected
* @listens componentWillUnmount
* @param {*} props
*/
handleRemove() {} //
/**
* @protected
* @listens componentWillReceiveProps
* @param {*} props
*/
handleUpdate(props) {} //
// --- helper methods ---
// --- can put state tree types here too
/**
* @public
* @param {*} data
* @return {observable}
*/
observable(data) {
// observable(data) {
return (0, _mobx.observable)(data);
}
/**
* @public
* @param {ReactComponent} Target
* @return {Observer}
*/
observer(Target) {
// observer(Target) {
return (0, _mobxReact.observer)(Target);
}
/**
* @public
* @tutorial https://reactjs.org/docs/higher-order-components.html
* @type {Function.Decorator}
* @param {React.Component} Target
* @return {React.Component} obserable/subscribed component connected to ^ store
*/
// ------
// === not needed...
setHandleProps(fn) {
// setHandleProps(fn = Function) {
this.handleProps = fn;
return this;
} // @tutorial https://github.com/mobxjs/mobx-react#customizing-inject
// @TODO spread relational stores with this function
// @see ./deps/injectContext
injectContext(builder) {
/**
* @todo withErrorBoundary
*/
return builder;
}
};
exports.ObservableContainer = ObservableContainer;
var _default = ObservableContainer;
exports.default = _default;