lolmaus/ember-element-query

Element queries for Ember

ember-element-query's Issues

The info object should offer comparison utils such as gt, gte, lt, lte, eq

This would allow reducing this:

          <Configurator::Breadcrumbs
            @isCompact={{or (eq EQinfo.size "xxs") (eq EQinfo.size "xs") (eq EQinfo.size "s") (eq EQinfo.size "m")}}
          />

to this:

          <Configurator::Breadcrumbs
            @isCompact={{EQinfo.gte "m"}}
          />

Likely, the utils have to be helpers for this to work.

Make `eq-to()` and `eq-between()` non-inclusive on the right side

Jumps of unstyled content and test freezes from display none

1. When an element query element initially renders, it appears unstyled.
2. When display: none is applied to an element query element or any of its parents, Ember tests would pause forever because of ember-element-query test waiter.

Both issues are caused by the fact that the initial applying of element queries is asynchronous and channeled through ResizeObserver. Running the initial applying synchronously should fix them.

Details discovered by @simonihmig.

Support Embroider

Idk if it works currently or not, but ember-try scenarios should be added to test w/ Embroider. Running ember-cli-update should add those, as they are not part of the official addon boilerplate.

Make types public

window and Event are undefined in Ember Fastboot

Hi!

I find this library to be super helpful. Thanks for sharing it with the world!

I was experimenting with Ember Fastboot. Since Fastboot renders on the server, some browser functionality is missing. For example, window, document, and Event are not defined.

This leads to trouble when trying to setup the custom eq-update event in addon/trigger.js. Fastboot tries to define the new event and throws an error that prevents successful rendering.

To address this, I added some quick checks to make sure Event and window are defined.

export const event = (typeof Event !== 'undefined') ? new Event('eq-update') : null;

export default function trigger() {
  if (window && event) {
    return window.dispatchEvent(event);
  }
}

I'll open a PR in a moment. I hope that helps.

Thanks again.

gen-3: use nearestOfType instead of this.$().parents()

https://github.com/emberjs/ember.js/blob/02d36cb1e09823b47740aea30ba372592c5e55e9/packages/ember-views/lib/mixins/view_support.js#L33

Support IE11

IE11 crashes on new Event().

Must use a polyfill or a custom event dispatcher.

Add [eq] attribute to identify that eq has been applied

Integration tests sometimes finish before elemene queries are applied

This has never happened in this addon's own tests, but when used in an app, tests are flaky: sometimes element query attributes are applied before assertions execute, sometimes not.

CC @simonihmig

new npm release?

Currently I have github:lolmaus/ember-element-query in my package.json
Is there a reason the latest version hasn't been published to npm?

Allow customizing the component's root element

Sample implementation