ember-container-query 2.0.2 → 2.1.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 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.js → container-query.ts}

@@ -3,28 +3,49 @@ 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;
+type Metadata = {
+  dimension: 'aspectRatio' | 'height' | 'width';
+  max: number;
+  min: number;
+};
+
+type Features = {
+  [featureName: string]: Metadata;
+};
+
+type QueryResults = {
+  [featureName: string]: boolean;
+};
+
+interface ContainerQueryComponentArgs {
+  dataAttributePrefix?: string;
+  debounce?: number;
+  features?: Features;
+  tagName?: string;
+}
+
+export default class ContainerQueryComponent extends Component<ContainerQueryComponentArgs> {
+  @tracked queryResults = {} as QueryResults;
+  @tracked aspectRatio?: number;
+  @tracked height?: number;
+  @tracked width?: number;
 
-  get features() {
+  get features(): Features {
     return this.args.features ?? {};
   }
 
-  get dataAttributePrefix() {
+  get dataAttributePrefix(): string {
     return this.args.dataAttributePrefix ?? 'container-query';
   }
 
-  get debounce() {
+  get debounce(): number {
     return this.args.debounce ?? 0;
   }
 
   // The dynamic tag is restricted to be immutable
   tagName = this.args.tagName ?? 'div';
 
-  @action onResize(resizeObserverEntry) {
+  @action onResize(resizeObserverEntry: ResizeObserverEntry): void {
     const element = resizeObserverEntry.target;
 
     if (this.debounce > 0) {
@@ -35,24 +56,24 @@ export default class ContainerQueryComponent extends Component {
     this.queryContainer(element);
   }
 
-  @action queryContainer(element) {
+  @action queryContainer(element: Element): void {
     this.measureDimensions(element);
     this.evaluateQueries();
     this.setDataAttributes(element);
   }
 
-  measureDimensions(element) {
+  measureDimensions(element: Element): void {
     this.height = element.clientHeight;
     this.width = element.clientWidth;
     this.aspectRatio = this.width / this.height;
   }
 
-  evaluateQueries() {
-    const queryResults = {};
+  evaluateQueries(): void {
+    const queryResults = {} as QueryResults;
 
     for (const [featureName, metadata] of Object.entries(this.features)) {
       const { dimension, min, max } = metadata;
-      const value = this[dimension];
+      const value = this[dimension]!;
 
       queryResults[featureName] = min <= value && value < max;
     }
@@ -60,7 +81,7 @@ export default class ContainerQueryComponent extends Component {
     this.queryResults = queryResults;
   }
 
-  setDataAttributes(element) {
+  setDataAttributes(element: Element): void {
     const prefix = this.dataAttributePrefix;
 
     for (const [featureName, meetsFeature] of Object.entries(

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

@@ -0,0 +1,20 @@
+import { helper } from '@ember/component/helper';
+
+type Metadata = {
+  dimension: 'aspectRatio' | 'height' | 'width';
+  max: number;
+  min: number;
+};
+
+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,20 @@
+import { helper } from '@ember/component/helper';
+
+type Metadata = {
+  dimension: 'aspectRatio' | 'height' | 'width';
+  max: number;
+  min: number;
+};
+
+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,20 @@
+import { helper } from '@ember/component/helper';
+
+type Metadata = {
+  dimension: 'aspectRatio' | 'height' | 'width';
+  max: number;
+  min: number;
+};
+
+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/components/container-query.d.ts

@@ -0,0 +1,35 @@
+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;
+};
+interface ContainerQueryComponentArgs {
+    dataAttributePrefix?: string;
+    debounce?: number;
+    features?: Features;
+    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;
+    tagName: string;
+    onResize(resizeObserverEntry: ResizeObserverEntry): void;
+    queryContainer(element: Element): void;
+    measureDimensions(element: Element): void;
+    evaluateQueries(): void;
+    setDataAttributes(element: Element): void;
+}
+export {};
+//# sourceMappingURL=container-query.d.ts.map

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

@@ -0,0 +1,14 @@
+declare type Metadata = {
+    dimension: 'aspectRatio' | 'height' | 'width';
+    max: number;
+    min: number;
+};
+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,14 @@
+declare type Metadata = {
+    dimension: 'aspectRatio' | 'height' | 'width';
+    max: number;
+    min: number;
+};
+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,14 @@
+declare type Metadata = {
+    dimension: 'aspectRatio' | 'height' | 'width';
+    max: number;
+    min: number;
+};
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-container-query",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Container queries using Ember modifiers",
   "keywords": [
     "container-queries",
@@ -31,8 +31,11 @@
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*: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",
@@ -52,27 +55,52 @@
     "@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-element-helper": "^0.6.1",
-    "ember-on-resize-modifier": "^1.0.0"
+    "ember-on-resize-modifier": "^1.1.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": "^1.7.1",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@percy/cli": "^1.1.0",
+    "@percy/cli": "^1.2.1",
     "@percy/ember": "^3.0.0",
-    "babel-eslint": "^10.1.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",
+    "@types/htmlbars-inline-precompile": "^3.0.0",
+    "@types/qunit": "^2.19.0",
+    "@types/rsvp": "^4.0.4",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
     "broccoli-asset-rev": "^3.0.0",
     "d3-array": "^3.1.6",
     "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.1",
-    "ember-cli": "~4.3.0",
+    "ember-auto-import": "^2.4.2",
+    "ember-cli": "~4.4.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-dependency-lint": "^2.0.1",
     "ember-cli-inject-live-reload": "^2.1.0",
@@ -87,25 +115,26 @@
     "ember-page-title": "^7.0.0",
     "ember-qunit": "^5.1.5",
     "ember-resolver": "^8.0.3",
-    "ember-source": "~4.3.0",
+    "ember-source": "~4.4.0",
     "ember-source-channel-url": "^3.0.0",
     "ember-svg-jar": "^2.3.4",
-    "ember-template-lint": "^4.5.0",
+    "ember-template-lint": "^4.10.0",
     "ember-test-selectors": "^6.0.0",
     "ember-truth-helpers": "^3.0.0",
     "ember-try": "^2.0.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-ember": "^10.6.0",
+    "eslint-plugin-ember": "^10.6.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.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",
+    "qunit": "^2.19.1",
     "qunit-dom": "^2.0.0",
-    "webpack": "^5.72.0"
+    "typescript": "^4.7.2",
+    "webpack": "^5.73.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/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);