search

alpinejs / alpine

A rugged, minimal framework for composing JavaScript behavior in your markup.
https://alpinejs.dev
MIT License
28.33k stars 1.23k forks source link

Discuss - valid HTML #433

Closed ianhobbs closed 4 years ago

ianhobbs commented 4 years ago

Hi This is more of a discussion of good form. Html validation throws errors on a lot of the Alpine markup. [ x-data , @click, :class etc ] . I'm using the following Doctype declarations.

<!DOCTYPE html> <html lang="en"> <meta charset="UTF-8">

Is there an advisory on a better doctype declaration to allow these attributes?

There is no fuctional error just a validation error.

SimoTod commented 4 years ago

I don't think there are any doctypes supporting x-* attributes but browser will still render the page even with "invalid" attributes. Does it cause a particular issue?

MuzafferDede commented 4 years ago

I used to challenge this a lot back in time. I was building front end of airline company's website which they need to be valid by W3C and WCAG guidelines and validators. So i couldn't use custom attributes or anything that cause red flag on the validation.

This wonders me if that is the case, could we go with data-x-[directive]. Also I was thinking x- attribute should be configurable so devs can define their own selectors. Maybe something like data-alpine-config="{prefix: 'data-x'}" so with this, alpine directives will regionesed by data-x-[directive] prefix.

SimoTod commented 4 years ago

I think we can easily support an extended syntax data-x-* along the canonical one for those who need to stick with valid html5 syntax if Caleb is cool with that. It will be just about adding an optional data- prefix to the regexps.

HugoDF commented 4 years ago

I agree with adding support for "data-x-" on top of "x-" (rather than config).

In a way I'm sure it could just be a "alpine-w3c-compliant" fork since the changes are likely to be very localised

calebporzio commented 4 years ago

I think we should hold off on this until it's a legitimate problem for people.

Not worth the work of no one actually needs it

ntkoopman commented 3 years ago

I think it would be good to have an alternative. I was thinking of using alpine together with server rendered react, but jsx doesn't support non-valid attributes like @click, so it's impossible.

ntkoopman commented 3 years ago

Oh, seems it's already there using x-on: and x-bind: instead which work correctly in react as well (might have to use object spread when using jsx, like <div x-on:click="open=false" {...{'x-show.transition.out':'open'}}>)

vrabota commented 3 years ago

Any news on this item? I can't upload my premium theme on Envato platform because of this issue :(

SimoTod commented 3 years ago

@vrabote V3 supports custom prefixes: https://github.com/alpinejs/alpine/discussions/2042#discussioncomment-1304957

vrabota commented 3 years ago

@SimoTod Thank you!!! It's will be nice to have that in docs 👍

calebporzio commented 3 years ago

@vrabota - good call. Can you PR documentation for it? Thanks!

driss-chelouati commented 3 years ago

@calebporzio I implemented a solution proposed by @SimoTod , but it does only partially work and doesn't pass validation. This is my entire alpine setup: 

//Alpine JS and plugins import
import Alpine from 'alpinejs'
import intersect from '@alpinejs/intersect'
import Fern from '@ryangjchandler/fern'
//Prefix alpine special attributes to pass W3C validation
document.addEventListener('alpine:init', () => Alpine.prefix('data-x-'))
window.Alpine = Alpine
//Init intersect plugin
Alpine.plugin(intersect)
//Init Fern plugin
Alpine.plugin(Fern)
//Init Fern persisted store
Alpine.persistedStore('app', {
    isLoggedIn: false,
})
//Start Alpine JS
Alpine.start()

Unfortunately, this also prevents me from releasing this product on ThemeForest.

Using data-x-* attributes, I don't have the invalid attributes errors of before. But now I have XML errors. So Iam affraid this isn't solved yet or Iam missing something. See attached screen. alpine-w3c

vrabota commented 3 years ago

@driss-chelouati you can't use custom data- attributes with data-x-on:click (it's not allowed), should be something like data-x-on-click. : is not allowed in data- attributes, can we have this stuff configurable as well?

vrabota commented 3 years ago

@driss-chelouati you can fix your issues by using this approach https://alpinejs.dev/globals/alpine-data#encapsulating-directives-with-x-bind

Instead of defining your custom directives like x-bind:class you can use in HTML just x-bind="trigger" that encapsulate all not allowed tags

driss-chelouati commented 3 years ago

@vrabota That would only result in unecessary convolutions in my code as it does not fit my use case. I simply need to use existing directives or otherwise why are they still there if they do not validate? In the end, I'll just end up converting my stuff to Vue and dropping alpine for good as I don't see a fix coming for this in a reasonable delay.

PubliAlex commented 5 months ago

@driss-chelouati you can fix your issues by using this approach https://alpinejs.dev/globals/alpine-data#encapsulating-directives-with-x-bind

Instead of defining your custom directives like x-bind:class you can use in HTML just x-bind="trigger" that encapsulate all not allowed tags

That's not a viable solution, it completely change most developper workflow whereas we just need a syntax that would be w3c valid.

SimoTod commented 5 months ago

@PubliAlex This is probably your best shot: https://github.com/alpinejs/alpine/discussions/3397