Make types public

.eslintrc.js

@@ -6,7 +6,6 @@ const nodeFiles = [
   '.prettierrc.js',
   '.template-lintrc.{js,ts}',
   'ember-cli-build.{js,ts}',
-  'index.{js,ts}',
   'testem.{js,ts}',
   'blueprints/*/index.{js,ts}',
   'config/**/*.{js,ts}',

README.md

@@ -338,7 +338,7 @@ If you want to render chunks of template conditionally, use this syntax:
 
 The first yield argument `EQ` is an object with current element query attributes. Keys are attribute names and values are `true`. Non-matching attributes are undefined. Thus,  `{{#if EQ.from-m}}` renders only when the element is of size `m` or larger.
 
-The second argument `EQInfo` is the same hash that is passed to the [onResize callback](#onresize-callback).
+The second argument `EQInfo` is the same object that is passed to the [onResize callback](#onresize-callback) described below.
 
 
 
@@ -351,17 +351,17 @@ You can pass a callback to the `onResize` argument and it will be called wheneve
 
 ```js
 @action
-reportResize(info) {
-  info.element          // => current element
-  info.width            // => current element's width in px (number)
-  info.height           // => current element's height in px (number)
-  info.ratio            // => current element's aspect ratio (width/height, number)
-  info.size             // => current element's width size (string or undefined)
-  info.sizeHeight       // => current element's height size (string or undefined)
-  info.dimension        // => current dimension ('width', 'height' or 'both')
-  info.prefix           // => current prefix (string or undefined)
-  info.attributes       // => matching element query attributes in array form: ['from-xxs', 'from-xs', ...]
-  info.attributesRecord // => matching element query attributes in object form: {'from-xxs': true, 'from-xs': true, ...}
+reportResize(eqInfo) {
+  eqInfo.element          // => current element
+  eqInfo.width            // => current element's width in px (number)
+  eqInfo.height           // => current element's height in px (number)
+  eqInfo.ratio            // => current element's aspect ratio (width/height, number)
+  eqInfo.size             // => current element's width size (string or undefined)
+  eqInfo.sizeHeight       // => current element's height size (string or undefined)
+  eqInfo.dimension        // => current dimension ('width', 'height' or 'both')
+  eqInfo.prefix           // => current prefix (string or undefined)
+  eqInfo.attributes       // => matching element query attributes in array form: ['from-xxs', 'from-xs', ...]
+  eqInfo.attributesRecord // => matching element query attributes in object form: {'from-xxs': true, 'from-xs': true, ...}
 }
 ```
 

addon/-private/component.ts

@@ -1,26 +1,18 @@
 import Component from '@glimmer/component';
-import { CallbackArgs, Sizes, Dimension } from './modifier';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { ComponentArgs, EQInfo } from 'ember-element-query';
 
-interface ElementQueryArgs {
-  dimension?: Dimension;
-  isDisabled?: boolean;
-  prefix?: string;
-  sizes?: Sizes;
-  sizesHeight?: Sizes | true;
-  onResize?: (params: CallbackArgs) => void;
-}
-export default class ElementQuery extends Component<ElementQueryArgs> {
+export default class ElementQuery extends Component<ComponentArgs> {
   @tracked
-  params?: CallbackArgs;
+  eqInfo?: EQInfo;
 
   @action
-  onResize(params: CallbackArgs): void {
-    this.params = params;
+  onResize(eqInfo: EQInfo): void {
+    this.eqInfo = eqInfo;
 
     if (this.args.onResize) {
-      this.args.onResize(params);
+      this.args.onResize(eqInfo);
     }
   }
 }

addon/-private/modifier.ts

@@ -1,84 +1,38 @@
-import Modifier, { ModifierArgs } from 'ember-modifier';
+import Modifier from 'ember-modifier';
 import { observeResize } from 'ember-resize-observer-modifier/modifiers/observe-resize';
 import { action } from '@ember/object';
 import window from 'ember-window-mock';
-
-interface Args extends ModifierArgs {
-  positional: [];
-  named: {
-    onResize?: (params: CallbackArgs) => void;
-    sizes?: Sizes;
-    sizesHeight?: Sizes;
-    prefix?: string;
-    dimension?: Dimension;
-    isDisabled?: boolean;
-  };
-}
-
-export interface CallbackArgs {
-  element: ElementStub;
-  width: number;
-  height: number;
-  ratio: number;
-  size?: string;
-  sizeHeight?: string;
-  dimension: Dimension;
-  prefix?: string;
-  attributes: string[];
-  attributesRecord: Record<string, true>;
-}
-
-export type Sizes = Record<string, number>;
-
+import {
+  EQInfo,
+  ModifierArgs,
+  Sizes,
+  SIZES_DEFAULT,
+  SIZES_HEIGHT_DEFAULT,
+} from 'ember-element-query';
 export interface SizeObject {
   name: string;
   value: number;
   index: number;
 }
 
-export interface ElementStub {
-  clientWidth?: number;
-  clientHeight?: number;
-  setAttribute?: (qualifiedName: string, value: string) => void;
-  removeAttribute?: (qualifiedName: string) => void;
-}
+// export interface ElementStub {
+//   clientWidth?: number;
+//   clientHeight?: number;
+//   setAttribute?: (qualifiedName: string, value: string) => void;
+//   removeAttribute?: (qualifiedName: string) => void;
+// }
 
-export type Dimension = 'width' | 'height' | 'both';
 export type RangeDirection = 'at' | 'from' | 'to';
 
-// prettier-ignore
-const SIZES_DEFAULT: Sizes = {
-  xxs:  0,
-  xs:   200,
-  s:    400,
-  m:    600,
-  l:    800,
-  xl:   1000,
-  xxl:  1200,
-  xxxl: 1400,
-};
-
-// prettier-ignore
-const SIZES_HEIGHT_DEFAULT: Sizes = {
-  'xxs-height':  0,
-  'xs-height':   200,
-  's-height':    400,
-  'm-height':    600,
-  'l-height':    800,
-  'xl-height':   1000,
-  'xxl-height':  1200,
-  'xxxl-height': 1400,
-};
-
-export default class ElementQueryModifier extends Modifier<Args> {
+export default class ElementQueryModifier extends Modifier<ModifierArgs> {
   // -------------------
   // Properties
   // -------------------
 
   sizesDefault: Sizes = SIZES_DEFAULT;
   sizesHeightDefault: Sizes = SIZES_HEIGHT_DEFAULT;
 
-  _element?: ElementStub; // For some reason, this.element is not always available
+  _element?: HTMLElement; // For some reason, this.element is not always available
   teardownResizeObserver?: () => void;
 
   // -------------------
@@ -87,12 +41,12 @@ export default class ElementQueryModifier extends Modifier<Args> {
 
   get width(): number {
     if (!this._element) throw new Error('Expected this._element to be available');
-    return this._element.clientWidth!;
+    return this._element.clientWidth;
   }
 
   get height(): number {
     if (!this._element) throw new Error('Expected this._element to be available');
-    return this._element.clientHeight!;
+    return this._element.clientHeight;
   }
 
   get ratio(): number {
@@ -228,7 +182,7 @@ export default class ElementQueryModifier extends Modifier<Args> {
     ];
   }
 
-  get yield(): CallbackArgs {
+  get yield(): EQInfo {
     if (!this._element) throw new Error('Expected this._element to be available');
 
     return {
@@ -262,12 +216,12 @@ export default class ElementQueryModifier extends Modifier<Args> {
   applyAttributesToElement(): void {
     this.attributes.forEach((attribute) => {
       if (!this._element) throw new Error('Expected this._element to be available');
-      this._element.setAttribute!(attribute, '');
+      this._element.setAttribute(attribute, '');
     });
 
     this.attributesToRemove.forEach((attribute) => {
       if (!this._element) throw new Error('Expected this._element to be available');
-      this._element.removeAttribute!(attribute);
+      this._element.removeAttribute(attribute);
     });
   }
 

addon/index.ts

@@ -0,0 +1,66 @@
+import { ModifierArgs as ModifierArgsBase } from 'ember-modifier';
+
+export { default as component } from './-private/component';
+export { default as modifier } from './-private/modifier';
+
+export type Dimension = 'width' | 'height' | 'both';
+
+export type Sizes = Record<string, number>;
+
+export interface EQInfo {
+  element: HTMLElement;
+  width: number;
+  height: number;
+  ratio: number;
+  size?: string;
+  sizeHeight?: string;
+  dimension: Dimension;
+  prefix?: string;
+  attributes: string[];
+  attributesRecord: Record<string, true>;
+}
+
+export interface ModifierArgs extends ModifierArgsBase {
+  positional: [];
+  named: {
+    onResize?: (eqInfo: EQInfo) => void;
+    sizes?: Sizes;
+    sizesHeight?: Sizes;
+    prefix?: string;
+    dimension?: Dimension;
+    isDisabled?: boolean;
+  };
+}
+
+export interface ComponentArgs {
+  dimension?: Dimension;
+  isDisabled?: boolean;
+  prefix?: string;
+  sizes?: Sizes;
+  sizesHeight?: Sizes | true;
+  onResize?: (eqInfo: EQInfo) => void;
+}
+
+// prettier-ignore
+export const SIZES_DEFAULT: Sizes = {
+  xxs:  0,
+  xs:   200,
+  s:    400,
+  m:    600,
+  l:    800,
+  xl:   1000,
+  xxl:  1200,
+  xxxl: 1400,
+};
+
+// prettier-ignore
+export const SIZES_HEIGHT_DEFAULT: Sizes = {
+  'xxs-height':  0,
+  'xs-height':   200,
+  's-height':    400,
+  'm-height':    600,
+  'l-height':    800,
+  'xl-height':   1000,
+  'xxl-height':  1200,
+  'xxxl-height': 1400,
+};

app/templates/components/element-query.hbs

@@ -12,5 +12,5 @@
 
   ...attributes
 >
-  {{yield this.params.attributesRecord this.params}}
+  {{yield this.eqInfo.attributesRecord this.eqInfo}}
 </div>

tests/integration/component-test.ts

@@ -4,7 +4,7 @@ import { render, waitUntil, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import sinon, { SinonSpy } from 'sinon';
 import { TestContext } from 'ember-test-helpers';
-import { Sizes } from 'ember-element-query/-private/modifier';
+import { Sizes } from 'ember-element-query';
 import pause from '../helpers/pause';
 import { setupWindowMock } from 'ember-window-mock/test-support';
 

tests/integration/modifier-test.ts

@@ -4,7 +4,7 @@ import { render, waitUntil, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import sinon, { SinonSpy } from 'sinon';
 import { TestContext } from 'ember-test-helpers';
-import { Sizes } from 'ember-element-query/-private/modifier';
+import { Sizes } from 'ember-element-query';
 import pause from '../helpers/pause';
 import { setupWindowMock } from 'ember-window-mock/test-support';