@live-change/vue3-ssr 0.1.8 → 0.2.2

package/Api.js

@@ -0,0 +1,238 @@
+import { DaoProxy, DaoPrerenderCache, DaoCache, Path } from "@live-change/dao"
+import validators from '@live-change/framework/lib/utils/validators.js'
+import { hashCode, encodeNumber, uidGenerator, randomString } from '@live-change/uid'
+import { ref, computed, watch } from "vue"
+
+class Api extends DaoProxy {
+  constructor(source, settings = {}) {
+    super()
+    this.source = source
+    this.settings = settings
+
+    this.uidGenerator = () => { throw new Error("uid generator not initialized yet") }
+
+    this.createReactiveObject = this.settings.createReactiveObject
+
+    this.preFetchComponents = []
+    this.afterPreFetch = []
+
+    this.validators = validators
+
+    this.globals = {
+      $validators: validators
+    }
+    this.globalInstances = []
+  }
+
+  setup(settings = this.settings) {
+    this.settings = settings
+    this.createReactiveObject = this.settings.createReactiveObject
+    this.setupCaches()
+    this.setupMetadata()
+  }
+
+  setupCaches() {
+    let dao = this.source
+    if(this.settings.cache) {
+      const cacheSettings = (typeof this.settings.cache) == 'object' ? this.settings.cache : {}
+      this.dataCache = new DaoCache(dao, cacheSettings)
+      dao = this.dataCache
+    }
+    if(this.settings.ssr) {
+      this.prerenderCache = new DaoPrerenderCache(dao)
+      dao = this.prerenderCache
+      if(typeof window == 'undefined') {
+        this.prerenderCache.mode = 'save'
+      } else {
+        this.prerenderCache.mode = 'load'
+        this.prerenderCache.setCache(window[this.settings.ssrCacheGlobal || '__DAO_CACHE__'])
+      }
+    }
+    this.setDao(dao)
+  }
+
+  setupMetadata() {
+    const api = ref()
+    this.apiObservable = this.observable(['metadata', 'api'])
+    this.apiObservable.bindProperty(api, 'value')
+    const version = ref()
+    this.versionObservable = this.observable(['version', 'version'])
+    this.versionObservable.bindProperty(version, 'value')
+    const softwareVersion = computed(() => {
+      if(typeof window == 'undefined') return
+      return window[this.settings.ssrVersionGlobal || '__VERSION__']
+    })
+    const versionMismatch = computed(() => {
+      if(!version) return
+      if(!softwareVersion) return
+      return version.value != softwareVersion.value
+    })
+    const client = computed(() => {
+      return api?.value?.client
+    })
+    watch(() => api, (api) => {
+      console.log("API CHANGE!", api)
+      if(!api) return
+      console.log("API CHANGE!", api)
+      api.generateServicesApi()
+    })
+    this.metadata = {
+      api, version,
+      softwareVersion,
+      versionMismatch,
+      client
+    }
+    this.afterPreFetch.push(() => this.generateServicesApi())
+  }
+
+  generateServicesApi() {
+    const api = this
+    let apiInfo = api.metadata.api?.value
+    if(!apiInfo) {
+      const cachePath = '["metadata","api"]'
+      if(typeof window != 'undefined') {
+        const ssrCache = window[this.settings.ssrCacheGlobal || '__DAO_CACHE__']
+        if(ssrCache) {
+          for(const [daoPath, value] of ssrCache) {
+            if(daoPath == cachePath) apiInfo = value
+          }
+        }
+      } else {
+        apiInfo = this.prerenderCache.cache.get(cachePath)
+      }
+    }
+    console.trace("GENERATE API SERVICES!")
+    console.log("GENERATE SERVICES API", apiInfo)
+    const definitions = apiInfo?.services
+    if(JSON.stringify(definitions) == JSON.stringify(api.servicesApiDefinitions)) return
+    if(!definitions) throw new Error("API DEFINITIONS NOT FOUND! UNABLE TO GENERATE API!")
+    api.uidGenerator = uidGenerator(
+      apiInfo.client.user || (apiInfo.client.session ? apiInfo.client.session.slice(0, 16) : randomString(10) )
+      , 1, '[]')
+    //console.log("GENERATE API DEFINITIONS", definitions)
+    api.servicesApiDefinitions = definitions
+    let globalViews = {}
+    let globalFetch = (...args) => new Path(...args)
+    let globalActions = {}
+    for(const serviceDefinition of definitions) {
+      let views = { }
+      globalViews[serviceDefinition.name] = views
+      for(const viewName in serviceDefinition.views) {
+        views[viewName] = (params) => [serviceDefinition.name, viewName, params]
+        views[viewName].definition = serviceDefinition.views[viewName]
+      }
+      let fetch = { }
+      globalFetch[serviceDefinition.name] = fetch
+      for(const viewName in serviceDefinition.views) {
+        fetch[viewName] = (params) => new Path([serviceDefinition.name, viewName, params])
+        fetch[viewName].definition = serviceDefinition.views[viewName]
+      }
+      let actions = { }
+      globalActions[serviceDefinition.name] = actions
+      for(const actionName in serviceDefinition.actions) {
+        actions[actionName] = (params) => api.command([serviceDefinition.name, actionName], params)
+        actions[actionName].definition = serviceDefinition.actions[actionName]
+      }
+    }
+
+    api.views = globalViews
+    api.fetch = globalFetch
+    api.actions = globalActions
+    api.client = this.metadata.client
+    api.uid = api.uidGenerator
+
+    api.globals.$lc = api
+
+    /// Deprecated:
+    api.globals.$api = this
+    api.globals.$views = this.views
+    api.globals.$actions = this.actions
+    api.globals.$fetch = this.fetch
+
+    for(const glob of this.globalInstances) {
+      this.installInstanceProperties(glob)
+    }
+  }
+
+  addGlobalInstance(globalProperties) {
+    this.globalInstances.push(globalProperties)
+    this.installInstanceProperties(globalProperties)
+  }
+
+  installInstanceProperties(globalProperties) {
+    for(const key in this.globals) {
+      globalProperties[key] = this.globals[key]
+    }
+  }
+
+  async preFetch() {
+    let preFetchPromises = []
+    for(const component of this.preFetchComponents) {
+      if(component.$options.reactivePreFetch) {
+        const paths = component.$options.reactivePreFetch.apply(this.globals)
+        console.log("PREFETCH PATHS", JSON.stringify(paths))
+        const promise = this.get({ paths })/*.then(results => {
+          for(let { what, data } of results) {
+            this.prerenderCache.set(what, data)
+          }
+        })*/// It's useless because DaoPrerenderCache support paths
+        preFetchPromises.push(promise)
+      }
+    }
+    preFetchPromises.push(this.get({ paths: [
+      { what: ['metadata', 'api'] },
+      { what: ['version', 'version'] }
+    ]}))
+    console.log("PREFETCH WAIT!")
+    // const apiPromise = this.apiObservable.wait()
+    // apiPromise.then(res => console.log("API RES", res))
+    // const versionPromise = this.versionObservable.wait()
+    // versionPromise.then(res => console.log("VERSION RES", res))
+    // if(this.apiObservable.getValue() === undefined) preFetchPromises.push(apiPromise)
+    // if(this.versionObservable.getValue() === undefined) preFetchPromises.push(versionPromise)
+    await Promise.all(preFetchPromises)
+    console.log("PREFETCHED", this.metadata.api, this.metadata.version)
+    for(const afterPreFetch of this.afterPreFetch) {
+      afterPreFetch()
+    }
+  }
+
+  async preFetchRoute(route, router) {
+    let preFetchPromises = []
+    for(const matched of route.value.matched) {
+      for(const name in matched.components) {
+        const component = matched.components[name]
+        if(component.reactivePreFetch) {
+          let paths = component.reactivePreFetch.call(this.globals, route.value, router)
+          //console.log("ROUTE", route, "PREFETCH PATHS", JSON.stringify(paths))
+          const promise = this.get({ paths }).then(results => {
+            for(let { what, data } of results) {
+              this.prerenderCache.set(what, data)
+            }
+          })
+          preFetchPromises.push(promise)
+        }
+      }
+    }
+    return Promise.all(preFetchPromises)
+  }
+
+  command(method, args = {}) {
+    const _commandId = args._commandId || this.uidGenerator()
+    console.trace("COMMAND "+_commandId+":"+JSON.stringify(method))
+    return this.request(method, { ...args, _commandId })
+  }
+
+  reverseRange(range) {
+    return {
+      gt: range.lt,
+      gte: range.lte,
+      lt: range.gt == '' ? '\xFF\xFF\xFF\xFF' : range.gt,
+      lte: range.gte,
+      limit: range.limit,
+      reverse: !range.reverse
+    }
+  }
+}
+
+export default Api

