How to generate html with alpine.js extensions via xslt

I try to generate a single page application based on alpine.js. The HTML should be generate form XML descriptions via XSLT.

Example for required output.

<div @notify="alert('Hello World!')">
    <button @click="$dispatch('notify')">
        Notify
    </button>
</div>

My try to generate this via xsl:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"  indent="yes" />

  <xsl:template match="test">
    <div>
        <xsl:attribute name="@notify">
            <xsl:text>alert('Hello World!')</xsl:text>
        </xsl:attribute>
        <button>
            <xsl:attribute name="@click">
                <xsl:text>$dispatch('notify')</xsl:text>
            </xsl:attribute>
             Notify
         </button>
    </div>
  </xsl:template>

</xsl:stylesheet>

Imput XML:

<?xml version="1.0"?>
<test/>

Result:

Error in xsl:attribute/@name on line 8 column 39 of alpina.xsl: XTDE0850 Attribute name {@notify} is not a valid QName

Solution

I don't know alpine.js, but we see similar problems with other "XML-like" or "HTML-like" formats.

XSLT works on the XDM data model, which defines concepts such as elements and attributes, and defines rules for the content, for example rules for element and attribute names (which don't allow them to start with "@"). If you want to generate something like the output you have shown, you first need to define a representation of this content using the XDM data model. This might include a mapping from XDM attribute names to alpine attribute names (for example, you could use the XDM attribute name __notify to represent the alpine attribute name @notify).

Then (a) your stylesheet would generate an XDM attribute named __notify, and (b) you would need a custom serialization method that serialises __notify as @notify.

The Saxon serialization machinery is highly customizable. If you want to integrate this fully, you could register a SerializerFactory with the Saxon Configuration, that registers a user-defined serialization method, and uses a subclass of XmlEmitter or HtmlEmitter to customize the output. For example you could override the writeAttribute method so it outputs __notify="xxxx" as @notify="xxxx".