@linear_non/stellar-kit 2.1.5 → 2.1.7

package/classes/Component.js

@@ -1,32 +1,27 @@
-// Component.js
-import { qs, bounds } from "../utils"
+import { bounds } from "../utils"
 
 export default class Component {
-  constructor(obj) {
-    this.el = obj.el || null
-    this.renderer = obj.renderer || null
-    const id = obj.index || 0
-    const data = obj.data || null
+  constructor({ el = null, index = 0, renderer = null, data = null } = {}) {
+    this.el = el
+    this.index = index
+    this.renderer = renderer
+    this.data = data
 
-    this.hasTick = data?.hasTick || false
-    this.hasAnimateIn = data?.hasAnimateIn || false
-    this.hasAnimateOut = data?.hasAnimateOut || false
-    this.hasAnimateOnScroll = data?.hasAnimateOnScroll || false
-
-    if (this.el) this.rect = bounds(this.el)
+    this.rect = this.el ? bounds(this.el) : null
   }
 
-  setup() {
-    if (!this.name) return
-    this.el = qs(`[data-${this.name}]`)
-  }
+  setup() {}
 
   animateIn() {}
   animateOut() {}
   animateOnScroll() {}
 
-  tick(obj) {}
-  resize() {}
+  tick(_ctx) {}
+
+  resize() {
+    if (this.el) this.rect = bounds(this.el)
+  }
+
   smoothResize() {}
 
   on() {}
@@ -41,6 +36,5 @@ export default class Component {
   render() {
     this.setup()
     this.on()
-    if (this.hasAnimateOnScroll) this.animateOnScroll()
   }
 }

package/classes/Manager.js

@@ -1,73 +1,76 @@
-// Manager.js
 import { qsa } from "../utils"
 
 export default class Manager {
-  constructor() {
+  constructor({ renderer = null, data = {} } = {}) {
     this.components = []
+
+    this.renderer = renderer
+    this.data = data
   }
 
-  addComponent(obj, renderer) {
-    const { name, instance } = obj
-    const els = qsa(`[data-${name}]`)
-    const data = {}
-    if (els.length === 0) return
+  addComponent(def) {
+    if (!def || !def.instance || !def.name) return
+
+    const { name, instance, data = null } = def
+
+    // resolve selector from name
+    let selector
+    if (name.startsWith(".")) {
+      // "Class: .c-hero"
+      selector = name
+    } else if (name.startsWith("[")) {
+      // "Dataset: [data-video]"
+      selector = name
+    } else {
+      // "Transform: hero" -> "[data-hero]"
+      selector = `[data-${name}]`
+    }
 
-    data.hasTick = obj.hasTick || false
-    data.hasAnimateIn = obj.hasAnimateIn || false
-    data.hasAnimateOut = obj.hasAnimateOut || false
-    data.hasAnimateOnScroll = obj.hasAnimateOnScroll || false
+    const els = qsa(selector)
+    if (!els.length) return
+
+    const mergedData = data ? { ...this.data, ...data } : this.data
 
     els.forEach((el, index) => {
-      const component = new instance({ index, el, data, renderer })
-      this.components.push({ name, component })
+      const c = new instance({
+        el,
+        index,
+        name,
+        renderer: this.renderer,
+        data: mergedData,
+      })
+      this.components.push(c)
     })
   }
 
-  initializeComponents() {
-    this.components.forEach(({ component }) => {
-      component?.render()
+  _call(method, ...args) {
+    this.components.forEach(c => {
+      const fn = c[method]
+      if (typeof fn === "function") fn.apply(c, args)
     })
   }
 
-  animateIn() {
-    this.components.forEach(({ component }) => {
-      component.hasAnimateIn && component.animateIn()
-    })
+  initialize() {
+    this._call("render")
   }
 
-  animateOut() {
-    this.components.forEach(({ component }) => {
-      component.hasAnimateOut && component.animateOut()
-    })
+  animateIn() {
+    this._call("animateIn")
   }
 
-  animateOnScroll() {
-    this.components.forEach(({ component }) => {
-      component.hasAnimateOnScroll && component.animateOnScroll()
-    })
+  animateOut() {
+    this._call("animateOut")
   }
 
-  update(obj) {
-    this.components.forEach(({ component }) => {
-      component.hasTick && component.tick(obj)
-    })
+  tick(obj) {
+    this._call("tick", obj)
   }
 
   resize() {
-    this.components.forEach(({ component }) => {
-      component?.resize()
-    })
-  }
-
-  smoothResize() {
-    this.components.forEach(({ component }) => {
-      component?.smoothResize()
-    })
+    this._call("resize")
   }
 
   destroy() {
-    this.components.forEach(({ component }) => {
-      component?.destroy()
-    })
+    this._call("destroy")
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-kit",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "description": "Stellar frontend core for Non-Linear Studio projects.",
   "main": "index.js",
   "exports": {

package/plugins/Observer.js

@@ -1,6 +1,5 @@
-// libs/observer/Observer.js
-import { ScrollTrigger } from "../libraries/gsap"
 import { Emitter } from "../events"
+import { ScrollTrigger } from "../libraries/gsap"
 
 const DEFAULTS = {
   trigger: null,
@@ -14,49 +13,83 @@ const DEFAULTS = {
 export default class Observer extends Emitter {
   constructor(opts = {}) {
     super()
-    this.opts = { ...DEFAULTS, ...opts }
-    if (!this.opts.trigger) throw new Error("Observer: `trigger` is required")
+
+    const merged = { ...DEFAULTS, ...opts }
+    if (!merged.trigger) {
+      throw new Error("Observer: `trigger` is required")
+    }
+
+    this.opts = merged
+
+    const { trigger, start, end, scrub, once, markers } = this.opts
+    const forward = type => self => this.emit(type, self, this)
 
     this.st = ScrollTrigger.create({
-      trigger: this.opts.trigger,
-      start: this.opts.start,
-      end: this.opts.end,
-      scrub: this.opts.scrub,
-      once: this.opts.once,
-      markers: this.opts.markers,
-      onEnter: self => this.emit("enter", self, this),
-      onLeave: self => this.emit("leave", self, this),
-      onEnterBack: self => this.emit("enterBack", self, this),
-      onLeaveBack: self => this.emit("leaveBack", self, this),
-      onUpdate: self => this.emit("update", self, this),
+      trigger,
+      start,
+      end,
+      scrub,
+      once,
+      markers,
+      onEnter: forward("enter"),
+      onLeave: forward("leave"),
+      onEnterBack: forward("enterBack"),
+      onLeaveBack: forward("leaveBack"),
+      onUpdate: forward("update"),
     })
 
-    if (this.opts.listeners) {
-      for (const [type, fn] of Object.entries(this.opts.listeners)) {
+    const listeners = this.opts.listeners
+    if (listeners) {
+      for (const [type, fn] of Object.entries(listeners)) {
         this.on(type, fn)
       }
     }
   }
 
+  // allow ["enter","enterBack"]
+  on(types, fn) {
+    if (Array.isArray(types)) {
+      types.forEach(t => super.on(t, fn))
+    } else {
+      super.on(types, fn)
+    }
+    return this
+  }
+
+  off(types, fn) {
+    if (Array.isArray(types)) {
+      types.forEach(t => super.off(t, fn))
+    } else {
+      super.off(types, fn)
+    }
+    return this
+  }
+
   refresh() {
     this.st?.refresh()
     return this
   }
+
   enable() {
     this.st?.enable()
     return this
   }
+
   disable() {
     this.st?.disable()
     return this
   }
 
-  update({ start, end, scrub, markers } = {}) {
-    if (!this.st) return this
+  update(next) {
+    if (!this.st || !next) return this
+
+    const { start, end, scrub, markers } = next
+
     if (start !== undefined) this.st.vars.start = start
     if (end !== undefined) this.st.vars.end = end
     if (scrub !== undefined) this.st.vars.scrub = scrub
     if (markers !== undefined) this.st.vars.markers = markers
+
     this.st.refresh()
     return this
   }
@@ -68,13 +101,14 @@ export default class Observer extends Emitter {
     return this
   }
 
-  // Handy getters
   get progress() {
     return this.st?.progress ?? 0
   }
+
   get isActive() {
     return !!this.st?.isActive
   }
+
   get direction() {
     return this.st?.direction ?? 1
   }

package/plugins/SplitText.js

@@ -1,56 +1,66 @@
-// splitText.js
 import { Emitter, EVENTS } from "../events"
 import { SplitText } from "../libraries/gsap"
 
 export const splitText = data => {
   const emitter = new Emitter()
   const splits = []
-  let splitted = 0
-  const totalSplits = data.length
+  const groups = {}
+
+  // Normalize to array and drop nulls/undefined
+  const items = Array.from(data || []).filter(Boolean)
+
+  // When no items, emit ready immediately
+  if (items.length === 0) {
+    queueMicrotask(() => {
+      emitter.emit(EVENTS.APP_SPLITTEXT_READY, splits, groups)
+    })
+    return emitter
+  }
+
+  items.forEach((el, elIndex) => {
+    const raw = el.dataset.split || ""
+    const types = raw
+      .split(/[,\s]+/)
+      .map(t => t.trim())
+      .filter(Boolean)
 
-  data.forEach(el => {
-    const dataset = el.dataset.split
-    const data = dataset.split(",")
-    const split = {}
     const classes = {}
 
-    split.el = el
-    splitted++
+    types.forEach(t => {
+      if (t === "lines") classes.linesClass = `line-${elIndex}`
+      if (t === "words") classes.wordsClass = `word-${elIndex}`
+      if (t === "chars") classes.charsClass = `char-${elIndex} chr`
+    })
+
+    const typeString = types.length ? types.join(",") : raw
 
-    data.forEach((type, i) => {
-      const filter = type.trim()
-      if (filter == "lines") classes.linesClass = `line-${i}`
-      if (filter == "words") classes.wordsClass = `word-${i}`
-      if (filter == "chars") classes.charsClass = `char-${i} chr-++`
+    const splitInstance = new SplitText(el, {
+      type: typeString,
+      ...classes,
     })
 
-    document.fonts.ready
-      .then(() => {
-        console.log("--FONT READY--")
-
-        const splitText = new SplitText(el, {
-          type: dataset.toString(),
-          ...classes,
-        })
-
-        splits.push(splitText)
-
-        if (splitted == totalSplits) {
-          setTimeout(() => {
-            emitter.emit(EVENTS.APP_SPLITTEXT_READY, splits)
-          }, 0) // Use a small delay to ensure the event listener is set up
-        }
-      })
-      .catch(error => {
-        console.error("Error loading fonts:", error)
-      })
+    splits.push(splitInstance)
+
+    // Grouping via data-split-group attribute if present
+    const groupName = el.dataset.splitGroup
+    if (groupName) {
+      if (!groups[groupName]) groups[groupName] = []
+      groups[groupName].push(splitInstance)
+    }
+  })
+
+  queueMicrotask(() => {
+    emitter.emit(EVENTS.APP_SPLITTEXT_READY, splits, groups)
   })
 
   return emitter
 }
 
-export const reverseSplit = data => {
-  data.forEach(split => {
-    split.revert()
-  })
+export const reverseSplit = splits => {
+  if (!splits) return
+  for (const split of splits) {
+    if (split && typeof split.revert === "function") {
+      split.revert()
+    }
+  }
 }