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

src/app/template_helpers.ts

@@ -124,6 +124,23 @@ export function safeOutput(value: any): ReturnType<typeof toggler> {
   return toggler(safeKey, block);
 }
 
+let boundFunctions = new WeakMap();
+
+function bind(ctx: any, fn: Function): Function {
+  let component = ctx.__owl__.component;
+  let boundFnMap = boundFunctions.get(component);
+  if (!boundFnMap) {
+    boundFnMap = new WeakMap();
+    boundFunctions.set(component, boundFnMap);
+  }
+  let boundFn = boundFnMap.get(fn);
+  if (!boundFn) {
+    boundFn = fn.bind(component);
+    boundFnMap.set(fn, boundFn);
+  }
+  return boundFn;
+}
+
 export const UTILS = {
   withDefault,
   zero: Symbol("zero"),
@@ -137,4 +154,5 @@ export const UTILS = {
   toNumber,
   validateProps,
   safeOutput,
+  bind,
 };

src/compiler/code_generator.ts

@@ -975,10 +975,19 @@ export class CodeGenerator {
     // props
     const props: string[] = [];
     let hasSlotsProp = false;
-    for (let p in ast.props) {
-      const propName = /^[a-z_]+$/i.test(p) ? p : `'${p}'`;
-      props.push(`${propName}: ${this.captureExpression(ast.props[p]) || undefined}`);
-      if (p === "slots") {
+    for (let propName in ast.props) {
+      let propValue = this.captureExpression(ast.props[propName]) || undefined;
+      if (propName.includes(".")) {
+        let [name, suffix] = propName.split(".");
+        if (suffix === "bind") {
+          this.helpers.add("bind");
+          propName = name;
+          propValue = `bind(ctx, ${propValue})`;
+        }
+      }
+      propName = /^[a-z_]+$/i.test(propName) ? propName : `'${propName}'`;
+      props.push(`${propName}: ${propValue}`);
+      if (propName === "slots") {
         hasSlotsProp = true;
       }
     }