@live-change/db-admin 0.5.6

package/front/src/entry-client.js

@@ -0,0 +1,24 @@
+import { createApp } from './main'
+import { clientApi } from '@live-change/vue3-ssr/clientApi.js'
+
+import {
+  createSharedElementDirective,
+  SharedElementRouteGuard
+} from 'v-shared-element'
+
+
+window.api = clientApi({
+  use: [  ]
+})
+
+const { app, router } = createApp(api)
+
+app.use(createSharedElementDirective())
+router.beforeEach(SharedElementRouteGuard)
+window.process = window.process || null
+
+// wait until router is ready before mounting to ensure hydration match
+router.isReady().then(() => {
+  const instance = app.mount('#app', true)
+  app._container._vnode = instance.$.vnode
+})

package/front/src/entry-server.js

@@ -0,0 +1,59 @@
+import { renderToString } from 'vue/server-renderer'
+import { renderMetaToString } from 'vue-meta/ssr'
+
+import { serverApi } from '@live-change/vue3-ssr/serverApi.js'
+
+import { createApp } from './main'
+
+function escapeHtml(unsafe) {
+  return unsafe
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+}
+
+export async function render({ url, dao, windowId }) {
+  const api = await serverApi(dao, {
+    use: [ ]
+  })
+
+  const { app, router } = createApp(api)
+
+  // set the router to the desired URL before rendering
+  router.push(url)
+  await router.isReady()
+
+  // prefetch data
+  await api.preFetchRoute(router.currentRoute, router)
+
+  // passing SSR context object which will be available via useSSRContext()
+  // @vitejs/plugin-vue injects code into a component's setup() that registers
+  // itself on ctx.modules. After the render, ctx.modules would contain all the
+  // components that have been instantiated during this render call.
+  const ctx = {}
+  const html = await renderToString(app, ctx)
+  await renderMetaToString(app, ctx)
+
+  const data = api.prerenderCache.cacheData()
+  console.log("PRERENDER CACHE", Array.from(api.prerenderCache.cache.keys()))
+  console.log("PRERENDER CACHE EXTENDED", Array.from(api.prerenderCache.extendedCache.keys()))
+
+  // the SSR manifest generated by Vite contains module -> chunk/asset mapping
+  // which we can then use to determine what files need to be preloaded for this
+  // request.
+
+  const metaManager = app.config.globalProperties.$metaManager
+  const activeMeta = metaManager.target.context.active
+  console.log("ACTIVE META", activeMeta)
+  console.log("TELEPORTS", ctx.teleports)
+  ctx.teleports.head = [
+    ...(activeMeta.title ? [`<title data-vm-ssr="true">${escapeHtml(activeMeta.title)}</title>`] : []),
+    ...((activeMeta.meta || []).map(meta => `<meta ${Object.keys(meta).map(
+        key => `${escapeHtml(key)}="${escapeHtml(meta[key])}"`
+    ).join(' ')}>`))
+  ].join('\n')
+
+  return { html, data, meta: ctx.teleports, modules: ctx.modules }
+}

package/front/src/isClientSide.js

@@ -0,0 +1,3 @@
+import { ref } from "vue"
+const isClientSide = ref(false)
+export default isClientSide

package/front/src/main.js

