text-slicer 1.4.0-dev.6 → 1.4.0-dev.8

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";class r{textElement;originalText;splitMode;cssVariables;dataAttributes;waitForFonts;fontReadyTimeout;stabilizeLayout;nowrapWords;innerWrapper;charIndexCounter;destroyed;constructor(t={}){const{container:e=".text-slicer",splitMode:s="both",cssVariables:a=!1,dataAttributes:n=!1,waitForFonts:o=!1,fontReadyTimeout:l=1500,stabilizeLayout:h=!1,nowrapWords:c=!1,innerWrapper:i=!0}=t;this.textElement=typeof e=="string"?document.querySelector(e):e??null,this.originalText="",this.splitMode=s,this.cssVariables=a,this.dataAttributes=n,this.waitForFonts=o,this.fontReadyTimeout=l,this.stabilizeLayout=h,this.nowrapWords=c,this.innerWrapper=i,this.charIndexCounter=0,this.destroyed=!1,this.textElement&&(this.originalText=(this.textElement.textContent??"").trim(),this.originalText.length>0&&this.textElement.setAttribute("aria-label",this.originalText))}async init(){this.textElement&&(this.waitForFonts&&await r.waitFontsForElement(this.textElement,this.fontReadyTimeout).catch(()=>{}),await r.nextFrame(),this.split())}destroy(){this.textElement&&!this.destroyed&&(this.textElement.innerHTML="",this.textElement.textContent=this.originalText,this.textElement.removeAttribute("aria-hidden"),this.destroyed=!0)}split(){if(!this.textElement)return;this.clear(),this.charIndexCounter=0;const t=document.createDocumentFragment(),e=this.originalText.split(" "),s=this.originalText.length;this.splitMode==="words"||this.splitMode==="both"?this.splitWords(t,e):this.splitChars(t),this.textElement.appendChild(t),r.forceReflow(this.textElement),this.cssVariables&&(this.textElement.style.setProperty("--word-total",String(e.length)),this.textElement.style.setProperty("--char-total",String(s))),this.textElement.setAttribute("aria-hidden","false")}splitWords(t,e){e.forEach((s,a)=>{if(this.splitMode==="both"){const n=this.createWordSpan(a,s);for(const o of s)n.append(this.createCharSpan(o));t.append(n)}else{const n=this.createWordSpan(a);n.append(document.createTextNode(s)),t.append(n)}a<e.length-1&&t.append(r.createSpaceSpan())})}splitChars(t){for(const e of this.originalText)t.append(this.createCharSpan(e))}createWordSpan(t,e=""){const s=document.createElement("span");return s.classList.add("word"),this.dataAttributes&&s.setAttribute("data-word",e),this.cssVariables&&s.style.setProperty("--word-index",String(t)),this.stabilizeLayout&&(r.applyStableInlineBox(s),this.nowrapWords&&(s.style.whiteSpace="nowrap")),s}createCharSpan(t){const e=document.createElement("span");if(t===" ")return e.classList.add("whitespace"),e.textContent=" ",e;if(e.classList.add("char"),e.textContent=t,e.style.position="relative",e.style.color="transparent",this.cssVariables&&e.style.setProperty("--char-index",String(this.charIndexCounter)),this.dataAttributes&&e.setAttribute("data-char",t),this.stabilizeLayout&&r.applyStableInlineBox(e),this.innerWrapper){const s=document.createElement("span");s.classList.add("char-inner"),s.textContent=t,s.style.position="absolute",s.style.left="0",s.style.top="0",s.style.right="auto",s.style.bottom="auto",e.appendChild(s)}return this.charIndexCounter+=1,e}static createSpaceSpan(){const t=document.createElement("span");return t.classList.add("whitespace"),t.textContent=" ",t}clear(){this.textElement&&(this.textElement.innerHTML="")}static applyStableInlineBox(t){t.style.display="inline-block",t.style.verticalAlign="baseline",t.style.lineHeight="1em",t.style.backfaceVisibility="hidden",t.style.willChange="transform"}static forceReflow(t){t.offsetHeight}static nextFrame(){return new Promise(t=>requestAnimationFrame(()=>t()))}static getFontFaceSet(){const t=document;return typeof t.fonts=="object"&&t.fonts?t.fonts:null}static async waitFontsForElement(t,e){const s=r.getFontFaceSet();if(!s)return;const a=getComputedStyle(t),n=a.fontFamily.split(",").map(i=>i.trim().replace(/^['"]|['"]$/g,"")).filter(i=>i.length>0),o=a.fontStyle||"normal",l=a.fontWeight||"400",h=a.fontStretch||"normal",c=n.map(i=>`${o} ${l} ${h} 1em ${i}`).map(i=>s.load(i));await Promise.race([Promise.all(c).then(()=>{}),new Promise(i=>window.setTimeout(i,e))])}}module.exports=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l={splitMode:"both",cssVariables:!1,dataAttributes:!1,keepWhitespaceNodes:!0},a=Object.freeze({word:"ts-word",char:"ts-char",whitespace:"ts-whitespace"}),i=" ",u=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),n=>n.segment)}return Array.from(t)},h=t=>t.split(i),o=t=>{const e={};return Object.keys(t).forEach(s=>{const n=t[s];n!==void 0&&(e[s]=n)}),e};exports.CLASSNAMES=a,exports.TextSlicer=class{el;original;opts;callbacks;charIndex;mounted;constructor(t={},e){const s=u(t.container);this.el=s,this.original=(n=>!!n&&typeof HTMLElement<"u"&&n instanceof HTMLElement)(s)?s.textContent?.toString()??"":"",this.opts={...l,...o(t)},this.callbacks=e,this.charIndex=0,this.mounted=!1}get metrics(){const t=this.original;return{wordTotal:t.length?h(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,...o(e)}),this.split())}clear(){this.el&&this.el.replaceChildren()}split(){if(!this.el)return;this.clear(),this.charIndex=0;const t=this.original,e=document.createDocumentFragment(),s=h(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.callbacks?.onAfterRender?.(this.metrics)}destroy(){this.el&&(this.clear(),this.mounted=!1)}updateOptions(t){this.opts={...this.opts,...o(t)},this.mounted&&this.split()}appendWords(t,e){e.forEach((s,n)=>{if(this.opts.splitMode==="both"){const r=this.createWordSpan(n,s);for(const p of c(s)){const d=this.createCharSpan(p);r.append(d)}t.append(r)}else{const r=this.createWordSpan(n);r.append(document.createTextNode(s)),t.append(r)}n<e.length-1&&t.append(this.createSpaceSpan())})}appendChars(t,e){for(const s of c(e)){const n=this.createCharSpan(s);t.append(n)}}createWordSpan(t,e=""){const s=document.createElement("span");return s.classList.add(a.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===i?(e.classList.add(a.whitespace),this.opts.keepWhitespaceNodes||(e.textContent=i)):(e.classList.add(a.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(a.whitespace),t.textContent=i,t}};

package/dist/index.d.ts

@@ -4,40 +4,39 @@ export interface TextSlicerOptions {
     splitMode?: SplitMode;
     cssVariables?: boolean;
     dataAttributes?: boolean;
-    waitForFonts?: boolean;
-    fontReadyTimeout?: number;
-    stabilizeLayout?: boolean;
-    nowrapWords?: boolean;
-    innerWrapper?: boolean;
+    keepWhitespaceNodes?: boolean;
 }
-declare class TextSlicer {
-    private readonly textElement;
-    private originalText;
-    private readonly splitMode;
-    private readonly cssVariables;
-    private readonly dataAttributes;
-    private readonly waitForFonts;
-    private readonly fontReadyTimeout;
-    private readonly stabilizeLayout;
-    private readonly nowrapWords;
-    private readonly innerWrapper;
-    private charIndexCounter;
-    private destroyed;
-    constructor(options?: TextSlicerOptions);
-    init(): Promise<void>;
+export interface TextSlicerMetrics {
+    wordTotal: number;
+    charTotal: number;
+    renderedAt: number;
+}
+export interface TextSlicerCallbacks {
+    onAfterRender?: (metrics: TextSlicerMetrics) => void;
+}
+export declare const CLASSNAMES: Readonly<{
+    word: "ts-word";
+    char: "ts-char";
+    whitespace: "ts-whitespace";
+}>;
+export declare class TextSlicer {
+    private readonly el;
+    private original;
+    private opts;
+    private callbacks;
+    private charIndex;
+    private mounted;
+    constructor(options?: TextSlicerOptions, callbacks?: TextSlicerCallbacks);
+    get metrics(): TextSlicerMetrics;
+    init(): void;
+    reinit(newText?: string, next?: Partial<TextSlicerOptions>): void;
+    clear(): void;
+    split(): void;
     destroy(): void;
-    private split;
-    private splitWords;
-    private splitChars;
+    updateOptions(next: Partial<TextSlicerOptions>): void;
+    private appendWords;
+    private appendChars;
     private createWordSpan;
     private createCharSpan;
-    private static createSpaceSpan;
-    private clear;
-    private static applyStableInlineBox;
-    private static forceReflow;
-    private static nextFrame;
-    private static getFontFaceSet;
-    /** Ждём именно те шрифты, что применяются к элементу */
-    private static waitFontsForElement;
+    private createSpaceSpan;
 }
-export default TextSlicer;

package/dist/index.es.js

@@ -1,90 +1,89 @@
-class r {
-  textElement;
-  originalText;
-  splitMode;
-  cssVariables;
-  dataAttributes;
-  waitForFonts;
-  fontReadyTimeout;
-  stabilizeLayout;
-  nowrapWords;
-  innerWrapper;
-  charIndexCounter;
-  destroyed;
-  constructor(t = {}) {
-    const { container: e = ".text-slicer", splitMode: s = "both", cssVariables: n = !1, dataAttributes: a = !1, waitForFonts: o = !1, fontReadyTimeout: l = 1500, stabilizeLayout: h = !1, nowrapWords: c = !1, innerWrapper: i = !0 } = t;
-    this.textElement = typeof e == "string" ? document.querySelector(e) : e ?? null, this.originalText = "", this.splitMode = s, this.cssVariables = n, this.dataAttributes = a, this.waitForFonts = o, this.fontReadyTimeout = l, this.stabilizeLayout = h, this.nowrapWords = c, this.innerWrapper = i, this.charIndexCounter = 0, this.destroyed = !1, this.textElement && (this.originalText = (this.textElement.textContent ?? "").trim(), this.originalText.length > 0 && this.textElement.setAttribute("aria-label", this.originalText));
+const u = { splitMode: "both", cssVariables: !1, dataAttributes: !1, keepWhitespaceNodes: !0 }, i = Object.freeze({ word: "ts-word", char: "ts-char", whitespace: "ts-whitespace" }), o = " ", m = (n) => typeof window > "u" || typeof document > "u" ? null : n ? typeof n == "string" ? document.querySelector(n) : n : null, h = (n) => {
+  const t = Intl.Segmenter;
+  if (typeof t == "function") {
+    const e = new t("en", { granularity: "grapheme" });
+    return Array.from(e.segment(n), (s) => s.segment);
   }
-  async init() {
-    this.textElement && (this.waitForFonts && await r.waitFontsForElement(this.textElement, this.fontReadyTimeout).catch(() => {
-    }), await r.nextFrame(), this.split());
+  return Array.from(n);
+}, p = (n) => n.split(o), c = (n) => {
+  const t = {};
+  return Object.keys(n).forEach((e) => {
+    const s = n[e];
+    s !== void 0 && (t[e] = s);
+  }), t;
+};
+class g {
+  el;
+  original;
+  opts;
+  callbacks;
+  charIndex;
+  mounted;
+  constructor(t = {}, e) {
+    const s = m(t.container);
+    this.el = s, this.original = ((r) => !!r && typeof HTMLElement < "u" && r instanceof HTMLElement)(s) ? s.textContent?.toString() ?? "" : "", this.opts = { ...u, ...c(t) }, this.callbacks = e, this.charIndex = 0, this.mounted = !1;
   }
-  destroy() {
-    this.textElement && !this.destroyed && (this.textElement.innerHTML = "", this.textElement.textContent = this.originalText, this.textElement.removeAttribute("aria-hidden"), this.destroyed = !0);
+  get metrics() {
+    const t = this.original;
+    return { wordTotal: t.length ? p(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, ...c(e) }), this.split());
+  }
+  clear() {
+    this.el && this.el.replaceChildren();
   }
   split() {
-    if (!this.textElement) return;
-    this.clear(), this.charIndexCounter = 0;
-    const t = document.createDocumentFragment(), e = this.originalText.split(" "), s = this.originalText.length;
-    this.splitMode === "words" || this.splitMode === "both" ? this.splitWords(t, e) : this.splitChars(t), this.textElement.appendChild(t), r.forceReflow(this.textElement), this.cssVariables && (this.textElement.style.setProperty("--word-total", String(e.length)), this.textElement.style.setProperty("--char-total", String(s))), this.textElement.setAttribute("aria-hidden", "false");
+    if (!this.el) return;
+    this.clear(), this.charIndex = 0;
+    const t = this.original, e = document.createDocumentFragment(), s = p(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.callbacks?.onAfterRender?.(this.metrics);
+  }
+  destroy() {
+    this.el && (this.clear(), this.mounted = !1);
+  }
+  updateOptions(t) {
+    this.opts = { ...this.opts, ...c(t) }, this.mounted && this.split();
   }
-  splitWords(t, e) {
-    e.forEach((s, n) => {
-      if (this.splitMode === "both") {
-        const a = this.createWordSpan(n, s);
-        for (const o of s) a.append(this.createCharSpan(o));
+  appendWords(t, e) {
+    e.forEach((s, r) => {
+      if (this.opts.splitMode === "both") {
+        const a = this.createWordSpan(r, s);
+        for (const d of h(s)) {
+          const l = this.createCharSpan(d);
+          a.append(l);
+        }
         t.append(a);
       } else {
-        const a = this.createWordSpan(n);
+        const a = this.createWordSpan(r);
         a.append(document.createTextNode(s)), t.append(a);
       }
-      n < e.length - 1 && t.append(r.createSpaceSpan());
+      r < e.length - 1 && t.append(this.createSpaceSpan());
     });
   }
-  splitChars(t) {
-    for (const e of this.originalText) t.append(this.createCharSpan(e));
+  appendChars(t, e) {
+    for (const s of h(e)) {
+      const r = this.createCharSpan(s);
+      t.append(r);
+    }
   }
   createWordSpan(t, e = "") {
     const s = document.createElement("span");
-    return s.classList.add("word"), this.dataAttributes && s.setAttribute("data-word", e), this.cssVariables && s.style.setProperty("--word-index", String(t)), this.stabilizeLayout && (r.applyStableInlineBox(s), this.nowrapWords && (s.style.whiteSpace = "nowrap")), s;
+    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");
-    if (t === " ") return e.classList.add("whitespace"), e.textContent = " ", e;
-    if (e.classList.add("char"), e.textContent = t, e.style.position = "relative", e.style.color = "transparent", this.cssVariables && e.style.setProperty("--char-index", String(this.charIndexCounter)), this.dataAttributes && e.setAttribute("data-char", t), this.stabilizeLayout && r.applyStableInlineBox(e), this.innerWrapper) {
-      const s = document.createElement("span");
-      s.classList.add("char-inner"), s.textContent = t, s.style.position = "absolute", s.style.left = "0", s.style.top = "0", s.style.right = "auto", s.style.bottom = "auto", e.appendChild(s);
-    }
-    return this.charIndexCounter += 1, e;
+    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;
   }
-  static createSpaceSpan() {
+  createSpaceSpan() {
     const t = document.createElement("span");
-    return t.classList.add("whitespace"), t.textContent = " ", t;
-  }
-  clear() {
-    this.textElement && (this.textElement.innerHTML = "");
-  }
-  static applyStableInlineBox(t) {
-    t.style.display = "inline-block", t.style.verticalAlign = "baseline", t.style.lineHeight = "1em", t.style.backfaceVisibility = "hidden", t.style.willChange = "transform";
-  }
-  static forceReflow(t) {
-    t.offsetHeight;
-  }
-  static nextFrame() {
-    return new Promise((t) => requestAnimationFrame(() => t()));
-  }
-  static getFontFaceSet() {
-    const t = document;
-    return typeof t.fonts == "object" && t.fonts ? t.fonts : null;
-  }
-  static async waitFontsForElement(t, e) {
-    const s = r.getFontFaceSet();
-    if (!s) return;
-    const n = getComputedStyle(t), a = n.fontFamily.split(",").map((i) => i.trim().replace(/^['"]|['"]$/g, "")).filter((i) => i.length > 0), o = n.fontStyle || "normal", l = n.fontWeight || "400", h = n.fontStretch || "normal", c = a.map((i) => `${o} ${l} ${h} 1em ${i}`).map((i) => s.load(i));
-    await Promise.race([Promise.all(c).then(() => {
-    }), new Promise((i) => window.setTimeout(i, e))]);
+    return t.classList.add(i.whitespace), t.textContent = o, t;
   }
 }
 export {
-  r as default
+  i as CLASSNAMES,
+  g as TextSlicer
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(s,l){typeof exports=="object"&&typeof module<"u"?module.exports=l():typeof define=="function"&&define.amd?define(l):(s=typeof globalThis<"u"?globalThis:s||self).TextSlicer=l()})(this,function(){"use strict";class s{textElement;originalText;splitMode;cssVariables;dataAttributes;waitForFonts;fontReadyTimeout;stabilizeLayout;nowrapWords;innerWrapper;charIndexCounter;destroyed;constructor(t={}){const{container:e=".text-slicer",splitMode:i="both",cssVariables:a=!1,dataAttributes:r=!1,waitForFonts:o=!1,fontReadyTimeout:h=1500,stabilizeLayout:c=!1,nowrapWords:d=!1,innerWrapper:n=!0}=t;this.textElement=typeof e=="string"?document.querySelector(e):e??null,this.originalText="",this.splitMode=i,this.cssVariables=a,this.dataAttributes=r,this.waitForFonts=o,this.fontReadyTimeout=h,this.stabilizeLayout=c,this.nowrapWords=d,this.innerWrapper=n,this.charIndexCounter=0,this.destroyed=!1,this.textElement&&(this.originalText=(this.textElement.textContent??"").trim(),this.originalText.length>0&&this.textElement.setAttribute("aria-label",this.originalText))}async init(){this.textElement&&(this.waitForFonts&&await s.waitFontsForElement(this.textElement,this.fontReadyTimeout).catch(()=>{}),await s.nextFrame(),this.split())}destroy(){this.textElement&&!this.destroyed&&(this.textElement.innerHTML="",this.textElement.textContent=this.originalText,this.textElement.removeAttribute("aria-hidden"),this.destroyed=!0)}split(){if(!this.textElement)return;this.clear(),this.charIndexCounter=0;const t=document.createDocumentFragment(),e=this.originalText.split(" "),i=this.originalText.length;this.splitMode==="words"||this.splitMode==="both"?this.splitWords(t,e):this.splitChars(t),this.textElement.appendChild(t),s.forceReflow(this.textElement),this.cssVariables&&(this.textElement.style.setProperty("--word-total",String(e.length)),this.textElement.style.setProperty("--char-total",String(i))),this.textElement.setAttribute("aria-hidden","false")}splitWords(t,e){e.forEach((i,a)=>{if(this.splitMode==="both"){const r=this.createWordSpan(a,i);for(const o of i)r.append(this.createCharSpan(o));t.append(r)}else{const r=this.createWordSpan(a);r.append(document.createTextNode(i)),t.append(r)}a<e.length-1&&t.append(s.createSpaceSpan())})}splitChars(t){for(const e of this.originalText)t.append(this.createCharSpan(e))}createWordSpan(t,e=""){const i=document.createElement("span");return i.classList.add("word"),this.dataAttributes&&i.setAttribute("data-word",e),this.cssVariables&&i.style.setProperty("--word-index",String(t)),this.stabilizeLayout&&(s.applyStableInlineBox(i),this.nowrapWords&&(i.style.whiteSpace="nowrap")),i}createCharSpan(t){const e=document.createElement("span");if(t===" ")return e.classList.add("whitespace"),e.textContent=" ",e;if(e.classList.add("char"),e.textContent=t,e.style.position="relative",e.style.color="transparent",this.cssVariables&&e.style.setProperty("--char-index",String(this.charIndexCounter)),this.dataAttributes&&e.setAttribute("data-char",t),this.stabilizeLayout&&s.applyStableInlineBox(e),this.innerWrapper){const i=document.createElement("span");i.classList.add("char-inner"),i.textContent=t,i.style.position="absolute",i.style.left="0",i.style.top="0",i.style.right="auto",i.style.bottom="auto",e.appendChild(i)}return this.charIndexCounter+=1,e}static createSpaceSpan(){const t=document.createElement("span");return t.classList.add("whitespace"),t.textContent=" ",t}clear(){this.textElement&&(this.textElement.innerHTML="")}static applyStableInlineBox(t){t.style.display="inline-block",t.style.verticalAlign="baseline",t.style.lineHeight="1em",t.style.backfaceVisibility="hidden",t.style.willChange="transform"}static forceReflow(t){t.offsetHeight}static nextFrame(){return new Promise(t=>requestAnimationFrame(()=>t()))}static getFontFaceSet(){const t=document;return typeof t.fonts=="object"&&t.fonts?t.fonts:null}static async waitFontsForElement(t,e){const i=s.getFontFaceSet();if(!i)return;const a=getComputedStyle(t),r=a.fontFamily.split(",").map(n=>n.trim().replace(/^['"]|['"]$/g,"")).filter(n=>n.length>0),o=a.fontStyle||"normal",h=a.fontWeight||"400",c=a.fontStretch||"normal",d=r.map(n=>`${o} ${h} ${c} 1em ${n}`).map(n=>i.load(n));await Promise.race([Promise.all(d).then(()=>{}),new Promise(n=>window.setTimeout(n,e))])}}return s});
+(function(i,r){typeof exports=="object"&&typeof module<"u"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):r((i=typeof globalThis<"u"?globalThis:i||self).TextSlicer={})})(this,function(i){"use strict";const r={splitMode:"both",cssVariables:!1,dataAttributes:!1,keepWhitespaceNodes:!0},o=Object.freeze({word:"ts-word",char:"ts-char",whitespace:"ts-whitespace"}),c=" ",l=t=>typeof window>"u"||typeof document>"u"?null:t?typeof t=="string"?document.querySelector(t):t:null,d=t=>{const e=Intl.Segmenter;if(typeof e=="function"){const s=new e("en",{granularity:"grapheme"});return Array.from(s.segment(t),n=>n.segment)}return Array.from(t)},p=t=>t.split(c),h=t=>{const e={};return Object.keys(t).forEach(s=>{const n=t[s];n!==void 0&&(e[s]=n)}),e};i.CLASSNAMES=o,i.TextSlicer=class{el;original;opts;callbacks;charIndex;mounted;constructor(t={},e){const s=l(t.container);this.el=s,this.original=(n=>!!n&&typeof HTMLElement<"u"&&n instanceof HTMLElement)(s)?s.textContent?.toString()??"":"",this.opts={...r,...h(t)},this.callbacks=e,this.charIndex=0,this.mounted=!1}get metrics(){const t=this.original;return{wordTotal:t.length?p(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.el.replaceChildren()}split(){if(!this.el)return;this.clear(),this.charIndex=0;const t=this.original,e=document.createDocumentFragment(),s=p(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.callbacks?.onAfterRender?.(this.metrics)}destroy(){this.el&&(this.clear(),this.mounted=!1)}updateOptions(t){this.opts={...this.opts,...h(t)},this.mounted&&this.split()}appendWords(t,e){e.forEach((s,n)=>{if(this.opts.splitMode==="both"){const a=this.createWordSpan(n,s);for(const u of d(s)){const f=this.createCharSpan(u);a.append(f)}t.append(a)}else{const a=this.createWordSpan(n);a.append(document.createTextNode(s)),t.append(a)}n<e.length-1&&t.append(this.createSpaceSpan())})}appendChars(t,e){for(const s of d(e)){const n=this.createCharSpan(s);t.append(n)}}createWordSpan(t,e=""){const s=document.createElement("span");return s.classList.add(o.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===c?(e.classList.add(o.whitespace),this.opts.keepWhitespaceNodes||(e.textContent=c)):(e.classList.add(o.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(o.whitespace),t.textContent=c,t}},Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "text-slicer",
-  "version": "1.4.0-dev.6",
+  "version": "1.4.0-dev.8",
   "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",