ember-container-query 2.0.2 → 2.1.1

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,45 @@
+## 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
+* [#119](https://github.com/ijlee2/ember-container-query/pull/119) Introduced TypeScript (Part 3) ([@ijlee2](https://github.com/ijlee2))
+
+### Internal
+* [#123](https://github.com/ijlee2/ember-container-query/pull/123) Updated GitHub actions to v3 ([@ijlee2](https://github.com/ijlee2))
+* [#122](https://github.com/ijlee2/ember-container-query/pull/122) Updated Node version in CI to 16 ([@ijlee2](https://github.com/ijlee2))
+* [#121](https://github.com/ijlee2/ember-container-query/pull/121) Updated ember-on-resize-modifier to v1.1.0 ([@ijlee2](https://github.com/ijlee2))
+* [#117](https://github.com/ijlee2/ember-container-query/pull/117) Updated dependencies to their latest version ([@ijlee2](https://github.com/ijlee2))
+* [#115](https://github.com/ijlee2/ember-container-query/pull/115) Updated eslint to v8 ([@ijlee2](https://github.com/ijlee2))
+
+### Documentation
+* [#120](https://github.com/ijlee2/ember-container-query/pull/120) Introduced TypeScript (Part 4) ([@ijlee2](https://github.com/ijlee2))
+* [#118](https://github.com/ijlee2/ember-container-query/pull/118) Introduced TypeScript (Part 2) ([@ijlee2](https://github.com/ijlee2))
+* [#114](https://github.com/ijlee2/ember-container-query/pull/114) Introduced TypeScript (Part 1) ([@ijlee2](https://github.com/ijlee2))
+* [#116](https://github.com/ijlee2/ember-container-query/pull/116) Updated demo app ([@ijlee2](https://github.com/ijlee2))
+
+### Committers: 1
+- Isaac Lee ([@ijlee2](https://github.com/ijlee2))
+
+
 ## 2.0.2 (2022-04-25)
 
 ### Bug Fix

package/addon/components/container-query.hbs

@@ -2,17 +2,17 @@
   <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
+      dimensions=this.dimensions
       features=this.queryResults
-      dimensions=(hash
-        aspectRatio=this.aspectRatio
-        height=this.height
-        width=this.width
-      )
     )}}
   </Tag>
 {{/let}}

package/addon/components/container-query.ts

@@ -0,0 +1,34 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import type {
+  Dimensions,
+  Features,
+  QueryResults,
+} from 'ember-container-query/modifiers/container-query';
+
+interface ContainerQueryComponentArgs {
+  dataAttributePrefix?: string;
+  debounce?: number;
+  features?: Features;
+  tagName?: string;
+}
+
+export default class ContainerQueryComponent extends Component<ContainerQueryComponentArgs> {
+  @tracked dimensions?: Dimensions;
+  @tracked queryResults?: QueryResults;
+
+  // The dynamic tag is restricted to be immutable
+  tagName = this.args.tagName ?? 'div';
+
+  @action updateState({
+    dimensions,
+    queryResults,
+  }: {
+    dimensions: Dimensions;
+    queryResults: QueryResults;
+  }): void {
+    this.dimensions = dimensions;
+    this.queryResults = queryResults;
+  }
+}

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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/addon/modifiers/container-query.ts

@@ -0,0 +1,170 @@
+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> {
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  /* @ts-ignore */
+  @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

@@ -0,0 +1,19 @@
+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;
+}
+export default class ContainerQueryComponent extends Component<ContainerQueryComponentArgs> {
+    dimensions?: Dimensions;
+    queryResults?: QueryResults;
+    tagName: string;
+    updateState({ dimensions, queryResults, }: {
+        dimensions: Dimensions;
+        queryResults: QueryResults;
+    }): void;
+}
+export {};
+//# sourceMappingURL=container-query.d.ts.map

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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,10 @@
+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

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.0.2",
+  "version": "2.1.1",
   "description": "Container queries using Ember modifiers",
   "keywords": [
     "container-queries",
@@ -26,13 +26,18 @@
     "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",
+    "lint:js": "eslint . --cache --ext=.js,.ts",
     "lint:js:fix": "eslint . --fix",
+    "lint:types": "tsc --noEmit",
+    "prepack": "ember ts:precompile",
+    "postpack": "ember ts:clean",
     "start": "ember serve",
     "test": "DEVICE='w3-h3' ember test",
     "test:ember": "ember test",
@@ -49,30 +54,58 @@
     }
   },
   "dependencies": {
-    "@ember/render-modifiers": "^2.0.4",
     "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.0.1",
+    "ember-cli-htmlbars": "^6.1.1",
+    "ember-cli-typescript": "^5.2.1",
     "ember-element-helper": "^0.6.1",
-    "ember-on-resize-modifier": "^1.0.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.7.0",
-    "@embroider/test-setup": "^1.6.0",
+    "@ember/test-helpers": "^2.8.1",
+    "@embroider/test-setup": "^2.0.2",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@percy/cli": "^1.1.0",
-    "@percy/ember": "^3.0.0",
-    "babel-eslint": "^10.1.0",
+    "@percy/cli": "^1.16.0",
+    "@percy/ember": "^4.0.0",
+    "@types/ember-qunit": "^5.0.2",
+    "@types/ember-resolver": "^5.0.13",
+    "@types/ember__application": "^4.0.4",
+    "@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.1",
+    "@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.3",
+    "@types/rsvp": "^4.0.4",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
     "broccoli-asset-rev": "^3.0.0",
-    "d3-array": "^3.1.6",
+    "concurrently": "^7.6.0",
+    "d3-array": "^3.2.0",
     "d3-axis": "^3.0.0",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.1.0",
+    "ember-a11y-refocus": "^3.0.2",
     "ember-a11y-testing": "^5.0.0",
-    "ember-auto-import": "^2.4.1",
-    "ember-cli": "~4.3.0",
+    "ember-auto-import": "^2.5.0",
+    "ember-cli": "~4.8.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-dependency-lint": "^2.0.1",
     "ember-cli-inject-live-reload": "^2.1.0",
@@ -81,31 +114,35 @@
     "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.3.0",
+    "ember-source": "~4.8.0",
     "ember-source-channel-url": "^3.0.0",
-    "ember-svg-jar": "^2.3.4",
-    "ember-template-lint": "^4.5.0",
-    "ember-test-selectors": "^6.0.0",
-    "ember-truth-helpers": "^3.0.0",
+    "ember-svg-jar": "^2.4.2",
+    "ember-template-lint": "^5.0.2",
+    "ember-truth-helpers": "^3.1.1",
     "ember-try": "^2.0.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-ember": "^10.6.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-ember": "^11.2.1",
+    "eslint-plugin-n": "^15.5.1",
+    "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.18.2",
+    "prettier": "^2.8.0",
+    "qunit": "^2.19.3",
     "qunit-dom": "^2.0.0",
-    "webpack": "^5.72.0"
+    "stylelint": "^14.15.0",
+    "stylelint-config-standard": "^29.0.0",
+    "stylelint-no-unsupported-browser-features": "^6.0.1",
+    "stylelint-order": "^5.0.0",
+    "typescript": "^4.9.3",
+    "webpack": "^5.75.0"
   },
   "engines": {
     "node": "12.* || 14.* || >= 16"

package/tsconfig.json

@@ -0,0 +1,104 @@
+{
+  "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.
+    "baseUrl": ".",
+    "paths": {
+      "dummy/tests/*": [
+        "tests/*"
+      ],
+      "dummy/*": [
+        "tests/dummy/app/*",
+        "app/*"
+      ],
+      "ember-container-query": [
+        "addon"
+      ],
+      "ember-container-query/*": [
+        "addon/*"
+      ],
+      "ember-container-query/test-support": [
+        "addon-test-support"
+      ],
+      "ember-container-query/test-support/*": [
+        "addon-test-support/*"
+      ],
+      "*": [
+        "types/*"
+      ]
+    }
+  },
+  "include": [
+    "app/**/*",
+    "addon/**/*",
+    "tests/**/*",
+    "types/**/*",
+    "test-support/**/*",
+    "addon-test-support/**/*"
+  ]
+}

package/types/global.d.ts

@@ -0,0 +1,6 @@
+// Types for compiled templates
+declare module 'ember-container-query/templates/*' {
+  import { TemplateFactory } from 'htmlbars-inline-precompile';
+  const tmpl: TemplateFactory;
+  export default tmpl;
+}

package/addon/components/container-query.js

@@ -1,84 +0,0 @@
-import { action } from '@ember/object';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { debounce } from '@ember/runloop';
-
-export default class ContainerQueryComponent extends Component {
-  @tracked queryResults = {};
-  @tracked aspectRatio;
-  @tracked height;
-  @tracked width;
-
-  get features() {
-    return this.args.features ?? {};
-  }
-
-  get dataAttributePrefix() {
-    return this.args.dataAttributePrefix ?? 'container-query';
-  }
-
-  get debounce() {
-    return this.args.debounce ?? 0;
-  }
-
-  // The dynamic tag is restricted to be immutable
-  tagName = this.args.tagName ?? 'div';
-
-  @action onResize(resizeObserverEntry) {
-    const element = resizeObserverEntry.target;
-
-    if (this.debounce > 0) {
-      debounce(this, this.queryContainer, element, this.debounce);
-      return;
-    }
-
-    this.queryContainer(element);
-  }
-
-  @action queryContainer(element) {
-    this.measureDimensions(element);
-    this.evaluateQueries();
-    this.setDataAttributes(element);
-  }
-
-  measureDimensions(element) {
-    this.height = element.clientHeight;
-    this.width = element.clientWidth;
-    this.aspectRatio = this.width / this.height;
-  }
-
-  evaluateQueries() {
-    const 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;
-    }
-
-    this.queryResults = queryResults;
-  }
-
-  setDataAttributes(element) {
-    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.js

@@ -1,10 +0,0 @@
-import { helper } from '@ember/component/helper';
-
-function cqAspectRatio(params, hash) {
-  const dimension = 'aspectRatio';
-  const { min = 0, max = Infinity } = hash;
-
-  return { dimension, min, max };
-}
-
-export default helper(cqAspectRatio);

package/addon/helpers/cq-height.js

@@ -1,10 +0,0 @@
-import { helper } from '@ember/component/helper';
-
-function cqHeight(params, hash) {
-  const dimension = 'height';
-  const { min = 0, max = Infinity } = hash;
-
-  return { dimension, min, max };
-}
-
-export default helper(cqHeight);

package/addon/helpers/cq-width.js

@@ -1,10 +0,0 @@
-import { helper } from '@ember/component/helper';
-
-function cqWidth(params, hash) {
-  const dimension = 'width';
-  const { min = 0, max = Infinity } = hash;
-
-  return { dimension, min, max };
-}
-
-export default helper(cqWidth);