package/clientApi.js

@@ -1,8 +1,8 @@
 import { createReactiveObject } from '@live-change/vue3-components'
-import * as lcapi from '@live-change/vue-api'
 import * as lcdao from '@live-change/dao'
 import { reactiveMixin, reactivePrefetchMixin, ReactiveObservableList } from '@live-change/dao-vue3'
 import SockJsConnection from '@live-change/dao-sockjs'
+import Api from "./Api.js"
 
 function clientApi(settings = {}) {
   const dao = new lcdao.Dao(window.__CREDENTIALS__, {
@@ -37,9 +37,10 @@ function clientApi(settings = {}) {
     }
   })
 
-  const api = new lcapi.Api(dao)
+  const api = new Api(dao)
   api.setup({
     ssr: true,
+    cache: true,
     createReactiveObject(definition) {
       //console.log("CREATE REACTIVE OBJECT", definition)
       return createReactiveObject(definition, reactiveMixin(api), reactivePrefetchMixin(api) )

package/index.js

@@ -1,37 +1,31 @@
 import { getCurrentInstance, onUnmounted } from 'vue'
 import { live as d3live, RangeBuckets } from '@live-change/dao-vue3'
 
-function path(app) {
-  app = app || getCurrentInstance()
-  return app.appContext.config.globalProperties.$lc.fetch
+function api(context) {
+  context = context || getCurrentInstance().appContext
+  return context.config.globalProperties.$lc
 }
 
-function api(app) {
-  app = app || getCurrentInstance()
-  return app.appContext.config.globalProperties.$lc
+function path(context) {
+  return api(context).fetch
 }
 
-function view(app) {
-  app = app || getCurrentInstance()
-  return app.appContext.config.globalProperties.$lc.view
+function view(context) {
+  return api(context).view
 }
 
-function actions(app) {
-  app = app || getCurrentInstance()
-  return app.appContext.config.globalProperties.$lc.actions
+function actions(context) {
+  return api(context).actions
 }
 
 function live(path) {
-  const app = getCurrentInstance()
-  const api = app.appContext.config.globalProperties.$lc
-  return d3live(api, path)
+  return d3live(api(), path)
 }
 
-async function rangeBuckets(pathFunction, options, app) {
-  app = app || getCurrentInstance()
-  const api = app.appContext.config.globalProperties.$lc
-  const extendedPathFunction = (range) => pathFunction(range, api.fetch)
-  const buckets = new RangeBuckets(api, extendedPathFunction, options)
+async function rangeBuckets(pathFunction, options, app = getCurrentInstance()) {
+  const lc = api()
+  const extendedPathFunction = (range) => pathFunction(range, lc.fetch)
+  const buckets = new RangeBuckets(lc, extendedPathFunction, options)
   if(app) {
     onUnmounted(() => {
       buckets.dispose()
@@ -62,14 +56,12 @@ function reverseRange(range) {
   }
 }
 
-function client(app) {
-  app = app || getCurrentInstance()
-  return app.appContext.config.globalProperties.$lc.client
+function client(context) {
+  return api(context).client
 }
 
-function uid(app) {
-  app = app || getCurrentInstance()
-  return app.appContext.config.globalProperties.$lc.uid
+function uid(context) {
+  return api(context).uid
 }
 
 export { path, api, view, actions, live, client, uid, rangeBuckets, reverseRange }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/vue3-ssr",
-  "version": "0.1.8",
+  "version": "0.2.2",
   "description": "Live Change Framework - vue components",
   "main": "index.js",
   "scripts": {
@@ -23,7 +23,6 @@
   "dependencies": {
     "debug": "^4.3.2",
     "vue": "^3.2.21",
-    "@live-change/vue-api": "^0.1.10",
     "@live-change/uid": "^0.1.3"
   }
 }

package/serverApi.js

@@ -1,5 +1,5 @@
 import { createReactiveObject } from '@live-change/vue3-components'
-import { Api } from '@live-change/vue-api'
+import Api from './Api.js'
 import { reactiveMixin, reactivePrefetchMixin } from '@live-change/dao-vue3'