Removes ElementRef from ComponentRef.

This was only really used for the `host` property which is no longer needed now that an `ElementAccessor` is directly provided to users.

src/component-ref.test.ts

@@ -1,7 +1,6 @@
 import './testing/noop-component.js';
 
 import { ComponentRef, type OnDisconnect, type OnConnect } from './component-ref.js';
-import { ElementRef } from './element-ref.js';
 import { signal } from './signals.js';
 
 describe('component-ref', () => {
@@ -14,10 +13,8 @@ describe('component-ref', () => {
   describe('ComponentRef', () => {
     describe('_from', () => {
       it('constructs a `ComponentRef` instance', () => {
-        const el = document.createElement('noop-component');
-        const ref = ComponentRef._from(ElementRef.from(el));
-
-        expect(ref.host.native).toBe(el);
+        const ref = ComponentRef._from(() => true);
+        expect(ref).toBeInstanceOf(ComponentRef);
       });
     });
 

src/component-ref.ts

@@ -1,5 +1,3 @@
-import { ElementRef } from './element-ref.js';
-import { HydroActiveComponent } from './hydroactive-component.js';
 import { effect } from './signals.js';
 import { UiScheduler } from './signals/schedulers/ui-scheduler.js';
 
@@ -18,12 +16,8 @@ export type OnDisconnect = () => void;
  * the component it references (not shared with other components).
  */
 export class ComponentRef {
-  readonly #host: ElementRef<HydroActiveComponent>;
   readonly #scheduler = UiScheduler.from();
 
-  /** The custom element hosting the HydroActive component. */
-  public get host(): ElementRef<HydroActiveComponent> { return this.#host; }
-
   /** All callbacks to invoke when the component is connected to the DOM. */
   readonly #connectedCallbacks: Array<OnConnect> = [];
 
@@ -35,8 +29,14 @@ export class ComponentRef {
    */
   readonly #disconnectedCallbacks: Array<OnDisconnect> = [];
 
-  private constructor(host: ElementRef<HydroActiveComponent>) {
-    this.#host = host;
+  /**
+   * Returns whether or not the associated component is currently connected to a
+   * document.
+   */
+  readonly #isConnected: () => boolean;
+
+  private constructor(isConnected: () => boolean) {
+    this.#isConnected = isConnected;
   }
 
   /**
@@ -45,10 +45,12 @@ export class ComponentRef {
    * INTERNAL ONLY: Do not call directly. HydroActive should always provide a
    * {@link ComponentRef} to you, it should never be necessary to create one
    * manually.
+   *
+   * @param isConnected Returns whether or not the associated component is
+   *     currently connected to a document.
    */
-  public /* internal */ static _from(host: ElementRef<HydroActiveComponent>):
-      ComponentRef {
-    return new ComponentRef(host);
+  public /* internal */ static _from(isConnected: () => boolean): ComponentRef {
+    return new ComponentRef(isConnected);
   }
 
   public /* internal */ _onConnect(): void {
@@ -101,7 +103,7 @@ export class ComponentRef {
   public connected(onConnect: OnConnect): void {
     this.#connectedCallbacks.push(onConnect);
 
-    if (this.#host.native.isConnected) this.#invokeOnConnect(onConnect);
+    if (this.#isConnected()) this.#invokeOnConnect(onConnect);
   }
 
   /**

src/component.test.ts

@@ -1,7 +1,6 @@
 import { type HydrateLifecycle, defineComponent } from './component.js';
 import { ComponentAccessor } from './component-accessor.js';
 import { ComponentRef } from './component-ref.js';
-import { ElementRef } from './element-ref.js';
 import { HydroActiveComponent } from './hydroactive-component.js';
 import { testCase, useTestCases } from './testing/test-cases.js';
 
@@ -61,7 +60,7 @@ describe('component', () => {
 
       expect(hydrate).toHaveBeenCalledOnceWith(
         ComponentAccessor.fromComponent(comp),
-        ComponentRef._from(ElementRef.from(comp)),
+        ComponentRef._from(() => comp.isConnected),
       );
     });
 

src/component.ts

@@ -2,7 +2,6 @@
 
 import { ComponentAccessor } from './component-accessor.js';
 import { ComponentRef } from './component-ref.js';
-import { ElementRef } from './element-ref.js';
 import { HydroActiveComponent } from './hydroactive-component.js';
 
 /** The type of the lifecycle hook invoked when the component hydrates. */
@@ -19,7 +18,7 @@ export function defineComponent(tagName: string, hydrate: HydrateLifecycle):
     Class<HydroActiveComponent> {
   const Component = class extends HydroActiveComponent {
     public override hydrate(): void {
-      const ref = ComponentRef._from(ElementRef.from(this));
+      const ref = ComponentRef._from(() => this.isConnected);
       this._registerComponentRef(ref);
       hydrate(ComponentAccessor.fromComponent(this), ref);
     }

src/element-accessor.test.ts

@@ -296,7 +296,7 @@ describe('element-accessor', () => {
         ElementAccessor.from(el).listen(comp, 'click', handler);
         expect(handler).not.toHaveBeenCalled();
 
-        comp.host.native.click();
+        el.click();
 
         expect(handler).toHaveBeenCalledOnceWith(jasmine.any(Event));
       });

src/hydroactive-component.test.ts

@@ -1,7 +1,6 @@
 import './testing/noop-component.js';
 
 import { ComponentRef, OnConnect, OnDisconnect } from './component-ref.js';
-import { ElementRef } from './element-ref.js';
 import { HydroActiveComponent } from './hydroactive-component.js';
 import { testCase, useTestCases } from './testing/test-cases.js';
 
@@ -20,7 +19,7 @@ describe('hydroactive-component', () => {
     it('hydrates on upgrade when already connected to the DOM', testCase('already-rendered', () => {
       const hydrate = jasmine.createSpy<Hydrate>('hydrate')
           .and.callFake(function (this: HydroActiveComponent): void {
-            const ref = ComponentRef._from(ElementRef.from(this));
+            const ref = ComponentRef._from(() => this.isConnected);
             this._registerComponentRef(ref);
           });
 
@@ -37,7 +36,7 @@ describe('hydroactive-component', () => {
     it('hydrates on connect', () => {
       const hydrate = jasmine.createSpy<Hydrate>('hydrate')
           .and.callFake(function (this: HydroActiveComponent): void {
-            const ref = ComponentRef._from(ElementRef.from(this));
+            const ref = ComponentRef._from(() => this.isConnected);
             this._registerComponentRef(ref);
           });
 
@@ -59,7 +58,7 @@ describe('hydroactive-component', () => {
     it('does not hydrate a second time when moved around the DOM', () => {
       const hydrate = jasmine.createSpy<Hydrate>('hydrate')
           .and.callFake(function (this: HydroActiveComponent): void {
-            const ref = ComponentRef._from(ElementRef.from(this));
+            const ref = ComponentRef._from(() => this.isConnected);
             this._registerComponentRef(ref);
           });
 
@@ -84,7 +83,7 @@ describe('hydroactive-component', () => {
       it('defers hydration', testCase('deferred', (el) => {
         const hydrate = jasmine.createSpy<Hydrate>('hydrate')
             .and.callFake(function (this: HydroActiveComponent): void {
-              const ref = ComponentRef._from(ElementRef.from(this));
+              const ref = ComponentRef._from(() => this.isConnected);
               this._registerComponentRef(ref);
             });
 
@@ -135,7 +134,7 @@ describe('hydroactive-component', () => {
       it('hydrates when `defer-hydration` is removed while disconnected from the DOM', testCase('disconnected-hydration', (el) => {
         const hydrate = jasmine.createSpy<Hydrate>('hydrate')
             .and.callFake(function (this: HydroActiveComponent): void {
-              const ref = ComponentRef._from(ElementRef.from(this));
+              const ref = ComponentRef._from(() => this.isConnected);
               this._registerComponentRef(ref);
             });
 
@@ -196,7 +195,7 @@ describe('hydroactive-component', () => {
 
         const el =
             document.createElement('lifecycle-comp') as HydroActiveComponent;
-        const ref = ComponentRef._from(ElementRef.from(el));
+        const ref = ComponentRef._from(() => el.isConnected);
         el._registerComponentRef(ref);
 
         ref.connected(onConnect);
@@ -233,7 +232,7 @@ describe('hydroactive-component', () => {
 
         const el = document.createElement('hydration-connect') as
             HydroActiveComponent;
-        const ref = ComponentRef._from(ElementRef.from(el));
+        const ref = ComponentRef._from(() => el.isConnected);
         el._registerComponentRef(ref);
         ref.connected(onConnect);
         expect(onConnect).not.toHaveBeenCalled();

src/hydroactive-component.ts

@@ -39,7 +39,6 @@ export abstract class HydroActiveComponent extends HTMLElement {
   protected abstract hydrate(): void;
 
   public /* internal */ _registerComponentRef(ref: ComponentRef): void {
-    if (ref.host.native !== this) throw new Error('Registered `ComponentRef` must be associated with this component.');
     if (this.#ref) throw new Error('Already registered a `ComponentRef`.');
 
     this.#ref = ref;

src/signal-accessors.test.ts

@@ -427,8 +427,7 @@ describe('signal-accessors', () => {
       `));
       const outerComp = outerHost.element.getComponentRef();
 
-      const innerHost = ElementAccessor.from(
-          outerComp.host.query('noop-component').native);
+      const innerHost = outerHost.query('noop-component').access(NoopComponent);
       const innerComp = innerHost.element.getComponentRef();
 
       bind(

src/testing/noop-component.ts

@@ -1,4 +1,4 @@
-import { ComponentRef, ElementRef } from 'hydroactive';
+import { ComponentRef } from '../component-ref.js';
 import { HydroActiveComponent } from '../hydroactive-component.js';
 
 /**
@@ -14,7 +14,7 @@ export class NoopComponent extends HydroActiveComponent {
   public constructor() {
     super();
 
-    this.#ref = ComponentRef._from(ElementRef.from(this));
+    this.#ref = ComponentRef._from(() => this.isConnected);
     this._registerComponentRef(this.#ref);
   }