[IMP] component: add .bind suffix to props for easy binding

tests/components/__snapshots__/props.test.ts.snap

@@ -262,3 +262,49 @@ exports[`basics template string in prop 2`] = `
   }
 }"
 `;
+
+exports[`bound functions is referentially equal after update 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['props'].val);
+  }
+}"
+`;
+
+exports[`bound functions is referentially equal after update 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { bind } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {val: ctx['state'].val,fn: bind(ctx, ctx['someFunction'])}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`can bind function prop with bind suffix 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`child\`);
+  }
+}"
+`;
+
+exports[`can bind function prop with bind suffix 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { bind } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {doSomething: bind(ctx, ctx['doSomething'])}, key + \`__1\`, node, ctx);
+  }
+}"
+`;

tests/components/props.test.ts

@@ -1,6 +1,6 @@
-import { Component, mount, useState } from "../../src";
+import { Component, mount, onWillUpdateProps, useState } from "../../src";
 import { xml } from "../../src/tags";
-import { makeTestFixture, snapshotEverything } from "../helpers";
+import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
 let fixture: HTMLElement;
 
@@ -176,3 +176,53 @@ describe("basics", () => {
     await mount(Parent, fixture);
   });
 });
+
+test("can bind function prop with bind suffix", async () => {
+  class Child extends Component {
+    static template = xml`child`;
+    setup() {
+      this.props.doSomething(123);
+    }
+  }
+
+  let boundedThing: any = null;
+
+  class Parent extends Component {
+    static template = xml`<Child doSomething.bind="doSomething"/>`;
+    static components = { Child };
+
+    doSomething(val: number) {
+      expect(val).toBe(123);
+      boundedThing = this;
+    }
+  }
+
+  const parent = await mount(Parent, fixture);
+  expect(boundedThing).toBe(parent);
+  expect(fixture.innerHTML).toBe("child");
+});
+
+test("bound functions is referentially equal after update", async () => {
+  let isEqual = false;
+  class Child extends Component {
+    static template = xml`<t t-esc="props.val"/>`;
+    setup() {
+      onWillUpdateProps((nextProps: any) => {
+        isEqual = nextProps.fn === this.props.fn;
+      });
+    }
+  }
+
+  class Parent extends Component {
+    static template = xml`<Child val="state.val" fn.bind="someFunction"/>`;
+    static components = { Child };
+    state = useState({ val: 1 });
+    someFunction() {}
+  }
+
+  const parent = await mount(Parent, fixture);
+  parent.state.val = 3;
+  await nextTick();
+  expect(fixture.innerHTML).toBe("3");
+  expect(isEqual).toBe(true);
+});