@civet/core 0.6.8 → 1.0.0-rc2

package/src/Resource.js

@@ -1,236 +1,19 @@
-import deepEquals from 'fast-deep-equal';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
 
-import AbortSignal from './AbortSignal';
-import { ConfigContext, ResourceContext } from './context';
-import { dataStorePropType } from './DataStore';
-import Meta from './Meta';
-import uniqueIdentifier from './uniqueIdentifier';
-
-function getComparator({ name, ids, query, empty, options }) {
-  return {
-    name,
-    ids,
-    query,
-    empty,
-    options,
-  };
-}
-
-function compareRequests(dataStore, prevComparator, nextComparator) {
-  if (dataStore != null) return dataStore.compareRequests(prevComparator, nextComparator);
-  return deepEquals(prevComparator, nextComparator);
-}
-
-function getEmptyValue({ name, ids, query, options, dataStore }, request, revision, empty) {
-  return {
-    name,
-    ids,
-    query,
-    options,
-    dataStore,
-    request,
-    revision,
-    data: [],
-    meta: {},
-    error: undefined,
-    isEmpty: empty,
-    isIncomplete: !empty,
-    isInitial: !empty,
-  };
-}
+import { ResourceContext } from './context';
+import { dataProviderPropType } from './DataProvider';
+import useResource from './useResource';
 
 /**
- * Makes data from an DataStore available to its descendants using React's context API.
+ * Makes data from an DataProvider available to its descendants using React's context API.
  * If not explicitly specified, necessary configuration is taken from the nearest <ConfigProvider>.
+ * The provided DataProvider must not be replaced.
  */
