Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/modules / ___dist / observable-container / ObservableContainer.js
Size: Mime:
"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;