<template>
  <div id="app">
    <div x-data="{ count: 0 }">
      <p>Alpine.js Count: <span x-text="count"></span></p>
      <button @click="count++">Increment</button>
    </div>
    <p>Vue.js Count: {{ vueCount }}</p>
    <button @click="vueCount++">Increment Vue Count</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      vueCount: 0,
    };
  },
};
</script>

<template>
  <div id="app">
    <div x-data="{ count: 0 }" @alpine-to-vue.window="vueCount = $event.detail">
      <p>Alpine.js Count: <span x-text="count"></span></p>
      <button @click="count++; $dispatch('alpine-to-vue', count)">Sync with Vue</button>
    </div>
    <p>Vue.js Count: {{ vueCount }}</p>
    <button @click="syncWithAlpine()">Sync with Alpine</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      vueCount: 0,
    };
  },
  methods: {
    syncWithAlpine() {
      const event = new CustomEvent('vue-to-alpine', { detail: this.vueCount });
      window.dispatchEvent(event);
    },
  },
  mounted() {
    window.addEventListener('vue-to-alpine', (event) => {
      this.vueCount = event.detail;
    });
  },
};
</script>

import React from "react";
import "alpinejs";

function App() {
  return (
    <div>
      <div x-data="{ count: 0 }">
        <p>Alpine.js Count: <span x-text="count"></span></p>
        <button onClick={() => window.Alpine.store("reactState", { count: 0 })}>Reset React Alpine State</button>
        <button @click="count++">Increment Alpine Count</button>
      </div>
    </div>
  );
}

import React, { useState, useEffect } from "react";
import "alpinejs";

function App() {
  const [reactCount, setReactCount] = useState(0);

  useEffect(() => {
    const alpineToReactListener = (event) => {
      setReactCount(event.detail);
    };
    window.addEventListener("alpine-to-react", alpineToReactListener);

    return () => {
      window.removeEventListener("alpine-to-react", alpineToReactListener);
    };
  }, []);

  const syncToAlpine = () => {
    const event = new CustomEvent("react-to-alpine", { detail: reactCount });
    window.dispatchEvent(event);
  };

  return (
    <div>
      <div x-data="{ count: 0 }" @react-to-alpine.window="count = $event.detail">
        <p>Alpine.js Count: <span x-text="count"></span></p>
        <button @click="count++; $dispatch('alpine-to-react', count)">
          Sync with React
        </button>
      </div>
      <div>
        <p>React Count: {reactCount}</p>
        <button onClick={() => setReactCount(reactCount + 1)}>Increment React Count</button>
        <button onClick={syncToAlpine}>Sync with Alpine</button>
      </div>
    </div>
  );
}

export default App;