ember-container-query 3.0.0 → 3.2.0

package/.stylelintcache

@@ -1 +1 @@
-[{"/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/album.css":"1","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/index.css":"2","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/navigation-menu.css":"3","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/form.css":"4","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/app.css":"5","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/application.css":"6","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/not-found.css":"7","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/dashboard.css":"8","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/tracks/list.css":"9","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/tracks/table.css":"10","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form.css":"11","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/page.css":"12","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4.css":"13","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-2.css":"14","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-3.css":"15","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-5.css":"16","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-1.css":"17","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/information.css":"18","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/checkbox.css":"19","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-2/captions.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/ui/form/field.css":"22","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-1/item.css":"23","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-3/tour-schedule.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/widgets/widget-2/stacked-chart.css":"26","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/input.css":"27","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4/memo/header.css":"28","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-3/tour-schedule/responsive-image.css":"29","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4/memo/body.css":"30","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4/memo/actions.css":"31"},{"size":892,"mtime":1656746523421,"hashOfConfig":"32"},{"size":36,"mtime":1670927594479,"hashOfConfig":"32"},{"size":323,"mtime":1656746523373,"hashOfConfig":"32"},{"size":82,"mtime":1656746523432,"hashOfConfig":"32"},{"size":1494,"mtime":1670927594478,"hashOfConfig":"32"},{"size":980,"mtime":1656746523427,"hashOfConfig":"32"},{"size":1299,"mtime":1656746523434,"hashOfConfig":"32"},{"size":1846,"mtime":1656746523430,"hashOfConfig":"32"},{"size":323,"mtime":1656746523376,"hashOfConfig":"32"},{"size":106,"mtime":1656746523378,"hashOfConfig":"32"},{"size":324,"mtime":1656746523380,"hashOfConfig":"32"},{"size":306,"mtime":1656746523386,"hashOfConfig":"32"},{"size":400,"mtime":1656746523408,"hashOfConfig":"32"},{"size":439,"mtime":1656746523393,"hashOfConfig":"32"},{"size":268,"mtime":1656746523400,"hashOfConfig":"32"},{"size":657,"mtime":1656746523418,"hashOfConfig":"32"},{"size":797,"mtime":1656746523388,"hashOfConfig":"32"},{"size":225,"mtime":1656746523384,"hashOfConfig":"32"},{"size":566,"mtime":1653552800391,"hashOfConfig":"32"},{"size":2101,"mtime":1656746523395,"hashOfConfig":"32"},{"size":375,"mtime":1653552800412,"hashOfConfig":"32"},{"size":1630,"mtime":1656746523382,"hashOfConfig":"32"},{"size":243,"mtime":1656746523391,"hashOfConfig":"32"},{"size":1570,"mtime":1656746523403,"hashOfConfig":"32"},{"size":937,"mtime":1656746523410,"hashOfConfig":"32"},{"size":267,"mtime":1656746523397,"hashOfConfig":"32"},{"size":360,"mtime":1653552800408,"hashOfConfig":"32"},{"size":888,"mtime":1656746523416,"hashOfConfig":"32"},{"size":159,"mtime":1656746523405,"hashOfConfig":"32"},{"size":493,"mtime":1656746523414,"hashOfConfig":"32"},{"size":701,"mtime":1656746523412,"hashOfConfig":"32"},"187t81u"]
+[{"/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/album.css":"1","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/form.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/components/navigation-menu.css":"4","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/index.css":"5","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/application.css":"6","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/not-found.css":"7","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/styles/dashboard.css":"8","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-1.css":"9","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form.css":"10","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/page.css":"11","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/tracks/table.css":"12","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/tracks/list.css":"13","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-2.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-3.css":"16","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4.css":"17","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/information.css":"18","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/checkbox.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-1/item.css":"22","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-2/captions.css":"23","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/ui/form/input.css":"24","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-2/stacked-chart.css":"25","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4/memo.css":"26","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-3/tour-schedule.css":"27","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4/memo/body.css":"28","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4/memo/actions.css":"29","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-3/tour-schedule/responsive-image.css":"30","/Users/isaaclee/Documents/GitHub/ember-container-query/tests/dummy/app/components/widgets/widget-4/memo/header.css":"31"},{"size":892,"mtime":1672845344230,"hashOfConfig":"32"},{"size":82,"mtime":1672845344239,"hashOfConfig":"32"},{"size":1494,"mtime":1672845344232,"hashOfConfig":"32"},{"size":323,"mtime":1672845342271,"hashOfConfig":"32"},{"size":36,"mtime":1672845344240,"hashOfConfig":"32"},{"size":980,"mtime":1672845344234,"hashOfConfig":"32"},{"size":1299,"mtime":1672845344242,"hashOfConfig":"32"},{"size":1846,"mtime":1672845344237,"hashOfConfig":"32"},{"size":797,"mtime":1672845342436,"hashOfConfig":"32"},{"size":324,"mtime":1672845342377,"hashOfConfig":"32"},{"size":306,"mtime":1672845342429,"hashOfConfig":"32"},{"size":106,"mtime":1672845342371,"hashOfConfig":"32"},{"size":323,"mtime":1672845342365,"hashOfConfig":"32"},{"size":439,"mtime":1672845342448,"hashOfConfig":"32"},{"size":657,"mtime":1672845342511,"hashOfConfig":"32"},{"size":268,"mtime":1672845342466,"hashOfConfig":"32"},{"size":400,"mtime":1672845342484,"hashOfConfig":"32"},{"size":225,"mtime":1672845342406,"hashOfConfig":"32"},{"size":566,"mtime":1672845342392,"hashOfConfig":"32"},{"size":1630,"mtime":1672845342398,"hashOfConfig":"32"},{"size":375,"mtime":1672845342424,"hashOfConfig":"32"},{"size":243,"mtime":1672845342443,"hashOfConfig":"32"},{"size":2101,"mtime":1672845342453,"hashOfConfig":"32"},{"size":360,"mtime":1672845342416,"hashOfConfig":"32"},{"size":267,"mtime":1672845342460,"hashOfConfig":"32"},{"size":937,"mtime":1672845342490,"hashOfConfig":"32"},{"size":1570,"mtime":1672845342474,"hashOfConfig":"32"},{"size":493,"mtime":1672845342500,"hashOfConfig":"32"},{"size":701,"mtime":1672845342495,"hashOfConfig":"32"},{"size":159,"mtime":1672845342479,"hashOfConfig":"32"},{"size":888,"mtime":1672845342505,"hashOfConfig":"32"},"v8nntw"]

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+## 3.2.0 (2023-01-05)
+
+### Enhancement
+* [#147](https://github.com/ijlee2/ember-container-query/pull/147) Use relative paths whenever possible ([@ijlee2](https://github.com/ijlee2))
+* [#130](https://github.com/ijlee2/ember-container-query/pull/130) Add easier imports from strict mode users ([@NullVoxPopuli](https://github.com/NullVoxPopuli))
+* [#146](https://github.com/ijlee2/ember-container-query/pull/146) Renamed the helpers by dropping the cq prefix ([@ijlee2](https://github.com/ijlee2))
+
+### Internal
+* [#148](https://github.com/ijlee2/ember-container-query/pull/148) Updated development dependencies ([@ijlee2](https://github.com/ijlee2))
+
+### Committers: 2
+- Isaac Lee ([@ijlee2](https://github.com/ijlee2))
+- [@NullVoxPopuli](https://github.com/NullVoxPopuli)
+
+
+## 3.1.0 (2022-12-20)
+
+### Enhancement
+* [#140](https://github.com/ijlee2/ember-container-query/pull/140) Add Glint signatures ([@ijlee2](https://github.com/ijlee2))
+
+### Internal
+* [#145](https://github.com/ijlee2/ember-container-query/pull/145) Updated development dependencies to their latest version ([@ijlee2](https://github.com/ijlee2))
+* [#141](https://github.com/ijlee2/ember-container-query/pull/141) Glint demo app ([@ijlee2](https://github.com/ijlee2))
+* [#140](https://github.com/ijlee2/ember-container-query/pull/140) Add Glint signatures ([@ijlee2](https://github.com/ijlee2))
+
+### Documentation
+* [#141](https://github.com/ijlee2/ember-container-query/pull/141) Glint demo app ([@ijlee2](https://github.com/ijlee2))
+* [#140](https://github.com/ijlee2/ember-container-query/pull/140) Add Glint signatures ([@ijlee2](https://github.com/ijlee2))
+
+### Committers: 1
+- Isaac Lee ([@ijlee2](https://github.com/ijlee2))
+- Thanks to [@NullVoxPopuli](https://github.com/NullVoxPopuli), [@denisclark](https://github.com/denisclark), [@gossi](https://github.com/gossi), and [@buschtoens](https://github.com/buschtoens) for their help with [#140](https://github.com/ijlee2/ember-container-query/pull/140)
+
+
 ## 3.0.0 (2022-12-15)
 
 ### Breaking Change

package/README.md

@@ -18,6 +18,53 @@ Installation
 ember install ember-container-query
 ```
 
+<details>
+<summary>Use Glint? ✨</summary>
+
+- If you are using [strict mode](https://github.com/ember-template-imports/ember-template-imports), then you are good to go!
+
+    ```ts
+    /* app/components/tracks.{gjs,gts} */
+
+    import { hash } from '@ember/helper';
+    import { ContainerQuery, height, width } from 'ember-container-query';
+
+    <template>
+      <ContainerQuery
+        @features={{hash
+          small=(width max=480)
+          medium=(width min=480 max=640)
+          large=(width min=640)
+          tall=(height min=320)
+        }}
+        as |CQ|
+      >
+        ...
+      </ContainerQuery>
+    </template>
+    ```
+
+- Otherwise, update your template registry to extend this addon's. Check the [Glint documentation](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons) for more information.
+
+    ```ts
+    /* types/global.d.ts */
+
+    import '@glint/environment-ember-loose';
+
+    import type EmberContainerQueryRegistry from 'ember-container-query/template-registry';
+
+    declare module '@glint/environment-ember-loose/registry' {
+      export default interface Registry extends EmberContainerQueryRegistry, /* other addon registries */ {
+        // local entries
+      }
+    }
+    ```
+
+
+⚠️ Glint is in active development and may introduce breaking changes. This addon will try to provide a stable API. Should it need to make a breaking change due to Glint, semantic versioning may not be rigorously followed (e.g. there is no new major version).
+
+</details>
+
 
 Applications
 ------------------------------------------------------------------------------
@@ -106,9 +153,9 @@ API
 The addon provides 1 Glimmer component and 3 helpers:
 
 - `<ContainerQuery>`
-- `{{cq-aspect-ratio}}`
-- `{{cq-height}}`
-- `{{cq-width}}`
+- `{{aspect-ratio}}`
+- `{{height}}`
+- `{{width}}`
 
 Starting `v2.1.1`, the addon extracts the core logic into a modifier. This lets you opt out of using the provided component.
 
@@ -160,7 +207,7 @@ You can consume these values in your app or addon.
 
 
 <details>
-<summary><code>{{cq-aspect-ratio}}</code>, <code>{{cq-height}}</code>, <code>{{cq-width}}</code></summary>
+<summary><code>{{aspect-ratio}}</code>, <code>{{height}}</code>, <code>{{width}}</code></summary>
 
 ### Arguments
 
@@ -213,8 +260,8 @@ Let's look at the code that created the video demo above.
 ```hbs
 <ContainerQuery
   @features={{hash
-    large=(cq-width min=960)
-    tall=(cq-height min=400)
+    large=(width min=960)
+    tall=(height min=400)
   }}
   as |CQ|
 >
@@ -254,10 +301,10 @@ Let's look at the code that created the video demo above.
 ```hbs
 <ContainerQuery
   @features={{hash
-    small=(cq-width max=480)
-    medium=(cq-width min=480 max=640)
-    large=(cq-width min=640)
-    tall=(cq-height min=320)
+    small=(width max=480)
+    medium=(width min=480 max=640)
+    large=(width min=640)
+    tall=(height min=320)
   }}
   as |CQ|
 >

package/addon/components/container-query.hbs

@@ -1,3 +1,4 @@
+{{! @glint-ignore: ember-element-helper needs to provide Glint signature }}
 {{#let (element this.tagName) as |Tag|}}
   <Tag
     class="container-query"

package/addon/components/container-query.ts

@@ -1,22 +1,37 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+
 import type {
   Dimensions,
   Features,
+  IndexSignatureParameter,
   QueryResults,
-} from 'ember-container-query/modifiers/container-query';
+} from '../modifiers/container-query';
 
-interface ContainerQueryComponentArgs {
-  dataAttributePrefix?: string;
-  debounce?: number;
-  features?: Features;
-  tagName?: string;
+interface ContainerQueryComponentSignature<T extends IndexSignatureParameter> {
+  Args: {
+    dataAttributePrefix?: string;
+    debounce?: number;
+    features?: Features<T>;
+    tagName?: string;
+  };
+  Blocks: {
+    default: [
+      {
+        dimensions?: Dimensions;
+        features?: QueryResults<T>;
+      }
+    ];
+  };
+  Element: HTMLElement;
 }
 
-export default class ContainerQueryComponent extends Component<ContainerQueryComponentArgs> {
+export default class ContainerQueryComponent<
+  T extends IndexSignatureParameter
+> extends Component<ContainerQueryComponentSignature<T>> {
   @tracked dimensions?: Dimensions;
-  @tracked queryResults?: QueryResults;
+  @tracked queryResults?: QueryResults<T>;
 
   // The dynamic tag is restricted to be immutable
   tagName = this.args.tagName ?? 'div';
@@ -26,7 +41,7 @@ export default class ContainerQueryComponent extends Component<ContainerQueryCom
     queryResults,
   }: {
     dimensions: Dimensions;
-    queryResults: QueryResults;
+    queryResults: QueryResults<T>;
   }): void {
     this.dimensions = dimensions;
     this.queryResults = queryResults;

package/addon/helpers/aspect-ratio.ts

@@ -0,0 +1,26 @@
+import { helper } from '@ember/component/helper';
+
+import type { Metadata } from '../modifiers/container-query';
+
+interface AspectRatioHelperSignature {
+  Args: {
+    Named: {
+      max?: number;
+      min?: number;
+    };
+    Positional: [];
+  };
+  Return: Metadata;
+}
+
+const AspectRatioHelper = helper<AspectRatioHelperSignature>(
+  (_positional, named) => {
+    const dimension = 'aspectRatio';
+    const max = named.max ?? Infinity;
+    const min = named.min ?? 0;
+
+    return { dimension, max, min };
+  }
+);
+
+export default AspectRatioHelper;

package/addon/helpers/height.ts

@@ -0,0 +1,24 @@
+import { helper } from '@ember/component/helper';
+
+import type { Metadata } from '../modifiers/container-query';
+
+interface HeightHelperSignature {
+  Args: {
+    Named: {
+      max?: number;
+      min?: number;
+    };
+    Positional: [];
+  };
+  Return: Metadata;
+}
+
+const HeightHelper = helper<HeightHelperSignature>((_positional, named) => {
+  const dimension = 'height';
+  const max = named.max ?? Infinity;
+  const min = named.min ?? 0;
+
+  return { dimension, max, min };
+});
+
+export default HeightHelper;

package/addon/helpers/width.ts

@@ -0,0 +1,24 @@
+import { helper } from '@ember/component/helper';
+
+import type { Metadata } from '../modifiers/container-query';
+
+interface WidthHelperSignature {
+  Args: {
+    Named: {
+      max?: number;
+      min?: number;
+    };
+    Positional: [];
+  };
+  Return: Metadata;
+}
+
+const WidthHelper = helper<WidthHelperSignature>((_positional, named) => {
+  const dimension = 'width';
+  const max = named.max ?? Infinity;
+  const min = named.min ?? 0;
+
+  return { dimension, max, min };
+});
+
+export default WidthHelper;

package/addon/index.ts

@@ -0,0 +1,5 @@
+export { default as ContainerQuery } from './components/container-query';
+export { default as aspectRatio } from './helpers/aspect-ratio';
+export { default as height } from './helpers/height';
+export { default as width } from './helpers/width';
+export { default as containerQuery } from './modifiers/container-query';

package/addon/modifiers/container-query.ts

@@ -4,38 +4,36 @@ 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;
-};
+type IndexSignatureParameter = string | number | symbol;
 
-export type Features = {
-  [featureName: string]: Metadata;
-};
-
-export type Dimensions = {
+type Dimensions = {
   aspectRatio: number;
   height: number;
   width: number;
 };
 
-export type QueryResults = {
-  [featureName: string]: boolean;
+type Metadata = {
+  dimension: 'aspectRatio' | 'height' | 'width';
+  max: number;
+  min: number;
 };
 
-interface ContainerQueryModifierSignature {
+type Features<T extends IndexSignatureParameter> = Record<T, Metadata>;
+
+type QueryResults<T extends IndexSignatureParameter> = Record<T, boolean>;
+
+interface ContainerQueryModifierSignature<T extends IndexSignatureParameter> {
   Args: {
     Named: {
       dataAttributePrefix?: string;
       debounce?: number;
-      features?: Features;
+      features?: Features<T>;
       onQuery?: ({
         dimensions,
         queryResults,
       }: {
         dimensions: Dimensions;
-        queryResults: QueryResults;
+        queryResults: QueryResults<T>;
       }) => void;
     };
     Positional: [];
@@ -43,15 +41,17 @@ interface ContainerQueryModifierSignature {
   Element: Element;
 }
 
-export default class ContainerQueryModifier extends Modifier<ContainerQueryModifierSignature> {
+export default class ContainerQueryModifier<
+  T extends IndexSignatureParameter
+> extends Modifier<ContainerQueryModifierSignature<T>> {
   @service private declare readonly resizeObserver;
 
   dimensions!: Dimensions;
-  queryResults!: QueryResults;
+  queryResults!: QueryResults<T>;
 
   private _dataAttributes: string[] = [];
   private _element?: Element;
-  private _named!: NamedArgs<ContainerQueryModifierSignature>;
+  private _named!: NamedArgs<ContainerQueryModifierSignature<T>>;
 
   get dataAttributePrefix(): string {
     return this._named.dataAttributePrefix ?? 'container-query';
@@ -61,11 +61,14 @@ export default class ContainerQueryModifier extends Modifier<ContainerQueryModif
     return this._named.debounce ?? 0;
   }
 
-  get features(): Features {
-    return this._named.features ?? {};
+  get features(): Features<T> {
+    return this._named.features ?? ({} as Features<T>);
   }
 
-  constructor(owner: unknown, args: ArgsFor<ContainerQueryModifierSignature>) {
+  constructor(
+    owner: unknown,
+    args: ArgsFor<ContainerQueryModifierSignature<T>>
+  ) {
     super(owner, args);
 
     registerDestructor(this, () => {
@@ -75,8 +78,8 @@ export default class ContainerQueryModifier extends Modifier<ContainerQueryModif
 
   modify(
     element: Element,
-    _positional: PositionalArgs<ContainerQueryModifierSignature>,
-    named: NamedArgs<ContainerQueryModifierSignature>
+    _positional: PositionalArgs<ContainerQueryModifierSignature<T>>,
+    named: NamedArgs<ContainerQueryModifierSignature<T>>
   ): void {
     this._named = named;
 
@@ -126,13 +129,13 @@ export default class ContainerQueryModifier extends Modifier<ContainerQueryModif
   }
 
   private evaluateQueries(): void {
-    const queryResults = {} as QueryResults;
+    const queryResults = {} as QueryResults<T>;
 
     for (const [featureName, metadata] of Object.entries(this.features)) {
-      const { dimension, min, max } = metadata;
+      const { dimension, min, max } = metadata as Metadata;
       const value = this.dimensions[dimension];
 
-      queryResults[featureName] = min <= value && value < max;
+      queryResults[featureName as T] = min <= value && value < max;
     }
 
     this.queryResults = queryResults;
@@ -166,3 +169,11 @@ export default class ContainerQueryModifier extends Modifier<ContainerQueryModif
     }
   }
 }
+
+export {
+  Dimensions,
+  Features,
+  IndexSignatureParameter,
+  Metadata,
+  QueryResults,
+};

package/addon/template-registry.ts

@@ -0,0 +1,16 @@
+import type ContainerQueryComponent from './components/container-query';
+import type AspectRatioHelper from './helpers/aspect-ratio';
+import type HeightHelper from './helpers/height';
+import type WidthHelper from './helpers/width';
+import type ContainerQueryModifier from './modifiers/container-query';
+
+export default interface EmberContainerQueryRegistry {
+  ContainerQuery: typeof ContainerQueryComponent;
+  'aspect-ratio': typeof AspectRatioHelper;
+  'container-query': typeof ContainerQueryModifier;
+  'cq-aspect-ratio': typeof AspectRatioHelper;
+  'cq-height': typeof HeightHelper;
+  'cq-width': typeof WidthHelper;
+  height: typeof HeightHelper;
+  width: typeof WidthHelper;
+}

package/app/helpers/aspect-ratio.js

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

package/app/helpers/cq-aspect-ratio.js

@@ -1 +1,18 @@
-export { default } from 'ember-container-query/helpers/cq-aspect-ratio';
+import { deprecate } from '@ember/debug';
+
+deprecate(
+  'The {{cq-aspect-ratio}} helper has been renamed to {{aspect-ratio}}. Please update the helper name in your template.',
+  false,
+  {
+    for: 'ember-container-query',
+    id: 'ember-container-query.rename-cq-aspect-ratio-helper',
+    since: {
+      available: '3.2.0',
+      enabled: '3.2.0',
+    },
+    until: '4.0.0',
+    url: 'https://github.com/ijlee2/ember-container-query/tree/3.2.0#api',
+  }
+);
+
+export { default } from 'ember-container-query/helpers/aspect-ratio';

package/app/helpers/cq-height.js

@@ -1 +1,18 @@
-export { default } from 'ember-container-query/helpers/cq-height';
+import { deprecate } from '@ember/debug';
+
+deprecate(
+  'The {{cq-height}} helper has been renamed to {{height}}. Please update the helper name in your template.',
+  false,
+  {
+    for: 'ember-container-query',
+    id: 'ember-container-query.rename-cq-height-helper',
+    since: {
+      available: '3.2.0',
+      enabled: '3.2.0',
+    },
+    until: '4.0.0',
+    url: 'https://github.com/ijlee2/ember-container-query/tree/3.2.0#api',
+  }
+);
+
+export { default } from 'ember-container-query/helpers/height';

package/app/helpers/cq-width.js

@@ -1 +1,18 @@
-export { default } from 'ember-container-query/helpers/cq-width';
+import { deprecate } from '@ember/debug';
+
+deprecate(
+  'The {{cq-width}} helper has been renamed to {{width}}. Please update the helper name in your template.',
+  false,
+  {
+    for: 'ember-container-query',
+    id: 'ember-container-query.rename-cq-width-helper',
+    since: {
+      available: '3.2.0',
+      enabled: '3.2.0',
+    },
+    until: '4.0.0',
+    url: 'https://github.com/ijlee2/ember-container-query/tree/3.2.0#api',
+  }
+);
+
+export { default } from 'ember-container-query/helpers/width';

package/app/helpers/height.js

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

package/app/helpers/width.js

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

package/components/container-query.d.ts

@@ -1,18 +1,29 @@
 import Component from '@glimmer/component';
-import type { Dimensions, Features, QueryResults } from 'ember-container-query/modifiers/container-query';
-interface ContainerQueryComponentArgs {
-    dataAttributePrefix?: string;
-    debounce?: number;
-    features?: Features;
-    tagName?: string;
+import type { Dimensions, Features, IndexSignatureParameter, QueryResults } from '../modifiers/container-query';
+interface ContainerQueryComponentSignature<T extends IndexSignatureParameter> {
+    Args: {
+        dataAttributePrefix?: string;
+        debounce?: number;
+        features?: Features<T>;
+        tagName?: string;
+    };
+    Blocks: {
+        default: [
+            {
+                dimensions?: Dimensions;
+                features?: QueryResults<T>;
+            }
+        ];
+    };
+    Element: HTMLElement;
 }
-export default class ContainerQueryComponent extends Component<ContainerQueryComponentArgs> {
+export default class ContainerQueryComponent<T extends IndexSignatureParameter> extends Component<ContainerQueryComponentSignature<T>> {
     dimensions?: Dimensions;
-    queryResults?: QueryResults;
+    queryResults?: QueryResults<T>;
     tagName: string;
     updateState({ dimensions, queryResults, }: {
         dimensions: Dimensions;
-        queryResults: QueryResults;
+        queryResults: QueryResults<T>;
     }): void;
 }
 export {};

package/helpers/aspect-ratio.d.ts

@@ -0,0 +1,13 @@
+import type { Metadata } from '../modifiers/container-query';
+declare const AspectRatioHelper: import("@ember/component/helper").FunctionBasedHelper<{
+    Args: {
+        Positional: [];
+        Named: {
+            max?: number | undefined;
+            min?: number | undefined;
+        };
+    };
+    Return: Metadata;
+}>;
+export default AspectRatioHelper;
+//# sourceMappingURL=aspect-ratio.d.ts.map

package/helpers/height.d.ts

@@ -0,0 +1,13 @@
+import type { Metadata } from '../modifiers/container-query';
+declare const HeightHelper: import("@ember/component/helper").FunctionBasedHelper<{
+    Args: {
+        Positional: [];
+        Named: {
+            max?: number | undefined;
+            min?: number | undefined;
+        };
+    };
+    Return: Metadata;
+}>;
+export default HeightHelper;
+//# sourceMappingURL=height.d.ts.map

package/helpers/width.d.ts

@@ -0,0 +1,13 @@
+import type { Metadata } from '../modifiers/container-query';
+declare const WidthHelper: import("@ember/component/helper").FunctionBasedHelper<{
+    Args: {
+        Positional: [];
+        Named: {
+            max?: number | undefined;
+            min?: number | undefined;
+        };
+    };
+    Return: Metadata;
+}>;
+export default WidthHelper;
+//# sourceMappingURL=width.d.ts.map

package/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ContainerQuery } from './components/container-query';
+export { default as aspectRatio } from './helpers/aspect-ratio';
+export { default as height } from './helpers/height';
+export { default as width } from './helpers/width';
+export { default as containerQuery } from './modifiers/container-query';
+//# sourceMappingURL=index.d.ts.map

package/modifiers/container-query.d.ts

@@ -1,47 +1,44 @@
 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 = {
+type IndexSignatureParameter = string | number | symbol;
+type Dimensions = {
     aspectRatio: number;
     height: number;
     width: number;
 };
-export type QueryResults = {
-    [featureName: string]: boolean;
+type Metadata = {
+    dimension: 'aspectRatio' | 'height' | 'width';
+    max: number;
+    min: number;
 };
-interface ContainerQueryModifierSignature {
+type Features<T extends IndexSignatureParameter> = Record<T, Metadata>;
+type QueryResults<T extends IndexSignatureParameter> = Record<T, boolean>;
+interface ContainerQueryModifierSignature<T extends IndexSignatureParameter> {
     Args: {
         Named: {
             dataAttributePrefix?: string;
             debounce?: number;
-            features?: Features;
+            features?: Features<T>;
             onQuery?: ({ dimensions, queryResults, }: {
                 dimensions: Dimensions;
-                queryResults: QueryResults;
+                queryResults: QueryResults<T>;
             }) => void;
         };
         Positional: [];
     };
     Element: Element;
 }
-export default class ContainerQueryModifier extends Modifier<ContainerQueryModifierSignature> {
+export default class ContainerQueryModifier<T extends IndexSignatureParameter> extends Modifier<ContainerQueryModifierSignature<T>> {
     private readonly resizeObserver;
     dimensions: Dimensions;
-    queryResults: QueryResults;
+    queryResults: QueryResults<T>;
     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;
+    get features(): Features<T>;
+    constructor(owner: unknown, args: ArgsFor<ContainerQueryModifierSignature<T>>);
+    modify(element: Element, _positional: PositionalArgs<ContainerQueryModifierSignature<T>>, named: NamedArgs<ContainerQueryModifierSignature<T>>): void;
     private onResize;
     private registerResizeObserver;
     private queryContainer;
@@ -50,5 +47,5 @@ export default class ContainerQueryModifier extends Modifier<ContainerQueryModif
     private resetDataAttributes;
     private setDataAttributes;
 }
-export {};
+export { Dimensions, Features, IndexSignatureParameter, Metadata, QueryResults, };
 //# sourceMappingURL=container-query.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-container-query",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "Container queries using Ember modifiers",
   "keywords": [
     "container-queries",
@@ -10,6 +10,7 @@
     "ember-addon",
     "ember-octane",
     "emberjs",
+    "glint",
     "responsive-design"
   ],
   "repository": {
@@ -35,7 +36,7 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache --ext=.js,.ts",
     "lint:js:fix": "eslint . --fix",
-    "lint:types": "tsc --noEmit",
+    "lint:types": "glint",
     "prepack": "ember ts:precompile",
     "postpack": "ember ts:clean",
     "start": "ember serve",
@@ -64,18 +65,20 @@
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.9.0",
+    "@ember/test-helpers": "^2.9.3",
     "@embroider/test-setup": "^2.0.2",
+    "@gavant/glint-template-types": "^0.3.0",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
+    "@glint/core": "^v1.0.0-beta.2",
+    "@glint/environment-ember-loose": "^v1.0.0-beta.2",
+    "@glint/template": "^v1.0.0-beta.2",
     "@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",
+    "@tsconfig/ember": "^2.0.0",
     "@types/ember__application": "^4.0.5",
     "@types/ember__array": "^4.0.3",
-    "@types/ember__component": "^4.0.11",
+    "@types/ember__component": "^4.0.12",
     "@types/ember__controller": "^4.0.4",
     "@types/ember__debug": "^4.0.3",
     "@types/ember__destroyable": "^4.0.1",
@@ -85,24 +88,23 @@
     "@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__service": "^4.0.2",
     "@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.3",
     "@types/rsvp": "^4.0.4",
-    "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "@typescript-eslint/parser": "^5.46.1",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
     "broccoli-asset-rev": "^3.0.0",
     "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",
+    "d3-shape": "^3.2.0",
     "ember-a11y-refocus": "^3.0.2",
     "ember-a11y-testing": "^5.1.0",
     "ember-auto-import": "^2.5.0",
@@ -117,8 +119,8 @@
     "ember-load-initializers": "^2.1.2",
     "ember-named-blocks-polyfill": "^0.2.5",
     "ember-page-title": "^7.0.0",
-    "ember-qunit": "^6.0.0",
-    "ember-resolver": "^8.0.3",
+    "ember-qunit": "^6.1.1",
+    "ember-resolver": "^9.0.1",
     "ember-source": "~4.9.3",
     "ember-source-channel-url": "^3.0.0",
     "ember-svg-jar": "^2.4.2",
@@ -126,22 +128,23 @@
     "ember-template-lint-plugin-prettier": "^4.1.0",
     "ember-truth-helpers": "^3.1.1",
     "ember-try": "^2.0.0",
-    "eslint": "^8.29.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-ember": "^11.2.1",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-ember": "^11.4.2",
     "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",
+    "eslint-plugin-typescript-sort-keys": "^2.1.0",
     "lerna-changelog": "^2.2.0",
     "loader.js": "^4.7.0",
     "prettier": "^2.8.1",
     "qunit": "^2.19.3",
     "qunit-dom": "^2.0.0",
-    "stylelint": "^14.16.0",
+    "stylelint": "^14.16.1",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-no-unsupported-browser-features": "^6.0.1",
-    "stylelint-order": "^5.0.0",
+    "stylelint-order": "^6.0.0",
     "typescript": "^4.9.4",
     "webpack": "^5.75.0"
   },

package/template-registry.d.ts

@@ -0,0 +1,16 @@
+import type ContainerQueryComponent from './components/container-query';
+import type AspectRatioHelper from './helpers/aspect-ratio';
+import type HeightHelper from './helpers/height';
+import type WidthHelper from './helpers/width';
+import type ContainerQueryModifier from './modifiers/container-query';
+export default interface EmberContainerQueryRegistry {
+    ContainerQuery: typeof ContainerQueryComponent;
+    'aspect-ratio': typeof AspectRatioHelper;
+    'container-query': typeof ContainerQueryModifier;
+    'cq-aspect-ratio': typeof AspectRatioHelper;
+    'cq-height': typeof HeightHelper;
+    'cq-width': typeof WidthHelper;
+    height: typeof HeightHelper;
+    width: typeof WidthHelper;
+}
+//# sourceMappingURL=template-registry.d.ts.map

package/tsconfig.json

@@ -40,5 +40,8 @@
     "types/**/*",
     "test-support/**/*",
     "addon-test-support/**/*"
-  ]
+  ],
+  "glint": {
+    "environment": "ember-loose"
+  }
 }

package/types/dummy/index.d.ts

@@ -0,0 +1,33 @@
+// Add any types here that you need for local development only.
+// These will *not* be published as part of your addon, so be careful that your published code does not rely on them!
+
+import '@glint/environment-ember-loose';
+
+import SvgJarHelper from '@gavant/glint-template-types/types/ember-svg-jar/helpers/svg-jar';
+import AndHelper from '@gavant/glint-template-types/types/ember-truth-helpers/helpers/and';
+import OrHelper from '@gavant/glint-template-types/types/ember-truth-helpers/helpers/or';
+import { ComponentLike, HelperLike } from '@glint/template';
+import type EmberContainerQueryRegistry from 'ember-container-query/template-registry';
+
+type NavigationNarratorComponent = ComponentLike<{
+  Args: {
+    skipTo: string;
+  };
+}>;
+
+type PageTitleHelper = HelperLike<{
+  Args: { Positional: [title: string] };
+  Return: void;
+}>;
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry extends EmberContainerQueryRegistry {
+    // Add any registry entries from other addons here that your addon itself uses (in non-strict mode templates)
+    // See https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons
+    NavigationNarrator: NavigationNarratorComponent;
+    and: typeof AndHelper;
+    or: typeof OrHelper;
+    'page-title': PageTitleHelper;
+    'svg-jar': typeof SvgJarHelper;
+  }
+}

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

@@ -1,15 +0,0 @@
-import { helper } from '@ember/component/helper';
-import type { Metadata } from 'ember-container-query/modifiers/container-query';
-
-function cqAspectRatio(
-  positional: unknown[],
-  named: Record<string, unknown>
-): Metadata {
-  const dimension = 'aspectRatio';
-  const max = (named['max'] as number | undefined) ?? Infinity;
-  const min = (named['min'] as number | undefined) ?? 0;
-
-  return { dimension, max, min };
-}
-
-export default helper(cqAspectRatio);

package/addon/helpers/cq-height.ts

@@ -1,15 +0,0 @@
-import { helper } from '@ember/component/helper';
-import type { Metadata } from 'ember-container-query/modifiers/container-query';
-
-function cqHeight(
-  positional: unknown[],
-  named: Record<string, unknown>
-): Metadata {
-  const dimension = 'height';
-  const max = (named['max'] as number | undefined) ?? Infinity;
-  const min = (named['min'] as number | undefined) ?? 0;
-
-  return { dimension, max, min };
-}
-
-export default helper(cqHeight);

package/addon/helpers/cq-width.ts

@@ -1,15 +0,0 @@
-import { helper } from '@ember/component/helper';
-import type { Metadata } from 'ember-container-query/modifiers/container-query';
-
-function cqWidth(
-  positional: unknown[],
-  named: Record<string, unknown>
-): Metadata {
-  const dimension = 'width';
-  const max = (named['max'] as number | undefined) ?? Infinity;
-  const min = (named['min'] as number | undefined) ?? 0;
-
-  return { dimension, max, min };
-}
-
-export default helper(cqWidth);

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

@@ -1,10 +0,0 @@
-import type { Metadata } from 'ember-container-query/modifiers/container-query';
-declare const _default: import("@ember/component/helper").FunctionBasedHelper<{
-    Args: {
-        Positional: unknown[];
-        Named: Record<string, unknown>;
-    };
-    Return: Metadata;
-}>;
-export default _default;
-//# sourceMappingURL=cq-aspect-ratio.d.ts.map

package/helpers/cq-height.d.ts

@@ -1,10 +0,0 @@
-import type { Metadata } from 'ember-container-query/modifiers/container-query';
-declare const _default: import("@ember/component/helper").FunctionBasedHelper<{
-    Args: {
-        Positional: unknown[];
-        Named: Record<string, unknown>;
-    };
-    Return: Metadata;
-}>;
-export default _default;
-//# sourceMappingURL=cq-height.d.ts.map

package/helpers/cq-width.d.ts

@@ -1,10 +0,0 @@
-import type { Metadata } from 'ember-container-query/modifiers/container-query';
-declare const _default: import("@ember/component/helper").FunctionBasedHelper<{
-    Args: {
-        Positional: unknown[];
-        Named: Record<string, unknown>;
-    };
-    Return: Metadata;
-}>;
-export default _default;
-//# sourceMappingURL=cq-width.d.ts.map