From ef6770f0319c4172b22a6f5dbdfbf8aa569637ff Mon Sep 17 00:00:00 2001
From: Jarek Rozanski <jrozanski@inputobjects.eu>
Date: Tue, 14 Mar 2023 21:42:12 +0000
Subject: [PATCH] Injecting WAA via ref to account for load delay.

---
 README.md                                     |  8 +-------
 index.js                                      | 10 ++++++++--
 sample/vue-sample/src/App.vue                 |  2 ++
 sample/vue-sample/src/assets/main.css         | 10 ++++++++++
 .../src/components/EmbeddedButton.vue         | 19 +++++++++++++++++++
 sample/vue-sample/src/views/SampleView.vue    | 15 +++++++++------
 6 files changed, 49 insertions(+), 15 deletions(-)
 create mode 100644 sample/vue-sample/src/components/EmbeddedButton.vue

diff --git a/README.md b/README.md
index 4dad51e..a611389 100644
--- a/README.md
+++ b/README.md
@@ -89,18 +89,12 @@ Site has to have these event enable in Wide Angle Analytics configuration prior
 
 Currently **Click Events** are [emitted automatically](https://wideangle.co/documentation/tracking-click-events) based on element data attributes. 
 
-| :warning:  The tracker script does not listen to events inside shadow DOM. This is known limitation to be addressed in near term. |
-|--------------------------------------------------------------------------------------------------------------------------------------------|
-
 ### Tracking Downloads
 
 Depending on the configured mode, the **Download Event** will fire automatically when either:
 * a file with recognized extension is being downloaded, or
 * when a link is marked with `data-waa-name` attribute.
 
-| :warning:  Currently the tracker script does not listen to events inside shadow DOM. This is known limitation to be addressed in near term. |
-|--------------------------------------------------------------------------------------------------------------------------------------------|
-
 ### Tracking Custom Actions
 
 Custom action are the most flexible and can be triggered directly from Vue components. As such their usage is not limitted due to Shadow DOM.
@@ -120,7 +114,7 @@ const sendEvent = async () => {
     session: 'cjhw92nf9aq',
     cohort: 'c1233'
   }  
-  waa.dispatchEvent('interest', params);  
+  waa.value.dispatchEvent('interest', params);  
 }
 </script>
 ```
diff --git a/index.js b/index.js
index 9136f09..dfb0b1a 100644
--- a/index.js
+++ b/index.js
@@ -1,9 +1,15 @@
 import { initWideAngle } from "./src";
+import { ref } from 'vue';
 
 export default {
-  install: (app, options) => {
+  install: async (app, options) => {
+    const waaRef = ref()
+    app.provide('waa', waaRef);         
     initWideAngle(options)
-      .then(waa => { app.provide('waa', waa); })
+      .then(waa => { 
+        waaRef.value = waa;
+        console.debug("[WAA] Wide Angle Analytics instance available");
+      })
       .catch(e => { console.error("Failed to load Wide Angle Plugin", e)});
   }
 }
diff --git a/sample/vue-sample/src/App.vue b/sample/vue-sample/src/App.vue
index 013fed3..9940d3c 100644
--- a/sample/vue-sample/src/App.vue
+++ b/sample/vue-sample/src/App.vue
@@ -28,5 +28,7 @@ nav {
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  width: 100%;
+  align-items: center;    
 }
 </style>
diff --git a/sample/vue-sample/src/assets/main.css b/sample/vue-sample/src/assets/main.css
index 02ffe70..4acaa04 100644
--- a/sample/vue-sample/src/assets/main.css
+++ b/sample/vue-sample/src/assets/main.css
@@ -1,3 +1,13 @@
 body {
+  background-color: azure;
+  margin: 2rem;
   font-size: 1.5rem;
+  font-weight: 800;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+button {
+  border-width: 4px;
+  border-style: solid;
+  border-color: lightpink;
 }
diff --git a/sample/vue-sample/src/components/EmbeddedButton.vue b/sample/vue-sample/src/components/EmbeddedButton.vue
new file mode 100644
index 0000000..b5df187
--- /dev/null
+++ b/sample/vue-sample/src/components/EmbeddedButton.vue
@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <button type="button" data-waa-click="foo" data-waa-name="embedded-event">Send Click Event</button>
+        <a data-waa-click="bar" data-waa-name="embedded-event" href="https://adequate.country" target="_blank">Send Click Link</a>
+        <p>Click me nothing happens; click green background; magic</p>
+    </div>
+</template>
+
+<style scoped>
+div {
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+    padding: 1rem;
+    background-color: yellowgreen;
+    align-items: center;
+}
+</style>
+
diff --git a/sample/vue-sample/src/views/SampleView.vue b/sample/vue-sample/src/views/SampleView.vue
index a739891..145bd60 100644
--- a/sample/vue-sample/src/views/SampleView.vue
+++ b/sample/vue-sample/src/views/SampleView.vue
@@ -1,13 +1,16 @@
 <template>
   <main>
-    <p>I am sample</p>
-    <button @click="sendEvent()">Send Event</button>
+    <p>Demostration of using Click and Custom Actions on Vue Components</p>
+    <button type="click" @click="sendEvent()">Send Event</button>    
     {{  status }}
+    <EmbeddedButton data-waa-click="component-click" data-waa-name="embedded-button"/>
   </main>
 </template>
 
 <script setup>
+import EmbeddedButton from '../components/EmbeddedButton.vue'
 import { inject, ref } from 'vue'
+
 const waa = inject('waa');
 const status = ref('idle');
 
@@ -16,9 +19,9 @@ const sendEvent = async () => {
     session: 'cjhw92nf9aq',
     cohort: 'c1233'
   }
-  console.log(`Sending event: ${JSON.stringify(params)}`);
-  status.value = 'pending...'
-  await waa.dispatchEvent('interest', params);
+  console.log(`Sending event: ${JSON.stringify(params)}`);  
+  status.value = 'pending...';  
+  await waa.value.dispatchEvent('interest', params);
   status.value = 'sent'
 }
 </script>
@@ -29,6 +32,6 @@ main {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  max-width: 300px;
+  max-width: 600px;
 }
 </style>