@symbo.ls/utils 3.1.2 → 3.2.3

package/dist/cjs/detectHeight.js

@@ -27,26 +27,37 @@ var detectHeightOnInit = (element, state) => {
   const heightTimeout = setTimeout(() => {
     const { props } = element;
     if (!state.clientHeight) {
-      const { node: { clientHeight } } = element;
+      const {
+        node: { clientHeight }
+      } = element;
       if (clientHeight) {
         state.clientHeight = clientHeight;
       }
     }
     if (state.active) {
       if (props.height === "auto") return;
-      element.update({
-        props: { height: state.clientHeight }
-      }, { preventBeforeUpdateListener: true, preventChildrenUpdate: true });
+      element.setProps(
+        {
+          height: state.clientHeight
+        },
+        { preventBeforeUpdateListener: true, preventChildrenUpdate: true }
+      );
       const setAutoTimeout = setTimeout(() => {
-        element.update({
-          props: { height: "auto" }
-        }, { preventBeforeUpdateListener: true, preventChildrenUpdate: true });
+        element.setProps(
+          {
+            height: "auto"
+          },
+          { preventBeforeUpdateListener: true, preventChildrenUpdate: true }
+        );
         clearTimeout(setAutoTimeout);
       }, 450);
     } else {
-      element.update({
-        props: { height: "0" }
-      }, { preventBeforeUpdateListener: true, preventChildrenUpdate: true });
+      element.setProps(
+        {
+          height: "0"
+        },
+        { preventBeforeUpdateListener: true, preventChildrenUpdate: true }
+      );
     }
     clearTimeout(heightTimeout);
   });

package/dist/cjs/index.js

@@ -33,6 +33,8 @@ __export(index_exports, {
   loadJavascriptFile: () => loadJavascriptFile,
   loadJavascriptFileEmbedSync: () => loadJavascriptFileEmbedSync,
   loadJavascriptFileSync: () => loadJavascriptFileSync,
+  loadRemoteCSS: () => loadRemoteCSS,
+  loadRemoteScript: () => loadRemoteScript,
   removeChars: () => removeChars,
   toCamelCase: () => toCamelCase,
   toDashCase: () => toDashCase,
@@ -42,11 +44,11 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// ../../../domql/packages/utils/globals.js
+// ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
 
-// ../../../domql/packages/utils/types.js
+// ../../../domql/packages/utils/dist/esm/types.js
 var isObject = (arg) => {
   if (arg === null) return false;
   return typeof arg === "object" && arg.constructor === Object;
@@ -55,7 +57,7 @@ var isString = (arg) => typeof arg === "string";
 var isNumber = (arg) => typeof arg === "number";
 var isArray = (arg) => Array.isArray(arg);
 
-// ../../../domql/packages/utils/keys.js
+// ../../../domql/packages/utils/dist/esm/keys.js
 var STATE_METHODS = [
   "update",
   "parse",
@@ -126,7 +128,7 @@ var METHODS_EXL = [
   ...PROPS_METHODS
 ];
 
-// ../../../domql/packages/utils/cookie.js
+// ../../../domql/packages/utils/dist/esm/cookie.js
 var isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
 
 // ../../../domql/packages/event/dist/esm/keys.js
@@ -262,10 +264,12 @@ var loadJavascriptFile = (FILE_URL, async = false, doc = document, type = "text/
         });
       });
       scriptEle.addEventListener("error", (ev) => {
-        reject(new Error({
-          status: false,
-          message: `Failed to load the script ${FILE_URL}`
-        }));
+        reject(
+          new Error({
+            status: false,
+            message: `Failed to load the script ${FILE_URL}`
+          })
+        );
       });
       doc.body.appendChild(scriptEle);
     } catch (error) {
@@ -336,6 +340,59 @@ var loadJavascript = (body, async = false, doc = document, type = "text/javascri
     console.warn(error);
   }
 };
+function loadRemoteScript(url, options = {}) {
+  const { window: window4 = globalThis } = options;
+  const { document: document4 = window4.document } = options;
+  return new Promise((resolve, reject) => {
+    const existingScript = document4.querySelector(`script[src="${url}"]`);
+    if (existingScript) {
+      return resolve(existingScript);
+    }
+    const script = document4.createElement("script");
+    script.src = url;
+    script.async = options.async === true;
+    script.type = options.type || "text/javascript";
+    if (options.id) script.id = options.id;
+    if (options.integrity) script.integrity = options.integrity;
+    if (options.crossOrigin) script.crossOrigin = options.crossOrigin;
+    script.onload = () => {
+      script.onerror = script.onload = null;
+      resolve(script);
+    };
+    script.onerror = () => {
+      script.onerror = script.onload = null;
+      reject(new Error(`Failed to load script: ${url}`));
+    };
+    document4.head.appendChild(script);
+  });
+}
+async function loadRemoteCSS(url, options = {}) {
+  const { window: window4 = globalThis } = options;
+  const { document: document4 = window4.document } = options;
+  return new Promise((resolve, reject) => {
+    const existingLink = document4.querySelector(`link[href="${url}"]`);
+    if (existingLink) {
+      return resolve(existingLink);
+    }
+    const link = document4.createElement("link");
+    link.href = url;
+    link.rel = options.rel || "stylesheet";
+    link.type = "text/css";
+    link.media = options.media || "all";
+    if (options.id) link.id = options.id;
+    if (options.integrity) link.integrity = options.integrity;
+    if (options.crossOrigin) link.crossOrigin = options.crossOrigin;
+    link.onload = () => {
+      link.onerror = link.onload = null;
+      resolve(link);
+    };
+    link.onerror = () => {
+      link.onerror = link.onload = null;
+      reject(new Error(`Failed to load stylesheet: ${url}`));
+    };
+    document4.head.appendChild(link);
+  });
+}
 
 // src/files.js
 var isPhoto = (format) => ["jpeg", "gif", "jpg", "png", "tiff", "woff"].includes(format);
@@ -366,12 +423,9 @@ var toCamelCase = (str) => {
     return index === 0 ? word.toLowerCase() : word.toUpperCase();
   }).replaceAll(/\s+/g, "");
 };
