Usage with AlpineJS

[Tindome]

Hye

I just try to use alpine.js combined with webscript there seem to be some weird behavior
by example @ tag isn't accepted, neither x-data
any clue of how to achieve it ?

thanks

[mudgen]

Can you give me a snippet of HTML/Alpine that you want to convert and I'll show you how I would go about converting it?

[Tindome]

yes,

this is a part of a popup, which i inject on a webpage : the 'x-' and '@' part are problematics

<div id="facturier__popup" 
x-data="{
    open: true
}"

x-init="
$watch('open', value => {
    const body = document.body;
    if(!open) {
       body.classList.remove('h-screen');
       return body.classList.remove('overflow-hidden');
       return;
    } else {
        body.classList.add('h-screen');
        body.classList.add('overflow-hidden');
       return;
    }
});
"

@evtfacturierpopupinit.window="open = $event.detail.open;"

>

    <!-- Make sure to add the requisite CSS for x-cloak: https://github.com/alpinejs/alpine#x-cloak -->

    <div x-cloak x-ref="modal" x-show.transition.opacity="open" style="z-index:1060;" class="fixed z-20 top-0 left-0 w-screen h-screen bg-gray-500 bg-opacity-25 flex items-center justify-center" role="dialog" aria-modal="true">


        <!--<div @mousedown.away="open = false" @keydown.window.escape="open = false" class="w-full max-w-screen-sm bg-white rounded shadow-xl flex flex-col absolute divide-y divide-gray-200">-->
        <div @mousedown.away="open = false" @keydown.window.escape="open = false" class="w-full max-w-screen-xl h-95vh h-screen bg-white rounded shadow-xl flex flex-col absolute divide-y divide-gray-200">

			<!-- header -->
            <div class="px-5 py-4 flex items-center justify-between">
                <h2 class="text-xl leading-tight text-gray-700">
                    Are you sure?
                </h2>

                        <div class="absolute right-0 top-0 -mr-2 -mt-2 border cursor-pointer shadow-lg bg-white z-10 p-1 rounded-full p-2" @click="open = false">
        <img src="https://image.flaticon.com/icons/svg/151/151882.svg"/ class="w-2 h-2">
        </div>
            </div>
            

            <div class="p-5">
                <p class="text-sm text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde at omnis voluptas quo eum aspernatur nesciunt accusamus voluptates aliquid animi architecto quasi illo similique, nobis corporis excepturi? Maiores, iusto eveniet.</p>
            </div>
            

            <div class="flex items-center justify-end px-5 py-4 space-x-2">
                <button @click="open = false" class="rounded px-5 py-2 rounded-sm border border-gray-300 text-gray-600 font-semibold transition duration-150 hover:border-gray-400 hover:text-gray-900 focus:outline-none focus:shadow-outline">Cancel</button>

                <button class="rounded px-5 py-2 rounded-sm bg-indigo-600 text-white font-semibold transition duration-150 hover:bg-indigo-500 focus:outline-none focus:shadow-outline">Action</button>
            </div>

        </div>


    </div>

</div>

[Tindome]

or a shorter one extracted from alpine demo-test

<div x-data="{ open: false }">
    <button @click="open = true">Open Dropdown</button>

    <ul
        x-show="open"
        @click.away="open = false"
    >
        Dropdown Body
    </ul>
</div>

[clsource]

For the x-data webscript supports https://mudgen.github.io/webscript/docs/#hyphens-in-property-names
So that would be x·data.

For the following use cases:

• @click.away
• :class
• attributes with : like xml:lang

There is currently no official syntax because they are invalid variable names in JS.

One solution is creating a custom builder https://mudgen.github.io/webscript/docs/#webscript-builders
that takes a special property name and convert it to the alpine format.

Example

import builders from 'webscript'
import { createElement } from 'webscript/dist/createAlpineElement.js'

const { div, ul } = builders(createElement);

const out = div.x·data`{open:false}`(
    ul
     .x·show`open`
     .click`away`("open = false")("Dropdown Body")
)