text-slicer 1.3.0 → 1.3.1-dev.1

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 l=Object.defineProperty;var d=(r,t,e)=>t in r?l(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e;var a=(r,t,e)=>d(r,typeof t!="symbol"?t+"":t,e);class h{constructor(t={}){a(this,"textElement");a(this,"originalText");a(this,"splitMode");a(this,"cssVariables");a(this,"dataAttributes");a(this,"charIndexCounter");var o;const{container:e=".text-slicer",splitMode:s="both",cssVariables:n=!1,dataAttributes:i=!1}=t;if(this.textElement=typeof e=="string"?document.querySelector(e):e??null,!this.textElement)return this.originalText="",this.splitMode="both",this.cssVariables=!1,this.dataAttributes=!1,void(this.charIndexCounter=0);this.originalText=((o=this.textElement.textContent)==null?void 0:o.trim())||"",this.splitMode=s,this.cssVariables=n,this.dataAttributes=i,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 i=this.createWordSpan(n,s);s.split("").forEach(o=>{const c=this.createCharSpan(o);i.append(c)}),t.append(i)}else{const i=this.createWordSpan(n);i.append(document.createTextNode(s)),t.append(i)}n<e.length-1&&t.append(h.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=h;

package/dist/index.d.ts

@@ -1,3 +1,10 @@
+export type SplitMode = 'words' | 'chars' | 'both';
+export interface TextSlicerOptions {
+    container?: HTMLElement | string;
+    splitMode?: SplitMode;
+    cssVariables?: boolean;
+    dataAttributes?: boolean;
+}
 declare class TextSlicer {
     private readonly textElement;
     private originalText;
@@ -5,12 +12,7 @@ declare class TextSlicer {
     private readonly cssVariables;
     private readonly dataAttributes;
     private charIndexCounter;
-    constructor(options?: {
-        container?: HTMLElement | string;
-        splitMode?: 'words' | 'chars' | 'both';
-        cssVariables?: boolean;
-        dataAttributes?: boolean;
-    });
+    constructor(options?: TextSlicerOptions);
     split(): void;
     private splitWords;
     private splitChars;

package/dist/index.es.js

@@ -1,17 +1,18 @@
 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 {
+var d = (r, t, e) => t in r ? l(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var a = (r, t, e) => d(r, typeof t != "symbol" ? t + "" : t, e);
+class h {
   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;
+    a(this, "textElement");
+    a(this, "originalText");
+    a(this, "splitMode");
+    a(this, "cssVariables");
+    a(this, "dataAttributes");
+    a(this, "charIndexCounter");
+    var o;
+    const { container: e = ".text-slicer", splitMode: s = "both", cssVariables: n = !1, dataAttributes: i = !1 } = t;
+    if (this.textElement = typeof e == "string" ? document.querySelector(e) : e ?? null, !this.textElement) return this.originalText = "", this.splitMode = "both", this.cssVariables = !1, this.dataAttributes = !1, void (this.charIndexCounter = 0);
+    this.originalText = ((o = this.textElement.textContent) == null ? void 0 : o.trim()) || "", this.splitMode = s, this.cssVariables = n, this.dataAttributes = i, this.charIndexCounter = 0;
   }
   split() {
     if (!this.textElement) return;
@@ -22,16 +23,16 @@ class o {
   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);
+        const i = this.createWordSpan(n, s);
+        s.split("").forEach((o) => {
+          const c = this.createCharSpan(o);
+          i.append(c);
+        }), t.append(i);
       } else {
-        const r = this.createWordSpan(n);
-        r.append(document.createTextNode(s)), t.append(r);
+        const i = this.createWordSpan(n);
+        i.append(document.createTextNode(s)), t.append(i);
       }
-      n < e.length - 1 && t.append(o.createSpaceSpan());
+      n < e.length - 1 && t.append(h.createSpaceSpan());
     });
   }
   splitChars(t) {
@@ -60,5 +61,5 @@ class o {
   }
 }
 export {
-  o as default
+  h 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(i,r){typeof exports=="object"&&typeof module<"u"?module.exports=r():typeof define=="function"&&define.amd?define(r):(i=typeof globalThis<"u"?globalThis:i||self).TextSlicer=r()})(this,function(){"use strict";var l=Object.defineProperty;var d=(i,r,t)=>r in i?l(i,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[r]=t;var n=(i,r,t)=>d(i,typeof r!="symbol"?r+"":r,t);class i{constructor(t={}){n(this,"textElement");n(this,"originalText");n(this,"splitMode");n(this,"cssVariables");n(this,"dataAttributes");n(this,"charIndexCounter");var h;const{container:e=".text-slicer",splitMode:s="both",cssVariables:o=!1,dataAttributes:a=!1}=t;if(this.textElement=typeof e=="string"?document.querySelector(e):e??null,!this.textElement)return this.originalText="",this.splitMode="both",this.cssVariables=!1,this.dataAttributes=!1,void(this.charIndexCounter=0);this.originalText=((h=this.textElement.textContent)==null?void 0:h.trim())||"",this.splitMode=s,this.cssVariables=o,this.dataAttributes=a,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,o)=>{if(this.splitMode==="both"){const a=this.createWordSpan(o,s);s.split("").forEach(h=>{const c=this.createCharSpan(h);a.append(c)}),t.append(a)}else{const a=this.createWordSpan(o);a.append(document.createTextNode(s)),t.append(a)}o<e.length-1&&t.append(i.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()}}return i});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "text-slicer",
-  "version": "1.3.0",
+  "version": "1.3.1-dev.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",
@@ -16,9 +16,9 @@
   "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",
@@ -27,28 +27,32 @@
   "browser": "./dist/index.umd.js",
   "types": "dist/index.d.ts",
   "exports": {
-    "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"
   ]
 }