Utils
During the framework writing, we have accumulated many functions that you could also use.
import utils from 'akili/src/services/utils';
console.log(utils === Akili.services.utils); // true
Also you have access to utils object inside the scope expression.
<my-component class="${ utils.class({active: true}) }"></my-component>
utils.class(object) string
- object Object - object with the classes and states
Create a string of the html classes from the object
const classes = {
active: true,
red: 1,
disabled: false
}
console.log(utils.class(classes));
// 'active red'
utils.style(object) string
- object Object - object with the styles and values
Create a string of html styles from the object
const styles = {
background: false,
color: 'red',
borderColor: 'black'
}
console.log(utils.style(styles));
// 'color:red;border-color:black'
utils.filter(array, handler, keys) Array
- array Array - array to filter
- handler string | RegExp | function - condition for filtering
- [keys] string[] | string - keys of the items
Filter the array
console.log(utils.filter([1, 2, 3, 11], item => item.match('1')));
// [1, 11]
console.log(utils.filter([{x: 1}, {x: 2}, {x: 3}, {x: 11}], '1', 'x'));
console.log(utils.filter([{x: 1}, {x: 2}, {x: 3}, {x: 11}], '1', ['x']));
console.log(utils.filter([{x: 1}, {x: 2}, {x: 3}, {x: 11}], '1', [['x']]));
// [{x: 1}, {x: 11}]
console.log(utils.filter([{x: {y: 1}}, {x: {y: 2}}], '1', [['x', 'y']]));
// [{x: {y: 1}}]
console.log(utils.filter([{x: 1, y: 2}, {x: 3, y: 3}, {x: 2, y: 1}], '1', ['x', 'y']));
console.log(utils.filter([{x: 1, y: 2}, {x: 3, y: 3}, {x: 2, y: 1}], '1', [['x'], ['y']]));
// [{x: 1, y: 2}, {x: 2, y: 1}]
utils.sort(array, keys, direction) Array
- array Array - array to filter
- [keys=true] boolean | Array[] | string[] | string - sorting conditions
- [direction=[]] boolean | boolean[] - sorting direction
Sort the array
console.log(utils.sort([3, 2, 1], true));
// [1, 2, 3]
console.log(utils.sort([1, 2, 3], false));
// [3, 2, 1]
console.log(utils.sort([{x: 3}, {x: 2}, {x: 1}], [['x']], [true]));
console.log(utils.sort([{x: 3}, {x: 2}, {x: 1}], ['x'], true));
console.log(utils.sort([{x: 3}, {x: 2}, {x: 1}], 'x'));
// [{x: 1}, {x: 2}, {x: 3}]
console.log(utils.sort([{x: 1}, {x: 2}, {x: 3}], [['x']], [false]));
console.log(utils.sort([{x: 1}, {x: 2}, {x: 3}], ['x'], false));
console.log(utils.sort([{x: 1}, {x: 2}, {x: 3}], 'x', false));
// [{x: 3}, {x: 2}, {x: 1}]
console.log(utils.sort([{x: 2, y: 2}, {x: 2, y: 1}, {x: 2, y: 3}], [['x'], ['y']], [true, true]));
// [{x: 1, y: 3}, {x: 2, y: 1}, {x: 2, y: 2}]
console.log(utils.sort([{x: {y: 2}}, {x: {y: 1}}], [['x', 'y']], [true]));
// [{x: {y: 1}}, {x: {y: 2}}]
utils.split(str, del, exclude) string[]
- str string - value to split
- [del] string|RegExp - delimiter
- [exclude] string[] - list of the excluded boundaries
split the string extended
console.log(utils.split("Hello World", " "));
// ["Hello", "World"]
console.log(utils.split('x = 5; y = "1;2;3"', ";", ['"']));
// ['x = 5', ' y = "1;2;3"']
utils.includeKeys(obj, keys) object
- obj object - actual object
- keys string[] - necessary keys
Return a new object with the specified keys
console.log(utils.includeKeys({x: 1, y: 1, z: 1}, ['x', 'z']));
// {x: 1, z: 1}
utils.excludeKeys(obj, keys) object
- obj object - actual object
- keys string[] - necessary keys
Return a new object without the specified keys
console.log(utils.excludeKeys({x: 1, y: 1, z: 1}, ['y']));
// {x: 1, z: 1}
utils.isPlainObject(value) boolean
- value * - value to check
Check the object is plain (has constructor Object or Array)
utils.copy(value, options) boolean
- value * - value to copy
- [options={ nested: true, enumerable: true }] object - options
Copy the value
utils.compare(a, b, options) boolean
- a * - first value
- b * - second value
- [options={ enumerable: true }] object - options
Compare two values. Objects is compared for identity of all properties.
utils.encodeHtmlEntities(string) string
- string string - value to convert
Convert the string to HTML entities
console.log(utils.encodeHtmlEntities('you & me'));
// 'you & me'
utils.decodeHtmlEntities(string) string
- string string - value to convert
Decode the HTML entities
console.log(utils.decodeHtmlEntities('you & me'));
// 'you & me'
utils.toCamelCase(string) string
- string string - value to convert
Convert the string to a camel case
utils.toDashCase(string) string
- string string - value to convert
Convert the string to a dash case
utils.getPropertyByKeys(keys, object) *
- keys string[] - object keys
- object Object - object to find
Get the nested object property by array keys
console.log(utils.getPropertyByKeys(['x', 'y'], {x: {y: 5}}));
// 5
utils.hasPropertyByKeys(keys, object) boolean
- keys string[] - object keys
- object Object - object to check
Check the object nested property existence
console.log(utils.hasPropertyByKeys(['x', 'y'], {x: {y: 5}}));
// true
utils.setPropertyByKeys(keys, object, fn) *
- keys string[] - object keys
- object Object - object to set
- fn function - function to set the value
Set the object nested property value
let obj = {x: {y: 5}};
console.log(utils.setPropertyByKeys(['x', 'y'], obj, (last, val) => last? 6: (val || {})));
// {y: 6}
console.log(obj.x.y);
// 6
utils.deletePropertyByKeys(keys, object, fn) boolean
- keys string[] - object keys
- object Object - object to delete
- [fn] function - function to handle
Delete the property from the object
let obj = {x: {y: 5}};
utils.deletePropertyByKeys(['x', 'y'], obj, val => val != 5);
console.log(obj.x.hasOwnProperty('y'));
// true
utils.deletePropertyByKeys(['x', 'y'], obj);
console.log(obj.x.hasOwnProperty('y'));
// false
utils.createRandomString(length, fn) string
- [length=16] integer - length of the string
- [fn] function - Function to check the uniqueness. If you return true the string will be regenerated until the function returns a negative value.
Generate a random string
There are a lot of others but less popular functions in utils. You can take a look at the source code.