refactor(composables/attribtue)!: rename host option to target

apps/demo/src/app/components/color-scheme-switch/color-scheme-switch.component.ts

@@ -20,7 +20,7 @@ export class ColorSchemeSwitchComponent {
         const root = document.firstElementChild;
 
         if (root) {
-            bindAttribute('color-scheme', this.colorScheme.resolved, { host: root });
+            bindAttribute('color-scheme', this.colorScheme.resolved, { target: root });
         }
     }
 

libs/composables/attribute/docs/attribute.composable.md

@@ -6,7 +6,7 @@
 
 ## `useAttribute`
 
-Binds the value of an attribute on the host element.
+Binds the value of an attribute on the host element or a different target element.
 It will return a writable signal that can be used to change the value of the attribute.
 
 Uses [`bindAttribute`](#bindattribute) internally.
@@ -20,7 +20,7 @@ Uses [`bindAttribute`](#bindattribute) internally.
 | `options.namespace`    | `string`  | yes       | The namespace of the attribute.                                                                                           |
 | `options.defaultValue` | `string`  | yes       | The default value of the attribute. Will be applied when no attribute value has been set in the template or on the signal |
 | `options.initialValue` | `string`  | yes       | The initial value of the attribute. Will force the initial value and override any value set in the template               |
-| `options.host`         | `Element` | yes       | The host element on which the attribute should be bound. Defaults to the component's host element.                        |
+| `options.target`       | `Element` | yes       | The target element on which the attribute should be bound. Defaults to the component's host element.                      |
 
 ### Usage
 
@@ -144,9 +144,9 @@ will render as
 baz
 ```
 
-#### Custom host
+#### Custom target
 
-You may also use a custom host to bind attribute on:
+You may also use a custom target to bind attribute on:
 
 ```ts
 import { useAttribute } from '@bynary/composables/attribute';
@@ -156,7 +156,7 @@ import { useAttribute } from '@bynary/composables/attribute';
 })
 class MyComponent {
 
-    label = useAttribute('label', { host: document.body });
+    label = useAttribute('label', { target: document.body });
 }
 ```
 
@@ -196,7 +196,7 @@ programmatically set value
 
 ## `bindAttribute`
 
-Binds an attribute to the host element. Similar to `useAttribute`, but accepts a signal as an input instead of creating a new one and won't read the value from the template.
+Binds an attribute to the host element or a different target element. Similar to `useAttribute`, but accepts a signal as an input instead of creating a new one and won't read the value from the template.
 Will return the signal that has been passed in.
 
 ### Parameters
@@ -208,5 +208,5 @@ Will return the signal that has been passed in.
 | `options`              | `object`  | yes       | Options to customize the behavior.                                                                                                                            |
 | `options.namespace`    | `string`  | yes       | The namespace of the attribute.                                                                                                                               |
 | `options.defaultValue` | `string`  | yes       | The default value of the attribute. Will be applied when no attribute value has been set in the template or on the signal                                     |
-| `options.host`         | `Element` | yes       | The host element on which the attribute should be bound. Defaults to the component's host element.                                                            |
+| `options.target`       | `Element` | yes       | The target element on which the attribute should be bound. Defaults to the component's target element.                                                        |
 

libs/composables/attribute/docs/boolean-attribute.composable.md

@@ -5,7 +5,7 @@
 
 ## `useBooleanAttribute`
 
-Binds the presence of a boolean attribute on the host element.
+Binds the presence of a boolean attribute on the host element or a different taret element.
 It will return a writable signal that can be used to change the value of the attribute.
 
 ### Parameters
@@ -17,7 +17,7 @@ It will return a writable signal that can be used to change the value of the att
 | `options.namespace`    | `string`  | yes       | The namespace of the attribute.                                                                                        |
 | `options.defaultValue` | `boolean` | yes       | The default value of the attribute. Will be used when no attribute value has been set in the template or on the signal |
 | `options.initialValue` | `boolean` | yes       | The initial value of the attribute. Will force the initial value and override any value set in the template            |
-| `options.host`         | `Element` | yes       | The host element on which the attribute should be bound. Defaults to the component's host element.                     |
+| `options.target`       | `Element` | yes       | The target element on which the attribute should be bound. Defaults to the component's target element.                 |
 
 ### Usage
 
@@ -141,9 +141,9 @@ will render as
 true
 ```
 
-#### Custom host
+#### Custom target
 
-You may also use a custom host to bind attribute on:
+You may also use a custom target to bind attribute on:
 
 ```ts
 import { useAttribute } from '@bynary/composables/attribute';
@@ -153,7 +153,7 @@ import { useAttribute } from '@bynary/composables/attribute';
 })
 class MyComponent {
 
-    label = useAttribute('label', { host: document.body });
+    label = useAttribute('label', { target: document.body });
 }
 ```
 
@@ -193,7 +193,7 @@ true
 
 ## `bindBooleanAttribute`
 
-Binds an attribute to the host element. Similar to `useBooleanAttribute`, but accepts a signal as an input instead of creating a new one and won't read the value from the template.
+Binds an attribute to the host element or a different target element. Similar to `useBooleanAttribute`, but accepts a signal as an input instead of creating a new one and won't read the value from the template.
 Will return the signal that has been passed in.
 
 ### Parameters