-class Resource extends Component {
-  static getDerivedStateFromProps(nextProps, prevState) {
-    const { empty, dataStore: ds, persistent } = nextProps;
-    const _ = getComparator(nextProps);
-    if (prevState.ds !== ds || !compareRequests(ds, prevState._, _)) {
-      const request = uniqueIdentifier(prevState.request);
-      const revision = uniqueIdentifier(prevState.revision);
-      const isEmpty = ds == null || empty;
-      const nextState = {
-        _,
-        ds,
-        request,
-        revision,
-        isLoading: !isEmpty,
-        persistent,
-      };
-      let isPersistent;
-      if (
-        prevState.value.meta.persistent === 'very' ||
-        (persistent === 'very' && prevState.persistent === 'very')
-      ) {
-        isPersistent = 'very';
-      } else if (prevState.value.meta.persistent || (persistent && prevState.persistent)) {
-        isPersistent = true;
-      }
-      if (
-        prevState.ds == null ||
-        prevState.ds !== ds ||
-        isEmpty ||
-        !isPersistent ||
-        (isPersistent !== 'very' && prevState._.name !== _.name)
-      ) {
-        nextState.value = getEmptyValue(nextProps, request, revision, isEmpty);
-      }
-      return nextState;
-    }
-    if (prevState.persistent !== persistent) {
-      return { persistent };
-    }
-    return null;
-  }
-
-  constructor(props) {
-    super(props);
-    const { empty, dataStore: ds, persistent } = props;
-    const request = uniqueIdentifier();
-    const revision = uniqueIdentifier();
-    const isEmpty = ds == null || empty;
-    this.state = {
-      _: getComparator(props),
-      ds,
-      request,
-      revision,
-      isLoading: !isEmpty,
-      value: getEmptyValue(props, request, revision, isEmpty),
-      persistent,
-    };
-  }
-
-  componentDidMount() {
-    const { name, empty, dataStore } = this.props;
-    const { request, revision } = this.state;
-    if (dataStore == null || empty) return;
-    this.unsubscribe = dataStore.subscribe(name, this.notify);
-    this.fetch(request, revision);
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const { name, empty, dataStore } = this.props;
-    const { request, revision } = this.state;
-    if (prevState.request !== request || prevState.revision !== revision) {
-      if (this.abortSignal) this.abortSignal.abort();
-      this.abortSignal = undefined;
-    }
-    if (dataStore == null || prevProps.dataStore !== dataStore || prevProps.name !== name) {
-      if (this.unsubscribe) this.unsubscribe();
-      this.unsubscribe = undefined;
-      if (dataStore == null || empty) return;
-      this.unsubscribe = dataStore.subscribe(name, this.notify);
-    }
-    if ((prevState.request !== request || prevState.revision !== revision) && !empty) {
-      this.fetch(request, revision);
-    }
-  }
-
-  componentWillUnmount() {
-    this.isUnmounted = true;
-    if (this.unsubscribe) this.unsubscribe();
-    if (this.abortSignal) this.abortSignal.abort();
-  }
-
-  notify = async () =>
-    new Promise((resolve) => {
-      this.setState((currentState) => {
-        if (currentState.ds == null || currentState.empty) return null;
-        const nextRevision = uniqueIdentifier(currentState.revision);
-        resolve({ request: currentState.request, revision: nextRevision });
-        return {
-          isLoading: true,
-          revision: nextRevision,
-        };
-      });
-    });
-
-  fetch(request, revision) {
-    const { ...props } = this.props;
-    const { name, ids, query, options, dataStore } = props;
-    const { value } = this.state;
+function Resource({ children, ...props }) {
+  const context = useResource(props);
 
-    if (this.isUnmounted) {
-      return;
-    }
-
-    const meta = new Meta({ ...value.meta });
-    const signal = new AbortSignal();
-    this.abortSignal = signal;
-
-    const callback = (error, done, data) => {
-      if (this.isUnmounted) return;
-      this.setState((currentState) => {
-        if (request !== currentState.request || revision !== currentState.revision) return null;
-
-        if (error != null) {
-          return {
-            isLoading: false,
-            value: {
-              ...currentState.value,
-              error,
-              isIncomplete: false,
-            },
-          };
-        }
-
-        const { data: prevData, ...prevContext } = currentState.value;
-        const { data: emptyData, ...emptyValue } = getEmptyValue(props, request, revision, false);
-        const context = {
-          ...emptyValue,
-          meta: meta.commit(prevContext.meta),
-          isIncomplete: !done,
-          isInitial: currentState.isInitial && !done,
-        };
-
-        return {
-          isLoading: !done,
-          value: {
-            ...context,
-            data: dataStore.recycleItems(
-              dataStore.transition(data, prevData, context, prevContext),
-              prevData,
-              context,
-              prevContext,
-            ),
-          },
-        };
-      });
-    };
-
-    dataStore.continuousGet(name, ids, query, options, meta, callback, signal);
-  }
-
-  render() {
-    const { children, ...rest } = this.props;
-    const { request, isLoading, value } = this.state;
-    if (value.dataStore == null) return null;
-    const contextValue = {
-      ...value,
-      isLoading,
-      isStale: request !== value.request,
-      notify: this.notify,
-    };
-    const plugins = Array.isArray(value.dataStore.resourcePlugins)
-      ? value.dataStore.resourcePlugins
-      : [];
-    const renderProvider = (context) => (
-      <ResourceContext.Provider value={context}>{children}</ResourceContext.Provider>
-    );
-    return plugins.reduceRight((next, Plugin) => {
-      if (Plugin == null) return next;
-      return (context) => (
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        <Plugin {...rest} context={context}>
-          {next}
-        </Plugin>
-      );
-    }, renderProvider)(contextValue);
-  }
+  return <ResourceContext.Provider value={context}>{children}</ResourceContext.Provider>;
 }
 
 Resource.propTypes = {
@@ -239,11 +22,7 @@ Resource.propTypes = {
    */
   name: PropTypes.string.isRequired,
   /**
-   * IDs to be queried (in place of query)
-   */
-  ids: PropTypes.array,
-  /**
-   * Query filter (in place of ids)
+   * Query
    */
   query: PropTypes.any,
   /**
@@ -251,29 +30,18 @@ Resource.propTypes = {
    */
   empty: PropTypes.bool,
   /**
-   * DataStore options for requests
+   * DataProvider options for requests
    */
   options: PropTypes.object,
   /**
-   * DataStore to be used for requests
+   * DataProvider to be used for requests
    */
-  dataStore: dataStorePropType.isRequired,
+  dataProvider: dataProviderPropType.isRequired,
   /**
-   * Whether stale data should be retained during the next request - this only applies if neither dataStore nor name have changed, unless set to "very"
+   * Whether stale data should be retained during the next request - this only applies if neither dataProvider nor name have changed, unless set to "very"
    */
   persistent: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['very'])]),
   children: PropTypes.node,
 };
 
-/* eslint-disable react/jsx-props-no-spreading */
-const withContext = (ChildComponent) => {
-  const WithContext = (props) => (
-    <ConfigContext.Consumer>
-      {({ dataStore }) => <ChildComponent dataStore={dataStore} {...props} />}
-    </ConfigContext.Consumer>
-  );
-  return WithContext;
-};
-/* eslint-enable react/jsx-props-no-spreading */
-
-export default withContext(Resource);
+export default Resource;

package/src/context.js

@@ -1,11 +1,11 @@
-import React, { useContext } from 'react';
+import React from 'react';
 
 const noop = () => {};
 
 export const ConfigContext = React.createContext({});
 ConfigContext.displayName = 'ConfigContext';
-export const useConfigContext = () => useContext(ConfigContext);
+export const useConfigContext = () => React.useContext(ConfigContext);
 
 export const ResourceContext = React.createContext({ data: [], notify: noop });
 ResourceContext.displayName = 'ResourceContext';
