text-slicer 1.4.0 → 1.4.1

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p={splitMode:"both",cssVariables:!1,dataAttributes:!1,keepWhitespaceNodes:!0,freezeWordWidths:!1},i=Object.freeze({word:"ts-word",char:"ts-char",whitespace:"ts-whitespace"}),o=" ",u=t=>typeof window>"u"||typeof document>"u"?null:t?typeof t=="string"?document.querySelector(t):t:null,a=t=>{const e=Intl.Segmenter;if(typeof e=="function"){const s=new e("en",{granularity:"grapheme"});return Array.from(s.segment(t),r=>r.segment)}return Array.from(t)},d=t=>t.split(o),h=t=>{const e={};return Object.keys(t).forEach(s=>{const r=t[s];r!==void 0&&(e[s]=r)}),e};exports.CLASSNAMES=i,exports.TextSlicer=class{el;original;opts;callbacks;charIndex;mounted;ro=null;frozen=!1;freezeWordWidthsBound=()=>{this.freezeWordWidths()};constructor(t={},e){const s=u(t.container);this.el=s,this.original=(r=>!!r&&typeof HTMLElement<"u"&&r instanceof HTMLElement)(s)?s.textContent?.toString()??"":"",this.opts={...p,...h(t)},this.callbacks=e,this.charIndex=0,this.mounted=!1}get metrics(){const t=this.original;return{wordTotal:t.length?d(t).length:0,charTotal:t.length,renderedAt:Date.now()}}init(){this.el&&(this.mounted=!0,this.split())}reinit(t,e){this.el&&(typeof t=="string"&&(this.original=t),e&&(this.opts={...this.opts,...h(e)}),this.split())}clear(){this.el&&(this.unfreezeWordWidths(),this.el.replaceChildren())}split(){if(!this.el)return;this.clear(),this.charIndex=0;const t=this.original,e=document.createDocumentFragment(),s=d(t);this.opts.splitMode==="chars"?this.appendChars(e,t):this.appendWords(e,s),this.el.appendChild(e),this.opts.cssVariables&&(this.el.style.setProperty("--word-total",String(s.length)),this.el.style.setProperty("--char-total",String(t.length))),this.scheduleFreezeWordWidths().then(()=>{this.callbacks?.onAfterRender?.(this.metrics)}).catch(()=>{})}destroy(){this.el&&(this.detachResizeObserver(),this.clear(),this.mounted=!1)}updateOptions(t){this.opts={...this.opts,...h(t)},this.mounted&&this.split()}appendWords(t,e){e.forEach((s,r)=>{if(this.opts.splitMode==="both"){const n=this.createWordSpan(r,s);for(const c of a(s)){const l=this.createCharSpan(c);n.append(l)}t.append(n)}else{const n=this.createWordSpan(r);n.append(document.createTextNode(s)),t.append(n)}r<e.length-1&&t.append(this.createSpaceSpan())})}appendChars(t,e){for(const s of a(e)){const r=this.createCharSpan(s);t.append(r)}}createWordSpan(t,e=""){const s=document.createElement("span");return s.classList.add(i.word),this.opts.dataAttributes&&e&&s.setAttribute("data-word",e),this.opts.cssVariables&&s.style.setProperty("--word-index",String(t)),s}createCharSpan(t){const e=document.createElement("span");return e.textContent=t,this.opts.dataAttributes&&e.setAttribute("data-char",t),t===o?(e.classList.add(i.whitespace),this.opts.keepWhitespaceNodes||(e.textContent=o)):(e.classList.add(i.char),this.opts.cssVariables&&e.style.setProperty("--char-index",String(this.charIndex)),this.charIndex+=1),e}createSpaceSpan(){const t=document.createElement("span");return t.classList.add(i.whitespace),t.textContent=o,t}async scheduleFreezeWordWidths(){if(this.el&&this.opts.freezeWordWidths){try{await document.fonts?.ready}catch{}await new Promise(t=>requestAnimationFrame(()=>t())),this.freezeWordWidths(),this.attachResizeObserver()}}freezeWordWidths(){this.el&&(this.el.querySelectorAll(`.${i.word}`).forEach(t=>{t.style.width="",t.style.flex="";const{width:e}=t.getBoundingClientRect();t.style.width=`${Math.ceil(e)}px`,t.style.flex="0 0 auto"}),this.frozen=!0)}unfreezeWordWidths(){!this.el||!this.frozen||(this.el.querySelectorAll(`.${i.word}`).forEach(t=>{t.style.width="",t.style.flex=""}),this.frozen=!1)}attachResizeObserver(){this.el&&this.opts.freezeWordWidths&&(this.ro||(this.ro=new ResizeObserver(()=>{this.freezeWordWidths()}),this.ro.observe(this.el)),window.addEventListener("resize",this.freezeWordWidthsBound,{passive:!0}))}detachResizeObserver(){this.ro&&(this.ro.disconnect(),this.ro=null),window.removeEventListener("resize",this.freezeWordWidthsBound)}};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p={splitMode:"both",cssVariables:!1,dataAttributes:!1,keepWhitespaceNodes:!0,freezeWordWidths:!1},i=Object.freeze({word:"ts-word",char:"ts-char",whitespace:"ts-whitespace"}),n=" ",u=e=>typeof window>"u"||typeof document>"u"?null:e?typeof e=="string"?document.querySelector(e):e:null,a=e=>{const t=Intl.Segmenter;if(typeof t=="function"){const s=new t("en",{granularity:"grapheme"});return Array.from(s.segment(e),r=>r.segment)}return Array.from(e)},d=e=>e.split(n),h=e=>{const t={};return Object.keys(e).forEach(s=>{const r=e[s];r!==void 0&&(t[s]=r)}),t};exports.CLASSNAMES=i,exports.TextSlicer=class{el;original;opts;callbacks;charIndex;mounted;ro=null;frozen=!1;freezeScheduled=!1;freezeWordWidthsBound=()=>{this.scheduleFreezeNow()};constructor(e={},t){const s=u(e.container);this.el=s,this.original=(r=>!!r&&typeof HTMLElement<"u"&&r instanceof HTMLElement)(s)?s.textContent?.toString()??"":"",this.opts={...p,...h(e)},this.callbacks=t,this.charIndex=0,this.mounted=!1}get metrics(){const e=this.original;return{wordTotal:e.length?d(e).length:0,charTotal:e.length,renderedAt:Date.now()}}init(){this.el&&(this.mounted=!0,this.split())}reinit(e,t){this.el&&(typeof e=="string"&&(this.original=e),t&&(this.opts={...this.opts,...h(t)}),this.split())}clear(){this.el&&(this.unfreezeWordWidths(),this.el.replaceChildren())}split(){if(!this.el)return;this.clear(),this.charIndex=0;const e=this.original,t=document.createDocumentFragment(),s=d(e);this.opts.splitMode==="chars"?this.appendChars(t,e):this.appendWords(t,s),this.el.appendChild(t),this.opts.cssVariables&&(this.el.style.setProperty("--word-total",String(s.length)),this.el.style.setProperty("--char-total",String(e.length))),this.scheduleFreezeWordWidths().then(()=>{this.callbacks?.onAfterRender?.(this.metrics)}).catch(()=>{})}destroy(){this.el&&(this.detachResizeObserver(),this.clear(),this.mounted=!1)}updateOptions(e){this.opts={...this.opts,...h(e)},this.mounted&&this.split()}appendWords(e,t){t.forEach((s,r)=>{if(this.opts.splitMode==="both"){const o=this.createWordSpan(r,s);for(const c of a(s)){const l=this.createCharSpan(c);o.append(l)}e.append(o)}else{const o=this.createWordSpan(r);o.append(document.createTextNode(s)),e.append(o)}r<t.length-1&&e.append(this.createSpaceSpan())})}appendChars(e,t){for(const s of a(t)){const r=this.createCharSpan(s);e.append(r)}}createWordSpan(e,t=""){const s=document.createElement("span");return s.classList.add(i.word),this.opts.dataAttributes&&t&&s.setAttribute("data-word",t),this.opts.cssVariables&&s.style.setProperty("--word-index",String(e)),s}createCharSpan(e){const t=document.createElement("span");return t.textContent=e,this.opts.dataAttributes&&t.setAttribute("data-char",e),e===n?(t.classList.add(i.whitespace),this.opts.keepWhitespaceNodes||(t.textContent=n)):(t.classList.add(i.char),this.opts.cssVariables&&t.style.setProperty("--char-index",String(this.charIndex)),this.charIndex+=1),t}createSpaceSpan(){const e=document.createElement("span");return e.classList.add(i.whitespace),e.textContent=n,e}scheduleFreezeNow(){this.el&&this.opts.freezeWordWidths&&(this.freezeScheduled||(this.freezeScheduled=!0,requestAnimationFrame(()=>{this.freezeScheduled=!1,this.freezeWordWidths()})))}async scheduleFreezeWordWidths(){if(this.el&&this.opts.freezeWordWidths){try{await document.fonts?.ready}catch{}await new Promise(e=>requestAnimationFrame(()=>e())),this.scheduleFreezeNow(),this.attachResizeObserver()}}measureWordWidths(){if(!this.el)return[];const e=this.el.querySelectorAll(`.${i.word}`);return Array.from(e,t=>{t.style.width="",t.style.flex="";const{width:s}=t.getBoundingClientRect();return Math.ceil(s)})}applyWordWidths(e){this.el&&this.el.querySelectorAll(`.${i.word}`).forEach((t,s)=>{const r=e[s]??0;t.style.width=`${r}px`,t.style.flex="0 0 auto"})}freezeWordWidths(){if(!this.el)return;const e=this.measureWordWidths();this.applyWordWidths(e),this.frozen=!0}unfreezeWordWidths(){!this.el||!this.frozen||(this.el.querySelectorAll(`.${i.word}`).forEach(e=>{e.style.width="",e.style.flex=""}),this.frozen=!1)}attachResizeObserver(){if(this.el&&this.opts.freezeWordWidths){if(!this.ro){this.ro=new ResizeObserver(()=>{this.scheduleFreezeNow()});try{this.ro.observe(this.el,{box:"border-box"})}catch{this.ro.observe(this.el)}}window.addEventListener("resize",this.freezeWordWidthsBound,{passive:!0})}}detachResizeObserver(){this.ro&&(this.ro.disconnect(),this.ro=null),window.removeEventListener("resize",this.freezeWordWidthsBound)}};

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export declare class TextSlicer {
     private mounted;
     private ro;
     private frozen;
+    private freezeScheduled;
     private freezeWordWidthsBound;
     constructor(options?: TextSlicerOptions, callbacks?: TextSlicerCallbacks);
     get metrics(): TextSlicerMetrics;
@@ -43,7 +44,10 @@ export declare class TextSlicer {
     private createWordSpan;
     private createCharSpan;
     private createSpaceSpan;
+    private scheduleFreezeNow;
     private scheduleFreezeWordWidths;
+    private measureWordWidths;
+    private applyWordWidths;
     private freezeWordWidths;
     private unfreezeWordWidths;
     private attachResizeObserver;

package/dist/index.es.js

@@ -1,16 +1,16 @@
-const u = { splitMode: "both", cssVariables: !1, dataAttributes: !1, keepWhitespaceNodes: !0, freezeWordWidths: !1 }, n = Object.freeze({ word: "ts-word", char: "ts-char", whitespace: "ts-whitespace" }), h = " ", f = (r) => typeof window > "u" || typeof document > "u" ? null : r ? typeof r == "string" ? document.querySelector(r) : r : null, d = (r) => {
-  const t = Intl.Segmenter;
-  if (typeof t == "function") {
-    const e = new t("en", { granularity: "grapheme" });
-    return Array.from(e.segment(r), (s) => s.segment);
+const u = { splitMode: "both", cssVariables: !1, dataAttributes: !1, keepWhitespaceNodes: !0, freezeWordWidths: !1 }, o = Object.freeze({ word: "ts-word", char: "ts-char", whitespace: "ts-whitespace" }), h = " ", f = (r) => typeof window > "u" || typeof document > "u" ? null : r ? typeof r == "string" ? document.querySelector(r) : r : null, d = (r) => {
+  const e = Intl.Segmenter;
+  if (typeof e == "function") {
+    const t = new e("en", { granularity: "grapheme" });
+    return Array.from(t.segment(r), (s) => s.segment);
   }
   return Array.from(r);
 }, c = (r) => r.split(h), a = (r) => {
-  const t = {};
-  return Object.keys(r).forEach((e) => {
-    const s = r[e];
-    s !== void 0 && (t[e] = s);
-  }), t;
+  const e = {};
+  return Object.keys(r).forEach((t) => {
+    const s = r[t];
+    s !== void 0 && (e[t] = s);
+  }), e;
 };
 class W {
   el;
@@ -21,22 +21,23 @@ class W {
   mounted;
   ro = null;
   frozen = !1;
+  freezeScheduled = !1;
   freezeWordWidthsBound = () => {
-    this.freezeWordWidths();
+    this.scheduleFreezeNow();
   };
-  constructor(t = {}, e) {
-    const s = f(t.container);
-    this.el = s, this.original = ((i) => !!i && typeof HTMLElement < "u" && i instanceof HTMLElement)(s) ? s.textContent?.toString() ?? "" : "", this.opts = { ...u, ...a(t) }, this.callbacks = e, this.charIndex = 0, this.mounted = !1;
+  constructor(e = {}, t) {
+    const s = f(e.container);
+    this.el = s, this.original = ((i) => !!i && typeof HTMLElement < "u" && i instanceof HTMLElement)(s) ? s.textContent?.toString() ?? "" : "", this.opts = { ...u, ...a(e) }, this.callbacks = t, this.charIndex = 0, this.mounted = !1;
   }
   get metrics() {
-    const t = this.original;
-    return { wordTotal: t.length ? c(t).length : 0, charTotal: t.length, renderedAt: Date.now() };
+    const e = this.original;
+    return { wordTotal: e.length ? c(e).length : 0, charTotal: e.length, renderedAt: Date.now() };
   }
   init() {
     this.el && (this.mounted = !0, this.split());
   }
-  reinit(t, e) {
-    this.el && (typeof t == "string" && (this.original = t), e && (this.opts = { ...this.opts, ...a(e) }), this.split());
+  reinit(e, t) {
+    this.el && (typeof e == "string" && (this.original = e), t && (this.opts = { ...this.opts, ...a(t) }), this.split());
   }
   clear() {
     this.el && (this.unfreezeWordWidths(), this.el.replaceChildren());
@@ -44,8 +45,8 @@ class W {
   split() {
     if (!this.el) return;
     this.clear(), this.charIndex = 0;
-    const t = this.original, e = document.createDocumentFragment(), s = c(t);
-    this.opts.splitMode === "chars" ? this.appendChars(e, t) : this.appendWords(e, s), this.el.appendChild(e), this.opts.cssVariables && (this.el.style.setProperty("--word-total", String(s.length)), this.el.style.setProperty("--char-total", String(t.length))), this.scheduleFreezeWordWidths().then(() => {
+    const e = this.original, t = document.createDocumentFragment(), s = c(e);
+    this.opts.splitMode === "chars" ? this.appendChars(t, e) : this.appendWords(t, s), this.el.appendChild(t), this.opts.cssVariables && (this.el.style.setProperty("--word-total", String(s.length)), this.el.style.setProperty("--char-total", String(e.length))), this.scheduleFreezeWordWidths().then(() => {
       this.callbacks?.onAfterRender?.(this.metrics);
     }).catch(() => {
     });
@@ -53,42 +54,47 @@ class W {
   destroy() {
     this.el && (this.detachResizeObserver(), this.clear(), this.mounted = !1);
   }
-  updateOptions(t) {
-    this.opts = { ...this.opts, ...a(t) }, this.mounted && this.split();
+  updateOptions(e) {
+    this.opts = { ...this.opts, ...a(e) }, this.mounted && this.split();
   }
-  appendWords(t, e) {
-    e.forEach((s, i) => {
+  appendWords(e, t) {
+    t.forEach((s, i) => {
       if (this.opts.splitMode === "both") {
-        const o = this.createWordSpan(i, s);
+        const n = this.createWordSpan(i, s);
         for (const l of d(s)) {
           const p = this.createCharSpan(l);
-          o.append(p);
+          n.append(p);
         }
-        t.append(o);
+        e.append(n);
       } else {
-        const o = this.createWordSpan(i);
-        o.append(document.createTextNode(s)), t.append(o);
+        const n = this.createWordSpan(i);
+        n.append(document.createTextNode(s)), e.append(n);
       }
-      i < e.length - 1 && t.append(this.createSpaceSpan());
+      i < t.length - 1 && e.append(this.createSpaceSpan());
     });
   }
-  appendChars(t, e) {
-    for (const s of d(e)) {
+  appendChars(e, t) {
+    for (const s of d(t)) {
       const i = this.createCharSpan(s);
-      t.append(i);
+      e.append(i);
     }
   }
-  createWordSpan(t, e = "") {
+  createWordSpan(e, t = "") {
     const s = document.createElement("span");
-    return s.classList.add(n.word), this.opts.dataAttributes && e && s.setAttribute("data-word", e), this.opts.cssVariables && s.style.setProperty("--word-index", String(t)), s;
+    return s.classList.add(o.word), this.opts.dataAttributes && t && s.setAttribute("data-word", t), this.opts.cssVariables && s.style.setProperty("--word-index", String(e)), s;
   }
-  createCharSpan(t) {
-    const e = document.createElement("span");
-    return e.textContent = t, this.opts.dataAttributes && e.setAttribute("data-char", t), t === h ? (e.classList.add(n.whitespace), this.opts.keepWhitespaceNodes || (e.textContent = h)) : (e.classList.add(n.char), this.opts.cssVariables && e.style.setProperty("--char-index", String(this.charIndex)), this.charIndex += 1), e;
+  createCharSpan(e) {
+    const t = document.createElement("span");
+    return t.textContent = e, this.opts.dataAttributes && t.setAttribute("data-char", e), e === h ? (t.classList.add(o.whitespace), this.opts.keepWhitespaceNodes || (t.textContent = h)) : (t.classList.add(o.char), this.opts.cssVariables && t.style.setProperty("--char-index", String(this.charIndex)), this.charIndex += 1), t;
   }
   createSpaceSpan() {
-    const t = document.createElement("span");
-    return t.classList.add(n.whitespace), t.textContent = h, t;
+    const e = document.createElement("span");
+    return e.classList.add(o.whitespace), e.textContent = h, e;
+  }
+  scheduleFreezeNow() {
+    this.el && this.opts.freezeWordWidths && (this.freezeScheduled || (this.freezeScheduled = !0, requestAnimationFrame(() => {
+      this.freezeScheduled = !1, this.freezeWordWidths();
+    })));
   }
   async scheduleFreezeWordWidths() {
     if (this.el && this.opts.freezeWordWidths) {
@@ -96,31 +102,54 @@ class W {
         await document.fonts?.ready;
       } catch {
       }
-      await new Promise((t) => requestAnimationFrame(() => t())), this.freezeWordWidths(), this.attachResizeObserver();
+      await new Promise((e) => requestAnimationFrame(() => e())), this.scheduleFreezeNow(), this.attachResizeObserver();
     }
   }
-  freezeWordWidths() {
-    this.el && (this.el.querySelectorAll(`.${n.word}`).forEach((t) => {
+  measureWordWidths() {
+    if (!this.el) return [];
+    const e = this.el.querySelectorAll(`.${o.word}`);
+    return Array.from(e, (t) => {
       t.style.width = "", t.style.flex = "";
-      const { width: e } = t.getBoundingClientRect();
-      t.style.width = `${Math.ceil(e)}px`, t.style.flex = "0 0 auto";
-    }), this.frozen = !0);
+      const { width: s } = t.getBoundingClientRect();
+      return Math.ceil(s);
+    });
+  }
+  applyWordWidths(e) {
+    this.el && this.el.querySelectorAll(`.${o.word}`).forEach((t, s) => {
+      const i = e[s] ?? 0;
+      t.style.width = `${i}px`, t.style.flex = "0 0 auto";
+    });
+  }
+  freezeWordWidths() {
+    if (!this.el) return;
+    const e = this.measureWordWidths();
+    this.applyWordWidths(e), this.frozen = !0;
   }
   unfreezeWordWidths() {
-    !this.el || !this.frozen || (this.el.querySelectorAll(`.${n.word}`).forEach((t) => {
-      t.style.width = "", t.style.flex = "";
+    !this.el || !this.frozen || (this.el.querySelectorAll(`.${o.word}`).forEach((e) => {
+      e.style.width = "", e.style.flex = "";
     }), this.frozen = !1);
   }
   attachResizeObserver() {
-    this.el && this.opts.freezeWordWidths && (this.ro || (this.ro = new ResizeObserver(() => {
-      this.freezeWordWidths();
-    }), this.ro.observe(this.el)), window.addEventListener("resize", this.freezeWordWidthsBound, { passive: !0 }));
+    if (this.el && this.opts.freezeWordWidths) {
+      if (!this.ro) {
+        this.ro = new ResizeObserver(() => {
+          this.scheduleFreezeNow();
+        });
+        try {
+          this.ro.observe(this.el, { box: "border-box" });
+        } catch {
+          this.ro.observe(this.el);
+        }
+      }
+      window.addEventListener("resize", this.freezeWordWidthsBound, { passive: !0 });
+    }
   }
   detachResizeObserver() {
     this.ro && (this.ro.disconnect(), this.ro = null), window.removeEventListener("resize", this.freezeWordWidthsBound);
   }
 }
 export {
-  n as CLASSNAMES,
+  o as CLASSNAMES,
   W as TextSlicer
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(n,o){typeof exports=="object"&&typeof module<"u"?o(exports):typeof define=="function"&&define.amd?define(["exports"],o):o((n=typeof globalThis<"u"?globalThis:n||self).TextSlicer={})})(this,function(n){"use strict";const o={splitMode:"both",cssVariables:!1,dataAttributes:!1,keepWhitespaceNodes:!0,freezeWordWidths:!1},i=Object.freeze({word:"ts-word",char:"ts-char",whitespace:"ts-whitespace"}),a=" ",p=t=>typeof window>"u"||typeof document>"u"?null:t?typeof t=="string"?document.querySelector(t):t:null,c=t=>{const e=Intl.Segmenter;if(typeof e=="function"){const s=new e("en",{granularity:"grapheme"});return Array.from(s.segment(t),r=>r.segment)}return Array.from(t)},l=t=>t.split(a),d=t=>{const e={};return Object.keys(t).forEach(s=>{const r=t[s];r!==void 0&&(e[s]=r)}),e};n.CLASSNAMES=i,n.TextSlicer=class{el;original;opts;callbacks;charIndex;mounted;ro=null;frozen=!1;freezeWordWidthsBound=()=>{this.freezeWordWidths()};constructor(t={},e){const s=p(t.container);this.el=s,this.original=(r=>!!r&&typeof HTMLElement<"u"&&r instanceof HTMLElement)(s)?s.textContent?.toString()??"":"",this.opts={...o,...d(t)},this.callbacks=e,this.charIndex=0,this.mounted=!1}get metrics(){const t=this.original;return{wordTotal:t.length?l(t).length:0,charTotal:t.length,renderedAt:Date.now()}}init(){this.el&&(this.mounted=!0,this.split())}reinit(t,e){this.el&&(typeof t=="string"&&(this.original=t),e&&(this.opts={...this.opts,...d(e)}),this.split())}clear(){this.el&&(this.unfreezeWordWidths(),this.el.replaceChildren())}split(){if(!this.el)return;this.clear(),this.charIndex=0;const t=this.original,e=document.createDocumentFragment(),s=l(t);this.opts.splitMode==="chars"?this.appendChars(e,t):this.appendWords(e,s),this.el.appendChild(e),this.opts.cssVariables&&(this.el.style.setProperty("--word-total",String(s.length)),this.el.style.setProperty("--char-total",String(t.length))),this.scheduleFreezeWordWidths().then(()=>{this.callbacks?.onAfterRender?.(this.metrics)}).catch(()=>{})}destroy(){this.el&&(this.detachResizeObserver(),this.clear(),this.mounted=!1)}updateOptions(t){this.opts={...this.opts,...d(t)},this.mounted&&this.split()}appendWords(t,e){e.forEach((s,r)=>{if(this.opts.splitMode==="both"){const h=this.createWordSpan(r,s);for(const f of c(s)){const u=this.createCharSpan(f);h.append(u)}t.append(h)}else{const h=this.createWordSpan(r);h.append(document.createTextNode(s)),t.append(h)}r<e.length-1&&t.append(this.createSpaceSpan())})}appendChars(t,e){for(const s of c(e)){const r=this.createCharSpan(s);t.append(r)}}createWordSpan(t,e=""){const s=document.createElement("span");return s.classList.add(i.word),this.opts.dataAttributes&&e&&s.setAttribute("data-word",e),this.opts.cssVariables&&s.style.setProperty("--word-index",String(t)),s}createCharSpan(t){const e=document.createElement("span");return e.textContent=t,this.opts.dataAttributes&&e.setAttribute("data-char",t),t===a?(e.classList.add(i.whitespace),this.opts.keepWhitespaceNodes||(e.textContent=a)):(e.classList.add(i.char),this.opts.cssVariables&&e.style.setProperty("--char-index",String(this.charIndex)),this.charIndex+=1),e}createSpaceSpan(){const t=document.createElement("span");return t.classList.add(i.whitespace),t.textContent=a,t}async scheduleFreezeWordWidths(){if(this.el&&this.opts.freezeWordWidths){try{await document.fonts?.ready}catch{}await new Promise(t=>requestAnimationFrame(()=>t())),this.freezeWordWidths(),this.attachResizeObserver()}}freezeWordWidths(){this.el&&(this.el.querySelectorAll(`.${i.word}`).forEach(t=>{t.style.width="",t.style.flex="";const{width:e}=t.getBoundingClientRect();t.style.width=`${Math.ceil(e)}px`,t.style.flex="0 0 auto"}),this.frozen=!0)}unfreezeWordWidths(){!this.el||!this.frozen||(this.el.querySelectorAll(`.${i.word}`).forEach(t=>{t.style.width="",t.style.flex=""}),this.frozen=!1)}attachResizeObserver(){this.el&&this.opts.freezeWordWidths&&(this.ro||(this.ro=new ResizeObserver(()=>{this.freezeWordWidths()}),this.ro.observe(this.el)),window.addEventListener("resize",this.freezeWordWidthsBound,{passive:!0}))}detachResizeObserver(){this.ro&&(this.ro.disconnect(),this.ro=null),window.removeEventListener("resize",this.freezeWordWidthsBound)}},Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+(function(o,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):n((o=typeof globalThis<"u"?globalThis:o||self).TextSlicer={})})(this,function(o){"use strict";const n={splitMode:"both",cssVariables:!1,dataAttributes:!1,keepWhitespaceNodes:!0,freezeWordWidths:!1},i=Object.freeze({word:"ts-word",char:"ts-char",whitespace:"ts-whitespace"}),d=" ",p=e=>typeof window>"u"||typeof document>"u"?null:e?typeof e=="string"?document.querySelector(e):e:null,c=e=>{const t=Intl.Segmenter;if(typeof t=="function"){const s=new t("en",{granularity:"grapheme"});return Array.from(s.segment(e),r=>r.segment)}return Array.from(e)},l=e=>e.split(d),a=e=>{const t={};return Object.keys(e).forEach(s=>{const r=e[s];r!==void 0&&(t[s]=r)}),t};o.CLASSNAMES=i,o.TextSlicer=class{el;original;opts;callbacks;charIndex;mounted;ro=null;frozen=!1;freezeScheduled=!1;freezeWordWidthsBound=()=>{this.scheduleFreezeNow()};constructor(e={},t){const s=p(e.container);this.el=s,this.original=(r=>!!r&&typeof HTMLElement<"u"&&r instanceof HTMLElement)(s)?s.textContent?.toString()??"":"",this.opts={...n,...a(e)},this.callbacks=t,this.charIndex=0,this.mounted=!1}get metrics(){const e=this.original;return{wordTotal:e.length?l(e).length:0,charTotal:e.length,renderedAt:Date.now()}}init(){this.el&&(this.mounted=!0,this.split())}reinit(e,t){this.el&&(typeof e=="string"&&(this.original=e),t&&(this.opts={...this.opts,...a(t)}),this.split())}clear(){this.el&&(this.unfreezeWordWidths(),this.el.replaceChildren())}split(){if(!this.el)return;this.clear(),this.charIndex=0;const e=this.original,t=document.createDocumentFragment(),s=l(e);this.opts.splitMode==="chars"?this.appendChars(t,e):this.appendWords(t,s),this.el.appendChild(t),this.opts.cssVariables&&(this.el.style.setProperty("--word-total",String(s.length)),this.el.style.setProperty("--char-total",String(e.length))),this.scheduleFreezeWordWidths().then(()=>{this.callbacks?.onAfterRender?.(this.metrics)}).catch(()=>{})}destroy(){this.el&&(this.detachResizeObserver(),this.clear(),this.mounted=!1)}updateOptions(e){this.opts={...this.opts,...a(e)},this.mounted&&this.split()}appendWords(e,t){t.forEach((s,r)=>{if(this.opts.splitMode==="both"){const h=this.createWordSpan(r,s);for(const u of c(s)){const f=this.createCharSpan(u);h.append(f)}e.append(h)}else{const h=this.createWordSpan(r);h.append(document.createTextNode(s)),e.append(h)}r<t.length-1&&e.append(this.createSpaceSpan())})}appendChars(e,t){for(const s of c(t)){const r=this.createCharSpan(s);e.append(r)}}createWordSpan(e,t=""){const s=document.createElement("span");return s.classList.add(i.word),this.opts.dataAttributes&&t&&s.setAttribute("data-word",t),this.opts.cssVariables&&s.style.setProperty("--word-index",String(e)),s}createCharSpan(e){const t=document.createElement("span");return t.textContent=e,this.opts.dataAttributes&&t.setAttribute("data-char",e),e===d?(t.classList.add(i.whitespace),this.opts.keepWhitespaceNodes||(t.textContent=d)):(t.classList.add(i.char),this.opts.cssVariables&&t.style.setProperty("--char-index",String(this.charIndex)),this.charIndex+=1),t}createSpaceSpan(){const e=document.createElement("span");return e.classList.add(i.whitespace),e.textContent=d,e}scheduleFreezeNow(){this.el&&this.opts.freezeWordWidths&&(this.freezeScheduled||(this.freezeScheduled=!0,requestAnimationFrame(()=>{this.freezeScheduled=!1,this.freezeWordWidths()})))}async scheduleFreezeWordWidths(){if(this.el&&this.opts.freezeWordWidths){try{await document.fonts?.ready}catch{}await new Promise(e=>requestAnimationFrame(()=>e())),this.scheduleFreezeNow(),this.attachResizeObserver()}}measureWordWidths(){if(!this.el)return[];const e=this.el.querySelectorAll(`.${i.word}`);return Array.from(e,t=>{t.style.width="",t.style.flex="";const{width:s}=t.getBoundingClientRect();return Math.ceil(s)})}applyWordWidths(e){this.el&&this.el.querySelectorAll(`.${i.word}`).forEach((t,s)=>{const r=e[s]??0;t.style.width=`${r}px`,t.style.flex="0 0 auto"})}freezeWordWidths(){if(!this.el)return;const e=this.measureWordWidths();this.applyWordWidths(e),this.frozen=!0}unfreezeWordWidths(){!this.el||!this.frozen||(this.el.querySelectorAll(`.${i.word}`).forEach(e=>{e.style.width="",e.style.flex=""}),this.frozen=!1)}attachResizeObserver(){if(this.el&&this.opts.freezeWordWidths){if(!this.ro){this.ro=new ResizeObserver(()=>{this.scheduleFreezeNow()});try{this.ro.observe(this.el,{box:"border-box"})}catch{this.ro.observe(this.el)}}window.addEventListener("resize",this.freezeWordWidthsBound,{passive:!0})}}detachResizeObserver(){this.ro&&(this.ro.disconnect(),this.ro=null),window.removeEventListener("resize",this.freezeWordWidthsBound)}},Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "text-slicer",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "TextSlicer is designed to split text within an HTML element into separate words and/or characters, wrapping each word and/or character in separate span elements.",
   "author": "ux-ui.pro",
   "license": "MIT",