angular-package

The angular-package supports the development process of angular-based applications in varied ways through the thoughtful, reusable, easy-to-use small pieces of code called packages.

angular-package/property

Features to handle properties.

export {
  // Class.
  Property,
  WrapProperty,
} from './lib';

export {
  // Class.
  Descriptor,
  Descriptors,
  // Interface.
  AccessorDescriptor,
  CommonDescriptor,
  DataDescriptor,
  // Type.
  ThisAccessorDescriptor,
} from './descriptor';

export { GetterCallback, SetterCallback } from './type';

Previous README.md

Table of contents

• Skeleton
• Installation
• Callback
• Package
  • Descriptor
    • Class
      • Descriptor
      • AccessorDescriptors
      • DataDescriptors
    • Interface
    • Type
  • Descriptors
• Git
  • Commit
  • Versioning
• License
• Packages

How angular-package understands

Checks

Is to check the provided value to be the same as expected.

Type guard (constrain)

Constrains the parameter type to not let input unexpected value in the code editor.

Guards

Is a combination of both above, constrains the type of the parameter in the code editor, and checks its argument.

Sets

Sets the provided value in the object.

Defines

Returns defined value from the method, instead of storing it in the object.

Skeleton

This package was generated by the skeleton workspace with Angular CLI version 14.2.0.

Copy this package to the packages/property folder of the skeleton workspace then run the commands below.

Code scaffolding

Run ng generate component component-name --project property to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project property.

Note: Don't forget to add --project property or else it will be added to the default project in your angular.json file.

Build

Run ng build property to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build property, go to the dist folder cd dist/property and run npm publish.

Running unit tests

Run ng test property to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Installation

Install @angular-package/property package with command:

npm i --save @angular-package/property

Callback

Wrapper for the ResultCallback type function to throw an Error with the specified message on the specified false or true state.

export const errorCallback: ErrorCallback  = (
  message: string,
  on: boolean = false
): ResultCallback => {
  return (result: boolean, value: any): boolean => {
    if (result === on) {
      throw new Error(
        `${message}, got value ${
          typeof value === 'object' ? JSON.stringify(value) : value
        }`
      );
    }
    return result;
  };
};

Package

Descriptor package

Descriptor features to import.

// Class.
export {
  Descriptor,
  Descriptors
} from './lib';

// Interface.
export {
  AccessorDescriptor,
  CommonDescriptor,
  DataDescriptor
} from './interface';

// Type.
export {
  ThisAccessorDescriptor
} from './type';

Descriptor

Handles object property descriptor.

Features:

• Strictly defines accessor and data descriptor with the defineAccessor() and defineData() static methods.
• Strictly sets, and stores accessor and data descriptor with the Descriptor instance respectively set.accessor() and set.data() methods of the instance.
• Get privately stored accessor descriptor defined by the set.accessor() method by using get.accessor property of the instance.
• Get privately stored data descriptor defined by the set.data() method by using get.data property of the instance.

Strictly means, it guards provided descriptor by checking it against its unique keys and by picking only properties that belong to the appropriate descriptor.

Descriptor<Value, Obj = any> { ... }

Descriptor static methods

Descriptor.defineAccessor()

Returns defined accessor descriptor of a ThisAccessorDescriptor<Value, Obj> type, on get or set property detected.

static defineAccessor<Value, Obj>(
  descriptor: ThisAccessorDescriptor<Value, Obj>,
  callback?: ResultCallback
): ThisAccessorDescriptor<Value, Obj> { ... }

Generic type variables:

| Name | Description | | :------ | :---------- | | Value | Guards the value type of the get() and set() methods of the descriptor object, and in the return type ThisAccessorDescriptor<Value, Obj> | | Obj | Gives the possibility to use the this keyword that refers to the Obj variable inside the get() and set() methods of the descriptor object, and in the return type ThisAccessorDescriptor<Value, Obj> |

Parameters:

| Name: type | Description | | :----------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | descriptor: ThisAccessorDescriptor<Value, Obj> | An object of a ThisAccessorDescriptor<Value, Obj> type to define with the default values of the CommonDescriptor | | callback?: ResultCallback | An optional ResultCallback function to handle the result of the check whether or not the descriptor is an object with get or set property, by default it uses accessorCallback() function |

Throws:

Throws an Error if the descriptor is not an object of a ThisAccessorDescriptor<Value, Obj> type, which means it doesn't contain get or set property.

Returns:

The return value is an object of a ThisAccessorDescriptor<Value, Obj> type.

Usage:

// Example usage.
import { Descriptor } from '@angular-package/property';

interface PersonShape {
  firstName: string;
}

