Support alpine-typescript component names

[stancl]

I have some components that look like this:

<a href="..." x-data="Alpine.component('modalLink')('index', 'products')" x-spread="click">
    Products
</a>

alpinejs-devtools renders it like this:

Also this:

Alpine.component('darkModeToggle')()

is rendered as Alpine.component

Is there some behavior for only looking at the last ()? I think I can solve this on my end but maybe this could be an issue for some other components too. Wondering what's the rationale behind the different display name here.

Thanks

[HugoDF]

Feel free to PR

The function that gets the function name from x-data value is at https://www.github.com/alpine-collective/alpinejs-devtools/tree/master/packages%2Fshell-chrome%2Fsrc%2Futils.js#L269

[stancl]

Ah, I see, so it's meant to make function calls look nicer? So it removes the parameters, which transforms myFunction('foo') to myFunction?

[ryangjchandler]

@stancl Yeah, that's it.

[HugoDF]

yeah we might want to skip the formatting if it's something.fn(), just print the whole thing I guess

or update the regex to remove all (*) except the first one if there's more than 1 (all if there's only 1 instance)?

[stancl]

I added an answer with userland code that adds nice support here. I agree that if there's something more complex than foo(bar) it could be nice to show the full thing. But as far as components made with my package go, I think the solution below is probably ideal. Showing full data can be problematic and this mimics the behavior of e.g. Vue components in Vue devtools.

[stancl]

This seems like the best solution:

import { AlpineComponent } from '@leanadmin/alpine-typescript';

window.Alpine.onBeforeComponentInitialized(component => {
    if (! component.$el.hasAttribute('x-title')) {
        if (component.$data.constructor.prototype instanceof AlpineComponent) {
            component.$el.setAttribute('x-title', component.$data.constructor.name);
        }
    }
});

[HugoDF]

nice, so solved in alpine-typescript 👍