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
This commit is contained in:
Andrew Kushnir 2019-02-21 21:33:05 -08:00
parent 78adcfe0ee
commit aa57bdbf90
2 changed files with 34 additions and 1 deletions

View File

@ -2148,6 +2148,28 @@ describe('ngtsc behavioral tests', () => {
}); });
}); });
it('should wrap "inputs" and "outputs" keys if they contain unsafe characters', () => {
env.tsconfig({});
env.write(`test.ts`, `
import {Directive} from '@angular/core';
@Directive({
selector: '[somedir]',
inputs: ['input-track-type', 'inputTrackName'],
outputs: ['output-track-type', 'outputTrackName']
})
export class SomeDir {}
`);
env.driveMain();
const jsContents = env.getContents('test.js');
const inputsAndOutputs = `
inputs: { "input-track-type": "input-track-type", inputTrackName: "inputTrackName" },
outputs: { "output-track-type": "output-track-type", outputTrackName: "outputTrackName" }
`;
expect(trim(jsContents)).toContain(trim(inputsAndOutputs));
});
it('should compile programs with typeRoots', () => { it('should compile programs with typeRoots', () => {
// Write out a custom tsconfig.json that includes 'typeRoots' and 'files'. 'files' is necessary // Write out a custom tsconfig.json that includes 'typeRoots' and 'files'. 'files' is necessary
// because otherwise TS picks up the testTypeRoot/test/index.d.ts file into the program // because otherwise TS picks up the testTypeRoot/test/index.d.ts file into the program

View File

@ -13,6 +13,16 @@ import * as t from '../r3_ast';
import {R3QueryMetadata} from './api'; import {R3QueryMetadata} from './api';
import {isI18nAttribute} from './i18n/util'; 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 */ /** Name of the temporary to use during data binding */
export const TEMPORARY_NAME = '_t'; export const TEMPORARY_NAME = '_t';
@ -92,7 +102,8 @@ function mapToExpression(
minifiedName = declaredName; minifiedName = declaredName;
return { return {
key: minifiedName, 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) ? value: (keepDeclared && publicName !== declaredName) ?
o.literalArr([asLiteral(publicName), asLiteral(declaredName)]) : o.literalArr([asLiteral(publicName), asLiteral(declaredName)]) :
asLiteral(publicName) asLiteral(publicName)