@live-change/frontend-base 0.0.3

package/ComponentDialog.vue

@@ -0,0 +1,46 @@
+<template>
+  <loading-zone suspense>
+    <template v-slot:loading>
+      <div class="fixed w-full h-full flex align-items-center justify-content-center top-0 left-0">
+        <ProgressSpinner animationDuration=".5s"/>
+      </div>
+    </template>
+    <template v-slot:default="{ isLoading }">
+      <working-zone>
+        <template v-slot:working>
+          <div class="fixed w-full h-full flex align-items-center justify-content-center top-0 left-0">
+            <ProgressSpinner animationDuration=".5s"/>
+          </div>
+        </template>
+        <template v-slot:default="{ isWorking }">
+          <ProgressBar v-if="isLoading || isWorking" mode="indeterminate" class="absolute w-full" style="height: .2em" />
+          <component :is="component" v-bind="props" @update:modelValue="value => data = value" @close="handleClose" />
+        </template>
+      </working-zone>
+    </template>
+  </loading-zone>
+</template>
+
+<script setup>
+
+  import { inject, ref } from 'vue'
+
+  import ProgressSpinner from 'primevue/progressspinner'
+  import ProgressBar from 'primevue/progressspinner'
+
+
+  const data = ref()
+
+  const dialogRef = inject('dialogRef')
+
+  const { component, props } = dialogRef.value.data
+
+  function handleClose() {
+    dialogRef.value.close(data)
+  }
+
+</script>
+
+<style scoped>
+
+</style>

package/Page.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="min-h-screen flex flex-column surface-ground">
+    <slot name="navbar"></slot>
+    <ConfirmPopup v-if="isMounted" />
+    <Toast v-if="isMounted" />
+    <DynamicDialog v-if="isMounted" />
+
+    <div class="relative h-0 w-full">
+      <ProgressBar v-if="loading || working" mode="indeterminate" class="absolute w-full" style="height: .2em" />
+    </div>
+    <div v-if="pageType == 'simple'" class="p-5 flex flex-column flex-auto align-items-center">
+      <slot></slot>
+    </div>
+    <div v-if="pageType == 'wide'">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import ProgressBar from "primevue/progressbar"
+
+  import ConfirmPopup from 'primevue/confirmpopup'
+  import Toast from 'primevue/toast'
+  import DynamicDialog from 'primevue/dynamicdialog';
+
+  import { onMounted, ref } from 'vue'
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  const { working, loading } = defineProps({
+    working: {
+      type: Boolean
+    },
+    loading: {
+      type: Boolean
+    }
+  })
+
+  console.log("SETUP PAGE!!!")
+
+  import { computed } from 'vue'
+  import { useRoute } from 'vue-router'
+  const route = useRoute()
+
+  const pageType = computed(() => route.meta.pageType ?? 'simple' )
+
+</script>

package/ViewRoot.vue

@@ -0,0 +1,79 @@
+<template>
+  <router-view v-slot="{ route, Component }">
+    <template v-if="route?.meta?.raw">
+      <suspense>
+        <component :is="Component" />
+      </suspense>
+    </template>
+    <loading-zone v-else suspense @isLoading="l => loading = l">
+      <template v-slot:loading>
+        <div class="fixed w-full h-full flex align-items-center justify-content-center top-0 left-0">
+          <ProgressSpinner animationDuration=".5s"/>
+        </div>
+      </template>
+      <template v-slot:default="{ isLoading }">
+        <page :loading="loading" :working="working">
+          <template #navbar>
+            <slot name="navbar"></slot>
+          </template>
+          <working-zone @isWorking="w => working = w">
+            <template v-slot:working>
+              <div class="fixed w-full h-full flex align-items-center justify-content-center top-0 left-0">
+                <ProgressSpinner animationDuration=".5s"/>
+              </div>
+            </template>
+            <template v-slot:default="{ isWorking }">
+              <component :is="Component"
+                         :style="isWorking || isLoading ? 'filter: blur(4px)' : ''"
+                         class="working-blur" />
+            </template>
+          </working-zone>
+        </page>
+      </template>
+    </loading-zone>
+  </router-view>
+</template>
+
+<script setup>
+
+  import 'primevue/resources/primevue.min.css'
+  import 'primeflex/primeflex.css'
+  import 'primeicons/primeicons.css'
+
+  import ProgressSpinner from 'primevue/progressspinner'
+
+  import { useMeta } from 'vue-meta'
+  import Page from "./Page.vue"
+
+  const { meta } = useMeta({
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport',
+        content: "user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1," +
+            " width=device-width, viewport-fit=cover" }
+    ]
+  })
+
+  import { ref } from 'vue'
+  const working = ref(false)
+  const loading = ref(false)
+
+</script>
+
+<style>
+
+  body {
+    margin: 0;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: var(--surface-a);
+    font-family: var(--font-family);
+    font-weight: 400;
+    color: var(--text-color);
+  }
+  .working-blur {
+    transition: filter 0.3s;
+  }
+
+</style>