-var toTitleCase = (str) => str && str.replace(
-  /\w\S*/g,
-  (txt) => {
-    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
-  }
-);
+var toTitleCase = (str) => str && str.replace(/\w\S*/g, (txt) => {
+  return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+});
 var toDashCase = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
 var toDescriptionCase = (str = "") => {
   if (typeof str !== "string") return;

package/dist/cjs/load.js

@@ -24,7 +24,9 @@ __export(load_exports, {
   loadJavascript: () => loadJavascript,
   loadJavascriptFile: () => loadJavascriptFile,
   loadJavascriptFileEmbedSync: () => loadJavascriptFileEmbedSync,
-  loadJavascriptFileSync: () => loadJavascriptFileSync
+  loadJavascriptFileSync: () => loadJavascriptFileSync,
+  loadRemoteCSS: () => loadRemoteCSS,
+  loadRemoteScript: () => loadRemoteScript
 });
 module.exports = __toCommonJS(load_exports);
 var loadJavascriptFile = (FILE_URL, async = false, doc = document, type = "text/javascript") => {
@@ -40,10 +42,12 @@ var loadJavascriptFile = (FILE_URL, async = false, doc = document, type = "text/
         });
       });
       scriptEle.addEventListener("error", (ev) => {
-        reject(new Error({
-          status: false,
-          message: `Failed to load the script ${FILE_URL}`
-        }));
+        reject(
+          new Error({
+            status: false,
+            message: `Failed to load the script ${FILE_URL}`
+          })
+        );
       });
       doc.body.appendChild(scriptEle);
     } catch (error) {
@@ -114,3 +118,56 @@ var loadJavascript = (body, async = false, doc = document, type = "text/javascri
     console.warn(error);
   }
 };
