From d7288835fa5fb6651e935789a42c2b503c882ef1 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 10 Jun 2025 13:00:33 +0530
Subject: [PATCH] feat: vue component for PoC

---
 .../src/components/VueWebComponentWrapper.jsx | 106 ++++++++++++++
 app/javascript/react-components/src/index.jsx |   3 +-
 .../src/vue-components/VueHelloWorld.vue      | 134 ++++++++++++++++++
 .../vue-components/registerWebComponents.js   |  18 +++
 4 files changed, 260 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/react-components/src/components/VueWebComponentWrapper.jsx
 create mode 100644 app/javascript/react-components/src/vue-components/VueHelloWorld.vue
 create mode 100644 app/javascript/react-components/src/vue-components/registerWebComponents.js

diff --git a/app/javascript/react-components/src/components/VueWebComponentWrapper.jsx b/app/javascript/react-components/src/components/VueWebComponentWrapper.jsx
new file mode 100644
index 000000000..43a4d1fb8
--- /dev/null
+++ b/app/javascript/react-components/src/components/VueWebComponentWrapper.jsx
@@ -0,0 +1,106 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { registerVueWebComponents } from '../vue-components/registerWebComponents';
+
+export const VueWebComponentWrapper = ({
+  initialCount = 0,
+  title = 'Hello from Vue in React!',
+  color = '#42b883',
+  ...otherProps
+}) => {
+  const elementRef = useRef();
+  const [isReady, setIsReady] = useState(false);
+  const [currentCount, setCurrentCount] = useState(initialCount);
+
+  // Register Web Components on mount
+  useEffect(() => {
+    registerVueWebComponents();
+    setIsReady(true);
+
+    // Listen for custom events from Vue component
+    const handleCountChange = event => {
+      setCurrentCount(event.detail.count);
+      console.log('Vue component count changed:', event.detail.count);
+    };
+
+    document.addEventListener('vue-counter-changed', handleCountChange);
+
+    return () => {
+      document.removeEventListener('vue-counter-changed', handleCountChange);
+    };
+  }, []);
+
+  // Update Web Component properties when React props change
+  useEffect(() => {
+    if (!isReady || !elementRef.current) return;
+
+    const element = elementRef.current;
+
+    // Set properties on the Web Component
+    // Vue converts camelCase props to kebab-case attributes
+    element.setAttribute('initial-count', initialCount);
+    element.setAttribute('title', title);
+    element.setAttribute('color', color);
+
+    console.log('Updated Vue Web Component props:', {
+      initialCount,
+      title,
+      color,
+    });
+  }, [isReady, initialCount, title, color]);
+
+  if (!isReady) {
+    return (
+      <div
+        style={{
+          padding: '20px',
+          textAlign: 'center',
+          border: '1px dashed #ccc',
+          borderRadius: '8px',
+          color: '#666',
+        }}
+      >
+        Loading Vue Web Component...
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ margin: '20px 0' }}>
+      <div
+        style={{
+          padding: '10px',
+          backgroundColor: '#f8f9fa',
+          borderRadius: '4px',
+          marginBottom: '10px',
+          fontSize: '14px',
+          color: '#666',
+        }}
+      >
+        <strong>React Wrapper Info:</strong> Current count tracked by React:{' '}
+        {currentCount}
+      </div>
+
+      {/* This is the Vue Web Component rendered inside React */}
+      <vue-hello-world
+        ref={elementRef}
+        initial-count={initialCount}
+        title={title}
+        color={color}
+        {...otherProps}
+      />
+
+      <div
+        style={{
+          padding: '10px',
+          backgroundColor: '#e8f5e8',
+          borderRadius: '4px',
+          marginTop: '10px',
+          fontSize: '12px',
+          color: '#666',
+        }}
+      >
+        ✅ This Vue component is running as a Web Component inside React!
+      </div>
+    </div>
+  );
+};
diff --git a/app/javascript/react-components/src/index.jsx b/app/javascript/react-components/src/index.jsx
index 45893072f..c2f0dcd63 100644
--- a/app/javascript/react-components/src/index.jsx
+++ b/app/javascript/react-components/src/index.jsx
@@ -1,2 +1,3 @@
 // Export all React components for the Chatwoot React Components library
