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

1npm i @ignis-web/gen-css-identifier -S

How use

Generation class name of css:

1const GenCssIdentifier = require('@ignis-web/gen-css-identifier');
2
3// by default, alphabet is 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
4// this is characters safe  for generation class name of css
5const genClassName = new GenCssIdentifier();
6
7genClassName.next(); // a
8genClassName.next(); // b
9...
10genClassName.next(); // aaad

You can set custom alphabet:

1const GenCssIdentifier = require('@ignis-web/gen-css-identifier');
2
3const genClassName = new GenCssIdentifier('abcd'); // we set alphabet
4
5genClassName.next(); // a
6genClassName.next(); // b
7...
8genClassName.next(); // aaad

You set except filter. If you want filter specific identifier.

1const GenCssIdentifier = require('@ignis-web/gen-css-identifier');
2
3// generator id for html
4const genId = new GenCssIdentifier('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789')
5  .except(['ga']); // skip id for resolve conflict with code of  Google Analytics
6

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.

1const GenCssIdentifier = require('@ignis-web/gen-css-identifier');
2
3// generator class for html
4const generator = new GenCssIdentifier('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', { notStartsWith: '0123456789' }); // { notStartsWith: [ '0', '1', '2', ... ] }
5genClassName.next(); // a
6...
7genClassName.next(); // a0
8...
9genClassName.next(); // b4

If you want getting the same value for specific identifier. You can use method getFor:

1const GenCssIdentifier = require('@ignis-web/gen-css-identifier');
2
3const genId = new GenCssIdentifier('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789');
4console.log(genId.getFor('key')); // a
5console.log(genId.getFor('key') === genId.getFor('key')); // true

In addition, you can set something prefix for generated identifiers. For example:

1const GenCssIdentifier = require('@ignis-web/gen-css-identifier');
2
3const genId = new GenCssIdentifier('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', { prefix: 'prefix-' });
4console.log(genId.next()); // prefix-a
5console.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":

1// Jest test-runner
2
3const generator = new GeneratorClassName('abcd');
4test.each([
5  ['a'], ['b'], ['c'], ['d'],
6  ['aa'], ['ab'], ['ac'], ['ad'],
7  ['ba'], ['bb'], ['bc'], ['bd'],
8  ['ca'], ['cb'], ['cc'], ['cd'],
9  ['da'], ['db'], ['dc'], ['dd'],
10])('generation', expected => {
11  expect(generator.next()).toBe(expected);
12});

Test

1npm test