@symbo.ls/utils 2.27.16 → 2.28.1

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,
@@ -116,10 +118,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) {
@@ -190,6 +194,59 @@ var loadJavascript = (body, async = false, doc = document, type = "text/javascri
     console.warn(error);
   }
 };
+function loadRemoteScript(url, options = {}) {
+  const { window: window3 = globalThis } = options;
+  const { document: document3 = window3.document } = options;
+  return new Promise((resolve, reject) => {
+    const existingScript = document3.querySelector(`script[src="${url}"]`);
+    if (existingScript) {
+      return resolve(existingScript);
+    }
+    const script = document3.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}`));
+    };
+    document3.head.appendChild(script);
+  });
+}
+async function loadRemoteCSS(url, options = {}) {
+  const { window: window3 = globalThis } = options;
+  const { document: document3 = window3.document } = options;
+  return new Promise((resolve, reject) => {
+    const existingLink = document3.querySelector(`link[href="${url}"]`);
+    if (existingLink) {
+      return resolve(existingLink);
+    }
+    const link = document3.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}`));
+    };
+    document3.head.appendChild(link);
+  });
+}
 
 // src/files.js
 var isPhoto = (format) => ["jpeg", "gif", "jpg", "png", "tiff", "woff"].includes(format);
@@ -220,12 +277,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/utils",
-  "version": "2.27.16",
+  "version": "2.28.1",
   "author": "symbo.ls",
   "files": [
     "src",
@@ -24,7 +24,7 @@
   },
   "license": "ISC",
   "dependencies": {
-    "@domql/utils": "^2.27.16"
+    "@domql/utils": "^2.28.1"
   },
-  "gitHead": "aa562640d37f34a66e567c177be8f6ab6b41eccc"
+  "gitHead": "371cc070cdca345fcd7ea73558d336a03c847825"
 }

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)
+  })
+}