Passing W3C validator

[icaliman]

I found a way how to pass W3C validator using a custom prefix and . instead of :

Here is the JS code:

const startingWith = (subject, replacement) => ({ name, value }) => {
	if (name.startsWith(subject)) {
		name = name.replace(subject, replacement);
	}
	return { name, value };
};

Alpine.prefix('data-x');
Alpine.mapAttributes(startingWith('data-xon.', Alpine.prefixed('on:')));
Alpine.mapAttributes(startingWith('data-xbind.', Alpine.prefixed('bind:')));

With this configuration we can use alpine like so:

<div data-xdata="{ open: false }">
    ...
</div>

<div data-xbind.class="! open ? 'hidden' : ''">
  ...
</div>

<button data-xon.click="open = ! open">
  Toggle
</button>

Do you think this is a good solution?

[ekwoka]

Hmm, does it handle the modifiers all correctly?

I guess the modifier splitting happens after the prefix removal, doesn't it?

[seoMattH]

@icaliman I'm trying to implement your solution into a few of my projects. Problem is I'm more HTML and CSS. I use Alpine JS because I don't have to write a ton of Javascript so I'm weak in that area. Did you just add this code into the project?

const startingWith = (subject, replacement) => ({ name, value }) => {
if (name.startsWith(subject)) {
name = name.replace(subject, replacement);
}
return { name, value };
};

Alpine.prefix('data-x');
Alpine.mapAttributes(startingWith('data-xon.', Alpine.prefixed('on:')));
Alpine.mapAttributes(startingWith('data-xbind.', Alpine.prefixed('bind:')));

[icaliman]

@seoMattH you can see the demo here: https://codesandbox.io/s/alpinejs-w3c-compliant-y68ody?file=/index.html

This is the full code:

<script>
      const startingWith = (subject, replacement) => ({ name, value }) => {
        if (name.startsWith(subject)) {
          name = name.replace(subject, replacement);
        }
        return { name, value };
      };

      document.addEventListener("alpine:init", () => {
        Alpine.prefix("data-x");
        Alpine.mapAttributes(startingWith("data-xon.", Alpine.prefixed("on:")));
        Alpine.mapAttributes(
          startingWith("data-xbind.", Alpine.prefixed("bind:"))
        );
      });
</script>

I added a more complex example here: https://codesandbox.io/p/sandbox/alpinejs-w3c-compliant-y68ody?file=%2Fcomplex.html%3A31%2C44

In the second example the html tags are shorter. For example instead of data-xbind.class we can write data-xclass

[seoMattH]

@icaliman that is really slick and worked perfectly. I've used it on a few projects and they all validate now. Thank you sir for sharing.

[jgramerrr]

that sounds great. For me it doesn't yet work.

Did you just inserted the above script tag under a div tag (in the file where the 'x-data' attribute is set) and change the name of the 'x-data' attribute ? e.g. data-xdata="{doSomething: false}"

Or does it also have to be changed in the file where its used e.g. !doSomething ?

Maybe it also has to do something with it being in an antlers.html file.

[ekwoka]

@jgramerrr You need it to run before you call Alpine.start.

[PubliAlex]

Hello,

Nice catch, I wonder just one thing, why did you remove the - between x and the next attribute. Eg :
why data-xon instead of data-x-on
why data-xbind instead of data-x-bind

The important is to remove the :, not that comma isn't it ?

[icaliman]

Hi!

You can use data-x- prefix if you preffer.

[SimoTod]

Yeah, that was how the OP approached it. You can use any prefix as long as it doesn't conflicts with an existing directive.

[PubliAlex]

Ok thank you