Updates demos to use host over root.

No need to manage a separate variable now, `host` supports `.effect` directly.

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', (host, root) => {
+export const ReadAttr = defineComponent('read-attr', (host) => {
   // `host` is a `ComponentAccessor` of the host element (`read-attr`).
   // `ComponentAccessor` has an `attr` method which provides an `AttrAccessor`.
   const idAttr: AttrAccessor = host.attr('user-id');
@@ -14,7 +14,7 @@ export const ReadAttr = defineComponent('read-attr', (host, root) => {
   const username = getUserById(id);
 
   // Update the `<span>` tag to have the username read from the attribute.
-  bind(host.query('span').access(), root, String, () => username);
+  bind(host.query('span').access(), host, String, () => username);
 });
 
 declare global {

src/demo/counter/auto-counter.ts

@@ -2,10 +2,10 @@ import { defineComponent } from 'hydroactive';
 import { live } from 'hydroactive/signal-accessors.js';
 
 /** Automatically increments the count over time. */
-export const AutoCounter = defineComponent('auto-counter', (host, root) => {
+export const AutoCounter = defineComponent('auto-counter', (host) => {
   // 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(), root, Number);
+  const count = live(host.query('span').access(), host, Number);
 
   // This is the `hydrate` function, it is only called once per-component
   // instance on hydration.

src/demo/counter/bind-counter.ts

@@ -6,7 +6,7 @@ import { WriteableSignal, signal } from 'hydroactive/signals.js';
  * Automatically increments the count over time. Uses `bind` instead of `live`
  * to demonstrate the underlying primitives.
  */
-export const BindCounter = defineComponent('bind-counter', (host, root) => {
+export const BindCounter = defineComponent('bind-counter', (host) => {
   // Queries the DOM for the `<span>` tag.
   const span: Dehydrated<HTMLSpanElement> = host.query('span');
 
@@ -24,9 +24,9 @@ export const BindCounter = defineComponent('bind-counter', (host, root) => {
 
   // Binds the signal back to the `<span>` tag. Anytime `count` changes, the
   // `<span>` will be automatically updated.
-  bind(label, root, Number, () => count());
+  bind(label, host, Number, () => count());
 
-  // ^ `live(label, root, Number)` implicitly does all of the above.
+  // ^ `live(label, host, Number)` implicitly does all of the above.
 
   host.connected(() => {
     const handle = setInterval(() => {

src/demo/counter/button-counter.ts

@@ -4,8 +4,8 @@ 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', (host, root) => {
-  const count = live(host.query('span').access(), root, Number);
+export const ButtonCounter = defineComponent('button-counter', (host) => {
+  const count = live(host.query('span').access(), host, Number);
 
   // Listen for click events and update the count accordingly. Event listeners
   // are automatically removed when the component is disconnected from the DOM,

src/demo/hooks/custom-hook.ts

@@ -5,14 +5,14 @@ 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', (host, root) => {
+export const CustomHook = defineComponent('custom-hook', (host) => {
   const initial = host.query('span').access().read(Number);
 
   // Create a signal which is automatically incremented every second. Bound to
   // the component's lifecycle.
   const count = useTimer(host, initial);
 
-  bind(host.query('span').access(), root, Number, () => count());
+  bind(host.query('span').access(), host, Number, () => count());
 });
 
 declare global {

src/demo/hydration/deferred-composition.ts

@@ -3,18 +3,18 @@ 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', (host, root) => {
+export const DeferredComposition = defineComponent('deferred-composition', (host) => {
   // `.access` asserts the component is already hydrated.
   const firstName = host.query('#first')
       .access(DeferredCompositionChild)
       .element.getSpeakerName();
-  bind(host.query('#first-speaker').access(), root, String, () => firstName);
+  bind(host.query('#first-speaker').access(), host, String, () => firstName);
 
   // `.hydrate` hydrates the component immediately.
   const secondName = host.query('#second')
       .hydrate(DeferredCompositionChild)
       .element.getSpeakerName();
-  bind(host.query('#second-speaker').access(), root, String, () => secondName);
+  bind(host.query('#second-speaker').access(), host, String, () => secondName);
 });
 
 declare global {

src/demo/reactivity/cached-value.ts

@@ -3,8 +3,8 @@ 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', (host, root) => {
-  const count = live(host.query('#count').access(), root, Number);
+export const CachedValue = defineComponent('cached-value', (host) => {
+  const count = live(host.query('#count').access(), host, Number);
   host.query('button').access().listen(host, 'click', () => {
     count.set(count() + 1);
   });
@@ -19,8 +19,8 @@ export const CachedValue = defineComponent('cached-value', (host, root) => {
 
   // `pi` is read twice here, and both will update automatically, but it will
   // only be computed once.
-  bind(host.query('#pi').access(), root, String, () => pi());
-  bind(host.query('#pi-again').access(), root, String, () => pi());
+  bind(host.query('#pi').access(), host, String, () => pi());
+  bind(host.query('#pi-again').access(), host, String, () => pi());
 });
 
 declare global {

src/demo/reactivity/computed-value.ts

@@ -3,16 +3,16 @@ 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', (host, root) => {
+export const ComputedValue = defineComponent('computed-value', (host) => {
   // Create a signal for the real underlying value.
-  const count = live(host.query('#count').access(), root, Number);
+  const count = live(host.query('#count').access(), host, Number);
 
   // Create a computed signal with a function wrapper that computes the negative
   // of the count.
   const negative: Signal<number> = () => -count();
 
   // Bind the negative version of the count to the negative label.
-  bind(host.query('#negative').access(), root, Number, () => negative());
+  bind(host.query('#negative').access(), host, Number, () => negative());
 
   host.query('button').access().listen(host, 'click', () => {
     count.set(count() + 1);

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', (host, root) => {
+export const SignalEffect = defineComponent('signal-effect', (host) => {
   const countLabel = host.query('#count').access();
   const initial = countLabel.read(Number);
   const count = signal(initial);
@@ -15,7 +15,7 @@ export const SignalEffect = defineComponent('signal-effect', (host, root) => {
   const updatesLabel = host.query('#updates').access();
 
   // Create a side effect whenever `count` is modified.
-  root.effect(() => {
+  host.effect(() => {
     // Update the count label in the effect. Calling `count()` inside the effect
     // creates a dependency on `count`. Anytime `count` changes in the future,
     // this effect will be automatically re-run.