+function loadRemoteScript(url, options = {}) {
+  const { window: window2 = globalThis } = options;
+  const { document: document2 = window2.document } = options;
+  return new Promise((resolve, reject) => {
+    const existingScript = document2.querySelector(`script[src="${url}"]`);
+    if (existingScript) {
+      return resolve(existingScript);
+    }
+    const script = document2.createElement("script");
+    script.src = url;
+    script.async = options.async === true;
+    script.type = options.type || "text/javascript";
+    if (options.id) script.id = options.id;
+    if (options.integrity) script.integrity = options.integrity;
+    if (options.crossOrigin) script.crossOrigin = options.crossOrigin;
+    script.onload = () => {
+      script.onerror = script.onload = null;
+      resolve(script);
+    };
+    script.onerror = () => {
+      script.onerror = script.onload = null;
+      reject(new Error(`Failed to load script: ${url}`));
+    };
+    document2.head.appendChild(script);
+  });
+}
+async function loadRemoteCSS(url, options = {}) {
+  const { window: window2 = globalThis } = options;
+  const { document: document2 = window2.document } = options;
+  return new Promise((resolve, reject) => {
+    const existingLink = document2.querySelector(`link[href="${url}"]`);
+    if (existingLink) {
+      return resolve(existingLink);
+    }
+    const link = document2.createElement("link");
+    link.href = url;
+    link.rel = options.rel || "stylesheet";
+    link.type = "text/css";
+    link.media = options.media || "all";
+    if (options.id) link.id = options.id;
+    if (options.integrity) link.integrity = options.integrity;
+    if (options.crossOrigin) link.crossOrigin = options.crossOrigin;
+    link.onload = () => {
+      link.onerror = link.onload = null;
+      resolve(link);
+    };
+    link.onerror = () => {
+      link.onerror = link.onload = null;
+      reject(new Error(`Failed to load stylesheet: ${url}`));
+    };
+    document2.head.appendChild(link);
+  });
+}

package/dist/cjs/scaling.js

@@ -25,18 +25,18 @@ __export(scaling_exports, {
 });
 module.exports = __toCommonJS(scaling_exports);
 
-// ../../../domql/packages/utils/globals.js
+// ../../../domql/packages/utils/dist/esm/globals.js
 var window2 = globalThis;
 var document2 = window2.document;
 
-// ../../../domql/packages/utils/types.js
+// ../../../domql/packages/utils/dist/esm/types.js
 var isObject = (arg) => {
   if (arg === null) return false;
   return typeof arg === "object" && arg.constructor === Object;
 };
 var isArray = (arg) => Array.isArray(arg);
 
-// ../../../domql/packages/utils/keys.js
+// ../../../domql/packages/utils/dist/esm/keys.js
 var STATE_METHODS = [
   "update",
   "parse",
@@ -107,7 +107,7 @@ var METHODS_EXL = [
   ...PROPS_METHODS
 ];
 
-// ../../../domql/packages/utils/cookie.js
+// ../../../domql/packages/utils/dist/esm/cookie.js
 var isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
 
 // ../../../domql/packages/event/dist/esm/keys.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/utils",
-  "version": "3.1.2",
+  "version": "3.2.3",
   "author": "symbo.ls",
   "files": [
     "src",
@@ -16,16 +16,16 @@
   "publishConfig": {},
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "npx esbuild ./src/*.js ./src/**/*.js --target=es2017 --format=esm --outdir=dist/esm",
-    "build:cjs": "npx esbuild ./src/*.js ./src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs --bundle",
-    "build:iife": "npx esbuild ./src/index.js --target=es2017 --format=iife --outdir=dist/iife --bundle --minify",
+    "build:esm": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=es2017 --format=esm --outdir=dist/esm",
+    "build:cjs": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs --bundle",
+    "build:iife": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/index.js --target=es2017 --format=iife --outdir=dist/iife --bundle --minify",
     "build": "npm run build:cjs",
     "prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
   },
   "license": "ISC",
   "dependencies": {
-    "@domql/event": "^3.1.2",
-    "@domql/utils": "^3.1.2"
+    "@domql/event": "^3.2.3",
+    "@domql/utils": "^3.2.3"
   },
-  "gitHead": "429b36616aa04c8587a26ce3c129815115e35897"
+  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681"
 }

