@subiz/widget-v4 4.1.123 → 4.1.124

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.123",
+	"version": "4.1.124",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -11,7 +11,6 @@
 	"dependencies": {
 		"@subiz/ajax": "^3.0.19",
 		"@subiz/flow": "^1.1.0",
-		"@subiz/storage": "0.0.8",
 		"@subiz/wsclient": "^4.0.28",
 		"cookie_js": "1.4.2",
 		"core-js": "^3.41.0",

package/src/chatbox/main.js

@@ -70,6 +70,7 @@ export default class Main extends Com {
 		if (!this.state.cssready) return null
 		if (sb.isUserBanned(this.props.store.matchUser())) return null
 		if (!this.props.t) return null
+
 		return (
 			<div class={this.props.store.isMobile() ? 'mobile' : 'desktop'}>
 				<ChatButton

package/src/plugin.js

@@ -69,6 +69,8 @@ function Plugin(plugin, store, $container, lib) {
 	var _render = async () => {
 		if (_destroy) return
 		if (!$div) return
+		if (!this.t) return
+
 		if (plugin.type === 'chatbox') {
 			// if (!Chatbox) Chatbox = (await LoadChatbox()).default
 			render(<Chatbox destroy={_destroy} plugin={plugin} store={store} ref={_ref} t={this.t} />, $div)

package/src/store/api.js

@@ -290,7 +290,6 @@ export default class {
 
 	getUser = (_) => this.apireq.get(`/accounts/${this.accid}/users/${this.uid}`)
 	getAccountSetting = () => this.apireq.get(`/accounts/${this.accid}/settings`)
-	getIsOnline = () => this.apireq.get(`/accounts/${this.accid}/is_online`)
 
 	sendImpression = (impression) =>
 		this.apireq.post(`/accounts/${this.accid}/campaigns/${impression.campaign_id}/impressions`, impression)

package/src/store/api_fake.js

@@ -86,7 +86,6 @@ export default class {
 			},
 		})
 	getAccountSetting = () => this.apireq.get(`/accounts/${this.accid}/settings`)
-	getIsOnline = () => this.apireq.get(`/accounts/${this.accid}/is_online`)
 
 	sendImpression = (impression) => OK200
 	sendConversion = (conversion) => OK200

package/src/store/chain.js

@@ -0,0 +1,255 @@
+const ChainMaxSize = 50
+// NOTE:
+// index must be number and index must be positive
+//
+
+export default class Chain {
+	constructor(db, schema, inmem) {
+		this.schema = schema + '_chain'
+		this.dead = false
+		this.db = db
+		this.anchorCache = {}
+		this.cache = {} // note: cache must be continuously from start
+
+		this.init()
+	}
+
+	init() {
+		let inmemItemM = {}
+
+		let allitems = this.db.all('items')
+		allitems.map((item) => {
+			inmemItemM[item.chain] = inmemItemM[item.chain] || {}
+			inmemItemM[item.chain][item.id] = {
+				id: item.id,
+				chain: item.chain,
+				full_id: item.full_id,
+				index: item.index,
+				value: item.value,
+			}
+		})
+
+		map(inmemItemM, (itemM, chain) => {
+			if (size(itemM) < ChainMaxSize) return
+			let items = orderBy(map(itemM), ['index'], 'desc')
+			let removekeys = []
+			for (var i = ChainMaxSize; i < items.length; i++) {
+				removekeys.push(items[i].full_id)
+				delete itemM[items[i].id]
+			}
+			this.db.removes('items', removekeys)
+			inmemItemM[chain] = itemM
+		})
+
+		this.cache = inmemItemM
+	}
+
+	destroy() {
+		// clear all data
+		this.db.clear('items')
+
+		this.dead = true
+		this.cache = {}
+		this.anchorCache = {}
+		this.db = undefined
+	}
+
+	// item: {id, index, value}
+	// note: should only call update when db is synced
+	put(chain, id, node_index, value) {
+		if (this.dead) return
+
+		let inmemItemM = this.cache[chain] || {}
+		let bottom = minIndex(inmemItemM) || {}
+		let bottomIndex = bottom.index || 'z'
+		if (size(inmemItemM) == 0) bottomIndex = ''
+
+		let item = {id, index: node_index, value, chain, full_id: chain + ':' + id}
+		delete inmemItemM[item.id]
+
+		if (bottomIndex > item.index + '') return
+		inmemItemM[item.id] = item
+
+		this.cache[chain] = inmemItemM
+		this.db.put('items', item.full_id, item)
+	}
+
+	listM(chain) {
+		if (this.dead) return {}
+		let inmemItemM = this.cache[chain] || {}
+		let out = {}
+		map(inmemItemM, (item, id) => {
+			out[id] = item.value
+		})
+		return out
+	}
+
+	async fetchMore(chain, limit = 20, api) {
+		if (this.dead) return {error: 'dead'}
+		if (!api) return {error: 'no api'}
+
+		let anchor = this.anchorCache[chain] || ''
+		var [apiItems, newanchor, error] = await api(chain, anchor, limit)
+
+		if (error) return {error}
+		if (this.dead) return {error: 'dead'}
+
+		let inmemItemM = this.cache[chain] || {}
+
+		if (apiItems.length === 0) return {end: true}
+
+		apiItems.forEach((item) => {
+			item.chain = chain
+			item.full_id = chain + ':' + item.id
+			inmemItemM[item.id] = item
+			this.db.put('items', item.full_id, item)
+		})
+
+		// save items fetch from api to the db
+		this.anchorCache[chain] = newanchor
+		this.cache[chain] = inmemItemM
+		return {}
+	}
+
+	del(chain, id) {
+		if (this.dead) return
+		let inmemItemM = this.cache[chain] || {}
+		let full_id = chain + ':' + id
+
+		delete inmemItemM[id]
+		this.db.removes('items', [full_id])
+	}
+
+	match(chain, id) {
+		return this.listM(chain)[id]
+	}
+
+	async reload(chain, api) {
+		if (this.dead) return
+
+		let top = maxIndex(this.listM(chain)) || {}
+		let topindex = top.index
+		if (!topindex) topindex = Date.now()
+		var lastanchor = ''
+		var fetchedItems = {}
+		for (;;) {
+			if (this.dead) return
+			let [newItems, newanchor, error] = await api(chain, lastanchor, 50)
+			if (error) return
+			if (this.dead) return
+			newItems.map((item) => {
+				fetchedItems[item.id] = Object.assign({}, item, {chain, full_id: chain + ':' + item.id})
+			})
+			if (newItems.length === 0 || newanchor === lastanchor) break // out of item
+
+			// still cannot join
+			if (fetchedItems.length >= 200) {
+				// fetch too much but still cannot merge with old data
+				// clear old data and write new data
+
+				let inmemItemM = this.cache[chain] || {}
+				let removeids = []
+				map(inmemItemM, (item) => {
+					if (item.chain !== chain) return
+					removeids.push(item.full_id)
+				})
+				this.db.removes('items', removeids)
+				this.cache[chain] = {}
+				break
+			}
+
+			let minindexitem = minIndex(fetchedItems) || {}
+			// try to join old data
+			if (minindexitem.index <= topindex) {
+				// successfully joined, reuse anchor
+
+				lastanchor = this.anchorCache[chain] || newanchor
+				break
+			}
+			lastanchor = newanchor
+		}
+
+		for (var i = 0; i < Object.keys(fetchedItems).length; i++) {
+			let item = fetchedItems[Object.keys(fetchedItems)[i]]
+			this.db.put('items', item.full_id, item)
+			this.cache[item.chain] = this.cache[item.chain] || {}
+			this.cache[item.chain][item.id] = item
+		}
+		this.anchorCache[chain] = lastanchor
+	}
+}
+
+function minIndex(obj) {
+	if (!obj) return
+	let keys = Object.keys(obj)
+	if (!keys.length) return
+	let min = Infinity
+	let minKey = Object.keys(obj)[0]
+	for (var i = 0; i < keys.length; i++) {
+		let index = (obj[keys[i]] && obj[keys[i]].index) || Infinity
+		if (index < min) {
+			min = index
+			minKey = keys[i]
+		}
+	}
+
+	return obj[minKey]
+}
+
+function maxIndex(obj) {
+	if (!obj) return
+	let keys = Object.keys(obj)
+	if (!keys.length) return
+	let max = -Infinity
+	let maxKey = Object.keys(obj)[0]
+	for (var i = 0; i < keys.length; i++) {
+		let index = (obj[keys[i]] && obj[keys[i]].index) || -Infinity
+		if (index > max) {
+			max = index
+			maxKey = keys[i]
+		}
+	}
+
+	return obj[keys[maxKey]]
+}
+
+function map(collection, predicate) {
+	if (!collection) return []
+	if (!predicate) return collection
+
+	var out = []
+	if (Array.isArray(collection)) {
+		for (let i = 0; i < collection.length; i++) {
+			out.push(predicate(collection[i], i))
+		}
+		return out
+	}
+
+	if (typeof collection === 'object') {
+		var keys = Object.keys(collection)
+		for (let i = 0; i < keys.length; i++) {
+			var k = keys[i]
+			out.push(predicate(collection[k], k))
+		}
+		return out
+	}
+
+	return out
+}
+
+function size(o) {
+	if (!o) return 0
+	if (o.length !== undefined) return o.length
+	return Object.keys(o).length
+}
+
+function orderBy(a, k, d) {
+	var clone = []
+	map(a, (v) => clone.push(v))
+	clone.sort((i, j) => {
+		if (i[k] === j[k]) return 0
+		var r = i[k] < j[k] ? -1 : 1
+		return d === 'desc' ? -r : r
+	})
+	return clone
+}

package/src/store/inmem_localstorage.js

@@ -0,0 +1,40 @@
+// this file implements localstorage in memory
+var localStorageMemory = {}
+var cache = {}
+
+localStorageMemory.length = 0
+
+localStorageMemory.getItem = function (key) {
+	if (key in cache) return cache[key]
+	return null
+}
+
+localStorageMemory.setItem = function (key, value) {
+	if (typeof value === 'undefined') {
+		localStorageMemory.removeItem(key)
+	} else {
+		if (!Object.prototype.hasOwnProperty.call(cache, key)) {
+			localStorageMemory.length++
+		}
+
+		cache[key] = value
+	}
+}
+
+localStorageMemory.removeItem = function (key) {
+	if (Object.prototype.hasOwnProperty.call(cache, key)) {
+		delete cache[key]
+		localStorageMemory.length--
+	}
+}
+
+localStorageMemory.key = function (index) {
+	return Object.keys(cache)[index] || null
+}
+
+localStorageMemory.clear = function () {
+	cache = {}
+	localStorageMemory.length = 0
+}
+
+module.exports = localStorageMemory

package/src/store/kv.js

@@ -0,0 +1,103 @@
+let KvMaxSize = 500
+// A key-value database with a cache layer
+export default class {
+	constructor (db, schema) {
+		this.name = schema
+		schema += '_kv'
+		this.dead = false
+		this.db = db
+		this.cache = {}
+
+		this.initialized = false
+		this.init()
+	}
+
+	refreshCache () {
+		if (this.dead) return
+		let inmemItemM = {}
+		let allitems = this.db.all('items')
+		allitems.forEach(function(item) {
+			inmemItemM[item.key] = item.value
+		})
+		this.cache = inmemItemM
+	}
+
+	init () {
+		if (this.initialized) return
+		let inmemItemM = {}
+
+		console.time('KV' + this.name)
+		let allitems = this.db.all('items')
+		allitems.forEach(function(item) {
+			inmemItemM[item.key] = item.value
+		})
+		this.cache = inmemItemM
+
+		// If the cache is full. Randomly remove half of the cache. credit to thanos
+		// this is so simple since we don't need to keep track of last modified time
+		// for each key. Implementing a LRU cache won't add much value.
+		let allkeys = Object.keys(this.cache)
+		if (allkeys.length > KvMaxSize) {
+			let liveChance = KvMaxSize / 2 / allkeys.lenth
+
+			let removekeys = []
+			for (var i = 0; i < KvMaxSize; i++) {
+				let live = Math.random() <= liveChance
+				if (live) continue
+
+				let key = allkeys[i]
+				delete this.cache[key]
+				removekeys.push(key)
+			}
+
+			this.db.removes('items', [removekeys])
+
+		}
+
+		this.initialized = true
+		console.timeEnd('KV' + this.name)
+	}
+
+	all () {
+		if (this.dead) return []
+		if (!this.initialized) return []
+		return this.cache
+	}
+
+	match (key) {
+		if (this.dead || !this.initialized) return
+		if (!key) return
+		return this.cache[key]
+	}
+
+	// keys could be a string or array
+	// put('1', {id: '1', name: 'thanh'})
+	// put({id: '1', name: 'thanh'}, 'id')
+	// put([{id: '1', name: 'thanh'},{id: '2', name: 'van'}], 'id')
+	put (key, value) {
+		if (!key) return
+		if (this.dead) return []
+		if (!this.initialized) throw new Error('uninitialized')
+		// if multiple key
+		this.cache[key] = value
+		this.db.put('items', key, { key, value })
+	}
+
+	// delete an record in a schema
+	del (key) {
+		if (this.dead) return
+		if (!this.initialized) throw new Error('uninitialized')
+		delete this.cache[key]
+		this.db.removes('items', [key])
+	}
+
+	destroy () {
+		// clear all data
+		this.db.clear('items')
+
+		this.dead = true
+		this.db = undefined
+		this.cache = undefined
+		this.initialized = false
+	}
+}

package/src/store/lsdb.js

@@ -0,0 +1,74 @@
+// like db but implement using localstorage
+let memlocalStorage = require('./inmem_localstorage.js')
+import sb from '../util/index.js'
+
+let requestIdleCallback = typeof window !== 'undefined' ? window.requestIdleCallback : null
+if (!requestIdleCallback) requestIdleCallback = (cb) => cb()
+
+const LIMIT = 80
+
+export default class {
+	constructor(schema, inmem) {
+		this.localStorage = memlocalStorage
+		this.inmem = inmem
+		this.allkeys = {}
+		if (!inmem) {
+			try {
+				window.localStorage.setItem('sbzstore1029', '?')
+				window.localStorage.removeItem('sbzstore1029')
+				this.localStorage = window.localStorage
+			} catch (e) {}
+		}
+
+		this.schema = schema
+	}
+
+	all(table) {
+		let items = []
+		for (var i = 0; i < this.localStorage.length; i++) {
+			let key = this.localStorage.key(i)
+			if (!key.startsWith(this.schema + '#' + table + '#')) continue
+			this.allkeys[key] = true
+			if (this.inmem)
+				items.push(this.localStorage.getItem(key)) // fast path
+			else items.push(sb.parseJSON(this.localStorage.getItem(key)))
+		}
+		return items
+	}
+
+	removes(table, keys) {
+		for (var i = 0; i < keys.length; i++) {
+			delete this.allkeys[this.schema + '#' + table + '#' + keys[i]]
+			this.localStorage.removeItem(this.schema + '#' + table + '#' + keys[i])
+		}
+	}
+
+	clear(table) {
+		for (var i = 0; i < this.localStorage.length; i++) {
+			let key = this.localStorage.key(i)
+			if (!key.startsWith(this.schema + '#' + table + '#')) continue
+			this.localStorage.removeItem(key)
+		}
+		this.allkeys = {}
+	}
+
+	// write a (key,value) pair to the table
+	// if the localstorage is already full, it would try to free by delete the whole table!
+	put(table, key, value) {
+		this.allkeys[this.schema + '#' + table + '#' + key] = true
+		if (this.inmem) return this.localStorage.setItem(this.schema + '#' + table + '#' + key, value) // fast path
+		if (Object.keys(this.allkeys).length > LIMIT) this.clear(table)
+		requestIdleCallback(() => {
+			try {
+				this.localStorage.setItem(this.schema + '#' + table + '#' + key, toString(value))
+			} catch (e) {
+				this.clear(table)
+			}
+		})
+	}
+}
+
+function toString(obj) {
+	if (obj === undefined) return 'null'
+	return JSON.stringify(obj)
+}

package/src/store/store.js

@@ -1,7 +1,9 @@
 import sb from '../util/index.js'
 var flow = require('@subiz/flow')
-import stor8 from '@subiz/storage'
 import API from './api.js'
+import LSDB from './lsdb.js'
+import Chain from './chain.js'
+import KV from './kv.js'
 import APIFake from './api_fake.js'
 import RealtimeFake from './realtime_fake.js'
 var Realtime = require('@subiz/wsclient')
@@ -51,9 +53,9 @@ export default class Store {
 
 		cleanLocalStorage()
 		this.pubsub = new sb.Pubsub()
-		this.kv = new stor8.kv(new stor8.lsdb('sbz2023', this.inmem), 'kv')
-		this.cache = new stor8.kv(new stor8.lsdb('sbz2023', true), 'kv')
-		this.chain = new stor8.chain(new stor8.lsdb('cbz2023', true), 'ch')
+		this.kv = new KV(new LSDB('sbz2023', this.inmem), 'kv')
+		this.cache = new KV(new LSDB('sbz2023', true), 'kv')
+		this.chain = new Chain(new LSDB('cbz2023', true), 'ch')
 		this.getLocaleContent = this.api.getLocaleContent
 
 		// dont dupplicate seen
@@ -175,14 +177,12 @@ export default class Store {
 	async overrideAcc(acc) {
 		this.forceAcc = sb.cloneDeep(acc)
 		await this.readyGate.entry()
-		this.disconnect('account')
 		this.reconnect()
 	}
 
 	async overrideChatbox(chatbox) {
 		this.forceChatbox = chatbox
 		await this.readyGate.entry()
-		this.disconnect('account')
 		await this.reconnect()
 		sb.setTimeout(this.pubsub.publish('resetCSS'), 10)
 	}
@@ -492,10 +492,13 @@ export default class Store {
 			this.realtime = new Realtime(this.RealtimeURL, {account_id: accid, user_ref: userRef, user_mask: mask}, xhrsend)
 
 		this.realtime.onEvent(this.onWs.bind(this))
-		this.realtime.onInterrupted(() => this.reconnectWs(accid, user.id))
+		this.realtime.onInterrupted(async () => {
+			await this.reconnectWs(accid, user.id)
+			this.reconnect()
+		})
 
 		this.seenLoop()
-		await this.reconnect()
+		await this.reconnect({user: user}) // already fetched
 		this.readyGate.open()
 		this.reconnectWs(accid, user.id)
 		return user
@@ -518,7 +521,10 @@ export default class Store {
 		else this.realtime = new Realtime(this.RealtimeURL, {getAccessToken: () => this.api.token_generator()})
 
 		this.realtime.onEvent(this.onWs.bind(this))
-		this.realtime.onInterrupted(() => this.reconnectWs(accid, user.id))
+		this.realtime.onInterrupted(async () => {
+			await this.reconnectWs(accid, user.id)
+			this.reconnect()
+		})
 
 		this.seenLoop()
 		await this.reconnect()
@@ -599,25 +605,23 @@ export default class Store {
 			`conversation_rated.account.${accid}.user.${userid}`,
 		])
 		await this.readyGate.entry()
-		this.disconnect('account')
-		return this.reconnect()
 	}
 
-	async reconnect() {
+	async reconnect(p) {
 		if (this._die) return
 		// make sure we only run reconnect once in a time
-
 		await this.reconnectGate.entry(undefined, true)
 		// do nothing when account is synced
-		if (this.isInsync('account')) return this.reconnectGate.open()
+		// if (this.isInsync('account')) return this.reconnectGate.open()
 		this.markSync('account')
 
-		let outs = await Promise.all([this.api.getUser(), this.api.getAccountSetting(), this.api.getIsOnline()])
+		let fetchuser = p && p.user ? Promise.resolve({body: p.user}) : this.api.getUser()
+		let outs = await Promise.all([fetchuser, this.api.getAccountSetting()])
 
 		let error = sb.find(outs, (out) => out.error)
 		if (error) return console.error(error)
 
-		let set = Object.assign(outs[1].body, outs[2].body)
+		let set = outs[1].body
 		set.user = outs[0].body
 		await this._setSetting(set)
 		// refetch convo
@@ -1214,9 +1218,9 @@ export default class Store {
 			if ((k || '').startsWith('__sb')) this.cookie.remove(k)
 		})
 		this.kv.destroy()
-		this.kv = new stor8.kv(new stor8.lsdb('sbz2023', this.inmem), 'kv')
+		this.kv = new KV(new LSDB('sbz2023', this.inmem), 'kv')
 		this.chain.destroy()
-		this.chain = new stor8.chain(new stor8.lsdb('cbz2023', true), 'ch')
+		this.chain = new Chain(new LSDB('cbz2023', true), 'ch')
 	}
 
 	destroy() {