Migrated to v2 addon format. Dropped technical support for Node 14 and Ember 3.28 LTS.

As of v4.0.0, ember-container-query is shown to be compatible with the strictest settings for Embroider, Glint, and <template>-tag.

Thanks to @buschtoens, @opatajoshua, @NullVoxPopuli, and @st-h for helping with development and providing feedback for the pre-release versions.

Summary of changes since v3.2.0

Breaking changes

• Migrated to v2 addon format (the consuming Ember app must have ember-auto-import@v2)
• Dropped technical support for Node 14 and Ember 3.28 LTS
• Removed the deprecated helpers {{cq-aspect-ratio}}, {{cq-height}}, and {{cq-width}}
• Updated ember-modifier to v4 ([email protected] is also allowed for now, but is considered to be deprecated in ember-container-query@v4)
• Removed ember-test-selectors from dependencies (a bug)

Features

• Migrated to v2 addon format
• Reexported types from modifiers/container-query.ts in index.ts

How you can consume types

// In [email protected]
import type { Dimensions } from 'ember-container-query/modifiers/container-query';
import { containerQuery } from 'ember-container-query';

// In [email protected]
import { containerQuery, type Dimensions } from 'ember-container-query';

Internal

• Updated docs-app to show examples of <template>-tag components
• Removed ember-css-modules from docs-app

v4.0.0-alpha.6

Thanks to @buschtoens.

Internal

I introduced embroider-css-modules to docs-app, in order to show that ember-container-query is (has long been) compatible with the strictest settings for Embroider.

Remaining tasks for v4.0.0 release

• Drop Node 14 and Ember 3.28 support (after April 30, 2023)

v4.0.0-alpha.5

Internal

I separated documentation from testing so that the ember-canary and embroider-optimized scenarios run in continuous integration (CI).

It's my aim to run the docs-app on the strictest settings for Embroider, so that end-developers can feel confident about using ember-container-query in their projects. (Currently, staticAddonTrees and staticComponents are turned off, not because of ember-container-query, but due to another addon.)

Remaining tasks for v4.0.0 release

• Drop Node 14 and Ember 3.28 support (after April 30, 2023)

v4.0.0-alpha.4

Breaking changes

• Removed ember-test-selectors from dependencies¹

^{1. See #163 for explanation.}

Migration Guide

If an end-developer consumed the test selector data-test-container-query directly for their tests, they will need to write the test selector explicitly:

{{! Before }}
<ContainerQuery
  @features={{hash ... }}
  as |CQ|
>
 ...
</ContainerQuery>

{{! After }}
<ContainerQuery
  @features={{hash ... }}
  data-test-container-query
  as |CQ|
>
 ...
</ContainerQuery>

However, testing the <ContainerQuery> component in the consuming project is not recommended. The migration shown above happens to work because of splattributes, which were to be used only for accessibility and styling. It's best if the consuming project trusts the component.

v4.0.0-alpha.3

Features

• Updated ember-modifier to v4¹

^{1. Your project may continue to depend on [email protected]. Note, ember-container-query@v4 assumes that ember-modifier@v4 is present (because it already requires ember-auto-import@v2), so there won't likely be a major release when the support for ember-modifier@v3 is dropped.}

Remaining tasks for v4.0.0 release

• Enable the ember-try scenarios ember-canary and embroider-optimized
• Drop Node 14 and Ember 3.28 support (after April 30, 2023)

v4.0.0-alpha.2

Bug fixes

• Types are available again. (reported in #158, fixed in #157)

v4.0.0-alpha.1

Features

• Converted ember-container-query to v2 addon format

Breaking changes

• The consuming app or addon must have ember-auto-import@v2.
• The deprecated helpers {{cq-aspect-ratio}}, {{cq-height}}, and {{cq-width}} have been removed. Please use {{aspect-ratio}}, {{height}}, and {{width}} instead.

Remaining tasks for v4.0.0 release

• Update ember-modifier to v4 (or widen the support by including ^3.2.7)
• Enable the ember-try scenarios ember-canary and embroider-optimized
• Drop Node 14 and Ember 3.28 support (after April 30, 2023)

Improved support for strict mode templates

Features

If your project allows strict mode (files with the extension .gjs or .gts), you can use the import path 'ember-container-query' (rather than the "true" path) to consume the addon. Thanks to @NullVoxPopuli for adding this feature.

// Component
import { ContainerQuery } from 'ember-container-query';

// Helpers
import { aspectRatio, height, width } from 'ember-container-query';

// Modifier
import { containerQuery } from 'ember-container-query';

If the project also supports Glint, you will benefit from the addon's types.

Deprecations (for v4)

In #146, the helpers were renamed in order to minimize the difference in names (syntax) between *.hbs and *.{gjs,gts} files. Please update the helper names in your templates (e.g. use find-and-replace-all).

Step	Find	Replace with
1	cq-aspect-ratio	aspect-ratio
2	cq-height	height
3	cq-width	width

The old helpers {{cq-aspect-ratio}}, {{cq-height}}, and {{cq-width}} will be removed in v4.0.0.

Improved support for Glint users

The types for ember-container-query and the demo app have been updated to support Glint.

⚠️ To consume the provided signatures, your project will need @glimmer/component with version 1.1.2 or higher. See Version Requirements for more information. (The version requirements do not apply for non-Glint users.)

Special thanks to @NullVoxPopuli for suggesting the feature and @denisclark, @gossi, and @buschtoens for helping me figure out how to narrow the QueryResults type.

Migrated to ember-modifier. Dropped technical support for Node 12 and Ember 3.24 LTS.

Summary of changes since v2

Breaking changes

• Dropped technical support for Node 12 and Ember 3.24 LTS

Features

• Introduced TypeScript
• Replaced @ember/render-modifiers with ember-modifier
• Extracted core logic into {{container-query}} modifier (allows you to query a container how you see fit)
• Added Ember 4.8 LTS to test matrix

Bug fixes

• Updating @dataAttributePrefix or @features would result in stale data attributes