alpinejs-tash's Introduction

Alpine JS Tash

Alpine JS plugin to stop the need of x-text="..." to render Alpine JS data 🥳

Example 👀

Core

Here's the approach you'd take if you were using x-text

<div x-data="{ name: 'Mark', age: 24, company: 'Neon & GetCandy' }">
  <p>
    Hello I am <span x-text="name"></span> and I am
    <span x-text="age"></span> years old, currently I work at
    <span x-text="company"></span>
  </p>
</div>

Plugin

Here's the approach you'd take if you were using x-tash

<div x-data="{ name: 'Mark', age: 25, company: 'Neon & GetCandy' }">
  <p x-tash="name,age,company">
    Hello I am {name} and I am {age} years old, currently I work at {company}
  </p>
</div>

You can add spaces after your commas in x-tash, it doesn't have to follow the example format

🙋 You don't have to render every variable

From the example, if you wanted to render the name and age then you can pass x-tash="name,age and {company} will be ignored! 🤩

Install 🌟

It's very easy to install Alpine JS plugins! 🙌

CDN

<script
  defer
  src="https://unpkg.com/[email protected]/dist/tash.min.js"
></script>

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

NPM/Yarn

npm i -D alpinejs-tash

yarn add -D alpinejs-tash

Then you can register the plugin.

import Alpine from 'alpinejs'
import tash from 'alpinejs-tash'

Alpine.plugin(tash)

window.Alpine = Alpine

Alpine.start()

Options 🧐

Changing Delimiters

It's possible to change the defaul delimiters {} by adding the x-tash-delimitiers attribute.

<p x-tash="..." x-tash-delimiters='["{{", "}}"]'>...</p>
<p x-tash="..." x-tash-delimiters='["*", "*"]'>...</p>
<p x-tash="..." x-tash-delimiters='["@@", "@@"]'>...</p>
<p x-tash="..." x-tash-delimiters='[":", "("]'>...</p>