@linear_non/stellar-libs 1.0.41 → 1.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-libs",
-  "version": "1.0.41",
+  "version": "1.0.43",
   "description": "Reusable JavaScript libraries for Non-Linear Studio projects.",
   "main": "src/index.js",
   "type": "module",
@@ -25,7 +25,7 @@
   "author": "Non-Linear Studio",
   "license": "MIT",
   "dependencies": {
-    "@linear_non/stellar-kit": "^2.1.11"
+    "@linear_non/stellar-kit": "^2.1.17"
   },
   "devDependencies": {
     "@linear_non/prettier-config": "^1.0.6",

package/src/Smooth/index.js

@@ -13,8 +13,6 @@ export default class Smooth {
     this.scrollbar = null
     this.dpr = Math.max(1, Math.round(window.devicePixelRatio || 1))
 
-    this._resizeRaf = null
-
     this.init()
   }
 
@@ -123,15 +121,8 @@ export default class Smooth {
     const { isSmooth } = kitStore.flags
     if (!isSmooth) return
 
-    if (this._resizeRaf) cancelAnimationFrame(this._resizeRaf)
-
-    this._resizeRaf = requestAnimationFrame(() => {
-      this._resizeRaf = null
-
-      this.update(this.elems)
-
-      emitter.emit(EVENTS.APP_SMOOTH_RESIZE)
-    })
+    this.update(this.elems)
+    emitter.emit(EVENTS.APP_SMOOTH_RESIZE)
   }
 
   update(elems) {

package/src/SplitOnScroll/index.js

@@ -1,6 +1,10 @@
-import { EVENTS, PRIORITY, emitter } from "@linear_non/stellar-kit/events"
+import { EVENTS } from "@linear_non/stellar-kit/events"
 import { Observer, reverseSplit, splitText } from "@linear_non/stellar-kit/plugins"
 
+import { EVENTS } from "../events"
+import Observer from "./_Observer"
+import { reverseSplit, splitText } from "./_SplitText"
+
 const NOOP = () => {}
 
 function normalizeTargets(splitTargets) {
@@ -13,64 +17,62 @@ function normalizeTargets(splitTargets) {
 export default class SplitonScroll {
   constructor({
     el,
-    splitText: splitTargets,
+    splitText,
     isReady,
     reverse,
+    resize,
     start = "top bottom",
     end = "bottom top",
     scrub = false,
     once = true,
   }) {
     this.element = el
-    this.targets = normalizeTargets(splitTargets)
+    this.targets = normalizeTargets(splitText)
 
     this.splits = null
     this.groups = null
 
     this.isReadyCallback = isReady || NOOP
     this.reverseCallback = reverse || NOOP
+    this.isResizeCallback = resize || NOOP
     this.start = start
     this.end = end
     this.scrub = scrub
     this.once = once
 
-    this._readyNotified = false
-    this._resolveReady = null
     this.ready = new Promise(resolve => {
       this._resolveReady = resolve
     })
 
-    this._needsResplit = false
-
-    this._onResizeStart = this._onResizeStart.bind(this)
-    this._onSmoothResize = this._onSmoothResize.bind(this)
-    this._offResizeStart = null
-    this._offSmoothResize = null
+    this._readyFired = false
+    this._rebuilding = false
 
     if (!this.element || !this.targets.length) {
-      const payload = { splits: [], groups: {} }
-      this._notifyReadyOnce(payload)
+      this._notifyReadyOnce([])
       return
     }
 
+    this.init()
+  }
+
+  init() {
+    // Initialize observer
     this.addObserver()
-    this.addResizeListeners()
 
+    // If already in view, handle immediately
     if (this.observer && (this.observer.isActive || this.observer.progress > 0)) {
       this.handleEnter()
     }
   }
 
-  _notifyReadyOnce(payload) {
-    if (this._readyNotified) return
-    this._readyNotified = true
-
-    this.isReadyCallback(payload.splits, payload.groups)
+  // Set is ready only once
+  _notifyReadyOnce(splits, groups) {
+    if (this._readyFired) return
+    this._readyFired = true
 
-    if (this._resolveReady) {
-      this._resolveReady(payload)
-      this._resolveReady = null
-    }
+    this.isReadyCallback(splits, groups)
+    this._resolveReady?.({ splits, groups })
+    this._resolveReady = null
   }
 
   addObserver() {
@@ -86,78 +88,66 @@ export default class SplitonScroll {
     this.observer.on("leave", () => this.handleLeave())
   }
 
-  addResizeListeners() {
-    // Raw resize start, clear split
-    this._offResizeStart = emitter.on(EVENTS.APP_RESIZE, this._onResizeStart, PRIORITY.first)
+  async resize() {
+    // if not built yet, just build once
+    if (!this.splits) return
 
-    // Smooth.update() + setScrollBounds()
-    this._offSmoothResize = emitter.on(EVENTS.APP_SMOOTH_RESIZE, this._onSmoothResize)
-  }
+    // revert then rebuild
+    reverseSplit(this.splits)
+    this.splits = null
+    this.groups = null
 
-  removeResizeListeners() {
-    if (this._offResizeStart) {
-      this._offResizeStart()
-      this._offResizeStart = null
-    }
-    if (this._offSmoothResize) {
-      this._offSmoothResize()
-      this._offSmoothResize = null
-    }
+    // rebuild splits
+    await this.refreshSplits()
   }
 
-  _onResizeStart() {
-    if (!this.element || !this.targets || !this.targets.length) return
-
-    if (this.splits) {
-      reverseSplit(this.splits)
-
-      this.splits = null
-      this.groups = null
-    }
+  async handleEnter() {
+    const splitEmitter = splitText(this.targets)
 
-    this._needsResplit = true
-  }
+    const { splits, groups } = await new Promise(resolve => {
+      const onReady = (readySplits, groupMap) => {
+        // Clean up listener
+        if (splitEmitter.off) {
+          splitEmitter.off(EVENTS.APP_SPLITTEXT_READY, onReady)
+        }
 
-  _onSmoothResize() {
-    if (!this._needsResplit) return
-    if (!this.element || !this.targets || !this.targets.length) return
+        resolve({
+          splits: readySplits || [],
+          groups: groupMap || {},
+        })
+      }
 
-    if (this.observer && typeof this.observer.refresh === "function") {
-      this.observer.refresh()
-    }
+      // Listen for ready event once
+      splitEmitter.once(EVENTS.APP_SPLITTEXT_READY, onReady)
+    })
 
-    if (this.observer && (this.observer.isActive || this.observer.progress > 0)) {
-      this.handleEnter()
-    }
+    this.splits = splits
+    this.groups = groups
 
-    this._needsResplit = false
+    this._notifyReadyOnce(splits, groups)
   }
 
-  async handleEnter() {
-    const splitEmitter = splitText(this.targets)
+  async refreshSplits() {
+    if (this._rebuilding) return
+    this._rebuilding = true
 
+    // (Re)build fresh splits
+    const emitter = splitText(this.targets)
     const { splits, groups } = await new Promise(resolve => {
       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)
-      }
+      emitter.once(EVENTS.APP_SPLITTEXT_READY, onReady)
     })
 
     this.splits = splits
     this.groups = groups
+    this._rebuilding = false
 
-    this._notifyReadyOnce({ splits, groups })
+    this.isResizeCallback(splits, groups)
   }
 
   handleLeave() {
@@ -179,9 +169,6 @@ export default class SplitonScroll {
   }
 
   destroy() {
-    this.observer?.kill()
-    this.removeResizeListeners()
-
     if (this.splits) {
       reverseSplit(this.splits)
     }