ember-container-query

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)

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)

Breaking changes

• Removed ember-test-selectors from dependencies1

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.

Features

• Updated ember-modifier to v41

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)

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.

Hi, everyone. You can expect the following changes in v2.0.0:

• Removed technical risk by migrating from ember-did-resize-modifier to ember-on-resize-modifier
• Dropped technical support for Node 10, Ember 3.16 LTS, and Ember 3.20 LTS
• Enable embroider-safe workflow in CI
• Improved demo app

Current plan for v2.0.0 release includes:

• Drop support for Node v10 and Ember v3.16 LTS
• Replace ember-did-resize-modifier with ember-on-resize-modifier
• Enable embroider-safe workflow in CI

The release of v2.0.0-alpha.0 will help me (and hopefully you) test backwards compatibility.

The patch release updates several development dependencies, including ember-source, to their latest version. It's planned to be the last 1.x release that allows supporting Node 10 and Ember 3.16 LTS.

This patch release updates ember-element-helper to v0.5.0 and checks in CI that ember-container-query is Embroider Safe. (Hopefully, the demo app for CI can pass Optimized Embroider Safe soon.)

The risk in upgrading ember-container-query from v1.1.7 to v1.1.8 should be between none and small.

Apologies for letting the weekly scheduled CI fail for 3 months... 😓 I fixed a couple of tests so that CI can pass once again. I'm hoping for a less brittle way to test container queries.

In this patch release, I made the following updates:

• Updated ember-source to v3.25.4
• Updated ember-qunit to v5.1.4
• Added Ember 3.24 LTS to ember-try scenario

Note: Ember 3.16 LTS has been unsupported since March 17, 2021. Since there may be developers who work on an app that is 3.16 or earlier, I will continue to include Ember 3.16 LTS in ember-try scenarios for some additional time. Please do take time now to update Ember in your app. 👍🏼

I made a few changes in this patch release:

• Upgraded ember-source to v3.23.1
• Upgraded ember-element-helper to v0.3.2
• Improved CI workflow (added ember-canary test scenario and upgraded percy/exec-action to v0.3.1)

The risk in upgrading ember-container-query from v1.1.5 to v1.1.6 should be between none and small.