feat: transform 'styles' only in decorator

[wtho]

This PR is another implementation change in the transformation behavior. It is a proposal and open for discussion.

Motivation

See #254

Until now we transformed 'templateUrl', 'styleUrls' and 'styles'
everywhere they were assigned.

This even transformed code like this:
console.log({ styles: {...}}) => console.log({ styles: [] })

The new implementation of the AstTransformer only transforms property
assignments to 'styles' if it is placed inside a decorator.

templateUrl and styleUrls are still transformed everywhere if assigned to a string, as Angular might expect them to be an actual Angular-Template or CSS code. This will crash the tests, if they are passed to the @Component decorator.

Example

A new unit test explains the new implementation:

Untransformed:

  const assignmentsToNotBeTransformed = {
    styles: [{
      color: 'red'
    }]
  };

  const assignmentsToBeTransformed = {
    styleUrls: ['./some-styles.css'],
    templateUrl: './some-styles.css'
  };

Transformed:

var assignmentsToNotBeTransformed = {
    styles: [{
            color: 'red'
        }]
};
var assignmentsToBeTransformed = {
    styleUrls: [],
    template: require('./some-styles.css')
};

Caveats

There were always caveats and there still will be.

• This preset replaces styles wherever it decides they are not required. This design-decision was made due to the unit-test nature of jest. To test your styles, better use an e2e framework. The style stripping should speed up your tests, but might hinder you from testing applied styles.
• templateUrl and styleUrls are transformed anywhere in the code. This enables you to declare them somewhere in your unit tests and then plug them into a component, e. g. using

    TestBed.configureTestingModule({
      declarations: [
        AlertFollowComponent,
      ],
    }).overrideComponent(AlertFollowComponent, {
      set: {
        templateUrl: '../__mocks__/alert-follow-stub.component.html',
      },
    });

  At the same time, there will be side-effects on variables named templateUrl and styleUrls if you use them in a different context.

EDIT:

• The implementation lead to introduce more code in the ASTTransformer, this means, while it is more granular in its behavior, it is also more difficult to maintain.

Closes #254

[wtho]

Actually it might be smart to split them up into two transformers, didn't think about it earlier

[ahnpnl]

I think we should do benchmarking with this change as well.

[wtho]

Yeah!

I still definitely want to split it up before merging.

[wtho]

• Split the AstTransformers in two and implemented the more careful behavior for styles, it only gets removed in @Component-Decorators.
• Assignments with the names templateUrl and styleUrls will still be transformed anywhere.

Will fix the flatMap issue in the next days.

@ahnpnl do you have any suggestions how to approach the benchmarking?

[wtho]

• replaced flatMap with reduce in transformer
• added README and CHANGELOG notes
• added tests for styles
• rebased on top of master

[thymikee]

I think it's time for a build/ directory – ideally in a separate PR :)

[wtho]

Will start with that once this is done!

[wtho]

In last force-push (to 351e919), after @thymikee's approval I fixed minor issues (that I thought I pushed before):

• fixed CSS statements like body: { display: none } - removed :
• removed tests that test basic signatures (what TS does anyway)
• joined two filter assignments in StripStylesTransformer.ts
• replaced switch with single case by if

[thymikee]

@ahnpnl anything to add or can e merge it? :)

[ahnpnl]

LGTM 🎉