[IMP] store: add 'deep' param to connect options

src/store.ts

@@ -270,6 +270,8 @@ function deepRevNumber<T extends Object>(o: T): number {
 
 export function connect(mapStateToProps, options: any = {}) {
   let hashFunction = options.hashFunction || null;
+  let deep = "deep" in options ? options.deep : true;
+  let defaultRevFunction = deep ? deepRevNumber : revNumber;
 
   return function(Comp) {
     return class extends Comp {
@@ -283,7 +285,7 @@ export function connect(mapStateToProps, options: any = {}) {
         this.__owl__.currentStoreProps = storeProps;
         if (!hashFunction) {
           if ("__owl__" in storeProps) {
-            hashFunction = s => deepRevNumber(s.storeProps);
+            hashFunction = s => defaultRevFunction(s.storeProps);
           } else {
             let areKeyObservable = false;
             for (let key in storeProps) {
@@ -293,7 +295,7 @@ export function connect(mapStateToProps, options: any = {}) {
             if (areKeyObservable) {
               hashFunction = function({ storeProps }) {
                 return Object.values(storeProps).reduce(
-                  (sum: number, val: any) => sum + deepRevNumber(val),
+                  (sum: number, val: any) => sum + defaultRevFunction(val),
                   0
                 );
               };

tests/__snapshots__/store.test.ts.snap

@@ -3,3 +3,11 @@
 exports[`connecting a component to store connecting a component works 1`] = `"<div></div>"`;
 
 exports[`connecting a component to store connecting a component works 2`] = `"<div><span>hello</span></div>"`;
+
+exports[`connecting a component to store deep and shallow connecting a component 1`] = `"<div><span>Kasteel</span></div>"`;
+
+exports[`connecting a component to store deep and shallow connecting a component 2`] = `"<div><span>Kasteel</span></div>"`;
+
+exports[`connecting a component to store deep and shallow connecting a component 3`] = `"<div><span>Bertinchamps</span></div>"`;
+
+exports[`connecting a component to store deep and shallow connecting a component 4`] = `"<div><span>Kasteel</span></div>"`;

tests/store.test.ts

@@ -100,7 +100,7 @@ describe("basic use", () => {
     const mutations = {
       inc({ state }) {
         return ++state.n;
-      },
+      }
     };
     const store = new Store({ state, mutations });
 
@@ -579,6 +579,53 @@ describe("connecting a component to store", () => {
     expect(fixture.innerHTML).toMatchSnapshot();
   });
 
+  test("deep and shallow connecting a component", async () => {
+    const state = { todos: [{ title: "Kasteel" }] };
+    const mutations = {
+      edit({ state }, title) {
+        state.todos[0].title = title;
+      }
+    };
+    function mapStateToProps(s) {
+      return { todos: s.todos };
+    }
+    const store = new Store({ state, mutations });
+
+    class App extends Component<any, any, any> {
+      inlineTemplate = `
+            <div>
+                <span t-foreach="props.todos" t-as="todo">
+                  <t t-esc="todo.title"/>
+                </span>
+            </div>`;
+    }
+
+    const DeepTodoApp = connect(
+      mapStateToProps,
+      { deep: true }
+    )(App);
+    const ShallowTodoApp = connect(
+      mapStateToProps,
+      { deep: false }
+    )(App);
+    (<any>env).store = store;
+    const deepTodoApp = new DeepTodoApp(env);
+    const shallowTodoApp = new ShallowTodoApp(env);
+
+    await deepTodoApp.mount(fixture);
+
+    const shallowFix = makeTestFixture();
+    await shallowTodoApp.mount(shallowFix);
+
+    expect(fixture.innerHTML).toMatchSnapshot();
+    expect(shallowFix.innerHTML).toMatchSnapshot();
+
+    store.commit("edit", "Bertinchamps");
+    await nextTick();
+    expect(fixture.innerHTML).toMatchSnapshot();
+    expect(shallowFix.innerHTML).toMatchSnapshot();
+  });
+
   test("connected child components with custom hooks", async () => {
     let steps: any = [];
     class Child extends Component<any, any, any> {