@linear_non/stellar-kit 1.1.6 → 1.1.8

package/classes/FontLoader.js

@@ -4,6 +4,7 @@ import { emitter, EVENTS } from "../events"
 export default class FontLoader {
   static type = "fonts"
   static events = { PROGRESS: EVENTS.APP_FONTS_PROGRESS, LOADED: EVENTS.APP_FONTS_LOADED }
+  static getCount = (opts = {}) => opts.fonts?.length ?? 0
   constructor({ fonts = [] }) {
     // fonts = [{ family: "Inter", url: "/fonts/Inter.woff2" }, ...]
 

package/classes/ImageLoader.js

@@ -1,4 +1,4 @@
-// ImageLoader.js
+// classes/ImageLoader.js
 import { emitter, EVENTS } from "../events"
 
 export default class ImageLoader {
@@ -7,97 +7,159 @@ export default class ImageLoader {
     PROGRESS: EVENTS.APP_IMAGES_PROGRESS,
     LOADED: EVENTS.APP_IMAGES_LOADED,
   }
+  static getCount = (opts = {}) => opts.urls?.length ?? opts.total ?? 0
 
-  constructor({ origin, fileName, extension, total, urls = [] }) {
+  constructor({ origin, fileName, extension, total, urls = [], useWorker = true, cache = null }) {
     this.origin = origin
     this.fileName = fileName
     this.extension = extension
     this.total = total
     this.urls = urls
+    this.useWorker = useWorker
+    this.cache = cache
 
     this.images = []
     this.loaded = 0
     this.isLoaded = false
+
+    this._results = new Map() // url -> HTMLImageElement
+    this._objectURLs = [] // for revoke
   }
 
   async load() {
-    const urls = this.urls.length
+    const raw = this.urls.length
       ? this.urls
       : Array.from({ length: this.total }, (_, i) => `${this.origin}/${this.fileName}${i}.${this.extension}`)
 
+    const base =
+      typeof document !== "undefined"
+        ? document.baseURI
+        : typeof location !== "undefined"
+          ? location.href
+          : ""
+    const urls = raw.map(u => {
+      try {
+        return new URL(u, base).href
+      } catch {
+        return u
+      }
+    })
+
+    console.log(urls)
+
+    // cache-aware filter
+    const toLoad = this.cache ? urls.filter(u => !this.cache.has(u)) : urls
     this.total = urls.length
+    this.loaded = this.total - toLoad.length // count already-cached as loaded
 
-    const promises = urls.map((url, i) => this.loadSingle(url, i))
-    await Promise.all(promises)
+    // (optional) emit initial progress if cache pre-fills
+    if (this.loaded > 0) {
+      emitter.emit(EVENTS.APP_IMAGES_PROGRESS, {
+        loaded: this.loaded,
+        total: this.total,
+        percent: Math.round((this.loaded / this.total) * 100),
+      })
+    }
 
+    await Promise.all(toLoad.map(url => this._loadOne(url)))
+
+    // build ordered result (use cache first, then freshly loaded)
+    this.images = urls.map(u => this.cache?.get(u) || this._results.get(u) || null)
     this.isLoaded = true
     emitter.emit(EVENTS.APP_IMAGES_LOADED, this.images)
-
     return this.images
   }
 
-  // --- inline worker (classic) ---
-  createWorker() {
+  _createInlineWorker() {
     const code = `
     self.onmessage = async (e) => {
-      const { url, index } = e.data;
+      const { url } = e.data;
       try {
         const res = await fetch(url);
         const blob = await res.blob();
-        self.postMessage({ url, blob, index });
+        self.postMessage({ url, blob });
       } catch (err) {
-        self.postMessage({ url, error: String(err), index });
+        self.postMessage({ url, error: String(err) });
       }
     };`
     const blob = new Blob([code], { type: "application/javascript" })
-    const workerUrl = URL.createObjectURL(blob)
-    const w = new Worker(workerUrl) // classic worker (no imports)
-    // (optional) URL.revokeObjectURL(workerUrl) after creation; leaving as-is for safety
-    return w
+    return new Worker(URL.createObjectURL(blob))
   }
 
-  loadSingle(url, index) {
-    return new Promise(resolve => {
-      const worker = this.createWorker()
-      worker.postMessage({ url, index })
-
-      worker.addEventListener("message", e => {
-        const { blob, index, error } = e.data
-        this.loaded++
-
-        if (!error && blob) {
-          const img = new Image()
-          img.src = URL.createObjectURL(blob)
-          img.onload = () => {
-            this.images[index] = img
-            emitter.emit(EVENTS.APP_IMAGES_PROGRESS, {
-              loaded: this.loaded,
-              total: this.total,
-              percent: Math.round((this.loaded / this.total) * 100),
-            })
-            resolve(img)
-            worker.terminate()
+  async _loadOne(url) {
+    // worker path
+    if (this.useWorker && typeof Worker !== "undefined") {
+      return new Promise(resolve => {
+        const w = this._createInlineWorker()
+        w.onmessage = async e => {
+          const { blob, error } = e.data
+          if (error || !blob) {
+            this._bumpProgress()
+            w.terminate()
+            return resolve(null)
           }
-          img.onerror = () => {
-            emitter.emit(EVENTS.APP_IMAGES_PROGRESS, {
-              loaded: this.loaded,
-              total: this.total,
-              percent: Math.round((this.loaded / this.total) * 100),
-            })
-            resolve(null)
-            worker.terminate()
-          }
-        } else {
-          // count progress even on error
-          emitter.emit(EVENTS.APP_IMAGES_PROGRESS, {
-            loaded: this.loaded,
-            total: this.total,
-            percent: Math.round((this.loaded / this.total) * 100),
-          })
-          resolve(null)
-          worker.terminate()
+          const img = await this._blobToImage(blob)
+          this._store(url, img)
+          this._bumpProgress()
+          w.terminate()
+          resolve(img)
         }
+        w.postMessage({ url })
       })
+    }
+
+    // fallback path (no worker)
+    try {
+      const res = await fetch(url)
+      const blob = await res.blob()
+      const img = await this._blobToImage(blob)
+      this._store(url, img)
+      this._bumpProgress()
+      return img
+    } catch {
+      this._bumpProgress()
+      return null
+    }
+  }
+
+  async _blobToImage(blob) {
+    if (!blob || !blob.type?.startsWith?.("image/")) return null
+    return new Promise(resolve => {
+      const url = URL.createObjectURL(blob)
+      this._objectURLs.push(url)
+      const img = new Image()
+      img.src = url
+      img.onload = async () => {
+        if (img.decode) {
+          try {
+            await img.decode()
+          } catch {}
+        }
+        resolve(img)
+      }
+      img.onerror = () => resolve(null)
+    })
+  }
+
+  _store(url, img) {
+    if (!img) return
+    this._results.set(url, img)
+    if (this.cache) this.cache.set(url, img)
+  }
+
+  _bumpProgress() {
+    this.loaded++
+    emitter.emit(EVENTS.APP_IMAGES_PROGRESS, {
+      loaded: this.loaded,
+      total: this.total,
+      percent: Math.round((this.loaded / this.total) * 100),
     })
   }
+
+  destroy() {
+    this._objectURLs.forEach(u => URL.revokeObjectURL(u))
+    this._objectURLs.length = 0
+    this.images = []
+    this._results.clear()
+  }
 }

package/classes/MasterLoader.js

@@ -12,7 +12,7 @@ export default class MasterLoader {
   add(loaderClass, options) {
     const loader = new loaderClass(options)
     this.loaders.push({ loaderClass, loader })
-    this.total += loader.total || 0
+    this.total += loaderClass.getCount?.(options) ?? loader.total ?? 0
     return loader
   }
 

package/events/Raf.js

@@ -106,16 +106,31 @@ export default class Raf {
     })
   }
 
+  stop = () => {
+    gsap.ticker.remove(this.tick)
+  }
+
+  resume = () => {
+    this.scroll.current = this.scroll.target
+    this.scroll.rounded = this.scroll.target
+    gsap.ticker.add(this.tick)
+    ScrollTrigger.update()
+  }
+
   on() {
     gsap.ticker.add(this.tick)
     emitter.on(EVENTS.APP_SCROLL, this.onScroll)
     emitter.on(EVENTS.APP_MOUSEMOVE, this.onMouseMove)
+    window.addEventListener("pagehide", () => this.stop)
+    window.addEventListener("pageshow", () => this.resume)
   }
 
   off() {
     gsap.ticker.remove(this.tick)
     emitter.off(EVENTS.APP_SCROLL, this.onScroll)
     emitter.off(EVENTS.APP_MOUSEMOVE, this.onMouseMove)
+    window.removeEventListener("pagehide", () => this.stop)
+    window.removeEventListener("pageshow", () => this.resume)
   }
 
   destroy() {

package/kitStore.js

@@ -7,6 +7,9 @@ export const sizes = {
   m: 390, // mobile width
 }
 
+// in case you want to "cache" your assets
+export const assets = {}
+
 export const flags = {
   isFocus: false,
   isSmooth: false,
@@ -34,4 +37,5 @@ export default {
   mouse,
   flags,
   pageContent: null, // This should be set to the main content element
+  assets,
 }

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@linear_non/stellar-kit",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "Stellar frontend core for Non-Linear Studio projects.",
   "main": "index.js",
   "exports": {
     ".": "./index.js",
     "./utils": "./utils/index.js",
     "./classes": "./classes/index.js",
-    "./workers": "./workers/*",
     "./events": "./events/index.js",
     "./gsap": "./libraries/gsap/index.js"
   },
@@ -23,7 +22,6 @@
     "utils/",
     "libraries/",
     "libraries/gsap/",
-    "workers/",
     "kitStore.js",
     "index.js"
   ],

package/workers/image-loader.js

@@ -1,10 +0,0 @@
-self.addEventListener("message", async e => {
-  const { url, index } = e.data
-  try {
-    const res = await fetch(url)
-    const blob = await res.blob()
-    self.postMessage({ url, blob, index })
-  } catch (err) {
-    console.error("Image worker error:", err)
-  }
-})