@webkrafters/react-observable-context 0.0.2 → 0.0.3

package/README.md

@@ -10,13 +10,13 @@ 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 React-Observable-Context package exports only **2** modules namely: the **createContext** method and the **Provider** component.
 
-The `Provider` can immediately be used as-is anywhere the React-Observable-Context is required. No React::createContext(...) nor any other preparation is required.
+`createContext` is a zero-parameter funtion returning a store-bearing context. Pass the context to the React::useContext() parameter to obtain the context's `store`.
 
-The `useStore` returns the context `store` object for consuming the React-Observable-Context.
+The `Provider` can immediately be used as-is anywhere the React-Observable-Context is required. Supply the context to its `context` prop and the initial state to its `value` prop as is customary to React::Provider.
 
-The context `store` exposes **4** methods for interacting with the context namely:
+The context's `store` exposes **4** methods for interacting with the context's internal state namely:
 
 * **getState**: (selector?: (state: State) => any) => any
 
@@ -28,14 +28,21 @@ The context `store` exposes **4** methods for interacting with the context namel
 
 ## Usage
 
+<i><u>context.js</u></i>
+
+    import { createContext } from '@webkrafters/react-observable-context';
+	const ObservableContext = createContext();
+    export default ObservableContext;
+
 <i><u>tally-display.js</u></i>
 
