[NG] Support AoT compilation about clarity

[jaffoneh]

Thanks everyone. This currently our top priority. We have a couple of things to resolve before we're able to make the move and we'll be able to provide better estimates beginning of next week. Stay tuned!

[mathisscott]

If the PR is approved and there isn't too much effort involved with the remaining SASS issue and code review changes, then it should be going into 0.8.0.

The plan is for 0.8.0 to drop next week. If all goes well, it will. If not, it will probably drop the week after.

[jaffoneh]

@photostu @jeeyun is actually working on getting a PR out there sometime this week!

[pratheekhegde]

I wish this gets resolved ASAP. AOT is a lifesaver sometimes.

[photostu]

+1 for needing this... angular-cli v beta.22-1 now has AOT turned on by default
Attempt to ng build with --aot and you will get the error Unexpected value 'ClarityModule' imported by the module 'AppModule'

[wodCZ]

Hello,
we are currently starting new project with Clarity and angular-seed and we are having troubles with i18n because of this.

Please, do you have an estimate on when AoT would be supported in ClarityNG?

Thanks!

[kucharzyk]

It will be great to have aot in Clarity - It looks like angular-cli will need aot compatibillity even without aot enabled (sic!)

[dragosrusu]

+1

[photostu]

This will help bundles sizes for sure, is there an open ticket anywhere to split up the CSS into modules? The CSS bundle for Clarity is really big

[dragosrusu]

Don't know if it helps. We created a sass helper for BEM that, unlike csstyle, perfectly binds to BEM doc; helped us a lot with current devops project. It also makes a distinction between a modifier and a state. We opensourced it so I could share the name and components some files for you to see how it would look. Of course, it's modularized and customizable on build (you can build the components based on selected app theme). Let me know if this is something of interest.

…

-- Kind regards, Dragos

On Dec 9, 2016 9:55 PM, "Stu Allen" ***@***.***> wrote: This will help bundles sizes for sure, is there an open ticket anywhere to split up the CSS into modules? The CSS bundle for Clarity is really big — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#62 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABJhM4Ozt0q87NKzkrPVpnuLG3n2NTzIks5rGbIkgaJpZM4KzHRY> .

[bytexro]

Here's the SASS helper: https://github.com/bytexro/xbem

And here's some sample file.

@charset "UTF-8";
@include block(selectbox) {
  position: relative;
  font-size: map-get($webc-selectbox, fontsize-text);

  @include element(button) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: space-around;
    @include flex($align: center);
    height: map-get($webc-selectbox, height-button);
    margin: 0;

    @include element(icon) {
      @include flex($justify: center, $align: center);
      background: {
        color:    transparent;
        image:    url('images/arrows.svg');
      }
    }
  }

  @include element(menu) {
    position: fixed;
    overflow: hidden;
    color: map-get($webc-selectbox, menu-color);
    background: {
      color: map-get($webc-selectbox, background-menu);
    }
    @include state(hidden) {
      display: none;
    }
  }
  @include element(list) {
    @include element(item) {
      @include flex($align: center);
      cursor: default;
      @include state(selected) {
        &::before {
          content: '✔';
        }
      }
    }
    @include element(label) {
      overflow: hidden;
      max-width: 80%;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    @include state(haslimit) {
      max-height: 240px;
      overflow-y: auto;
      &::-webkit-scrollbar-track-piece {
        background: transparent;
      }
    }
  }

  @include element(searchcontainer) {}
  @include element(search) {}
  @include state(alternative) {
    @include element(button) {
      background-color: map-get($webc-selectbox, background-menu);
      @include element(icon) {
        background-image: none;

        &::after {
          content: '▼';
          transform: scaleY(0.45);
          height: auto;
        }
      }
    }
  }

  @include state(ng-invalid, $is-angular-state: true) {
    @include element(button) {
      border-color: map-get($webc-selectbox, color-alert);
    }
  }
}

[photostu]

"We have a couple of things to resolve before we're able to make the move and we'll be able to provide better estimates beginning of next week. Stay tuned!"

Any updates? Thanks :)

[kucharzyk]

It looks like PR is ready.

Is there any estimated date for next release with this changes?

[photostu]

Oh Fuck Yeah! ;-)

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.