Casing of signals/computed signal names

[khalwat]

It appears that signal names and computed signal names defined like data-signals-gradientName & data-computed-gradientName are lower-cased before the computed signals are created.

This works:

         data-computed-gradientcolor="$pokemonType"
    >
        <h1 data-text="$gradientcolor"></h1>

but this doesn't work:

         data-computed-gradientColor="$pokemonType"
    >
        <h1 data-text="$gradientColor"></h1>

so it looks like it's lower-casing what I name the attribute, so this works:

         data-computed-gradientColor="$pokemonType"
    >
        <h1 data-text="$gradientcolor"></h1>

which is frankly a little weird (and undocumented as far as I can tell).

I think signal and computed signal name case should be honored, so camelCase (or whatever people want) can be used for signal names. CamelCase and other casing does work if signals are declared via object syntax, e.g.:

<div data-signals="{ gradientColor: 'green' }"</div>
<h1 data-text="$gradientColor"></h1>

...which is inconsistent, and also, of course, we can't use any kind of object syntax for defining computed signals.

If this is due to limitations of the HTML spec, then probably:

1. It should be prominently noted whatever the naming restrictions are
2. Signal and computed signal names should be normalized to be lowercase everywhere

That means that $gradientColor would be normalized to $gradientcolor before it is evaluated in an expression, and object keys in data-signals="{}" should be normalized to lowercase as well, just like they are when I do data-signals-gradientName

[khalwat]

Just discovered that I can get my camelCase this way (which makes my normalizing comments above somewhat moot):

         data-signals-gradient-color="$pokemonType"
    >
        <h1 data-text="$gradientColor"></h1>

Definitely needs to be documented somewhere. Yes, I realize this is just how data-* attributes work when accessing them via JavaScript, but given how Datastar leverages them, it's unclear how it is going to convert them into signal names.

I think it should be noted in the Datastar documentation that it will do this automatic conversion from kebab-case to camelCase for data- attribute names.

So let's call this a documentation issue.

[khalwat]

Interestingly, this little trick is supposed to work, but doesn't:

         data-signals--gradient-color="$pokemonType"
    >
        <h1 data-text="ctx.signals.JSON()"></h1>

Outputs:

{"-GradientColor": "Electric" }

When it should be:

{"GradientColor": "Electric" }

...according to this.

[bencroker]

Agreed that some of this should be documented. Raised a PR for the key conversion issue at #451.

[bencroker]

The docs currently state:

Note that data-* attributes are case-insensitive. If you want to use uppercase characters in signal names, you’ll need to kebabize them or use the object syntax. So the signal name mySignal must be written as data-signals-my-signal or data-signals="{mySignal: 1}".

If this is insufficient, please make a suggestion.

[bencroker]

Released the fix in v1.0.0-beta.2.