cleaner ID

4 files changed, 16 insertions, 18 deletions

diff --git a/plugins/vue/demo/components/chat.js b/plugins/vue/demo/components/chat.js
index b8537db..7453d77 100644
--- a/plugins/vue/demo/components/chat.js
+++ b/plugins/vue/demo/components/chat.js
@@ -39,7 +39,7 @@ export default {
 
           {{ object.message }}
 
-          <template v-if="object._by==$graffitiID.value">
+          <template v-if="object._by==$graffitiMyID">
             <button @click="object.message+='!!';object._update()">
               ‼️
             </button>
diff --git a/plugins/vue/demo/components/name.js b/plugins/vue/demo/components/name.js
index 7189349..ea44f95 100644
--- a/plugins/vue/demo/components/name.js
+++ b/plugins/vue/demo/components/name.js
@@ -39,7 +39,7 @@ export const SetMyName = {
       this.$graffitiUpdate({
         name: this.name,
         timestamp: Date.now(),
-        of: this.$graffitiID.value,
+        of: this.$graffitiMyID,
         _tags: this.tags
       })
       this.name = ''
diff --git a/plugins/vue/demo/index.html b/plugins/vue/demo/index.html
index 6f0fb71..e0c841f 100644
--- a/plugins/vue/demo/index.html
+++ b/plugins/vue/demo/index.html
@@ -8,9 +8,10 @@
   <script async src="https://ga.jspm.io/npm:es-module-shims@1.6.2/dist/es-module-shims.js"></script>
   <script type="importmap">{ "imports": {
     "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.esm-browser.min.js",
-    "graffiti-vue": "https://graffiti.garden/graffiti-js/plugins/vue/plugin.js"
+    "graffiti-vue": "../plugin.js"
   }}</script>
   <script type="module">
+    // "graffiti-vue": "https://graffiti.garden/graffiti-js/plugins/vue/plugin.js"
     import { createApp } from 'vue'
     import { Name, SetMyName } from './components/name.js'
     import Chat from './components/chat.js'
@@ -33,7 +34,7 @@
 
   <p>
     <button @click="$graffitiToggleLogIn">
-      {{ !$graffitiID.value? 'Log In' : 'Log Out' }}
+      {{ !$graffitiMyID? 'Log In' : 'Log Out' }}
     </button>
   </p>
 
@@ -44,10 +45,10 @@
   </h1>
 
   <p>
-    My name is: <name :of="$graffitiID.value"></name>
+    My name is: <name :of="$graffitiMyID"></name>
   </p>
 
-  <set-my-name :tags="[$graffitiID.value]"></set-my-name>
+  <set-my-name :tags="[$graffitiMyID]"></set-my-name>
 
   <br>
 
diff --git a/plugins/vue/plugin.js b/plugins/vue/plugin.js
index b0fd134..bfca17c 100644
--- a/plugins/vue/plugin.js
+++ b/plugins/vue/plugin.js
@@ -7,25 +7,22 @@ export default {
     const graffitiURL = options && 'url' in options?
       options.url : 'https://graffiti.garden'
 
-    // Initialize graffiti
+    // Initialize graffiti with reactive entries
     const graffiti = new Graffiti(graffitiURL, ()=>reactive({}))
 
     // These ID need to change after opening
-    app.config.globalProperties.$graffitiID = ref(null)
+    const myID = ref(null)
     graffiti.opened().then(()=> {
-      app.config.globalProperties.$graffitiID.value = graffiti.myID
+      myID.value = graffiti.myID
+    })
+    Object.defineProperty(app.config.globalProperties, "$graffitiMyID", {
+      get: ()=> myID.value
     })
 
     // Add static functions
-    const methodMapping = {
-      'ToggleLogIn': 'toggleLogIn',
-      'Update': 'update',
-      'Tags': 'myTags',
-      'ObjectByKey': 'objectByKey'
-    }
-    for (const key in methodMapping) {
-      app.config.globalProperties['$graffiti'+key] =
-        graffiti[methodMapping[key]].bind(graffiti)
+    for (const key of ['toggleLogIn', 'update', 'myTags', 'objectByKey']) {
+      const vueKey = '$graffiti' + key.charAt(0).toUpperCase() + key.slice(1)
+      app.config.globalProperties[vueKey] = graffiti[key].bind(graffiti)
     }
 
     // A component for subscribing and