Generation css identifier
Library for generation short and unique identifiers: class name or id. This package is allow can generation unlimited number of identifier with minimal costs of CPU. Length of identifier dependent of size alphabet. The more characters there are in the alphabet, the longer the identifier will remain the shortest.
This package is used in framework for creation Server HTML Components
Install
npm i @ignis-web/gen-css-identifier -S
How use
Generation class name of css:
const GenCssIdentifier = require('@ignis-web/gen-css-identifier');
// by default, alphabet is 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
// this is characters safe for generation class name of css
const genClassName = new GenCssIdentifier();
genClassName.next(); // a
genClassName.next(); // b
...
genClassName.next(); // aaad
You can set custom alphabet:
const GenCssIdentifier = require('@ignis-web/gen-css-identifier');
const genClassName = new GenCssIdentifier('abcd'); // we set alphabet
genClassName.next(); // a
genClassName.next(); // b
...
genClassName.next(); // aaad
You set except filter. If you want filter specific identifier.
const GenCssIdentifier = require('@ignis-web/gen-css-identifier');
// generator id for html
const genId = new GenCssIdentifier('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789')
.except(['ga']); // skip id for resolve conflict with code of Google Analytics
According to W3C specification (clause 4.1.3 Characters and case) css class and id can't start with number. But the longer alphabet, the more number of calls indentifier will have short length. To solve this task, you can use parameter "notStartsWith". It's string or array of string from origin alphabet. This symbols will not be used as first symbol of identifier.
const GenCssIdentifier = require('@ignis-web/gen-css-identifier');
// generator class for html
const generator = new GenCssIdentifier('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', { notStartsWith: '0123456789' }); // { notStartsWith: [ '0', '1', '2', ... ] }
genClassName.next(); // a
...
genClassName.next(); // a0
...
genClassName.next(); // b4
If you want getting the same value for specific identifier. You can use method getFor
:
const GenCssIdentifier = require('@ignis-web/gen-css-identifier');
const genId = new GenCssIdentifier('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789');
console.log(genId.getFor('key')); // a
console.log(genId.getFor('key') === genId.getFor('key')); // true
In addition, you can set something prefix for generated identifiers. For example:
const GenCssIdentifier = require('@ignis-web/gen-css-identifier');
const genId = new GenCssIdentifier('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', { prefix: 'prefix-' });
console.log(genId.next()); // prefix-a
console.log(genId.next()); // prefix-b
Algorithm
In algorithm of work not contain magics or difficult cryptographic methods. Library is applies the approach as in calculus systems (for example, decimal system). The next identifier equals previous plus one, but instead of digits (0...9) we use characters of alphabet.
For example, for called 20 times "next":
// Jest test-runner
const generator = new GeneratorClassName('abcd');
test.each([
['a'], ['b'], ['c'], ['d'],
['aa'], ['ab'], ['ac'], ['ad'],
['ba'], ['bb'], ['bc'], ['bd'],
['ca'], ['cb'], ['cc'], ['cd'],
['da'], ['db'], ['dc'], ['dd'],
])('generation', expected => {
expect(generator.next()).toBe(expected);
});
Test
npm test