Make the attribute's qualifier separator configurable (the dot breaks JSX)?

[claudioc]

I am building an application that is (only) rendered on the server (Fastify); I am building it in the open, so you can take a look. I am using JSX for server-side templating and Preact as the server-side JSX renderer. I also use Alpine and HTMX for client-side interactivity. So far, so good - the project is a BIG proof-of-concept of this idea of using mostly SSR but with modern tools, like JSX and reactivity via Alpine, without the need of a bundler...

The issue is that I cannot use qualifiers in Alpine's attribute, as in x-on:keydown.escape since the dot is not syntactically valid for Preact (also Prettier and eslint apparently).

I wonder if we could somehow configure that dot to be another character, like "_" (which is probably safe, in Alpine's context).

What do you think? Is there any other way to fix this problem that I haven't thought of?

Attaching a screenshot just for reference.

Thank you!

[ekwoka]

I believe _ is not allowed in attribute names. And . Is tough in jsx.

Have you thought about using astro for this instead of Preact? It works nicely there.

[claudioc]

Astro is really cool, but as I am building a "product" more than a single instance of website/webapp, I want to have as much as flexibility in the tech stack as possible. Also, the issue with Alpine+JSX is not really a blocker - it's just a small annoying thing at the moment

Preact here is only used to compile the JSX on the server (there is no Preact running on the client)

[ekwoka]

Checked, and _ is valid in html attributes.

I feel like it should be possible to make this work with your linters.

Does this not work at all? or just TS complains?

[claudioc]

Besides the linters, I also tried with just both TS and esbuild (which I use), see screenshots. They both fail with a similar error. I may try another "JSX compiler" instead of Preact - but that would be React :/

[claudioc]

In the meantime, I think I have found a workaround - using the spread operator

  const onKeypress = {
    'x-on:keypress.escape': 'alert(123)',
  };

  return (
    <div {...onKeypress}>
      {/* something something */}
    </div>
  );

[WhiskeyTuesday]

Another way to do the same thing, also a bit of a crusty hack but in my opinion maybe less so.

    <div { ...{
        'x:on:keypress.escape': 'alert(123)',
        'x:otherattribute': 'whatever()',
     } }>
      {/* something something */}
    </div>
  );