Updates demo components to use defineBaseComponent where appropriate.

Any components which don't use signals don't need `defineSignalComponent`. I was a little torn on this just because I want developers to think of `defineSignalComponent` as the "default" option and would rather not draw too much attention to `defineBaseComponent`. That said, these examples should be as minimal as possible, so eliminating signals from their dependencies seems like a good move and it doesn't really make things less clear.

The main challenge is that someone might copy an example with `defineBaseComponent` and then copy a `.effect` call or a `live` binding from another component and then be confused when it doesn't work. That's probably more of a documentation issue than one with the examples, so I'm inclined to used `defineBaseComponent` where possible for now.

src/demo/attrs/read-attr.ts

@@ -1,8 +1,7 @@
-import { AttrAccessor, defineSignalComponent } from 'hydroactive';
-import { bind } from 'hydroactive/signal-accessors.js';
+import { AttrAccessor, defineBaseComponent } from 'hydroactive';
 
 /** Reads an attribute from the host element. */
-export const ReadAttr = defineSignalComponent('read-attr', (host) => {
+export const ReadAttr = defineBaseComponent('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 +13,7 @@ export const ReadAttr = defineSignalComponent('read-attr', (host) => {
   const username = getUserById(id);
 
   // Update the `<span>` tag to have the username read from the attribute.
-  bind(host.query('span').access(), host, String, () => username);
+  host.query('span').access().write(username, String);
 });
 
 declare global {

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

@@ -1,7 +1,7 @@
-import { defineSignalComponent } from 'hydroactive';
+import { defineBaseComponent } from 'hydroactive';
 
 /** Says hello to HydroActive on hydration. */
-export const HelloWorld = defineSignalComponent('hello-world', (host) => {
+export const HelloWorld = defineBaseComponent('hello-world', (host) => {
   host.query('span#name').access().write('HydroActive', String);
 });
 

src/demo/hydration/deferred-comp.ts

@@ -1,7 +1,7 @@
-import { defineSignalComponent } from 'hydroactive';
+import { defineBaseComponent } from 'hydroactive';
 
 /** Says hello to HydroActive on hydration. */
-export const DeferredComp = defineSignalComponent('deferred-comp', (host) => {
+export const DeferredComp = defineBaseComponent('deferred-comp', (host) => {
   host.query('span').access().write('HydroActive', String);
 });
 

src/demo/hydration/deferred-composition.ts

@@ -1,8 +1,8 @@
-import { defineSignalComponent } from 'hydroactive';
+import { defineBaseComponent } from 'hydroactive';
 import { DeferredCompositionChild } from './deferred-composition-child.js';
 
 /** Demonstrates accessing and hydrating child components. */
-export const DeferredComposition = defineSignalComponent(
+export const DeferredComposition = defineBaseComponent(
   'deferred-composition',
   (host) => {
     // `.access` asserts the component is already hydrated.

src/demo/shadow/closed-shadow.ts

@@ -1,7 +1,7 @@
-import { defineSignalComponent } from 'hydroactive';
+import { defineBaseComponent } from 'hydroactive';
 
 /** Accesses the shadow DOM with `host.shadow`. */
-export const ClosedShadow = defineSignalComponent('closed-shadow', (host) => {
+export const ClosedShadow = defineBaseComponent('closed-shadow', (host) => {
   // Query the shadow DOM under `host.shadow`.
   host.shadow.query('div').access().write('I\'m blue,', String);
 

src/demo/shadow/open-shadow.ts

@@ -1,7 +1,7 @@
-import { defineSignalComponent } from 'hydroactive';
+import { defineBaseComponent } from 'hydroactive';
 
 /** Accesses the shadow DOM with `host.shadow`. */
-export const OpenShadow = defineSignalComponent('open-shadow', (host) => {
+export const OpenShadow = defineBaseComponent('open-shadow', (host) => {
   // Query the shadow DOM under `host.shadow`.
   host.shadow.query('div').access().write('I\'m red!', String);