From 78e4584ed1242496bf86accf016d53f6c3de64b9 Mon Sep 17 00:00:00 2001 From: Doug Parker Date: Thu, 5 Sep 2024 21:03:47 -0700 Subject: [PATCH] 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 | 4 ++-- src/demo/counter/auto-counter.ts | 4 ++-- src/demo/counter/bind-counter.ts | 6 +++--- src/demo/counter/button-counter.ts | 4 ++-- src/demo/hooks/custom-hook.ts | 4 ++-- src/demo/hydration/deferred-composition.ts | 6 +++--- src/demo/reactivity/cached-value.ts | 8 ++++---- src/demo/reactivity/computed-value.ts | 6 +++--- src/demo/reactivity/signal-effect.ts | 4 ++-- 9 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/demo/attrs/read-attr.ts b/src/demo/attrs/read-attr.ts index 2042ca9..0b288cc 100644 --- a/src/demo/attrs/read-attr.ts +++ b/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 `` 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 { diff --git a/src/demo/counter/auto-counter.ts b/src/demo/counter/auto-counter.ts index 2b55a26..f4c8a96 100644 --- a/src/demo/counter/auto-counter.ts +++ b/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 `` 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. diff --git a/src/demo/counter/bind-counter.ts b/src/demo/counter/bind-counter.ts index 0993ecf..57eeaa8 100644 --- a/src/demo/counter/bind-counter.ts +++ b/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 `` tag. const span: Dehydrated = host.query('span'); @@ -24,9 +24,9 @@ export const BindCounter = defineComponent('bind-counter', (host, root) => { // Binds the signal back to the `` tag. Anytime `count` changes, the // `` 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(() => { diff --git a/src/demo/counter/button-counter.ts b/src/demo/counter/button-counter.ts index 4bf6e0e..9a14463 100644 --- a/src/demo/counter/button-counter.ts +++ b/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, diff --git a/src/demo/hooks/custom-hook.ts b/src/demo/hooks/custom-hook.ts index baccef4..10dd133 100644 --- a/src/demo/hooks/custom-hook.ts +++ b/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 { diff --git a/src/demo/hydration/deferred-composition.ts b/src/demo/hydration/deferred-composition.ts index 7eb5273..d881f5f 100644 --- a/src/demo/hydration/deferred-composition.ts +++ b/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 { diff --git a/src/demo/reactivity/cached-value.ts b/src/demo/reactivity/cached-value.ts index 63c4b0d..3f367d6 100644 --- a/src/demo/reactivity/cached-value.ts +++ b/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 { diff --git a/src/demo/reactivity/computed-value.ts b/src/demo/reactivity/computed-value.ts index ff57880..7dac31d 100644 --- a/src/demo/reactivity/computed-value.ts +++ b/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 = () => -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); diff --git a/src/demo/reactivity/signal-effect.ts b/src/demo/reactivity/signal-effect.ts index 533f141..bcbecca 100644 --- a/src/demo/reactivity/signal-effect.ts +++ b/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.