Share pagelock state across multiple instances

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramstack/pagelock",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A simple utility for managing page scroll locking. No external dependencies.",
   "type": "module",
   "author": "rameel <rameel-b@hotmail.com>",

rollup.config.mjs → rollup.config.js

@@ -1,3 +1,4 @@
+import path from "node:path";
 import resolve from "@rollup/plugin-node-resolve";
 import size from "rollup-plugin-bundle-size";
 import strip_comments from "strip-comments";
@@ -25,7 +26,8 @@ const plugins = [
     resolve(),
     typescript(),
     size(),
-    remove_comments()
+    remove_comments(),
+    trim_ws()
 ];
 
 export default [{
@@ -54,11 +56,23 @@ export default [{
 
 function remove_comments() {
     return {
-        name: "strip",
+        name: "remove_comments",
         transform(source) {
             return {
                 code: strip_comments(source)
             };
         }
     };
 }
+
+function trim_ws() {
+    return {
+        name: "trim_ws",
+        generateBundle(options, bundle) {
+            if (options.file.match(/\.js$/)) {
+                const key = path.basename(options.file);
+                bundle[key].code = bundle[key].code.trim();
+            }
+        }
+    };
+}

src/pagelock.ts

@@ -1,12 +1,16 @@
-let locks: Array<number> = [];
-let sequence: number = 0;
-
-let width: string;
+interface ExtendedDocument extends Document {
+    _r_pagelock?: {
+        locks: number[];
+        sequence: number;
+        width?: string | null;
+        props?: {
+            overflow: string;
+            paddingRight: string
+        } | null;
+    };
+}
 
-let props: {
-    overflow: string,
-    paddingRight: string
-} | null | undefined;
+const storage = (document as ExtendedDocument)._r_pagelock ??= { locks: [], sequence: 0 };
 
 /**
  * Locks the page scroll. Subsequent calls to the function add to the queue of lock holders.
@@ -18,30 +22,31 @@ let props: {
  * without affecting the others in the queue.
  */
 export function pagelock(): () => void {
-    if (!props) {
+    if (!storage.props) {
         const {
             offsetHeight,
             clientHeight
         } = document.documentElement;
 
         const style = document.body.style;
-        props = {
+
+        storage.props = {
             overflow: style.overflow,
             paddingRight: style.paddingRight
         };
 
         if (offsetHeight > clientHeight) {
-            style.paddingRight = scrollbarWidth();
+            style.paddingRight = scrollbar_width();
         }
 
         style.overflow = "hidden";
     }
 
-    const seq = ++sequence;
-    locks.push(seq);
+    const seq = ++storage.sequence;
+    storage.locks.push(seq);
 
     return () => {
-        locks = locks.filter(v => v !== seq);
+        storage.locks = storage.locks.filter(v => v !== seq);
         restore();
     };
 }
@@ -54,26 +59,26 @@ export function pagelock(): () => void {
  * Otherwise, only the most recent lock is released. Defaults to `false`.
  */
 export function pageunlock(force?: boolean): void {
-    force ? locks = [] : locks.pop();
+    force ? storage.locks = [] : storage.locks.pop();
     restore();
 }
 
 function restore(): void {
-    if (props && !locks.length) {
-        Object.assign(document.body.style, props);
-        props = null;
+    if (storage.props && !storage.locks.length) {
+        Object.assign(document.body.style, storage.props);
+        storage.props = null;
     }
 }
 
-function scrollbarWidth(): string {
-    if (!width) {
+function scrollbar_width(): string {
+    if (!storage.width) {
         const outer = document.createElement("div");
         outer.innerHTML = "<div style='width:80px;height:80px;position:absolute;left:-90px;top:-90px;overflow:auto'><div style='height:99px'></div></div>";
         const inner = outer.firstChild as HTMLDivElement;
         document.body.appendChild(outer);
-        width = (inner.offsetWidth - inner.clientWidth) + "px";
+        storage.width = (inner.offsetWidth - inner.clientWidth) + "px";
         document.body.removeChild(outer);
     }
 
-    return width;
+    return storage.width;
 }

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "module": "ES2020",
+    "target": "es2022",
+    "module": "es2022",
     "strict": true,
     "declaration": true,
     "outDir": "./dist",