class Person implements PersonShape {
  firstName = '';
}

class People {
  firstName!: string;
}

const person: Person = new Person();
const people: People = new People();

const firstNameDescriptor = Descriptor.defineAccessor<string, Person>({
  configurable: false,
  enumerable: false,
  get(): string {
    return people.firstName;
  },
  set(value: string): void {
    people.firstName = value;
  },
});

// Define the property `firstName` in the `person` object to link with the same property in the `people` object.
// Changes to the property `firstName` in the `person` object affect the property `firstName` in the `people` object.
Object.defineProperty(person, 'firstName', firstNameDescriptor);

Descriptor.defineData()

Returns defined data descriptor of a DataDescriptor<Value> interface, on writable or value property detected.

static defineData<Value>(
  descriptor: DataDescriptor<Value>,
  callback: ResultCallback = dataCallback
): DataDescriptor<Value> { ... }

Generic type variables:

| Name | Description | | :------ | :---------- | | Value | Guards the value property from the descriptor object, and the return type of a DataDescriptor<Value> interface |

Parameters:

| Name: type | Description | | :---------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | descriptor: DataDescriptor<Value> | An object of a DataDescriptor<Value> interface to define with the default values of the CommonDescriptor | | callback?: ResultCallback | An optional ResultCallback function to handle the result of the check whether or not the descriptor is an object with writable or value property, by default it uses dataCallback() function |

Throws:

Throws an Error if the descriptor is not an object of a DataDescriptor<Value> type, which means it doesn't contain writable or value property.

Returns:

The return value is an object of a DataDescriptor<Value> interface.

Usage:

// Example usage.
import { Descriptor } from '@angular-package/property';

interface PersonShape {
  firstName: string;
}

class Person implements PersonShape {
  firstName = '';
}

class People {
  firstName!: string;
}

const person: Person = new Person();
const people: People = new People();

const firstNameDescriptor = Descriptor.defineData<string>({
  configurable: false,
  enumerable: false,
  writable: false,
  value: people.firstName
});

// Defines the property `firstName` of a type string in the `person` object with the same value as the property in the `people` object.
Object.defineProperty(person, 'firstName', firstNameDescriptor);

Descriptor.get()

Returns property descriptor from the property of the specified detected object.

public static get<Obj, Name extends keyof Obj>(
  object: Obj,
  name: Name
): PropertyDescriptor | undefined { ... }

Descriptor.getAll()

Returns property descriptors from the specified detected object.

public static getAll<Obj extends object | Function>(
  object: Obj
): ObjectPropertyDescriptors<Obj> { ... }

AccessorDescriptors

Strictly defines, sets, and stores privately property accessor descriptor of a ThisAccessorDescriptor<Value, Obj> type.

Strictly means, methods picks configurable, enumerable, get, set properties from the provided descriptor object.

Features:

• Guarded process of defining the object descriptor, but properties are not being checked against proper values.
• Strictly defines property accessor descriptor.
• Strictly sets, and stores at the same time property accessor descriptor.
• Accessor descriptor is of a ThisAccessorDescriptor<Value, Obj> type: The return value of the get() function is of a generic Value type. The parameter of the set() function is of a generic Value type. Keyword this refers to an Obj variable in both get() and set() functions.
• Method set() of the instance and static define() picks configurable, enumerable, get, set properties from the provided data.
• Get privately stored accessor descriptor defined by the set() method of the instance.

AccessorDescriptors<Value, Obj = any> { ... }

AccessorDescriptors static methods

AccessorDescriptors.define()

Returns defined accessor descriptor of a ThisAccessorDescriptor<Value, Obj> type, on get or set property detected.

static define<Value, Obj>(
  descriptor: ThisAccessorDescriptor<Value, Obj>,
  callback?: ResultCallback
): ThisAccessorDescriptor<Value, Obj> { ... }

Generic type variables:

| Name | Description | | :------ | :---------- | | Value | Guards the value type of the get() and set() functions of the descriptor object, and the return type ThisAccessorDescriptor<Value, Obj> | | Obj | Gives the possibility to use the this keyword that refers to the Obj variable inside the get() and set() functions of the descriptor object, and in the return type ThisAccessorDescriptor<Value, Obj> |

Parameters:

| Name: type | Description | | :----------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | descriptor: ThisAccessorDescriptor<Value, Obj> | An object of a ThisAccessorDescriptor<Value, Obj> type to define with the default values of the CommonDescriptor | | callback?: ResultCallback | An optional ResultCallback function to handle the result of the check whether or not the descriptor is an object with get or set property, by default it uses accessorCallback() function |

Throws:

