ember-container-query 2.1.0 → 3.0.0-alpha.0

package/.stylelintcache

@@ -0,0 +1 @@
+[{"/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/navigation-menu.css":"1","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/album.css":"2","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/app.css":"3","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/dashboard.css":"4","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/form.css":"5","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/index.css":"6","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/application.css":"7","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/not-found.css":"8","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4.css":"9","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/page.css":"10","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/tracks/table.css":"11","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form.css":"12","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-1.css":"13","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/tracks/list.css":"14","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-5.css":"15","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-2.css":"16","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-3.css":"17","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/checkbox.css":"18","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-1/item.css":"19","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/field.css":"20","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/textarea.css":"21","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-2/stacked-chart.css":"22","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-3/tour-schedule.css":"23","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/information.css":"24","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4/memo.css":"25","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/input.css":"26","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-2/captions.css":"27","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-3/tour-schedule/responsive-image.css":"28","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4/memo/body.css":"29","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4/memo/actions.css":"30","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4/memo/header.css":"31"},{"size":323,"mtime":1656746523373,"hashOfConfig":"32"},{"size":892,"mtime":1656746523421,"hashOfConfig":"32"},{"size":1494,"mtime":1670927594478,"hashOfConfig":"32"},{"size":1846,"mtime":1656746523430,"hashOfConfig":"32"},{"size":82,"mtime":1656746523432,"hashOfConfig":"32"},{"size":36,"mtime":1670927594479,"hashOfConfig":"32"},{"size":980,"mtime":1656746523427,"hashOfConfig":"32"},{"size":1299,"mtime":1656746523434,"hashOfConfig":"32"},{"size":400,"mtime":1656746523408,"hashOfConfig":"32"},{"size":306,"mtime":1656746523386,"hashOfConfig":"32"},{"size":106,"mtime":1656746523378,"hashOfConfig":"32"},{"size":324,"mtime":1656746523380,"hashOfConfig":"32"},{"size":797,"mtime":1656746523388,"hashOfConfig":"32"},{"size":323,"mtime":1656746523376,"hashOfConfig":"32"},{"size":657,"mtime":1656746523418,"hashOfConfig":"32"},{"size":439,"mtime":1656746523393,"hashOfConfig":"32"},{"size":268,"mtime":1656746523400,"hashOfConfig":"32"},{"size":566,"mtime":1653552800391,"hashOfConfig":"32"},{"size":243,"mtime":1656746523391,"hashOfConfig":"32"},{"size":1630,"mtime":1656746523382,"hashOfConfig":"32"},{"size":375,"mtime":1653552800412,"hashOfConfig":"32"},{"size":267,"mtime":1656746523397,"hashOfConfig":"32"},{"size":1570,"mtime":1656746523403,"hashOfConfig":"32"},{"size":225,"mtime":1656746523384,"hashOfConfig":"32"},{"size":937,"mtime":1656746523410,"hashOfConfig":"32"},{"size":360,"mtime":1653552800408,"hashOfConfig":"32"},{"size":2101,"mtime":1656746523395,"hashOfConfig":"32"},{"size":159,"mtime":1656746523405,"hashOfConfig":"32"},{"size":493,"mtime":1656746523414,"hashOfConfig":"32"},{"size":701,"mtime":1656746523412,"hashOfConfig":"32"},{"size":888,"mtime":1656746523416,"hashOfConfig":"32"},"187t81u"]

package/.stylelintrc.js

