Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed

Conversation

Projects
None yet
5 participants
@AndrewKushnir
Copy link
Contributor

AndrewKushnir commented Feb 22, 2019

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.

This PR resolves ticket FW-1096.

PR Type

What kind of change does this PR introduce?

  • Bugfix

Does this PR introduce a breaking change?

  • Yes
  • No

@AndrewKushnir AndrewKushnir requested a review from alxhub Feb 22, 2019

@AndrewKushnir AndrewKushnir requested a review from angular/fw-compiler as a code owner Feb 22, 2019

@ngbot ngbot bot added this to the needsTriage milestone Feb 22, 2019

@googlebot googlebot added the cla: yes label Feb 22, 2019

@alfaproject

This comment has been minimized.

Copy link
Contributor

alfaproject commented Feb 22, 2019

Why not just quote all of them and let the minifier do its job?

@alxhub
Copy link
Contributor

alxhub left a comment

Help me understand the impact of this more.

The unquoted keys are unquoted so the optimizer will rename them (just as it renames the actual input field on the class). What impact does quoting here have on this renaming? Is the assertion that any property which has special characters will not be renamed by the optimizer?

Should we consider forbidding input names that are not valid JS identifiers?

@AndrewKushnir AndrewKushnir force-pushed the AndrewKushnir:FW-1096_wrap_unsafe_keys branch from 3c2ce38 to 46edb29 Mar 2, 2019

* 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.
*/
const UNSAFE_OBJECT_KEY_NAME_REGEXP = /-/g;

This comment has been minimized.

Copy link
@trotyl

trotyl Mar 2, 2019

Contributor

Why - only? I can have whatever text value as property name like inputs: ['...foo:foo', ',,,bar:bar'].

This comment has been minimized.

Copy link
@alxhub

alxhub Mar 4, 2019

Contributor

Currently we're having problems with - in input names.

This is a temporary solution while we discuss what to do about this particular issue. Options include:

  1. adding some heuristic to decide whether a property will likely be accessed via minified (this.bar) or unminified (this.other-bar) references, and quoting the property mapping for Ivy accordingly.

  2. prohibiting the use of input names that aren't valid JS identifiers in the first place (which would be a breaking change).

@trotyl

This comment has been minimized.

Copy link
Contributor

trotyl commented Mar 2, 2019

Should we consider forbidding input names that are not valid JS identifiers?

@alxhub A class property can indeed be whatever* string or symbol:

class Foo {
  'a$b*c' = 42
  ['d@e!f'] = 84
  [mySymbol] = 21
}

*: Here only means any character, not special names like constructor.

As a top-goal of Ivy is to reduce compiler restriction and support any JavaScript usage when possible, I don't think this is a viable approach.

@trotyl

This comment has been minimized.

Copy link
Contributor

trotyl commented Mar 2, 2019

@alxhub Please also note that a property named in valid identifier may also be quoted:

class Foo {
    prop0 = 42;
    'prop1' = 42;
    ['prop2'] = 42;
}

In above case the quotes will be preserved in compilation result and thus not being minified by closure compiler.

The true fix should be dropping inputs/outputs in Component metadata (as originally designed for ES5 DSL which has been removed) and only supports @Input()/@Output() property decorators. Otherwise there's no way to understand whether or not the property is quoted (possibly defined in a non-Angular base class).

@alxhub

alxhub approved these changes Mar 4, 2019

AndrewKushnir added some commits Feb 22, 2019

fix(ivy): wrap "inputs" and "outputs" keys if they contain unsafe cha…
…racters

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.

@AndrewKushnir AndrewKushnir force-pushed the AndrewKushnir:FW-1096_wrap_unsafe_keys branch from 46edb29 to 654ba38 Mar 4, 2019

@AndrewKushnir

This comment has been minimized.

Copy link
Contributor Author

AndrewKushnir commented Mar 4, 2019

Thanks @trotyl and @alxhub for the input. I've added a TODO to indicate that this solution is a temporary one to avoid confusion. Thank you.

@AndrewKushnir

This comment has been minimized.

Copy link
Contributor Author

AndrewKushnir commented Mar 4, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.