smart-load-manager 1.0.0

package/dist/index.mjs

@@ -0,0 +1,385 @@
+import { bind, memoize } from '@exadel/esl/modules/esl-utils/decorators.js';
+import { createDeferred, promisifyTimeout, promisifyEvent } from '@exadel/esl/modules/esl-utils/async.js';
+import { setAttr, loadScript } from '@exadel/esl/modules/esl-utils/dom.js';
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = __getOwnPropDesc$1(target, key) ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$2(target, key, result);
+  return result;
+};
+var __async$2 = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+function applyEarlyHints(options) {
+  const link = document.createElement("link");
+  link.rel = options.rel;
+  options.attrs && Object.entries(options.attrs).forEach(([name, value]) => setAttr(link, name, value));
+  link.href = options.href;
+  document.head.appendChild(link);
+}
+class SmartService {
+  constructor(_config) {
+    this._config = _config;
+    this._loaded = false;
+    this._mutex = Promise.resolve();
+  }
+  static config(options) {
+    if (options) this._config = __spreadValues$1(__spreadValues$1({}, this._config), options);
+    return this._config;
+  }
+  /** Create a new instance of SmartService */
+  static create(options) {
+    return new this(options);
+  }
+  /** Get the singleton instance of SmartService */
+  static get instance() {
+    if (!this._instance) {
+      this._instance = new this(this._config);
+    }
+    return this._instance;
+  }
+  /** Get the load method of the singleton instance */
+  static get load() {
+    return this.instance.load;
+  }
+  /** Setup Early Hints for the service */
+  static setupEarlyHints(options) {
+    return () => {
+      setTimeout(() => options.forEach(applyEarlyHints), 1);
+      return Promise.resolve();
+    };
+  }
+  /** Get the preload method of the singleton instance */
+  static get preload() {
+    return this.instance.preload;
+  }
+  /** Check if the service is loaded */
+  get isLoaded() {
+    return this._loaded;
+  }
+  /** Get the current mutex promise */
+  get mutex() {
+    return this._mutex;
+  }
+  /** Set a new mutex promise */
+  set mutex(value) {
+    this._debug("new Mutex: ", this._config.name, value);
+    this._mutex = value;
+  }
+  load() {
+    return __async$2(this, null, function* () {
+      this._debug("Service load() enter: ", this._config.name, this);
+      if (!this._state) {
+        this._state = this._loadTask();
+      }
+      return this._state;
+    });
+  }
+  preload() {
+    return __async$2(this, null, function* () {
+      this._debug("Service preload(): ", this._config.name);
+      const { url, attrs } = this._config;
+      if (url) setTimeout(applyEarlyHints.bind(null, { rel: "preload", href: url, attrs: __spreadValues$1({ as: "script" }, attrs) }), 1);
+      return Promise.resolve();
+    });
+  }
+  _loadTask() {
+    return __async$2(this, null, function* () {
+      try {
+        yield this._mutex;
+        this._debug("Service loading started: ", this._config.name);
+        if (!this._config.name) throw new Error("Service name is not specified");
+        if (!this._config.url) throw new Error("Service URL is not specified");
+        const id = (this._config.name || "").replace(/\s+/g, "").toLowerCase();
+        yield loadScript(`smart-${id}-script`, this._config.url, this._config.attrs);
+        this._onLoadScript();
+        return true;
+      } catch (e) {
+        this._onFailedScript(e);
+        return Promise.reject(false);
+      }
+    });
+  }
+  _onLoadScript() {
+    this._debug("Service script loaded: ", this._config.name);
+    this._loaded = true;
+  }
+  _onFailedScript(e) {
+    console.error(`Failed to load ${this._config.name} script`, e instanceof Error ? `: ${e.message}` : "");
+  }
+  _debug(...args) {
+    if (!this._config.debug) return;
+    console.log(...args);
+  }
+}
+SmartService._config = {
+  name: "service",
+  debug: false
+};
+__decorateClass$1([
+  bind
+], SmartService.prototype, "load");
+__decorateClass$1([
+  bind
+], SmartService.prototype, "preload");
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = __getOwnPropDesc(target, key) ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$1(target, key, result);
+  return result;
+};
+var __async$1 = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+function onReadyState(readyPredicate) {
+  return new Promise((resolve) => {
+    if (readyPredicate()) {
+      resolve();
+    } else {
+      const handler = () => {
+        if (readyPredicate()) {
+          document.removeEventListener("readystatechange", handler);
+          resolve();
+        }
+      };
+      document.addEventListener("readystatechange", handler);
+    }
+  });
+}
+class SmartLoad {
+  static defaultMutex() {
+    return this.createMutex(this.now);
+  }
+  static now() {
+    return Promise.resolve();
+  }
+  static onLoaded() {
+    return onReadyState(() => document.readyState !== "loading");
+  }
+  static onComplete() {
+    return onReadyState(() => document.readyState === "complete");
+  }
+  static createMutex(previousTask) {
+    return new Promise((resolve) => {
+      (() => __async$1(this, null, function* () {
+        try {
+          yield this._whenStarted.promise;
+          yield previousTask();
+        } catch (e) {
+        } finally {
+          resolve();
+        }
+      }))();
+    });
+  }
+  /** Queue a service to be loaded after the given task */
+  static queue(service, after = this.defaultMutex.bind(this)) {
+    const serviceInstance = service instanceof SmartService ? service : service.instance;
+    serviceInstance.mutex = this.createMutex(after);
+    serviceInstance.load().catch(() => void 0);
+  }
+  /** Start the smart loading process */
+  static start() {
+    this._whenStarted.resolve();
+  }
+}
+SmartLoad._whenStarted = createDeferred();
+__decorateClass([
+  memoize()
+], SmartLoad, "defaultMutex");
+__decorateClass([
+  memoize()
+], SmartLoad, "now");
+__decorateClass([
+  memoize()
+], SmartLoad, "onLoaded");
+__decorateClass([
+  memoize()
+], SmartLoad, "onComplete");
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const IDLE_THRESHOLD_DURATION = 46.6;
+const IDLE_THRESHOLD_RATIO = 0.9;
+const IDLE_TIMEOUT = 1e4;
+function promisifyIdle(options = {}) {
+  var _a, _b;
+  const idleThresholdRatio = ((_a = options.thresholds) == null ? void 0 : _a.ratio) || IDLE_THRESHOLD_RATIO;
+  const idleThresholdDuration = ((_b = options.thresholds) == null ? void 0 : _b.duration) || IDLE_THRESHOLD_DURATION;
+  const idleTimeout = options.timeout || IDLE_TIMEOUT;
+  const { debug, signal } = options;
+  debug && performance.mark("idle.S");
+  return new Promise((resolve, reject) => {
+    const start = performance.now();
+    let previousFrameEnd = start;
+    const log = [];
+    const last3 = [0, 0, 0];
+    function finish(withResolve, reason) {
+      if (debug) {
+        console.table(log);
+        console.log(`Idle has ${withResolve ? "reached" : "aborted"} after ${performance.now() - start}ms`);
+        performance.mark("idle.E");
+        performance.measure("idlePromisify", "idle.S", "idle.E");
+      }
+      return withResolve ? resolve(true) : reject(reason);
+    }
+    const cb = (deadline) => {
+      if (signal == null ? void 0 : signal.aborted) return finish(false, new Error("Rejected by abort signal"));
+      const allocated = deadline.timeRemaining();
+      const frameEnd = performance.now() + allocated;
+      const frameLength = frameEnd - previousFrameEnd;
+      const idleRatio = allocated / frameLength;
+      const timeout = Math.max(0, idleTimeout - (performance.now() - start));
+      const isBadFrame = frameLength < 15;
+      if (!isBadFrame) {
+        last3.splice(0, 1);
+        last3.push(idleRatio > idleThresholdRatio ? allocated : 0);
+      }
+      const isIdleNow = last3.reduce((acc, val) => acc + val, 0) > idleThresholdDuration;
+      debug && !isBadFrame && log.push([timeout, frameLength, allocated, idleRatio, idleRatio > idleThresholdRatio ? 1 : 0, last3.toString()]);
+      if (isIdleNow || deadline.didTimeout) return finish(true);
+      !isBadFrame && (previousFrameEnd = frameEnd);
+      requestIdleCallback(cb, { timeout });
+    };
+    requestIdleCallback(cb, { timeout: idleTimeout });
+  });
+}
+function asyncSeries(tasks) {
+  return __async(this, null, function* () {
+    for (const task of tasks) {
+      yield task().catch();
+    }
+  });
+}
+function waitAny(tasks, signal) {
+  return (abortSignal) => __async(null, null, function* () {
+    const activeSignal = signal != null ? signal : abortSignal;
+    if (activeSignal) {
+      yield Promise.race(tasks.map((task) => task(activeSignal)));
+      return;
+    }
+    const controller = new AbortController();
+    try {
+      yield Promise.race(tasks.map((task) => task(controller.signal)));
+    } finally {
+      controller.abort();
+    }
+  });
+}
+function waitTimeout(timeout) {
+  return () => __async(null, null, function* () {
+    return promisifyTimeout(timeout);
+  });
+}
+const USER_ACTIVITY_EVENTS = ["keydown", "mousemove", "pointerdown", "wheel"];
+function waitUserActivity() {
+  return (abortSignal) => __async(null, null, function* () {
+    yield waitAny(
+      USER_ACTIVITY_EVENTS.map((event) => (signal) => promisifyEvent(document, event, null, { passive: true, signal })),
+      abortSignal
+    )();
+  });
+}
+function waitIdle(options = {}) {
+  return (abortSignal) => __async(null, null, function* () {
+    return promisifyIdle(__spreadProps(__spreadValues({}, options), { signal: abortSignal }));
+  });
+}
+
+export { SmartLoad, SmartService, asyncSeries, promisifyIdle, waitAny, waitIdle, waitTimeout, waitUserActivity };

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "smart-load-manager",
+  "version": "1.0.0",
+  "description": "A service and add-on utilities for managing third-party service (e.g., AdSense) loading for your web application that help improve Core Web Vitals.",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts",
+  "exports": {
+    "require": {
+      "types": "./dist/index.d.cts",
+      "default": "./dist/index.cjs"
+    },
+    "import": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dshovchko/smart-services.git",
+    "directory": "packages/smart-load-manager"
+  },
+  "keywords": [
+    "loader",
+    "manager",
+    "queue",
+    "page-speed",
+    "performance",
+    "optimization",
+    "core-web-vitals"
+  ],
+  "author": "Dmytro Shovchko",
+  "license": "MIT",
+  "scripts": {
+    "clear": "rm -rf dist",
+    "build": "npm run clear && pkgroll",
+    "lint": "eslint \"src/**/*.ts\" --max-warnings 3",
+    "test": "npm run type-check && npm run lint && npm run test:run",
+    "test:run": "vitest run",
+    "test:watch": "vitest watch",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@exadel/esl": "^5.15.0"
+  }
+}