Home

Awesome

ember-element-helper

Build Status

Dynamic element helper for Glimmer templates.

This addon provides a polyfill high fidelity reference implementation of RFC #389, including the proposed amendments in RFC PR #620.

Please note that while RFC #389 has been approved, it has not been implemented in Ember.js yet. As such, the feature is still subject to change based on implementation feedback.

When this feature is implemented in Ember.js, we will release a 1.0 version of this addon as a true polyfill for the feature, allowing the feature to be used on older Ember.js versions and be completely inert on newer versions where the official implementation is available.

Compatibility

Limitations

This implementation has the following known limitations:

Installation

ember install ember-element-helper

Usage

{{#let (element this.tagName) as |Tag|}}
  <Tag class="my-tag">hello world!</Tag>
{{/let}}

You can also pass around the result of invoking this helper into any components that accepts "contextual components" as arguments:

<MyComponent @tag={{element "span"}} />
{{!-- in my-component.hbs --}}
{{#let @tag as |Tag|}}
  <Tag class="my-tag">hello world!</Tag>
{{/let}}

{{!-- ...or more directly... --}}
<@tag class="my-tag">hello world!</@tag>

Single File Components

Using the (element) helper with first class component templates:

import { element } from 'ember-element-helper';

<template>
  {{#let (element @tagName) as |Tag|}}
    <Tag class="my-tag">hello world!</Tag>
  {{/let}}
</template>

Glint Usage in Classic Mode

In order to use a typed (element) helper in classic mode, you need to import the addon's glint template registry and extend your app's registry declaration as described in the Using Addons documentation:

import '@glint/environment-ember-loose';
import type EmberElementHelperRegistry from 'ember-element-helper/template-registry';

declare module '@glint/environment-ember-loose/registry' {
  export default interface Registry extends EmberElementHelperRegistry, /* other addon registries */ {
    // local entries
  }
}

Note: Glint itself is still under active development, and as such breaking changes might occur. Therefore, Glint support by this addon is also considered experimental, and not covered by our SemVer contract!

Typing your Components

When your component accepts an element with the (element) helper, you want to give this argument a proper type. Here is how:

import type { ElementSignature } from 'ember-element-helper';

interface YourComponentSignature<T extends string> {
  Element: HTMLSectionElement;
  Args: {
    element?: ElementSignature['Return'];
  };
}

When the @element argument influences the Element of your component:

import type { ElementSignature, ElementFromTagName } from 'ember-element-helper';

interface YourComponentSignature<T extends string> {
  Element: ElementFromTagName<T>;
  Args: {
    element?: ElementSignature<T>['Return'];
  };
}

When your component already uses an element for a given condition. When the condition isn't met, a fallback element is used. The fallback can even be provided from the outside. Here is the type:

import type { ElementSignature, ElementFromTagName } from 'ember-element-helper';

interface YourComponentSignature<
  T extends string = 'section'
> {
  Element: HTMLButtonElement | HTMLAnchorElement | ElementFromTagName<T>;
  Args: {
    element?: ElementSignature<T>['Return'];
  };
}

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.