Renamed the helpers by dropping the cq prefix

README.md

@@ -132,9 +132,9 @@ API
 The addon provides 1 Glimmer component and 3 helpers:
 
 - `<ContainerQuery>`
-- `{{cq-aspect-ratio}}`
-- `{{cq-height}}`
-- `{{cq-width}}`
+- `{{aspect-ratio}}`
+- `{{height}}`
+- `{{width}}`
 
 Starting `v2.1.1`, the addon extracts the core logic into a modifier. This lets you opt out of using the provided component.
 
@@ -186,7 +186,7 @@ You can consume these values in your app or addon.
 
 
 <details>
-<summary><code>{{cq-aspect-ratio}}</code>, <code>{{cq-height}}</code>, <code>{{cq-width}}</code></summary>
+<summary><code>{{aspect-ratio}}</code>, <code>{{height}}</code>, <code>{{width}}</code></summary>
 
 ### Arguments
 
@@ -239,8 +239,8 @@ Let's look at the code that created the video demo above.
 ```hbs
 <ContainerQuery
   @features={{hash
-    large=(cq-width min=960)
-    tall=(cq-height min=400)
+    large=(width min=960)
+    tall=(height min=400)
   }}
   as |CQ|
 >
@@ -280,10 +280,10 @@ Let's look at the code that created the video demo above.
 ```hbs
 <ContainerQuery
   @features={{hash
-    small=(cq-width max=480)
-    medium=(cq-width min=480 max=640)
-    large=(cq-width min=640)
-    tall=(cq-height min=320)
+    small=(width max=480)
+    medium=(width min=480 max=640)
+    large=(width min=640)
+    tall=(height min=320)
   }}
   as |CQ|
 >

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

@@ -1,7 +1,7 @@
 import { helper } from '@ember/component/helper';
 import type { Metadata } from 'ember-container-query/modifiers/container-query';
 
