@live-change/image-frontend 0.0.3

package/front/src/imageUtils.js

@@ -0,0 +1,438 @@
+
+function hasAlpha(canvas) {
+  const context = canvas.getContext('2d')
+  const data = context.getImageData(0, 0, canvas.width, canvas.height).data
+  for (let i = 3, n = data.length; i < n; i+=4) {
+    if (data[i] < 255) {
+      return true
+    }
+  }
+}
+
+function getOrientation(jpegData) {
+  if(window.forceOrientation) return window.forceOrientation
+
+  let view = new DataView(jpegData)
+  if (view.getUint16(0, false) != 0xFFD8) return undefined
+  let length = view.byteLength, offset = 2
+  while (offset < length) {
+    let marker = view.getUint16(offset, false)
+    offset += 2
+    if (marker == 0xFFE1) {
+      if (view.getUint32(offset += 2, false) != 0x45786966) return undefined
+      let little = view.getUint16(offset += 6, false) == 0x4949
+      offset += view.getUint32(offset + 4, little)
+      let tags = view.getUint16(offset, little)
+      offset += 2
+      for (let i = 0; i < tags; i++)
+        if (view.getUint16(offset + (i * 12), little) == 0x0112)
+          return (view.getUint16(offset + (i * 12) + 8, little))
+    }
+    else if ((marker & 0xFF00) != 0xFF00) break;
+    else offset += view.getUint16(offset, false)
+  }
+  return undefined
+}
+
+function blobToDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    let reader = new FileReader()
+    reader.onload = function(e) {
+      resolve(e.target.result)
+    }
+    reader.onerror = function(e) {
+      reject(e.target.error)
+    }
+    reader.readAsDataURL(file)
+  })
+}
+
+function loadImageUpload(file) {
+  return new Promise(function(resolve, reject) {
+    let img = document.createElement("img")
+    let reader = new FileReader()
+    reader.onload = async function(e) {
+      if(file.type == "image/jpeg") {
+        let headerReader = new FileReader()
+        headerReader.onload=function(he) {
+          let orientation = getOrientation(he.target.result)
+          img.onload = function(e) {
+            resolve({
+              image: img,
+              type: file.type,
+              orientation: orientation,
+              sizeSwap: orientation>4,
+              width: orientation>4 ? img.height : img.width,
+              height: orientation>4 ? img.width : img.height
+            })
+          }
+          img.src = e.target.result
+        }
+        headerReader.onerror = function(e) {
+          reject(e.target.error)
+        }
+        headerReader.readAsArrayBuffer(file.slice(0, 64 * 1024))
+      } else {
+        img.onload = function(e) {
+          resolve({
+            image: img,
+            type: file.type,
+            width: img.width,
+            height: img.height
+          })
+        }
+        img.src = e.target.result
+      }
+    }
+    reader.onerror = function(e) {
+      reject(e.target.error)
+    }
+    reader.readAsDataURL(file)
+  })
+}
+
+function loadImage(url) {
+  return new Promise((resolve, reject) => {
+    let image = new Image
+    image.onload = () => {
+      resolve(image)
+    }
+    image.onerror = (ev) => {
+      reject(ev)
+    }
+    image.src = url
+  })
+}
+
+function resize(img, w, h) {
+  let canvas=imageUtils.imageToCanvas(img)
+  resizeCanvas(canvas,w,h)
+  return canvas.toDataURL("image/jpeg",1)
+}
+
+                          // 0  1  2  3  4  5  6  7  8
+const reverseOrientations = [0, 0, 2, 3, 4, 5, 8, 7, 6]
+
+let exifOrientationSupportPromise = null
+async function isExifOrientationSupported() {
+  if(!exifOrientationSupportPromise) exifOrientationSupportPromise = new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onerror = function() {
+      resolve(false)
+    }
+    img.onload = function() {
+      resolve(img.width !== 2)
+    }
+    img.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAASUkqAAgAAAABABIBAwABAAAABgASAAAAAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAABAAIDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+/iiiigD/2Q==';
+  })
+  return exifOrientationSupportPromise
+}
+
+function cancelOrientation(canvas, orientation) {
+  const change = reverseOrientations[orientation]
+  if(change) return changeOrientation(canvas, change)
+  return canvas
+}
+
+function changeOrientation(canvas, orientation) {
+  console.log("CHANGE ORIENTATION", orientation, canvas.width, canvas.height, canvas)
+  const w = canvas.width
+  const h = canvas.height
+  let w2 = 0
+  let h2 = 0
+  const fromIData = canvas.getContext("2d").getImageData(0, 0, w, h)
+  const fromData = fromIData.data
+  let toIData
+  switch(orientation) {
+    case 2 : {
+      w2=w
+      h2=h
+      canvas.width = w2
+      canvas.height = h2
+      toIData = canvas.getContext("2d").getImageData(0, 0, w2, h2)
+      const toData = toIData.data
+      for(let y=0; y<h; y++) {
+        for(let x=0; x<w; x++) {
+          const from=x+y*w
+          const to=(w-x-1)+y*w
+          toData[(to<<2)+0] = fromData[(from<<2)+0]
+          toData[(to<<2)+1] = fromData[(from<<2)+1]
+          toData[(to<<2)+2] = fromData[(from<<2)+2]
+          toData[(to<<2)+3] = fromData[(from<<2)+3]
+        }
+      }
+    } break;
+    case 3 : {
+      w2 = w
+      h2 = h
+      canvas.width = w2
+      canvas.height = h2
+      toIData = canvas.getContext("2d").getImageData(0, 0, w2, h2)
+      const toData = toIData.data
+      for (let y = 0; y < h; y++) {
+        for (let x = 0; x < w; x++) {
+          const from = (w - x - 1) + y * w
+          const to = x + (h - y - 1) * w
+          toData[(to << 2) + 0] = fromData[(from << 2) + 0]
+          toData[(to << 2) + 1] = fromData[(from << 2) + 1]
+          toData[(to << 2) + 2] = fromData[(from << 2) + 2]
+          toData[(to << 2) + 3] = fromData[(from << 2) + 3]
+        }
+      }
+    }break;
+    case 4 : {
+      w2=w
+      h2=h
+      canvas.width = w2
+      canvas.height = h2
+      toIData = canvas.getContext("2d").getImageData(0, 0, w2, h2)
+      const toData = toIData.data
+      for(let y=0; y<h; y++) {
+        for(let x=0; x<w; x++) {
+          const from = x+y*w
+          const to = x+(h-y-1)*w
+          toData[(to<<2)+0] = fromData[(from<<2)+0]
+          toData[(to<<2)+1] = fromData[(from<<2)+1]
+          toData[(to<<2)+2] = fromData[(from<<2)+2]
+          toData[(to<<2)+3] = fromData[(from<<2)+3]
+        }
+      }
+    } break;
+    case 5 : {
+      w2 = h
+      h2 = w
+      canvas.width = w2
+      canvas.height = h2
+      toIData = canvas.getContext("2d").getImageData(0, 0, w2, h2)
+      const toData = toIData.data
+      for (let y = 0; y < h; y++) {
+        for (let x = 0; x < w; x++) {
+          const from = x + y * w
+          const to = y + x * w2
+          toData[(to << 2) + 0] = fromData[(from << 2) + 0]
+          toData[(to << 2) + 1] = fromData[(from << 2) + 1]
+          toData[(to << 2) + 2] = fromData[(from << 2) + 2]
+          toData[(to << 2) + 3] = fromData[(from << 2) + 3]
+        }
+      }
+    } break;
+    case 6 : {
+      w2 = h
+      h2 = w
+      canvas.width = w2
+      canvas.height = h2
+      toIData = canvas.getContext("2d").getImageData(0, 0, w2, h2)
+      const toData = toIData.data
+      for (let y = 0; y < h; y++) {
+        for (let x = 0; x < w; x++) {
+          const from = x + y * w
+          const to = y + (h2 - x - 1) * w2
+          toData[(to << 2) + 0] = fromData[(from << 2) + 0]
+          toData[(to << 2) + 1] = fromData[(from << 2) + 1]
+          toData[(to << 2) + 2] = fromData[(from << 2) + 2]
+          toData[(to << 2) + 3] = fromData[(from << 2) + 3]
+        }
+      }
+    } break;
+    case 7 : {
+      w2 = h
+      h2 = w
+      canvas.width = w2
+      canvas.height = h2
+      toIData = canvas.getContext("2d").getImageData(0, 0, w2, h2)
+      const toData = toIData.data
+      for (let y = 0; y < h; y++) {
+        for (let x = 0; x < w; x++) {
+          const from = x + y * w
+          const to = (w2 - y - 1) + (h2 - x - 1) * w2
+          toData[(to << 2) + 0] = fromData[(from << 2) + 0]
+          toData[(to << 2) + 1] = fromData[(from << 2) + 1]
+          toData[(to << 2) + 2] = fromData[(from << 2) + 2]
+          toData[(to << 2) + 3] = fromData[(from << 2) + 3]
+        }
+      }
+    } break;
+    case 8 : {
+      w2 = h
+      h2 = w
+      canvas.width = w2
+      canvas.height = h2
+      toIData = canvas.getContext("2d").getImageData(0, 0, w2, h2)
+      const toData = toIData.data
+      for (let y = 0; y < h; y++) {
+        for (let x = 0; x < w; x++) {
+          const from = x + y * w
+          const to = (w2 - y - 1) + x * w2
+          toData[(to << 2) + 0] = fromData[(from << 2) + 0]
+          toData[(to << 2) + 1] = fromData[(from << 2) + 1]
+          toData[(to << 2) + 2] = fromData[(from << 2) + 2]
+          toData[(to << 2) + 3] = fromData[(from << 2) + 3]
+        }
+      }
+    } break;
+    default: {
+      w2 = w
+      h2 = h
+      canvas.width = w2
+      canvas.height = h2
+      toIData = canvas.getContext("2d").getImageData(0, 0, w2, h2)
+      const toData = toIData.data
+      for (let y = 0; y < h; y++) {
+        for (let x = 0; x < w; x++) {
+          const from = x + y * w
+          const to = x + y * w
+          toData[(to << 2) + 0] = fromData[(from << 2) + 0]
+          toData[(to << 2) + 1] = fromData[(from << 2) + 1]
+          toData[(to << 2) + 2] = fromData[(from << 2) + 2]
+          toData[(to << 2) + 3] = fromData[(from << 2) + 3]
+        }
+      }
+    } break;
+  }
+
+  canvas.getContext("2d").putImageData(toIData, 0, 0)
+  return canvas
+}
+
+function imageToCanvas(image) {
+  const canvas= document.createElement("canvas")
+  canvas.width = image.width
+  canvas.height = image.height
+  const ctx = canvas.getContext("2d")
+  ctx.save()
+  ctx.drawImage(image, 0, 0)
+  return canvas
+}
+
+function resizeCanvas(canvas, w, h) {
+  const img = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height)
+  const img2 = canvas.getContext("2d").getImageData(0, 0, w, h)
+  const inputData = img.data
+  const outputData = img2.data
+  resampleHermite(inputData, canvas.width, canvas.height, outputData, w, h)
+  canvas.getContext("2d").clearRect(0, 0, Math.max(canvas.width, w), Math.max(canvas.height, h))
+  canvas.width = w
+  canvas.height = h
+  canvas.getContext("2d").putImageData(img2, 0, 0);
+}
+
+function cropCanvas(canvas, x, y, w, h) {
+  const img = canvas.getContext("2d").getImageData(x, y, w, h)
+  canvas.width=w
+  canvas.height=h
+  canvas.getContext("2d").putImageData(img, 0, 0)
+}
+
+function resampleHermite(src, w, h, dest, w2, h2){
+  const startTime = Date.now()
+  const ratio_w = w / w2
+  const ratio_h = h / h2
+  const ratio_w_half = Math.ceil(ratio_w/2)
+  const ratio_h_half = Math.ceil(ratio_h/2)
+
+  for(let j = 0; j < h2; j++){
+    for(let i = 0; i < w2; i++){
+      const x2 = (i + j*w2) * 4;
+      const center_y = (j + 0.5) * ratio_h
+
+      let weight = 0;
+      let weights = 0;
+      let weights_alpha = 0;
+      let gx_r = 0
+      let gx_g = 0
+      let gx_b = 0
+      let gx_a = 0
+
+      for(let yy = Math.floor(j * ratio_h); yy < (j + 1) * ratio_h; yy++){
+        const dy = Math.abs(center_y - (yy + 0.5)) / ratio_h_half
+        const center_x = (i + 0.5) * ratio_w
+        const f0 = dy*dy //pre-calc part of f
+        for(let xx = Math.floor(i * ratio_w); xx < (i + 1) * ratio_w; xx++){
+          let dx = Math.abs(center_x - (xx + 0.5)) / ratio_w_half
+          const f = Math.sqrt(f0 + dx*dx)
+          if(f >= -1 && f <= 1){
+            //hermite filter
+            weight = 2 * f*f*f - 3*f*f + 1
+            if(weight > 0){
+              dx = 4*(xx + yy*f)
+              //alpha
+              gx_a += weight * src[dx + 3]
+              weights_alpha += weight
+              //colors
+              if(src[dx + 3] < 255)
+                weight = weight * src[dx + 3] / 250
+              gx_r += weight * src[dx]
+              gx_g += weight * src[dx + 1]
+              gx_b += weight * src[dx + 2]
+              weights += weight
+            }
+          }
+        }
+      }
+      dest[x2]     = gx_r / weights
+      dest[x2 + 1] = gx_g / weights
+      dest[x2 + 2] = gx_b / weights
+      dest[x2 + 3] = gx_a / weights_alpha
+    }
+  }
+  console.log(`hermite resample took ${Date.now() - startTime}ms`)
+
+}
+
+function getDataURIData(dataURI) {
+  // convert base64/URLEncoded data component to raw binary data held in a string
+  let byteString
+  if (dataURI.split(',')[0].indexOf('base64') >= 0)
+    byteString = atob(dataURI.split(',')[1])
+  else
+    byteString = unescape(dataURI.split(',')[1])
+  // write the bytes of the string to a typed array
+  let ia = new Uint8Array(byteString.length)
+  for (let i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i)
+  }
+  return ia
+}
+
+function getDataURIMime(dataURI) {
+  return dataURI.split(',')[0].split(':')[1].split(';')[0]
+}
+
+
+const methods = {
+  getOrientation,
+  loadImageUpload,
+  resize,
+  changeOrientation,
+  cancelOrientation,
+  imageToCanvas,
+  resizeCanvas,
+  cropCanvas,
+  resampleHermite,
+  getDataURIData,
+  getDataURIMime,
+  blobToDataUrl,
+  hasAlpha,
+  isExifOrientationSupported,
+  loadImage
+}
+
+export {
+  getOrientation,
+  loadImageUpload,
+  resize,
+  changeOrientation,
+  cancelOrientation,
+  imageToCanvas,
+  resizeCanvas,
+  cropCanvas,
+  resampleHermite,
+  getDataURIData,
+  getDataURIMime,
+  blobToDataUrl,
+  hasAlpha,
+  isExifOrientationSupported,
+  loadImage
+}
+
+export default methods

