Bug fixes

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

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)

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

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

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.

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

Plan for v3.0.0 release includes:

• Drop technical support for Node 12 and Ember 3.24 LTS
• Add Ember 4.8 LTS to test matrix
• Replace @ember/render-modifiers with ember-modifier

The <ContainerQuery> component now relies on packages that will likely be maintained in the future (namely, ember-modifier).

From v1.0.0 to v2.1.0, updating @dataAttributePrefix or @features (both are uncommon use cases) would result in stale data attributes. This bug has been fixed.

Please note, v2.1.1 will be the last release version that supports Node 12 and Ember 3.24 LTS.

A rare minor release. 🎉 I have introduced TypeScript to start documenting the <ContainerQuery> component and {{cq-*}} helpers. In addition, the code for the demo app has been typed and refactored.

Finally, ember-on-resize-modifer has been updated to v1.1.0. This will remove deprecation messages that had appeared in v1.0.0.

Many thanks to @bertdeblock for prompt feedback.

Installing this patch release will fix the warning messages that you might have seen in an Embroider app:

WARNING in ./helpers/cq-aspect-ratio.js 1:0-103
export 'cqAspectRatio' (reexported as 'cqAspectRatio') was not found in '../node_modules/ember-container-query/helpers/cq-aspect-ratio' (possible exports: default)
 @ ./assets/build-time-monitor.js 155:13-53

WARNING in ./helpers/cq-height.js 1:0-92
export 'cqHeight' (reexported as 'cqHeight') was not found in '../node_modules/ember-container-query/helpers/cq-height' (possible exports: default)
 @ ./assets/build-time-monitor.js 158:13-47

WARNING in ./helpers/cq-width.js 1:0-90
export 'cqWidth' (reexported as 'cqWidth') was not found in '../node_modules/ember-container-query/helpers/cq-width' (possible exports: default)
 @ ./assets/build-time-monitor.js 161:13-46

The risk in upgrading ember-container-query from v2.0.1 to v2.0.2 should be between none and small.

Installing this patch release will fix the warning messages that you might have seen in an Embroider app:

WARNING in ./helpers/cq-aspect-ratio.js 1:0-103
export 'cqAspectRatio' (reexported as 'cqAspectRatio') was not found in '../node_modules/ember-container-query/helpers/cq-aspect-ratio' (possible exports: default)
 @ ./assets/build-time-monitor.js 155:13-53

WARNING in ./helpers/cq-height.js 1:0-92
export 'cqHeight' (reexported as 'cqHeight') was not found in '../node_modules/ember-container-query/helpers/cq-height' (possible exports: default)
 @ ./assets/build-time-monitor.js 158:13-47

WARNING in ./helpers/cq-width.js 1:0-90
export 'cqWidth' (reexported as 'cqWidth') was not found in '../node_modules/ember-container-query/helpers/cq-width' (possible exports: default)
 @ ./assets/build-time-monitor.js 161:13-46

ember-element-helper has also been updated from v0.6.0 to v0.6.1.

The risk in upgrading ember-container-query from v2.0.0 to v2.0.1 should be between none and small.