@knowlearning/agents 0.0.8 → 0.0.9

package/package/browser.js

@@ -1,4 +1,5 @@
 //  TODO: export browser, node, deno, and generic agents
 export { default as BrowserAgent } from '../agents/browser/embedded.js'
 export { default as GenericAgent } from '../agents/generic.js'
-export { default as createPersistentVuexStore } from '../persistence/vuex.js'
+export { default as vuexCreatePersistentStore } from '../persistence/vuex.js'
+export { default as vueContentComponent } from '../vue/3/content.vue'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@knowlearning/agents",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "description": "API for embedding applications in KnowLearning systems.",
     "main": "package/node.js",
     "browser": "package/browser.js",

package/vue/3/component.js

@@ -0,0 +1,58 @@
+import { createApp, watchEffect } from 'npm/unscoped/vue/3.2.39'
+import content from "./content.vue"
+
+//  TODO: probably want to make this a util, and better fleshed out (with white instead of blacklist)
+function isScopeSerializable(v) {
+  return !(
+    v instanceof HTMLElement
+  )
+}
+
+export default async function (module) {
+  const component = { ...module.default } //  copy component since we will mess with mounted and data functions
+
+  if (!component.ephemeral) {
+    const state = await Agent.mutate()
+
+    if (component.data) {
+      const origDataFn = component.data
+      component.data = function dataProxy() {
+        if (Object.keys(state).length === 0) {
+          const startState = origDataFn.apply(this, arguments)
+          Object.assign(state, startState)
+        }
+        return state
+      }
+    }
+    else if (component.setup) {
+      const origSetupFn = component.setup
+      const isReactiveRef = r => r && r.__v_isRef
+      component.setup = function setupProxy(a, b) { // need to specifically add this here, otherwise second argument not passed in arguments array (probably because of webpack optimization...)
+        const refs = origSetupFn.call(this, a, b)
+        if (state) {
+          Object
+            .entries(state)
+            .filter(([k]) => isReactiveRef(refs[k]))
+            .forEach(([k, v]) => refs[k].value = v)
+        }
+        watchEffect(() => {
+          interact(
+            Object
+              .entries(refs)
+              .filter(([_,r]) => isReactiveRef(r) && isScopeSerializable(r.value) )
+              .reduce((acc, [key, ref]) => {
+                acc[key] = ref.value
+                return acc
+              }, {})
+          )
+        })
+        return refs
+      }
+    }
+  }
+
+  document.body.innerHTML = ''
+  const app = createApp(component)
+  app.component('Content', content)
+  app.mount(document.body)
+}

package/vue/3/content.vue

@@ -0,0 +1,55 @@
+<template>
+  <iframe
+    :ref="el => setup(el)"
+    class="wrapper"
+    allow="camera;microphone"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    scope: {
+      type: String,
+      required: false
+    }
+  },
+  unmounted() {
+    if (this.experience) this.experience.remove()
+  },
+  methods: {
+    setup(iframe) {
+      if (!iframe || this.iframe === iframe) return
+
+      const { id, scope } = this
+      this.iframe = iframe
+      this.experience = new Agent.Experience({ content: id, scope }, iframe)
+
+/*
+      const { handle } = this.experience
+      //  if save or edit are listened to, attach handler
+      if (this.$attrs.onSave) {
+        handle('save', () => new Promise((resolve, reject) => this.$emit('save', { resolve, reject })))
+      }
+      if (this.$attrs.onEdit) handle('edit', () => this.$emit('edit'))
+*/
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+
+.wrapper
+{
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+</style>