feat(ivy): implement host bindings in JIT mode (#24479)

PR Close #24479

packages/compiler/src/compiler.ts

@@ -85,5 +85,5 @@ export {jitExpression} from './render3/r3_jit';
 export {R3DependencyMetadata, R3FactoryMetadata, R3ResolvedDependencyType} from './render3/r3_factory';
 export {compileNgModule, R3NgModuleMetadata} from './render3/r3_module_compiler';
 export {makeBindingParser, parseTemplate} from './render3/view/template';
-export {compileComponentFromMetadata, compileDirectiveFromMetadata} from './render3/view/compiler';
+export {compileComponentFromMetadata, compileDirectiveFromMetadata, parseHostBindings} from './render3/view/compiler';
 // This file only reexports content of the `src` folder. Keep it that way.

packages/compiler/src/render3/view/compiler.ts

@@ -445,3 +445,45 @@ function typeMapToExpressionMap(
       ([key, type]): [string, o.Expression] => [key, outputCtx.importExpr(type)]);
   return new Map(entries);
 }
+
+const HOST_REG_EXP = /^(?:(?:\[([^\]]+)\])|(?:\(([^\)]+)\)))|(\@[-\w]+)$/;
+
+// Represents the groups in the above regex.
+const enum HostBindingGroup {
+  // group 1: "prop" from "[prop]"
+  Property = 1,
+
+  // group 2: "event" from "(event)"
+  Event = 2,
+
+  // group 3: "@trigger" from "@trigger"
+  Animation = 3,
+}
+
+export function parseHostBindings(host: {[key: string]: string}): {
+  attributes: {[key: string]: string},
+  listeners: {[key: string]: string},
+  properties: {[key: string]: string},
+  animations: {[key: string]: string},
+} {
+  const attributes: {[key: string]: string} = {};
+  const listeners: {[key: string]: string} = {};
+  const properties: {[key: string]: string} = {};
+  const animations: {[key: string]: string} = {};
+
+  Object.keys(host).forEach(key => {
+    const value = host[key];
+    const matches = key.match(HOST_REG_EXP);
+    if (matches === null) {
+      attributes[key] = value;
+    } else if (matches[HostBindingGroup.Property] != null) {
+      properties[matches[HostBindingGroup.Property]] = value;
+    } else if (matches[HostBindingGroup.Event] != null) {
+      listeners[matches[HostBindingGroup.Event]] = value;
+    } else if (matches[HostBindingGroup.Animation] != null) {
+      animations[matches[HostBindingGroup.Animation]] = value;
+    }
+  });
+
+  return {attributes, listeners, properties, animations};
+}

packages/compiler/src/template_parser/binding_parser.ts

@@ -221,7 +221,7 @@ export class BindingParser {
 
   private _parseBinding(value: string, isHostBinding: boolean, sourceSpan: ParseSourceSpan):
       ASTWithSource {
-    const sourceInfo = sourceSpan.start.toString();
+    const sourceInfo = (sourceSpan && sourceSpan.start || '(unknown)').toString();
 
     try {
       const ast = isHostBinding ?
@@ -343,7 +343,7 @@ export class BindingParser {
   }
 
   private _parseAction(value: string, sourceSpan: ParseSourceSpan): ASTWithSource {
-    const sourceInfo = sourceSpan.start.toString();
+    const sourceInfo = (sourceSpan && sourceSpan.start || '(unknown').toString();
 
     try {
       const ast = this._exprParser.parseAction(value, sourceInfo, this._interpolationConfig);