ember-bem-helpers

This addon provides BEM helpers for Ember.js applications.

This addon produces BEM classes based on Two Dashes style.

No mixins, no code in the component js/ts file needed. Works with template-only components.

Compatibility

- Ember.js v5.8 or above
- Embroider or ember-auto-import v2

Installation

``
ember install ember-bem-helpers
`

Usage

This addon provides two helpers out of the box: block-name and bem.

Usually you are supposed to use block-name once per component, on the top level of the component. However, nested usage is also supported.

Use bem helper everywhere you need to get a BEM class.

Here is a basic example:

`hbs
{{block-name "my-button"}}

class={{bem disabled=@isDisabled}}
disabled={{@isDisabled}}
type="button"
>
{{@label}}

`

Defining a block outside of the component

You can pass a variable to the block-name helper like this:

`hbs
{{block-name @externalBlockName}}
`

Why not modifier?

Modifiers are not run in FastBoot and you probably want your elements to have proper classes in a server-side rendered HTML.

How does it work?

This addon provides AST plugin which transforms block-name (which is actually not a real helper) to the {{#let}}{{/let}} block with blockName variable and injects it as the first argument to every bem helper usage.

So, the above basic example is transformed to the following:

`hbs
{{#let "my-button" as |blockName|}}
class={{bem blockName disabled=@isDisabled}}
disabled={{@isDisabled}}
type="button"
>
{{@label}}

{{/let}}
``

Contributing

See the Contributing guide for details.

Thanks!

This addon is based on the great addon ember-cli-bem by Nikita Gusarov.

License

This project is licensed under the MIT License.