x-data with re-usable data does not support dash-case names

[seangwright]

The docs show how Alpine.data('someName', () => ({ ... })) can be used to supply data for an element with x-data="someName"

https://alpinejs.dev/essentials/state#re-usable-data

However there are requirements for someName - it cannot be dash-case.

I've created an example pen where Alpine fails to function for the whole page when an x-data attribute is assigned a string with a dash.
https://codepen.io/seangwright/pen/YzVWEmo

Alpine.data() continues to function if its called with a string with a dash, but the attribute causes things to crash.

I've run into this locally and end up with the console error:

Uncaught TypeError: Object.defineProperty called on non-object

I notice that the following returns undefined when expression is a dash-case string:

// packages/alpinejs/src/evaluator.js
function evaluate(el, expression, extras = {}) {
  let result;
  evaluateLater(el, expression)((value) => result = value, extras);
  return result;
}

This causes the following to throw the error because obj is undefined:

Object.defineProperty(obj, `$${name}`, {
      get() {
        return callback(el, {Alpine: alpine_default, interceptor});
      },
      enumerable: false
    });

If dash-case strings aren't supported for x-data, that's not a huge problem, but the docs don't mention it and I thought the error was caused by my use of Alpine as an ES module in a webpack bundle.

[SimoTod]

Dashes are not allowed in variable names, it's a js thing. For example, in vanilla js, you can't define var background-color = 'red', the parser would interpretate as a subtraction and error because of the invalid syntax.

[seangwright]

I am aware of that, but there's nothing in the docs that makes it clear that this value is being used as a variable.

If it were being used as an object property (which is what it looks like from the public API) it wouldn't be a problem 🤷‍♂️.

Maybe I could add some info around Alpine.data() to the docs that warns against this use-case?

[SimoTod]

Yeah, what i mean is that the issue is not strictly Alpine.data but the usage of x-data. That one is a variable name that needs to be evaluated by alpine, if you put a string with dashes, js evaluates it as a subtraction so the result will be a null object and afterwards, when alpine tries to access a property, it will eventually crash.
You would have a similar issue if you define the object on the global scope using dashes (like it used to be in v2) and then you try to use it in x-data.

[seangwright]

Right, it just wasn't clear that the value assigned to x-data="..." is parsed as a 'variable' name and not a string 'key' for an object property.

[hyvyys]

I just wasted an hour over this, I would really love it to be outlined in the docs.

[ekwoka]

All Alpine expressions are JavaScript expressions except were explicitly mentioned as otherwise.