@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/utils/preset-selector.mjs

@@ -24,40 +24,74 @@ const sortsFn = function(a, b, sorts, index){
 const pickColumns = function(columns, keys){
   if(!Array.isArray(columns)) return []
 
-  const picked = JSON.parse(JSON.stringify(columns))
+  columns = JSON.parse(JSON.stringify(columns))
 
-  for(let idx in picked){
-    picked[idx].visible = keys.includes(picked[idx].key)
+  columns = columns.reduce((cur, obj) => {
+    cur[obj.key] = {
+      ...obj,
+      visible: false
+    }
+    return cur
+  }, {})
+
+  const res = []
+
+  for(let key of keys){
+    if(typeof key === 'string'){
+      if(columns[key]){
+        columns[key].visible = true
+        res.push(columns[key])
+        delete columns[key]
+      }
+    }
+    else if(typeof key === 'object' && key !== null && key.key){
+      if(columns[key.key]){
+        res.push(Object.assign(columns[key.key], key, { visible:true }))
+        delete columns[key.key]
+      }
+    }
   }
 
-  return picked
-}
+  res.push(...Object.values(columns))
 
-const getPresetUid = function(extra = ''){
-  return md5('preset-' + new Date().getTime() + extra)
+  return res
 }
 
 const setupConfig = (config) => {
 
+  if(config.domains && !Array.isArray(config.presets)){
+    let defaultConfig
+    for(let key in config.domains){
+      if(location.host.indexOf(key) >= 0){
+        defaultConfig = config.domains[key]
+        break
+      }
+    }
+    if(!defaultConfig)
+      defaultConfig = config.domains['default'] ?? {}
+
+    Object.assign(config, JSON.parse(JSON.stringify(defaultConfig)))
+  }
+
   if(Array.isArray(config.presets)){
     for(let idx in config.presets){
-      if(!Array.isArray(config.presets[idx].params.columns)){
-        config.presets[idx].params.columns = []
+      if(!Array.isArray(config.presets[idx].columns)){
+        config.presets[idx].columns = []
       }
 
-      if(config.presets[idx].params.columns[0] && typeof config.presets[idx].params.columns[0] === 'string'){
-        config.presets[idx].params.columns = pickColumns(config.params.columns ?? [], config.presets[idx].params.columns)
+      if(config.presets[idx].columns[0] && typeof config.presets[idx].columns[0] === 'string'){
+        config.presets[idx].columns = pickColumns(config.columns ?? [], config.presets[idx].columns)
       }
 
-      if(!config.presets[idx].params.view)
-        config.presets[idx].params.view = 'table'
+      if(!config.presets[idx].view)
+        config.presets[idx].view = 'table'
 
       if(!config.presets[idx].uid)
-        config.presets[idx].uid = getPresetUid(idx)
+        config.presets[idx].uid = getPresetUid(config.name)
     }
 
-    if(!config.params.presetIdx && config.presets.length > 0){
-      config.params.presetIdx = config.presets[0].uid
+    if(!config.presetIdx && config.presets.length > 0){
+      config.presetIdx = 0
     }
   }
 
@@ -185,11 +219,16 @@ const generateTotalColumns = (preset, items) => {
   items.push(totalItem)
 }
 
+let presetUidSalt = 0
+const getPresetUid = function(extra = ''){
+  return md5('preset-' + new Date().getTime() + extra + (++presetUidSalt))
+}
+
 export {
-  getPresetUid,
-  generatePivotColumns,
-  generateTotalColumns,
+  sortsFn,
   pickColumns,
   setupConfig,
-  sortsFn,
+  generatePivotColumns,
+  generateTotalColumns,
+  getPresetUid
 }

package/src/utils/queue.js

@@ -0,0 +1,63 @@
+const redis = require('redis');
+const client = redis.createClient();
+client.connect()
+  .then(() => console.log('Connected to Redis'))
+  .catch((err) => console.error('Redis connection error:', err));
+
+const queues = {}
+
+const sleep = ms => new Promise(r => setTimeout(r, ms))
+
+const processQueue = async(key) => {
+  const queue = queues[key]
+  if(queue.processing) return
+  queue.processing = true
+
+  const result = await client.hGetAll(key);
+  const keys = Object.keys(result ?? {})
+  if(keys.length < 1){
+    queue.processing = false
+    return
+  }
+
+  const itemKeys = keys.splice(0, queue.concurrency)
+  if(itemKeys.length > 0){
+    await Promise.all(itemKeys.map(async itemKey => {
+      try{
+        const obj = JSON.parse(await client.hGet(key, itemKey))
+        await queue.pop(obj)
+      }
+      finally{
+        await client.hDel(key, itemKey)
+      }
+    }))
+
+    await sleep(queue.interval ?? 0)
+  }
+  queue.processing = false
+
+  await processQueue(key)
+}
+
+const queueItem = async(obj, opt) => {
+  if(!queues[opt.key]){
+    queues[opt.key] = {
+      interval: 16,
+      concurrency: 1,
+
+      ...opt
+    }
+
+    await client.del(opt.key)
+  }
+
+  const { key } = opt
+  const subKey = `${key}-${new Date().getTime() + Math.random()}`
+  await client.hSet(key, subKey, JSON.stringify(obj));
+
+  processQueue(key).then()
+}
+
+module.exports = {
+  queueItem
+}

package/src/utils/web.mjs

@@ -0,0 +1,120 @@
+const extractCompProps = (component, props) => {
+
+  const comp = {}
+
+  if(component.uid){
+    for(let prop of props){
+
+      if(typeof prop === 'string'){
+        if(component[prop]){
+          comp[component.uid] = {
+            ...(comp[component.uid] ?? {}),
+            [prop]: component[prop]
+          }
+        }
+      }
+      else if(Array.isArray(prop)){
+        const type = prop[0]
+        const typeProps = prop[1]
+
+        if(component.type === type){
+          for(let tprop of typeProps){
+            comp[component.uid] = {
+              ...(comp[component.uid] ?? {}),
+              [tprop]: component[tprop]
+            }
+          }
+        }
+      }
+    }
+  }
+
+  if(component.items){
+    for(let i in component.items){
+      const item = component.items[i]
+
+      Object.assign(comp, extractCompProps(item, props))
+    }
+  }
+
+  return comp
+}
+
+const setCompProps = (component, props) => {
+
+  Object.assign(component, props)
+
+  if(Array.isArray(component.items)){
+    for(let item of component.items){
+      if(item.uid && props[item.uid]){
+        setCompProps(item, props)
+      }
+    }
+  }
+}
+
+const extractPageInstanceProps = (page, props = [ 'data', 'params',
+  [ 'ArticleThumbnails', [ 'items' ] ],
+  [ 'HMCThumbnails', [ 'items' ] ],
+  [ 'FeatureList', [ 'items' ] ],
+  [ 'SpecTable', [ 'items' ] ],
+  [ 'Review', [ 'items' ] ],
+]) => {
+
+  const comp = {}
+
+  if(Array.isArray(page.headers)){
+    for(let component of page.headers){
+      Object.assign(comp, extractCompProps(component, props))
+    }
+  }
+
+  if(Array.isArray(page.components)){
+    for(let component of page.components){
+      Object.assign(comp, extractCompProps(component, props))
+    }
+  }
+
+  if(Array.isArray(page.footers)){
+    for(let component of page.footers){
+      Object.assign(comp, extractCompProps(component, props))
+    }
+  }
+
+  return comp
+}
+
+const setPageInstanceProps = (page, props) => {
+
+  if(Array.isArray(page.headers)){
+    for(let component of page.headers){
+      if(component.uid && props[component.uid]){
+        setCompProps(component, props[component.uid])
+      }
+    }
+  }
+
+  if(Array.isArray(page.components)){
+    for(let component of page.components){
+      if(component.uid && props[component.uid]){
+        setCompProps(component, props[component.uid])
+      }
+    }
+  }
+
+  if(Array.isArray(page.footers)){
+    for(let component of page.footers){
+      if(component.uid && props[component.uid]){
+        setCompProps(component, props[component.uid])
+      }
+    }
+  }
+
+}
+
+export {
+  extractCompProps,
+  setCompProps,
+  extractPageInstanceProps,
+  setPageInstanceProps
+}

package/src/utils/wss.js

@@ -74,18 +74,21 @@ class WSS extends EventEmitter2{
   _reqFn = []
   _retryCount = 0
 
-  async fromBinaryData(binaryData){
+  _connectionId = 0
+  _debugIds = {}
+
+  async fromBinaryData(binaryData, debugMode = false){
     const encryptedString = Buffer.from(binaryData).toString('utf-8');
-    const decryptedData = this._opt.key ?
+    const decryptedData = this._opt.key && !debugMode ?
       CryptoJS.AES.decrypt(encryptedString, this._opt.key).toString(CryptoJS.enc.Utf8) :
       encryptedString;
     const receivedObject = JSON.parse(decryptedData);
     return await revertDataUrlObj(receivedObject);
   }
 
-  async toBinaryData(obj){
+  async toBinaryData(obj, debugMode = false){
     const dataUrlObj = await convertDataUrlObj(obj)
-    const encryptedData = this._opt.key ?
+    const encryptedData = this._opt.key && !debugMode ?
       CryptoJS.AES.encrypt(JSON.stringify(dataUrlObj), this._opt.key).toString() :
       JSON.stringify(dataUrlObj);
     return new TextEncoder().encode(encryptedData);
@@ -106,12 +109,17 @@ class WSS extends EventEmitter2{
     this._client.connect().then()
 
     this._instance.on('connection', async (socket, req) => {
+      socket.id = `${++this._connectionId}`
+
+      if(`${req.url}`.indexOf('debug-ws') > 0){
+        this._debugIds[socket.id] = {}
+      }
 
       let subscriber
 
       const listener = (message) => {
         const { model, event, items } = JSON.parse(message)
-        this.toBinaryData({ data:{ model, event, items } })
+        this.toBinaryData({ data:{ model, event, items } }, !!this._debugIds[socket.id])
           .then(data => socket.send(data))
       }
 
@@ -123,10 +131,6 @@ class WSS extends EventEmitter2{
         if(subscriber){
           subscriber.unsubscribe(channel, listener)
         }
-
-        if(process.verbose){
-          process.verbose('wss.leave', channel)
-        }
       }
 
       socket.join = (channel) => {
@@ -138,10 +142,6 @@ class WSS extends EventEmitter2{
         if(subscriber) {
           subscriber.subscribe(channel, listener)
         }
-
-        if(process.verbose){
-          process.verbose('wss.join', channel)
-        }
       }
 
       socket.to = (channel) => {
@@ -157,7 +157,7 @@ class WSS extends EventEmitter2{
 
         let obj
         try{
-          obj = await this.fromBinaryData(binaryData);
+          obj = await this.fromBinaryData(binaryData, !!this._debugIds[socket.id]);
         }
         catch(e){
           return socket.close(1002, e.message);
@@ -170,7 +170,7 @@ class WSS extends EventEmitter2{
           this._retryCount = 0
         }
         else if(ping){
-          socket.send(await this.toBinaryData({ pong: 1 }))
+          socket.send(await this.toBinaryData({ pong: 1 }, !!this._debugIds[socket.id]))
         }
         else{
           let status = 200
@@ -209,7 +209,7 @@ class WSS extends EventEmitter2{
             _requestId,
             status,
             data
-          }))
+          }, !!this._debugIds[socket.id]))
         }
       });
 
@@ -222,21 +222,28 @@ class WSS extends EventEmitter2{
 
       const token = req.headers['sec-websocket-protocol'];
       try{
-        await this._opt.auth(token, socket)
+        if(this._opt.auth){
+          await this._opt.auth(token, socket)
+        }
+
+        for(let fn of this._authFn) {
+          await fn(token, socket)
+        }
+
         socket.isAuth = true
-        socket.send(await this.toBinaryData({ auth:true }))
+        socket.send(await this.toBinaryData({ auth:true }, !!this._debugIds[socket.id]))
 
         subscriber = this._client.duplicate()
         await subscriber.connect()
       }
       catch(e){
-        return socket.close(1002, e.message);
+        return socket.close(1002, (e.message ?? '').substring(0, 123));
       }
 
       if(this._opt.ping !== false){
 
         const ping = async() => {
-          socket.send(await this.toBinaryData({ ping:1 }))
+          socket.send(await this.toBinaryData({ ping:1 }, !!this._debugIds[socket.id]))
           socket.pinging = true
 
           setTimeout(() => {
@@ -245,6 +252,12 @@ class WSS extends EventEmitter2{
 
               if(this._retryCount > 10){
                 socket.close(1002, 'ping timeout')
+                if(subscriber){
+                  subscriber.disconnect()
+                }
+                else{
+                  console.log('CLOSE SOCKET#2', token.substring(0, 10) + '...')
+                }
               }
             }
             else{
@@ -265,6 +278,10 @@ class WSS extends EventEmitter2{
     this._reqFn.push(fn)
   }
 
+  use(fn){
+    this.req.apply(this, arguments)
+  }
+
   async broadcast(channels, { model, event, items }){
 
     if(!Array.isArray(channels))
@@ -272,15 +289,6 @@ class WSS extends EventEmitter2{
 
     for(let channel of channels){
       await this._client.publish(channel, JSON.stringify({ model, event, items }))
-
-      if(process.verbose){
-        process.verbose('wss.broadcast', {
-          channel,
-          model,
-          event,
-          items
-        })
-      }
     }
   }
 

package/src/utils/wss.mjs

@@ -46,6 +46,7 @@ class WSS extends EventEmitter2{
   _callbacks = {}
   _pendingSend = []
   _pinging = false
+  _retryCount = 1
 
   constructor(opt) {
     super();
@@ -69,7 +70,6 @@ class WSS extends EventEmitter2{
           this.emit('visibilitychange', this._instance.readyState, [])
 
           this.ping().catch(e => {
-            console.log('ping error', e)
             this.reconnect().then()
           })
         }
@@ -79,19 +79,26 @@ class WSS extends EventEmitter2{
 
   async fromBinaryData(binaryData){
     const encryptedString = new TextDecoder().decode(binaryData)
-    const decryptedData = this._opt.key ?
+    const decryptedData = this._opt.key && !this._opt.debug ?
       CryptoJS.AES.decrypt(encryptedString, this._opt.key).toString(CryptoJS.enc.Utf8) :
       encryptedString;
     return JSON.parse(decryptedData)
   }
 
   async toBinaryData(obj){
-    const encryptedData = this._opt.key ?
+    const encryptedData = this._opt.key && !this._opt.debug ?
       CryptoJS.AES.encrypt(JSON.stringify(obj), this._opt.key).toString() :
       JSON.stringify(obj);
     return new TextEncoder().encode(encryptedData)
   }
 
+  flushPending(){
+    for(let sendParams of this._pendingSend){
+      this.sendSync(sendParams.path, sendParams.params, sendParams.cb, sendParams.err)
+    }
+    this._pendingSend = []
+  }
+
   async connect(reconnect = false){
 
     this._instance = new WebSocket(this._opt.url, [ this._opt.token ])
@@ -112,13 +119,8 @@ class WSS extends EventEmitter2{
       }
       else if(auth){
         this._instance.isAuth = auth
-
+        this.flushPending()
         this.emit('connect', reconnect, [])
-
-        for(let sendParams of this._pendingSend){
-          this.sendSync(sendParams.path, sendParams.params, sendParams.cb, sendParams.err)
-        }
-        this._pendingSend = []
       }
       else if(_requestId){
         if(this._callbacks[_requestId] && this._instance.readyState === 1){
@@ -128,8 +130,8 @@ class WSS extends EventEmitter2{
 
           if(this._opt.debug){
             status === 200 ?
-              console.log(`${new Date().getTime() - t1}ms`, `l:${JSON.stringify(data ?? '').length}`, path, params, data) :
-              console.error(`${new Date().getTime() - t1}ms`, `l:${JSON.stringify(data ?? '').length}`, path, params, data)
+              console.log(`${path} (${new Date().getTime() - t1}ms)`, params, data, `l:${JSON.stringify(data ?? '').length}`) :
+              console.error(`${path} (${new Date().getTime() - t1}ms)`, params, data, `l:${JSON.stringify(data ?? '').length}`)
           }
         }
       }
@@ -144,15 +146,15 @@ class WSS extends EventEmitter2{
 
     };
 
-    this._instance.onerror = (e) => {
-      console.log('onerror', e)
+    this._instance.onopen = () => {
+      this._retryCount = 0
+    }
 
+    this._instance.onerror = (e) => {
       this.emit('error', e, [])
     }
 
     this._instance.onclose = (e) => {
-      console.log('onclose', e)
-
       switch(e.code){
 
         case 1002:
@@ -164,6 +166,9 @@ class WSS extends EventEmitter2{
 
         default:
           this.emit('disconnect', null, [])
+
+          const retryAfter = (num => num > 60000 ? 60000 : num)(import.meta.env.DEV ? 1000 : Math.pow(1.2, ++this._retryCount) * 1000)
+          window.setTimeout(() => this.connect(true), retryAfter)
           break
       }
     };
@@ -185,6 +190,7 @@ class WSS extends EventEmitter2{
 
   sendSync(path, params, cb, err, override){
     if(!this._instance || this._instance.readyState > 1){
+      this._pendingSend.push({ path, params, cb, err })
       return
     }
     else if(!this._instance.isAuth){
@@ -205,7 +211,6 @@ class WSS extends EventEmitter2{
       params
     })
       .then(async(dataUrlObj) => {
-
         const binaryData = await this.toBinaryData(dataUrlObj)
         this._instance.send(binaryData)
 
@@ -217,12 +222,12 @@ class WSS extends EventEmitter2{
           t1: new Date().getTime()
         }
 
+        /*const timeout = (override ?? {}).timeout ?? this._opt.timeout
         setTimeout(() => {
           if(this._callbacks[_requestId] && this._instance.readyState === 1){
             err({ message: 'Timeout' })
-            delete this._callbacks[_requestId]
           }
-        }, (override ?? {}).timeout ?? this._opt.timeout)
+        }, timeout)*/
       })
   }
 
@@ -243,7 +248,7 @@ class WSS extends EventEmitter2{
     return (this._instance ?? {}).readyState
   }
 
-  async ping(timeout = 30000){
+  async ping(timeout = 3000){
     return new Promise(async (resolve, reject) => {
 
       this._pinging = true

package/src/widgets/AhrefSetting.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.comp">
 
-		<div class="flex flex-col gap-4">
+		<div class="p-6 py-4 flex flex-col gap-4">
 
       <div>
         <label class="flex-1 text-text-400">Text</label>
@@ -37,11 +37,12 @@
       </div>
     </div>
 
-		<ComponentSetting2 :item="item"
-											:view-type="viewType"
-											:view-types="viewTypes"
-											defaultDisplay="flex"
-											@change="$emit('change')" />
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
 
 	</div>
 </template>
@@ -54,14 +55,16 @@ export default{
 
 	props: {
 
-		item: {
-			type: Object,
-			required: true
-		},
+    item: {
+      type: Object,
+      required: true
+    },
 
-		viewType: String,
+    viewType: String,
 
-		viewTypes: Array,
+    viewIndex: Number,
+
+    viewTypes: Array,
 
 	},
 
@@ -88,7 +91,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-6;
+  @apply flex flex-col divide-y divide-border-50;
 }
 
 </style>