react-relay 2.0.0-rc.2 → 5.0.0

package/lib/ReactRelayQueryFetcher.js

@@ -4,12 +4,20 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- *  strict-local
+ * 
  * @format
  */
 'use strict';
 
-var _defineProperty2 = require("@babel/runtime/helpers/interopRequireDefault")(require("@babel/runtime/helpers/defineProperty"));
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var invariant = require("fbjs/lib/invariant");
+
+var _require = require("relay-runtime"),
+    isRelayModernEnvironment = _require.isRelayModernEnvironment,
+    fetchQuery = _require.__internal.fetchQuery;
 
 var ReactRelayQueryFetcher =
 /*#__PURE__*/
@@ -37,7 +45,7 @@ function () {
     if (environment.check(operation.root)) {
       this._retainCachedOperation(environment, operation);
 
-      return environment.lookup(operation.fragment);
+      return environment.lookup(operation.fragment, operation);
     }
 
     return null;
@@ -52,32 +60,50 @@ function () {
         _ref$preservePrevious = _ref.preservePreviousReferences,
         preservePreviousReferences = _ref$preservePrevious === void 0 ? false : _ref$preservePrevious;
     var reference = environment.retain(operation.root);
-    return environment.execute({
-      operation: operation,
-      cacheConfig: cacheConfig
-    })["do"]({
-      error: function error() {
-        // We may have partially fulfilled the request, so let the next request
-        // or the unmount dispose of the references.
-        _this._selectionReferences = _this._selectionReferences.concat(reference);
-      },
-      complete: function complete() {
-        if (!preservePreviousReferences) {
-          _this.disposeSelectionReferences();
-        }
+    var fetchQueryOptions = cacheConfig != null ? {
+      networkCacheConfig: cacheConfig
+    } : {};
+
+    var error = function error() {
+      // We may have partially fulfilled the request, so let the next request
+      // or the unmount dispose of the references.
+      _this._selectionReferences = _this._selectionReferences.concat(reference);
+    };
 
-        _this._selectionReferences = _this._selectionReferences.concat(reference);
-      },
-      unsubscribe: function unsubscribe() {
-        // Let the next request or the unmount code dispose of the references.
-        // We may have partially fulfilled the request.
-        _this._selectionReferences = _this._selectionReferences.concat(reference);
+    var complete = function complete() {
+      if (!preservePreviousReferences) {
+        _this.disposeSelectionReferences();
       }
+
+      _this._selectionReferences = _this._selectionReferences.concat(reference);
+    };
+
+    var unsubscribe = function unsubscribe() {
+      // Let the next request or the unmount code dispose of the references.
+      // We may have partially fulfilled the request.
+      _this._selectionReferences = _this._selectionReferences.concat(reference);
+    };
+
+    if (!isRelayModernEnvironment(environment)) {
+      return environment.execute({
+        operation: operation,
+        cacheConfig: cacheConfig
+      })["do"]({
+        error: error,
+        complete: complete,
+        unsubscribe: unsubscribe
+      });
+    }
+
+    return fetchQuery(environment, operation, fetchQueryOptions)["do"]({
+      error: error,
+      complete: complete,
+      unsubscribe: unsubscribe
     });
   };
 
   _proto.setOnDataChange = function setOnDataChange(onDataChange) {
-    !this._fetchOptions ? process.env.NODE_ENV !== "production" ? require("fbjs/lib/invariant")(false, 'ReactRelayQueryFetcher: `setOnDataChange` should have been called after having called `fetch`') : require("fbjs/lib/invariant")(false) : void 0;
+    !this._fetchOptions ? process.env.NODE_ENV !== "production" ? invariant(false, 'ReactRelayQueryFetcher: `setOnDataChange` should have been called after having called `fetch`') : invariant(false) : void 0;
 
     if (typeof onDataChange === 'function') {
       // Mutate the most recent fetchOptions in place,
@@ -99,7 +125,7 @@ function () {
         }
       }
     }
-  };
+  }
   /**
    * `fetch` fetches the data for the given operation.
    * If a result is immediately available synchronously, it will be synchronously
@@ -109,7 +135,7 @@ function () {
    * `onDataChange` will be called with the first result (**if it wasn't returned synchronously**),
    * and then subsequently whenever the data changes.
    */
-
+  ;
 
   _proto.fetch = function fetch(fetchOptions) {
     var _this2 = this;
@@ -190,7 +216,7 @@ function () {
   };
 
   _proto.retry = function retry() {
-    !this._fetchOptions ? process.env.NODE_ENV !== "production" ? require("fbjs/lib/invariant")(false, 'ReactRelayQueryFetcher: `retry` should be called after having called `fetch`') : require("fbjs/lib/invariant")(false) : void 0;
+    !this._fetchOptions ? process.env.NODE_ENV !== "production" ? invariant(false, 'ReactRelayQueryFetcher: `retry` should be called after having called `fetch`') : invariant(false) : void 0;
     return this.fetch({
       cacheConfig: this._fetchOptions.cacheConfig,
       environment: this._fetchOptions.environment,
@@ -245,7 +271,7 @@ function () {
     var _this3 = this;
 
     var notifyFirstResult = _ref2.notifyFirstResult;
-    !this._fetchOptions ? process.env.NODE_ENV !== "production" ? require("fbjs/lib/invariant")(false, 'ReactRelayQueryFetcher: `_onQueryDataAvailable` should have been called after having called `fetch`') : require("fbjs/lib/invariant")(false) : void 0;
+    !this._fetchOptions ? process.env.NODE_ENV !== "production" ? invariant(false, 'ReactRelayQueryFetcher: `_onQueryDataAvailable` should have been called after having called `fetch`') : invariant(false) : void 0;
     var _this$_fetchOptions = this._fetchOptions,
         environment = _this$_fetchOptions.environment,
         onDataChangeCallbacks = _this$_fetchOptions.onDataChangeCallbacks,
@@ -257,7 +283,7 @@ function () {
       return;
     }
 
-    this._snapshot = environment.lookup(operation.fragment); // Subscribe to changes in the data of the root fragment
+    this._snapshot = environment.lookup(operation.fragment, operation); // Subscribe to changes in the data of the root fragment
 
     this._rootSubscription = environment.subscribe(this._snapshot, function (snapshot) {
       // Read from this._fetchOptions in case onDataChange() was lazily added.

package/lib/ReactRelayQueryRenderer.js

@@ -9,9 +9,22 @@
  */
 'use strict';
 
-var _objectSpread2 = require("@babel/runtime/helpers/interopRequireDefault")(require("@babel/runtime/helpers/objectSpread"));
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _inheritsLoose2 = require("@babel/runtime/helpers/interopRequireDefault")(require("@babel/runtime/helpers/inheritsLoose"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var React = require("react");
+
+var ReactRelayContext = require("./ReactRelayContext");
+
+var ReactRelayQueryFetcher = require("./ReactRelayQueryFetcher");
+
+var areEqual = require("fbjs/lib/areEqual");
+
+var _require = require("relay-runtime"),
+    deepFreeze = _require.deepFreeze;
 
 /**
  * React may double-fire the constructor, and we call 'fetch' in the
@@ -59,15 +72,13 @@ function (_React$Component) {
     var requestCacheKey;
 
     if (props.query) {
-      var query = props.query; // $FlowFixMe TODO t16225453 QueryRenderer works with old+new environment.
-
-      var genericEnvironment = props.environment;
-      var getRequest = genericEnvironment.unstable_internal.getRequest;
+      var query = props.query;
+      var getRequest = props.environment.unstable_internal.getRequest;
       var request = getRequest(query);
       requestCacheKey = getRequestCacheKey(request.params, props.variables);
-      queryFetcher = requestCache[requestCacheKey] ? requestCache[requestCacheKey].queryFetcher : new (require("./ReactRelayQueryFetcher"))();
+      queryFetcher = requestCache[requestCacheKey] ? requestCache[requestCacheKey].queryFetcher : new ReactRelayQueryFetcher();
     } else {
-      queryFetcher = new (require("./ReactRelayQueryFetcher"))();
+      queryFetcher = new ReactRelayQueryFetcher();
     }
 
     _this.state = (0, _objectSpread2["default"])({
@@ -81,21 +92,19 @@ function (_React$Component) {
   }
 
   ReactRelayQueryRenderer.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
-    if (prevState.prevQuery !== nextProps.query || prevState.prevPropsEnvironment !== nextProps.environment || !require("fbjs/lib/areEqual")(prevState.prevPropsVariables, nextProps.variables)) {
+    if (prevState.prevQuery !== nextProps.query || prevState.prevPropsEnvironment !== nextProps.environment || !areEqual(prevState.prevPropsVariables, nextProps.variables)) {
       var query = nextProps.query;
       var prevSelectionReferences = prevState.queryFetcher.getSelectionReferences();
       prevState.queryFetcher.disposeRequest();
       var queryFetcher;
 
       if (query) {
-        // $FlowFixMe TODO t16225453 QueryRenderer works with old+new environment.
-        var genericEnvironment = nextProps.environment;
-        var getRequest = genericEnvironment.unstable_internal.getRequest;
+        var getRequest = nextProps.environment.unstable_internal.getRequest;
         var request = getRequest(query);
         var requestCacheKey = getRequestCacheKey(request.params, nextProps.variables);
-        queryFetcher = requestCache[requestCacheKey] ? requestCache[requestCacheKey].queryFetcher : new (require("./ReactRelayQueryFetcher"))(prevSelectionReferences);
+        queryFetcher = requestCache[requestCacheKey] ? requestCache[requestCacheKey].queryFetcher : new ReactRelayQueryFetcher(prevSelectionReferences);
       } else {
-        queryFetcher = new (require("./ReactRelayQueryFetcher"))(prevSelectionReferences);
+        queryFetcher = new ReactRelayQueryFetcher(prevSelectionReferences);
       }
 
       return (0, _objectSpread2["default"])({
@@ -142,7 +151,7 @@ function (_React$Component) {
         }
 
         return {
-          renderProps: getRenderProps(error, snapshot, queryFetcher, retryCallbacks),
+          renderProps: getRenderProps(error, snapshot, prevState.queryFetcher, prevState.retryCallbacks),
           snapshot: snapshot,
           requestCacheKey: null
         };
@@ -198,16 +207,16 @@ function (_React$Component) {
     // error property if set.
 
     if (process.env.NODE_ENV !== "production") {
-      require("relay-runtime").deepFreeze(renderProps);
+      deepFreeze(renderProps);
     }
 
-    return require("react").createElement(require("./ReactRelayContext").Provider, {
+    return React.createElement(ReactRelayContext.Provider, {
       value: relayContext
     }, this.props.render(renderProps));
   };
 
   return ReactRelayQueryRenderer;
-}(require("react").Component);
+}(React.Component);
 
 function getContext(environment, variables) {
   return {
@@ -265,8 +274,7 @@ function getRequestCacheKey(request, variables) {
 function fetchQueryAndComputeStateFromProps(props, queryFetcher, retryCallbacks, requestCacheKey) {
   var environment = props.environment,
       query = props.query,
-      variables = props.variables; // $FlowFixMe TODO t16225453 QueryRenderer works with old+new environment.
-
+      variables = props.variables;
   var genericEnvironment = environment;
 
   if (query) {

package/lib/ReactRelayRefetchContainer.js

@@ -9,17 +9,42 @@
  */
 'use strict';
 
-var _extends2 = require("@babel/runtime/helpers/interopRequireDefault")(require("@babel/runtime/helpers/extends"));
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _objectWithoutPropertiesLoose2 = require("@babel/runtime/helpers/interopRequireDefault")(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _objectSpread2 = require("@babel/runtime/helpers/interopRequireDefault")(require("@babel/runtime/helpers/objectSpread"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _inheritsLoose2 = require("@babel/runtime/helpers/interopRequireDefault")(require("@babel/runtime/helpers/inheritsLoose"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
 
-var _assertThisInitialized2 = require("@babel/runtime/helpers/interopRequireDefault")(require("@babel/runtime/helpers/assertThisInitialized"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _defineProperty2 = require("@babel/runtime/helpers/interopRequireDefault")(require("@babel/runtime/helpers/defineProperty"));
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var React = require("react");
+
+var ReactRelayContext = require("./ReactRelayContext");
+
+var ReactRelayQueryFetcher = require("./ReactRelayQueryFetcher");
+
+var areEqual = require("fbjs/lib/areEqual");
+
+var buildReactRelayContainer = require("./buildReactRelayContainer");
+
+var warning = require("fbjs/lib/warning");
+
+var _require = require("./ReactRelayContainerUtils"),
+    getContainerName = _require.getContainerName;
+
+var _require2 = require("./RelayContext"),
+    assertRelayContext = _require2.assertRelayContext;
+
+var _require3 = require("relay-runtime"),
+    Observable = _require3.Observable,
+    getFragmentOwners = _require3.getFragmentOwners,
+    isScalarAndEqual = _require3.isScalarAndEqual;
 
 /**
  * Composes a React component class, returning a new class that intercepts
@@ -27,49 +52,45 @@ var _defineProperty2 = require("@babel/runtime/helpers/interopRequireDefault")(r
  * updates.
  */
 function createContainerWithFragments(Component, fragments, taggedNode) {
-  var containerName = require("./ReactRelayContainerUtils").getContainerName(Component);
+  var _class, _temp;
 
-  var Container =
+  var containerName = getContainerName(Component);
+  return _temp = _class =
   /*#__PURE__*/
   function (_React$Component) {
-    (0, _inheritsLoose2["default"])(Container, _React$Component);
+    (0, _inheritsLoose2["default"])(_class, _React$Component);
 
-    function Container(props) {
+    function _class(props) {
       var _this;
 
       _this = _React$Component.call(this, props) || this;
-      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])((0, _assertThisInitialized2["default"])(_this)), "_handleFragmentDataUpdate", function () {
-        var profiler = require("relay-runtime").RelayProfiler.profile('ReactRelayRefetchContainer.handleFragmentDataUpdate');
-
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleFragmentDataUpdate", function () {
         var resolverFromThisUpdate = _this.state.resolver;
 
         _this.setState(function (updatedState) {
-          // If this event belongs to the current data source, update.
-          // Otherwise we should ignore it.
-          if (resolverFromThisUpdate === updatedState.resolver) {
-            return {
+          return (// If this event belongs to the current data source, update.
+            // Otherwise we should ignore it.
+            resolverFromThisUpdate === updatedState.resolver ? {
               data: updatedState.resolver.resolve()
-            };
-          }
-
-          return null;
-        }, profiler.stop);
+            } : null
+          );
+        });
       });
-      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])((0, _assertThisInitialized2["default"])(_this)), "_refetch", function (refetchVariables, renderVariables, observerOrCallback, options) {
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_refetch", function (refetchVariables, renderVariables, observerOrCallback, options) {
         if (_this._isUnmounted) {
-          process.env.NODE_ENV !== "production" ? require("fbjs/lib/warning")(false, 'ReactRelayRefetchContainer: Unexpected call of `refetch` ' + 'on unmounted container `%s`. It looks like some instances ' + 'of your container still trying to refetch the data but they already ' + 'unmounted. Please make sure you clear all timers, intervals, async ' + 'calls, etc that may trigger `refetch`.', containerName) : void 0;
+          process.env.NODE_ENV !== "production" ? warning(false, 'ReactRelayRefetchContainer: Unexpected call of `refetch` ' + 'on unmounted container `%s`. It looks like some instances ' + 'of your container still trying to refetch the data but they already ' + 'unmounted. Please make sure you clear all timers, intervals, async ' + 'calls, etc that may trigger `refetch`.', containerName) : void 0;
           return {
             dispose: function dispose() {}
           };
         }
 
-        var _assertRelayContext = require("./RelayContext").assertRelayContext(_this.props.__relayContext),
+        var _assertRelayContext = assertRelayContext(_this.props.__relayContext),
             environment = _assertRelayContext.environment,
             rootVariables = _assertRelayContext.variables;
 
         var fetchVariables = typeof refetchVariables === 'function' ? refetchVariables(_this._getFragmentVariables()) : refetchVariables;
         fetchVariables = (0, _objectSpread2["default"])({}, rootVariables, fetchVariables);
-        var fragmentVariables = renderVariables ? (0, _objectSpread2["default"])({}, rootVariables, renderVariables) : fetchVariables;
+        var fragmentVariables = renderVariables ? (0, _objectSpread2["default"])({}, fetchVariables, renderVariables) : fetchVariables;
         var cacheConfig = options ? {
           force: !!options.force
         } : undefined;
@@ -100,7 +121,7 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
           var storeSnapshot = _this._getQueryFetcher().lookupInStore(environment, operation);
 
           if (storeSnapshot != null) {
-            _this.state.resolver.setVariables(fragmentVariables);
+            _this.state.resolver.setVariables(fragmentVariables, operation.node);
 
             _this.setState(function (latestState) {
               return {
@@ -128,9 +149,9 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
           // TODO (T26430099): Cleanup old references
           preservePreviousReferences: true
         }).mergeMap(function (response) {
-          _this.state.resolver.setVariables(fragmentVariables);
+          _this.state.resolver.setVariables(fragmentVariables, operation.node);
 
-          return require("relay-runtime").Observable.create(function (sink) {
+          return Observable.create(function (sink) {
             return _this.setState(function (latestState) {
               return {
                 data: latestState.resolver.resolve(),
@@ -163,9 +184,7 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
           }
         };
       });
-
-      var relayContext = require("./RelayContext").assertRelayContext(props.__relayContext);
-
+      var relayContext = assertRelayContext(props.__relayContext);
       _this._refetchSubscription = null;
       var createFragmentSpecResolver = relayContext.environment.unstable_internal.createFragmentSpecResolver; // Do not provide a subscription/callback here.
       // It is possible for this render to be interrupted or aborted,
@@ -186,7 +205,7 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
       return _this;
     }
 
-    var _proto = Container.prototype;
+    var _proto = _class.prototype;
 
     _proto.componentDidMount = function componentDidMount() {
       this._subscribeToNewResolver();
@@ -205,20 +224,18 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
 
         this._subscribeToNewResolver();
       }
-    };
+    }
     /**
      * When new props are received, read data for the new props and add it to
      * state. Props may be the same in which case previous data can be reused.
      */
+    ;
 
-
-    Container.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+    _class.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
       // Any props change could impact the query, so we mirror props in state.
       // This is an unusual pattern, but necessary for this container usecase.
       var prevProps = prevState.prevProps;
-
-      var relayContext = require("./RelayContext").assertRelayContext(nextProps.__relayContext);
-
+      var relayContext = assertRelayContext(nextProps.__relayContext);
       var _relayContext$environ = relayContext.environment.unstable_internal,
           createFragmentSpecResolver = _relayContext$environ.createFragmentSpecResolver,
           getDataIDsFromObject = _relayContext$environ.getDataIDsFromObject;
@@ -230,7 +247,7 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
       // - Existing references are based on old variables.
       // - Pending fetches are for the previous records.
 
-      if (prevState.prevPropsContext.environment !== relayContext.environment || prevState.prevPropsContext.variables !== relayContext.variables || !require("fbjs/lib/areEqual")(prevIDs, nextIDs)) {
+      if (prevState.prevPropsContext.environment !== relayContext.environment || prevState.prevPropsContext.variables !== relayContext.variables || !areEqual(prevIDs, nextIDs)) {
         // Do not provide a subscription/callback here.
         // It is possible for this render to be interrupted or aborted,
         // In which case the subscription would cause a leak.
@@ -286,7 +303,7 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
             return true;
           }
         } else {
-          if (!fragments.hasOwnProperty(_key) && !require("relay-runtime").isScalarAndEqual(nextProps[_key], this.props[_key])) {
+          if (!fragments.hasOwnProperty(_key) && !isScalarAndEqual(nextProps[_key], this.props[_key])) {
             return true;
           }
         }
@@ -311,20 +328,22 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
           data: maybeNewData
         });
       }
-    };
+    }
     /**
      * Render new data for the existing props/context.
      */
-
+    ;
 
     _proto._getFragmentVariables = function _getFragmentVariables() {
       var getVariablesFromObject = this.props.__relayContext.environment.unstable_internal.getVariablesFromObject;
-      return getVariablesFromObject(this.props.__relayContext.variables, fragments, this.props);
+      return getVariablesFromObject( // NOTE: We pass empty operationVariables because we want to prefer
+      // the variables from the fragment owner
+      {}, fragments, this.props, getFragmentOwners(fragments, this.props));
     };
 
     _proto._getQueryFetcher = function _getQueryFetcher() {
       if (!this._queryFetcher) {
-        this._queryFetcher = new (require("./ReactRelayQueryFetcher"))();
+        this._queryFetcher = new ReactRelayQueryFetcher();
       }
 
       return this._queryFetcher;
@@ -338,22 +357,16 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
       var _this$state2 = this.state,
           relayProp = _this$state2.relayProp,
           contextForChildren = _this$state2.contextForChildren;
-      return require("react").createElement(require("./ReactRelayContext").Provider, {
+      return React.createElement(ReactRelayContext.Provider, {
         value: contextForChildren
-      }, require("react").createElement(Component, (0, _extends2["default"])({}, props, this.state.data, {
+      }, React.createElement(Component, (0, _extends2["default"])({}, props, this.state.data, {
         ref: componentRef,
         relay: relayProp
       })));
     };
 
-    return Container;
-  }(require("react").Component);
-
-  (0, _defineProperty2["default"])(Container, "displayName", containerName);
-
-  require("./ReactRelayContainerProfiler").profileContainer(Container, 'ReactRelayRefetchContainer');
-
-  return Container;
+    return _class;
+  }(React.Component), (0, _defineProperty2["default"])(_class, "displayName", containerName), _temp;
 }
 
 function getRelayProp(environment, refetch) {
@@ -372,12 +385,11 @@ function getRelayProp(environment, refetch) {
 
 
 function createContainer(Component, fragmentSpec, taggedNode) {
-  return require("./buildReactRelayContainer")(Component, fragmentSpec, function (ComponentClass, fragments) {
+  return buildReactRelayContainer(Component, fragmentSpec, function (ComponentClass, fragments) {
     return createContainerWithFragments(ComponentClass, fragments, taggedNode);
   });
 }
 
 module.exports = {
-  createContainer: createContainer,
-  createContainerWithFragments: createContainerWithFragments
+  createContainer: createContainer
 };