racha / alpinejs-jsz

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

alpinejs-jsz's Issues

Feature request: process all moustache expressions automatically

You could create an option that would allow the automatic processing of the contents and descendants of all the tags with x-data attribute.

This would eliminate the need to write the x-jsz attribute every time one needs to insert a moustache expressions + would eliminate the need to create extra <span> elements for this purpose.

VScode syntax highlighting

Great plugin, thanks!
Any ideas how to get VScode to highlight the templates, between the curly brackets?
I tried a few things, but it seemed to switch off all other PHP highlighting.
Thanks again!

Issue with types on integration

I've tried your directive and used the option you suggested, but it's not working in Astro.build

<script>
  import Alpine from 'alpinejs';
  import jsz from "alpinejs-jsz";
  Alpine.plugin(jsz);
  window.Alpine = Alpine;
  Alpine.start();
</script>

Receving this msg:
Could not find a declaration file for module 'alpinejs-jsz'. '/Users/marklindsay/code/Genix/gallery-genix/node_modules/alpinejs-jsz/dist/jsz.cjs.js' implicitly has an 'any' type.
Try npm i --save-dev @types/alpinejs-jsz if it exists or add a new declaration (.d.ts) file containing declare module 'alpinejs-jsz';ts(7016)

And this when rendering:
🚀 astro v3.4.0 started in 593ms

┃ Local http://localhost:4321/
┃ Network use --host to expose

error Expected "}" but found "&&"