wip ui

src/db/index.js

@@ -0,0 +1,224 @@
+const getStore = (db, loc, type = 'readwrite') => {
+  const tx = db.transaction(loc, type)
+  return { tx, store: tx.objectStore(loc) }
+}
+
+const getRange = o => {
+  const exLower = typeof o.lt !== 'undefined'
+  const exUpper = typeof o.gt !== 'undefined'
+
+  const range = window.IDBKeyRange
+
+  if ((o.lte || o.lt) && (o.gte || o.gt)) {
+    const args = [
+      o.gte || o.gt,
+      o.lte || o.lt,
+      exLower,
+      exUpper
+    ]
+
+    return range.bound(...args)
+  }
+
+  if (o.lte || o.lt) {
+    return range.upperBound(o.lte || o.lt, exLower)
+  }
+
+  if (o.gte || o.gt) {
+    return range.lowerBound(o.gte || o.gt, exUpper)
+  }
+}
+
+export class Indexed {
+  constructor (loc) {
+    this._loc = loc
+    this._db = null
+  }
+
+  static async open (...args) {
+    const indexed = new Indexed(...args)
+    return await indexed.init()
+  }
+
+  static async drop (loc) {
+    return new Promise(resolve => {
+      const r = window.indexedDB.deleteDatabase(loc)
+      r.onsuccess = () => resolve({ data: true })
+      r.onerror = event => resolve({ err: event.target })
+      r.onblocked = event => resolve({ err: event.target })
+    })
+  }
+
+  init () {
+    return new Promise(resolve => {
+      const r = window.indexedDB.open(this._loc)
+      const loc = this._loc
+
+      r.onerror = event => {
+        throw event.target
+      }
+
+      r.onupgradeneeded = (event) => {
+        this._db = event.target.result
+        const opts = { keyPath: 'key' }
+        const store = this._db.createObjectStore(loc, opts)
+
+        store.transaction.oncomplete = event => {
+          resolve(this)
+        }
+      }
+
+      r.onsuccess = (event) => {
+        this._db = event.target.result
+        resolve(this)
+      }
+    })
+  }
+
+  count () {
+    return new Promise(resolve => {
+      const { store } = getStore(this._db, this._loc)
+      const r = store.count()
+      r.onsuccess = () => resolve({ data: r.result || 0 })
+      r.onerror = event => resolve({ err: event.target })
+      r.onblocked = event => resolve({ err: event.target })
+    })
+  }
+
+  has (key) {
+    return new Promise(resolve => {
+      const { store } = getStore(this._db, this._loc)
+      const r = store.get(key)
+      r.onerror = event => {
+        if (Indexed.onerror) Indexed.onerror(event.target)
+        resolve({ err: event.target })
+      }
+      r.onsuccess = function (event) {
+        resolve({ data: typeof this.result !== 'undefined' })
+      }
+    })
+  }
+
+  get (key) {
+    return new Promise(resolve => {
+      const { store } = getStore(this._db, this._loc, 'readonly')
+      const r = store.get(key)
+      r.onerror = event => {
+        if (Indexed.onerror) Indexed.onerror(event.target)
+        resolve({ err: event.target })
+      }
+      r.onsuccess = function (event) {
+        if (typeof this.result === 'undefined') {
+          return resolve({ err: new Error('Not Found') })
+        }
+        resolve({ data: this.result.value })
+      }
+    })
+  }
+
+  put (key, value) {
+    return new Promise(resolve => {
+      const { store } = getStore(this._db, this._loc)
+      const r = store.put({ key, value })
+      r.onerror = event => {
+        if (Indexed.onerror) Indexed.onerror(event.target)
+        resolve({ err: event.target })
+      }
+      r.onsuccess = event => resolve({})
+    })
+  }
+
+  del (key) {
+    return new Promise(resolve => {
+      const { store } = getStore(this._db, this._loc)
+      const r = store.delete(key)
+      r.onerror = event => {
+        if (Indexed.onerror) Indexed.onerror(event.target)
+        resolve({ err: event.target })
+      }
+      r.onsuccess = event => resolve({})
+    })
+  }
+
+  batch (ops) {
+    return new Promise(resolve => {
+      const { tx, store } = getStore(this._db, this._loc)
+      tx.onerror = event => {
+        if (Indexed.onerror) Indexed.onerror(event.target)
+        resolve({ err: event.target })
+      }
+      tx.oncomplete = event => resolve({})
+
+      const eachOp = op => {
+        if (op.type === 'put') {
+          store.put({ key: op.key, value: op.value })
+        }
+
+        if (op.type === 'del') {
+          store.delete(op.key)
+        }
+      }
+
+      ops.forEach(eachOp)
+    })
+  }
+
+  readAll (opts) {
+    return new Promise(resolve => {
+      this.read(opts).then(({ events }) => {
+        const rows = new Map()
+        events.onerror = err => {
+          if (Indexed.onerror) Indexed.onerror(err)
+          resolve({ err })
+        }
+        events.ondata = (key, value) => rows.set(key, value)
+        events.onend = () => resolve({ data: rows })
+      })
+    })
+  }
+
+  read (opts = {}) {
+    return new Promise(resolve => {
+      const { store } = getStore(this._db, this._loc, 'readonly')
+      const r = store.openCursor(getRange(opts), opts.reverse ? 'prevunique' : undefined)
+      const events = {}
+      let count = 0
+      resolve({ events })
+
+      function onError (event) {
+        if (Indexed.onerror) Indexed.onerror(event.target)
+        if (events.onerror) events.onerror(event.target)
+      }
+
+      async function onSuccess (event) {
+        const cursor = event.target.result
+
+        if (cursor) {
+          const r = store.get(this.result.key)
+
+          r.onerror = event => {
+            if (Indexed.onerror) Indexed.onerror(event.target)
+            if (events.onerror) events.onerror(event.target)
+          }
+
+          r.onsuccess = function (event) {
+            if (events.ondata) events.ondata(this.result.key, this.result.value)
+
+            if (opts.limit && (count++ === (opts.limit - 1))) {
+              if (events.onend) return events.onend()
+              return
+            }
+            cursor.continue()
+          }
+        } else {
+          if (events.onend) events.onend()
+        }
+      }
+
+      r.onerror = onError
+      r.onsuccess = onSuccess
+    })
+  }
+}
+
+export default Indexed

