fix(ivy): wrap "inputs" and "outputs" keys if they contain unsafe characters (#28919)

Prior to this change, keys in "inputs" and "outputs" objects generated by compiler were not checked against unsafe characters. As a result, in some cases the generated code was throwing JS error. Now we check whether a given key contains any unsafe chars and wrap it in quotes if needed.

PR Close #28919

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

@@ -13,6 +13,16 @@ import * as t from '../r3_ast';
 import {R3QueryMetadata} from './api';
 import {isI18nAttribute} from './i18n/util';
 
+/**
+ * Checks whether an object key contains potentially unsafe chars, thus the key should be wrapped in
+ * quotes. Note: we do not wrap all keys into quotes, as it may have impact on minification and may
+ * bot work in some cases when object keys are mangled by minifier.
+ *
+ * TODO(FW-1136): this is a temporary solution, we need to come up with a better way of working with
+ * inputs that contain potentially unsafe chars.
+ */
+const UNSAFE_OBJECT_KEY_NAME_REGEXP = /-/g;
+
 /** Name of the temporary to use during data binding */
 export const TEMPORARY_NAME = '_t';
 
@@ -92,7 +102,8 @@ function mapToExpression(
     minifiedName = declaredName;
     return {
       key: minifiedName,
-      quoted: false,
+      // put quotes around keys that contain potentially unsafe characters
+      quoted: UNSAFE_OBJECT_KEY_NAME_REGEXP.test(minifiedName),
       value: (keepDeclared && publicName !== declaredName) ?
           o.literalArr([asLiteral(publicName), asLiteral(declaredName)]) :
           asLiteral(publicName)