@@ -0,0 +1,61 @@
+import { createSSRApp } from 'vue'
+import { createMetaManager } from 'vue-meta'
+
+import { registerComponents } from '@live-change/vue3-components'
+import ReactiveDaoVue from '@live-change/dao-vue3'
+
+import PrimeVue from 'primevue/config'
+import ConfirmationService from 'primevue/confirmationservice'
+import { PrimeVueConfirmSymbol } from 'primevue/useconfirm'
+import { PrimeVueToastSymbol } from 'primevue/usetoast'
+import ToastService from 'primevue/toastservice'
+import StyleClass from 'primevue/styleclass'
+import Ripple from 'primevue/ripple'
+import BadgeDirective from 'primevue/badgedirective'
+
+import App from './App.vue'
+import Page from './Page.vue'
+import { createRouter } from './router'
+
+import emailValidator from "@live-change/email-service/clientEmailValidator.js"
+import passwordValidator from "@live-change/password-authentication-service/clientPasswordValidator.js"
+
+// SSR requires a fresh app instance per request, therefore we export a function
+// that creates a fresh app instance. If using Vuex, we'd also be creating a
+// fresh store here.
+export function createApp(api) {
+  api.validators.email = emailValidator
+  api.validators.password = passwordValidator
+
+  const app = createSSRApp(App)
+  app.config.devtools = true
+
+  api.installInstanceProperties(app.config.globalProperties)
+
+  registerComponents(app) 
+  app.use(ReactiveDaoVue, { dao: api })
+  
+  const router = createRouter(app)
+  app.use(router)
+
+  app.use(PrimeVue, {
+    ripple: true
+  })
+
+  app.use(ConfirmationService)
+  app.provide(PrimeVueConfirmSymbol, app.config.globalProperties.$confirm)
+
+  app.use(ToastService)
+  app.provide(PrimeVueToastSymbol, app.config.globalProperties.$toast)
+
+  app.directive('styleclass', StyleClass)
+  app.directive('ripple', Ripple)
+  app.directive('badge', BadgeDirective)
+
+  const meta = createMetaManager({
+    isSSR: import.meta.env.SSR
+  })
+  app.use(meta)
+
+  return { app, router }
+}

package/front/src/path.js

@@ -0,0 +1,68 @@
+function extractParams(code) {
+  return code.match(/(\$\.[a-z]+)/ig)?.map(p => p.slice(2)) ?? []
+}
+
+function sortDependencies(params) {
+  const allDependencies = new Set()
+  const depsMap = new Map(params.map(param => {
+    const extracted = extractParams(param[1])
+    allDependencies.add(...extracted)
+    return [param[0], new Set(extracted)]
+  }))
+  let foundNewDeps = true
+  while(foundNewDeps) {
+    foundNewDeps = false
+    for(const [ paramName, paramDependencies ] of depsMap.entries()) {
+      for(const dependency of paramDependencies) {
+        const deps2 = depsMap.get(dependency) || []
+        for(const dep2 of Array.from(deps2)) {
+          if(dep2 == paramName) throw new Error("recursive dependency " + dependency)
+          if(!paramDependencies.has(dep2)) {
+            foundNewDeps = true
+            paramDependencies.add(dep2)
+            allDependencies.add(dep2)
+          }
+        }
+      }
+    }
+  }
+  const sortedParams = Array.from(depsMap.entries()).sort(
+      (a, b) => a[1].size - b[1].size
+  )
+  return {
+    paramsOrder: sortedParams.map(p => p[0]),
+    dependencies: depsMap
+  }
+}
+
+function compilePath(path, params, possibleExternal = []) {
+  const paramsMap = new Map(params)
+  const { paramsOrder, dependencies } = sortDependencies([
+      ...params,
+      [null, path]
+  ])
+
+  const pathDependencies = dependencies.get(null)
+  const filteredParamsOrder = paramsOrder.filter(p => p && pathDependencies.has(p))
+
+  const externalDependencies = Array.from(pathDependencies).filter(dep => !dependencies.has(dep))
+  for(const external of externalDependencies) {
+    if(!possibleExternal.includes(external)) {
+      throw new Error('External value '+external+' not defined')
+    }
+  }
+
+  const lines = [
+      `(({ ${externalDependencies.join(', ')} }, db) => {`,
+      `  const $ = { ${externalDependencies.join(', ')} };`,
+      ...filteredParamsOrder.map(paramName => `  $.${paramName} = ${ paramsMap.get(paramName) };`),
+      `  return ${path};`,
+      `})`
+  ]
+  const code = lines.join('\n')
+  console.log("CODE", code)
+  const result = eval(code)
+  return { result, external: externalDependencies }
+}
+
+export { extractParams, compilePath }

package/front/src/router.js

