masoneffect 2.0.18 → 2.0.20

package/dist/vue/textToParticle/index.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
 class VisibilityManager {
   constructor(container, options = {}) {
     this.container = container;
@@ -170,7 +170,10 @@ class TextToParticle {
     this.handleMouseDown = this.handleMouseDown.bind(this);
     this.handleMouseUp = this.handleMouseUp.bind(this);
     this._debouncedMorph = debounce(this._morphInternal.bind(this), this.debounceDelay);
-    this._debouncedUpdateConfig = debounce(this._updateConfigInternal.bind(this), this.debounceDelay);
+    this._debouncedUpdateConfig = debounce(
+      this._updateConfigInternal.bind(this),
+      this.debounceDelay
+    );
     this.init();
   }
   init() {
@@ -541,8 +544,60 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const container = ref(null);
     let instance = null;
+    let resizeObserver = null;
+    let tempResizeObserver = null;
+    let initTimeout = null;
+    const defaultStyle = computed(() => ({
+      width: "100%",
+      height: "100%",
+      minHeight: 300,
+      position: "relative",
+      ...props.style
+    }));
     const init = () => {
       if (!container.value) return;
+      if (instance) {
+        return;
+      }
+      const existingCanvas = container.value.querySelector("canvas");
+      if (existingCanvas) {
+        existingCanvas.remove();
+      }
+      const rect = container.value.getBoundingClientRect();
+      const hasValidSize = rect.width > 0 && rect.height > 0;
+      if (!hasValidSize) {
+        if (typeof ResizeObserver !== "undefined") {
+          let resizeCheckCount = 0;
+          const maxResizeChecks = 20;
+          if (tempResizeObserver) {
+            tempResizeObserver.disconnect();
+            tempResizeObserver = null;
+          }
+          tempResizeObserver = new ResizeObserver(() => {
+            var _a;
+            resizeCheckCount++;
+            const newRect = (_a = container.value) == null ? void 0 : _a.getBoundingClientRect();
+            if (newRect && newRect.width > 0 && newRect.height > 0) {
+              if (tempResizeObserver) {
+                tempResizeObserver.disconnect();
+                tempResizeObserver = null;
+              }
+              init();
+            } else if (resizeCheckCount >= maxResizeChecks) {
+              if (tempResizeObserver) {
+                tempResizeObserver.disconnect();
+                tempResizeObserver = null;
+              }
+              init();
+            }
+          });
+          tempResizeObserver.observe(container.value);
+          return;
+        } else {
+          initTimeout = window.setTimeout(init, 50);
+          return;
+        }
+      }
       const options = {
         text: props.text,
         densityStep: props.densityStep,
@@ -567,6 +622,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       };
       instance = new TextToParticle(container.value, options);
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(() => {
+          if (instance) {
+            instance.resize();
+          }
+        });
+        resizeObserver.observe(container.value);
+      }
     };
     watch(
       () => [
@@ -605,9 +668,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     onMounted(() => {
-      init();
+      requestAnimationFrame(init);
     });
     onBeforeUnmount(() => {
+      if (initTimeout) {
+        clearTimeout(initTimeout);
+        initTimeout = null;
+      }
+      if (tempResizeObserver) {
+        tempResizeObserver.disconnect();
+        tempResizeObserver = null;
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+        resizeObserver = null;
+      }
       if (instance) {
         instance.destroy();
         instance = null;
@@ -635,7 +710,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "container",
         ref: container,
         class: normalizeClass(__props.className),
-        style: normalizeStyle(__props.style)
+        style: normalizeStyle(defaultStyle.value)
       }, null, 6);
     };
   }

package/dist/vue/typing/index.cjs

@@ -1 +1 @@
-"use strict";const t=require("vue");class e{constructor(t,e={}){this.container=t,this.options={threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",root:e.root??null,onVisible:e.onVisible,onHidden:e.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin,root:this.options.root||null}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}function i(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const i=e-44032,s=Math.floor(i/588),n=Math.floor(i%588/28),o=i%28,r=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],l=[];return l.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][s]),l.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][n]),o>0&&l.push(r[o]),l}function s(t,e,i){const s=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),n=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(e),o=i?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(i):0;if(-1===s||-1===n)return t+(e||"")+(i||"");const r=44032+21*s*28+28*n+o;return String.fromCharCode(r)}function n(t){const e=[],s=[];for(let n=0;n<t.length;n++){const o=t[n],r=o.charCodeAt(0),l=e.length;if(r>=44032&&r<=55203){const t=i(o);e.push(...t),s.push({start:l,end:e.length,isHangul:!0})}else e.push(o),s.push({start:l,end:e.length,isHangul:!1})}return{units:e,charUnitRanges:s}}class o{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=e.text,this.config={text:e.text,speed:e.speed??50,delay:e.delay??0,enabled:e.enabled??!0,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,showCursor:e.showCursor??!0,cursorChar:e.cursorChar??"|",onUpdate:e.onUpdate||null,onComplete:e.onComplete||null};const i=n(this.config.text);this.textUnits=i.units,this.charUnitRanges=i.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.visibilityManager=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.injectStyles(),this.setupVisibilityManager()}injectStyles(){if(document.getElementById("masoneffect-typing-styles"))return;const t=document.createElement("style");t.id="masoneffect-typing-styles",t.textContent="\n      .typing-char {\n        transition: opacity 0.3s ease-in;\n        display: inline-block;\n      }\n      .typing-cursor {\n        display: inline-block;\n      }\n    ",document.head.appendChild(t),this.container.style.whiteSpace="pre-wrap"}setupVisibilityManager(){this.visibilityManager=new e(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,setTimeout(()=>this.start(),this.config.delay))},onHidden:()=>{}})}buildTextFromUnits(t){if(0===t)return"";let e="";for(let i=0;i<this.charUnitRanges.length;i++){const n=this.charUnitRanges[i];if(n.start>=t)break;const o=Math.min(t-n.start,n.end-n.start);if(o<=0)break;if(n.isHangul){const t=this.textUnits.slice(n.start,n.start+o);1===t.length?e+=t[0]:2===t.length?e+=s(t[0],t[1]):t.length>=3&&(e+=s(t[0],t[1],t[2]))}else o>0&&(e+=this.textUnits[n.start])}return e}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());this.displayedText=this.buildTextFromUnits(this.currentIndex+1);let t=this.displayedText;this.config.showCursor&&(t+=this.config.cursorChar),this.updateDisplay(t),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){const e=t.replace(new RegExp(this.escapeHtml(this.config.cursorChar)+"$"),""),i=t.endsWith(this.config.cursorChar),s=(this.container.textContent||"").replace(new RegExp(this.config.cursorChar+"$"),"");let n="";for(let r=0;r<e.length;r++){const t=e[r],i=r>=s.length,o=" "===t?"&nbsp;":this.escapeHtml(t);n+=i?`<span class="typing-char typing-fade-in" style="opacity: 0;">${o}</span>`:`<span class="typing-char" style="opacity: 1;">${o}</span>`}i&&(n+=`<span class="typing-cursor">${this.escapeHtml(this.config.cursorChar)}</span>`),this.container.innerHTML=n;const o=this.container.querySelectorAll(".typing-fade-in");o.length>0&&requestAnimationFrame(()=>{o.forEach(t=>{t.style.opacity="1",t.classList.remove("typing-fade-in")})})}escapeHtml(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}setText(t){this.originalText=t,this.config.text=t;const e=n(t);this.textUnits=e.units,this.charUnitRanges=e.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null)}}const r=t.defineComponent({__name:"Typing",props:{className:{},style:{},onUpdate:{},onComplete:{},text:{},speed:{default:50},delay:{default:0},enabled:{type:Boolean,default:!0},threshold:{default:.2},rootMargin:{default:"0px 0px -100px 0px"},triggerOnce:{type:Boolean,default:!1},showCursor:{type:Boolean,default:!0},cursorChar:{default:"|"}},setup(e,{expose:i}){const s=e,n=t.ref(null),r=t.ref(null);return t.onMounted(()=>{if(!n.value)return;const t={text:s.text,speed:s.speed,delay:s.delay,enabled:s.enabled,threshold:s.threshold,rootMargin:s.rootMargin,triggerOnce:s.triggerOnce,showCursor:s.showCursor,cursorChar:s.cursorChar,onUpdate:s.onUpdate,onComplete:s.onComplete};r.value=new o(n.value,t)}),t.onUnmounted(()=>{r.value&&(r.value.destroy(),r.value=null)}),t.watch(()=>s.text,t=>{r.value&&t!==r.value.originalText&&r.value.setText(t)}),i({start:()=>{var t;return null==(t=r.value)?void 0:t.start()},stop:()=>{var t;return null==(t=r.value)?void 0:t.stop()},reset:()=>{var t;return null==(t=r.value)?void 0:t.reset()},setText:t=>{var e;return null==(e=r.value)?void 0:e.setText(t)},destroy:()=>{r.value&&(r.value.destroy(),r.value=null)}}),(i,s)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"containerRef",ref:n,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}});module.exports=r;
+"use strict";const t=require("vue");class e{constructor(t,e={}){this.container=t,this.options={threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",root:e.root??null,onVisible:e.onVisible,onHidden:e.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin,root:this.options.root||null}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}function i(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const i=e-44032,s=Math.floor(i/588),n=Math.floor(i%588/28),o=i%28,r=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],l=[];return l.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][s]),l.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][n]),o>0&&l.push(r[o]),l}function s(t,e,i){const s=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),n=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(e),o=i?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(i):0;if(-1===s||-1===n)return t+(e||"")+(i||"");const r=44032+21*s*28+28*n+o;return String.fromCharCode(r)}function n(t){const e=[],s=[];for(let n=0;n<t.length;n++){const o=t[n],r=o.charCodeAt(0),l=e.length;if(r>=44032&&r<=55203){const t=i(o);e.push(...t),s.push({start:l,end:e.length,isHangul:!0})}else e.push(o),s.push({start:l,end:e.length,isHangul:!1})}return{units:e,charUnitRanges:s}}class o{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=e.text,this.config={text:e.text,speed:e.speed??50,delay:e.delay??0,enabled:e.enabled??!0,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,showCursor:e.showCursor??!0,cursorChar:e.cursorChar??"|",onUpdate:e.onUpdate||null,onComplete:e.onComplete||null};const i=n(this.config.text);this.textUnits=i.units,this.charUnitRanges=i.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.visibilityManager=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.injectStyles(),this.setupVisibilityManager()}injectStyles(){if(document.getElementById("masoneffect-typing-styles"))return;const t=document.createElement("style");t.id="masoneffect-typing-styles",t.textContent="\n      .typing-char {\n        transition: opacity 0.3s ease-in;\n        display: inline-block;\n      }\n      .typing-cursor {\n        display: inline-block;\n      }\n    ",document.head.appendChild(t),this.container.style.whiteSpace="pre-wrap"}setupVisibilityManager(){this.visibilityManager=new e(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,setTimeout(()=>this.start(),this.config.delay))},onHidden:()=>{}})}buildTextFromUnits(t){if(0===t)return"";let e="";for(let i=0;i<this.charUnitRanges.length;i++){const n=this.charUnitRanges[i];if(n.start>=t)break;const o=Math.min(t-n.start,n.end-n.start);if(o<=0)break;if(n.isHangul){const t=this.textUnits.slice(n.start,n.start+o);1===t.length?e+=t[0]:2===t.length?e+=s(t[0],t[1]):t.length>=3&&(e+=s(t[0],t[1],t[2]))}else o>0&&(e+=this.textUnits[n.start])}return e}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());this.displayedText=this.buildTextFromUnits(this.currentIndex+1);let t=this.displayedText;this.config.showCursor&&(t+=this.config.cursorChar),this.updateDisplay(t),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){const e=t.replace(new RegExp(this.escapeHtml(this.config.cursorChar)+"$"),""),i=t.endsWith(this.config.cursorChar),s=(this.container.textContent||"").replace(new RegExp(this.config.cursorChar+"$"),"");let n="";for(let r=0;r<e.length;r++){const t=e[r],i=r>=s.length,o=" "===t?"&nbsp;":this.escapeHtml(t);n+=i?`<span class="typing-char typing-fade-in" style="opacity: 0;">${o}</span>`:`<span class="typing-char" style="opacity: 1;">${o}</span>`}i&&(n+=`<span class="typing-cursor">${this.escapeHtml(this.config.cursorChar)}</span>`),this.container.innerHTML=n;const o=this.container.querySelectorAll(".typing-fade-in");o.length>0&&requestAnimationFrame(()=>{o.forEach(t=>{t.style.opacity="1",t.classList.remove("typing-fade-in")})})}escapeHtml(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}setText(t){this.originalText=t,this.config.text=t;const e=n(t);this.textUnits=e.units,this.charUnitRanges=e.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null)}}const r=t.defineComponent({__name:"Typing",props:{className:{default:void 0},style:{default:void 0},onUpdate:{type:Function,default:void 0},onComplete:{type:Function,default:void 0},text:{},speed:{default:50},delay:{default:0},enabled:{type:Boolean,default:!0},threshold:{default:.2},rootMargin:{default:"0px 0px -100px 0px"},triggerOnce:{type:Boolean,default:!1},showCursor:{type:Boolean,default:!0},cursorChar:{default:"|"}},setup(e,{expose:i}){const s=e,n=t.ref(null),r=t.ref(null);return t.onMounted(()=>{if(!n.value)return;const t={text:s.text,speed:s.speed,delay:s.delay,enabled:s.enabled,threshold:s.threshold,rootMargin:s.rootMargin,triggerOnce:s.triggerOnce,showCursor:s.showCursor,cursorChar:s.cursorChar,onUpdate:s.onUpdate,onComplete:s.onComplete};r.value=new o(n.value,t)}),t.onUnmounted(()=>{r.value&&(r.value.destroy(),r.value=null)}),t.watch(()=>s.text,t=>{r.value&&t!==r.value.originalText&&r.value.setText(t)}),i({start:()=>{var t;return null==(t=r.value)?void 0:t.start()},stop:()=>{var t;return null==(t=r.value)?void 0:t.stop()},reset:()=>{var t;return null==(t=r.value)?void 0:t.reset()},setText:t=>{var e;return null==(e=r.value)?void 0:e.setText(t)},destroy:()=>{r.value&&(r.value.destroy(),r.value=null)}}),(i,s)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"containerRef",ref:n,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}});module.exports=r;

package/dist/vue/typing/index.mjs

@@ -113,9 +113,80 @@ function decomposeHangul(char) {
   const initial = Math.floor(base / (21 * 28));
   const medial = Math.floor(base % (21 * 28) / 28);
   const final = base % 28;
-  const initialChars = ["ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ", "ㅁ", "ㅂ", "ㅃ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅉ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
-  const medialChars = ["ㅏ", "ㅐ", "ㅑ", "ㅒ", "ㅓ", "ㅔ", "ㅕ", "ㅖ", "ㅗ", "ㅘ", "ㅙ", "ㅚ", "ㅛ", "ㅜ", "ㅝ", "ㅞ", "ㅟ", "ㅠ", "ㅡ", "ㅢ", "ㅣ"];
-  const finalChars = ["", "ㄱ", "ㄲ", "ㄳ", "ㄴ", "ㄵ", "ㄶ", "ㄷ", "ㄹ", "ㄺ", "ㄻ", "ㄼ", "ㄽ", "ㄾ", "ㄿ", "ㅀ", "ㅁ", "ㅂ", "ㅄ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
+  const initialChars = [
+    "ㄱ",
+    "ㄲ",
+    "ㄴ",
+    "ㄷ",
+    "ㄸ",
+    "ㄹ",
+    "ㅁ",
+    "ㅂ",
+    "ㅃ",
+    "ㅅ",
+    "ㅆ",
+    "ㅇ",
+    "ㅈ",
+    "ㅉ",
+    "ㅊ",
+    "ㅋ",
+    "ㅌ",
+    "ㅍ",
+    "ㅎ"
+  ];
+  const medialChars = [
+    "ㅏ",
+    "ㅐ",
+    "ㅑ",
+    "ㅒ",
+    "ㅓ",
+    "ㅔ",
+    "ㅕ",
+    "ㅖ",
+    "ㅗ",
+    "ㅘ",
+    "ㅙ",
+    "ㅚ",
+    "ㅛ",
+    "ㅜ",
+    "ㅝ",
+    "ㅞ",
+    "ㅟ",
+    "ㅠ",
+    "ㅡ",
+    "ㅢ",
+    "ㅣ"
+  ];
+  const finalChars = [
+    "",
+    "ㄱ",
+    "ㄲ",
+    "ㄳ",
+    "ㄴ",
+    "ㄵ",
+    "ㄶ",
+    "ㄷ",
+    "ㄹ",
+    "ㄺ",
+    "ㄻ",
+    "ㄼ",
+    "ㄽ",
+    "ㄾ",
+    "ㄿ",
+    "ㅀ",
+    "ㅁ",
+    "ㅂ",
+    "ㅄ",
+    "ㅅ",
+    "ㅆ",
+    "ㅇ",
+    "ㅈ",
+    "ㅊ",
+    "ㅋ",
+    "ㅌ",
+    "ㅍ",
+    "ㅎ"
+  ];
   const result = [];
   result.push(initialChars[initial]);
   result.push(medialChars[medial]);
@@ -125,9 +196,80 @@ function decomposeHangul(char) {
   return result;
 }
 function composeHangul(initial, medial, final) {
-  const initialChars = ["ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ", "ㅁ", "ㅂ", "ㅃ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅉ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
-  const medialChars = ["ㅏ", "ㅐ", "ㅑ", "ㅒ", "ㅓ", "ㅔ", "ㅕ", "ㅖ", "ㅗ", "ㅘ", "ㅙ", "ㅚ", "ㅛ", "ㅜ", "ㅝ", "ㅞ", "ㅟ", "ㅠ", "ㅡ", "ㅢ", "ㅣ"];
-  const finalChars = ["", "ㄱ", "ㄲ", "ㄳ", "ㄴ", "ㄵ", "ㄶ", "ㄷ", "ㄹ", "ㄺ", "ㄻ", "ㄼ", "ㄽ", "ㄾ", "ㄿ", "ㅀ", "ㅁ", "ㅂ", "ㅄ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
+  const initialChars = [
+    "ㄱ",
+    "ㄲ",
+    "ㄴ",
+    "ㄷ",
+    "ㄸ",
+    "ㄹ",
+    "ㅁ",
+    "ㅂ",
+    "ㅃ",
+    "ㅅ",
+    "ㅆ",
+    "ㅇ",
+    "ㅈ",
+    "ㅉ",
+    "ㅊ",
+    "ㅋ",
+    "ㅌ",
+    "ㅍ",
+    "ㅎ"
+  ];
+  const medialChars = [
+    "ㅏ",
+    "ㅐ",
+    "ㅑ",
+    "ㅒ",
+    "ㅓ",
+    "ㅔ",
+    "ㅕ",
+    "ㅖ",
+    "ㅗ",
+    "ㅘ",
+    "ㅙ",
+    "ㅚ",
+    "ㅛ",
+    "ㅜ",
+    "ㅝ",
+    "ㅞ",
+    "ㅟ",
+    "ㅠ",
+    "ㅡ",
+    "ㅢ",
+    "ㅣ"
+  ];
+  const finalChars = [
+    "",
+    "ㄱ",
+    "ㄲ",
+    "ㄳ",
+    "ㄴ",
+    "ㄵ",
+    "ㄶ",
+    "ㄷ",
+    "ㄹ",
+    "ㄺ",
+    "ㄻ",
+    "ㄼ",
+    "ㄽ",
+    "ㄾ",
+    "ㄿ",
+    "ㅀ",
+    "ㅁ",
+    "ㅂ",
+    "ㅄ",
+    "ㅅ",
+    "ㅆ",
+    "ㅇ",
+    "ㅈ",
+    "ㅊ",
+    "ㅋ",
+    "ㅌ",
+    "ㅍ",
+    "ㅎ"
+  ];
   const initialIndex = initialChars.indexOf(initial);
   const medialIndex = medialChars.indexOf(medial);
   const finalIndex = final ? finalChars.indexOf(final) : 0;
@@ -310,10 +452,16 @@ class Typing {
     this.updateDisplay("");
   }
   updateDisplay(text) {
-    const textWithoutCursor = text.replace(new RegExp(this.escapeHtml(this.config.cursorChar) + "$"), "");
+    const textWithoutCursor = text.replace(
+      new RegExp(this.escapeHtml(this.config.cursorChar) + "$"),
+      ""
+    );
     const hasCursor = text.endsWith(this.config.cursorChar);
     const previousTextContent = this.container.textContent || "";
-    const previousTextWithoutCursor = previousTextContent.replace(new RegExp(this.config.cursorChar + "$"), "");
+    const previousTextWithoutCursor = previousTextContent.replace(
+      new RegExp(this.config.cursorChar + "$"),
+      ""
+    );
     let html = "";
     for (let i = 0; i < textWithoutCursor.length; i++) {
       const char = textWithoutCursor[i];
@@ -368,10 +516,10 @@ class Typing {
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Typing",
   props: {
-    className: {},
-    style: {},
-    onUpdate: {},
-    onComplete: {},
+    className: { default: void 0 },
+    style: { default: void 0 },
+    onUpdate: { type: Function, default: void 0 },
+    onComplete: { type: Function, default: void 0 },
     text: {},
     speed: { default: 50 },
     delay: { default: 0 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masoneffect",
-  "version": "2.0.18",
+  "version": "2.0.20",
   "description": "A collection of animation effects library. Supports React, Vue, Svelte, and vanilla JavaScript with Tree-shaking support.",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -132,21 +132,28 @@
   ],
   "scripts": {
     "build": "rollup -c rollup.config.mjs && npm run build:vue && npm run build:vue:textToParticle && npm run build:vue:count && npm run build:vue:typing && npm run build:vue:scrollFadeIn && npm run build:vue:textSpin && npm run build:svelte && npm run build:svelte:textToParticle && npm run build:svelte:count && npm run build:svelte:typing && npm run build:svelte:scrollFadeIn && npm run build:svelte:textSpin && node scripts/generate-react-types.js",
-    "build:vue": "vite build --config vite.config.vue.mjs",
-    "build:vue:textToParticle": "vite build --config vite.config.vue.textToParticle.mjs",
-    "build:vue:count": "vite build --config vite.config.vue.count.mjs",
-    "build:vue:typing": "vite build --config vite.config.vue.typing.mjs",
-    "build:vue:scrollFadeIn": "vite build --config vite.config.vue.scrollFadeIn.mjs",
-    "build:vue:textSpin": "vite build --config vite.config.vue.textSpin.mjs",
-    "build:svelte": "vite build --config vite.config.svelte.mjs",
-    "build:svelte:textToParticle": "vite build --config vite.config.svelte.textToParticle.mjs",
-    "build:svelte:count": "vite build --config vite.config.svelte.count.mjs",
-    "build:svelte:typing": "vite build --config vite.config.svelte.typing.mjs",
-    "build:svelte:scrollFadeIn": "vite build --config vite.config.svelte.scrollFadeIn.mjs",
-    "build:svelte:textSpin": "vite build --config vite.config.svelte.textSpin.mjs",
+    "build:vue": "vite build --config config/vite/vite.config.vue.mjs",
+    "build:vue:textToParticle": "vite build --config config/vite/vite.config.vue.textToParticle.mjs",
+    "build:vue:count": "vite build --config config/vite/vite.config.vue.count.mjs",
+    "build:vue:typing": "vite build --config config/vite/vite.config.vue.typing.mjs",
+    "build:vue:scrollFadeIn": "vite build --config config/vite/vite.config.vue.scrollFadeIn.mjs",
+    "build:vue:textSpin": "vite build --config config/vite/vite.config.vue.textSpin.mjs",
+    "build:svelte": "vite build --config config/vite/vite.config.svelte.mjs",
+    "build:svelte:textToParticle": "vite build --config config/vite/vite.config.svelte.textToParticle.mjs",
+    "build:svelte:count": "vite build --config config/vite/vite.config.svelte.count.mjs",
+    "build:svelte:typing": "vite build --config config/vite/vite.config.svelte.typing.mjs",
+    "build:svelte:scrollFadeIn": "vite build --config config/vite/vite.config.svelte.scrollFadeIn.mjs",
+    "build:svelte:textSpin": "vite build --config config/vite/vite.config.svelte.textSpin.mjs",
     "dev": "rollup -c rollup.config.mjs -w",
     "serve": "npx http-server . -p 8080 -o --cors",
     "dev:example": "npm run serve",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\" \"eslint.config.mjs\" \"prettier.config.mjs\" \"config/**/*.mjs\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\" \"eslint.config.mjs\" \"prettier.config.mjs\" \"config/**/*.mjs\"",
+    "test": "vitest run --config config/vitest.config.mjs",
+    "test:watch": "vitest --config config/vitest.config.mjs",
+    "qa": "npm run format:check || (npm run format && npm run format:check) && npm run lint && npm test",
     "precheck": "node scripts/check-before-publish.js",
     "prepublishOnly": "npm run build && npm run precheck"
   },
@@ -180,6 +187,7 @@
   },
   "aiAgentGuide": "./llms.txt",
   "devDependencies": {
+    "@eslint/js": "^9.39.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
@@ -188,15 +196,28 @@
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-vue": "^5.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-svelte": "^3.17.1",
+    "eslint-plugin-vue": "^10.9.0",
+    "globals": "^17.6.0",
+    "jsdom": "^24.1.3",
+    "prettier": "^3.8.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "rollup": "^4.9.0",
     "svelte": "^4.0.0",
+    "svelte-eslint-parser": "^1.6.0",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
     "typescript": "^5.3.3",
+    "typescript-eslint": "^8.59.1",
     "vite": "^5.0.0",
-    "vite-plugin-dts": "^3.6.0"
+    "vite-plugin-dts": "^3.6.0",
+    "vitest": "^2.1.9",
+    "vue-eslint-parser": "^10.4.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0 || >=19.0.0-0",