src/index.js

@@ -250,11 +250,14 @@ class AppView extends Tonic {
 
         this.previewWindows[w.index] = w
       } catch (err) {
-        console.log(err)
       }
     }
   }
 
+  async initNetwork () {
+
+  }
+
   async initData () {
     if (process.env.DEBUG === '1') {
       const databases = await window.indexedDB.databases()
@@ -293,8 +296,6 @@ class AppView extends Tonic {
         }
       })
     }
-
-
   }
 
   async initApplication () {
@@ -401,9 +402,7 @@ class AppView extends Tonic {
     })
   }
 
-  async setupWindow () {
-    document.title = 'Socket App Studio'
-
+  async initMenu () {
     let itemsMac = ''
 
     if (process.platform === 'darwin') {
@@ -567,13 +566,14 @@ class AppView extends Tonic {
   }
 
   async connected () {
-    this.setupWindow()
+    this.initMenu()
   }
 
   async render () {
     await navigator.serviceWorker.ready
 
     await this.initData()
+    await this.initNetwork()
     await this.initApplication()
 
     return this.html`
@@ -644,6 +644,8 @@ class AppView extends Tonic {
 }
 
 window.onload = () => {
+  document.title = 'Socket App Studio'
+
   Tonic.add(AppEditor)
   Tonic.add(AppProperties)
   Tonic.add(AppProject)

src/template/demo-project/src/index.html

@@ -15,7 +15,7 @@
          object-src 'none';
       "
     >
-  </head>  
+  </head>
   <script charset="utf-8" type="module" src="index.js"></script>
   <link rel="stylesheet" href="index.css"/>
   <body>

src/worker.js

@@ -8,7 +8,6 @@ const navigatorPath = path.DATA.replace(path.HOME, mount)
 
 export default async function (req, env, ctx) {
   const url = new URL(req.url)
-
   const pattern = new URLPattern({ pathname: '/preview/*' })
   const route = pattern.exec(url)
 
@@ -17,13 +16,14 @@ export default async function (req, env, ctx) {
   const p = path.join(navigatorPath, route.pathname.groups[0])
   const params = url.searchParams
   const res = await fetch(p)
-
-  let data = await res.text()
-
+  const data = await res.text()
   const id = ctx.event.clientId
   const windows = await application.getWindows()
   const w = Object.values(windows)[0]
 
+  const zoom = params.get('zoom')
+  const device = params.get('device')
+
   let bgColor = 'black'
 
   if (w) {
@@ -41,7 +41,7 @@ export default async function (req, env, ctx) {
     }
   `
 
-  if (params.get('device') === 'iphone-15') {
+  if (device === 'iphone-15') {
     css += `
       body::after {
         top: 2%;
@@ -53,7 +53,7 @@ export default async function (req, env, ctx) {
     `
   }
 
-  if (params.get('device') === 'iphone-13') {
+  if (device === 'iphone-13') {
     css += `
       body::after {
         top: 0;
@@ -65,9 +65,23 @@ export default async function (req, env, ctx) {
     `
   }
 
+  if (device === 'galaxy-23') {
+    css += `
+      body::after {
+        top: 2%;
+        left: 50%;
+        width: 4.5%;
+        height: 2%;
+        border-radius: 99em;
+      }
+    `
+  }
+
+  let html = data
+
   if (url.pathname.endsWith('index.html')) {
-    data = data.replace(/<html(?:[^\n\r]*)>/, `<html style="zoom: ${params.get('zoom')}">`)
-    data = data.replace('</head>', `<style>${css}</style></head>`)
+    html = html.replace(/<html(?:[^\n\r]*)>/, `<html style="zoom: ${zoom}">`)
+    html = html.replace('</head>', `<style>${css}</style></head>`)
   }
 
   const types = await lookup(path.extname(url.pathname).slice(1))
@@ -78,5 +92,5 @@ export default async function (req, env, ctx) {
     'Cache-Control': 'no-cache'
   }
 
-  return new Response(data, { status: 200, headers })
+  return new Response(html, { status: 200, headers })
 }