package/src/detectHeight.js

@@ -4,7 +4,9 @@ export const detectHeightOnInit = (element, state) => {
   const heightTimeout = setTimeout(() => {
     const { props } = element
     if (!state.clientHeight) {
-      const { node: { clientHeight } } = element
+      const {
+        node: { clientHeight }
+      } = element
       if (clientHeight) {
         state.clientHeight = clientHeight
       }
@@ -12,19 +14,28 @@ export const detectHeightOnInit = (element, state) => {
 
     if (state.active) {
       if (props.height === 'auto') return
-      element.update({
-        props: { height: state.clientHeight }
-      }, { preventBeforeUpdateListener: true, preventChildrenUpdate: true })
+      element.setProps(
+        {
+          height: state.clientHeight
+        },
+        { preventBeforeUpdateListener: true, preventChildrenUpdate: true }
+      )
       const setAutoTimeout = setTimeout(() => {
-        element.update({
-          props: { height: 'auto' }
-        }, { preventBeforeUpdateListener: true, preventChildrenUpdate: true })
+        element.setProps(
+          {
+            height: 'auto'
+          },
+          { preventBeforeUpdateListener: true, preventChildrenUpdate: true }
+        )
         clearTimeout(setAutoTimeout)
       }, 450)
     } else {
-      element.update({
-        props: { height: '0' }
-      }, { preventBeforeUpdateListener: true, preventChildrenUpdate: true })
+      element.setProps(
+        {
+          height: '0'
+        },
+        { preventBeforeUpdateListener: true, preventChildrenUpdate: true }
+      )
     }
     clearTimeout(heightTimeout)
   })

package/src/index.js

@@ -2,14 +2,14 @@
 
 import { isString, isObject, isArray, isNumber } from '@domql/utils'
 
-export * from './browser'
-export * from './scaling'
-export * from './date'
-export * from './fibonacci'
-export * from './load'
-export * from './files'
+export * from './browser.js'
+export * from './scaling.js'
+export * from './date.js'
+export * from './fibonacci.js'
+export * from './load.js'
+export * from './files.js'
 
-export const copyStringToClipboard = async (str) => {
+export const copyStringToClipboard = async str => {
   try {
     await navigator.clipboard.writeText(str)
   } catch (err) {
@@ -17,7 +17,7 @@ export const copyStringToClipboard = async (str) => {
   }
 }
 
-export const copyJavaScriptToClipboard = async (jsCode) => {
+export const copyJavaScriptToClipboard = async jsCode => {
   try {
     // Create a Blob for the JavaScript code with the 'text/javascript' MIME type
     const blob = new Blob([jsCode], { type: 'text/javascript' })
@@ -39,24 +39,27 @@ export const removeChars = str => {
 }
 
 export const toCamelCase = str => {
-  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
-    return index === 0 ? word.toLowerCase() : word.toUpperCase()
-  }).replaceAll(/\s+/g, '')
+  return str
+    .replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
+      return index === 0 ? word.toLowerCase() : word.toUpperCase()
+    })
+    .replaceAll(/\s+/g, '')
 }
 
-export const toTitleCase = str => str && str.replace(
-  /\w\S*/g, txt => {
+export const toTitleCase = str =>
+  str &&
+  str.replace(/\w\S*/g, txt => {
     return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
-  }
-)
+  })
 
-export const toDashCase = val => val
-  .replace(/[^a-zA-Z0-9]/g, ' ') // Replace non-alphanumeric characters with spaces
-  .trim() // Remove leading and trailing spaces
-  .toLowerCase() // Convert to lowercase
-  .replace(/\s+/g, '-') // Replace spaces with dashes
-  .replace(/-+/g, '-') // Replace consecutive dashes with a single dash
-  .replace(/^-|-$/g, '') // Remove leading and trailing dashes
+export const toDashCase = val =>
+  val
+    .replace(/[^a-zA-Z0-9]/g, ' ') // Replace non-alphanumeric characters with spaces
+    .trim() // Remove leading and trailing spaces
+    .toLowerCase() // Convert to lowercase
+    .replace(/\s+/g, '-') // Replace spaces with dashes
+    .replace(/-+/g, '-') // Replace consecutive dashes with a single dash
+    .replace(/^-|-$/g, '') // Remove leading and trailing dashes
 
 export const toDescriptionCase = (str = '') => {
   if (typeof str !== 'string') return

package/src/load.js

@@ -1,6 +1,11 @@
 'use strict'
 
-export const loadJavascriptFile = (FILE_URL, async = false, doc = document, type = 'text/javascript') => {
+export const loadJavascriptFile = (
+  FILE_URL,
+  async = false,
+  doc = document,
+  type = 'text/javascript'
+) => {
   return new Promise((resolve, reject) => {
     try {
       const scriptEle = doc.createElement('script')
@@ -8,17 +13,19 @@ export const loadJavascriptFile = (FILE_URL, async = false, doc = document, type
       scriptEle.async = async
       scriptEle.src = FILE_URL
 
-      scriptEle.addEventListener('load', (ev) => {
+      scriptEle.addEventListener('load', ev => {
         resolve({
           status: true
         })
       })
 
-      scriptEle.addEventListener('error', (ev) => {
-        reject(new Error({
-          status: false,
-          message: `Failed to load the script ${FILE_URL}`
-        }))
+      scriptEle.addEventListener('error', ev => {
+        reject(
+          new Error({
+            status: false,
+            message: `Failed to load the script ${FILE_URL}`
+          })
+        )
       })
 
       doc.body.appendChild(scriptEle)
@@ -28,7 +35,11 @@ export const loadJavascriptFile = (FILE_URL, async = false, doc = document, type
   })
 }
 
-export const loadJavascriptFileSync = (fileUrl, doc = document, type = 'text/javascript') => {
+export const loadJavascriptFileSync = (
+  fileUrl,
+  doc = document,
+  type = 'text/javascript'
+) => {
   return new Promise((resolve, reject) => {
     const scriptEle = doc.createElement('script')
     scriptEle.type = type
@@ -36,7 +47,8 @@ export const loadJavascriptFileSync = (fileUrl, doc = document, type = 'text/jav
 
     // Create a blocking overlay
     const blocker = doc.createElement('div')
-    blocker.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.8);z-index:9999;'
+    blocker.style.cssText =
+      'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.8);z-index:9999;'
     doc.body.appendChild(blocker)
 
     scriptEle.onload = () => {
@@ -54,7 +66,12 @@ export const loadJavascriptFileSync = (fileUrl, doc = document, type = 'text/jav
   })
 }
 
-export const loadJavascriptFileEmbedSync = (FILE_URL, doc = document, fallback, type = 'text/javascript') => {
+export const loadJavascriptFileEmbedSync = (
+  FILE_URL,
+  doc = document,
+  fallback,
+  type = 'text/javascript'
+) => {
   const xhr = new window.XMLHttpRequest()
   xhr.open('GET', FILE_URL, false) // false makes the request synchronous
   xhr.send()
@@ -70,14 +87,19 @@ export const loadJavascriptFileEmbedSync = (FILE_URL, doc = document, fallback,
   }
 }
 
-export const loadCssFile = (FILE_URL, async = false, doc = document, type = 'text/javascript') => {
+export const loadCssFile = (
+  FILE_URL,
+  async = false,
+  doc = document,
+  type = 'text/javascript'
+) => {
   return new Promise((resolve, reject) => {
     try {
       const linkElem = doc.createElement('link')
       linkElem.rel = 'stylesheet'
       linkElem.href = FILE_URL
 
-      linkElem.addEventListener('load', (ev) => {
+      linkElem.addEventListener('load', ev => {
         resolve({
           status: true
         })
@@ -90,7 +112,13 @@ export const loadCssFile = (FILE_URL, async = false, doc = document, type = 'tex
   })
 }
 
-export const loadJavascript = (body, async = false, doc = document, type = 'text/javascript', id = 'smbls-script') => {
+export const loadJavascript = (
+  body,
+  async = false,
+  doc = document,
+  type = 'text/javascript',
+  id = 'smbls-script'
+) => {
   try {
     const scriptEle = doc.createElement('script')
     scriptEle.type = type
@@ -103,3 +131,106 @@ export const loadJavascript = (body, async = false, doc = document, type = 'text
     console.warn(error)
   }
 }
+
+/**
+ * Dynamically loads a remote JavaScript file and returns a Promise
+ * that resolves when the script has completely loaded or rejects on error.
+ *
+ * @param {string} url - The URL of the remote JavaScript file to load
+ * @param {Object} [options] - Optional configuration
+ * @param {string} [options.id] - Optional ID to assign to the script element
+ * @param {boolean} [options.async=true] - Whether to load the script asynchronously
+ * @param {string} [options.type='text/javascript'] - The type attribute for the script
+ * @param {string} [options.integrity] - Optional integrity hash for SRI
+ * @param {string} [options.crossOrigin] - Optional crossorigin attribute
+ * @return {Promise} A promise that resolves when the script loads or rejects on error
+ */
+export function loadRemoteScript (url, options = {}) {
+  const { window = globalThis } = options
+  const { document = window.document } = options
+
+  return new Promise((resolve, reject) => {
+    // Check if script is already loaded
+    const existingScript = document.querySelector(`script[src="${url}"]`)
+    if (existingScript) {
+      return resolve(existingScript)
+    }
+
+    // Create script element
+    const script = document.createElement('script')
+    script.src = url
+    script.async = options.async === true
+    script.type = options.type || 'text/javascript'
+
+    // Add optional attributes
+    if (options.id) script.id = options.id
+    if (options.integrity) script.integrity = options.integrity
+    if (options.crossOrigin) script.crossOrigin = options.crossOrigin
+
+    // Setup load and error handlers
+    script.onload = () => {
+      script.onerror = script.onload = null
+      resolve(script)
+    }
+
+    script.onerror = () => {
+      script.onerror = script.onload = null
+      reject(new Error(`Failed to load script: ${url}`))
+    }
+
+    // Append the script to the document head
+    document.head.appendChild(script)
+  })
+}
+
+/**
+ * Dynamically loads a remote CSS file and returns a Promise
+ * that resolves when the stylesheet has completely loaded or rejects on error.
+ *
+ * @param {string} url - The URL of the remote CSS file to load
+ * @param {Object} [options] - Optional configuration
+ * @param {string} [options.id] - Optional ID to assign to the link element
+ * @param {string} [options.rel='stylesheet'] - The rel attribute for the link
+ * @param {string} [options.media='all'] - The media attribute
+ * @param {string} [options.integrity] - Optional integrity hash for SRI
+ * @param {string} [options.crossOrigin] - Optional crossorigin attribute
+ * @return {Promise} A promise that resolves when the stylesheet loads or rejects on error
+ */
+export async function loadRemoteCSS (url, options = {}) {
+  const { window = globalThis } = options
+  const { document = window.document } = options
+
+  return new Promise((resolve, reject) => {
+    // Check if stylesheet is already loaded
+    const existingLink = document.querySelector(`link[href="${url}"]`)
+    if (existingLink) {
+      return resolve(existingLink)
+    }
+
+    // Create link element
+    const link = document.createElement('link')
+    link.href = url
+    link.rel = options.rel || 'stylesheet'
+    link.type = 'text/css'
+    link.media = options.media || 'all'
+
+    // Add optional attributes
+    if (options.id) link.id = options.id
+    if (options.integrity) link.integrity = options.integrity
+    if (options.crossOrigin) link.crossOrigin = options.crossOrigin
+
+    // Setup load and error handlers
+    link.onload = () => {
+      link.onerror = link.onload = null
+      resolve(link)
+    }
+
+    link.onerror = () => {
+      link.onerror = link.onload = null
+      reject(new Error(`Failed to load stylesheet: ${url}`))
+    }
+
+    // Append the link to the document head
+    document.head.appendChild(link)
+  })
+}