@@ -205,5 +205,5 @@ Will return the signal that has been passed in.
 | `options`              | `object`  | yes       | Options to customize the behavior.                                                                                     |
 | `options.namespace`    | `string`  | yes       | The namespace of the attribute.                                                                                        |
 | `options.defaultValue` | `boolean` | yes       | The default value of the attribute. Will be used when no attribute value has been set in the template or on the signal |
-| `options.host`         | `Element` | yes       | The host element on which the attribute should be bound. Defaults to the component's host element.                     |
+| `options.target`       | `Element` | yes       | The target element on which the attribute should be bound. Defaults to the component's target element.                 |
 

libs/composables/attribute/src/attribute.composable.spec.ts

@@ -1,7 +1,6 @@
 import { Component, ElementRef, isSignal, Renderer2, signal, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { host } from '@nx/angular/generators';
 
 import * as attributeModule from './attribute.composable';
 import { bindAttribute, useAttribute } from './attribute.composable';
@@ -275,7 +274,7 @@ describe('attribute.composable.ts', () => {
                     bindAttribute('name', this.name);
                     bindAttribute('role', this.role);
                     bindAttribute('title', this.myTitle, { namespace: 'my' });
-                    bindAttribute('color-scheme', this.colorScheme, { host: document.body });
+                    bindAttribute('color-scheme', this.colorScheme, { target: document.body });
                 }
             }
 
@@ -330,7 +329,7 @@ describe('attribute.composable.ts', () => {
                 );
             });
 
-            it('should bind the attribute on the custom host', () => {
+            it('should bind the attribute on the custom target', () => {
                 expect(document.body.getAttribute('color-scheme')).toEqual('dark');
             });
         });

libs/composables/attribute/src/attribute.composable.ts

@@ -65,7 +65,7 @@ export interface IBindAttributeOptions {
     defaultValue?: string;
 
     /**
-     * The host element on which the attribute should be bound
+     * The target element on which the attribute should be bound
      *
      * @example
      * ```ts
@@ -76,11 +76,11 @@ export interface IBindAttributeOptions {
      * })
      * class MyComponent {
      *
-     *     label = useAttribute('label', { host: document.body });
+     *     label = useAttribute('label', { target: document.body });
      * }
      * ```
      */
-    host?: Element;
+    target?: Element;
 }
 
 /**
@@ -109,7 +109,7 @@ export interface IUseAttributeOptions extends IBindAttributeOptions {
     initialValue?: string | null;
 }
 
-type NormalizedUseAttributeOptions = IUseAttributeOptions & Required<Pick<IUseAttributeOptions, 'host'>>;
+type NormalizedUseAttributeOptions = IUseAttributeOptions & Required<Pick<IUseAttributeOptions, 'target'>>;
 /**
  * Normalizes the given options.
  *
@@ -118,10 +118,10 @@ type NormalizedUseAttributeOptions = IUseAttributeOptions & Required<Pick<IUseAt
  */
 const normalizeUseAttributeOptions = (options?: IUseAttributeOptions): NormalizedUseAttributeOptions => ({
     ...(options ?? {}),
-    host: options?.host ?? inject(ElementRef).nativeElement as HTMLElement
+    target: options?.target ?? inject(ElementRef).nativeElement as HTMLElement
 });
 