-interface CqAspectRatioHelperSignature {
+interface AspectRatioHelperSignature {
   Args: {
     Named: {
       max?: number;
@@ -12,7 +12,7 @@ interface CqAspectRatioHelperSignature {
   Return: Metadata;
 }
 
-const CqAspectRatioHelper = helper<CqAspectRatioHelperSignature>(
+const AspectRatioHelper = helper<AspectRatioHelperSignature>(
   (_positional, named) => {
     const dimension = 'aspectRatio';
     const max = named.max ?? Infinity;
@@ -22,4 +22,4 @@ const CqAspectRatioHelper = helper<CqAspectRatioHelperSignature>(
   }
 );
 
-export default CqAspectRatioHelper;
+export default AspectRatioHelper;

addon/helpers/cq-height.ts → addon/helpers/height.ts

@@ -1,7 +1,7 @@
 import { helper } from '@ember/component/helper';
 import type { Metadata } from 'ember-container-query/modifiers/container-query';
 
-interface CqHeightHelperSignature {
+interface HeightHelperSignature {
   Args: {
     Named: {
       max?: number;
@@ -12,12 +12,12 @@ interface CqHeightHelperSignature {
   Return: Metadata;
 }
 
-const CqHeightHelper = helper<CqHeightHelperSignature>((_positional, named) => {
+const HeightHelper = helper<HeightHelperSignature>((_positional, named) => {
   const dimension = 'height';
   const max = named.max ?? Infinity;
   const min = named.min ?? 0;
 
   return { dimension, max, min };
 });
 
-export default CqHeightHelper;
+export default HeightHelper;

addon/helpers/cq-width.ts → addon/helpers/width.ts

@@ -1,7 +1,7 @@
 import { helper } from '@ember/component/helper';
 import type { Metadata } from 'ember-container-query/modifiers/container-query';
 
-interface CqWidthHelperSignature {
+interface WidthHelperSignature {
   Args: {
     Named: {
       max?: number;
@@ -12,12 +12,12 @@ interface CqWidthHelperSignature {
   Return: Metadata;
 }
 
-const CqWidthHelper = helper<CqWidthHelperSignature>((_positional, named) => {
+const WidthHelper = helper<WidthHelperSignature>((_positional, named) => {
   const dimension = 'width';
   const max = named.max ?? Infinity;
   const min = named.min ?? 0;
 
   return { dimension, max, min };
 });
 
-export default CqWidthHelper;
+export default WidthHelper;

addon/template-registry.ts

@@ -1,13 +1,16 @@
 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 AspectRatioHelper from 'ember-container-query/helpers/aspect-ratio';
+import type HeightHelper from 'ember-container-query/helpers/height';
+import type WidthHelper from 'ember-container-query/helpers/width';
 import type ContainerQueryModifier from 'ember-container-query/modifiers/container-query';
 
 export default interface EmberContainerQueryRegistry {
   ContainerQuery: typeof ContainerQueryComponent;
+  'aspect-ratio': typeof AspectRatioHelper;
   'container-query': typeof ContainerQueryModifier;
-  'cq-aspect-ratio': typeof CqAspectRatioHelper;
-  'cq-height': typeof CqHeightHelper;
-  'cq-width': typeof CqWidthHelper;
+  'cq-aspect-ratio': typeof AspectRatioHelper;
+  'cq-height': typeof HeightHelper;
+  'cq-width': typeof WidthHelper;
+  height: typeof HeightHelper;
+  width: typeof WidthHelper;
 }

app/helpers/aspect-ratio.js

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

app/helpers/cq-aspect-ratio.js

@@ -1 +1,18 @@
-export { default } from 'ember-container-query/helpers/cq-aspect-ratio';
+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';

app/helpers/cq-height.js

@@ -1 +1,18 @@
-export { default } from 'ember-container-query/helpers/cq-height';
+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';

app/helpers/cq-width.js

@@ -1 +1,18 @@
-export { default } from 'ember-container-query/helpers/cq-width';
+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';

app/helpers/height.js

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

app/helpers/width.js

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

tests/dummy/app/components/tracks.hbs

@@ -1,9 +1,9 @@
 <ContainerQuery
   @features={{hash
-    small=(cq-width max=480)
-    medium=(cq-width min=480 max=640)
-    large=(cq-width min=640)
-    tall=(cq-height min=320)
+    small=(width max=480)
+    medium=(width min=480 max=640)
+    large=(width min=640)
+    tall=(height min=320)
   }}
   as |CQ|
 >

tests/dummy/app/components/ui/form.hbs

@@ -15,7 +15,7 @@
   />
 
   <ContainerQuery
-    @features={{hash wide=(cq-width min=480)}}
+    @features={{hash wide=(width min=480)}}
     as |CQ|
   >
     {{yield

tests/dummy/app/components/widgets/widget-1.hbs

@@ -1,8 +1,8 @@
 <ContainerQuery
   @features={{hash
-    tall=(cq-aspect-ratio max=0.8)
-    square=(cq-aspect-ratio min=0.8 max=1.25)
-    wide=(cq-aspect-ratio min=1.25)
+    tall=(aspect-ratio max=0.8)
+    square=(aspect-ratio min=0.8 max=1.25)
+    wide=(aspect-ratio min=1.25)
   }}
   @tagName="section"
   local-class="container"

tests/dummy/app/components/widgets/widget-2.hbs

@@ -1,8 +1,8 @@
 <ContainerQuery
   @features={{hash
-    short=(cq-height max=240)
-    tall=(cq-height min=240 max=480)
-    very-tall=(cq-height min=480)
+    short=(height max=240)
+    tall=(height min=240 max=480)
+    very-tall=(height min=480)
   }}
   @tagName="section"
   local-class="container"

tests/dummy/app/components/widgets/widget-2/captions.hbs

@@ -1,8 +1,5 @@
 <ContainerQuery
-  @features={{hash
-    large=(cq-width min=320)
-    tall=(cq-height min=80)
-  }}
+  @features={{hash large=(width min=320) tall=(height min=80)}}
   as |CQ|
 >
   <div

tests/dummy/app/components/widgets/widget-3/tour-schedule.hbs

@@ -1,5 +1,5 @@
 <ContainerQuery
-  @features={{hash small=(cq-width max=400)}}
+  @features={{hash small=(width max=400)}}
   @dataAttributePrefix="cq"
   local-class="container"
 >

tests/dummy/app/components/widgets/widget-4/memo.hbs

@@ -1,8 +1,8 @@
 <ContainerQuery
   @features={{hash
-    small=(cq-width max=200)
-    large=(cq-width min=200)
-    short=(cq-height max=200)
+    small=(width max=200)
+    large=(width min=200)
+    short=(height max=200)
   }}
   @tagName="article"
   local-class="container"

tests/dummy/app/components/widgets/widget-5.hbs

@@ -1,8 +1,5 @@
 <ContainerQuery
-  @features={{hash
-    large=(cq-width min=224)
-    tall=(cq-height min=120)
-  }}
+  @features={{hash large=(width min=224) tall=(height min=120)}}
   @tagName="section"
   local-class="container"
   as |CQ|

tests/dummy/app/templates/album.hbs

@@ -3,8 +3,8 @@
 <Ui::Page @title={{@model.name}}>
   <ContainerQuery
     @features={{hash
-      large=(cq-width min=960)
-      tall=(cq-height min=400)
+      large=(width min=960)
+      tall=(height min=400)
     }}
     as |CQ|
   >

tests/dummy/app/templates/not-found.hbs

@@ -6,7 +6,7 @@
 
   <div local-class="animation">
     <ContainerQuery
-      @features={{hash small=(cq-width max=350)}}
+      @features={{hash small=(width max=350)}}
       as |CQ|
     >
       <div