ember-container-query 3.1.0 → 4.0.0-alpha.1

package/addon/modifiers/container-query.ts

@@ -1,179 +0,0 @@
-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';
-
-type IndexSignatureParameter = string | number | symbol;
-
-type Dimensions = {
-  aspectRatio: number;
-  height: number;
-  width: number;
-};
-
-type Metadata = {
-  dimension: 'aspectRatio' | 'height' | 'width';
-  max: number;
-  min: number;
-};
-
-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<T>;
-      onQuery?: ({
-        dimensions,
-        queryResults,
-      }: {
-        dimensions: Dimensions;
-        queryResults: QueryResults<T>;
-      }) => void;
-    };
-    Positional: [];
-  };
-  Element: Element;
-}
-
-export default class ContainerQueryModifier<
-  T extends IndexSignatureParameter
-> extends Modifier<ContainerQueryModifierSignature<T>> {
-  @service private declare readonly resizeObserver;
-
-  dimensions!: Dimensions;
-  queryResults!: QueryResults<T>;
-
-  private _dataAttributes: string[] = [];
-  private _element?: Element;
-  private _named!: NamedArgs<ContainerQueryModifierSignature<T>>;
-
-  get dataAttributePrefix(): string {
-    return this._named.dataAttributePrefix ?? 'container-query';
-  }
-
-  get debounce(): number {
-    return this._named.debounce ?? 0;
-  }
-
-  get features(): Features<T> {
-    return this._named.features ?? ({} as Features<T>);
-  }
-
-  constructor(
-    owner: unknown,
-    args: ArgsFor<ContainerQueryModifierSignature<T>>
-  ) {
-    super(owner, args);
-
-    registerDestructor(this, () => {
-      this.resizeObserver.unobserve(this._element, this.onResize);
-    });
-  }
-
-  modify(
-    element: Element,
-    _positional: PositionalArgs<ContainerQueryModifierSignature<T>>,
-    named: NamedArgs<ContainerQueryModifierSignature<T>>
-  ): 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<T>;
-
-    for (const [featureName, metadata] of Object.entries(this.features)) {
-      const { dimension, min, max } = metadata as Metadata;
-      const value = this.dimensions[dimension];
-
-      queryResults[featureName as T] = 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);
-    }
-  }
-}
-
-export {
-  Dimensions,
-  Features,
-  IndexSignatureParameter,
-  Metadata,
-  QueryResults,
-};

package/addon/template-registry.ts

@@ -1,13 +0,0 @@
-import type ContainerQueryComponent from 'ember-container-query/components/container-query';
-import type CqAspectRatioHelper from 'ember-container-query/helpers/cq-aspect-ratio';
-import type CqHeightHelper from 'ember-container-query/helpers/cq-height';
-import type CqWidthHelper from 'ember-container-query/helpers/cq-width';
-import type ContainerQueryModifier from 'ember-container-query/modifiers/container-query';
-
-export default interface EmberContainerQueryRegistry {
-  ContainerQuery: typeof ContainerQueryComponent;
-  'container-query': typeof ContainerQueryModifier;
-  'cq-aspect-ratio': typeof CqAspectRatioHelper;
-  'cq-height': typeof CqHeightHelper;
-  'cq-width': typeof CqWidthHelper;
-}

package/app/components/container-query.js

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

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

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

package/app/helpers/cq-height.js

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

package/app/helpers/cq-width.js

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

package/app/modifiers/container-query.js

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

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

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

package/helpers/cq-height.d.ts

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

package/helpers/cq-width.d.ts

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

package/index.js

@@ -1,5 +0,0 @@
-'use strict';
-
-module.exports = {
-  name: require('./package').name,
-};

package/template-registry.d.ts

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

package/tsconfig.json

@@ -1,47 +0,0 @@
-{
-  "extends": "@tsconfig/ember/tsconfig.json",
-  "compilerOptions": {
-    // Don't check the types of dependencies
-    "skipLibCheck": 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/**/*"
-  ],
-  "glint": {
-    "environment": "ember-loose"
-  }
-}

package/types/dummy/index.d.ts

@@ -1,33 +0,0 @@
-// 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/types/global.d.ts

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