diff --git a/apps/demo/src/app/components/color-scheme-switch/color-scheme-switch.component.ts b/apps/demo/src/app/components/color-scheme-switch/color-scheme-switch.component.ts index c921ff4..06b3641 100644 --- a/apps/demo/src/app/components/color-scheme-switch/color-scheme-switch.component.ts +++ b/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 }); } } diff --git a/libs/composables/attribute/docs/attribute.composable.md b/libs/composables/attribute/docs/attribute.composable.md index 0df24bf..9a73559 100644 --- a/libs/composables/attribute/docs/attribute.composable.md +++ b/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. | diff --git a/libs/composables/attribute/docs/boolean-attribute.composable.md b/libs/composables/attribute/docs/boolean-attribute.composable.md index b6308e9..1a73ec4 100644 --- a/libs/composables/attribute/docs/boolean-attribute.composable.md +++ b/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. | diff --git a/libs/composables/attribute/src/attribute.composable.spec.ts b/libs/composables/attribute/src/attribute.composable.spec.ts index 3f6cfa0..e7209f7 100644 --- a/libs/composables/attribute/src/attribute.composable.spec.ts +++ b/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'); }); }); diff --git a/libs/composables/attribute/src/attribute.composable.ts b/libs/composables/attribute/src/attribute.composable.ts index 4e7f229..9bceafe 100644 --- a/libs/composables/attribute/src/attribute.composable.ts +++ b/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>; +type NormalizedUseAttributeOptions = IUseAttributeOptions & Required>; /** * Normalizes the given options. * @@ -118,10 +118,10 @@ type NormalizedUseAttributeOptions = IUseAttributeOptions & Required ({ ...(options ?? {}), - host: options?.host ?? inject(ElementRef).nativeElement as HTMLElement + target: options?.target ?? inject(ElementRef).nativeElement as HTMLElement }); -type NormalizedBindAttributeOptions = IBindAttributeOptions & Required>; +type NormalizedBindAttributeOptions = IBindAttributeOptions & Required>; /** * Normalizes the given options. @@ -131,11 +131,11 @@ type NormalizedBindAttributeOptions = IBindAttributeOptions & Required ({ ...(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 { - 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 = >( 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 = >( 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); } }); diff --git a/libs/composables/attribute/src/boolean-attribute.composable.spec.ts b/libs/composables/attribute/src/boolean-attribute.composable.spec.ts index 2a6e27d..5541e06 100644 --- a/libs/composables/attribute/src/boolean-attribute.composable.spec.ts +++ b/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(''); }); }); diff --git a/libs/composables/attribute/src/boolean-attribute.composable.ts b/libs/composables/attribute/src/boolean-attribute.composable.ts index 111ca80..6125110 100644 --- a/libs/composables/attribute/src/boolean-attribute.composable.ts +++ b/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(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 => { - const { namespace, initialValue, defaultValue, host } = normalizeUseBooleanAttributeOptions(options); + const { namespace, initialValue, defaultValue, target } = normalizeUseBooleanAttributeOptions(options); const value = signal(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 = >( 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( diff --git a/libs/composables/observer/src/directionality.composable.ts b/libs/composables/observer/src/directionality.composable.ts index 69402cf..1bdaace 100644 --- a/libs/composables/observer/src/directionality.composable.ts +++ b/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;