@live-change/vue3-ssr 0.1.5 → 0.1.9

package/Api.js

@@ -0,0 +1,247 @@
+import { DaoProxy, DaoPrerenderCache, DaoCache, Path } from "@live-change/dao"
+import validators from '@live-change/framework/lib/utils/validators.js'
+import { hashCode, encodeNumber, uidGenerator } from '@live-change/uid'
+import { ref, computed, watch } from "vue"
+
+function guid() {
+  function s4() {
+    return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1)
+  }
+  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
+      s4() + '-' + s4() + s4() + s4()
+}
+
+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()
+  }
+
+  guid() {
+    return guid()
+  }
+
+  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.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.slice(0, 16), 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 || guid()
+    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 SockJsConnection from '@live-change/dao-sockjs'
+import Api from "./Api.js"
 
 function clientApi(settings = {}) {
   const dao = new lcdao.Dao(window.__CREDENTIALS__, {
@@ -13,9 +13,9 @@ function clientApi(settings = {}) {
 
     ...settings,
 
-    fastAuth: !window.hasOwnProperty('__CREDENTIALS__'),
-
     connectionSettings: {
+      fastAuth: !window.hasOwnProperty('__CREDENTIALS__'),
+
       queueRequestsWhenDisconnected: true,
       requestSendTimeout: Infinity,
       requestTimeout: Infinity,
@@ -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,35 +1,75 @@
-import { getCurrentInstance } from 'vue'
-import { live as d3live } from '@live-change/dao-vue3'
+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.$fetch
+  return app.appContext.config.globalProperties.$lc.fetch
 }
 
 function api(app) {
   app = app || getCurrentInstance()
-  return app.appContext.config.globalProperties.$api
+  return app.appContext.config.globalProperties.$lc
 }
 
 function view(app) {
   app = app || getCurrentInstance()
-  return app.appContext.config.globalProperties.$view
+  return app.appContext.config.globalProperties.$lc.view
 }
 
 function actions(app) {
   app = app || getCurrentInstance()
-  return app.appContext.config.globalProperties.$actions
+  return app.appContext.config.globalProperties.$lc.actions
 }
 
 function live(path) {
   const app = getCurrentInstance()
-  const api = app.appContext.config.globalProperties.$api
+  const api = app.appContext.config.globalProperties.$lc
   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)
+  if(app) {
+    onUnmounted(() => {
+      buckets.dispose()
+    })
+  } else {
+    console.error("live fetch outside component instance - possible memory leak")
+  }
+  await buckets.wait()
+  return {
+    buckets: buckets.buckets,
+    loadTop: () => buckets.loadTop(),
+    loadBottom: () => buckets.loadBottom(),
+    dropTop: () => buckets.dropTop(),
+    dropBottom: () => buckets.dropBottom(),
+    canLoadTop: () => buckets.isTopLoadPossible(),
+    canLoadBottom: () => buckets.isBottomLoadPossible(),
+  }
+}
+
+function 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
+  }
+}
+
 function client(app) {
   app = app || getCurrentInstance()
-  return app.appContext.config.globalProperties.$client
+  return app.appContext.config.globalProperties.$lc.client
+}
+
+function uid(app) {
+  app = app || getCurrentInstance()
+  return app.appContext.config.globalProperties.$lc.uid
 }
 
-export { path, api, view, actions, live, client }
+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.5",
+  "version": "0.1.9",
   "description": "Live Change Framework - vue components",
   "main": "index.js",
   "scripts": {
@@ -22,6 +22,7 @@
   "homepage": "https://github.com/live-change/vue3-ssr",
   "dependencies": {
     "debug": "^4.3.2",
-    "vue": "^3.2.21"
+    "vue": "^3.2.21",
+    "@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'
 
 

package/generateUuid.js

@@ -1,21 +0,0 @@
-const crypto = require('crypto')
-function uuidFromBytes(rnd) {
-  rnd[6] = (rnd[6] & 0x0f) | 0x40
-  rnd[8] = (rnd[8] & 0x3f) | 0x80
-  rnd = rnd.toString('hex').match(/(.{8})(.{4})(.{4})(.{4})(.{12})/)
-  rnd.shift()
-  return rnd.join('-')
-}
-
-function genUuid(callback) {
-  if (typeof(callback) !== 'function') {
-    return uuidFromBytes(crypto.randomBytes(16))
-  }
-  crypto.randomBytes(16, function(err, rnd) {
-    if (err) return callback(err)
-    callback(null, uuidFromBytes(rnd))
-  })
-}
-
-module.exports = genUuid
-

package/getIp.js

@@ -1,12 +0,0 @@
-function getIp(connection) {
-  let ip =
-      connection.headers['x-real-ip'] ||
-      connection.headers['x-forwarded-for'] ||
-      connection.remoteAddress ||
-      (connection.connection && connection.connection.remoteAddress)
-  ip = ip.split(',')[0]
-  ip = ip.split(':').slice(-1)[0] //in case the ip returned in a format: "::ffff:146.xxx.xxx.xxx"
-  return ip
-}
-
-module.exports = getIp

package/serverDao.js

@@ -1,56 +0,0 @@
-const { Dao } = require("@live-change/dao")
-const DaoWebsocket = require("@live-change/dao-websocket")
-
-function reactiveObservableListConstructor(reactive) {
-  class ReactiveObservableList extends Dao.ObservableList {
-    constructor(value, what, dispose) {
-      super(value, what, dispose, (data) => {
-        if(data && typeof data == 'object') {
-          const activated = reactive(data)
-          return activated
-        }
-        return data
-      })
-    }
-  }
-  return ReactiveObservableList
-}
-
-function serverDao(credentials, ip, settings) {
-  const serverHost = settings.remoteUrl || process.env.API_SERVER || "localhost:" + (process.env.API_PORT || 8002)
-  const wsServer = `ws://${serverHost}/api/ws`
-
-  return new Dao(credentials, {
-    remoteUrl: wsServer,
-    protocols: {
-      'ws': DaoWebsocket.client
-    },
-
-    ...settings,
-
-    connectionSettings: {
-      headers: {
-        'X-real-ip': ip,
-        'X-forwarded-for': ip
-      },
-      queueRequestsWhenDisconnected: true,
-      requestSendTimeout: 2300,
-      requestTimeout: 10000,
-      queueActiveRequestsOnDisconnect: false,
-      autoReconnectDelay: 200,
-      logLevel: 1,
-      /*connectionMonitorFactory: (connection) =>
-          new ReactiveDao.ConnectionMonitorPinger(connection, {
-            pingInterval: 50,
-            pongInterval: 200
-          })*/
-      ...(settings && settings.connectionSettings)
-    },
-    defaultRoute: {
-      type: "remote",
-      generator: settings.reactive ? reactiveObservableListConstructor(settings.reactive) : Dao.ObservableList
-    }
-  })
-}
-
-module.exports = serverDao