@@ -0,0 +1,42 @@
+import {
+  createMemoryHistory,
+  createRouter as _createRouter,
+  createWebHistory
+} from 'vue-router'
+
+import { routes as dbAdminRoutes } from './routes.js'
+
+export function routes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+  return [
+
+    route({
+      path: prefix,
+      component: () => import("./DatabaseAdmin.vue"),
+      meta: { pageType: 'wide', noNavBar: true },
+      children: [
+        ...dbAdminRoutes({ ...config, prefix: '' })
+      ]
+    })
+
+  ]
+}
+
+export async function sitemap(route, api) {
+  /// Sitemap not needed
+}
+
+import { client as useClient } from '@live-change/vue3-ssr'
+
+export function createRouter(app, config) {
+  console.log("APP CTX", app._context)
+  const client = useClient(app._context)
+  const router = _createRouter({
+    // use appropriate history implementation for server/client
+    // import.meta.env.SSR is injected by Vite.
+    history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
+    routes: routes(config)
+  })
+  return router
+}
+

package/front/src/routes.js

@@ -0,0 +1,31 @@
+
+export function routes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+
+  return [
+
+    route({
+      path: prefix,
+      name: 'db:databases',
+      component: () => import("./Databases.vue")
+    }),
+
+    route({
+      path: prefix+'db/:dbName',
+      name: 'db:database',
+      component: () => import("./Database.vue"),
+      props: true
+    }),
+
+    route({
+      path: prefix+'data/:position/:read/:write/:remove/:params*',
+      name: 'db:data',
+      meta: { pageType: 'wide' },
+      component: () => import("./Data.vue"),
+      props: true
+    }),
+
+  ]
+}
+
+export default routes

package/front/vite.config.js

