<input
  type="number"
  x-mask:dynamic="$money($input)"
/>

Alpine.data('counter', () => ({
  count: 1,
  interval: null,
  init() {
    this.interval = setInterval(() => this.count++, 1000);
  },
  destroy() {
    clearInterval(this.interval);
  },
}));

Alpine.data('tasks', () => ({
  completions: [],
  tasks: {
    components: 'Testing Components',
    plugins: 'Installing Plugins',
    typescript: 'Using TypeScript & TailwindCSS',
    sharing: 'Instant Preview and Sharing for demos',
  },
}));
const alpineRegistry = 'https://registry.npmjs.com/alpinejs';
window.registryData ??= null;
Alpine.data('version', () => ({
  displayCount: 0,
  registryData: null,
  get versions() {
    return Object.keys(this.registryData?.versions ?? new Object(null)).map(
      (v) => v.replace(/\.(\d)\./, '.0$1.'),
    );
  },
  signal: new AbortController(),
  animationFrame: null,
  async init() {
    try {
      this.registryData = window.registryData ??= await (
        await fetch(alpineRegistry, {
          signal: this.signal.signal,
        })
      ).json();
    } catch (e) {
      console.error(e);
    }
    let delay = 0;
    const incrementer = () => {
      if (delay) delay--;
      else delay = Math.ceil((++this.displayCount * 2) ** 3 / 600_000);
      if (this.displayCount === this.versions.length - 1) return;
      this.animationFrame = requestAnimationFrame(incrementer);
    };
    this.animationFrame = requestAnimationFrame(incrementer);
  },
  destroy() {
    this.signal.abort();
    cancelAnimationFrame(this.animationFrame);
  },
}));