-export const useResourceContext = () => useContext(ResourceContext);
+export const useResourceContext = () => React.useContext(ResourceContext);

package/src/createPlugin.js

@@ -1,18 +1,18 @@
-import DataStore from './DataStore';
+import DataProvider from './DataProvider';
 
 function createPlugin(plugin) {
   if (typeof plugin !== 'function') throw new Error('No valid plugin definition specified');
-  return (dataStoreClass) => {
-    if (!Object.prototype.isPrototypeOf.call(DataStore, dataStoreClass)) {
+  return (dataProviderClass) => {
+    if (!Object.prototype.isPrototypeOf.call(DataProvider, dataProviderClass)) {
       // eslint-disable-next-line no-console
       console.error(
-        'A plugin should be given a derivative of the DataStore class as its first parameter',
+        'A plugin should be given a derivative of the DataProvider class as its first parameter',
       );
     }
-    const result = plugin(class extends dataStoreClass {});
+    const result = plugin(class extends dataProviderClass {});
     if (result == null) {
       throw new Error(
-        'A plugin is expected to return a derivative of the DataStore class but returned nothing',
+        'A plugin is expected to return a derivative of the DataProvider class but returned nothing',
       );
     }
     return result;

package/src/index.js

@@ -7,8 +7,7 @@ export { default as ChannelNotifier } from './ChannelNotifier';
 export { default as compose } from './compose';
 export { default as ConfigProvider } from './ConfigProvider';
 export { default as createPlugin } from './createPlugin';
-export { dataStorePropType, default as BaseDataStore, isDataStore } from './DataStore';
-export { default as DataStore } from './DefaultDataStore';
+export { dataProviderPropType, default as DataProvider, isDataProvider } from './DataProvider';
 export { default as Meta } from './Meta';
 export { default as Notifier } from './Notifier';
 export { default as Resource } from './Resource';

package/src/useResource.js

@@ -0,0 +1,208 @@
+import React from 'react';
+
+import AbortSignal from './AbortSignal';
+import { useConfigContext } from './context';
+import Meta from './Meta';
+import uniqueIdentifier from './uniqueIdentifier';
+
+/**
+ * Makes data from an DataProvider available.
+ * If not explicitly specified, necessary configuration is taken from the nearest <ConfigProvider>.
+ * The provided DataProvider must not be replaced.
+ */
+function useResource(props) {
+  const {
+    name,
+    query,
+    empty,
+    options,
+    dataProvider: dataProviderProp,
+    persistent,
+    ...rest
+  } = props;
+
+  const configContext = useConfigContext();
+  const currentDataProvider = dataProviderProp || configContext.dataProvider;
+  const dataProvider = React.useMemo(() => currentDataProvider, []);
+  if (dataProvider == null) {
+    throw new Error(
+      'Unmet requirement: The DataProvider for the useResource hook is missing - Check your ConfigContext provider and the dataProvider property',
+    );
+  }
+  if (dataProvider !== currentDataProvider) {
+    throw new Error(
+      'Constant violation: The DataProvider provided to the useResource hook must not be replaced - Check your ConfigContext provider and the dataProvider property',
+    );
+  }
+
+  const comparator = { name, query, empty, options };
+  const [state, setState] = React.useState(() => {
+    const request = uniqueIdentifier();
+    const revision = uniqueIdentifier();
+    return {
+      comparator,
+      request,
+      revision,
+      isLoading: !empty,
+      value: {
+        name,
+        query,
+        options,
+        request,
+        revision,
+        data: [],
+        meta: {},
+        error: undefined,
+        isEmpty: empty,
+        isIncomplete: !empty,
+        isInitial: !empty,
+      },
+      persistent,
+    };
+  });
+  const {
+    comparator: prevComparator,
+    request,
+    revision,
+    isLoading,
+    value,
+    persistent: prevPersistent,
+  } = state;
+
+  if (prevComparator !== comparator && !dataProvider.compareRequests(prevComparator, comparator)) {
+    setState((prevState) => {
+      const nextRequest = uniqueIdentifier(prevState.request);
+      const nextRevision = uniqueIdentifier(prevState.revision);
+      let isPersistent;
+      if (
+        prevState.value.meta.persistent === 'very' ||
+        (persistent === 'very' && prevState.persistent === 'very')
+      ) {
+        isPersistent = 'very';
+      } else if (prevState.value.meta.persistent || (persistent && prevState.persistent)) {
+        isPersistent = true;
+      }
+      const shouldValuePersist =
+        !empty &&
+        isPersistent &&
+        (isPersistent === 'very' || prevState.comparator.name === comparator.name);
+      return {
+        comparator,
+        request: nextRequest,
+        revision: nextRevision,
+        isLoading: !empty,
+        value: shouldValuePersist
+          ? prevState.value
+          : {
+              name,
+              query,
+              options,
+              request: nextRequest,
+              revision: nextRevision,
+              data: [],
+              meta: {},
+              error: undefined,
+              isEmpty: empty,
+              isIncomplete: !empty,
+              isInitial: !empty,
+            },
+        persistent,
+      };
+    });
+  } else if (prevPersistent !== persistent) {
+    setState((prevState) => ({ ...prevState, persistent }));
+  }
+
+  const notify = React.useCallback(
+    async () =>
+      new Promise((resolve) => {
+        setState((currentState) => {
+          if (currentState.empty) return currentState;
+          const nextRevision = uniqueIdentifier(currentState.revision);
+          resolve({ request: currentState.request, revision: nextRevision });
+          return { ...currentState, isLoading: true, revision: nextRevision };
+        });
+      }),
+    [],
+  );
+
+  // DataProvider events
+  React.useEffect(() => {
+    if (empty) return undefined;
+
+    const unsubscribe = dataProvider.subscribe(name, notify);
+    return unsubscribe;
+  }, [!empty, dataProvider, name, notify]);
+
+  React.useEffect(() => {
+    if (empty) return undefined;
+
+    const abortSignal = new AbortSignal();
+
+    const meta = new Meta({ ...value.meta });
+
+    const callback = (error, done, data) => {
+      setState((prevState) => {
+        if (request !== prevState.request || revision !== prevState.revision) return prevState;
+
+        if (error != null) {
+          return {
+            ...prevState,
+            isLoading: false,
+            value: {
+              ...prevState.value,
+              error,
+              isIncomplete: false,
+            },
+          };
+        }
+
+        const { data: prevData, ...prevContext } = prevState.value;
+        const context = {
+          name,
+          query,
+          options,
+          request,
+          revision,
+          meta: meta.commit(prevContext.meta),
+          error: undefined,
+          isEmpty: false,
+          isIncomplete: !done,
+          isInitial: prevState.isInitial && !done,
+        };
+
+        return {
+          isLoading: !done,
+          value: {
+            ...context,
+            data: dataProvider.recycleItems(
+              dataProvider.transition(data, prevData, context, prevContext),
+              prevData,
+              context,
+              prevContext,
+            ),
+          },
+        };
+      });
+    };
+
+    dataProvider.continuousGet(name, query, options, meta, callback, abortSignal);
+
+    return () => {
+      abortSignal.abort();
+    };
+  }, [request, revision]);
+
+  const isStale = request !== value.request;
+  const context = React.useMemo(
+    () => ({ ...value, dataProvider, isLoading, isStale, notify }),
+    [value, dataProvider, isLoading, isStale, notify],
+  );
+
+  const contextPlugins = Array.isArray(dataProvider.contextPlugins)
+    ? dataProvider.contextPlugins
+    : [];
+  return contextPlugins.reduce((result, fn) => fn(result, rest), context);
+}
+
+export default useResource;

package/lib/DefaultDataStore.js

@@ -1,93 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _objectHash = _interopRequireDefault(require("object-hash"));
-
-var _DataStore = _interopRequireDefault(require("./DataStore"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var DefaultDataStore = /*#__PURE__*/function (_BaseDataStore) {
-  _inherits(DefaultDataStore, _BaseDataStore);
-
-  var _super = _createSuper(DefaultDataStore);
-
-  function DefaultDataStore() {
-    _classCallCheck(this, DefaultDataStore);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(DefaultDataStore, [{
-    key: "recycleItemsUniqueIdentifier",
-    value: function recycleItemsUniqueIdentifier(item) {
-      return (0, _objectHash["default"])(item);
-    }
-  }, {
-    key: "recycleItemsIsUnchanged",
-    value: function recycleItemsIsUnchanged() {
-      return true;
-    }
-  }, {
-    key: "recycleItems",
-    value: function recycleItems(nextData, prevData) {
-      var _this = this;
-
-      var prevMapping = {};
-      prevData.forEach(function (item) {
-        var id = _this.recycleItemsUniqueIdentifier(item);
-
-        if (id != null) prevMapping[id] = item;
-      });
-      var result = nextData.map(function (nextItem) {
-        var id = _this.recycleItemsUniqueIdentifier(nextItem);
-
-        if (id != null && Object.prototype.hasOwnProperty.call(prevMapping, id)) {
-          var prevItem = prevMapping[id];
-          if (_this.recycleItemsIsUnchanged(nextItem, prevItem)) return prevItem;
-        }
-
-        return nextItem;
-      });
-
-      if (prevData.length === result.length && result.reduce(function (sum, item, i) {
-        return sum && Object.is(prevData[i], item);
-      }, true)) {
-        return prevData;
-      }
-
-      return result;
-    }
-  }]);
-
-  return DefaultDataStore;
-}(_DataStore["default"]);
-
-var _default = DefaultDataStore;
-exports["default"] = _default;