@live-change/frontend-base 0.2.8 → 0.2.10

package/client-entry.js

@@ -7,7 +7,7 @@ import {
 
 import { createApp } from "./main.js"
 
-export function clientEntry(App, createRouter) {
+export async function clientEntry(App, createRouter, config = {}) {
 
   const windowId = window.__WINDOW_ID__
   console.error("CLIENT WINDOW ID", windowId)
@@ -18,8 +18,10 @@ export function clientEntry(App, createRouter) {
   })
 
   const host = document.location.host
-
-  const { app, router } = createApp(api, App, createRouter, host, false)
+  const url = document.location.pathname + document.location.search
+  const { app, router } = await createApp(
+    config, api, App, createRouter, host, null, null, url
+  )
 
   app.use(createSharedElementDirective())
   router.beforeEach(SharedElementRouteGuard)

package/main.js

@@ -15,11 +15,12 @@ import StyleClass from 'primevue/styleclass'
 import Ripple from 'primevue/ripple'
 import BadgeDirective from 'primevue/badgedirective'
 import VueLazyLoad from 'vue3-lazyload'
+import { createI18n } from 'vue-i18n'
 
 // 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, host, response) {
+export async function createApp(config, api, App, createRouter, host, headers, response, url) {
   const isSSR = response !== undefined
   const app = createSSRApp(App)
   app.config.devtools = true
@@ -74,5 +75,22 @@ export function createApp(api, App, createRouter, host, response) {
   })
   app.use(meta)
 
+  app.directive("focus", {
+    mounted: (el) => el.focus(),
+    updated: (el, binding) => value && app.nextTick(() => el.focus())
+  })
+
+  const defaultLocale = config.defaultLocale || 'en'
+  const i18n = createI18n({
+    legacy: false,
+    locale: config.localeSelector   // TODO: read stored language
+      ? await config.localeSelector({ api, host, url, headers })
+      : defaultLocale,
+    fallbackLocale: config.fallbackLocale || defaultLocale,
+    messages: config.i18nMessages || {}
+  })
+  console.log("I18N MESSAGES", config.i18nMessages)
+  app.use(i18n)
+
   return { app, router }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-base",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --templatePath ../../base-frontend/index.html",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -20,17 +20,17 @@
     "debug": "node --inspect-brk server"
   },
   "dependencies": {
-    "@live-change/cli": "0.7.4",
+    "@live-change/cli": "0.7.5",
     "@live-change/dao": "0.5.8",
     "@live-change/dao-vue3": "0.5.8",
     "@live-change/dao-websocket": "0.5.8",
-    "@live-change/email-service": "0.3.2",
-    "@live-change/password-authentication-service": "0.3.2",
-    "@live-change/secret-code-service": "0.3.2",
-    "@live-change/secret-link-service": "0.3.2",
-    "@live-change/security-frontend": "^0.2.8",
-    "@live-change/session-service": "0.3.2",
-    "@live-change/user-service": "0.3.2",
+    "@live-change/email-service": "0.3.3",
+    "@live-change/password-authentication-service": "0.3.3",
+    "@live-change/secret-code-service": "0.3.3",
+    "@live-change/secret-link-service": "0.3.3",
+    "@live-change/security-frontend": "^0.2.10",
+    "@live-change/session-service": "0.3.3",
+    "@live-change/user-service": "0.3.3",
     "@live-change/vue3-components": "0.2.16",
     "@live-change/vue3-ssr": "0.2.16",
     "@vitejs/plugin-vue": "^2.3.1",
@@ -51,13 +51,14 @@
     "v-shared-element": "3.1.0",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-vue-images": "^0.6.1",
+    "vue-i18n": "^9.2.2",
     "vue-meta": "^3.0.0-alpha.9",
     "vue-router": "^4.1.3",
     "vue3-lazyload": "0.2.5-beta",
     "vue3-scroll-border": "0.1.2"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "0.7.4",
+    "@live-change/codeceptjs-helper": "0.7.5",
     "@wdio/selenium-standalone-service": "^7.20.8",
     "codeceptjs": "^3.3.4",
     "generate-password": "1.7.0",
@@ -69,5 +70,5 @@
   "author": "",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "72bd46680370e7804b168fec5dde28de205487e0"
+  "gitHead": "7d4c56cc610d692df963c3916411ceb46663b344"
 }

package/server-entry.js

@@ -6,7 +6,7 @@ import { serverApi } from '@live-change/vue3-ssr/serverApi.js'
 import { createApp } from "./main.js"
 
 function escapeHtml(unsafe) {
-  return unsafe
+  return (''+unsafe)
       .replace(/&/g, "&")
       .replace(/</g, "&lt;")
       .replace(/>/g, "&gt;")
@@ -14,8 +14,9 @@ function escapeHtml(unsafe) {
       .replace(/'/g, "&#039;");
 }
 
-export function serverEntry(App, createRouter) {
-  return async function({ url, host, dao, windowId }) {
+export function serverEntry(App, createRouter, config = {}) {
+  return async function({ url, headers, dao, windowId }) {
+    const host = headers['host']
     console.error('URL', host, url)
     const api = await serverApi(dao, {
       use: [],
@@ -29,7 +30,9 @@ export function serverEntry(App, createRouter) {
       }
     }
 
-    const { app, router } = createApp(api, App, createRouter, host, response)
+    const { app, router } = await createApp(
+      config, api, App, createRouter, host, headers, response, url
+    )
 
     app.directive('shared-element', {})
 
@@ -56,6 +59,7 @@ export function serverEntry(App, createRouter) {
 
     const metaManager = app.config.globalProperties.$metaManager
     const activeMeta = metaManager.target.context.active
+    console.log("ACTIVE META", activeMeta)
     ctx.teleports.head = [
       ...(activeMeta.title ? [`<title data-vm-ssr="true">${escapeHtml(activeMeta.title)}</title>`] : []),
       ...((activeMeta.meta || []).map(meta => `<meta ${Object.keys(meta).map(