Alpine JS X-JSZ

Alpine JS plugin x-jsz allows you to use JSX/Moustache like syntax for templating avoding the need for x-text and x-html and creating new DOM Nodes for each text/string you need to show.

Example

Example how x-jsz replaces the need for multiple with x-text and with x-if

  <div x-data="{ name: 'Jhon', surname: 'Doe', showSurname: true }">
    <p>
      Hello I am <span x-text="name"></span> <template x-if="showSurname"><span x-text="surname"></span></template>
    </p>
    <p x-jsz>
      Hello I am {{name}} {{ showSurname && surname }}
    </p>
  </div>

All the code within {{...}} will be treated like JS code and handled by Alpine JS evaluate()

If you wish to use other Alpine JS directives within {{...}} use the <template x-jsz>

  <div x-data="{ name: 'Jhon', surname: 'Doe', showSurname: true }">
    <template x-jsz>
        <p>
            Hello I am {{name}} {{ showSurname && `<span x-text="surname"></span>` }}
        </p>
    </template>
  </div>

Only ONE root element should be used as all other will be ignored. x-jsz directive will clone the root element and evaluate() all its content. Which in this example results in

  <div x-data="{ name: 'Jhon', surname: 'Doe', showSurname: true }">
    <template x-jsz>
        <p>
            Hello I am {{name}} {{ showSurname && `<span x-text="surname"></span>` }}
        </p>
    </template>
    <p>
        Hello I am Jhon <span x-text="surname">Doe</span>
    </p>
  </div>

Make sure to use correct HTML tag as x-jsz will use it to create a new node after the template.

Install

CDN

<script src="https://cdn.jsdelivr.net/npm/alpinejs-jsz@latest/dist/jsz.cdn.js"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

NPM/Yarn

npm i -D alpinejs-jsz
or
yarn add -D alpinejs-jsz

Then you can register the plugin.

import Alpine from "alpinejs";
import jsz from "alpinejs-jsz";
Alpine.plugin(jsz);
window.Alpine = Alpine;
Alpine.start();

Stats