@webkrafters/react-observable-context 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Stephen Isienyi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,259 @@
+# React-Observable-Context
+
+Observable react context - prevents an automatic total component tree re-rendering at context change.
+
+<h4><u>Install</u></h4>
+
+npm i -S @webkrafters/react-hoc-memo
+
+npm install --save @webkrafters/react-hoc-memo
+
+## API
+
+The React-Observable-Context package exports only **2** modules namely: the **Provider** component and the **useStore** method.
+
+The `Provider` can immediately be used as-is anywhere the React-Observable-Context is required. No React::createContext(...) nor any other preparation is required.
+
+The `useStore` returns the context `store` object for consuming the React-Observable-Context.
+
+The context `store` exposes **4** methods for interacting with the context namely:
+
+* **getState**: (selector?: (state: State) => PartialState\<State\>) => PartialState\<State\>
+
+* **resetState**: VoidFunction // resets the state to the Provider latest `value` prop.
+
+* **setState**: (changes: PartialState\<State\>) => void
+
+* **subscribe**: (listener: (newValue: PartialState\<State\>, oldValue: PartialState\<State\>) => void) => ***UnsubscribeFunction***
+
+## Usage
+
+<i><u>tally-display.js</u></i>
+
+    import React, { useEffect, useState } from 'react';
+    import { useStore } from '@webkrafters/react-observable-context';
+    
+    const TallyDisplay = () => {
+    
+	    const { getState, subscribe } = useStore();
+    
+	    const [ , setUpdateTs ] = useState();
+	    
+	    useEffect(() => subscribe( newValue => {
+		    [ 'color', 'price', 'type' ].some( k => k in newValue ) &&
+		    setUpdateTs( Date.now() );
+	    }), []);
+	    
+	    useEffect(() => console.log( 'TallyDisplay component rendered.....' ));
+    
+	    return (
+		    <table>
+			    <tbody>
+				    <tr><td><label>Type:</label></td><td>{ getState( s => s.type ) }</td></tr>
+				    <tr><td><label>Color:</label></td><td>{ getState( s => s.color ) }</td></tr>
+				    <tr><td><label>Price:</label></td><td>{ getState( s => s.price ).toFixed( 2 ) }</td></tr>
+			    </tbody>
+			</table>
+		);
+    };
+    TallyDisplay.displayName = 'TallyDisplay';
+    
+    export default TallyDisplay;
+
+<i><u>editor.js</u></i>
+
+    import React, { useCallback, useEffect, useRef } from 'react';
+    import { useStore } from '@webkrafters/react-observable-context';
+    
+    const Editor = () => {
+    
+	    const { setState } = useStore();
+    
+	    const priceInputRef = useRef();
+	    const colorInputRef = useRef();
+	    const typeInputRef = useRef();
+	    
+	    const updatePrice = useCallback(() => {
+		    setState({ price: Number( priceInputRef.current.value ) });
+	    }, []);
+	    
+	    const updateColor = useCallback(() => {
+		    setState({ color: colorInputRef.current.value });
+	    }, []);
+	    
+	    const updateType = useCallback(() => {
+		    setState({ type: typeInputRef.current.value });
+	    }, []);
+	    
+	    useEffect(() => console.log( 'Editor component rendered.....' ));
+    
+	    return (
+		    <fieldset style={{ margin: '10px 0' }}>
+			    <legend>Editor</legend>
+			    <div style={{ margin: '10px 0' }}>
+				    <label>New Price: <input ref={ priceInputRef } /></label>
+				    { ' ' }
+				    <button onClick={ updatePrice }>update price</button>
+			    </div>
+			    <div style={{ margin: '10px 0' }}>
+				    <label>New Color: <input ref={ colorInputRef } /></label>
+				    { ' ' }
+				    <button onClick={ updateColor }>update color</button>
+			    </div>
+			    <div style={{ margin: '10px 0' }}>
+				    <label>New Type: <input ref={ typeInputRef } /></label>
+				    { ' ' }
+				    <button onClick={ updateType }>update type</button>
+			    </div>
+		    </fieldset>    
+	    );
+	};
+    Editor.displayName = 'Editor';
+    
+    export default Editor;
+
+<i><u>product-description.js</u></i>
+
+    import React, { useEffect, useState } from 'react';
+    import { useStore } from '@webkrafters/react-observable-context';
+    
+    const ProductDescription = () => {
+    
+	    const store = useStore();
+	    
+	    const [ , setUpdateTs ] = useState();
+	    
+	    useEffect(() => store.subscribe( newValue => {
+		    ( 'color' in newValue || 'type' in newValue ) &&
+		    setUpdateTs( Date.now() );
+	    } ), []);
+	    
+	    useEffect(() => console.log( 'ProductDescription component rendered.....' ));
+	    
+	    const color = store.getState( s => s.color );
+	    const type = store.getState( s => s.type );
+	    
+	    return (
+		    <div style={{ fontSize: 24 }}>
+			    <strong>Description:</strong> { color } { type }
+		    </div>
+	    );
+    };
+    ProductDescription.displayName = 'ProductDescription';
+    
+    export default ProductDescription;
+
+<i><u>price-sticker.js</u></i>
+
+    import React, { useEffect, useState } from 'react'
+    import { useStore } from '@webkrafters/react-observable-context';
+    
+    const PriceSticker = () => {
+    
+	    const store = useStore();
+	    
+	    const [ price, setPrice ] = useState(() => store.getState( s => s.price ));
+    
+	    useEffect(() => store.subscribe( newValue => {
+		    'price' in newValue && setPrice( newValue.price );
+	    } ), []);
+	    
+	    useEffect(() => console.log( 'PriceSticker component rendered.....' ));
+	    
+	    return (
+		    <div style={{ fontSize: 36, fontWeight: 800 }}>
+			    ${ price.toFixed( 2 ) }
+		    </div>
+	    );
+    };
+    PriceSticker.displayName = 'PriceSticker';
+    
+    export default PriceSticker;
+
+<i><u>product.js</u></i>
+
+    import React, { useCallback, useEffect, useState } from 'react';
+    import { Provider } from '@webkrafters/react-observable-context';
+    
+    import Editor from './editor';
+    import PriceSticker from './price-sticker';
+    import ProductDescription from './product-description';
+    import TallyDisplay from './tally-display';
+    
+    const Product = ({ type }) => {
+	    
+	    const [ state, setState ] = useState(() => ({
+		    color: 'Burgundy',
+		    price: 22.5,
+		    type
+	    }));
+	    
+	    useEffect(() => {
+		    setState({ type }); // use this to update only the changed state
+		    // setState({ ...state, type }); // this will reset the context internal state
+	    }, [ type ]);
+	    
+	    const overridePricing = useCallback( e => setState({ price: Number( e.target.value ) }), [] );
+	    
+	    return (
+		    <div>
+			    <div style={{ marginBottom: 10 }}>
+				    <label>$ <input onKeyUp={ overridePricing } placeholder="override price here..."/></label>
+			    </div>
+			    <Provider value={ state }>
+				    <div style={{
+					    borderBottom: '1px solid #333',
+					    marginBottom: 10,
+					    paddingBottom: 5
+				    }}>
+					    <Editor />
+					    <TallyDisplay />
+				    </div>
+				    <ProductDescription />
+				    <PriceSticker />
+			    </Provider>
+		    </div>
+	    );
+    };
+    Product.displayName = 'Product';
+    
+    export default Product;
+
+<i><u>app.js</u></i>
+
+    import React, { useCallback, useState } from 'react';
+    
+    import Product from './product';
+    
+    const App = () => {
+    
+	    const [ productType, setProductType ] = useState( 'Calculator' );
+    
+	    const updateType = useCallback( e => setProductType( e.target.value ), [] );
+    
+	    return (
+		    <div className="App">
+			    <h1>Demo</h1>
+			    <h2>A contrived product app.</h2>
+			    <div style={{ marginBottom: 10 }}>
+				    <label>Type: <input onKeyUp={ updateType } placeholder="override product type here..." /></label>
+			    </div>
+			    <Product type={ productType } />
+		    </div>
+	    );
+	    
+    };
+    App.displayName = 'App';
+    
+    export default App;
+
+<i><u>index.js</i></b>
+
+    import React from 'react';
+    import ReactDOM from 'react-dom';
+    import App from './app';
+    ReactDOM.render(<App />, document.getElementById('root'));
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+export class UsageError extends Error {
+}
+export function useStore<T_1 extends State>(): Store<T_1>;
+/**
+ * @type {import("react").Provider<T>}
+ * @template {State} T
+ */
+export const Provider: import("react").Provider<T>;
+export type ObservableContext<T_1 extends State> = import("react").Context<Store<T>>;
+export type OptionalTask<F = void> = F extends void ? () => never : F;
+export type Listener<T_1 extends State> = (newValue: PartialState<T>, oldValue: PartialState<T>) => void;
+export type State = {
+    [x: string]: any;
+};
+export type PartialState<T_1 extends State> = {
+    [x: string]: any;
+} & { [K in keyof T]?: T[K]; };
+export type Selector<T_1 extends State> = (state: T) => PartialState<T>;
+export type Store<T_1 extends State> = {
+    getState: (selector?: Selector<T>) => PartialState<T>;
+    resetState: OptionalTask<VoidFunction>;
+    setState: (changes: PartialState<T>) => void;
+    subscribe: (listener: Listener<T>) => Unsubscribe;
+};
+export type Unsubscribe = VoidFunction;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,182 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStore = exports.UsageError = exports.Provider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash.isempty"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+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 _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
+function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
+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 _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var UsageError = /*#__PURE__*/function (_Error) {
+  _inherits(UsageError, _Error);
+  var _super = _createSuper(UsageError);
+  function UsageError() {
+    _classCallCheck(this, UsageError);
+    return _super.apply(this, arguments);
+  }
+  return _createClass(UsageError);
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+/** @type {OptionalTask} */
+exports.UsageError = UsageError;
+var reportNonReactUsage = function reportNonReactUsage() {
+  throw new UsageError('Detected usage outside of this context\'s Provider component tree. Please apply the exported Provider component');
+};
+
+/**
+ * @type {(state: T) => PartialState<T>}
+ * @template {State} T
+ */
+var defaultSelector = function defaultSelector(state) {
+  return state;
+};
+
+/**
+ * @type {ObservableContext<T>}
+ * @template {State} T
+ */
+var StoreContext = /*#__PURE__*/(0, _react.createContext)({
+  getState: reportNonReactUsage,
+  resetState: reportNonReactUsage,
+  setState: reportNonReactUsage,
+  subscribe: reportNonReactUsage
+});
+
+/**
+ * @return {Store<T>}
+ * @template {State} T
+ */
+var useStore = function useStore() {
+  return (0, _react.useContext)(StoreContext);
+};
+
+/**
+ * @type {import("react").Provider<T>}
+ * @template {State} T
+ */
+exports.useStore = useStore;
+var Provider = function Provider(_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    value = _ref.value;
+  var valueRef = (0, _react.useRef)(value);
+  /** @type {[Set<Listener<T>>, Function]} */
+  var _useState = (0, _react.useState)(function () {
+      return new Set();
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    listeners = _useState2[0];
+  /** @type {Listener<T>} */
+  var onChange = function onChange(newValue, oldValue) {
+    return listeners.forEach(function (listener) {
+      return listener(newValue, oldValue);
+    });
+  };
+  /** @type {Store<T>["getState"]} */
+  var getState = (0, _react.useCallback)(function () {
+    var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSelector;
+    return selector(valueRef.current);
+  }, []);
+  /** @type {Store<T>["resetState"]} */
+  var resetState = (0, _react.useCallback)(function () {
+    return setState(value);
+  }, []);
+  /** @type {Store<T>["setState"]} */
+  var setState = (0, _react.useCallback)(function (changes) {
+    /** @type {PartialState<T>} */
+    var newChanges = {};
+    /** @type {PartialState<T>} */
+    var replacedValue = {};
+    for (var k in changes) {
+      if (valueRef.current[k] === changes[k]) {
+        continue;
+      }
+      replacedValue[k] = valueRef.current[k];
+      valueRef.current[k] = changes[k];
+      newChanges[k] = changes[k];
+    }
+    !(0, _lodash["default"])(newChanges) && onChange(newChanges, replacedValue);
+  }, []);
+  /** @type {Store<T>["subscribe"]} */
+  var subscribe = (0, _react.useCallback)(function (listener) {
+    listeners.add(listener);
+    return function () {
+      return listeners["delete"](listener);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    return setState(value);
+  }, [value]);
+  /** @type {[Store<T>, Function]} */
+  var _useState3 = (0, _react.useState)(function () {
+      return {
+        getState: getState,
+        resetState: resetState,
+        setState: setState,
+        subscribe: subscribe
+      };
+    }),
+    _useState4 = _slicedToArray(_useState3, 1),
+    store = _useState4[0];
+  return /*#__PURE__*/_react["default"].createElement(StoreContext.Provider, {
+    value: store
+  }, children);
+};
+exports.Provider = Provider;
+Provider.displayName = 'ObservableContext.Provider';
+
+/**
+ * @typedef {import("react").Context<Store<T>>} ObservableContext
+ * @template {State} T
+ */
+
+/**
+ * @typedef {F extends void ? () => never : F} OptionalTask
+ * @template [F=void]
+ */
+
+/**
+	@typedef {(newValue: PartialState<T>, oldValue: PartialState<T>) => void} Listener
+	@template {State} T
+ */
+/** @typedef {{[x:string]: *}} State */
+/**
+	@typedef {{[x:string]: *} & {[K in keyof T]?: T[K]}} PartialState
+	@template {State} T
+ */
+/**
+	@typedef {(state: T) => PartialState<T>} Selector
+	@template {State} T
+ */
+/**
+ * @typedef {{
+ *   getState: OptionalTask<(selector?: Selector<T>) => PartialState<T>>,
+ *   resetState: OptionalTask<VoidFunction>,
+ *   setState: OptionalTask<(changes: PartialState<T>) => void>,
+ *   subscribe: OptionalTask<(listener: Listener<T>) => Unsubscribe>
+ * }} Store
+	@template {State} T
+ */
+
+/** @typedef {VoidFunction} Unsubscribe */

package/index.js

@@ -0,0 +1 @@
+module.exports = require( './dist' );

package/package.json

@@ -0,0 +1,78 @@
+{
+  "author": "Stephen Isienyi <stephen.isienyi@webkrafting.com>",
+  "bugs": {
+    "url": "https://github.com/steveswork/react-observable-context/issues"
+  },
+  "contributors": [
+    "steveswork <stephen.isienyi@webkrafting.com> (https://github.com/steveswork)"
+  ],
+  "dependencies": {
+    "@types/react": "^18.0.17",
+    "lodash.isempty": "^4.4.0",
+    "react": "^18.2.0"
+  },
+  "description": "Observable react context - prevents an automatic total component tree tear-down and re-rendering during context updates.",
+  "devDependencies": {
+    "@babel/cli": "^7.17.0",
+    "@babel/core": "^7.12.10",
+    "@babel/node": "^7.12.10",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.18.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest-cli": "^24.3.0",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.5",
+    "eslint": "^7.15.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-standard": "^5.0.0",
+    "jest-cli": "^26.6.3",
+    "react-dom": "^18.2.0",
+    "react-performance-testing": "^2.0.0",
+    "typescript": "^4.8.2"
+  },
+  "files": [
+    "dist/index.js",
+    "dist/index.d.ts",
+    "index",
+    "package.json"
+  ],
+  "homepage": "https://github.com/steveswork/react-observable-context#readme",
+  "jest": {
+    "transform": {
+      "\\.[jt]sx?$": "babel-jest"
+    }
+  },
+  "keywords": [
+    "context",
+    "react-hooks",
+    "react-context",
+    "react",
+    "useContext"
+  ],
+  "license": "MIT",
+  "main": "index.js",
+  "name": "@webkrafters/react-observable-context",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/steveswork/react-observable-context.git"
+  },
+  "scripts": {
+    "build": "eslint --fix && rm -rf dist && babel src -d dist && npx -p typescript tsc",
+    "test": "eslint --fix && jest",
+    "test:watch": "eslint --fix && jest --watchAll"
+  },
+  "types": "dist/index.d.ts",
+  "version": "0.0.1"
+}