[Custom Breakpoints] INTENT TO IMPLEMENT: new centralized media marshaller

[CaerusKaru]

Historically, Custom Breakpoints has been a sore spot for Angular Layout. It was difficult and confusing to configure, and in the end didn't always work. We have an entire tag now on the issue tracker dedicated just to custom breakpoint issues. So it's time for a new approach.

Previously, to add custom breakpoints you would have to do two things:

1. Create the breakpoints and register them with the library module
2. Create individual directives for each feature you wanted to extend

Unfortunately, due to the structure of our first-party directives, this wasn't easy, leads to performance drag, collisions, and bloat. This was because by extending our first-party directives, you essentially register two of the same directive, and one with a little bit extra. This is very much not ideal, but was a necessary evil due to the structure of our own implementation.

Our directives were implemented in such a way that each directive was responsible for listening to media queries and responding to them by processing their own inputs. Without extending first-party directives, you risk having two competing directives, each with a different idea of what breakpoint should be active at a given time. When you do extend those directives, you get the aforementioned bloat and sometimes a collision anyway between the two directives, depending on which processed the media query last.

So what's the solution? In short, the media query processing should be moved out of the individual directives. In the most straightforward structure, directives should be organized as follows:

1. The base directive, in charge of all common processing and utility methods
2. The selector directive (e.g. FlexDirective), in charge of all common processing for flex inputs
3. The breakpoint directive, in charge of registering and updating based on inputs that correspond to breakpoints

These would pair with a new centralized MediaQuery processor called the MediaMarshaller, which registers new breakpoints from directives, and then fires events to those directives when the breakpoint is triggered. Plain and simple.

This design is implemented in #900 for the flex directives, and will be extended to the grid and extended directives once the design is validated.

It is our hope that this brings the custom breakpoints story to a close for our users, providing a more streamlined API with which to work. An example implementation of a custom breakpoint directive in the new design is as follows (e.g. for flex-offset):

import {Directive} from '@angular/core';
import {FlexOffsetDirective} from '@angular/flex-layout';

const selector = `[fxFlexOffset.xxs], [fxFlexOffset.xxl]`;
const inputs = ['fxFlexOffset.xxs', 'fxFlexOffset.xxl'];

@Directive({selector, inputs})
export class ExtendFlexOffsetDirective extends FlexOffsetDirective {
	protected inputs = inputs;
}

EDIT: I thought this went without saying, but we would value any and all feedback on this design before we ship it!

[CaerusKaru]

Current size projects have the following tally for improvement:
• flex is down from 35.4KB to 23KB minified
• grid is down from 44.1KB to 22KB minified
• extended is down 23.23KB to 12KB minified
• core is down 29.68KB to 25KB minified (pending removal of deprecated APIs)

Total size reduction so far: 50.41KB minified

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}