@linear_non/stellar-libs 1.0.38 → 1.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-libs",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "description": "Reusable JavaScript libraries for Non-Linear Studio projects.",
   "main": "src/index.js",
   "type": "module",

package/src/Smooth/index.js

@@ -12,6 +12,9 @@ export default class Smooth {
     this.sections = null
     this.scrollbar = null
     this.dpr = Math.max(1, Math.round(window.devicePixelRatio || 1))
+
+    this._resizeRaf = null
+
     this.init()
   }
 
@@ -27,18 +30,16 @@ export default class Smooth {
 
     this.sections = []
     let cursor = 0
-    let max = 0
 
     this.elems.forEach(el => {
       el.style.transform = "translate3d(0, 0, 0)"
+
       const speed = el.dataset.speed || 1
       const { height, offset } = this.getVars(el, speed)
 
       const top = cursor
       const bottom = top + height
-
       cursor = bottom
-      max = bottom
 
       let parent = el.parentNode.closest("[data-smooth]")
 
@@ -119,35 +120,30 @@ export default class Smooth {
   }
 
   resize = () => {
-    if (!this.sections) return
-
-    let cursor = 0
-    let max = 0
+    const { isSmooth } = kitStore.flags
+    if (!isSmooth) return
 
-    this.sections.forEach(section => {
-      section.el.style.transform = "translate3d(0, 0, 0)"
-      const { height, offset } = this.getVars(section.el, section.speed)
+    if (this._resizeRaf) cancelAnimationFrame(this._resizeRaf)
 
-      const top = cursor
-      const bottom = top + height
+    this._resizeRaf = requestAnimationFrame(() => {
+      this._resizeRaf = null
 
-      cursor = bottom
-      max = bottom
+      this.update(this.elems)
 
-      Object.assign(section, { top, bottom, offset })
+      emitter.emit(EVENTS.APP_SMOOTH_RESIZE)
     })
-
-    emitter.emit(EVENTS.APP_SMOOTH_RESIZE)
-    this.transformSections()
   }
 
   update(elems) {
     kitStore.flags.isResizing = true
+
     this.scroll.setScrollBounds()
     this.elems = elems || qsa("[data-smooth]")
     this.scrollbar?.update()
+
     this.getSections()
     this.transformSections()
+
     kitStore.flags.isResizing = false
   }
 

package/src/SplitOnScroll/index.js

@@ -1,10 +1,19 @@
-import { EVENTS } from "@linear_non/stellar-kit/events"
+import { EVENTS, PRIORITY, emitter } from "@linear_non/stellar-kit/events"
 import { Observer, reverseSplit, splitText } from "@linear_non/stellar-kit/plugins"
 
+const NOOP = () => {}
+
+function normalizeTargets(splitTargets) {
+  if (!splitTargets) return []
+  if (splitTargets instanceof Element) return [splitTargets]
+  if (Array.isArray(splitTargets)) return splitTargets
+  return Array.from(splitTargets)
+}
+
 export default class SplitonScroll {
   constructor({
     el,
-    splitText,
+    splitText: splitTargets,
     isReady,
     reverse,
     start = "top bottom",
@@ -13,55 +22,58 @@ export default class SplitonScroll {
     once = true,
   }) {
     this.element = el
+    this.targets = normalizeTargets(splitTargets)
 
-    // Normalize split targets to an array
-    if (!splitText) {
-      this.targets = []
-    } else if (splitText instanceof Element) {
-      this.targets = [splitText]
-    } else if (Array.isArray(splitText)) {
-      this.targets = splitText
-    } else {
-      this.targets = Array.from(splitText)
-    }
-
-    // SplitText() instance
     this.splits = null
-
-    // Grouped SplitText() instances from data-split-group
     this.groups = null
 
-    this.isReadyCallback = isReady || (() => {})
-    this.reverseCallback = reverse || (() => {})
+    this.isReadyCallback = isReady || NOOP
+    this.reverseCallback = reverse || NOOP
     this.start = start
     this.end = end
     this.scrub = scrub
     this.once = once
 
-    // Expose a Promise so users can wait for ready event
+    this._readyNotified = false
     this._resolveReady = null
     this.ready = new Promise(resolve => {
       this._resolveReady = resolve
     })
 
-    // If no element or no targets, resolve immediately
+    this._onResize = this._onResize.bind(this)
+    this._resizeScheduled = false
+    this._offResize = null
+
+    // No element or no targets → resolve immediately once and bail
     if (!this.element || !this.targets.length) {
       const payload = { splits: [], groups: {} }
-      if (this._resolveReady) {
-        this._resolveReady(payload)
-        this._resolveReady = null
-      }
-      this.isReadyCallback([], {})
+      this._notifyReadyOnce(payload)
       return
     }
 
     this.addObserver()
+    this.addResizeListener()
 
-    if (this.observer.isActive || this.observer.progress > 0) {
+    // If already in view on init, run enter logic once
+    if (this.observer && (this.observer.isActive || this.observer.progress > 0)) {
       this.handleEnter()
     }
   }
 
+  _notifyReadyOnce(payload) {
+    if (this._readyNotified) return
+    this._readyNotified = true
+
+    // external callback
+    this.isReadyCallback(payload.splits, payload.groups)
+
+    // external promise
+    if (this._resolveReady) {
+      this._resolveReady(payload)
+      this._resolveReady = null
+    }
+  }
+
   addObserver() {
     this.observer = new Observer({
       trigger: this.element,
@@ -75,29 +87,64 @@ export default class SplitonScroll {
     this.observer.on("leave", () => this.handleLeave())
   }
 
+  addResizeListener() {
+    this._offResize = emitter.on(EVENTS.APP_RESIZE, this._onResize, PRIORITY.first)
+  }
+
+  removeResizeListener() {
+    if (this._offResize) {
+      this._offResize()
+      this._offResize = null
+    }
+  }
+
+  _onResize() {
+    this._handleResizeInternal()
+  }
+
+  _handleResizeInternal() {
+    if (!this.element || !this.targets || !this.targets.length) return
+
+    if (this.splits) {
+      reverseSplit(this.splits)
+    }
+
+    if (this.observer && typeof this.observer.refresh === "function") {
+      this.observer.refresh()
+    }
+
+    // If in view after resize, re-split; external callback will *not* re-fire
+    if (this.observer && (this.observer.isActive || this.observer.progress > 0)) {
+      this.handleEnter()
+    }
+  }
+
   async handleEnter() {
-    const emitter = splitText(this.targets)
+    const splitEmitter = splitText(this.targets)
 
     const { splits, groups } = await new Promise(resolve => {
-      emitter.on(EVENTS.APP_SPLITTEXT_READY, (readySplits, groupMap) => {
+      const onReady = (readySplits, groupMap) => {
+        if (typeof splitEmitter.off === "function") {
+          splitEmitter.off(EVENTS.APP_SPLITTEXT_READY, onReady)
+        }
         resolve({
           splits: readySplits || [],
           groups: groupMap || {},
         })
-      })
+      }
+
+      if (typeof splitEmitter.once === "function") {
+        splitEmitter.once(EVENTS.APP_SPLITTEXT_READY, onReady)
+      } else {
+        splitEmitter.on(EVENTS.APP_SPLITTEXT_READY, onReady)
+      }
     })
 
     this.splits = splits
     this.groups = groups
 
-    const payload = { splits, groups }
-
-    if (this._resolveReady) {
-      this._resolveReady(payload)
-      this._resolveReady = null
-    }
-
-    this.isReadyCallback(splits, groups)
+    // First time → notify + resolve; later (resize, re-enter) → no-op
+    this._notifyReadyOnce({ splits, groups })
   }
 
   handleLeave() {
@@ -118,6 +165,12 @@ export default class SplitonScroll {
 
   destroy() {
     this.observer?.kill()
+    this.removeResizeListener()
+
+    if (this.splits) {
+      reverseSplit(this.splits)
+    }
+
     this.splits = null
     this.groups = null
     this.targets = null