text-slicer 1.2.0 → 1.3.1-dev.0

package/README.md

@@ -10,7 +10,7 @@
 </div>
 
 <p align="center">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.</p>
-<p align="center"><sup>850B gzipped</sup></p>
+<p align="center"><sup>1kB gzipped</sup></p>
 <p align="center"><a href="https://codepen.io/ux-ui/full/vYMoGoG">Demo</a></p>
 <br>
 

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";var l=Object.defineProperty;var d=(a,t,e)=>t in a?l(a,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):a[t]=e;var i=(a,t,e)=>d(a,typeof t!="symbol"?t+"":t,e);class o{constructor(t={}){i(this,"textElement");i(this,"originalText");i(this,"splitMode");i(this,"cssVariables");i(this,"dataAttributes");i(this,"charIndexCounter");var e;if(this.textElement=t.container instanceof HTMLElement?t.container:document.querySelector(t.container||".text-slicer"),!this.textElement)return this.originalText="",this.splitMode="both",this.cssVariables=!1,this.dataAttributes=!1,void(this.charIndexCounter=0);this.originalText=((e=this.textElement.textContent)==null?void 0:e.trim())||"",this.splitMode=t.splitMode||"both",this.cssVariables=t.cssVariables||!1,this.dataAttributes=t.dataAttributes||!1,this.charIndexCounter=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.splitMode==="chars"&&this.splitChars(t),this.textElement.appendChild(t),this.cssVariables&&(this.textElement.style.setProperty("--word-total",e.length.toString()),this.textElement.style.setProperty("--char-total",s.toString()))}splitWords(t,e){e.forEach((s,n)=>{if(this.splitMode==="both"){const r=this.createWordSpan(n,s);s.split("").forEach(h=>{const c=this.createCharSpan(h);r.append(c)}),t.append(r)}else{const r=this.createWordSpan(n);r.append(document.createTextNode(s)),t.append(r)}n<e.length-1&&t.append(o.createSpaceSpan())})}splitChars(t){this.originalText.split("").forEach(e=>{const s=this.createCharSpan(e);t.append(s)})}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",t.toString()),s}createCharSpan(t){const e=document.createElement("span");return e.textContent=t,this.dataAttributes&&e.setAttribute("data-char",t),t===" "?e.classList.add("whitespace"):(e.classList.add("char"),this.cssVariables&&e.style.setProperty("--char-index",this.charIndexCounter.toString()),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="")}init(){this.split()}}module.exports=o;
+"use strict";var c=Object.defineProperty;var o=(t,e,r)=>e in t?c(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r;var a=(t,e,r)=>o(t,typeof e!="symbol"?e+"":e,r);module.exports=class{constructor({container:t=".text-slicer",splitMode:e="both",cssVariables:r=!1,dataAttributes:n=!1}={}){a(this,"textElement");a(this,"originalText");a(this,"splitMode");a(this,"cssVariables");a(this,"dataAttributes");a(this,"charIndexCounter",0);var i,s;this.textElement=t instanceof HTMLElement?t:document.querySelector(t),this.originalText=((s=(i=this.textElement)==null?void 0:i.textContent)==null?void 0:s.trim())||"",this.splitMode=e,this.cssVariables=r,this.dataAttributes=n}init(){if(!this.textElement)return;this.clear(),this.charIndexCounter=0;const t=document.createDocumentFragment(),e=this.originalText.split(" ");switch(this.splitMode){case"words":this.renderWords(t,e,!1);break;case"chars":this.renderChars(t,this.originalText);break;case"both":this.renderWords(t,e,!0)}this.textElement.append(t),this.cssVariables&&(this.textElement.style.setProperty("--word-total",e.length.toString()),this.textElement.style.setProperty("--char-total",this.originalText.length.toString()))}renderWords(t,e,r){e.forEach((n,i)=>{const s=this.createSpan("word",n);this.cssVariables&&s.style.setProperty("--word-index",i.toString()),r?[...n].forEach(h=>s.append(this.createCharSpan(h))):s.textContent=n,t.append(s),i<e.length-1&&t.append(this.createSpaceSpan())})}renderChars(t,e){[...e].forEach(r=>t.append(this.createCharSpan(r)))}createCharSpan(t){const e=this.createSpan(t===" "?"whitespace":"char",t);return t!==" "&&this.cssVariables&&e.style.setProperty("--char-index",(this.charIndexCounter++).toString()),e}createSpan(t,e){const r=document.createElement("span");return r.classList.add(t),e&&(r.textContent=e,this.dataAttributes&&r.setAttribute(`data-${t}`,e)),r}createSpaceSpan(){return this.createSpan("whitespace"," ")}clear(){this.textElement&&(this.textElement.innerHTML="")}};

package/dist/index.d.ts

@@ -1,23 +1,24 @@
-declare class TextSlicer {
+type SplitMode = 'words' | 'chars' | 'both';
+type TextSlicerOptions = {
+    container?: HTMLElement | string;
+    splitMode?: SplitMode;
+    cssVariables?: boolean;
+    dataAttributes?: boolean;
+};
+export default class TextSlicer {
     private readonly textElement;
-    private originalText;
+    private readonly originalText;
     private readonly splitMode;
     private readonly cssVariables;
     private readonly dataAttributes;
     private charIndexCounter;
-    constructor(options?: {
-        container?: HTMLElement | string;
-        splitMode?: 'words' | 'chars' | 'both';
-        cssVariables?: boolean;
-        dataAttributes?: boolean;
-    });
-    split(): void;
-    private splitWords;
-    private splitChars;
-    private createWordSpan;
+    constructor({ container, splitMode, cssVariables, dataAttributes, }?: TextSlicerOptions);
+    init(): void;
+    private renderWords;
+    private renderChars;
     private createCharSpan;
-    private static createSpaceSpan;
+    private createSpan;
+    private createSpaceSpan;
     private clear;
-    init(): void;
 }
-export default TextSlicer;
+export {};

package/dist/index.es.js

@@ -1,64 +1,57 @@
-var l = Object.defineProperty;
-var d = (a, t, e) => t in a ? l(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
-var i = (a, t, e) => d(a, typeof t != "symbol" ? t + "" : t, e);
-class o {
-  constructor(t = {}) {
-    i(this, "textElement");
-    i(this, "originalText");
-    i(this, "splitMode");
-    i(this, "cssVariables");
-    i(this, "dataAttributes");
-    i(this, "charIndexCounter");
-    var e;
-    if (this.textElement = t.container instanceof HTMLElement ? t.container : document.querySelector(t.container || ".text-slicer"), !this.textElement) return this.originalText = "", this.splitMode = "both", this.cssVariables = !1, this.dataAttributes = !1, void (this.charIndexCounter = 0);
-    this.originalText = ((e = this.textElement.textContent) == null ? void 0 : e.trim()) || "", this.splitMode = t.splitMode || "both", this.cssVariables = t.cssVariables || !1, this.dataAttributes = t.dataAttributes || !1, this.charIndexCounter = 0;
+var o = Object.defineProperty;
+var l = (n, t, e) => t in n ? o(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var a = (n, t, e) => l(n, typeof t != "symbol" ? t + "" : t, e);
+class p {
+  constructor({ container: t = ".text-slicer", splitMode: e = "both", cssVariables: r = !1, dataAttributes: i = !1 } = {}) {
+    a(this, "textElement");
+    a(this, "originalText");
+    a(this, "splitMode");
+    a(this, "cssVariables");
+    a(this, "dataAttributes");
+    a(this, "charIndexCounter", 0);
+    var h, s;
+    this.textElement = t instanceof HTMLElement ? t : document.querySelector(t), this.originalText = ((s = (h = this.textElement) == null ? void 0 : h.textContent) == null ? void 0 : s.trim()) || "", this.splitMode = e, this.cssVariables = r, this.dataAttributes = i;
   }
-  split() {
+  init() {
     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.splitMode === "chars" && this.splitChars(t), this.textElement.appendChild(t), this.cssVariables && (this.textElement.style.setProperty("--word-total", e.length.toString()), this.textElement.style.setProperty("--char-total", s.toString()));
-  }
-  splitWords(t, e) {
-    e.forEach((s, n) => {
-      if (this.splitMode === "both") {
-        const r = this.createWordSpan(n, s);
-        s.split("").forEach((h) => {
-          const c = this.createCharSpan(h);
-          r.append(c);
-        }), t.append(r);
-      } else {
-        const r = this.createWordSpan(n);
-        r.append(document.createTextNode(s)), t.append(r);
-      }
-      n < e.length - 1 && t.append(o.createSpaceSpan());
-    });
-  }
-  splitChars(t) {
-    this.originalText.split("").forEach((e) => {
-      const s = this.createCharSpan(e);
-      t.append(s);
+    const t = document.createDocumentFragment(), e = this.originalText.split(" ");
+    switch (this.splitMode) {
+      case "words":
+        this.renderWords(t, e, !1);
+        break;
+      case "chars":
+        this.renderChars(t, this.originalText);
+        break;
+      case "both":
+        this.renderWords(t, e, !0);
+    }
+    this.textElement.append(t), this.cssVariables && (this.textElement.style.setProperty("--word-total", e.length.toString()), this.textElement.style.setProperty("--char-total", this.originalText.length.toString()));
+  }
+  renderWords(t, e, r) {
+    e.forEach((i, h) => {
+      const s = this.createSpan("word", i);
+      this.cssVariables && s.style.setProperty("--word-index", h.toString()), r ? [...i].forEach((c) => s.append(this.createCharSpan(c))) : s.textContent = i, t.append(s), h < e.length - 1 && t.append(this.createSpaceSpan());
     });
   }
-  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", t.toString()), s;
+  renderChars(t, e) {
+    [...e].forEach((r) => t.append(this.createCharSpan(r)));
   }
   createCharSpan(t) {
-    const e = document.createElement("span");
-    return e.textContent = t, this.dataAttributes && e.setAttribute("data-char", t), t === " " ? e.classList.add("whitespace") : (e.classList.add("char"), this.cssVariables && e.style.setProperty("--char-index", this.charIndexCounter.toString()), this.charIndexCounter += 1), e;
+    const e = this.createSpan(t === " " ? "whitespace" : "char", t);
+    return t !== " " && this.cssVariables && e.style.setProperty("--char-index", (this.charIndexCounter++).toString()), e;
   }
-  static createSpaceSpan() {
-    const t = document.createElement("span");
-    return t.classList.add("whitespace"), t.textContent = " ", t;
+  createSpan(t, e) {
+    const r = document.createElement("span");
+    return r.classList.add(t), e && (r.textContent = e, this.dataAttributes && r.setAttribute(`data-${t}`, e)), r;
+  }
+  createSpaceSpan() {
+    return this.createSpan("whitespace", " ");
   }
   clear() {
     this.textElement && (this.textElement.innerHTML = "");
   }
-  init() {
-    this.split();
-  }
 }
 export {
-  o as default
+  p as default
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(s,n){typeof exports=="object"&&typeof module<"u"?module.exports=n():typeof define=="function"&&define.amd?define(n):(s=typeof globalThis<"u"?globalThis:s||self).TextSlicer=n()})(this,function(){"use strict";var l=Object.defineProperty;var d=(s,n,t)=>n in s?l(s,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[n]=t;var a=(s,n,t)=>d(s,typeof n!="symbol"?n+"":n,t);class s{constructor(t={}){a(this,"textElement");a(this,"originalText");a(this,"splitMode");a(this,"cssVariables");a(this,"dataAttributes");a(this,"charIndexCounter");var e;if(this.textElement=t.container instanceof HTMLElement?t.container:document.querySelector(t.container||".text-slicer"),!this.textElement)return this.originalText="",this.splitMode="both",this.cssVariables=!1,this.dataAttributes=!1,void(this.charIndexCounter=0);this.originalText=((e=this.textElement.textContent)==null?void 0:e.trim())||"",this.splitMode=t.splitMode||"both",this.cssVariables=t.cssVariables||!1,this.dataAttributes=t.dataAttributes||!1,this.charIndexCounter=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.splitMode==="chars"&&this.splitChars(t),this.textElement.appendChild(t),this.cssVariables&&(this.textElement.style.setProperty("--word-total",e.length.toString()),this.textElement.style.setProperty("--char-total",i.toString()))}splitWords(t,e){e.forEach((i,o)=>{if(this.splitMode==="both"){const r=this.createWordSpan(o,i);i.split("").forEach(c=>{const h=this.createCharSpan(c);r.append(h)}),t.append(r)}else{const r=this.createWordSpan(o);r.append(document.createTextNode(i)),t.append(r)}o<e.length-1&&t.append(s.createSpaceSpan())})}splitChars(t){this.originalText.split("").forEach(e=>{const i=this.createCharSpan(e);t.append(i)})}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",t.toString()),i}createCharSpan(t){const e=document.createElement("span");return e.textContent=t,this.dataAttributes&&e.setAttribute("data-char",t),t===" "?e.classList.add("whitespace"):(e.classList.add("char"),this.cssVariables&&e.style.setProperty("--char-index",this.charIndexCounter.toString()),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="")}init(){this.split()}}return s});
+(function(t,e){typeof exports=="object"&&typeof module<"u"?module.exports=e():typeof define=="function"&&define.amd?define(e):(t=typeof globalThis<"u"?globalThis:t||self).TextSlicer=e()})(this,function(){"use strict";var c=Object.defineProperty;var h=(t,e,s)=>e in t?c(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s;var a=(t,e,s)=>h(t,typeof e!="symbol"?e+"":e,s);return class{constructor({container:t=".text-slicer",splitMode:e="both",cssVariables:s=!1,dataAttributes:n=!1}={}){a(this,"textElement");a(this,"originalText");a(this,"splitMode");a(this,"cssVariables");a(this,"dataAttributes");a(this,"charIndexCounter",0);var i,r;this.textElement=t instanceof HTMLElement?t:document.querySelector(t),this.originalText=((r=(i=this.textElement)==null?void 0:i.textContent)==null?void 0:r.trim())||"",this.splitMode=e,this.cssVariables=s,this.dataAttributes=n}init(){if(!this.textElement)return;this.clear(),this.charIndexCounter=0;const t=document.createDocumentFragment(),e=this.originalText.split(" ");switch(this.splitMode){case"words":this.renderWords(t,e,!1);break;case"chars":this.renderChars(t,this.originalText);break;case"both":this.renderWords(t,e,!0)}this.textElement.append(t),this.cssVariables&&(this.textElement.style.setProperty("--word-total",e.length.toString()),this.textElement.style.setProperty("--char-total",this.originalText.length.toString()))}renderWords(t,e,s){e.forEach((n,i)=>{const r=this.createSpan("word",n);this.cssVariables&&r.style.setProperty("--word-index",i.toString()),s?[...n].forEach(o=>r.append(this.createCharSpan(o))):r.textContent=n,t.append(r),i<e.length-1&&t.append(this.createSpaceSpan())})}renderChars(t,e){[...e].forEach(s=>t.append(this.createCharSpan(s)))}createCharSpan(t){const e=this.createSpan(t===" "?"whitespace":"char",t);return t!==" "&&this.cssVariables&&e.style.setProperty("--char-index",(this.charIndexCounter++).toString()),e}createSpan(t,e){const s=document.createElement("span");return s.classList.add(t),e&&(s.textContent=e,this.dataAttributes&&s.setAttribute(`data-${t}`,e)),s}createSpaceSpan(){return this.createSpan("whitespace"," ")}clear(){this.textElement&&(this.textElement.innerHTML="")}}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "text-slicer",
-  "version": "1.2.0",
+  "version": "1.3.1-dev.0",
   "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",
@@ -16,39 +16,43 @@
   "scripts": {
     "clean": "rimraf dist",
     "build": "vite build",
-    "lint:js": "eslint **/*.{ts,js}",
-    "lint:fix:js": "eslint **/*.{ts,js} --fix",
-    "format:js": "prettier --write **/*.{ts,js}",
+    "lint:js": "eslint src/**/*.{ts,js}",
+    "lint:fix:js": "eslint src/**/*.{ts,js} --fix",
+    "format:js": "prettier --write src/**/*.{ts,js}",
     "lint:fix": "yarn lint:fix:js && yarn format:js"
   },
   "source": "src/index.ts",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
+  "browser": "./dist/index.umd.js",
   "types": "dist/index.d.ts",
   "exports": {
-    "types": "./dist/index.d.ts",
-    "import": "./dist/index.es.js",
-    "require": "./dist/index.cjs.js"
+    ".": {
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.umd.js"
+    },
+    "./dist/*": "./dist/*"
   },
   "files": [
     "dist/"
   ],
   "devDependencies": {
-    "@eslint/js": "9.21.0",
+    "@eslint/js": "9.22.0",
     "@rollup/plugin-terser": "0.4.4",
-    "@types/node": "22.13.8",
-    "@typescript-eslint/eslint-plugin": "8.25.0",
-    "@typescript-eslint/parser": "8.25.0",
-    "eslint": "9.18.0",
-    "eslint-config-prettier": "10.0.2",
+    "@types/node": "22.13.10",
+    "@typescript-eslint/eslint-plugin": "8.26.0",
+    "@typescript-eslint/parser": "8.26.0",
+    "eslint": "9.22.0",
+    "eslint-config-prettier": "10.1.1",
     "eslint-import-resolver-typescript": "3.8.3",
     "eslint-plugin-import": "2.31.0",
     "globals": "16.0.0",
-    "prettier": "3.5.2",
+    "prettier": "3.5.3",
     "rimraf": "6.0.1",
     "typescript": "5.8.2",
-    "vite": "6.2.0",
-    "vite-plugin-dts": "4.5.1"
+    "vite": "6.2.1",
+    "vite-plugin-dts": "4.5.3"
   },
   "keywords": [
     "text",
@@ -60,11 +64,8 @@
     "effects",
     "fragment",
     "words",
-    "characters",
     "HTML",
-    "processing",
     "CSS",
-    "variables",
     "web",
     "development",
     "frontend",
@@ -73,8 +74,6 @@
     "custom",
     "effects",
     "textslicer",
-    "js",
-    "webdev",
-    "textprocessing"
+    "js"
   ]
 }