package/front/src/preprocessImageFile.js

@@ -0,0 +1,122 @@
+import {
+  imageToCanvas, loadImageUpload, cancelOrientation, hasAlpha, isExifOrientationSupported
+} from "./imageUtils.js"
+import imageResizer from "./imageResizer"
+
+async function preProcessImageFile({ file, image, canvas }, config) {
+
+  const {
+    maxUploadSize = 10 * 1024 * 1024,
+    maxUploadWidth = 2048,
+    maxUploadHeight = 2048,
+    maxProcessableSize = 50 * 1024 * 1025,
+    maxProcessableWidth = 10000,
+    maxProcessableHeight = 10000,
+    maxProcessablePixels = 6000 * 6000
+  } = config
+
+  if(!file && !image && !canvas) {
+    throw new Error('noImage')
+  }
+
+  if (file?.size > maxProcessableSize) {
+    throw new Error("tooBig")
+  }
+
+  if(!image) {
+    if(canvas) {
+      image = {
+        width: canvas.width,
+        height: canvas.height,
+        orientation: 0,
+        type: config.fileType || 'image/png',
+        image: null // not needed because we have canvas
+      }
+    } else {
+      image = await loadImageUpload(file)
+    }
+  }
+
+  if (image.width > maxProcessableWidth
+      || image.height > maxProcessableHeight
+      || (image.width * image.height) > maxProcessablePixels) {
+    throw new Error("tooBig")
+  }
+
+  let processingNeeded =
+      image.width > maxUploadWidth
+      || image.height > maxUploadHeight
+      || image.orientation
+
+  if(!processingNeeded) {
+    if(!file) {
+      if(!canvas) canvas = imageToCanvas(image.image)
+      file = await new Promise(
+        (resolve, reject) => canvas.toBlob(resolve, config.fileType || 'image/png')
+      )
+    }
+  }
+
+  processingNeeded ||= file.size > maxUploadSize
+
+  if(!processingNeeded) {
+    return {
+      blob: file, canvas,
+      size: { width: image.width, height: image.height }
+    }
+  }
+
+  if(!canvas) canvas = imageToCanvas(image.image)
+
+  if(image.width > maxUploadWidth || image.height > maxUploadHeight ) { /// RESIZING NEEDED
+    const maxRatio = maxUploadWidth / maxUploadHeight
+    const inputRatio = image.width / image.height
+
+    let targetWidth, targetHeight
+    if(inputRatio > maxRatio) { /// scale to max width
+      targetWidth = maxUploadWidth
+      targetHeight = Math.round(maxUploadWidth / inputRatio)
+    } else { /// scale to max height
+      targetWidth = Math.round(maxUploadHeight * inputRatio)
+      targetHeight = maxUploadHeight
+    }
+
+    console.log(`RESIZING ${image.width}x${image.height} => ${targetWidth}x${targetHeight}`)
+
+    let destCanvas = document.createElement('canvas')
+    if(image.orientation > 4 && !(await isExifOrientationSupported())) { // Swap dimmensions
+      destCanvas.width = targetHeight
+      destCanvas.height = targetWidth
+    } else {
+      destCanvas.width = targetWidth
+      destCanvas.height = targetHeight
+    }
+    await imageResizer.resize(canvas, destCanvas, {
+      unsharpAmount: 80,
+      unsharpRadius: 0.6,
+      unsharpThreshold: 2,
+      alpha: hasAlpha(canvas)
+    })
+    canvas = destCanvas
+  }
+
+  if(image.orientation && !(await isExifOrientationSupported())) {
+    console.log("CANCEL ORIENTATION", image.orientation)
+    canvas = cancelOrientation(canvas, image.orientation)
+  }
+
+  const blob = await new Promise(
+      (resolve, reject) => canvas.toBlob(resolve, file?.type || config.fileType || 'image/png')
+  )
+  console.log("OUTPUT CANVAS", canvas.width, canvas.height)
+  console.log("OUTPUT BLOB", blob)
+  blob.name = file.name
+
+  return {
+    blob, canvas,
+    size: { width: canvas.width, height: canvas.height }
+  }
+
+}
+
+export default preProcessImageFile

