@live-change/vue3-components 0.1.15 → 0.2.4

package/form/CommandForm.vue

@@ -22,7 +22,8 @@
 </template>
 
 <script>
-  import DefinedForm from "./DefinedForm.vue"
+  import DefinedForm from './DefinedForm.vue'
+  import analytics from '../logic/analytics.js'
   import createDebug from 'debug'
   const debug = createDebug("live-change/command-form")
 
@@ -200,20 +201,20 @@
 
         this.clearValidation()
 
-        const _commandId = this.$api.guid()
+        const _commandId = this.$api.uid()
 
         const analyticsValue = this.$refs.defined.formRoot.getAnalyticsValue()
         const analyticsParameters =
             { ...analyticsValue, ...this.parameters, ...(additionalParameters || {}), _commandId }
 
-        if(this.$analytics && this.$analytics.form)
-          this.$analytics.form(this.service, this.action, analyticsParameters)
+        analytics.emit('form', { service: this.service, action: this.action, parameters: analyticsParameters })
 
         return this.validate({ parameters: {...this.parameters, ...additionalParameters} }).then(validationError => {
           debug("VALIDATION ERROR?", validationError)
           if(validationError) {
-            if(this.$analytics && this.$analytics.formError)
-              this.$analytics.formError(this.service, this.action, { analyticsParameters, error: validationError })
+            analytics.emit('formError', {
+              service: this.service, action: this.action, parameters: analyticsParameters, error: validationError
+            })
             this.workingZone.finished(this.workingTask)
             this.state = 'ready'
             this.scrollToError()
@@ -229,8 +230,9 @@
 
           return this.$api.request([this.service, this.action], parameters).then((result) => {
             debug("DATA SUBMITED")
-            if(this.$analytics && this.$analytics.formDone)
-              this.$analytics.formDone(this.service, this.action, analyticsParameters)
+            analytics.emit('formDone', {
+              service: this.service, action: this.action, parameters: analyticsParameters, error: validationError
+            })
             if(this.resetOnDone) {
               this.state = 'ready'
               this.reset()
@@ -242,8 +244,10 @@
             this.$emit('done', { result , parameters })
             this.workingZone.finished(this.workingTask)
           }).catch((error) => {
-            if(this.$analytics && this.$analytics.formError)
-              this.$analytics.formError(this.service, this.action, { analyticsParameters, error })
+            console.error("FORM ERROR", error)
+            analytics.emit('formError', {
+              service: this.service, action: this.action, parameters: analyticsParameters, error
+            })
             this.$refs.defined.formRoot.afterError(this.initialValues)
             if(error.properties) {
               for(let propName in error.properties) {

package/index.js

@@ -8,6 +8,7 @@ import { registerViewComponents } from "./view"
 
 function registerComponents(app, settings = {}) {
   registerLogicComponents(app, settings)
+  console.log("reg", registerFormComponents)
   registerFormComponents(app, settings)
   registerViewComponents(app, settings)
 }
@@ -17,3 +18,7 @@ export { registerComponents }
 import createReactiveObject from "./utils/createReactiveObject.mjs"
 
 export { createReactiveObject }
+
+import { analytics, useAnalytics, installRouterAnalytics } from "./logic"
+export { analytics, useAnalytics, installRouterAnalytics }
+

package/logic/LoadingZone.vue

@@ -13,6 +13,7 @@
         <slot name="loading">
           Loading...
         </slot>
+        <div style="display: none">SUSPEND FALLBACK</div>
       </div>
     </template>
   </suspense>
@@ -30,6 +31,7 @@
 
 <script>
   import { onErrorCaptured, ref, reactive } from 'vue'
+  import analytics from './analytics.js'
   import debugLib from 'debug'
 
   const info = debugLib('loading:info')
@@ -74,19 +76,17 @@
     methods: {
       loadingStarted(task) {
         if(this.loading.length == 0) {
-          if(this.$analytics && this.$analytics.loadingStarted)
-            this.$analytics.loadingStarted({ task: task.name })
+          analytics.emit('loadingStarted', { task: task.name })
           info('LOADING STARTED!')
 
           const loadingBlockId = this.loadingBlockId
-          this.loagindTimeout = setTimeout(() => {
+          this.loadingTimeout = setTimeout(() => {
             if(loadingBlockId == this.loadingBlockId && this.loading.length > 0) {
               this.connectionProblem = true
-              if(this.$analytics && this.$analytics.loadingError)
-                this.$analytics.loadingError({
-                  task: "View loading", reason: "connection problem",
-                  tasks: this.loading.map(t => t.name)
-                })
+              analytics.emit('loadingError', {
+                task: 'View loading', reason: "connection problem",
+                tasks: this.loading.map(t => t.name)
+              })
             }
           }, 4000)
         }
@@ -106,8 +106,7 @@
         if(this.loading.length == 0) {
           this.loadingBlockId++
           clearTimeout(this.loadingTimeout)
-          if(this.$analytics && this.$analytics.loadingDone)
-            this.$analytics.loadingDone({ task: task.name })
+          analytics.emit('loadingDone', { task: task.name })
           this.$nextTick(this.$router.loadingDone)
         }
       },
@@ -117,9 +116,7 @@
         clearTimeout(this.loadingTimeout)
 
         this.errors.push({ task, reason })
-        if(this.$analytics && this.$analytics.loadingError) {
-          this.$analytics.loadingError({ task: task.name, reason })
-        }
+        analytics.emit('loadingError', { task: task.name, reason })
         let id = this.loading.indexOf(task)
         if(id == -1) {
           this.errors.push({ task, reason: "unknown task "+task.name })
@@ -143,7 +140,7 @@
         promise
           .then((result) => this.loadingFinished(task))
         return promise
-      }
+      },
     },
     provide() {
       return {

package/logic/WorkingZone.vue

@@ -14,6 +14,7 @@
 </template>
 
 <script>
+import analytics from '../logic/analytics.js'
   import debugLib from 'debug'
 
   const info = debugLib('working:info')
@@ -43,16 +44,15 @@
     methods: {
       workingStarted(task) {
         if(this.working.length == 0) {
-          if(this.$analytics && this.$analytics.workingStarted)
-            this.$analytics.workingStarted({ task: task.name })
+          analytics.emit('workingStarted', { task: task.name })
+
           info('WORKING STARTED!')
 
           const workingBlockId = this.workingBlockId
           this.loagindTimeout = setTimeout(() => {
             if(workingBlockId == this.workingBlockId && this.working.length > 0) {
               this.connectionProblem = true
-              if(this.$analytics && this.$analytics.workingError)
-              this.$analytics.workingError({
+              analytics.emit('workingError', {
                 task: "View working", reason: "connection problem",
                 tasks: this.working.map(t => t.name)
               })
@@ -75,8 +75,7 @@
         if(this.working.length == 0) {
           this.workingBlockId++
           clearTimeout(this.workingTimeout)
-          if(this.$analytics && this.$analytics.workingDone)
-            this.$analytics.workingDone({ task: task.name })
+          analytics.emit('workingDone', { task: task.name })
           this.$nextTick(this.$router.workingDone)
         }
       },
@@ -86,8 +85,7 @@
         clearTimeout(this.workingTimeout)
 
         this.errors.push({ task, reason })
-        if(this.$analytics && this.$analytics.workingError)
-          this.$analytics.workingError({ task: task.name, reason })
+        analytics.emit('workingError', { task: task.name, reason })
 
         let id = this.working.indexOf(task)
         if(id == -1) {

package/logic/analytics.js

@@ -0,0 +1,16 @@
+import mitt from "mitt"
+
+const analytics = mitt()
+
+function useAnalytics() {
+  return analytics
+}
+
+function installRouterAnalytics(router) {
+  router.afterEach((to, from) => {
+    analytics.emit('pageView', { ...to })
+  })
+}
+
+export { analytics, useAnalytics, installRouterAnalytics }
+export default analytics

package/logic/index.js

@@ -5,6 +5,9 @@ import Observe from "./Observe.vue"
 
 export { Loading, LoadingZone, WorkingZone, Observe }
 
+import { analytics, useAnalytics, installRouterAnalytics } from "./analytics.js"
+export { analytics, useAnalytics, installRouterAnalytics }
+
 function registerLogicComponents(app) {
   app.component("loading", Loading)
   app.component("loading-zone", LoadingZone)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/vue3-components",
-  "version": "0.1.15",
+  "version": "0.2.4",
   "description": "Live Change Framework - vue components",
   "main": "index.js",
   "scripts": {
@@ -8,7 +8,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/live-change/vue3-components.git"
+    "url": "git+https://github.com/live-change/live-change-framework-vue3.git"
   },
   "author": {
     "email": "m8@em8.pl",
@@ -17,12 +17,14 @@
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/live-change/vue3-components/issues"
+    "url": "https://github.com/live-change/live-change-framework-vue3/issues"
   },
-  "homepage": "https://github.com/live-change/vue3-components",
+  "homepage": "https://github.com/live-change/live-change-framework-vue3",
   "dependencies": {
+    "@live-change/vue3-ssr": "^0.2.4",
     "debug": "^4.3.2",
-    "vue": "^3.2.21",
-    "@live-change/vue3-ssr": "^0.1.9"
-  }
+    "mitt": "3.0.0",
+    "vue": "^3.2.31"
+  },
+  "gitHead": "fc932e431ba4a6bde00e4e9f24f56c47e8fff33b"
 }