Throws an Error if the descriptor is not an object of a ThisAccessorDescriptor<Value, Obj> type, which means it doesn't contain get or set property.

Returns:

The return value is an object of a ThisAccessorDescriptor<Value, Obj> type.

Usage:

// Example usage.
import { AccessorDescriptors } from '@angular-package/property';

interface PersonShape {
  firstName: string;
}

class Person implements PersonShape {
  firstName = '';
}

class People {
  firstName!: string;
}

const person: Person = new Person();
const people: People = new People();

const firstNameDescriptor = AccessorDescriptors.define<string, Person>({
  get(): string {
    return people.firstName;
  },
  set(value: string): void {
    people.firstName = value;
  },
});

// Define the property `firstName` in the `person` object to link with the same property in the `people` object.
// Changes to the property `firstName` in the `person` object affect the property `firstName` in the `people` object.
Object.defineProperty(person, 'firstName', firstNameDescriptor);

AccessorDescriptors Constructor

AccessorDescriptors()

Creates an instance, and optionally sets an accessor descriptor of a ThisAccessorDescriptor<Value, Obj> type.

AccessorDescriptors<Value, Obj>(descriptor?: ThisAccessorDescriptor<Value, Obj>)

Generic type variables:

| Name | Description | | :------ | :---------- | | Value | Guards the value type of the get() and set() functions of the descriptor object | | Obj | Gives the possibility to use the this keyword that refers to the Obj variable inside the get() and set() functions of the descriptor object |

Parameters:

| Name: type | Description | | :------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------- | | descriptor?: ThisAccessorDescriptor<Value, Obj> | An optional object of a ThisAccessorDescriptor<Value, Obj> type to initially set accessor descriptor |

Usage:

// Example usage.
import { AccessorDescriptors } from '@angular-package/property';

interface PersonShape {
  firstName: string;
}

class Person implements PersonShape {
  firstName = '';
}

class People {
  firstName!: string;
}

const person: Person = new Person();
const people: People = new People();

const firstNameDescriptor = new AccessorDescriptors<string, Person>({
  get(): string {
    return people.firstName;
  },
  set(value: string): void {
    people.firstName = value;
  },
});

AccessorDescriptors instance methods

AccessorDescriptors.prototype.set()

Strictly sets with the last saved descriptor values, and stores privately accessor descriptor of a ThisAccessorDescriptor<Value, Obj> type.

set(
  descriptor: ThisAccessorDescriptor<Value, Obj>,
  callback?: ResultCallback
): this { ... }

Parameters:

| Name: type | Description | | :----------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | | descriptor: ThisAccessorDescriptor<Value, Obj> | An object of a ThisAccessorDescriptor<Value, Obj> interface, to set with the last saved descriptor values | | callback?: ResultCallback | An optional ResultCallback function to handle the result of the check whether or not the descriptor is an object containing the get or set property, by default it uses accessorCallback() from the static guard() method |

Throws:

Throws an Error if the descriptor is not an object of a ThisAccessorDescriptor<Value, Obj> type, which means doesn't contain get or set property.

Returns:

The return value is the AccessorDescriptors instance for the chaining.

Usage:

// Example usage.
import { AccessorDescriptors } from '@angular-package/property';

interface PersonShape {
  firstName: string;
}

class Person implements PersonShape {
  firstName = '';
}

class People {
  firstName!: string;
}

const person: Person = new Person();
const people: People = new People();

const firstNameDescriptor = new AccessorDescriptors<string, Person>().set({
  configurable: false,
  enumerable: false,
  get(): string {
    return people.firstName;
  },
  set(value: string): void {
    people.firstName = value;
  },
});

AccessorDescriptors instance properties

AccessorDescriptors.prototype.get

Get privately stored accessor descriptor of a ThisAccessorDescriptor<Value, Obj> type defined by the set() method.

get get(): ThisAccessorDescriptor<Value, Obj> { ... }

Usage:

// Example usage.
import { AccessorDescriptors } from '@angular-package/property';

interface PersonShape {
  firstName: string;
}

class Person implements PersonShape {
  firstName = '';
}

class People {
  firstName!: string;
}

const person: Person = new Person();
const people: People = new People();

const firstNameDescriptor = new AccessorDescriptors<string, Person>().set({
  configurable: false,
  enumerable: false,
  get(): string {
    return people.firstName;
  },
  set(value: string): void {
    people.firstName = value;
  },
});

// Define the property `firstName` in the `person` object to link with the same property in the `people` object.
// Changes to the property `firstName` in the `person` object affect the property `firstName` in the `people` object.
Object.defineProperty(person, 'firstName', firstNameDescriptor.get);

DataDescriptors

