ember-container-query 3.2.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,16 +0,0 @@
-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/components/container-query.js

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

package/app/helpers/aspect-ratio.js

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

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

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

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

package/app/helpers/width.js

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

package/app/modifiers/container-query.js

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

package/index.d.ts

@@ -1,6 +0,0 @@
-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/index.js

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

package/template-registry.d.ts

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

@@ -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;
-}