package/front/src/router.js

@@ -0,0 +1,41 @@
+import {
+  createMemoryHistory,
+  createRouter as _createRouter,
+  createWebHistory
+} from 'vue-router'
+
+import { dbAdminRoutes } from "@live-change/db-admin"
+
+export function wysiwygRoutes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+  return [
+    route({
+      name: 'upload:test', path: prefix + 'upload', meta: { },
+      component: () => import("./UploadTest.vue"),
+      props: {
+      }
+    }),
+    route({
+      name: 'editor:test', path: prefix + '', meta: { },
+      component: () => import("./EditorTest.vue"),
+      props: {
+      }
+    }),
+
+    ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) })
+  ]
+}
+
+export async function sitemap(route, api) {
+
+}
+
+
+export function createRouter(app, config) {
+  const router = _createRouter({
+    history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
+    routes: wysiwygRoutes(config)
+  })
+  return router
+}
+

package/front/vite.config.js

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite'
+
+import baseViteConfig from '@live-change/frontend-base/vite-config.js'
+
+export default defineConfig(async ({ command, mode }) => {
+  const baseConfig = (await baseViteConfig({ command, mode }))
+  return {
+    ...baseConfig,
+
+    resolve: {
+      alias: [
+        ...baseConfig.resolve.alias,
+/*        { find: 'vue', replacement: 'vue/dist/vue.esm-bundler.js' },
+        { find: 'vue/server-renderer', replacement: 'vue/server-renderer' },*/
+      ]
+    }
+  }
+})

