@depository/preact 0.56.0 → 0.60.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@depository/preact",
-  "version": "0.56.0",
+  "version": "0.60.0",
   "description": "Preact bindings for depository",
   "module": "./src/index.js",
   "exports": {
@@ -27,8 +27,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@depository/function-middleware": "^0.56.0",
-    "@depository/store": "^0.56.0",
+    "@depository/store": "^0.60.0",
     "htm": "^3.0.4",
     "jsdom": "^16.4.0",
     "mocha": "8.3.2",
@@ -44,5 +43,5 @@
   "engines": {
     "node": ">=12"
   },
-  "gitHead": "c02a1321c12494b8e511c13d3151d28503dadf46"
+  "gitHead": "4771e08871669abac3572dec98ff078aafc9f109"
 }

package/src/createBinding.js

@@ -1,18 +1,19 @@
 export const createBinding = ({ h, 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 = ({ h, 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({ children, store, ...other }, state) {

package/src/hooks/useData.js

@@ -3,10 +3,10 @@ import { useStore } from "./useStore.js";
 
 export const useData = (pathOrComputed) => {
   const store = useStore();
-  const observable = useMemo(() => store.observe(pathOrComputed), [
-    store,
-    pathOrComputed,
-  ]);
+  const observable = useMemo(
+    () => store.observe(pathOrComputed),
+    [store, pathOrComputed]
+  );
   const [value, setValue] = useState(observable.value);
 
   useLayoutEffect(() => {

package/src/hooks/useData.spec.js

@@ -1,7 +1,6 @@
 import unexpected from "unexpected";
 import unexpectedDom from "unexpected-dom";
 import { Store } from "@depository/store";
-import { functionMiddleware } from "@depository/function-middleware";
 import { StoreProvider, useData, useDispatch } from "./index.js";
 import { h, render } from "preact";
 import htm from "htm";
@@ -57,8 +56,6 @@ describe("useData", () => {
       b: 10,
     });
 
-    store.useMiddleware(functionMiddleware());
-
     render(
       html`<${StoreProvider} value=${store}><${Calculator} /><//>`,
       container

package/src/index.spec.js

@@ -1,7 +1,6 @@
 import unexpected from "unexpected";
 import unexpectedDom from "unexpected-dom";
 import { Store } from "@depository/store";
-import { functionMiddleware } from "@depository/function-middleware";
 import { StoreProvider, connect } from "./index.js";
 import { h, render } from "preact";
 import htm from "htm";
@@ -46,30 +45,40 @@ const Calculator = connect(
   }
 );
 
+const Quote = connect(
+  ({ id }) => ({ quote: `quote.${id}` }),
+  ({ quote }) => quote
+);
+
+const Quotes = connect(
+  { quoteId: "selectedQuote" },
+  ({ quoteId }) => html`<${Quote} id=${quoteId} />`
+);
+
 describe("preact", () => {
   let container, store;
 
   beforeEach(() => {
     container = document.createElement("div");
+  });
 
-    store = new Store({
-      a: 10,
-      b: 10,
-    });
-
-    store.useMiddleware(functionMiddleware());
+  const renderCalculator = () => {
+    store = new Store({ a: 10, b: 10 });
 
     render(
       html`<${StoreProvider} value=${store}><${Calculator} /><//>`,
       container
     );
-  });
+  };
 
   it("handles rendering paths and computeds", () => {
+    renderCalculator();
     expect(container, "queried for test id", "sum", "to have text", "10+10=20");
   });
 
   it("handles dispatching actions", async () => {
+    renderCalculator();
+
     const incrementButton = container.querySelector("[data-test-id=increment]");
     incrementButton.dispatchEvent(new CustomEvent("click"));
 
@@ -77,4 +86,34 @@ describe("preact", () => {
 
     expect(container, "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",
+      },
+    });
+
+    render(html`<${StoreProvider} value=${store}><${Quotes} /><//>`, container);
+  };
+
+  it("handles function bindings with changing props", async () => {
+    renderQuotes();
+
+    expect(
+      container,
+      "to have text",
+      "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(
+      container,
+      "to have text",
+      "The way to get started is to quit talking and begin doing. -Walt Disney"
+    );
+  });
 });