Strictly defines, sets, and stores privately property data descriptor of a DataDescriptor<Value> interface.

Strictly means, data descriptor of a DataDescriptor<Value> is type guarded and methods picks configurable, enumerable, writable, value properties from the provided descriptor object.

Features:

• Data descriptor is of a DataDescriptor<Value> interface: The value property is of a generic Value type.
• Guarded process of defining the object descriptor, but properties are not being checked against proper values.
• Strictly defines property data descriptor.
• Strictly sets, and stores at the same time property data descriptor.
• Method set() of the instance and static define() picks configurable, enumerable, writable, value properties from the provided data.
• Get privately stored data descriptor defined by the set() method of the instance.

DataDescriptors<Value> { ... }

DataDescriptors static methods

DataDescriptors.define()

Returns strictly defined data descriptor of a DataDescriptor<Value> interface, on writable or value property detected.

static define<Value>(
  descriptor: DataDescriptor<Value>,
  callback?: ResultCallback
): DataDescriptor<Value> { ... }

Generic type variables:

| Name | Description | | :------ | :---------- | | Value | Constrains the value property from the descriptor object, and the return type of a DataDescriptor<Value> interface |

Parameters:

| Name: type | Description | | :---------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | descriptor: DataDescriptor<Value> | An object of a DataDescriptor<Value> interface, to set with the default values of the CommonDescriptor | | callback?: ResultCallback | An optional ResultCallback function to handle the result of the check whether or not the descriptor is an object with writable or value property, by default it uses dataCallback() function from the static guard() method |

Throws:

Throws an Error if the descriptor is not an object of a DataDescriptor<Value> interface, which means it doesn't contain writable or value property.

Returns:

The return value is an object of a DataDescriptor<Value> interface.

Usage:

// Example usage.
import { DataDescriptors } from '@angular-package/property';

interface PersonShape {
  firstName: string;
}

class Person implements PersonShape {
  firstName = '';
}

class People {
  firstName!: string;
}

const person: Person = new Person();
const people: People = new People();

const firstNameDescriptor = DataDescriptor.define<string, Person>({
  get(): string {
    return people.firstName;
  },
  set(value: string): void {
    people.firstName = value;
  },
});

// Define the property `firstName` in the `person` object to link with the same property in the `people` object.
// Changes to the property `firstName` in the `person` object affect the property `firstName` in the `people` object.
Object.defineProperty(person, 'firstName', firstNameDescriptor);

DataDescriptors Constructor

DataDescriptors()

Creates an instance, and optionally sets a data descriptor of a DataDescriptor<Value> interface.

DataDescriptors<Value>(descriptor?: DataDescriptor<Value>)

Generic type variables:

| Name | Description | | :------ | :---------- | | Value | Guards the value property from the descriptor object |

Parameters:

| Name: type | Description | | :----------------------------------- | :------------------------------------------------------------------------------------------------------------------------------ | | descriptor?: DataDescriptor<Value> | An optional object of a DataDescriptor<Value> interface to initially set data descriptor |

Usage:

// Example usage.
import { DataDescriptors } from '@angular-package/property';

interface PersonShape {
  firstName: string;
}

class Person implements PersonShape {
  firstName = '';
}

class People {
  firstName!: string;
}

const person: Person = new Person();
const people: People = new People();

const firstNameDescriptor = new DataDescriptors<string>({ // Initialize
  writable: false,
  value: 'not writable'
});

DataDescriptors instance methods

DataDescriptors.prototype.set()

Strictly sets with the last saved descriptor values, and stores privately data descriptor of a DataDescriptor<Value> interface.

set(
  descriptor: DataDescriptor<Value>,
  callback?: ResultCallback
): this { ... }

Generic type variables:

| Name | Description | | :------ | :------------------------------------------------------- | | Value | Guards the value property from the descriptor object |

Parameters:

| Name: type | Description | | :---------------------------------- | :--------------------------------------------------------------------------------------------------------------------------- | | descriptor: DataDescriptor<Value> | An object of a DataDescriptor<Value> interface, to set with the last saved descriptor | | callback?: ResultCallback | An optional ResultCallback function to handle the result of the check whether or not the descriptor is an object containing the writable or value property, by default it uses dataCallback() function from the static guard() method |

Throws:

Throws an Error if the descriptor is not an object of a DataDescriptor<Value> type, which means doesn't contain writable or value property.

Returns:

The return value is the DataDescriptors instance for the chaining.

Usage:

// Example usage.
import { DataDescriptors } from '@angular-package/property';

interface PersonShape {
  firstName: string;
}

class Person implements PersonShape {
  firstName = '';
}

class People {
  firstName!: string;
}

