Replaced ember-resize-observer-service with ember-primitives/resize-observer (#277)

* Replace ember-resize-observer-service with a v2 addon, which eliminates the last v1 addon in this library

* Fix this scoping

* Reduce diff

* Update docs-app

* chore: Added lockfile

* chore: Added changeset

---------

Co-authored-by: Isaac Lee <16869656+ijlee2@users.noreply.github.com>

Author: NullVoxPopuli

.changeset/pretty-wings-rest.md

@@ -0,0 +1,7 @@
+---
+"ember-container-query": patch
+"docs-app": patch
+"test-app": patch
+---
+
+Replaced ember-resize-observer-service with ember-primitives/resize-observer

docs-app/app/modifiers/draw-stacked-chart.ts

@@ -3,7 +3,6 @@
 /* eslint-disable @typescript-eslint/unbound-method, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return */
 import { registerDestructor } from '@ember/destroyable';
 import { action } from '@ember/object';
-import { type Registry as Services, service } from '@ember/service';
 import { extent, max, rollup, ticks } from 'd3-array';
 import { axisBottom, axisLeft } from 'd3-axis';
 import { scaleBand, scaleLinear, scaleOrdinal } from 'd3-scale';
@@ -15,6 +14,7 @@ import {
   formatRevenue,
 } from 'docs-app/utils/components/widgets/widget-2';
 import Modifier from 'ember-modifier';
+import { resizeObserver } from 'ember-primitives/resize-observer';
 
 const musicFormats = Object.keys(COLOR_PALETTE);
 const paletteColors = Object.values(COLOR_PALETTE);
@@ -29,11 +29,11 @@ interface DrawStackedChartSignature {
 }
 
 export default class DrawStackedChartModifier extends Modifier<DrawStackedChartSignature> {
-  @service declare resizeObserver: Services['resize-observer'];
-
   _element = undefined;
   _named = {};
   height = 0;
+  resizeObserver = resizeObserver(this);
+
   width = 0;
 
   get color() {

docs-app/package.json

@@ -92,6 +92,7 @@
     "ember-load-initializers": "^3.0.1",
     "ember-modifier": "^4.2.2",
     "ember-page-title": "^9.0.3",
+    "ember-primitives": "^0.42.1",
     "ember-qunit": "^9.0.4",
     "ember-resolver": "^13.1.1",
     "ember-source": "~6.8.1",

packages/ember-container-query/package.json

@@ -67,7 +67,7 @@
     "decorator-transforms": "^2.3.0",
     "ember-element-helper": "^0.8.8",
     "ember-modifier": "^4.2.2",
-    "ember-resize-observer-service": "^1.1.0"
+    "ember-primitives": "^0.42.1"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",

packages/ember-container-query/src/modifiers/container-query.ts

@@ -2,9 +2,9 @@ import { registerDestructor } from '@ember/destroyable';
 import { action } from '@ember/object';
 import type Owner from '@ember/owner';
 import { debounce as _debounce } from '@ember/runloop';
-import { service } from '@ember/service';
 import type { ArgsFor, NamedArgs, PositionalArgs } from 'ember-modifier';
 import Modifier from 'ember-modifier';
+import { resizeObserver } from 'ember-primitives/resize-observer';
 
 type IndexSignatureParameter = string | number | symbol;
 type ObjectEntry<T> = [keyof T, T[keyof T]];
@@ -48,12 +48,11 @@ interface ContainerQuerySignature<T extends IndexSignatureParameter> {
 export default class ContainerQuery<
   T extends IndexSignatureParameter,
 > extends Modifier<ContainerQuerySignature<T>> {
-  @service declare private readonly resizeObserver;
-
   private _dataAttributes: string[] = [];
   private _element?: Element;
   private _named!: NamedArgs<ContainerQuerySignature<T>>;
 
+  #resizeObserver = resizeObserver(this);
   dimensions!: Dimensions;
   queryResults!: QueryResults<T>;
 
@@ -73,7 +72,9 @@ export default class ContainerQuery<
     super(owner, args);
 
     registerDestructor(this, () => {
-      this.resizeObserver.unobserve(this._element, this.onResize);
+      if (this._element) {
+        this.#resizeObserver.unobserve(this._element, this.onResize);
+      }
     });
   }
 
@@ -127,10 +128,12 @@ export default class ContainerQuery<
   }
 
   private registerResizeObserver(element: Element): void {
-    this.resizeObserver.unobserve(this._element, this.onResize);
+    if (this._element) {
+      this.#resizeObserver.unobserve(this._element, this.onResize);
+    }
 
     this._element = element;
-    this.resizeObserver.observe(this._element, this.onResize);
+    this.#resizeObserver.observe(this._element, this.onResize);
   }
 
   private resetDataAttributes(element: Element): void {