[IMP] component: add support for t-on on compnents

src/compiler/code_generator.ts

@@ -217,6 +217,9 @@ export class CodeGenerator {
   translatableAttributes: string[] = TRANSLATABLE_ATTRS;
   ast: AST;
   staticCalls: { id: string; template: string }[] = [];
+  // todo: merge with staticCalls
+  // todo: add a setCodeValue function => 2 args, call addLine, use it instead of addlin
+  eventCatchers: { id: string; expr: string }[] = [];
   helpers: Set<string> = new Set();
 
   constructor(ast: AST, options: CodeGenOptions) {
@@ -265,6 +268,9 @@ export class CodeGenerator {
     for (let { id, template } of this.staticCalls) {
       mainCode.push(`const ${id} = getTemplate(${template});`);
     }
+    for (let { id, expr } of this.eventCatchers) {
+      mainCode.push(`const ${id} = ${expr};`);
+    }
 
     // define all blocks
     if (this.blocks.length) {
@@ -1178,6 +1184,23 @@ export class CodeGenerator {
     if (ast.isDynamic) {
       blockExpr = `toggler(${expr}, ${blockExpr})`;
     }
+
+    // event handling
+    if (ast.on) {
+      this.helpers.add("createCatcher");
+      let name = this.generateId("catcher");
+      let spec: any = {};
+      let handlers: any[] = [];
+      for (let ev in ast.on) {
+        let handlerId = this.generateId("hdlr");
+        let idx = handlers.push(handlerId) - 1;
+        spec[ev] = idx;
+        const handler = this.generateHandlerCode(ev, ast.on[ev]);
+        this.addLine(`let ${handlerId} = ${handler};`);
+      }
+      blockExpr = `${name}(${blockExpr}, [${handlers.join(",")}])`;
+      this.eventCatchers.push({ id: name, expr: `createCatcher(${JSON.stringify(spec)})` });
+    }
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockExpr, block, ctx);
   }

src/compiler/parser.ts

@@ -119,6 +119,7 @@ export interface ASTComponent {
   name: string;
   isDynamic: boolean;
   dynamicProps: string | null;
+  on: null | { [key: string]: string };
   props: { [name: string]: string };
   slots: { [name: string]: { content: AST; attrs?: { [key: string]: string }; scope?: string } };
 }
@@ -650,7 +651,6 @@ function parseTSetNode(node: Element, ctx: ParsingContext): AST | null {
 
 // Error messages when trying to use an unsupported directive on a component
 const directiveErrorMap = new Map([
-  ["t-on", "t-on is no longer supported on components. Consider passing a callback in props."],
   [
     "t-ref",
     "t-ref is no longer supported on components. Consider exposing only the public part of the component's API through a callback prop.",
@@ -684,13 +684,19 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
 
   const defaultSlotScope = node.getAttribute("t-slot-scope");
   node.removeAttribute("t-slot-scope");
+  let on: ASTComponent["on"] = null;
 
   const props: ASTComponent["props"] = {};
   for (let name of node.getAttributeNames()) {
     const value = node.getAttribute(name)!;
     if (name.startsWith("t-")) {
-      const message = directiveErrorMap.get(name.split("-").slice(0, 2).join("-"));
-      throw new Error(message || `unsupported directive on Component: ${name}`);
+      if (name.startsWith("t-on-")) {
+        on = on || {};
+        on[name.slice(5)] = value;
+      } else {
+        const message = directiveErrorMap.get(name.split("-").slice(0, 2).join("-"));
+        throw new Error(message || `unsupported directive on Component: ${name}`);
+      }
     } else {
       props[name] = value;
     }
@@ -755,7 +761,7 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
       }
     }
   }
-  return { type: ASTType.TComponent, name, isDynamic, dynamicProps, props, slots };
+  return { type: ASTType.TComponent, name, isDynamic, dynamicProps, props, slots, on };
 }
 
 // -----------------------------------------------------------------------------