const person: Person = new Person();
const people: People = new People();

const firstNameDescriptor = new DataDescriptors<string>()
.set({
  configurable: false,
  enumerable: false,
  writable: false,
  value: people.firstName
});

// Defines the property `firstName` in the `person` object with the same value as the property in the `people` object.
Object.defineProperty(person, 'firstName', firstNameDescriptor.get);

DataDescriptors instance properties

DataDescriptors.prototype.get

Get privately stored data descriptor of a DataDescriptor<Value> interface defined by the instance set() method.

get get(): DataDescriptor<Value> { ... }

Usage:

// Example usage.
import { DataDescriptors } from '@angular-package/property';

interface PersonShape {
  firstName: string;
}

class Person implements PersonShape {
  firstName = '';
}

class People {
  firstName!: string;
}

const person: Person = new Person();
const people: People = new People();

const firstNameDescriptor = new DataDescriptors<string>()
.set({
  configurable: false,
  enumerable: false,
  writable: false,
  value: people.firstName
})
// After set, get the value.
.get;

// Defines the property `firstName` in the `person` object with the same value as the property in the `people` object.
Object.defineProperty(person, 'firstName', firstNameDescriptor);

Descriptor interface

AccessorDescriptor

Descriptor with its unique optional get() and set() functions, of the Value type. For the accessor descriptor with also the object type, please use the type ThisAccessorDescriptor<Value, Obj>. More about property descriptors here.

interface AccessorDescriptor<Value> extends CommonDescriptor {
  get?: () => Value;
  set?: (value: Value) => void;
}

CommonDescriptor

Common keys configurable and enumerable of a boolean type for accessor and data descriptor, picked from the default PropertyDescriptor. More about property descriptors here.

interface CommonDescriptor
  extends Pick<PropertyDescriptor, 'configurable' | 'enumerable'> {}

DataDescriptor

Descriptor with its unique optional keys, writable of a boolean type and value of a generic Value type. More about property descriptors here.

interface DataDescriptor<Value> extends CommonDescriptor {
  writable?: boolean;
  value?: Value;
}

Descriptor type

ThisAccessorDescriptor

AccessorDescriptor interface as a type cause of ease of use this of an Obj type in the get() and set() functions. More about property descriptors here.

type ThisAccessorDescriptor<Value, Obj> = AccessorDescriptor<Value> &
  ThisType<Obj>;

Descriptors

Property descriptors container.

export class Descriptors<
  Obj extends object | Function,
  Keys extends keyof Obj
> { ... }

GIT

Commit

• AngularJS Git Commit Message Conventions
• Karma Git Commit Msg
• Conventional Commits

Versioning

Semantic Versioning 2.0.0

Given a version number MAJOR.MINOR.PATCH, increment the:

• MAJOR version when you make incompatible API changes,
• MINOR version when you add functionality in a backwards-compatible manner, and
• PATCH version when you make backwards-compatible bug fixes.

Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.

FAQ How should I deal with revisions in the 0.y.z initial development phase?

The simplest thing to do is start your initial development release at 0.1.0 and then increment the minor version for each subsequent release.

How do I know when to release 1.0.0?

If your software is being used in production, it should probably already be 1.0.0. If you have a stable API on which users have come to depend, you should be 1.0.0. If you’re worrying a lot about backwards compatibility, you should probably already be 1.0.0.

License

MIT © angular-package (license)

Packages

Useful and simple to use packages.

| Package | Description | Status | | :------------------------------------------- | :---------------------------------------------------------------- | -----: | | callback | Manages the callback function. | | | change-detection | Improves application performance. | | | component-loader | Handles dynamic loading components. | | | core | Core features. | | | error | Manages an Error. | | | indexeddb | Wrapper to IndexedDB client-side storage. | | | name | The name with prefix and suffix. | | | preferences | Preferences, settings, options, configuration and setup in steps. | | | prism | Prism highlighter module. | | | property | Handles object properties. | | | range | The range between a minimum and maximum. | | | reactive | Automatize the process of creating some rxjs features. | | | sass | Extension for sass modules and new modules. | | | sass-list | Modified list Sass module. | | | sass-string | Modified string Sass module. | | | spectre.css | Modified Spectre.css - a lightweight, responsive, and modern CSS framework originally designed by Yan Zhu. | | | storage | The storage of data under allowed names. | | | tag | Any tag with optional attributes. | | | testing | Support for testing other packages. | | | text | Text on the template with replaceable tags. | | | type | Common types, type guards, and type checkers. | | | ui | User interface. | | | wrapper | Wrap the text with the opening and closing chars. | |

Click on the package name to visit the package GitHub README.md