@live-change/frontend-base 0.2.49 → 0.2.51

package/main.js

@@ -16,6 +16,7 @@ import Ripple from 'primevue/ripple'
 import BadgeDirective from 'primevue/badgedirective'
 import VueLazyLoad from 'vue3-lazyload'
 import { createI18n } from 'vue-i18n'
+import { createHead } from "@vueuse/head"
 
 // 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
@@ -73,11 +74,14 @@ export async function createApp(config, api, App, createRouter, host, headers, r
     // options...
   })
 
-  const meta = createMetaManager({
+  const meta = createMetaManager({ // TODO: remove this after switching to unhead
     isSSR
   })
   app.use(meta)
 
+  const head = createHead()
+  app.use(head)
+
   app.directive("focus", {
     mounted: (el) => el.focus(),
     updated: (el, binding) => app.nextTick(() => el.focus())
@@ -95,5 +99,5 @@ export async function createApp(config, api, App, createRouter, host, headers, r
   console.log("I18N MESSAGES", config.i18nMessages)
   app.use(i18n)
 
-  return { app, router }
+  return { app, router, head }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-base",
-  "version": "0.2.49",
+  "version": "0.2.51",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --templatePath ../../base-frontend/index.html",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -20,25 +20,27 @@
     "debug": "node --inspect-brk server"
   },
   "dependencies": {
-    "@live-change/cli": "0.7.25",
-    "@live-change/dao": "0.5.19",
-    "@live-change/dao-message": "0.5.19",
-    "@live-change/dao-sockjs": "0.5.19",
-    "@live-change/dao-vue3": "0.5.19",
-    "@live-change/dao-websocket": "0.5.19",
-    "@live-change/email-service": "0.3.24",
-    "@live-change/password-authentication-service": "0.3.24",
-    "@live-change/secret-code-service": "0.3.24",
-    "@live-change/secret-link-service": "0.3.24",
-    "@live-change/security-frontend": "^0.2.49",
-    "@live-change/session-service": "0.3.24",
-    "@live-change/user-service": "0.3.24",
-    "@live-change/vue3-components": "0.2.26",
-    "@live-change/vue3-ssr": "0.2.26",
+    "@live-change/cli": "0.7.28",
+    "@live-change/dao": "0.5.20",
+    "@live-change/dao-message": "0.5.20",
+    "@live-change/dao-sockjs": "0.5.20",
+    "@live-change/dao-vue3": "0.5.20",
+    "@live-change/dao-websocket": "0.5.20",
+    "@live-change/email-service": "0.3.28",
+    "@live-change/password-authentication-service": "0.3.28",
+    "@live-change/secret-code-service": "0.3.28",
+    "@live-change/secret-link-service": "0.3.28",
+    "@live-change/security-frontend": "^0.2.51",
+    "@live-change/session-service": "0.3.28",
+    "@live-change/user-service": "0.3.28",
+    "@live-change/vue3-components": "0.2.28",
+    "@live-change/vue3-ssr": "0.2.28",
+    "@unhead/ssr": "^1.1.29",
     "@vitejs/plugin-vue": "^2.3.1",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/compiler-sfc": "^3.2.37",
     "@vueuse/core": "^9.1.0",
+    "@vueuse/head": "^1.1.26",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
@@ -50,6 +52,7 @@
     "rollup-plugin-visualizer": "5.6.0",
     "serialize-javascript": "^6.0.0",
     "serve-static": "^1.15.0",
+    "unhead": "^1.1.29",
     "v-shared-element": "3.1.0",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-vue-images": "^0.6.1",
@@ -60,7 +63,7 @@
     "vue3-scroll-border": "0.1.5"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "0.7.25",
+    "@live-change/codeceptjs-helper": "0.7.28",
     "@wdio/selenium-standalone-service": "^7.20.8",
     "codeceptjs": "^3.3.4",
     "generate-password": "1.7.0",
@@ -72,5 +75,5 @@
   "author": "",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "a56fad95df95822fea9932ea0a003f450a31e38e"
+  "gitHead": "0fd9d72bb8a5fd8402244756d5ff023028dfcb6d"
 }

package/server-entry.js

@@ -4,7 +4,9 @@ import { renderMetaToString } from 'vue-meta/ssr'
 import { serverApi } from '@live-change/vue3-ssr/serverApi.js'
 
 import { createApp } from "./main.js"
-import { setTime } from "./time.js";
+import { setTime } from "./time.js"
+
+import { renderHeadToString } from "@vueuse/head"
 
 function escapeHtml(unsafe) {
   return (''+unsafe)
@@ -33,7 +35,7 @@ export function serverEntry(App, createRouter, config = {}) {
       }
     }
 
-    const { app, router } = await createApp(
+    const { app, router, head } = await createApp(
       config, api, App, createRouter, host, headers, response, url
     )
 
@@ -59,20 +61,23 @@ export function serverEntry(App, createRouter, config = {}) {
     // 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)
-    await renderMetaToString(app, ctx)
-    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(' ')}>`)),
-      ...((activeMeta.link || []).map(meta => `<link ${Object.keys(meta).map(
-        key => `${escapeHtml(key)}="${escapeHtml(meta[key])}"`
-      ).join(' ')}>`))
-    ].join('\n')
-
-    return {html, data, meta: ctx.teleports, modules: ctx.modules, response}
+    const renderedHead = await renderHeadToString(head)
+    console.log("HEAD", renderedHead)
+
+    const hed=  {
+      headTags: '<title>IPI Swap</title>\n' +
+      '<link rel="icon" href="/icon/icon256.png" type="image/png" sizes="256x256">\n' +
+      '<link rel="icon" href="/icon/icon128.png" type="image/png" sizes="128x128">\n' +
+      '<link rel="icon" href="/icon/icon64.png" type="image/png" sizes="64x64">\n' +
+      '<link rel="icon" href="/icon/icon32.png" type="image/png" sizes="32x32">\n' +
+      '<link rel="icon" href="/icon/icon16.png" type="image/png" sizes="16x16">',
+        bodyTags: '',
+        bodyTagsOpen: '',
+        htmlAttrs: ' lang="en" amp=""',
+        bodyAttrs: ''
+    }
+
+
+    return {html, data, meta: renderedHead, modules: ctx.modules, response}
   }
 }