x-mask and $money don't work in separate data directives (CSP)

[kg-currenxie]

Hi :)

Moving from x-mask:dynamic="$money($input...
to

Alpine.data('moneyInput', function() {
  return {
    moneyFormatter: function(input) {
      this.$money(... // expecting this to be available
    }
  }
})
<input x-data="moneyInput" x-mask:dynamic="moneyFormatter" />

i assume its because of this value(input) here? 🤔
https://github.com/alpinejs/alpine/blob/main/packages/mask/src/index.js#L21

Alpine.dontAutoEvaluateFunctions(() => {
    evaluator(value => {
        result = typeof value === 'function' ? value(input) : value
    }, { scope: {
        // These are "magics" we'll make available to the x-mask:function:
        '$input': input,
        '$money': formatMoney.bind({ el }),
    }})
})

or if not, is there another way to access the plugin?

[ekwoka]

They aren't normal magics.

They exist only in the scope of the expression.

You can pass it into your own function though, since it's just a function.

x-mask="myFormatter($money, $input)"

[kg-currenxie]

But CSP doesn't allow any expression :P if you meant x-mask:dynamic="myFormatter($money, $input)"
if you meant without :dynamic, that didn't call the function at all, it literally put the string myFormatter($money, $input) into my input

[ekwoka]

Yeah it was a quick typing. Forgot the dynamic.

[kg-currenxie]

:)

Would it not be possible to inject the formatter into the function?

value(input) -> value(input, formatMoney.bind({ el })) ? :D

[luanfonceca]

Hey folks, I just faced the same issue, trying to use masks with CSP.
Have any of you found a workaround?

[kg-currenxie]

@luanfonceca i ended up using patch-package to change the code

diff --git a/node_modules/@alpinejs/mask/dist/module.esm.js b/node_modules/@alpinejs/mask/dist/module.esm.js
index 91e4222..e6b833e 100644
--- a/node_modules/@alpinejs/mask/dist/module.esm.js
+++ b/node_modules/@alpinejs/mask/dist/module.esm.js
@@ -11,7 +11,7 @@ function src_default(Alpine) {
             let result;
             Alpine.dontAutoEvaluateFunctions(() => {
               evaluator((value2) => {
-                result = typeof value2 === "function" ? value2(input) : value2;
+                result = typeof value2 === "function" ? value2.bind({ $el: el, $input: input, $money: formatMoney.bind({el}) })(input) : value2;
               }, { scope: {
                 // These are "magics" we'll make available to the x-mask:function:
                 "$input": input,

this will make this.$money available on this in the x-data scope

then in html:

<input x-mask:dynamic="myValueMask" ...

and wherever you create your data directives:

Alpine.data('abc', () => {
  return {
    myValueMask: function () {
      return this.$money(this.$input, '.')
    }
  }
})