@@ -0,0 +1,64 @@
+'use strict';
+
+/* eslint-disable-next-line n/no-unpublished-require */
+const { browsers } = require('./tests/dummy/config/targets');
+
+module.exports = {
+  extends: ['stylelint-config-standard'],
+  plugins: ['stylelint-no-unsupported-browser-features', 'stylelint-order'],
+  rules: {
+    /*
+      Customize plugins
+    */
+    'order/properties-order': [
+      [
+        // Defined by ember-css-modules
+        'composes',
+      ],
+      {
+        unspecified: 'bottomAlphabetical',
+      },
+    ],
+
+    'plugin/no-unsupported-browser-features': [
+      true,
+      {
+        browsers,
+        ignore: [
+          // grid-template-columns falsely identified as multicolumn
+          'multicolumn',
+        ],
+      },
+    ],
+
+    /*
+      Customize rules
+    */
+    'declaration-block-no-redundant-longhand-properties': [
+      true,
+      {
+        ignoreShorthands: ['grid-gap', 'grid-template'],
+      },
+    ],
+
+    'property-no-unknown': [
+      true,
+      {
+        ignoreProperties: [
+          // Defined by ember-css-modules
+          'composes',
+        ],
+      },
+    ],
+
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: [
+          // Defined by ember-css-modules
+          'global',
+        ],
+      },
+    ],
+  },
+};

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+## 3.0.0-alpha.0 (2022-12-13)
+
+### Breaking Change
+* [#135](https://github.com/ijlee2/ember-container-query/pull/135) Documented {{container-query}} modifier. Dropped support for Node 12 and Ember 3.24. ([@ijlee2](https://github.com/ijlee2))
+
+### Internal
+* [#138](https://github.com/ijlee2/ember-container-query/pull/138) Updated development dependencies ([@ijlee2](https://github.com/ijlee2))
+* [#137](https://github.com/ijlee2/ember-container-query/pull/137) Updated demo app ([@ijlee2](https://github.com/ijlee2))
+* [#136](https://github.com/ijlee2/ember-container-query/pull/136) Reinstalled ember-cli-typescript ([@ijlee2](https://github.com/ijlee2))
+* [#135](https://github.com/ijlee2/ember-container-query/pull/135) Documented {{container-query}} modifier. Dropped support for Node 12 and Ember 3.24. ([@ijlee2](https://github.com/ijlee2))
+* [#131](https://github.com/ijlee2/ember-container-query/pull/131) Remove ember-cli-typescript. Enable enableTypeScriptTransform instead. ([@ijlee2](https://github.com/ijlee2))
+
+### Documentation
+* [#137](https://github.com/ijlee2/ember-container-query/pull/137) Updated demo app ([@ijlee2](https://github.com/ijlee2))
+* [#135](https://github.com/ijlee2/ember-container-query/pull/135) Documented {{container-query}} modifier. Dropped support for Node 12 and Ember 3.24. ([@ijlee2](https://github.com/ijlee2))
+* [#134](https://github.com/ijlee2/ember-container-query/pull/134) Refactor tests ([@ijlee2](https://github.com/ijlee2))
+
+### Committers: 1
+- Isaac Lee ([@ijlee2](https://github.com/ijlee2))
+
+
+## 2.1.1 (2022-12-02)
+
+### Bug Fix
+* [#128](https://github.com/ijlee2/ember-container-query/pull/128) Replaced @ember/render-modifiers with ember-modifier ([@ijlee2](https://github.com/ijlee2))
+* [#126](https://github.com/ijlee2/ember-container-query/pull/126) Listed ember-test-selectors as a dependency ([@ijlee2](https://github.com/ijlee2))
+
+### Enhancement
+* [#128](https://github.com/ijlee2/ember-container-query/pull/128) Replaced @ember/render-modifiers with ember-modifier ([@ijlee2](https://github.com/ijlee2))
+
+### Internal
+* [#133](https://github.com/ijlee2/ember-container-query/pull/133) Addressed ember-modifier deprecations ([@ijlee2](https://github.com/ijlee2))
+* [#132](https://github.com/ijlee2/ember-container-query/pull/132) Updated dependencies to their latest version ([@ijlee2](https://github.com/ijlee2))
+* [#128](https://github.com/ijlee2/ember-container-query/pull/128) Replaced @ember/render-modifiers with ember-modifier ([@ijlee2](https://github.com/ijlee2))
+* [#125](https://github.com/ijlee2/ember-container-query/pull/125) Updated dependencies to their latest version ([@ijlee2](https://github.com/ijlee2))
+* [#124](https://github.com/ijlee2/ember-container-query/pull/124) Installed stylelint to help with maintaining the demo app ([@ijlee2](https://github.com/ijlee2))
+
+### Committers: 1
+- Isaac Lee ([@ijlee2](https://github.com/ijlee2))
+
+
 ## 2.1.0 (2022-06-03)
 
 ### Enhancement

package/LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2022
+Copyright (c) 2023 Isaac J. Lee
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/README.md

@@ -14,37 +14,10 @@ Open the [demo app](https://ember-container-query.netlify.app/) to see `ember-co
 Installation
 ------------------------------------------------------------------------------
 
-```
+```sh
 ember install ember-container-query
 ```
 
-<details>
-<summary>Use FastBoot? ⚠️</summary>
-
-This addon uses nullish coalescing operator `??`. If you use [FastBoot](https://github.com/ember-fastboot/ember-cli-fastboot) (with `Node < v14.0`) and only support [browsers that natively support `??`](https://v8.dev/features/nullish-coalescing#support), you will run into a build error:
-
-```bash
-/var/folders/2z/93zyyhx13rs879qr8rzyxrb40000gn/T/broccoli-689520dxo26a682Mz/out-529-broccoli_merge_trees/assets/vendor.js:121232
-  return this.args.features ?? {};
-                             ^
-SyntaxError: Unexpected token '?'
-```
-
-To prevent this, please make sure to add `node: 'current'` to your `config/targets.js` file.
-
-```javascript
-'use strict';
-
-const browsers = [ ... ];
-
-module.exports = {
-  browsers,
-  node: 'current'
-};
-```
-
-</details>
-
 
 Applications
 ------------------------------------------------------------------------------
@@ -137,6 +110,12 @@ The addon provides 1 Glimmer component and 3 helpers:
 - `{{cq-height}}`
 - `{{cq-width}}`
 
+Starting `v2.1.1`, the addon extracts the core logic into a modifier. This lets you opt out of using the provided component.
+
+- `{{container-query}}`
+
+Expand the items below to learn more about the API.
+
 
 <details>
 <summary><code>&lt;ContainerQuery&gt;</code></summary>
@@ -199,6 +178,30 @@ All helpers accept these arguments:
 </details>
 
 
+<details>
+<summary><code>{{container-query}}</code></summary>
+
+### Arguments
+
+You can pass these arguments to the modifier.
+
+- `@dataAttributePrefix`
+- `@debounce`
+- `@features`
+
+For more information, refer to [the arguments of `<ContainerQuery>` component](#arguments).
+
+
+### Outputs
+
+The outputs are similar to [those of `<ContainerQuery>` component](#outputs).
+
+Data attributes are automatically applied to the HTML element. To get `dimensions` and `features`, you will need to pass the argument `@onQuery` (a function) to the modifier.
+
+
+</details>
+
+
 Example
 ------------------------------------------------------------------------------
 
@@ -207,7 +210,7 @@ Let's look at the code that created the video demo above.
 <details>
 <summary><code>app/templates/album.hbs</code></summary>
 
-```handlebars
+```hbs
 <ContainerQuery
   @features={{hash
     large=(cq-width min=960)
@@ -248,7 +251,7 @@ Let's look at the code that created the video demo above.
 <details>
 <summary><code>app/components/tracks.hbs</code></summary>
 
-```handlebars
+```hbs
 <ContainerQuery
   @features={{hash
     small=(cq-width max=480)
@@ -286,12 +289,9 @@ For more examples, I encourage you to check out the code for my demo app. It is
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember.js v3.24 or above<sup>1</sup>
-* Ember CLI v3.24 or above
-* Node.js v12 or above
-* Modern browsers<sup>1</sup> (IE 11 won't be supported)
-
-<sup>1. Until you can adopt Ember Octane and drop support for IE 11, I recommend using [`ember-fill-up`](https://github.com/chadian/ember-fill-up) to do container queries. The APIs are similar so your migration should be smooth. Chad Carbert and I will ensure that the addons are maintained side-by-side for some time.</sup>
+* Ember.js v3.28 or above
+* Ember CLI v3.28 or above
+* Node.js v14 or above
 
 
 Contributing

package/addon/components/container-query.hbs

@@ -2,17 +2,19 @@
   <Tag
     class="container-query"
     data-test-container-query
-    {{did-insert this.queryContainer}}
-    {{on-resize this.onResize}}
+    {{container-query
+      dataAttributePrefix=@dataAttributePrefix
+      debounce=@debounce
+      features=@features
+      onQuery=this.updateState
+    }}
     ...attributes
   >
-    {{yield (hash
-      features=this.queryResults
-      dimensions=(hash
-        aspectRatio=this.aspectRatio
-        height=this.height
-        width=this.width
+    {{yield
+      (hash
+        dimensions=this.dimensions
+        features=this.queryResults
       )
-    )}}
+    }}
   </Tag>
 {{/let}}

package/addon/components/container-query.ts

@@ -1,21 +1,11 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { debounce } from '@ember/runloop';
-
-type Metadata = {
-  dimension: 'aspectRatio' | 'height' | 'width';
-  max: number;
-  min: number;
-};
-
-type Features = {
-  [featureName: string]: Metadata;
-};
-
-type QueryResults = {
-  [featureName: string]: boolean;
-};
+import type {
+  Dimensions,
+  Features,
+  QueryResults,
+} from 'ember-container-query/modifiers/container-query';
 
 interface ContainerQueryComponentArgs {
   dataAttributePrefix?: string;
@@ -25,81 +15,20 @@ interface ContainerQueryComponentArgs {
 }
 
 export default class ContainerQueryComponent extends Component<ContainerQueryComponentArgs> {
-  @tracked queryResults = {} as QueryResults;
-  @tracked aspectRatio?: number;
-  @tracked height?: number;
-  @tracked width?: number;
-
-  get features(): Features {
-    return this.args.features ?? {};
-  }
-
-  get dataAttributePrefix(): string {
-    return this.args.dataAttributePrefix ?? 'container-query';
-  }
-
-  get debounce(): number {
-    return this.args.debounce ?? 0;
-  }
+  @tracked dimensions?: Dimensions;
+  @tracked queryResults?: QueryResults;
 
   // The dynamic tag is restricted to be immutable
   tagName = this.args.tagName ?? 'div';
 
-  @action onResize(resizeObserverEntry: ResizeObserverEntry): void {
-    const element = resizeObserverEntry.target;
-
-    if (this.debounce > 0) {
-      debounce(this, this.queryContainer, element, this.debounce);
-      return;
-    }
-
-    this.queryContainer(element);
-  }
-
-  @action queryContainer(element: Element): void {
-    this.measureDimensions(element);
-    this.evaluateQueries();
-    this.setDataAttributes(element);
-  }
-
-  measureDimensions(element: Element): void {
-    this.height = element.clientHeight;
-    this.width = element.clientWidth;
-    this.aspectRatio = this.width / this.height;
-  }
-
-  evaluateQueries(): void {
-    const queryResults = {} as QueryResults;
-
-    for (const [featureName, metadata] of Object.entries(this.features)) {
-      const { dimension, min, max } = metadata;
-      const value = this[dimension]!;
-
-      queryResults[featureName] = min <= value && value < max;
-    }
-
+  @action updateState({
+    dimensions,
+    queryResults,
+  }: {
+    dimensions: Dimensions;
+    queryResults: QueryResults;
+  }): void {
+    this.dimensions = dimensions;
     this.queryResults = queryResults;
   }
-
-  setDataAttributes(element: Element): void {
-    const prefix = this.dataAttributePrefix;
-
-    for (const [featureName, meetsFeature] of Object.entries(
-      this.queryResults
-    )) {
-      let attributeName;
-
-      if (prefix) {
-        attributeName = `data-${prefix}-${featureName}`;
-      } else {
-        attributeName = `data-${featureName}`;
-      }
-
-      if (meetsFeature) {
-        element.setAttribute(attributeName, '');
-      } else {
-        element.removeAttribute(attributeName);
-      }
-    }
-  }
 }

package/addon/helpers/cq-aspect-ratio.ts

@@ -1,10 +1,5 @@
 import { helper } from '@ember/component/helper';
-
-type Metadata = {
-  dimension: 'aspectRatio' | 'height' | 'width';
-  max: number;
-  min: number;
-};
+import type { Metadata } from 'ember-container-query/modifiers/container-query';
 
 function cqAspectRatio(
   positional: unknown[],

package/addon/helpers/cq-height.ts

@@ -1,10 +1,5 @@
 import { helper } from '@ember/component/helper';
-
-type Metadata = {
-  dimension: 'aspectRatio' | 'height' | 'width';
-  max: number;
-  min: number;
-};
+import type { Metadata } from 'ember-container-query/modifiers/container-query';
 
 function cqHeight(
   positional: unknown[],

package/addon/helpers/cq-width.ts

@@ -1,10 +1,5 @@
 import { helper } from '@ember/component/helper';
-
-type Metadata = {
-  dimension: 'aspectRatio' | 'height' | 'width';
-  max: number;
-  min: number;
-};
+import type { Metadata } from 'ember-container-query/modifiers/container-query';
 
 function cqWidth(
   positional: unknown[],

package/addon/modifiers/container-query.ts

@@ -0,0 +1,168 @@
+import { registerDestructor } from '@ember/destroyable';
+import { action } from '@ember/object';
+import { debounce as _debounce } from '@ember/runloop';
+import { inject as service } from '@ember/service';
+import Modifier, { ArgsFor, NamedArgs, PositionalArgs } from 'ember-modifier';
+
+export type Metadata = {
+  dimension: 'aspectRatio' | 'height' | 'width';
+  max: number;
+  min: number;
+};
+
+export type Features = {
+  [featureName: string]: Metadata;
+};
+
+export type Dimensions = {
+  aspectRatio: number;
+  height: number;
+  width: number;
+};
+
+export type QueryResults = {
+  [featureName: string]: boolean;
+};
+
+interface ContainerQueryModifierSignature {
+  Args: {
+    Named: {
+      dataAttributePrefix?: string;
+      debounce?: number;
+      features?: Features;
+      onQuery?: ({
+        dimensions,
+        queryResults,
+      }: {
+        dimensions: Dimensions;
+        queryResults: QueryResults;
+      }) => void;
+    };
+    Positional: [];
+  };
+  Element: Element;
+}
+
+export default class ContainerQueryModifier extends Modifier<ContainerQueryModifierSignature> {
+  @service private declare readonly resizeObserver;
+
+  dimensions!: Dimensions;
+  queryResults!: QueryResults;
+
+  private _dataAttributes: string[] = [];
+  private _element?: Element;
+  private _named!: NamedArgs<ContainerQueryModifierSignature>;
+
+  get dataAttributePrefix(): string {
+    return this._named.dataAttributePrefix ?? 'container-query';
+  }
+
+  get debounce(): number {
+    return this._named.debounce ?? 0;
+  }
+
+  get features(): Features {
+    return this._named.features ?? {};
+  }
+
+  constructor(owner: unknown, args: ArgsFor<ContainerQueryModifierSignature>) {
+    super(owner, args);
+
+    registerDestructor(this, () => {
+      this.resizeObserver.unobserve(this._element, this.onResize);
+    });
+  }
+
+  modify(
+    element: Element,
+    _positional: PositionalArgs<ContainerQueryModifierSignature>,
+    named: NamedArgs<ContainerQueryModifierSignature>
+  ): void {
+    this._named = named;
+
+    this.registerResizeObserver(element);
+    this.queryContainer(element);
+  }
+
+  @action private onResize(resizeObserverEntry: ResizeObserverEntry): void {
+    const element = resizeObserverEntry.target;
+
+    if (this.debounce > 0) {
+      _debounce(this, this.queryContainer, element, this.debounce);
+      return;
+    }
+
+    this.queryContainer(element);
+  }
+
+  private registerResizeObserver(element: Element): void {
+    this.resizeObserver.unobserve(this._element, this.onResize);
+
+    this._element = element;
+    this.resizeObserver.observe(this._element, this.onResize);
+  }
+
+  private queryContainer(element: Element): void {
+    this.measureDimensions(element);
+    this.evaluateQueries();
+    this.resetDataAttributes(element);
+    this.setDataAttributes(element);
+
+    this._named.onQuery?.({
+      dimensions: this.dimensions,
+      queryResults: this.queryResults,
+    });
+  }
+
+  private measureDimensions(element: Element): void {
+    const height = element.clientHeight;
+    const width = element.clientWidth;
+
+    this.dimensions = {
+      aspectRatio: width / height,
+      height,
+      width,
+    };
+  }
+
+  private evaluateQueries(): void {
+    const queryResults = {} as QueryResults;
+
+    for (const [featureName, metadata] of Object.entries(this.features)) {
+      const { dimension, min, max } = metadata;
+      const value = this.dimensions[dimension];
+
+      queryResults[featureName] = min <= value && value < max;
+    }
+
+    this.queryResults = queryResults;
+  }
+
+  private resetDataAttributes(element: Element): void {
+    this._dataAttributes.forEach((dataAttribute) => {
+      element.removeAttribute(dataAttribute);
+    });
+
+    this._dataAttributes = [];
+  }
+
+  private setDataAttributes(element: Element): void {
+    const prefix = this.dataAttributePrefix;
+
+    for (const [featureName, meetsFeature] of Object.entries(
+      this.queryResults
+    )) {
+      if (!meetsFeature) {
+        continue;
+      }
+
+      const dataAttribute = prefix
+        ? `data-${prefix}-${featureName}`
+        : `data-${featureName}`;
+
+      element.setAttribute(dataAttribute, '');
+
+      this._dataAttributes.push(dataAttribute);
+    }
+  }
+}

package/app/modifiers/container-query.js

@@ -0,0 +1 @@
+export { default } from 'ember-container-query/modifiers/container-query';

package/components/container-query.d.ts

@@ -1,15 +1,5 @@
 import Component from '@glimmer/component';
-declare type Metadata = {
-    dimension: 'aspectRatio' | 'height' | 'width';
-    max: number;
-    min: number;
-};
-declare type Features = {
-    [featureName: string]: Metadata;
-};
-declare type QueryResults = {
-    [featureName: string]: boolean;
-};
+import type { Dimensions, Features, QueryResults } from 'ember-container-query/modifiers/container-query';
 interface ContainerQueryComponentArgs {
     dataAttributePrefix?: string;
     debounce?: number;
@@ -17,19 +7,13 @@ interface ContainerQueryComponentArgs {
     tagName?: string;
 }
 export default class ContainerQueryComponent extends Component<ContainerQueryComponentArgs> {
-    queryResults: QueryResults;
-    aspectRatio?: number;
-    height?: number;
-    width?: number;
-    get features(): Features;
-    get dataAttributePrefix(): string;
-    get debounce(): number;
+    dimensions?: Dimensions;
+    queryResults?: QueryResults;
     tagName: string;
-    onResize(resizeObserverEntry: ResizeObserverEntry): void;
-    queryContainer(element: Element): void;
-    measureDimensions(element: Element): void;
-    evaluateQueries(): void;
-    setDataAttributes(element: Element): void;
+    updateState({ dimensions, queryResults, }: {
+        dimensions: Dimensions;
+        queryResults: QueryResults;
+    }): void;
 }
 export {};
 //# sourceMappingURL=container-query.d.ts.map

package/helpers/cq-aspect-ratio.d.ts

@@ -1,8 +1,4 @@
-declare type Metadata = {
-    dimension: 'aspectRatio' | 'height' | 'width';
-    max: number;
-    min: number;
-};
+import type { Metadata } from 'ember-container-query/modifiers/container-query';
 declare const _default: import("@ember/component/helper").FunctionBasedHelper<{
     Args: {
         Positional: unknown[];

package/helpers/cq-height.d.ts

@@ -1,8 +1,4 @@
-declare type Metadata = {
-    dimension: 'aspectRatio' | 'height' | 'width';
-    max: number;
-    min: number;
-};
+import type { Metadata } from 'ember-container-query/modifiers/container-query';
 declare const _default: import("@ember/component/helper").FunctionBasedHelper<{
     Args: {
         Positional: unknown[];

package/helpers/cq-width.d.ts

@@ -1,8 +1,4 @@
-declare type Metadata = {
-    dimension: 'aspectRatio' | 'height' | 'width';
-    max: number;
-    min: number;
-};
+import type { Metadata } from 'ember-container-query/modifiers/container-query';
 declare const _default: import("@ember/component/helper").FunctionBasedHelper<{
     Args: {
         Positional: unknown[];

package/modifiers/container-query.d.ts

@@ -0,0 +1,54 @@
+import Modifier, { ArgsFor, NamedArgs, PositionalArgs } from 'ember-modifier';
+export type Metadata = {
+    dimension: 'aspectRatio' | 'height' | 'width';
+    max: number;
+    min: number;
+};
+export type Features = {
+    [featureName: string]: Metadata;
+};
+export type Dimensions = {
+    aspectRatio: number;
+    height: number;
+    width: number;
+};
+export type QueryResults = {
+    [featureName: string]: boolean;
+};
+interface ContainerQueryModifierSignature {
+    Args: {
+        Named: {
+            dataAttributePrefix?: string;
+            debounce?: number;
+            features?: Features;
+            onQuery?: ({ dimensions, queryResults, }: {
+                dimensions: Dimensions;
+                queryResults: QueryResults;
+            }) => void;
+        };
+        Positional: [];
+    };
+    Element: Element;
+}
+export default class ContainerQueryModifier extends Modifier<ContainerQueryModifierSignature> {
+    private readonly resizeObserver;
+    dimensions: Dimensions;
+    queryResults: QueryResults;
+    private _dataAttributes;
+    private _element?;
+    private _named;
+    get dataAttributePrefix(): string;
+    get debounce(): number;
+    get features(): Features;
+    constructor(owner: unknown, args: ArgsFor<ContainerQueryModifierSignature>);
+    modify(element: Element, _positional: PositionalArgs<ContainerQueryModifierSignature>, named: NamedArgs<ContainerQueryModifierSignature>): void;
+    private onResize;
+    private registerResizeObserver;
+    private queryContainer;
+    private measureDimensions;
+    private evaluateQueries;
+    private resetDataAttributes;
+    private setDataAttributes;
+}
+export {};
+//# sourceMappingURL=container-query.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-container-query",
-  "version": "2.1.0",
+  "version": "3.0.0-alpha.0",
   "description": "Container queries using Ember modifiers",
   "keywords": [
     "container-queries",
@@ -26,9 +26,11 @@
     "build": "ember build --environment=production",
     "build:test": "ember build --environment=test",
     "changelog": "lerna-changelog",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
+    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
+    "lint:css": "stylelint \"tests/dummy/app/**/*.css\" --cache",
+    "lint:css:fix": "stylelint \"tests/dummy/app/**/*.css\" --fix",
     "lint:dependency": "ember dependency-lint",
-    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
+    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache --ext=.js,.ts",
@@ -52,55 +54,59 @@
     }
   },
   "dependencies": {
-    "@ember/render-modifiers": "^2.0.4",
     "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.0.1",
-    "ember-cli-typescript": "^5.1.0",
+    "ember-cli-htmlbars": "^6.1.1",
+    "ember-cli-typescript": "^5.2.1",
     "ember-element-helper": "^0.6.1",
-    "ember-on-resize-modifier": "^1.1.0"
+    "ember-modifier": "^3.2.7",
+    "ember-resize-observer-service": "^1.1.0",
+    "ember-test-selectors": "^6.0.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^2.8.1",
-    "@embroider/test-setup": "^1.7.1",
+    "@embroider/test-setup": "^2.0.2",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@percy/cli": "^1.2.1",
-    "@percy/ember": "^3.0.0",
-    "@types/ember-qunit": "^5.0.0",
-    "@types/ember-resolver": "^5.0.11",
-    "@types/ember__application": "^4.0.0",
-    "@types/ember__array": "^4.0.1",
-    "@types/ember__component": "^4.0.8",
-    "@types/ember__controller": "^4.0.0",
-    "@types/ember__debug": "^4.0.1",
-    "@types/ember__engine": "^4.0.0",
-    "@types/ember__error": "^4.0.0",
-    "@types/ember__object": "^4.0.2",
-    "@types/ember__polyfills": "^4.0.0",
-    "@types/ember__routing": "^4.0.7",
-    "@types/ember__runloop": "^4.0.1",
-    "@types/ember__service": "^4.0.0",
-    "@types/ember__string": "^3.0.9",
-    "@types/ember__template": "^4.0.0",
-    "@types/ember__test": "^4.0.0",
-    "@types/ember__test-helpers": "^2.6.1",
-    "@types/ember__utils": "^4.0.0",
+    "@percy/cli": "^1.16.0",
+    "@percy/ember": "^4.0.0",
+    "@tsconfig/ember": "^1.1.0",
+    "@types/ember-qunit": "^5.0.2",
+    "@types/ember-resolver": "^5.0.13",
+    "@types/ember__application": "^4.0.5",
+    "@types/ember__array": "^4.0.3",
+    "@types/ember__component": "^4.0.11",
+    "@types/ember__controller": "^4.0.4",
+    "@types/ember__debug": "^4.0.3",
+    "@types/ember__destroyable": "^4.0.1",
+    "@types/ember__engine": "^4.0.4",
+    "@types/ember__error": "^4.0.2",
+    "@types/ember__object": "^4.0.5",
+    "@types/ember__polyfills": "^4.0.1",
+    "@types/ember__routing": "^4.0.12",
+    "@types/ember__runloop": "^4.0.2",
+    "@types/ember__service": "^4.0.1",
+    "@types/ember__string": "^3.0.10",
+    "@types/ember__template": "^4.0.1",
+    "@types/ember__test": "^4.0.1",
+    "@types/ember__test-helpers": "^2.8.2",
+    "@types/ember__utils": "^4.0.2",
     "@types/htmlbars-inline-precompile": "^3.0.0",
-    "@types/qunit": "^2.19.0",
+    "@types/qunit": "^2.19.3",
     "@types/rsvp": "^4.0.4",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
     "broccoli-asset-rev": "^3.0.0",
-    "d3-array": "^3.1.6",
+    "concurrently": "^7.6.0",
+    "d3-array": "^3.2.1",
     "d3-axis": "^3.0.0",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.1.0",
-    "ember-a11y-refocus": "^2.3.0",
-    "ember-a11y-testing": "^5.0.0",
-    "ember-auto-import": "^2.4.2",
-    "ember-cli": "~4.4.0",
+    "ember-a11y-refocus": "^3.0.2",
+    "ember-a11y-testing": "^5.1.0",
+    "ember-auto-import": "^2.5.0",
+    "ember-cli": "~4.9.2",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-dependency-lint": "^2.0.1",
     "ember-cli-inject-live-reload": "^2.1.0",
@@ -108,36 +114,39 @@
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
     "ember-css-modules": "^2.0.1",
-    "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
     "ember-named-blocks-polyfill": "^0.2.5",
     "ember-page-title": "^7.0.0",
-    "ember-qunit": "^5.1.5",
+    "ember-qunit": "^6.0.0",
     "ember-resolver": "^8.0.3",
-    "ember-source": "~4.4.0",
+    "ember-source": "~4.9.2",
     "ember-source-channel-url": "^3.0.0",
-    "ember-svg-jar": "^2.3.4",
-    "ember-template-lint": "^4.10.0",
-    "ember-test-selectors": "^6.0.0",
-    "ember-truth-helpers": "^3.0.0",
+    "ember-svg-jar": "^2.4.2",
+    "ember-template-lint": "^5.2.0",
+    "ember-template-lint-plugin-prettier": "^4.1.0",
+    "ember-truth-helpers": "^3.1.1",
     "ember-try": "^2.0.0",
-    "eslint": "^8.16.0",
+    "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-ember": "^10.6.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-ember": "^11.2.1",
+    "eslint-plugin-n": "^15.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-qunit": "^7.3.4",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
     "lerna-changelog": "^2.2.0",
     "loader.js": "^4.7.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.2",
-    "qunit": "^2.19.1",
+    "prettier": "^2.8.1",
+    "qunit": "^2.19.3",
     "qunit-dom": "^2.0.0",
-    "typescript": "^4.7.2",
-    "webpack": "^5.73.0"
+    "stylelint": "^14.16.0",
+    "stylelint-config-standard": "^29.0.0",
+    "stylelint-no-unsupported-browser-features": "^6.0.1",
+    "stylelint-order": "^5.0.0",
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0"
   },
   "engines": {
-    "node": "12.* || 14.* || >= 16"
+    "node": "14.* || 16.* || >= 18"
   },
   "ember": {
     "edition": "octane"

package/tsconfig.json

@@ -1,69 +1,9 @@
 {
+  "extends": "@tsconfig/ember/tsconfig.json",
   "compilerOptions": {
-    "target": "ES2020",
-    "module": "ES2020",
-    "moduleResolution": "node",
-
-    // Trying to check Ember apps and addons with `allowJs: true` is a recipe
-    // for many unresolveable type errors, because with *considerable* extra
-    // configuration it ends up including many files which are *not* valid and
-    // cannot be: they *appear* to be resolve-able to TS, but are in fact not in
-    // valid Node-resolveable locations and may not have TS-ready types. This
-    // will likely improve over time
-    "allowJs": false,
-
     // Don't check the types of dependencies
     "skipLibCheck": true,
 
-    // --- TS for SemVer Types compatibility
-    // Strictness settings -- you should *not* change these: Ember code is not
-    // guaranteed to type check with these set to looser values.
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-
-    // Interop: these are viral and will require anyone downstream of your
-    // package to *also* set them to true. If you *must* enable them to consume
-    // an upstream package, you should document that for downstream consumers to
-    // be aware of.
-    //
-    // These *are* safe for apps to enable, since they do not *have* downstream
-    // consumers; but leaving them off is still preferred when possible, since
-    // it makes it easier to switch between apps and addons and have the same
-    // rules for what can be imported and how.
-    "allowSyntheticDefaultImports": false,
-    "esModuleInterop": false,
-
-    // --- Lint-style rules
-
-    // TypeScript also supplies some lint-style checks; nearly all of them are
-    // better handled by ESLint with the `@typescript-eslint`. This one is more
-    // like a safety check, though, so we leave it on.
-    "noPropertyAccessFromIndexSignature": true,
-
-    // --- Compilation/integration settings
-    // Setting `noEmitOnError` here allows ember-cli-typescript to catch errors
-    // and inject them into Ember CLI's build error reporting, which provides
-    // nice feedback for when
-    "noEmitOnError": false,
-
-    // We use Babel for emitting runtime code, because it's very important that
-    // we always and only use the same transpiler for non-stable features, in
-    // particular decorators. If you were to change this to `true`, it could
-    // lead to accidentally generating code with `tsc` instead of Babel, and
-    // could thereby result in broken code at runtime.
-    "noEmit": true,
-
-    // Ember makes heavy use of decorators; TS does not support them at all
-    // without this flag.
-    "experimentalDecorators": true,
-
-    // Support generation of source maps. Note: you must *also* enable source
-    // maps in your `ember-cli-babel` config and/or `babel.config.js`.
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSourceMap": true,
-    "inlineSources": true,
-
     // The combination of `baseUrl` with `paths` allows Ember's classic package
     // layout, which is not resolveable with the Node resolution algorithm, to
     // work with TypeScript.

package/config/environment.js

@@ -1,5 +0,0 @@
-'use strict';
-
-module.exports = function (/* environment, appConfig */) {
-  return {};
-};