Fix mask plugin with data directive (CSP)

[kg-currenxie]

Before:

Data directive:

Alpine.data('form', function() {
  return {
    amountMask: function (inputValue) {
      return this.$money(inputValue) // ❌ How to access the $money formatter?
    }
  }
})

HTML:

<form x-data="form">
  <input x-mask:dynamic="amountMask($input, $money)" /> // ❌ 
</form>

After

Data directive:

Alpine.data('form', function() {
  return {
    amountMask: function (inputValue, moneyMaskFormat) { // ✅ We get access to the formatter
      return moneyMaskFormat(inputValue)
    }
  }
})

HTML:

<form x-data="form">
  <input x-mask:dynamic="amountMask" /> // ✅ Valid CSP expression
</form>

Let me know if I'm missing something, or if it would break something else?
It does work in our app's UI tho.

[kg-currenxie]

I can't figure out what causes the breaking tests really :) Help appreciated 🙏

This is the last bit of a huge CSP re-write, to deploy our new app to production :)

[ekwoka]

I think the improved API would probably be actually binding the function to an object with the scope/magics...

also not sure why it causes an issue with the failed tests...but definitely need to figure that one out...

[kg-currenxie]

binding the function to an object with the scope/magics...

not following a 100% :)

do you mean passing this as the 2nd argument instead? 🤔

{
  '$input': input,
  '$money': formatMoney.bind({ el }),
}

or

value(input).bind({
                                '$input': input,
                                '$money': formatMoney.bind({ el }),
                            })

🤔

[ekwoka]

more like

value.bind({ $input: input, $money: formatMoney.bind({el}) })(input)

But also whatever would make this refer to the data context as well...

[kg-currenxie]

But also whatever would make this refer to the data context as well...

Yea, i just came across that issue. this would be undefined. Haven't solved that yet 😓

[ekwoka]

Well, I just showed....bind the value...

[kg-currenxie]

Sorry, i spoke too soon :P

this now have access to $input and $money 👌 but not the data directive :/ which i need in my case.

basically im doing something like

      this.$money(
        this.$input,
        '.',
        ',',
        this.nonFractionCurrencies.includes(this.currency) ? 0 : 2,
      )

where nonFractionCurrencies and currency is stored in the data context

thanks for you continuing support! 🙏

[ekwoka]

You can possibly look at how magics are injected into the state in the first place, or use mergeProxies directly to layer them.