feat: ✨ added includeQueryParams flag (#260)

* feat: ✨ added includeQueryParams flag

* chore: 🔧 updated readme file

Co-authored-by: dragos.nedelcu <dragos.nedelcu@pitechplus.com>

.eslintrc

@@ -38,6 +38,7 @@
     "@typescript-eslint/no-namespace": 0,
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/explicit-module-boundary-types": 0,
-    "@typescript-eslint/no-non-null-assertion": 0
+    "@typescript-eslint/no-non-null-assertion": 0,
+    "no-prototype-builtins": 0
   }
 }

README.md

@@ -234,6 +234,13 @@ Set to true to append the current time as a query string to URL requests to enab
 
 Defaults to `false`
 
+### includeQueryParams
+
+Set false to use all URL as cache key.
+If the value has falsy value, it will exclude query params from the provided URL.
+
+Defaults to `false`
+
 ### imagePlaceholder
 
 A data URL for a placeholder image that will be used when fetching an image fails.

src/embedWebFonts.ts

@@ -141,7 +141,9 @@ async function getCSSRules(
                         rule,
                         rule.startsWith('@import')
                           ? (importIndex += 1)
-                          : sheet.hasOwnProperty('cssRules').length,
+                          : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore
+                            sheet.hasOwnProperty('cssRules').length,
                       )
                     } catch (error) {
                       console.error('Error inserting rule from remote css', {
@@ -170,7 +172,12 @@ async function getCSSRules(
               )
               .then((cssText) =>
                 parseCSS(cssText).forEach((rule) => {
-                  inline.insertRule(rule, sheet.hasOwnProperty('cssRules').length)
+                  inline.insertRule(
+                    rule,
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    sheet.hasOwnProperty('cssRules').length,
+                  )
                 }),
               )
               .catch((err) => {

src/getBlobFromURL.ts

@@ -10,10 +10,14 @@ const cache: {
   [url: string]: Promise<Metadata>
 } = {}
 
-function getCacheKey(url: string) {
+function getCacheKey(url: string, includeQueryParams: boolean | undefined) {
   let key = url.replace(/\?.*/, '')
 
-  // font resourse
+  if (includeQueryParams) {
+    key = url
+  }
+
+  // font resource
   if (/ttf|otf|eot|woff2?/i.test(key)) {
     key = key.replace(/.*\//, '')
   }
@@ -25,13 +29,13 @@ export function getBlobFromURL(
   url: string,
   options: Options,
 ): Promise<Metadata> {
-  const cacheKey = getCacheKey(url)
+  const cacheKey = getCacheKey(url, options.includeQueryParams)
 
   if (cache[cacheKey] != null) {
     return cache[cacheKey]
   }
 
-  // cache bypass so we dont have CORS issues with cached images
+  // cache bypass, we don't have CORS issues with cached images
   // ref: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
   if (options.cacheBust) {
     // eslint-disable-next-line no-param-reassign

src/options.ts

@@ -39,6 +39,11 @@ export interface Options {
    * requests to enable cache busting.
    */
   cacheBust?: boolean
+  /**
+   * Set false to use all URL as cache key.
+   * Default: false | undefined - which strips away the query parameters
+   */
+  includeQueryParams?: boolean
   /**
    * A data URL for a placeholder image that will be used when fetching
    * an image fails. Defaults to an empty string and will render empty