package/client-entry.js

@@ -0,0 +1,32 @@
+import { clientApi } from '@live-change/vue3-ssr/clientApi.js'
+
+import {
+  createSharedElementDirective,
+  SharedElementRouteGuard
+} from 'v-shared-element'
+
+import { createApp } from "./main.js"
+
+export function clientEntry(App, createRouter) {
+
+  const windowId = window.__WINDOW_ID__
+  console.error("CLIENT WINDOW ID", windowId)
+
+  window.api = clientApi({
+    use: [],
+    windowId
+  })
+
+  const { app, router } = createApp(api, App, createRouter)
+
+  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/index.js

@@ -0,0 +1,3 @@
+import ComponentDialog from "./ComponentDialog.vue"
+
+export { ComponentDialog }

package/main.js

@@ -0,0 +1,62 @@
+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 ToastService from 'primevue/toastservice'
+import { PrimeVueToastSymbol } from 'primevue/usetoast'
+import DialogService from 'primevue/dialogservice'
+import { PrimeVueDialogSymbol } from 'primevue/usedialog'
+import StyleClass from 'primevue/styleclass'
+import Ripple from 'primevue/ripple'
+import BadgeDirective from 'primevue/badgedirective'
+
+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, App, createRouter) {
+  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.use(DialogService)
+  app.provide(PrimeVueDialogSymbol, app.config.globalProperties.$dialog)
+
+  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/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@live-change/frontend-base",
+  "version": "0.0.3",
+  "scripts": {
+    "memDev": "lcli memDev --enableSessions --initScript ./init.js --templatePath ../../base-frontend/index.html",
+    "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/user-service": "0.2.37",
+    "@live-change/password-authentication-service": "0.2.39",
+    "@live-change/secret-link-service": "0.2.39",
+    "@live-change/secret-code-service": "0.2.39",
+    "@live-change/security-frontend": "0.0.3",
+    "@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"
+  },
+  "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": ""
+}

package/server-entry.js

@@ -0,0 +1,64 @@
+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.js"
+
+function escapeHtml(unsafe) {
+  return unsafe
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+}
+
+export function serverEntry(App, createRouter) {
+  return async function({ url, dao, windowId }) {
+    const api = await serverApi(dao, {
+      use: [],
+      windowId
+    })
+
+    const { app, router } = createApp(api, App, createRouter)
+
+    app.directive('shared-element', {})
+
+    // 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/vite-config.js

@@ -0,0 +1,108 @@
+const { findFreePorts } = require("find-free-ports")
+const path = require('path')
+const vuePlugin = require('@vitejs/plugin-vue')
+const { visualizer } = require('rollup-plugin-visualizer')
+const viteImages = require('vite-plugin-vue-images')
+const viteCompression = require('vite-plugin-compression')
+const { searchForWorkspaceRoot } = require('vite')
+
+const ssrTransformCustomDir = () => {
+  return {
+    props: [],
+    needRuntime: true
+  }
+}
+
+module.exports = async ({ command, mode }) => ({
+  define: {
+    ENV_BASE_HREF: JSON.stringify(process.env.BASE_HREF || 'http://localhost:8001')
+  },
+  server: {
+    hmr: {
+      port: (await findFreePorts())[0]
+    },
+    fs: {
+      allow: [
+        searchForWorkspaceRoot(process.cwd()),
+        path.dirname(require.resolve('primeicons/package.json')),
+        path.dirname(require.resolve('@fortawesome/fontawesome-free/package.json'))
+      ]
+    }
+  },
+  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',
+      '@live-change/email-service',
+      '@live-change/password-authentication-service',
+      '@live-change/db-admin',
+      'vue3-scroll-border',
+    ]
+  },
+  optimizeDeps: {
+    include: [
+      '@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' }
+    ],
+  }
+})
+