-    import React, { useEffect, useState } from 'react';
-    import { useStore } from '@webkrafters/react-observable-context';
+    import React, { useContext, useEffect, useState } from 'react';
+
+	import ObservableContext from './context';
     
     const TallyDisplay = () => {
     
-	    const { getState, subscribe } = useStore();
+	    const { getState, subscribe } = useContext( ObservableContext );
     
 	    const [ , setUpdateTs ] = useState();
 	    
@@ -62,12 +69,13 @@ The context `store` exposes **4** methods for interacting with the context namel
 
 <i><u>editor.js</u></i>
 
-    import React, { useCallback, useEffect, useRef } from 'react';
-    import { useStore } from '@webkrafters/react-observable-context';
+    import React, { useCallback, useContext, useEffect, useRef } from 'react';
+
+	import ObservableContext from './context';
     
     const Editor = () => {
     
-	    const { setState } = useStore();
+	    const { setState } = useContext( ObservableContext );
     
 	    const priceInputRef = useRef();
 	    const colorInputRef = useRef();
@@ -114,12 +122,13 @@ The context `store` exposes **4** methods for interacting with the context namel
 
 <i><u>product-description.js</u></i>
 
-    import React, { useEffect, useState } from 'react';
-    import { useStore } from '@webkrafters/react-observable-context';
+    import React, { useContext, useEffect, useState } from 'react';
+
+	import ObservableContext from './context';
     
     const ProductDescription = () => {
     
-	    const store = useStore();
+	    const store = useContext( ObservableContext );
 	    
 	    const [ , setUpdateTs ] = useState();
 	    
@@ -145,12 +154,13 @@ The context `store` exposes **4** methods for interacting with the context namel
 
 <i><u>price-sticker.js</u></i>
 
-    import React, { useEffect, useState } from 'react'
-    import { useStore } from '@webkrafters/react-observable-context';
+    import React, { useContext, useEffect, useState } from 'react';
+
+	import ObservableContext from './context';
     
     const PriceSticker = () => {
     
-	    const store = useStore();
+	    const store = useContext( ObservableContext );
 	    
 	    const [ price, setPrice ] = useState(() => store.getState( s => s.price ));
     
@@ -174,6 +184,8 @@ The context `store` exposes **4** methods for interacting with the context namel
 
     import React, { useCallback, useEffect, useState } from 'react';
     import { Provider } from '@webkrafters/react-observable-context';
+
+	import ObservableContext from './context';
     
     import Editor from './editor';
     import PriceSticker from './price-sticker';
@@ -200,7 +212,7 @@ The context `store` exposes **4** methods for interacting with the context namel
 			    <div style={{ marginBottom: 10 }}>
 				    <label>$ <input onKeyUp={ overridePricing } placeholder="override price here..."/></label>
 			    </div>
-			    <Provider value={ state }>
+			    <Provider context={ ObservableContext } value={ state }>
 				    <div style={{
 					    borderBottom: '1px solid #333',
 					    marginBottom: 10,

package/dist/index.d.ts

@@ -1,22 +1,30 @@
 export class UsageError extends Error {
 }
-export function useStore<T_1 extends State>(): Store<T_1>;
+export function createContext<T extends State>(): import("react").Context<Store<T>>;
 /**
- * @type {import("react").Provider<T>}
+ * @type {import("react").FC<{
+ * 		children?: import("react").ReactNode,
+ * 		context: ObservableContext<T>,
+ * 		value: T
+ * }>}
  * @template {State} T
  */
-export const Provider: import("react").Provider<T>;
-export type ObservableContext<T_1 extends State> = import("react").Context<Store<T>>;
+export const Provider: import("react").FC<{
+    children?: import("react").ReactNode;
+    context: import("react").Context<Store<T>>;
+    value: T;
+}>;
+export type ObservableContext<T 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 Listener<T extends State> = (newValue: PartialState<T>, oldValue: PartialState<T>) => void;
 export type State = {
     [x: string]: any;
 };
-export type PartialState<T_1 extends State> = {
+export type PartialState<T extends State> = {
     [x: string]: any;
 } & { [K in keyof T]?: T[K]; };
-export type Selector<T_1 extends State> = (state: T) => any;
-export type Store<T_1 extends State> = {
+export type Selector<T extends State> = (state: T) => any;
+export type Store<T extends State> = {
     getState: (selector?: Selector<T>) => any;
     resetState: OptionalTask<VoidFunction>;
     setState: (changes: PartialState<T>) => void;

package/dist/index.js

@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useStore = exports.UsageError = exports.Provider = void 0;
+exports.createContext = 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 }; }
@@ -53,40 +53,43 @@ var defaultSelector = function defaultSelector(state) {
 };
 
 /**
- * @type {ObservableContext<T>}
+ * @returns {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);
+var createContext = function createContext() {
+  return /*#__PURE__*/(0, _react.createContext)({
+    getState: reportNonReactUsage,
+    resetState: reportNonReactUsage,
+    setState: reportNonReactUsage,
+    subscribe: reportNonReactUsage
+  });
 };
 
 /**
- * @type {import("react").Provider<T>}
+ * @type {import("react").FC<{
+ * 		children?: import("react").ReactNode,
+ * 		context: ObservableContext<T>,
+ * 		value: T
+ * }>}
  * @template {State} T
  */
-exports.useStore = useStore;
+exports.createContext = createContext;
 var Provider = function Provider(_ref) {
   var _ref$children = _ref.children,
     children = _ref$children === void 0 ? null : _ref$children,
+    context = _ref.context,
     value = _ref.value;
   var valueRef = (0, _react.useRef)(value);
+  /** @type {ObservableContext<T>} */
+  var _useState = (0, _react.useState)(context),
+    _useState2 = _slicedToArray(_useState, 1),
+    StoreContext = _useState2[0];
   /** @type {[Set<Listener<T>>, Function]} */
-  var _useState = (0, _react.useState)(function () {
+  var _useState3 = (0, _react.useState)(function () {
       return new Set();
     }),
-    _useState2 = _slicedToArray(_useState, 1),
-    listeners = _useState2[0];
+    _useState4 = _slicedToArray(_useState3, 1),
+    listeners = _useState4[0];
   /** @type {Listener<T>} */
   var onChange = function onChange(newValue, oldValue) {
     return listeners.forEach(function (listener) {
@@ -129,7 +132,7 @@ var Provider = function Provider(_ref) {
     return setState(value);
   }, [value]);
   /** @type {[Store<T>, Function]} */
-  var _useState3 = (0, _react.useState)(function () {
+  var _useState5 = (0, _react.useState)(function () {
       return {
         getState: getState,
         resetState: resetState,
@@ -137,8 +140,8 @@ var Provider = function Provider(_ref) {
         subscribe: subscribe
       };
     }),
-    _useState4 = _slicedToArray(_useState3, 1),
-    store = _useState4[0];
+    _useState6 = _slicedToArray(_useState5, 1),
+    store = _useState6[0];
   return /*#__PURE__*/_react["default"].createElement(StoreContext.Provider, {
     value: store
   }, children);

package/package.json

@@ -74,5 +74,5 @@
     "test:watch": "eslint --fix && jest --watchAll"
   },
   "types": "dist/index.d.ts",
-  "version": "0.0.2"
+  "version": "0.0.3"
 }