Merge pull request #1174 from basics/next

update

Author: ThornWalli

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Project Changelog
 
+## [3.1.7-next.2](https://github.com/basics/nuxt-booster/compare/v3.1.7-next.1...v3.1.7-next.2) (2024-12-16)
+
+
+### Bug Fixes
+
+* **entry:** added timeout for video check ([8ae386a](https://github.com/basics/nuxt-booster/commit/8ae386a2992ab94f3dd2a840ae6b9223ea70bd4a))
+* **entry:** update visiblity check ([962bf07](https://github.com/basics/nuxt-booster/commit/962bf073be5162cbade22e7eb5f9e5734ed17889))
+
+## [3.1.7-next.1](https://github.com/basics/nuxt-booster/compare/v3.1.6...v3.1.7-next.1) (2024-11-01)
+
+
+### Bug Fixes
+
+* **node-cache:** removed `node-cache` ([a3afce2](https://github.com/basics/nuxt-booster/commit/a3afce206b74d278a785a757b773b2644e0147e4))
+
 ## [3.1.6](https://github.com/basics/nuxt-booster/compare/v3.1.5...v3.1.6) (2024-09-17)
 
 

build.config.js

@@ -6,7 +6,6 @@ export default {
     'change-case',
     'hash-sum',
     'probe-image-size',
-    'node-cache',
 
     // package
     '@nuxt/image',

docs/src/guide/options.md

@@ -274,22 +274,6 @@ Global option for the [`IntersectionObserver`](https://developer.mozilla.org/en-
  | `component` | `String` | yes      | [`rootMargin`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) value for [`BoosterHydrate`](/guide/usage#import-components).                  | `0%`    |
  | `asset`     | `String` | yes      | [`rootMargin`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) value for all static ressources (`v-font`, `BoosterPicture` & `BoosterImage`). | `0%`    |
 
-## `imageSizeCache`
-
-- Type: `Object`
-  - Default: `{ stdTTL: 3600, checkperiod: 1800 }`
-
-The `imageSizeCache` option is used to cache the image sizes of the `BoosterImage` and `BoosterPicture` components. This reduces the number of requests to the server and speeds up the loading process.
-
-Learn more about the options in the [node-cache documentation](https://www.npmjs.com/package/node-cache#options).
-
-````js
-{
-  stdTTL: 3600,
-  checkperiod: 1800
-}
-````
-
 ## `disableNuxtFontaine`
 
 - Type: `Boolean`

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-booster",
-  "version": "3.1.6",
+  "version": "3.1.7-next.2",
   "description": "Nuxt Booster takes over the Lighthouse performance optimization of your generated website.",
   "license": "MIT",
   "author": "Stephan Gerbeth",
@@ -61,7 +61,6 @@
     "htmlparser2": "9.1.0",
     "image-meta": "0.2.1",
     "mime-types": "2.1.35",
-    "node-cache": "5.1.2",
     "pathe": "1.1.2",
     "sort-css-media-queries": "2.4.0"
   },

package.json

@@ -120,8 +120,7 @@ async function addBuildTemplates(nuxt, options) {
           targetFormats: options.targetFormats,
           crossorigin: getCrossorigin(options.crossorigin),
           supportedBrowserDetector,
-          loader: options.loader,
-          imageSizeCache: options.imageSizeCache
+          loader: options.loader
         });
       },
       filename: MODULE_NAME + `/plugin.${mode}.js`,

src/module.js

@@ -72,6 +72,18 @@ export const hasBatteryPerformanceIssue = async videoBlob => {
   }
 };
 
+export const waitForVisibilty = () => {
+  const { promise, resolve } = Promise.withResolvers();
+  if (document.visibilityState === 'hidden') {
+    document.addEventListener('visibilitychange', resolve, {
+      once: true
+    });
+  } else {
+    resolve();
+  }
+  return promise;
+};
+
 /**
  * Checks if battery still has enough energy.
  * This check is for Chrome and all other browsers that support this setting.
@@ -99,7 +111,13 @@ export const canVideoPlay = async blob => {
     video.muted = true;
     video.playsinline = true;
     video.src = objectUrl;
-    await video.play();
+
+    const { resolve, promise } = Promise.withResolvers();
+    const timeout = window.setTimeout(resolve, 500);
+
+    await Promise.race([video.play(), promise]);
+    window.clearTimeout(timeout);
+
     URL.revokeObjectURL(objectUrl);
   } catch (error) {
     URL.revokeObjectURL(objectUrl);

src/runtime/utils/entry.js

@@ -72,22 +72,8 @@ export const getDefaultRunOptions = () => {
   return { maxTime: 1000, threshold: 0.65 };
 };
 
-export const waitForVisibleDocument = () => {
-  return new Promise(resolve => {
-    if (document.visibilityState === 'hidden') {
-      document.addEventListener('visibilitychange', () => resolve(), {
-        once: true
-      });
-    } else {
-      resolve();
-    }
-  });
-};
-
 export const run = async (options = {}) => {
   if (window.requestIdleCallback) {
-    await waitForVisibleDocument();
-
     const { maxTime, threshold } = { ...getDefaultRunOptions(), ...options };
     const fpsObserver = new CallbackObserver(rafTime);
     const idleObserver = new CallbackObserver(idleTime);

src/runtime/utils/performance.js

@@ -2,7 +2,7 @@ export default options => {
   let code = `import { ${
     options.performanceCheck ? `run, ` : ``
   }hasSufficientPerformance, setup } from '#booster/utils/performance';
-import { triggerRunCallback, observeBoosterButton, setupBoosterLayer, updateBoosterLayerMessage, initReducedView, hasBatteryPerformanceIssue, deprecationWarningButtonSelector } from '#booster/utils/entry';
+import { waitForVisibilty, triggerRunCallback, observeBoosterButton, setupBoosterLayer, updateBoosterLayerMessage, initReducedView, hasBatteryPerformanceIssue, deprecationWarningButtonSelector } from '#booster/utils/entry';
 import Deferred from '#booster/classes/Deferred';
 import { isSupportedBrowser } from '#booster/utils/browser';
 import {video as videoBlob} from './blobs.mjs';
@@ -52,6 +52,8 @@ function client () {
       deferred.resolve();
     }
 
+    await waitForVisibilty();
+
     document.documentElement.classList.remove('nuxt-booster-reduced-view');
 
     `;

src/tmpl/entry.tmpl.js

@@ -6,12 +6,6 @@ import FontList from '#booster/classes/FontList';
 import { useNuxtApp, useBoosterHead, useRequestHeaders, useRequestURL, useRequestFetch } from '#imports';
 import './fonts.css';`;
 
-  if (options.mode !== 'client') {
-    code += `
-import NodeCache from 'node-cache';
-`;
-  }
-
   code += `
 
 export default defineNuxtPlugin({
@@ -54,15 +48,9 @@ export default defineNuxtPlugin({
 
 `;
 
-  if (options.mode === 'client') {
-    code += `
-const dimensionCache = new Map();`;
-  } else {
-    code += `
-const dimensionCache = new NodeCache({  useClones: false, ...${JSON.stringify(options.imageSizeCache)} });`;
-  }
-
   code += `
+const dimensionCache = new Map();
+
 async function getImageSize (src) {
 `;