@depository/preact 0.54.0 → 0.58.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@depository/preact",
-  "version": "0.54.0",
+  "version": "0.58.0",
   "description": "Preact bindings for depository",
   "module": "./src/index.js",
   "exports": {
@@ -27,16 +27,14 @@
     "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",
     "preact": "^10.5.7",
-    "serve": "^11.3.2",
-    "simulate-events": "^1.0.0",
-    "unexpected": "12.0.0",
+    "serve": "^12.0.1",
+    "unexpected": "12.0.3",
     "unexpected-dom": "^4.18.0"
   },
   "peerDependencies": {
@@ -45,5 +43,5 @@
   "engines": {
     "node": ">=12"
   },
-  "gitHead": "ea8c27f90f70f8307139c669aee402299efce95d"
+  "gitHead": "0f1070ade2785e4c20b10e58cfba56fa12106733"
 }

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.spec.js

@@ -1,14 +1,10 @@
 import unexpected from "unexpected";
 import unexpectedDom from "unexpected-dom";
-import simulateEvents from "simulate-events";
 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";
 
-const simulate = simulateEvents.default;
-
 const delay = (timeout = 0) =>
   new Promise((resolve) => {
     setTimeout(resolve, timeout);
@@ -60,8 +56,6 @@ describe("useData", () => {
       b: 10,
     });
 
-    store.useMiddleware(functionMiddleware());
-
     render(
       html`<${StoreProvider} value=${store}><${Calculator} /><//>`,
       container
@@ -73,7 +67,8 @@ describe("useData", () => {
   });
 
   it("handles dispatching actions", async () => {
-    simulate(container.querySelector("[data-test-id=increment]"), "click");
+    const incrementButton = container.querySelector("[data-test-id=increment]");
+    incrementButton.dispatchEvent(new CustomEvent("click"));
 
     await delay();
 

package/src/index.spec.js

@@ -1,14 +1,10 @@
 import unexpected from "unexpected";
 import unexpectedDom from "unexpected-dom";
-import simulateEvents from "simulate-events";
 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";
 
-const simulate = simulateEvents.default;
-
 const delay = (timeout = 0) =>
   new Promise((resolve) => {
     setTimeout(resolve, timeout);
@@ -49,34 +45,75 @@ 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 () => {
-    simulate(container.querySelector("[data-test-id=increment]"), "click");
+    renderCalculator();
+
+    const incrementButton = container.querySelector("[data-test-id=increment]");
+    incrementButton.dispatchEvent(new CustomEvent("click"));
 
     await delay();
 
     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"
+    );
+  });
 });