-type NormalizedBindAttributeOptions = IBindAttributeOptions & Required<Pick<IBindAttributeOptions, 'host'>>;
+type NormalizedBindAttributeOptions = IBindAttributeOptions & Required<Pick<IBindAttributeOptions, 'target'>>;
 
 /**
  * Normalizes the given options.
@@ -131,11 +131,11 @@ type NormalizedBindAttributeOptions = IBindAttributeOptions & Required<Pick<IBin
  */
 const normalizeBindAttributeOptions = (options?: IBindAttributeOptions): NormalizedBindAttributeOptions => ({
     ...(options ?? {}),
-    host: options?.host ?? inject(ElementRef).nativeElement as HTMLElement
+    target: options?.target ?? inject(ElementRef).nativeElement as HTMLElement
 });
 
 /**
- * Creates a signal that binds its value as an attribute on the host element.
+ * Creates a signal that binds its value as an attribute on the host element or a different target element.
  *
  * @example Default usage
  *
@@ -204,10 +204,10 @@ export function useAttribute (
     attributeName: string,
     options?: IUseAttributeOptions
 ): WritableSignal<string | null | undefined> {
-    const { namespace, initialValue, defaultValue, host } =
+    const { namespace, initialValue, defaultValue, target } =
         normalizeUseAttributeOptions(options);
 
-    const initialAssignedValue = host.getAttributeNS(
+    const initialAssignedValue = target.getAttributeNS(
         namespace ?? null,
         attributeName
     );
@@ -216,11 +216,11 @@ export function useAttribute (
         (typeof initialValue !== 'undefined' ? initialValue : initialAssignedValue) ?? defaultValue
     );
 
-    return bindAttribute(attributeName, value, { namespace, defaultValue, host });
+    return bindAttribute(attributeName, value, { namespace, defaultValue, target });
 };
 
 /**
- * Binds an attribute to the host element. Similar to `useAttribute`, but accepts a signal as an input instead of creating a new one and won't read the value from the template.
+ * Binds an attribute to the host element or a different target element. Similar to `useAttribute`, but accepts a signal as an input instead of creating a new one and won't read the value from the template.
  * Will return the signal that has been passed in.
  *
  * @example
@@ -255,7 +255,7 @@ export const bindAttribute = <T extends Signal<string | null | undefined>>(
     value: T,
     options?: IBindAttributeOptions
 ) => {
-    const { namespace, defaultValue, host } = normalizeBindAttributeOptions(options);
+    const { namespace, defaultValue, target } = normalizeBindAttributeOptions(options);
 
     const renderer = inject(Renderer2);
 
@@ -265,9 +265,9 @@ export const bindAttribute = <T extends Signal<string | null | undefined>>(
             typeof currentValue !== 'undefined' ? currentValue : defaultValue;
 
         if (newValue != null) {
-            renderer.setAttribute(host, attributeName, newValue, namespace);
+            renderer.setAttribute(target, attributeName, newValue, namespace);
         } else {
-            renderer.removeAttribute(host, attributeName, namespace);
+            renderer.removeAttribute(target, attributeName, namespace);
         }
     });
 

libs/composables/attribute/src/boolean-attribute.composable.spec.ts

@@ -13,7 +13,7 @@ class TestComponent {
         namespace: 'my',
         initialValue: false
     });
-    readonly isDark = useBooleanAttribute('dark', { initialValue: true, host: document.body });
+    readonly isDark = useBooleanAttribute('dark', { initialValue: true, target: document.body });
 }
 
 describe('useBooleanAttribute', () => {
@@ -67,7 +67,7 @@ describe('useBooleanAttribute', () => {
         expect(fixture.debugElement.attributes['disabled']).toEqual('');
     });
 
-    it('should bind the attribute to a custom host if defined', () => {
+    it('should bind the attribute to a custom target if defined', () => {
         expect(document.body.getAttribute('dark')).toEqual('');
     });
 });

libs/composables/attribute/src/boolean-attribute.composable.ts

@@ -67,17 +67,17 @@ export interface IBindBooleanAttributeOptions {
     defaultValue?: boolean;
 
     /**
-     * The host element on which the attribute should be bound. Can be any HTMLElement.
+     * The target element on which the attribute should be bound. Can be any HTMLElement.
      *
      * @example
      * ```ts
-     * const isDisabled = useBooleanAttribute('disabled', { host: document.body });
+     * const isDisabled = useBooleanAttribute('disabled', { target: document.body });
      * // or
      * const isDisabled = signal<boolean | undefined>(undefined);
-     * bindBooleanAttribute('disabled', isDisabled, { host: document.body });
+     * bindBooleanAttribute('disabled', isDisabled, { target: document.body });
      * ```
      */
-    host?: Element;
+    target?: Element;
 }
 
 /**
@@ -138,7 +138,7 @@ const toAttributeValue = (value: boolean | undefined) => {
 };
 
 /**
- * Creates a signal that binds its value as a boolean attribute on the host element.
+ * Creates a signal that binds its value as a boolean attribute on the host element or a different target element.
  *
  * @example
  * ```ts
@@ -160,19 +160,19 @@ export const useBooleanAttribute = (
     attributeName: string,
     options?: IUseBooleanAttributeOptions
 ): WritableSignal<boolean | undefined> => {
-    const { namespace, initialValue, defaultValue, host } = normalizeUseBooleanAttributeOptions(options);
+    const { namespace, initialValue, defaultValue, target } = normalizeUseBooleanAttributeOptions(options);
 
     const value = signal<boolean | undefined>(initialValue);
 
     return bindBooleanAttribute(attributeName, value, {
         namespace,
         defaultValue,
-        host
+        target: target
     });
 };
 
 /**
- * Binds the value of the given signal as a boolean attribute on the host element.
+ * Binds the value of the given signal as a boolean attribute on the host element or a different target element.
  *
  * @example
  * ```ts
@@ -200,10 +200,10 @@ export const bindBooleanAttribute = <T extends Signal<boolean | undefined>>(
     value: T,
     options?: IBindBooleanAttributeOptions
 ) => {
-    const { namespace, defaultValue, host } =
+    const { namespace, defaultValue, target } =
         normalizeBindBooleanAttributeOptions(options);
 
-    const attribute = useAttribute(attributeName, { namespace, host });
+    const attribute = useAttribute(attributeName, { namespace, target: target });
     const defaultAttributeValue = toAttributeValue(defaultValue);
 
     effect(

libs/composables/observer/src/directionality.composable.ts

@@ -33,7 +33,7 @@ export const useDirectionality = (options?: IUseDirectionalityOptions) => {
         .subscribe((v) => value.set(v));
 
     if (normalizedOptions.target) {
-        bindAttribute('dir', value, { host: normalizedOptions.target });
+        bindAttribute('dir', value, { target: normalizedOptions.target });
     }
 
     return value;