fix: DomValidator is overly restrictive for attributes

Description

@schultek I am getting the following server error emitted from DomValidator in an SSR app.

Invalid argument(s): "x-transition:enter" is not a valid attribute name.

This is being produced because I am using Alpine.js to generate some components and it has "non-standard" attributes (at least according to jaspr validator)

https://alpinejs.dev/directives/transition#applying-css-classes

<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle</button>

    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 scale-90"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-90"
    >Hello 👋</div>
</div>

Doctor Output

Using the latest main branch revisions of all jaspr apps.

Discussion

Line in question:

https://github.com/schultek/jaspr/blob/a6fbb30d95362723304cded037eb6f22212110bf/packages/jaspr/lib/src/server/markup_render_object.dart#L165

The following modification should resolve the issue:

  static final _attributeRegExp =
      RegExp(r'^[a-z](?:[a-zA-Z0-9\-_:]*[a-z0-9]+)?$');

This modification permits the inclusion of colons within the string while maintaining the requirement that the string must start with a lowercase letter and optionally end with a lowercase letter or a digit, assuming there are characters following the initial letter.

schultek / jaspr

fix: DomValidator is overly restrictive for attributes #194