@@ -0,0 +1,107 @@
+const path = require('path')
+const vuePlugin = require('@vitejs/plugin-vue')
+import { defineConfig, searchForWorkspaceRoot } from 'vite'
+import findFreePorts from "find-free-ports"
+import { visualizer } from 'rollup-plugin-visualizer'
+import viteImages from 'vite-plugin-vue-images'
+import viteCompression from 'vite-plugin-compression'
+
+const ssrTransformCustomDir = () => {
+  return {
+    props: [],
+    needRuntime: true
+  }
+}
+
+export default defineConfig(async ({ command, mode }) => {
+  return {
+    define: {
+      ENV_BASE_HREF: JSON.stringify(process.env.BASE_HREF || 'http://localhost:8001')
+    },
+    server: {
+      hmr: {
+        port: (await findFreePorts())[0]
+      },
+      fs: {
+        allow: [
+            searchForWorkspaceRoot(process.cwd()),
+            '../../../node_modules'
+        ],
+      }
+    },
+    plugins: [
+      vuePlugin({
+        template: {
+          compilerOptions: {
+            //   whitespace: "preserve",
+            directiveTransforms: {
+              'ripple': ssrTransformCustomDir,
+              'styleclass': ssrTransformCustomDir,
+              'badge': ssrTransformCustomDir,
+              'shared-element': ssrTransformCustomDir
+            }
+          }
+        },
+      }),
+      viteImages({ extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'] }),
+      viteCompression({ algorithm: 'brotliCompress', ext: '.br' }),
+      viteCompression({ algorithm: 'gzip', ext: '.gz' }),
+      viteCompression({ algorithm: 'deflate', ext: '.zz' }),
+      visualizer({
+        filename: '../stats.html'
+      }),
+    ],
+    build: {
+      minify: false,
+      commonjsOptions: {
+        transformMixedEsModules: true,
+        include: [
+          /node_modules/,
+          /live-change-framework\/framework\//,
+          /live-change-framework\/uid\//,
+          /live-change-dao\/dao\//,
+          /live-change-dao\/dao-sockjs\//,
+          /live-change-dao\/dao-websocket\//,
+        ]
+      }
+    },
+    ssr: {
+      external: [
+        '@live-change/dao',
+        '@live-change/uid',
+        '@live-change/framework',
+        '@live-change/framework/lib/utils/validators.js',
+        'debug',
+        'vite'
+      ],
+      noExternal: [
+        'vue-meta',
+        '@live-change/vue3-components',
+        '@live-change/dao-vue3',
+        '@live-change/vue3-ssr',
+        'vue3-scroll-border'
+      ]
+    },
+    optimizeDeps: {
+      include: [
+        '@live-change/vue-api',
+        '@live-change/vue-api-session',
+        '@live-change/dao',
+        '@live-change/dao-sockjs',
+        '@live-change/dao-websocket',
+        '@live-change/uid',
+        '@live-change/framework',
+        '@live-change/framework/lib/utils/validators.js',
+        'debug'
+      ]
+    },
+
+    resolve: {
+      alias: [
+        { find: 'debug', replacement: 'debug/src/browser.js' },
+        { find: 'universal-websocket-client', replacement: 'universal-websocket-client/browser.js' },
+        { find: 'sockjs-client', replacement: 'sockjs-client/dist/sockjs.min.js' }
+      ],
+    }
+  }
+})

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@live-change/db-admin",
+  "version": "0.5.6",
+  "scripts": {
+    "memDev": "lcli memDev --initScript ./init.js --dbAccess",
+    "localDevInit": "rm tmp.db; lcli localDev --initScript ./init.js --dbAccess",
+    "localDev": "lcli localDev --dbAccess",
+    "dev": "lcli dev",
+    "ssrDev": "lcli ssrDev --dbAccess",
+    "serveAllMem": "cross-env NODE_ENV=production lcli ssrServer --withApi --withServices --updateServices --withDb --dbBackend mem --createDb --dbAccess",
+    "serveAll": "cross-env NODE_ENV=production lcli ssrServer --withApi --withServices --updateServices --dbAccess",
+    "serve": "cross-env NODE_ENV=production lcli ssrServer --dbAccess",
+    "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/cli": "0.6.1",
+    "@live-change/dao": "0.4.6",
+    "@live-change/dao-vue3": "0.4.6",
+    "@live-change/dao-websocket": "0.4.6",
+    "@live-change/framework": "0.6.1",
+    "@live-change/message-authentication-service": "0.2.28",
+    "@live-change/secret-code-service": "0.2.28",
+    "@live-change/secret-link-service": "0.2.28",
+    "@live-change/vue3-components": "0.2.8",
+    "@live-change/vue3-ssr": "0.2.7",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue/compiler-sfc": "^3.2.33",
+    "@vueuse/core": "^8.3.1",
+    "codeceptjs-assert": "^0.0.5",
+    "compression": "^1.7.4",
+    "cross-env": "^7.0.3",
+    "get-port-sync": "1.0.1",
+    "javascript-stringify": "^2.1.0",
+    "primeflex": "^3.1.3",
+    "primeicons": "^5.0.0",
+    "primevue": "^3.12.5",
+    "prism-es6": "^1.2.0",
+    "prismjs": "^1.28.0",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-visualizer": "5.6.0",
+    "serialize-javascript": "^6.0.0",
+    "serve-static": "^1.15.0",
+    "v-shared-element": "3.1.0",
+    "vite": "^2.9.5",
+    "vite-plugin-compression": "0.5.1",
+    "vite-plugin-vue-images": "^0.6.1",
+    "vue": "^3.2.33",
+    "vue-meta": "^3.0.0-alpha.9",
+    "vue-prism-editor": "2.0.0-alpha.2",
+    "vue-router": "^4.0.14",
+    "vue3-scroll-border": "0.1.2"
+  },
+  "devDependencies": {
+    "@live-change/codeceptjs-helper": "0.6.0",
+    "@wdio/selenium-standalone-service": "^7.19.5",
+    "codeceptjs": "^3.3.0",
+    "generate-password": "1.7.0",
+    "playwright": "^1.21.1",
+    "random-profile-generator": "^2.3.0",
+    "txtgen": "^3.0.1",
+    "webdriverio": "^7.19.5"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}

package/server/init.js

@@ -0,0 +1,16 @@
+const app = require('@live-change/framework').app()
+
+module.exports = async function(services) {
+
+  await app.dao.request(['database', 'createDatabase', 'testDb'])
+  await app.dao.request(['database', 'createTable', 'testDb', 'testTable1'])
+  for(let i = 0; i < 100; i++) {
+    await app.dao.request(['database', 'put', 'testDb', 'testTable1', {
+      id: app.generateUid(),
+      number: i,
+      text: 'test_'+i,
+      created: Date.now()
+    }])
+  }
+
+}

package/server/services.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  services: [
+  ]
+}