Swaps host and comp parameter order.

Since introducing `host`, components tend to use it more consistently than `comp`.

README.md

@@ -70,11 +70,11 @@ import { ElementAccessor, defineComponent } from 'hydroactive';
 import { WriteableSignal } from 'hydroactive/signals.js';
 
 // `defineComponent()` creates a web component class based on the given hydrate
-// function. The callback is invoked on hydration and provides `comp` and `host`
+// function. The callback is invoked on hydration and provides `host` and `comp`
 // parameters with additional functionality to provide interactivity to the
 // pre-rendered component. Automatically calls `customElements.define` under the
 // hood.
-const MyCounter = defineComponent('my-counter', (comp, host) => {
+const MyCounter = defineComponent('my-counter', (host, comp) => {
     // Interacting with a site using HydroActive is a three-step process:
     // 1. Query it - `host.query` queries the DOM for the selector and asserts
     // it is found.

src/component.test.ts

@@ -60,8 +60,8 @@ describe('component', () => {
       document.body.appendChild(comp);
 
       expect(hydrate).toHaveBeenCalledOnceWith(
-        ComponentRef._from(ElementRef.from(comp)),
         ComponentAccessor.fromComponent(comp),
+        ComponentRef._from(ElementRef.from(comp)),
       );
     });
 

src/component.ts

@@ -7,8 +7,8 @@ import { HydroActiveComponent } from './hydroactive-component.js';
 
 /** The type of the lifecycle hook invoked when the component hydrates. */
 export type HydrateLifecycle = (
-  comp: ComponentRef,
   host: ComponentAccessor<HydroActiveComponent>,
+  comp: ComponentRef,
 ) => void;
 
 /**
@@ -21,7 +21,7 @@ export function defineComponent(tagName: string, hydrate: HydrateLifecycle):
     public override hydrate(): void {
       const ref = ComponentRef._from(ElementRef.from(this));
       this._registerComponentRef(ref);
-      hydrate(ref, ComponentAccessor.fromComponent(this));
+      hydrate(ComponentAccessor.fromComponent(this), ref);
     }
   };
 

src/demo/attrs/read-attr.ts

@@ -2,7 +2,7 @@ import { AttrAccessor, defineComponent } from 'hydroactive';
 import { bind } from 'hydroactive/signal-accessors.js';
 
 /** Reads an attribute from the host element. */
-export const ReadAttr = defineComponent('read-attr', (comp, host) => {
+export const ReadAttr = defineComponent('read-attr', (host, comp) => {
   // `comp.host` is an `ElementAccessor` of the host element (`read-attr`).
   // `ElementAccessor` has an `attr` method which provides an `AttrAccessor`.
   const idAttr: AttrAccessor = host.attr('user-id');

src/demo/counter/auto-counter.ts

@@ -2,7 +2,7 @@ import { defineComponent } from 'hydroactive';
 import { live } from 'hydroactive/signal-accessors.js';
 
 /** Automatically increments the count over time. */
-export const AutoCounter = defineComponent('auto-counter', (comp, host) => {
+export const AutoCounter = defineComponent('auto-counter', (host, comp) => {
   // Create a "live" binding of the `<span>` element's text content, but
   // interpreted as a `number`. Automatically parses the value.
   const count = live(host.query('span').access(), comp, Number);

src/demo/counter/bind-counter.ts

@@ -6,7 +6,7 @@ import { WriteableSignal, signal } from 'hydroactive/signals.js';
  * Automatically increments the count over time. Uses `comp.bind` instead of
  * `comp.live` to demonstrate the underlying primitives.
  */
-export const BindCounter = defineComponent('bind-counter', (comp, host) => {
+export const BindCounter = defineComponent('bind-counter', (host, comp) => {
   // Queries the DOM for the `<span>` tag.
   const span: Dehydrated<HTMLSpanElement> = host.query('span');
 

src/demo/counter/button-counter.ts

@@ -4,7 +4,7 @@ import { live } from 'hydroactive/signal-accessors.js';
 /**
  * A counter which increments and decrements the count based on button clicks.
  */
-export const ButtonCounter = defineComponent('button-counter', (comp, host) => {
+export const ButtonCounter = defineComponent('button-counter', (host, comp) => {
   const count = live(host.query('span').access(), comp, Number);
 
   // Listen for click events and update the count accordingly. Event listeners

src/demo/hello-world/hello-world.ts

@@ -2,7 +2,7 @@ import { defineComponent } from 'hydroactive';
 import { live } from 'hydroactive/signal-accessors.js';
 
 /** Says hello to HydroActive on hydration. */
-export const HelloWorld = defineComponent('hello-world', (comp, host) => {
+export const HelloWorld = defineComponent('hello-world', (host, comp) => {
   const name = live(host.query('span#name').access(), comp, String);
   name.set('HydroActive');
 });

src/demo/hooks/custom-hook.ts

@@ -3,7 +3,7 @@ import { bind } from 'hydroactive/signal-accessors.js';
 import { Signal, signal } from 'hydroactive/signals.js';
 
 /** Demonstrates a custom hook for controlling the count timer. */
-export const CustomHook = defineComponent('custom-hook', (comp, host) => {
+export const CustomHook = defineComponent('custom-hook', (host, comp) => {
   const initial = host.query('span').access().read(Number);
 
   // Create a signal which is automatically incremented every second. Bound to

src/demo/hydration/deferred-comp.ts

@@ -2,7 +2,7 @@ import { defineComponent } from 'hydroactive';
 import { live } from 'hydroactive/signal-accessors.js';
 
 /** Says hello to HydroActive on hydration. */
-export const DeferredComp = defineComponent('deferred-comp', (comp, host) => {
+export const DeferredComp = defineComponent('deferred-comp', (host, comp) => {
   const name = live(host.query('span').access(), comp, String);
   name.set('HydroActive');
 });

src/demo/hydration/deferred-composition.ts

@@ -3,7 +3,7 @@ import { DeferredCompositionChild } from './deferred-composition-child.js';
 import { bind } from 'hydroactive/signal-accessors.js';
 
 /** Demonstrates accessing and hydrating child components. */
-export const DeferredComposition = defineComponent('deferred-composition', (comp, host) => {
+export const DeferredComposition = defineComponent('deferred-composition', (host, comp) => {
   // `.access` asserts the component is already hydrated.
   const firstName = host.query('#first')
       .access(DeferredCompositionChild)

src/demo/reactivity/cached-value.ts

@@ -3,7 +3,7 @@ import { bind, live } from 'hydroactive/signal-accessors.js';
 import { cached } from 'hydroactive/signals.js';
 
 /** Uses `cached` to avoid repeatedly executing an expensive computed signal. */
-export const CachedValue = defineComponent('cached-value', (comp, host) => {
+export const CachedValue = defineComponent('cached-value', (host, comp) => {
   const count = live(host.query('#count').access(), comp, Number);
   host.query('button').access().listen(comp, 'click', () => {
     count.set(count() + 1);

src/demo/reactivity/computed-value.ts

@@ -3,7 +3,7 @@ import { bind, live } from 'hydroactive/signal-accessors.js';
 import { Signal } from 'hydroactive/signals.js';
 
 /** Displays a value computed from another value in the DOM. */
-export const ComputedValue = defineComponent('computed-value', (comp, host) => {
+export const ComputedValue = defineComponent('computed-value', (host, comp) => {
   // Create a signal for the real underlying value.
   const count = live(host.query('#count').access(), comp, Number);
 

src/demo/reactivity/signal-effect.ts

@@ -2,7 +2,7 @@ import { defineComponent } from 'hydroactive';
 import { signal } from 'hydroactive/signals.js';
 
 /** Creates a side effect from a signal. */
-export const SignalEffect = defineComponent('signal-effect', (comp, host) => {
+export const SignalEffect = defineComponent('signal-effect', (host, comp) => {
   const countLabel = host.query('#count').access();
   const initial = countLabel.read(Number);
   const count = signal(initial);

src/demo/shadow/closed-shadow.ts

@@ -2,7 +2,7 @@ import { defineComponent } from 'hydroactive';
 import { live } from 'hydroactive/signal-accessors.js';
 
 /** Accesses the shadow DOM with `host.shadow`. */
-export const ClosedShadow = defineComponent('closed-shadow', (comp, host) => {
+export const ClosedShadow = defineComponent('closed-shadow', (host, comp) => {
   // Query the shadow DOM under `host.shadow`.
   const shadowDiv = live(host.shadow.query('div').access(), comp, String);
   shadowDiv.set('I\'m blue,');

src/demo/shadow/open-shadow.ts

@@ -2,7 +2,7 @@ import { defineComponent } from 'hydroactive';
 import { live } from 'hydroactive/signal-accessors.js';
 
 /** Accesses the shadow DOM with `host.shadow`. */
-export const OpenShadow = defineComponent('open-shadow', (comp, host) => {
+export const OpenShadow = defineComponent('open-shadow', (host, comp) => {
   // Query the shadow DOM under `host.shadow`.
   const shadowDiv = live(host.shadow.query('div').access(), comp, String);
   shadowDiv.set('I\'m red!');