package/index.js

@@ -0,0 +1,7 @@
+import ImageUpload from "./front/src/ImageUpload.js"
+import ImageEditor from "./front/src/ImageEditor.vue"
+import Image from "./front/src/Image.vue"
+import {uploadImage, imageUploads} from "./front/src/imageUploads.js";
+import preProcessImageFile from "./front/src/preprocessImageFile.js";
+
+export { ImageUpload, Image, uploadImage, preProcessImageFile, imageUploads, ImageEditor }

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@live-change/image-frontend",
+  "version": "0.0.3",
+  "scripts": {
+    "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
+    "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
+    "localDev": "lcli localDev --enableSessions",
+    "dev": "lcli dev --enableSessions",
+    "ssrDev": "lcli ssrDev --enableSessions",
+    "serveAllMem": "cross-env NODE_ENV=production lcli ssrServer --withApi --withServices --updateServices --enableSessions --withDb --dbBackend mem --createDb",
+    "serveAll": "cross-env NODE_ENV=production lcli ssrServer --withApi --withServices --updateServices --enableSessions",
+    "serve": "cross-env NODE_ENV=production lcli ssrServer --enableSessions",
+    "apiServer": "lcli apiServer --enableSessions",
+    "devApiServer": "lcli devApiServer --enableSessions",
+    "memApiServer": "lcli memApiServer --enableSessions",
+    "build": "cd front; yarn build:client && yarn build:server",
+    "build:client": "cd front; vite build --ssrManifest --outDir dist/client",
+    "build:server": "cd front; vite build --ssr src/entry-server.js --outDir dist/server",
+    "generate": "vite build --ssrManifest --outDir dist/static && yarn build:server && node prerender",
+    "debug": "node --inspect-brk server"
+  },
+  "dependencies": {
+    "@live-change/framework": "0.6.5",
+    "@live-change/cli": "0.6.5",
+    "@live-change/dao": "0.4.13",
+    "@live-change/dao-vue3": "0.4.13",
+    "@live-change/dao-websocket": "0.4.13",
+    "@live-change/vue3-ssr": "0.2.14",
+    "@live-change/vue3-components": "0.2.12",
+    "@live-change/session-service": "0.2.39",
+    "@live-change/image-service": "0.2.37",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue/compiler-sfc": "^3.2.33",
+    "@vueuse/core": "^8.3.1",
+    "v-shared-element": "3.1.0",
+    "vue3-scroll-border": "0.1.2",
+    "codeceptjs-assert": "^0.0.5",
+    "compression": "^1.7.4",
+    "cross-env": "^7.0.3",
+    "get-port-sync": "1.0.1",
+    "primeicons": "^5.0.0",
+    "primevue": "^3.15.0",
+    "primeflex": "^3.2.1",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "serialize-javascript": "^6.0.0",
+    "serve-static": "^1.15.0",
+    "vite": "^2.9.6",
+    "vue": "^3.2.33",
+    "vue-meta": "^3.0.0-alpha.9",
+    "vue-router": "^4.0.14",
+    "vite-plugin-compression": "0.5.1",
+    "vite-plugin-vue-images": "^0.6.1",
+    "rollup-plugin-visualizer": "5.6.0",
+    "@tiptap/vue-3": "2.0.0-beta.91",
+    "@tiptap/starter-kit": "^2.0.0-beta.185",
+    "@tiptap/extension-underline": "2.0.0-beta.23",
+    "@tiptap/extension-highlight": "^2.0.0-beta.33",
+    "@fortawesome/fontawesome-free": "^6.1.1",
+    "pretty-bytes": "^6.0.0",
+    "pica": "^9.0.1"
+  },
+  "devDependencies": {
+    "@live-change/codeceptjs-helper": "0.6.5",
+    "@wdio/selenium-standalone-service": "^7.19.5",
+    "codeceptjs": "^3.3.1",
+    "playwright": "^1.21.1",
+    "random-profile-generator": "^2.3.0",
+    "txtgen": "^3.0.1",
+    "generate-password": "1.7.0",
+    "webdriverio": "^7.19.5"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}