@depository/react 0.54.0 → 0.58.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@depository/react",
-  "version": "0.54.0",
+  "version": "0.58.0",
   "description": "React bindings for depository",
   "module": "./src/index.js",
   "exports": {
@@ -27,16 +27,15 @@
     "access": "public"
   },
   "devDependencies": {
-    "@depository/function-middleware": "^0.54.0",
-    "@depository/store": "^0.54.0",
+    "@depository/store": "^0.58.0",
     "htm": "^3.0.4",
     "jsdom": "^16.4.0",
     "mocha": "8.3.2",
     "mocha-dominate": "^2.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "serve": "^11.3.2",
-    "unexpected": "12.0.0",
+    "serve": "^12.0.1",
+    "unexpected": "12.0.3",
     "unexpected-dom": "^4.18.0",
     "unexpected-reaction": "^3.0.0"
   },
@@ -48,5 +47,5 @@
   "engines": {
     "node": ">=12"
   },
-  "gitHead": "ea8c27f90f70f8307139c669aee402299efce95d"
+  "gitHead": "0f1070ade2785e4c20b10e58cfba56fa12106733"
 }

package/src/createBinding.js

@@ -1,18 +1,19 @@
 export const createBinding = ({ createElement, Component, StoreContext }) => {
-  const connect = (functionbindings, ChildComponent) => {
+  const connect = (bindingOrFunction, ChildComponent) => {
     if (!ChildComponent) {
-      ChildComponent = functionbindings;
-      functionbindings = null;
+      ChildComponent = bindingOrFunction;
+      bindingOrFunction = null;
     }
 
+    const isFunctionBindings = typeof bindingOrFunction === "function";
+
     class Connected extends Component {
       constructor(props) {
         super(props);
 
-        const bindings =
-          typeof functionbindings === "function"
-            ? functionbindings(props)
-            : functionbindings;
+        const bindings = isFunctionBindings
+          ? bindingOrFunction(props)
+          : bindingOrFunction;
 
         const store = props.store;
 
@@ -20,21 +21,38 @@ export const createBinding = ({ createElement, Component, StoreContext }) => {
           return store.dispatch(action);
         };
 
-        this.observer = bindings && store.observe(bindings);
+        this._observable = bindings && store.observe(bindings);
 
-        this.state = this.observer ? this.observer.value : {};
+        this.state = this._observable ? this._observable.value : {};
       }
 
-      componentDidMount() {
-        if (this.observer) {
-          this.subscription = this.observer.subscribe((value) => {
-            this.setState(value);
+      _subscribe() {
+        this._subscription =
+          this._observable &&
+          this._observable.subscribe((data) => {
+            this.setState(data);
           });
-        }
+      }
+
+      componentDidMount() {
+        this._subscribe();
       }
 
       componentWillUnmount() {
-        this.subscription && this.subscription.unsubscribe();
+        this._subscription && this._subscription.unsubscribe();
+      }
+
+      componentDidUpdate() {
+        if (this._observable && isFunctionBindings) {
+          const bindings = bindingOrFunction(this.props);
+          const _observable = this.props.store.observe(bindings);
+          if (this._observable !== _observable) {
+            this._subscription.unsubscribe();
+            this._observable = _observable;
+            this._subscribe();
+            this.setState(this._observable.value);
+          }
+        }
       }
 
       render() {

package/src/index.spec.js

@@ -2,7 +2,6 @@ import unexpected from "unexpected";
 import unexpectedDom from "unexpected-dom";
 import unexpectedReaction from "unexpected-reaction";
 import { Store } from "@depository/store";
-import { functionMiddleware } from "@depository/function-middleware";
 import { StoreProvider, connect } from "./index.js";
 import { html } from "./html.js";
 
@@ -47,28 +46,36 @@ const Calculator = connect(
   }
 );
 
+const Quote = connect(
+  ({ id }) => ({ quote: `quote.${id}` }),
+  ({ quote }) => quote
+);
+
+const Quotes = connect(
+  { quoteId: "selectedQuote" },
+  ({ quoteId }) => html`<${Quote} id=${quoteId} />`
+);
+
 describe("react", () => {
   let store;
   let component;
 
-  beforeEach(() => {
-    store = new Store({
-      a: 10,
-      b: 10,
-    });
-
-    store.useMiddleware(functionMiddleware());
+  const renderCalculator = () => {
+    store = new Store({ a: 10, b: 10 });
 
     component = mount(
       html`<${StoreProvider} value=${store}><${Calculator} /><//>`
     );
-  });
+  };
 
   it("handles rendering paths and computeds", () => {
+    renderCalculator();
     expect(component, "queried for test id", "sum", "to have text", "10+10=20");
   });
 
   it("handles dispatching actions", async () => {
+    renderCalculator();
+
     simulate(component, {
       type: "click",
       target: "[data-test-id=increment]",
@@ -78,4 +85,34 @@ describe("react", () => {
 
     expect(component, "queried for test id", "sum", "to have text", "11+11=22");
   });
+
+  const renderQuotes = () => {
+    store = new Store({
+      selectedQuote: 0,
+      quote: {
+        0: "The greatest glory in living lies not in never falling, but in rising every time we fall. -Nelson Mandela",
+        1: "The way to get started is to quit talking and begin doing. -Walt Disney",
+      },
+    });
+
+    component = mount(html`<${StoreProvider} value=${store}><${Quotes} /><//>`);
+  };
+
+  it("handles function bindings with changing props", async () => {
+    renderQuotes();
+
+    expect(
+      component,
+      "to satisfy",
+      "The greatest glory in living lies not in never falling, but in rising every time we fall. -Nelson Mandela"
+    );
+
+    await store.dispatch({ payload: { selectedQuote: 1 } });
+
+    expect(
+      component,
+      "to satisfy",
+      "The way to get started is to quit talking and begin doing. -Walt Disney"
+    );
+  });
 });

package/src/useData.spec.js

@@ -2,7 +2,6 @@ import unexpected from "unexpected";
 import unexpectedDom from "unexpected-dom";
 import unexpectedReaction from "unexpected-reaction";
 import { Store } from "@depository/store";
-import { functionMiddleware } from "@depository/function-middleware";
 import { StoreProvider, useData, useDispatch } from "./index.js";
 import { html } from "./html.js";
 
@@ -56,8 +55,6 @@ describe("useData", () => {
       b: 10,
     });
 
-    store.useMiddleware(functionMiddleware());
-
     component = mount(
       html`<${StoreProvider} value=${store}><${Calculator} /><//>`
     );