Merge pull request #5 from nuxt-community/fix-title-and-required-version

fix: wait for title resolve, req nuxt 2.12+

Author: hecktarzuli

docs/content/en/index.md

@@ -29,4 +29,5 @@ LUX (which stands for Live User eXperience) gives you standard RUM (Real User Mo
 
 <list :items="features"></list>
 
-<alert type="warning">This module isn't currently compatible with `spa` mode or `ssr:false`</alert>
+<alert type="danger">Not compatible with `spa` mode or `ssr:false`.<br/> Nuxt 2.12.0+ is required. </alert>
+

examples/universal/layouts/default.vue

@@ -11,10 +11,9 @@
       Fetch
     </nuxt-link>
     |
-    <nuxt-link to="/i-am-not-found">
-      404
-    </nuxt-link>
-
+    <nuxt-link to="/blog/1">1</nuxt-link> |
+    <nuxt-link to="/blog/2">2</nuxt-link> |
+    <nuxt-link to="/blog/3">3</nuxt-link>
     <nuxt />
   </div>
 </template>

examples/universal/pages/blog/_id.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        {{ $route.params.id }}
+    </div>
+</template>
+<script>
+export default {
+  
+   head(){
+        return {
+            title: 'Blog Post # ' + this.$route.params.id,
+  
+        }
+    },
+    mounted(){
+        this.$lux.pageLoading(false)
+    },
+   
+}
+</script>

lib/module.js

@@ -1,11 +1,19 @@
 const { resolve } = require('path')
 const { readFileSync } = require('fs')
+const semver = require('semver')
 
 module.exports = function (moduleOptions) {
   if (this.options.mode === 'spa') {
     throw new Error('Speedcurve LUX Module - SPA Mode is not supported.')
   }
 
+  const currentVersion = semver.coerce(this.nuxt.constructor.version)
+  const requiredVersion = semver.coerce('2.12.0')
+
+  if (semver.lt(currentVersion, requiredVersion)) {
+    throw new Error('Speedcurve LUX Module - Due to a memory leak, Nuxt 2.12.0 or higher is required.')
+  }
+
   const defaults = {
     debugMode: false, // LUX debug mode
     enabled: !this.options.dev, // don't poison metrics from devs

lib/templates/plugin.js

@@ -13,16 +13,30 @@ export default function (ctx, inject) {
   const options = Object.assign(buildOptions, runtimeOptions)
   let ignoreLUX = false
   let isFirstHit = null
+  let label = '' // undocumented - we actually need to default/update the label ourselves for SPAs
 
   ctx.$lux = {
     // If logFirstHit is true, then let LUX log the first hit and ignore it if user tries to do it themselves
     pageLoading(isLoading = true) {
       if (process.server || !window.LUX || (isFirstHit && options.logFirstHit) || ignoreLUX) { return }
-      if (isLoading) { window.LUX.init() } else { window.LUX.send() }
+      if (isLoading) { 
+        window.LUX.init()
+        label = ''
+      } else {         
+        // https://github.com/nuxt/nuxt.js/discussions/8004
+        // LUX doesn't have a way to stop the timer and not send the beacon so we'll try to wait to get the resolved title        
+        // Ideally SC LUX would let us start/stop, wait..update label.. then send whenever we wanted vs hard-coding send() and stop() as 1 function.  Then I'd make this 1s and call it good.
+        // 20ms may not be good enough for those using transitions (not sure), but we don't really have a better choice right now.
+        setTimeout(() => {
+          window.LUX.label = label || document.title
+          window.LUX.send()
+        }, 20)
+        
+      }
     },
-    label(label) {
-      if (process.server || !window.LUX || !label || ignoreLUX) { return }
-      window.LUX.label = label
+    label(newLabel) {
+      if (process.server || !window.LUX || !newLabel || ignoreLUX) { return }      
+      label = newLabel
     },
     addData(name, value) {
       if (process.server || !window.LUX || !name || typeof value === 'undefined' || ignoreLUX) { return }

package.json

@@ -24,15 +24,17 @@
     "test-static": "nuxt generate examples/universal",
     "test-universal": "nuxt build examples/universal && nuxt start examples/universal"
   },
-  "dependencies": {},
+  "dependencies": {
+    "semver": "^7.3.2"
+  },
   "devDependencies": {
     "@babel/core": "latest",
     "@babel/preset-env": "latest",
     "@commitlint/cli": "latest",
     "@commitlint/config-conventional": "latest",
+    "@nuxt/content-theme-docs": "^0.5.3",
     "@nuxtjs/eslint-config": "latest",
     "@nuxtjs/module-test-utils": "latest",
-    "@nuxt/content-theme-docs": "^0.5.3",
     "babel-eslint": "latest",
     "babel-jest": "latest",
     "eslint": "latest",