-export { HelloWorld } from './components/HelloWorld';
\ No newline at end of file
+export { HelloWorld } from './components/HelloWorld';
+export { VueWebComponentWrapper } from './components/VueWebComponentWrapper';
\ No newline at end of file
diff --git a/app/javascript/react-components/src/vue-components/VueHelloWorld.vue b/app/javascript/react-components/src/vue-components/VueHelloWorld.vue
new file mode 100644
index 000000000..aba34307d
--- /dev/null
+++ b/app/javascript/react-components/src/vue-components/VueHelloWorld.vue
@@ -0,0 +1,134 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+// Props that will become Web Component attributes
+const props = defineProps({
+  initialCount: {
+    type: [Number, String],
+    default: 0,
+  },
+  title: {
+    type: String,
+    default: 'Hello from Vue!',
+  },
+  color: {
+    type: String,
+    default: '#42b883',
+  },
+});
+
+// Local state
+const count = ref(Number(props.initialCount));
+
+// Computed styles based on props
+const buttonStyle = computed(() => ({
+  backgroundColor: props.color,
+  color: 'white',
+  border: 'none',
+  padding: '10px 20px',
+  borderRadius: '4px',
+  cursor: 'pointer',
+  fontSize: '16px',
+  margin: '5px',
+}));
+
+// Computed text labels to avoid bare strings
+const labels = computed(() => ({
+  currentCount: 'Current Count:',
+  increment: '+ Increment',
+  decrement: '- Decrement',
+  reset: 'Reset',
+  info: 'This is a Vue component converted to Web Component!',
+}));
+
+// Methods
+const increment = () => {
+  count.value += 1;
+  // Emit custom event for parent components
+  document.dispatchEvent(
+    new CustomEvent('vue-counter-changed', {
+      detail: { count: count.value },
+    })
+  );
+};
+
+const decrement = () => {
+  count.value -= 1;
+  document.dispatchEvent(
+    new CustomEvent('vue-counter-changed', {
+      detail: { count: count.value },
+    })
+  );
+};
+
+const reset = () => {
+  count.value = Number(props.initialCount);
+  document.dispatchEvent(
+    new CustomEvent('vue-counter-changed', {
+      detail: { count: count.value },
+    })
+  );
+};
+</script>
+
+<template>
+  <div class="vue-hello-world">
+    <h3>{{ title }}</h3>
+    <p class="count-display">{{ labels.currentCount }} {{ count }}</p>
+    <div class="button-group">
+      <button :style="buttonStyle" @click="increment">
+        {{ labels.increment }}
+      </button>
+      <button :style="buttonStyle" @click="decrement">
+        {{ labels.decrement }}
+      </button>
+      <button
+        :style="{ ...buttonStyle, backgroundColor: '#dc3545' }"
+        @click="reset"
+      >
+        {{ labels.reset }}
+      </button>
+    </div>
+    <p class="info">{{ labels.info }}</p>
+  </div>
+</template>
+
+<style scoped>
+.vue-hello-world {
+  padding: 20px;
+  border: 2px solid #42b883;
+  border-radius: 8px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  max-width: 400px;
+  margin: 20px auto;
+  text-align: center;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+.count-display {
+  font-size: 18px;
+  font-weight: bold;
+  color: #2c3e50;
+  margin: 15px 0;
+}
+
+.button-group {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin: 20px 0;
+}
+
+.info {
+  font-size: 12px;
+  color: #666;
+  font-style: italic;
+  margin-top: 15px;
+}
+
+h3 {
+  color: #2c3e50;
+  margin-bottom: 15px;
+}
+</style>
diff --git a/app/javascript/react-components/src/vue-components/registerWebComponents.js b/app/javascript/react-components/src/vue-components/registerWebComponents.js
new file mode 100644
index 000000000..7d6837966
--- /dev/null
+++ b/app/javascript/react-components/src/vue-components/registerWebComponents.js
@@ -0,0 +1,18 @@
+import { defineCustomElement } from 'vue';
+import VueHelloWorld from './VueHelloWorld.vue';
+
+// Convert Vue component to Web Component
+const VueHelloWorldElement = defineCustomElement(VueHelloWorld);
+
+// Register Web Components
+export const registerVueWebComponents = () => {
+  // Check if already registered to prevent errors
+  if (!customElements.get('vue-hello-world')) {
+    customElements.define('vue-hello-world', VueHelloWorldElement);
+    // eslint-disable-next-line no-console
+    console.log('✅ Registered vue-hello-world Web Component');
+  }
+};
+
+// Export for manual registration if needed
+export { VueHelloWorldElement };