This package provides some magic helpers for Alpine.js.
npm i https://github.com/eaCe/magicsyarn add https://github.com/eaCe/magicsOr copy the magics.js file from the src folder into your project and include it in your JavaScript bundle.
import Alpine from 'alpinejs';
import Magics from 'magics';
Alpine.plugin(Magics);
window.Alpine = Alpine
Alpine.start();Every log-helper accepts one or two arguments. The first argument is the value to log. The second argument is a boolean value to clear the console before logging, if set to true. You may pass an array of values as the first argument.
Write a message to the console.
<div x-data="{ foo: 'bar' }">
<button @click="$log(foo)">Log</button>
<button @click="$log(['foo', ['foo', 'bar']], true)">Clear previous logs and log</button>
</div>Write a warning message to the console.
<div x-data="{ foo: 'bar' }">
<button @click="$warn(foo)">Log</button>
</div>Write an error message to the console.
<div x-data="{ foo: 'bar' }">
<button @click="$error(foo)">Log</button>
</div>Write an informational message to the console.
<div x-data="{ foo: 'bar' }">
<button @click="$info(foo)">Log</button>
</div>Writes a table in the console view.
<div x-data="">
<button @click="$table({ foo: 'bar', bar: 'foo'})">Log</button>
</div>Clears the console.
<div x-data="">
<button @click="clear();$log('foo')">Clear previous logs and log</button>
</div>Creates a new group in the console view.
<div x-data="">
<button @click="$group('Groupname');$log('foo');$log('bar');$groupEnd()">Group logs</button>
</div>Get or set the width of an element.
<div x-data x-text="$width"></div>
<div x-data x-init="$width('200px')"></div>Get or set the height of an element.
<div x-data x-text="$height"></div>
<div x-data x-init="$height('200px')"></div>Get the offset of an element.
<div x-data x-text="$offset().top"></div>
<div x-data x-text="$offset().left"></div>Checks if an element has a class.
<div x-data x-text="$hasClass('foo')" class="foo"></div>Trims whitespace from the beginning and end of a string.
<div x-data x-text="$trim(' foo ')"></div>