pocketbase-react 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -11,4 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Initial commit
 
 ### Changed
-- Readme Instructions and so on
+- Readme Instructions and so on
+- initialCollections now also "subscribe" instead of just "fetch" content once
+- Adjusted Rollup / Babel Config for use in React
+- Redux now toggles between localStorage / AsyncStorage

package/README.md

@@ -1,11 +1,14 @@
 PocketBase React SDK
 ======================================================================
+[![Npm package version](https://badgen.net/npm/v/pocketbase-react)](https://npmjs.com/package/pocketbase-react)
+
 Unofficial React SDK (React, React Native, Expo) for interacting with the [PocketBase JS SDK](https://github.com/pocketbase/js-sdk).
 
 
 - [Installation](#installation)
 - [Usage](#usage)
 - [Caveats](#caveats)
+- [Development](#development)
 
 
 ## Installation
@@ -125,3 +128,15 @@ DELETE
 const id = "SOME_ID";
 actions.delete(id);
 ```
+
+## Development
+
+By using
+```sh
+npm run build
+# or
+yarn build
+```
+You will get a folder called dist, which you can use to replace node_modules/pocketbase-react/dist in your React project.
+
+***Maybe someone finds a better way to integrate the package in development with a project***

package/dist/pocketbase-react.js

@@ -0,0 +1,492 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('redux'), require('@reduxjs/toolkit'), require('redux-persist'), require('react-redux'), require('@react-native-async-storage/async-storage'), require('pocketbase')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'redux', '@reduxjs/toolkit', 'redux-persist', 'react-redux', '@react-native-async-storage/async-storage', 'pocketbase'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PocketbaseReact = {}, global.React, global.redux, global.toolkit, global.reduxPersist, global.reactRedux, global.AsyncStorage, global.Pocketbase));
+})(this, (function (exports, React, redux, toolkit, reduxPersist, reactRedux, AsyncStorage, PocketBase) { 'use strict';
+
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+      Object.keys(e).forEach(function (k) {
+        if (k !== 'default') {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () { return e[k]; }
+          });
+        }
+      });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+  }
+
+  var React__namespace = /*#__PURE__*/_interopNamespace(React);
+  var AsyncStorage__default = /*#__PURE__*/_interopDefaultLegacy(AsyncStorage);
+  var PocketBase__default = /*#__PURE__*/_interopDefaultLegacy(PocketBase);
+
+  const SET_RECORDS = 'SET_RECORDS';
+  const ADD_RECORD = 'ADD_RECORD';
+  const ADD_RECORDS = 'ADD_RECORDS';
+  const UPDATE_RECORD = 'UPDATE_RECORD';
+  const DELETE_RECORD = 'DELETE_RECORD';
+  const DELETE_RECORDS = 'DELETE_RECORDS';
+
+  const setRecords = (key, payload) => ({
+    type: SET_RECORDS,
+    key,
+    payload
+  });
+
+  const addRecord = (key, payload) => ({
+    type: ADD_RECORD,
+    key,
+    payload
+  });
+
+  const addRecords = (key, payload) => ({
+    type: ADD_RECORDS,
+    key,
+    payload
+  });
+
+  const deleteRecord$1 = (key, payload) => ({
+    type: DELETE_RECORD,
+    key,
+    payload
+  });
+
+  const deleteRecords$1 = (key, payload) => ({
+    type: DELETE_RECORDS,
+    key,
+    payload
+  });
+
+  const updateRecord$1 = (key, payload) => ({
+    type: UPDATE_RECORD,
+    key,
+    payload
+  });
+
+  var records$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    setRecords: setRecords,
+    addRecord: addRecord,
+    addRecords: addRecords,
+    deleteRecord: deleteRecord$1,
+    deleteRecords: deleteRecords$1,
+    updateRecord: updateRecord$1
+  });
+
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
+  function appendRecord(record, records) {
+    return [...records, record];
+  }
+
+  function appendRecords(recordsToAppend, records) {
+    return [...records, ...recordsToAppend];
+  }
+
+  function updateRecord(record, records) {
+    return records.map(r => {
+      if (r.id === record.id) {
+        return record;
+      }
+
+      return r;
+    });
+  }
+
+  function deleteRecord(record, records) {
+    return records.filter(r => r.id !== record.id);
+  }
+
+  function deleteRecords(recordsToDelete, records) {
+    return records.filter(r => !recordsToDelete.includes(r));
+  }
+
+  const records = (state = {}, action) => {
+    var _state$action$key;
+
+    const list = (_state$action$key = state[action.key]) != null ? _state$action$key : [];
+
+    switch (action.type) {
+      case SET_RECORDS:
+        if (Array.isArray(action.payload)) {
+          return _extends({}, state, {
+            [action.key]: action.payload
+          });
+        }
+
+      case ADD_RECORD:
+        return _extends({}, state, {
+          [action.key]: appendRecord(action.payload, list)
+        });
+
+      case ADD_RECORDS:
+        return _extends({}, state, {
+          [action.key]: appendRecords(action.payload, list)
+        });
+
+      case DELETE_RECORD:
+        return _extends({}, state, {
+          [action.key]: deleteRecord(action.payload, list)
+        });
+
+      case DELETE_RECORDS:
+        return _extends({}, state, {
+          [action.key]: deleteRecords(action.payload, list)
+        });
+
+      case UPDATE_RECORD:
+        return _extends({}, state, {
+          [action.key]: updateRecord(action.payload, list)
+        });
+
+      default:
+        return state;
+    }
+  };
+
+  const appReducer = redux.combineReducers({
+    records: records
+  });
+
+  /** A function that accepts a potential "extra argument" value to be injected later,
+   * and returns an instance of the thunk middleware that uses that value
+   */
+  function createThunkMiddleware(extraArgument) {
+    // Standard Redux middleware definition pattern:
+    // See: https://redux.js.org/tutorials/fundamentals/part-4-store#writing-custom-middleware
+    var middleware = function middleware(_ref) {
+      var dispatch = _ref.dispatch,
+          getState = _ref.getState;
+      return function (next) {
+        return function (action) {
+          // The thunk middleware looks for any functions that were passed to `store.dispatch`.
+          // If this "action" is really a function, call it and return the result.
+          if (typeof action === 'function') {
+            // Inject the store's `dispatch` and `getState` methods, as well as any "extra arg"
+            return action(dispatch, getState, extraArgument);
+          } // Otherwise, pass the action down the middleware chain as usual
+
+
+          return next(action);
+        };
+      };
+    };
+
+    return middleware;
+  }
+
+  var thunk = createThunkMiddleware(); // Attach the factory function so users can create a customized version
+  // with whatever "extra arg" they want to inject into their thunks
+
+  thunk.withExtraArgument = createThunkMiddleware;
+  var thunk$1 = thunk;
+
+  const CustomStorage = {
+    getItem: async (_key, ..._args) => {
+      if (typeof document !== 'undefined') {
+        console.log("I'm on the web!");
+        return localStorage.getItem(_key);
+      } else if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
+        console.log("I'm in react-native");
+        return await AsyncStorage__default["default"].getItem(_key);
+      }
+    },
+    setItem: async (_key, _value, ..._args) => {
+      if (typeof document !== 'undefined') {
+        return localStorage.setItem(_key, _value);
+      } else if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
+        return await AsyncStorage__default["default"].setItem(_key, _value);
+      }
+    },
+    removeItem: async (_key, ..._args) => {
+      if (typeof document !== 'undefined') {
+        return localStorage.removeItem(_key);
+      } else if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
+        return await AsyncStorage__default["default"].removeItem(_key);
+      }
+    }
+  };
+  const persistConfig = {
+    key: 'root',
+    storage: CustomStorage
+  };
+  const reducer = toolkit.combineReducers({
+    reducer: reduxPersist.persistReducer(persistConfig, appReducer)
+  });
+  const store = toolkit.configureStore({
+    reducer,
+    middleware: [thunk$1]
+  });
+  const useAppDispatch = store.dispatch;
+  const useAppSelector = reactRedux.useSelector;
+  const persistor = reduxPersist.persistStore(store);
+
+  const useClientContext = () => {
+    const context = React.useContext(ClientContext);
+    return context;
+  };
+
+  const ContentContext = React.createContext(null);
+  const ContentProvider = props => {
+    const client = useClientContext();
+    const dispatch = useAppDispatch;
+    const [collections, _] = React__namespace.useState(props.collections || []);
+    const actions = {
+      subscribe: async collectionName => {
+        // save local that collectionName should be subscribed
+        await (client == null ? void 0 : client.realtime.subscribe(collectionName, event => {
+          switch (event.action) {
+            case 'create':
+              dispatch(addRecord(collectionName, event.record));
+              break;
+
+            case 'update':
+              dispatch(updateRecord$1(collectionName, event.record));
+              break;
+
+            case 'delete':
+              dispatch(deleteRecord$1(collectionName, event.record));
+              break;
+          }
+        }));
+      },
+      unsubscribe: collectionName => {
+        if (collectionName) {
+          client == null ? void 0 : client.realtime.unsubscribe(collectionName);
+        } else {
+          client == null ? void 0 : client.realtime.unsubscribe();
+        }
+      },
+      fetch: async collectionName => {
+        const records = await (client == null ? void 0 : client.records.getFullList(collectionName, 200));
+        dispatch(setRecords(collectionName, records));
+      },
+      create: async (collectionName, record) => {
+        await (client == null ? void 0 : client.records.create(collectionName, record));
+      },
+      update: async (collectionName, recordId, record) => {
+        await (client == null ? void 0 : client.records.update(collectionName, recordId, record));
+      },
+      delete: async (collectionName, recordId) => {
+        await (client == null ? void 0 : client.records.delete(collectionName, recordId));
+      }
+    };
+    React.useEffect(() => {
+      if (collections) {
+        collections.forEach(collectionName => {
+          actions.fetch(collectionName);
+          actions.subscribe(collectionName);
+        });
+      }
+
+      return () => actions.unsubscribe();
+    }, [collections]);
+    return /*#__PURE__*/React__namespace.createElement(ContentContext.Provider, {
+      value: actions
+    }, props.children);
+  };
+
+  const ClientContext = React.createContext(null);
+  const ClientProvider = props => {
+    return /*#__PURE__*/React__namespace.createElement(ClientContext.Provider, {
+      value: props.client
+    }, props.children);
+  };
+
+  function _typeof(obj) { 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); }
+
+  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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+  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 _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; }
+
+  var PersistGate =
+  /*#__PURE__*/
+  function (_PureComponent) {
+    _inherits(PersistGate, _PureComponent);
+
+    function PersistGate() {
+      var _getPrototypeOf2;
+
+      var _this;
+
+      _classCallCheck(this, PersistGate);
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(PersistGate)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+      _defineProperty(_assertThisInitialized(_this), "state", {
+        bootstrapped: false
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "_unsubscribe", void 0);
+
+      _defineProperty(_assertThisInitialized(_this), "handlePersistorState", function () {
+        var persistor = _this.props.persistor;
+
+        var _persistor$getState = persistor.getState(),
+            bootstrapped = _persistor$getState.bootstrapped;
+
+        if (bootstrapped) {
+          if (_this.props.onBeforeLift) {
+            Promise.resolve(_this.props.onBeforeLift()).finally(function () {
+              return _this.setState({
+                bootstrapped: true
+              });
+            });
+          } else {
+            _this.setState({
+              bootstrapped: true
+            });
+          }
+
+          _this._unsubscribe && _this._unsubscribe();
+        }
+      });
+
+      return _this;
+    }
+
+    _createClass(PersistGate, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this._unsubscribe = this.props.persistor.subscribe(this.handlePersistorState);
+        this.handlePersistorState();
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this._unsubscribe && this._unsubscribe();
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        {
+          if (typeof this.props.children === 'function' && this.props.loading) console.error('redux-persist: PersistGate expects either a function child or loading prop, but not both. The loading prop will be ignored.');
+        }
+
+        if (typeof this.props.children === 'function') {
+          return this.props.children(this.state.bootstrapped);
+        }
+
+        return this.state.bootstrapped ? this.props.children : this.props.loading;
+      }
+    }]);
+
+    return PersistGate;
+  }(React.PureComponent);
+
+  _defineProperty(PersistGate, "defaultProps", {
+    children: null,
+    loading: null
+  });
+
+  const PocketbaseContext = React.createContext(null);
+  const Pocketbase = props => {
+    const [client, setClient] = React__namespace.useState(null);
+    React.useEffect(() => {
+      const client = new PocketBase__default["default"](props.serverURL);
+      client.admins.authViaEmail(props.credentials.username, props.credentials.password).then(() => {
+        setClient(client);
+        console.log('Pocketbase client initialized');
+      });
+    }, [props.serverURL]);
+    return client ? /*#__PURE__*/React__namespace.createElement(ClientProvider, {
+      client: client
+    }, /*#__PURE__*/React__namespace.createElement(reactRedux.Provider, {
+      store: store
+    }, /*#__PURE__*/React__namespace.createElement(PersistGate, {
+      persistor: persistor
+    }, /*#__PURE__*/React__namespace.createElement(ContentProvider, {
+      collections: props.initialCollections
+    }, props.children)))) : null;
+  };
+
+  function useAppContent(collectionName, initialFetch = false) {
+    var _store$useAppSelector;
+
+    const records = (_store$useAppSelector = useAppSelector(state => state.reducer.records[collectionName])) != null ? _store$useAppSelector : [];
+    const context = React.useContext(ContentContext);
+    React.useEffect(() => {
+      if (initialFetch) {
+        context == null ? void 0 : context.fetch(collectionName);
+      }
+    }, [collectionName, initialFetch]);
+    const actions = {
+      subscribe: async () => await (context == null ? void 0 : context.subscribe(collectionName)),
+      unsubscribe: () => context == null ? void 0 : context.unsubscribe(collectionName),
+      refetch: async () => await (context == null ? void 0 : context.fetch(collectionName)),
+      create: async record => await (context == null ? void 0 : context.create(collectionName, record)),
+      update: async (id, record) => await (context == null ? void 0 : context.update(collectionName, id, record)),
+      delete: async id => await (context == null ? void 0 : context.delete(collectionName, id))
+    };
+    return {
+      records,
+      actions
+    };
+  }
+
+  exports.ADD_RECORD = ADD_RECORD;
+  exports.ADD_RECORDS = ADD_RECORDS;
+  exports.ClientContext = ClientContext;
+  exports.ClientProvider = ClientProvider;
+  exports.ContentContext = ContentContext;
+  exports.ContentProvider = ContentProvider;
+  exports.DELETE_RECORD = DELETE_RECORD;
+  exports.DELETE_RECORDS = DELETE_RECORDS;
+  exports.Pocketbase = Pocketbase;
+  exports.PocketbaseContext = PocketbaseContext;
+  exports.SET_RECORDS = SET_RECORDS;
+  exports.UPDATE_RECORD = UPDATE_RECORD;
+  exports.appReducer = appReducer;
+  exports.persistConfig = persistConfig;
+  exports.persistor = persistor;
+  exports.recordsAction = records$1;
+  exports.store = store;
+  exports.useAppContent = useAppContent;
+  exports.useAppDispatch = useAppDispatch;
+  exports.useAppSelector = useAppSelector;
+  exports.useClientContext = useClientContext;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

package/dist/pocketbase-react.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("redux"),require("@reduxjs/toolkit"),require("redux-persist"),require("react-redux"),require("@react-native-async-storage/async-storage"),require("pocketbase")):"function"==typeof define&&define.amd?define(["exports","react","redux","@reduxjs/toolkit","redux-persist","react-redux","@react-native-async-storage/async-storage","pocketbase"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).PocketbaseReact={},e.React,e.redux,e.toolkit,e.reduxPersist,e.reactRedux,e.AsyncStorage,e.Pocketbase)}(this,(function(e,t,r,n,o,a,i,c){"use strict";function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var l=s(t),d=u(i),p=u(c);const f="SET_RECORDS",y="ADD_RECORD",b="ADD_RECORDS",v="UPDATE_RECORD",h="DELETE_RECORD",m="DELETE_RECORDS",g=(e,t)=>({type:f,key:e,payload:t}),E=(e,t)=>({type:y,key:e,payload:t}),R=(e,t)=>({type:h,key:e,payload:t}),O=(e,t)=>({type:v,key:e,payload:t});var _=Object.freeze({__proto__:null,setRecords:g,addRecord:E,addRecords:(e,t)=>({type:b,key:e,payload:t}),deleteRecord:R,deleteRecords:(e,t)=>({type:m,key:e,payload:t}),updateRecord:O});function k(){return k=Object.assign?Object.assign.bind():function(e){for(var t=1;arguments.length>t;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},k.apply(this,arguments)}function w(e,t){return[...t,e]}function C(e,t){return[...t,...e]}function S(e,t){return t.map((t=>t.id===e.id?e:t))}function D(e,t){return t.filter((t=>t.id!==e.id))}function P(e,t){return t.filter((t=>!e.includes(t)))}const x=r.combineReducers({records:(e={},t)=>{var r;const n=null!=(r=e[t.key])?r:[];switch(t.type){case f:if(Array.isArray(t.payload))return k({},e,{[t.key]:t.payload});case y:return k({},e,{[t.key]:w(t.payload,n)});case b:return k({},e,{[t.key]:C(t.payload,n)});case h:return k({},e,{[t.key]:D(t.payload,n)});case m:return k({},e,{[t.key]:P(t.payload,n)});case v:return k({},e,{[t.key]:S(t.payload,n)});default:return e}}});function j(e){return function(t){var r=t.dispatch,n=t.getState;return function(t){return function(o){return"function"==typeof o?o(r,n,e):t(o)}}}}var A=j();A.withExtraArgument=j;var T=A;const I={key:"root",storage:{getItem:async(e,...t)=>"undefined"!=typeof document?(console.log("I'm on the web!"),localStorage.getItem(e)):"undefined"!=typeof navigator&&"ReactNative"===navigator.product?(console.log("I'm in react-native"),await d.default.getItem(e)):void 0,setItem:async(e,t,...r)=>"undefined"!=typeof document?localStorage.setItem(e,t):"undefined"!=typeof navigator&&"ReactNative"===navigator.product?await d.default.setItem(e,t):void 0,removeItem:async(e,...t)=>"undefined"!=typeof document?localStorage.removeItem(e):"undefined"!=typeof navigator&&"ReactNative"===navigator.product?await d.default.removeItem(e):void 0}},L=n.combineReducers({reducer:o.persistReducer(I,x)}),q=n.configureStore({reducer:L,middleware:[T]}),U=q.dispatch,z=a.useSelector,M=o.persistStore(q),N=()=>t.useContext(V),B=t.createContext(null),F=e=>{const r=N(),n=U,[o,a]=l.useState(e.collections||[]),i={subscribe:async e=>{await(null==r?void 0:r.realtime.subscribe(e,(t=>{switch(t.action){case"create":n(E(e,t.record));break;case"update":n(O(e,t.record));break;case"delete":n(R(e,t.record))}})))},unsubscribe:e=>{e?null==r||r.realtime.unsubscribe(e):null==r||r.realtime.unsubscribe()},fetch:async e=>{const t=await(null==r?void 0:r.records.getFullList(e,200));n(g(e,t))},create:async(e,t)=>{await(null==r?void 0:r.records.create(e,t))},update:async(e,t,n)=>{await(null==r?void 0:r.records.update(e,t,n))},delete:async(e,t)=>{await(null==r?void 0:r.records.delete(e,t))}};return t.useEffect((()=>(o&&o.forEach((e=>{i.fetch(e),i.subscribe(e)})),()=>i.unsubscribe())),[o]),l.createElement(B.Provider,{value:i},e.children)},V=t.createContext(null),W=e=>l.createElement(V.Provider,{value:e.client},e.children);function G(e){return G="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},G(e)}function H(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function J(e,t){for(var r=0;t.length>r;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function K(e,t){return!t||"object"!==G(t)&&"function"!=typeof t?X(e):t}function Q(e){return Q=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},Q(e)}function X(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function Y(e,t){return Y=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},Y(e,t)}function Z(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var $=function(e){function t(){var e,r;H(this,t);for(var n=arguments.length,o=Array(n),a=0;n>a;a++)o[a]=arguments[a];return Z(X(r=K(this,(e=Q(t)).call.apply(e,[this].concat(o)))),"state",{bootstrapped:!1}),Z(X(r),"_unsubscribe",void 0),Z(X(r),"handlePersistorState",(function(){r.props.persistor.getState().bootstrapped&&(r.props.onBeforeLift?Promise.resolve(r.props.onBeforeLift()).finally((function(){return r.setState({bootstrapped:!0})})):r.setState({bootstrapped:!0}),r._unsubscribe&&r._unsubscribe())})),r}var r,n,o;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&Y(e,t)}(t,e),r=t,(n=[{key:"componentDidMount",value:function(){this._unsubscribe=this.props.persistor.subscribe(this.handlePersistorState),this.handlePersistorState()}},{key:"componentWillUnmount",value:function(){this._unsubscribe&&this._unsubscribe()}},{key:"render",value:function(){return"function"==typeof this.props.children?this.props.children(this.state.bootstrapped):this.state.bootstrapped?this.props.children:this.props.loading}}])&&J(r.prototype,n),o&&J(r,o),t}(t.PureComponent);Z($,"defaultProps",{children:null,loading:null});const ee=t.createContext(null);e.ADD_RECORD=y,e.ADD_RECORDS=b,e.ClientContext=V,e.ClientProvider=W,e.ContentContext=B,e.ContentProvider=F,e.DELETE_RECORD=h,e.DELETE_RECORDS=m,e.Pocketbase=e=>{const[r,n]=l.useState(null);return t.useEffect((()=>{const t=new p.default(e.serverURL);t.admins.authViaEmail(e.credentials.username,e.credentials.password).then((()=>{n(t),console.log("Pocketbase client initialized")}))}),[e.serverURL]),r?l.createElement(W,{client:r},l.createElement(a.Provider,{store:q},l.createElement($,{persistor:M},l.createElement(F,{collections:e.initialCollections},e.children)))):null},e.PocketbaseContext=ee,e.SET_RECORDS=f,e.UPDATE_RECORD=v,e.appReducer=x,e.persistConfig=I,e.persistor=M,e.recordsAction=_,e.store=q,e.useAppContent=function(e,r=!1){var n;const o=null!=(n=z((t=>t.reducer.records[e])))?n:[],a=t.useContext(B);return t.useEffect((()=>{r&&(null==a||a.fetch(e))}),[e,r]),{records:o,actions:{subscribe:async()=>await(null==a?void 0:a.subscribe(e)),unsubscribe:()=>null==a?void 0:a.unsubscribe(e),refetch:async()=>await(null==a?void 0:a.fetch(e)),create:async t=>await(null==a?void 0:a.create(e,t)),update:async(t,r)=>await(null==a?void 0:a.update(e,t,r)),delete:async t=>await(null==a?void 0:a.delete(e,t))}}},e.useAppDispatch=U,e.useAppSelector=z,e.useClientContext=N,Object.defineProperty(e,"__esModule",{value:!0})}));

package/{dist/esm → es}/context/Pocketbase.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import PocketBase from 'pocketbase/dist/pocketbase.cjs';
-import { AsyncStorageStatic } from '@react-native-async-storage/async-storage';
+import PocketBase from 'pocketbase';
 export declare const PocketbaseContext: React.Context<PocketBase | null>;
 export declare type PocketbaseProviderProps = {
     children: React.ReactNode;
@@ -10,6 +9,5 @@ export declare type PocketbaseProviderProps = {
         password: string;
     };
     initialCollections?: string[];
-    storage: AsyncStorageStatic;
 };
 export declare const Pocketbase: (props: PocketbaseProviderProps) => JSX.Element | null;

package/es/context/Pocketbase.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { createContext, useEffect } from 'react';
+import PocketBase from 'pocketbase';
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import * as store from '../store/store';
+import { ClientProvider } from './client';
+import { ContentProvider } from './content';
+export const PocketbaseContext = createContext(null);
+export const Pocketbase = props => {
+  const [client, setClient] = React.useState(null);
+  useEffect(() => {
+    const client = new PocketBase(props.serverURL);
+    client.admins.authViaEmail(props.credentials.username, props.credentials.password).then(() => {
+      setClient(client);
+      console.log('Pocketbase client initialized');
+    });
+  }, [props.serverURL]);
+  return client ? /*#__PURE__*/React.createElement(ClientProvider, {
+    client: client
+  }, /*#__PURE__*/React.createElement(Provider, {
+    store: store.store
+  }, /*#__PURE__*/React.createElement(PersistGate, {
+    persistor: store.persistor
+  }, /*#__PURE__*/React.createElement(ContentProvider, {
+    collections: props.initialCollections
+  }, props.children)))) : null;
+};

package/{dist/cjs → es}/context/client.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import PocketBase from 'pocketbase/dist/pocketbase.cjs';
+import PocketBase from 'pocketbase';
 export declare const ClientContext: React.Context<PocketBase | null>;
 export declare type ClientProviderProps = {
     children: React.ReactNode;

package/es/context/client.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createContext } from 'react';
+export const ClientContext = createContext(null);
+export const ClientProvider = props => {
+  return /*#__PURE__*/React.createElement(ClientContext.Provider, {
+    value: props.client
+  }, props.children);
+};

package/es/context/content.js

@@ -0,0 +1,67 @@
+import * as store from '../store/store';
+import * as React from 'react';
+import { createContext, useEffect } from 'react';
+import { useClientContext } from '../hooks/useClientContext';
+import { recordsAction } from '../store/actions';
+export const ContentContext = createContext(null);
+export const ContentProvider = props => {
+  const client = useClientContext();
+  const dispatch = store.useAppDispatch;
+  const [collections, _] = React.useState(props.collections || []);
+  const actions = {
+    subscribe: async collectionName => {
+      // save local that collectionName should be subscribed
+      await (client == null ? void 0 : client.realtime.subscribe(collectionName, event => {
+        switch (event.action) {
+          case 'create':
+            dispatch(recordsAction.addRecord(collectionName, event.record));
+            break;
+
+          case 'update':
+            dispatch(recordsAction.updateRecord(collectionName, event.record));
+            break;
+
+          case 'delete':
+            dispatch(recordsAction.deleteRecord(collectionName, event.record));
+            break;
+
+          default:
+            break;
+        }
+      }));
+    },
+    unsubscribe: collectionName => {
+      if (collectionName) {
+        client == null ? void 0 : client.realtime.unsubscribe(collectionName);
+      } else {
+        client == null ? void 0 : client.realtime.unsubscribe();
+      }
+    },
+    fetch: async collectionName => {
+      const records = await (client == null ? void 0 : client.records.getFullList(collectionName, 200));
+      dispatch(recordsAction.setRecords(collectionName, records));
+    },
+    create: async (collectionName, record) => {
+      await (client == null ? void 0 : client.records.create(collectionName, record));
+    },
+    update: async (collectionName, recordId, record) => {
+      await (client == null ? void 0 : client.records.update(collectionName, recordId, record));
+    },
+    delete: async (collectionName, recordId) => {
+      await (client == null ? void 0 : client.records.delete(collectionName, recordId));
+    }
+  };
+  useEffect(() => {
+    if (collections) {
+      collections.forEach(collectionName => {
+        actions.fetch(collectionName);
+        actions.subscribe(collectionName);
+      });
+    }
+
+    return () => actions.unsubscribe();
+  }, [collections]);
+  return /*#__PURE__*/React.createElement(ContentContext.Provider, {
+    value: actions
+  }, props.children);
+};