Library size

[drolsen]

Is there a way to trees shake the usage of this module? I'm using ES6 vanilla JS approach so I don't have any jQuery dependency.

Right now I've got three fields using it (phone, zip and credit card) with custom masks.

const FieldMasking = require('inputmask');

const ui = {
  label: el.querySelector('.field__label'),
  native: el.querySelector('.field__native')
};

if (el.classList.contains('input-phone')) {
  new FieldMasking('999-999-9999', {
    positionCaretOnClick: 'ignore'
  }).mask(ui.native);
}

if (el.classList.contains('input-zip')) {
  new FieldMasking('99999', {
    positionCaretOnClick: 'ignore'
  }).mask(ui.native);
}

if (el.classList.contains('input-card')) {
  new FieldMasking('9999 9999 9999 9999').mask(ui.native);
}

Once in place, I noticed my bundled JS gets an extra 78kb compressed / 188kb uncompressed and kind feels to be a bit much for only three fields.

Any suggestions? I know masking is not easy, and I appreciate your time and efforts in this endeavor!

[RobinHerbots]

@drolsen ,

If you do the import like this, you will not load the extensions and will spare some extra kb const FieldMasking = require('inputmask/lib/inputmask');

I hope this helps a bit.
I'm aware of the huge size and I also see this as a problem. I hope I can resolve this in the future. I also hope you can see the difference between the most masking libraries and this one. The inputmask is about "real" masking. Everything is kept generic. The mask templates gets interpreted and translated to a maskset. Validation is generated on the fly. Most other libraries take another approauch. They create more specific implementations for the most commonly used masks. Which one is better, I don't know.

[drolsen]

This was the info I needed, thank you RobinHerbots!

Changing import to direct lib has reduced my bundle size by 30kb compressed / 56kb uncompressed.

[Herz3h]

Thank you @RobinHerbots

Perhaps adding this info somewhere in the readme could be useful to future users 👍

[ROSAESTERMG]

Hello Robin, I do not know how to activate that it counts characters when entering. I am seeing another option with the selector but I need it to multiply each one if it is not empty by the value of the variable product. From already thank you very much https://todoletreros.cl/?product=producto-variable&attribute_pa_material=trovicel3mm-interior&attribute_pa_tamano=17x24&attribute_pa_caracteristicas=adhesivo-normal-impreso-laminado

[RobinHerbots]

@ROSAESTERMG,

Can you please open a new issue for this and elaborate a bit as it is not clear to me.

[ROSAESTERMG]

Hello Robin, I need you to count each number that I was going to enter in a number entry, to count it and multiply the value of the final product. For example, if the final product is 10 and the number entered was 1853, it would say 4 numbers x 10 = 40. That is my main need after I create 2 inputs that when containing a data I thought I would do the same exercise but none of the fields created multiplies the value of the selected variable product. many thanks

[mankowitz]

I'm using vite with import instead of require

import Inputmask from 'inputmask/lib/inputmask';

When I do this, the library is still about 200kb rendered.