Clarity: [NG] Support AoT compilation

[youdz]

Select one ... (check one with "x")

[ ] bug
[x] feature request
[ ] enhancement

Expected behavior

Applications using Clarity components should be able to use AoT compilation.

Actual behavior

Some of the Clarity components cannot be compiled ahead of time, mostly because they modify HTML elements directly instead of going through the renderer.

Reproduction of behavior

Pretty hard to reproduce in a plunker...

Environment details

• Angular version: 2.0.X

• Clarity version: 0.7.0

• OS and version: all

• Browser: all

[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

[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!

[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" [e-mail] 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
https://github.com/vmware/clarity/issues/62#issuecomment-266107483, 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 :)

[jaffoneh]

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

[kucharzyk]

It looks like PR is ready.

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

[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.

[photostu]

Oh Fuck Yeah! ;-)

[github-actions[bot]]

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.