diff options
| -rw-r--r-- | plugins/vue/demo/components/chat.js | 2 | ||||
| -rw-r--r-- | plugins/vue/demo/components/name.js | 2 | ||||
| -rw-r--r-- | plugins/vue/demo/index.html | 9 | ||||
| -rw-r--r-- | plugins/vue/plugin.js | 21 |
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 |