torph 0.0.5 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/.DS_Store +0 -0
- package/dist/{TextMorph-N26F7N56.vue → TextMorph-SZJHGWGL.vue} +13 -7
- package/dist/index.d.mts +23 -4
- package/dist/index.d.ts +23 -4
- package/dist/index.js +2 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +24 -2
- package/dist/index.mjs.map +1 -1
- package/dist/react/index.d.mts +15 -3
- package/dist/react/index.d.ts +15 -3
- package/dist/react/index.js +2 -3
- package/dist/react/index.js.map +1 -1
- package/dist/react/index.mjs +24 -2
- package/dist/react/index.mjs.map +1 -1
- package/dist/svelte/index.js +1 -1
- package/dist/svelte/index.js.map +1 -1
- package/dist/svelte/index.mjs +1 -1
- package/dist/svelte/index.mjs.map +1 -1
- package/dist/vue/index.d.mts +10 -0
- package/dist/vue/index.js +1 -1
- package/dist/vue/index.js.map +1 -1
- package/dist/vue/index.mjs +1 -1
- package/dist/vue/index.mjs.map +1 -1
- package/package.json +5 -3
- package/dist/chunk-5MHVW5FX.mjs +0 -26
- package/dist/chunk-5MHVW5FX.mjs.map +0 -1
- package/dist/types-CnPojgn6.d.mts +0 -14
- package/dist/types-CnPojgn6.d.ts +0 -14
package/README.md
CHANGED
package/dist/.DS_Store
CHANGED
|
Binary file
|
|
@@ -9,16 +9,21 @@
|
|
|
9
9
|
|
|
10
10
|
<script setup lang="ts">
|
|
11
11
|
import { ref, onMounted, onUnmounted, watch } from "vue";
|
|
12
|
-
import {
|
|
12
|
+
import {
|
|
13
|
+
DEFAULT_AS,
|
|
14
|
+
DEFAULT_TEXT_MORPH_OPTIONS,
|
|
15
|
+
TextMorph as Morph,
|
|
16
|
+
} from "../lib/text-morph";
|
|
13
17
|
import type { TextMorphProps } from "./types";
|
|
14
18
|
|
|
15
19
|
const props = withDefaults(defineProps<TextMorphProps>(), {
|
|
16
|
-
locale:
|
|
17
|
-
duration:
|
|
18
|
-
ease:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
locale: DEFAULT_TEXT_MORPH_OPTIONS.locale,
|
|
21
|
+
duration: DEFAULT_TEXT_MORPH_OPTIONS.duration,
|
|
22
|
+
ease: DEFAULT_TEXT_MORPH_OPTIONS.ease,
|
|
23
|
+
scale: DEFAULT_TEXT_MORPH_OPTIONS.scale,
|
|
24
|
+
disabled: DEFAULT_TEXT_MORPH_OPTIONS.disabled,
|
|
25
|
+
respectReducedMotion: DEFAULT_TEXT_MORPH_OPTIONS.respectReducedMotion,
|
|
26
|
+
as: DEFAULT_AS,
|
|
22
27
|
});
|
|
23
28
|
|
|
24
29
|
const containerRef = ref<HTMLElement | null>(null);
|
|
@@ -32,6 +37,7 @@ onMounted(() => {
|
|
|
32
37
|
duration: props.duration,
|
|
33
38
|
ease: props.ease,
|
|
34
39
|
debug: props.debug,
|
|
40
|
+
scale: props.scale,
|
|
35
41
|
disabled: props.disabled,
|
|
36
42
|
respectReducedMotion: props.respectReducedMotion,
|
|
37
43
|
onAnimationStart: props.onAnimationStart,
|
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
interface TextMorphOptions {
|
|
2
|
+
debug?: boolean;
|
|
3
|
+
element: HTMLElement;
|
|
4
|
+
locale?: Intl.LocalesArgument;
|
|
5
|
+
scale?: boolean;
|
|
6
|
+
duration?: number;
|
|
7
|
+
ease?: string;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
respectReducedMotion?: boolean;
|
|
10
|
+
onAnimationStart?: () => void;
|
|
11
|
+
onAnimationComplete?: () => void;
|
|
12
|
+
}
|
|
4
13
|
|
|
14
|
+
declare const DEFAULT_AS = "span";
|
|
15
|
+
declare const DEFAULT_TEXT_MORPH_OPTIONS: {
|
|
16
|
+
readonly debug: false;
|
|
17
|
+
readonly locale: "en";
|
|
18
|
+
readonly duration: 400;
|
|
19
|
+
readonly scale: true;
|
|
20
|
+
readonly ease: "cubic-bezier(0.19, 1, 0.22, 1)";
|
|
21
|
+
readonly disabled: false;
|
|
22
|
+
readonly respectReducedMotion: true;
|
|
23
|
+
};
|
|
5
24
|
declare class TextMorph {
|
|
6
25
|
private element;
|
|
7
26
|
private options;
|
|
@@ -27,4 +46,4 @@ declare class TextMorph {
|
|
|
27
46
|
private log;
|
|
28
47
|
}
|
|
29
48
|
|
|
30
|
-
export { TextMorph, TextMorphOptions
|
|
49
|
+
export { DEFAULT_AS, DEFAULT_TEXT_MORPH_OPTIONS, TextMorph, type TextMorphOptions };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
interface TextMorphOptions {
|
|
2
|
+
debug?: boolean;
|
|
3
|
+
element: HTMLElement;
|
|
4
|
+
locale?: Intl.LocalesArgument;
|
|
5
|
+
scale?: boolean;
|
|
6
|
+
duration?: number;
|
|
7
|
+
ease?: string;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
respectReducedMotion?: boolean;
|
|
10
|
+
onAnimationStart?: () => void;
|
|
11
|
+
onAnimationComplete?: () => void;
|
|
12
|
+
}
|
|
4
13
|
|
|
14
|
+
declare const DEFAULT_AS = "span";
|
|
15
|
+
declare const DEFAULT_TEXT_MORPH_OPTIONS: {
|
|
16
|
+
readonly debug: false;
|
|
17
|
+
readonly locale: "en";
|
|
18
|
+
readonly duration: 400;
|
|
19
|
+
readonly scale: true;
|
|
20
|
+
readonly ease: "cubic-bezier(0.19, 1, 0.22, 1)";
|
|
21
|
+
readonly disabled: false;
|
|
22
|
+
readonly respectReducedMotion: true;
|
|
23
|
+
};
|
|
5
24
|
declare class TextMorph {
|
|
6
25
|
private element;
|
|
7
26
|
private options;
|
|
@@ -27,4 +46,4 @@ declare class TextMorph {
|
|
|
27
46
|
private log;
|
|
28
47
|
}
|
|
29
48
|
|
|
30
|
-
export { TextMorph, TextMorphOptions
|
|
49
|
+
export { DEFAULT_AS, DEFAULT_TEXT_MORPH_OPTIONS, TextMorph, type TextMorphOptions };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
"use strict";var E=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var I=(d,t)=>{for(var i in t)E(d,i,{get:t[i],enumerable:!0})},k=(d,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of T(t))!S.call(d,e)&&e!==i&&E(d,e,{get:()=>t[e],enumerable:!(o=$(t,e))||o.enumerable});return d};var L=d=>k(E({},"__esModule",{value:!0}),d);var R={};I(R,{TextMorph:()=>b,version:()=>w});module.exports=L(R);var w="0.0.5";var b=class d{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=!0;prefersReducedMotion=!1;mediaQuery;static styleEl;constructor(t){if(this.options={locale:"en",duration:400,scale:!0,ease:"cubic-bezier(0.19, 1, 0.22, 1)",respectReducedMotion:!0,...t},this.element=t.element,typeof window<"u"&&this.options.respectReducedMotion){this.mediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),this.prefersReducedMotion=this.mediaQuery.matches;let i=o=>{this.prefersReducedMotion=o.matches};this.mediaQuery.addEventListener("change",i)}this.isDisabled()||(this.element.setAttribute("torph-root",""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,t.debug&&this.element.setAttribute("torph-debug","")),this.data=this.element.innerHTML,this.isDisabled()||this.addStyles()}destroy(){this.mediaQuery&&this.mediaQuery.removeEventListener("change",this.handleMediaQueryChange),this.element.getAnimations().forEach(t=>t.cancel()),this.element.removeAttribute("torph-root"),this.element.removeAttribute("torph-debug"),this.removeStyles()}handleMediaQueryChange=t=>{this.prefersReducedMotion=t.matches};isDisabled(){return!!(this.options.disabled||this.options.respectReducedMotion&&this.prefersReducedMotion)}update(t){if(t!==this.data){if(this.data=t,this.isDisabled()){typeof t=="string"&&(this.element.textContent=t);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element)}}createTextGroup(t,i){let o=i.offsetWidth,e=i.offsetHeight,a=t.includes(" "),p;if(typeof Intl.Segmenter<"u"){let r=new Intl.Segmenter(this.options.locale,{granularity:a?"word":"grapheme"}).segment(t)[Symbol.iterator]();p=this.blocks(r)}else p=this.blocksFallback(t,a);this.prevMeasures=this.measure();let l=Array.from(i.children),u=new Set(p.map(s=>s.id)),g=l.filter(s=>!u.has(s.getAttribute("torph-id"))&&!s.hasAttribute("torph-exiting")),m=new Set(g),y=new Map;for(let s=0;s<l.length;s++){let r=l[s];if(!m.has(r))continue;let h=null;for(let n=s+1;n<l.length;n++){let c=l[n].getAttribute("torph-id");if(u.has(c)&&!m.has(l[n])){h=c;break}}if(!h)for(let n=s-1;n>=0;n--){let c=l[n].getAttribute("torph-id");if(u.has(c)&&!m.has(l[n])){h=c;break}}y.set(r,h)}let x=i.getBoundingClientRect();if(g.forEach(s=>{let r=s.getBoundingClientRect();s.setAttribute("torph-exiting",""),s.style.position="absolute",s.style.pointerEvents="none",s.style.left=`${r.left-x.left}px`,s.style.top=`${r.top-x.top}px`,s.style.width=`${r.width}px`,s.style.height=`${r.height}px`}),l.forEach(s=>{let r=s.getAttribute("torph-id");u.has(r)&&s.remove()}),p.forEach(s=>{let r=document.createElement("span");r.setAttribute("torph-item",""),r.setAttribute("torph-id",s.id),r.textContent=s.string,i.appendChild(r)}),this.currentMeasures=this.measure(),this.updateStyles(p),g.forEach(s=>{if(this.isInitialRender){s.remove();return}let r=y.get(s),h=0,n=0;if(r&&this.prevMeasures[r]&&this.currentMeasures[r]){let v=this.prevMeasures[r],A=this.currentMeasures[r];h=A.x-v.x,n=A.y-v.y}s.getAnimations().forEach(v=>v.cancel()),s.animate({transform:this.options.scale?`translate(${h}px, ${n}px) scale(0.95)`:`translate(${h}px, ${n}px)`,offset:1},{duration:this.options.duration,easing:this.options.ease,fill:"both"});let c=s.animate({opacity:0,offset:1},{duration:this.options.duration*.25,easing:"linear",fill:"both"});c.onfinish=()=>s.remove()}),this.isInitialRender){this.isInitialRender=!1,i.style.width="auto",i.style.height="auto";return}if(o===0||e===0)return;i.style.width="auto",i.style.height="auto",i.offsetWidth;let f=i.offsetWidth,M=i.offsetHeight;i.style.width=`${o}px`,i.style.height=`${e}px`,i.offsetWidth,i.style.width=`${f}px`,i.style.height=`${M}px`,setTimeout(()=>{i.style.width="auto",i.style.height="auto",this.options.onAnimationComplete&&this.options.onAnimationComplete()},this.options.duration)}measure(){let t=Array.from(this.element.children),i={};return t.forEach((o,e)=>{if(o.hasAttribute("torph-exiting"))return;let a=o.getAttribute("torph-id")||`child-${e}`;i[a]={x:o.offsetLeft,y:o.offsetTop}}),i}updateStyles(t){if(this.isInitialRender)return;let i=Array.from(this.element.children),o=new Set(t.map(e=>e.id).filter(e=>this.prevMeasures[e]));i.forEach((e,a)=>{if(e.hasAttribute("torph-exiting"))return;let p=e.getAttribute("torph-id")||`child-${a}`,l=this.prevMeasures[p],u=this.currentMeasures[p],g=u?.x||0,m=u?.y||0,y=l?l.x-g:0,x=l?l.y-m:0,f=!l;if(f){let r=t.findIndex(n=>n.id===p),h=null;for(let n=r-1;n>=0;n--)if(o.has(t[n].id)){h=t[n].id;break}if(!h){for(let n=r+1;n<t.length;n++)if(o.has(t[n].id)){h=t[n].id;break}}if(h){let n=this.prevMeasures[h],c=this.currentMeasures[h];y=n.x-c.x,x=n.y-c.y}}e.getAnimations().forEach(r=>r.cancel()),e.animate({transform:`translate(${y}px, ${x}px) scale(${f?.95:1})`,offset:0},{duration:this.options.duration,easing:this.options.ease,fill:"both"});let M=f?this.options.duration*.25:0,s=f?this.options.duration*.25:0;e.animate({opacity:f?0:1,offset:0},{duration:M,delay:s,easing:"linear",fill:"both"})})}addStyles(){if(d.styleEl)return;let t=document.createElement("style");t.dataset.torph="true",t.innerHTML=`
|
|
1
|
+
'use strict';var T="span",A={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},b=class g{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;prefersReducedMotion=false;mediaQuery;static styleEl;constructor(e){this.options={...A,...e},this.element=e.element,typeof window<"u"&&this.options.respectReducedMotion&&(this.mediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),this.prefersReducedMotion=this.mediaQuery.matches,this.mediaQuery.addEventListener("change",this.handleMediaQueryChange)),this.isDisabled()||(this.element.setAttribute("torph-root",""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,e.debug&&this.element.setAttribute("torph-debug","")),this.data="",this.isDisabled()||this.addStyles();}destroy(){this.mediaQuery&&this.mediaQuery.removeEventListener("change",this.handleMediaQueryChange),this.element.getAnimations().forEach(e=>e.cancel()),this.element.removeAttribute("torph-root"),this.element.removeAttribute("torph-debug"),this.removeStyles();}handleMediaQueryChange=e=>{this.prefersReducedMotion=e.matches;};isDisabled(){return !!(this.options.disabled||this.options.respectReducedMotion&&this.prefersReducedMotion)}update(e){if(e!==this.data){if(this.data=e,this.isDisabled()){typeof e=="string"&&(this.element.textContent=e);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(e,s){let h=s.offsetWidth,i=s.offsetHeight,a=e.includes(" "),p;if(typeof Intl.Segmenter<"u"){let r=new Intl.Segmenter(this.options.locale,{granularity:a?"word":"grapheme"}).segment(e)[Symbol.iterator]();p=this.blocks(r);}else p=this.blocksFallback(e,a);this.prevMeasures=this.measure();let l=Array.from(s.children),d=new Set(p.map(t=>t.id)),c=l.filter(t=>!d.has(t.getAttribute("torph-id"))&&!t.hasAttribute("torph-exiting")),m=new Set(c),y=new Map;for(let t=0;t<l.length;t++){let r=l[t];if(!m.has(r))continue;let o=null;for(let n=t+1;n<l.length;n++){let u=l[n].getAttribute("torph-id");if(d.has(u)&&!m.has(l[n])){o=u;break}}if(!o)for(let n=t-1;n>=0;n--){let u=l[n].getAttribute("torph-id");if(d.has(u)&&!m.has(l[n])){o=u;break}}y.set(r,o);}let x=c.map(t=>(t.getAnimations().forEach(r=>r.cancel()),{left:t.offsetLeft,top:t.offsetTop,width:t.offsetWidth,height:t.offsetHeight}));if(c.forEach((t,r)=>{let o=x[r];t.setAttribute("torph-exiting",""),t.style.position="absolute",t.style.pointerEvents="none",t.style.left=`${o.left}px`,t.style.top=`${o.top}px`,t.style.width=`${o.width}px`,t.style.height=`${o.height}px`;}),l.forEach(t=>{let r=t.getAttribute("torph-id");d.has(r)&&t.remove();}),Array.from(s.childNodes).forEach(t=>{t.nodeType===Node.TEXT_NODE&&t.remove();}),p.forEach(t=>{let r=document.createElement("span");r.setAttribute("torph-item",""),r.setAttribute("torph-id",t.id),r.textContent=t.string,s.appendChild(r);}),this.currentMeasures=this.measure(),this.updateStyles(p),c.forEach(t=>{if(this.isInitialRender){t.remove();return}let r=y.get(t),o=0,n=0;if(r&&this.prevMeasures[r]&&this.currentMeasures[r]){let E=this.prevMeasures[r],v=this.currentMeasures[r];o=v.x-E.x,n=v.y-E.y;}t.animate({transform:this.options.scale?`translate(${o}px, ${n}px) scale(0.95)`:`translate(${o}px, ${n}px)`,offset:1},{duration:this.options.duration,easing:this.options.ease,fill:"both"});let u=t.animate({opacity:0,offset:1},{duration:this.options.duration*.25,easing:"linear",fill:"both"});u.onfinish=()=>t.remove();}),this.isInitialRender){this.isInitialRender=false,s.style.width="auto",s.style.height="auto";return}if(h===0||i===0)return;s.style.width="auto",s.style.height="auto",s.offsetWidth;let f=s.offsetWidth,M=s.offsetHeight;s.style.width=`${h}px`,s.style.height=`${i}px`,s.offsetWidth,s.style.width=`${f}px`,s.style.height=`${M}px`,setTimeout(()=>{s.style.width="auto",s.style.height="auto",this.options.onAnimationComplete&&this.options.onAnimationComplete();},this.options.duration);}measure(){let e=Array.from(this.element.children),s={};return e.forEach((h,i)=>{if(h.hasAttribute("torph-exiting"))return;let a=h.getAttribute("torph-id")||`child-${i}`;s[a]={x:h.offsetLeft,y:h.offsetTop};}),s}updateStyles(e){if(this.isInitialRender)return;let s=Array.from(this.element.children),h=new Set(e.map(i=>i.id).filter(i=>this.prevMeasures[i]));s.forEach((i,a)=>{if(i.hasAttribute("torph-exiting"))return;let p=i.getAttribute("torph-id")||`child-${a}`,l=this.prevMeasures[p],d=this.currentMeasures[p],c=d?.x||0,m=d?.y||0,y=l?l.x-c:0,x=l?l.y-m:0,f=!l;if(f){let r=e.findIndex(n=>n.id===p),o=null;for(let n=r-1;n>=0;n--)if(h.has(e[n].id)){o=e[n].id;break}if(!o){for(let n=r+1;n<e.length;n++)if(h.has(e[n].id)){o=e[n].id;break}}if(o){let n=this.prevMeasures[o],u=this.currentMeasures[o];y=n.x-u.x,x=n.y-u.y;}}i.getAnimations().forEach(r=>r.cancel()),i.animate({transform:`translate(${y}px, ${x}px) scale(${f?.95:1})`,offset:0},{duration:this.options.duration,easing:this.options.ease,fill:"both"});let M=f?this.options.duration*.25:0,t=f?this.options.duration*.25:0;i.animate({opacity:f?0:1,offset:0},{duration:M,delay:t,easing:"linear",fill:"both"});});}addStyles(){if(g.styleEl)return;let e=document.createElement("style");e.dataset.torph="true",e.innerHTML=`
|
|
3
2
|
[torph-root] {
|
|
4
3
|
display: inline-flex;
|
|
5
4
|
position: relative;
|
|
@@ -22,5 +21,5 @@
|
|
|
22
21
|
outline-offset: -4px;
|
|
23
22
|
}
|
|
24
23
|
}
|
|
25
|
-
`,document.head.appendChild(
|
|
24
|
+
`,document.head.appendChild(e),g.styleEl=e;}removeStyles(){g.styleEl&&(g.styleEl.remove(),g.styleEl=void 0);}blocks(e){return Array.from(e).reduce((h,i)=>i.segment===" "?[...h,{id:`space-${i.index}`,string:"\xA0"}]:h.find(p=>p.string===i.segment)?[...h,{id:`${i.segment}-${i.index}`,string:i.segment}]:[...h,{id:i.segment,string:i.segment}],[])}blocksFallback(e,s){let h=s?e.split(" "):e.split(""),i=[];return s?h.forEach((a,p)=>{p>0&&i.push({id:`space-${p}`,string:"\xA0"}),i.find(d=>d.string===a)?i.push({id:`${a}-${p}`,string:a}):i.push({id:a,string:a});}):h.forEach((a,p)=>{i.find(d=>d.string===a)?i.push({id:`${a}-${p}`,string:a}):i.push({id:a,string:a});}),i}log(...e){this.options.debug&&console.log("[TextMorph]",...e);}};exports.DEFAULT_AS=T;exports.DEFAULT_TEXT_MORPH_OPTIONS=A;exports.TextMorph=b;//# sourceMappingURL=index.js.map
|
|
26
25
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../package.json","../src/lib/text-morph/index.ts"],"sourcesContent":["export { version } from \"./../package.json\";\n\nexport { TextMorph } from \"./lib/text-morph\";\nexport type { TextMorphOptions } from \"./lib/text-morph/types\";\n","{\n \"name\": \"torph\",\n \"version\": \"0.0.5\",\n \"description\": \"Dependency-free animated text component.\",\n \"author\": \"Lochie Axon\",\n \"license\": \"MIT\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/lochie/torph.git\",\n \"directory\": \"packages/torph\"\n },\n \"types\": \"dist/index.d.ts\",\n \"exports\": {\n \".\": {\n \"types\": \"./dist/index.d.ts\",\n \"import\": \"./dist/index.mjs\",\n \"require\": \"./dist/index.js\"\n },\n \"./react\": {\n \"types\": \"./dist/react/index.d.ts\",\n \"import\": \"./dist/react/index.mjs\",\n \"require\": \"./dist/react/index.js\"\n },\n \"./vue\": {\n \"types\": \"./dist/vue/index.d.ts\",\n \"import\": \"./dist/vue/index.mjs\",\n \"require\": \"./dist/vue/index.js\"\n },\n \"./svelte\": {\n \"types\": \"./dist/svelte/index.d.ts\",\n \"import\": \"./dist/svelte/index.mjs\",\n \"require\": \"./dist/svelte/index.js\"\n }\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"build\": \"tsup\",\n \"dev\": \"tsup --watch\",\n \"lint\": \"eslint -c .eslintrc.cjs ./src/**/*.{ts,tsx}\",\n \"lint:fix\": \"eslint --fix -c .eslintrc.cjs ./src/**/*.{ts,tsx}\",\n \"pre-commit\": \"lint-staged\"\n },\n \"keywords\": [\n \"react\",\n \"vue\",\n \"svelte\",\n \"text\",\n \"animation\",\n \"morph\"\n ],\n \"bugs\": {\n \"url\": \"https://github.com/lochie/torph/issues\"\n },\n \"files\": [\n \"dist/*\"\n ],\n \"peerDependencies\": {\n \"react\": \">=18\",\n \"react-dom\": \">=18\",\n \"vue\": \">=3\",\n \"svelte\": \">=4\"\n },\n \"peerDependenciesMeta\": {\n \"react\": {\n \"optional\": true\n },\n \"react-dom\": {\n \"optional\": true\n },\n \"vue\": {\n \"optional\": true\n },\n \"svelte\": {\n \"optional\": true\n }\n },\n \"devDependencies\": {\n \"@types/react\": \"^18.2.15\",\n \"@typescript-eslint/eslint-plugin\": \"^6.8.0\",\n \"@typescript-eslint/parser\": \"^6.8.0\",\n \"eslint\": \"^9.36.0\",\n \"eslint-config-airbnb\": \"^19.0.4\",\n \"eslint-config-airbnb-typescript\": \"^17.1.0\",\n \"eslint-config-prettier\": \"^9.0.0\",\n \"eslint-plugin-import\": \"^2.28.1\",\n \"eslint-plugin-jsx-a11y\": \"^6.7.1\",\n \"eslint-plugin-prettier\": \"^5.0.1\",\n \"eslint-plugin-react\": \"^7.33.2\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"prettier\": \"^3.0.3\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"svelte\": \"^4.0.0\",\n \"tsup\": \"^8.5.0\",\n \"typescript\": \"^5.9.3\",\n \"vue\": \"^3.3.0\"\n }\n}\n","import type { TextMorphOptions } from \"./types\";\n\nexport type { TextMorphOptions } from \"./types\";\n\ntype Block = {\n id: string;\n string: string;\n};\ntype Measures = {\n [key: string]: { x: number; y: number };\n};\n\nexport class TextMorph {\n private element: HTMLElement;\n private options: Omit<TextMorphOptions, \"element\"> = {};\n\n private data: HTMLElement | string;\n\n private currentMeasures: Measures = {};\n private prevMeasures: Measures = {};\n private isInitialRender = true;\n private prefersReducedMotion = false;\n private mediaQuery?: MediaQueryList;\n\n static styleEl: HTMLStyleElement;\n\n constructor(options: TextMorphOptions) {\n this.options = {\n locale: \"en\",\n duration: 400,\n scale: true,\n ease: \"cubic-bezier(0.19, 1, 0.22, 1)\",\n respectReducedMotion: true,\n ...options,\n };\n\n this.element = options.element;\n\n // reduced motion detection\n if (typeof window !== \"undefined\" && this.options.respectReducedMotion) {\n this.mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n this.prefersReducedMotion = this.mediaQuery.matches;\n\n const listener = (event: MediaQueryListEvent) => {\n this.prefersReducedMotion = event.matches;\n };\n\n this.mediaQuery.addEventListener(\"change\", listener);\n }\n\n if (!this.isDisabled()) {\n this.element.setAttribute(\"torph-root\", \"\");\n this.element.style.transitionDuration = `${this.options.duration}ms`;\n this.element.style.transitionTimingFunction = this.options.ease!;\n\n if (options.debug) this.element.setAttribute(\"torph-debug\", \"\");\n }\n\n this.data = this.element.innerHTML;\n\n if (!this.isDisabled()) {\n this.addStyles();\n }\n }\n\n destroy() {\n if (this.mediaQuery) {\n this.mediaQuery.removeEventListener(\n \"change\",\n this.handleMediaQueryChange,\n );\n }\n this.element.getAnimations().forEach((anim) => anim.cancel());\n this.element.removeAttribute(\"torph-root\");\n this.element.removeAttribute(\"torph-debug\");\n this.removeStyles();\n }\n\n private handleMediaQueryChange = (event: MediaQueryListEvent) => {\n this.prefersReducedMotion = event.matches;\n };\n\n private isDisabled(): boolean {\n return Boolean(\n this.options.disabled ||\n (this.options.respectReducedMotion && this.prefersReducedMotion),\n );\n }\n\n update(value: HTMLElement | string) {\n if (value === this.data) return;\n this.data = value;\n\n if (this.isDisabled()) {\n if (typeof value === \"string\") {\n this.element.textContent = value;\n }\n return;\n }\n\n if (this.data instanceof HTMLElement) {\n // TODO: handle HTMLElement case\n throw new Error(\"HTMLElement not yet supported\");\n } else {\n if (this.options.onAnimationStart && !this.isInitialRender) {\n this.options.onAnimationStart();\n }\n this.createTextGroup(this.data, this.element);\n }\n }\n\n private createTextGroup(value: string, element: HTMLElement) {\n const oldWidth = element.offsetWidth;\n const oldHeight = element.offsetHeight;\n\n const byWord = value.includes(\" \");\n let blocks: Block[];\n\n if (typeof Intl.Segmenter !== \"undefined\") {\n const segmenter = new Intl.Segmenter(this.options.locale, {\n granularity: byWord ? \"word\" : \"grapheme\",\n });\n const iterator = segmenter.segment(value)[Symbol.iterator]();\n blocks = this.blocks(iterator);\n } else {\n // Fallback for browsers without Intl.Segmenter\n blocks = this.blocksFallback(value, byWord);\n }\n\n this.prevMeasures = this.measure();\n const oldChildren = Array.from(element.children) as HTMLElement[];\n const newIds = new Set(blocks.map((b) => b.id));\n\n const exiting = oldChildren.filter(\n (child) =>\n !newIds.has(child.getAttribute(\"torph-id\") as string) &&\n !child.hasAttribute(\"torph-exiting\"),\n );\n\n // For each exiting char, find the nearest persistent neighbor in old order\n // so we can make it follow that neighbor's FLIP movement\n const exitingSet = new Set(exiting);\n const exitingAnchorId = new Map<HTMLElement, string | null>();\n for (let i = 0; i < oldChildren.length; i++) {\n const child = oldChildren[i]!;\n if (!exitingSet.has(child)) continue;\n\n // Look forward for nearest persistent char\n let anchor: string | null = null;\n for (let j = i + 1; j < oldChildren.length; j++) {\n const siblingId = oldChildren[j]!.getAttribute(\"torph-id\") as string;\n if (newIds.has(siblingId) && !exitingSet.has(oldChildren[j]!)) {\n anchor = siblingId;\n break;\n }\n }\n // If none forward, look backward\n if (!anchor) {\n for (let j = i - 1; j >= 0; j--) {\n const siblingId = oldChildren[j]!.getAttribute(\"torph-id\") as string;\n if (newIds.has(siblingId) && !exitingSet.has(oldChildren[j]!)) {\n anchor = siblingId;\n break;\n }\n }\n }\n exitingAnchorId.set(child, anchor);\n }\n\n const parentRect = element.getBoundingClientRect();\n exiting.forEach((child) => {\n const rect = child.getBoundingClientRect();\n child.setAttribute(\"torph-exiting\", \"\");\n child.style.position = \"absolute\";\n child.style.pointerEvents = \"none\";\n child.style.left = `${rect.left - parentRect.left}px`;\n child.style.top = `${rect.top - parentRect.top}px`;\n child.style.width = `${rect.width}px`;\n child.style.height = `${rect.height}px`;\n });\n\n oldChildren.forEach((child) => {\n const id = child.getAttribute(\"torph-id\") as string;\n if (newIds.has(id)) child.remove();\n });\n\n blocks.forEach((block) => {\n const span = document.createElement(\"span\");\n span.setAttribute(\"torph-item\", \"\");\n span.setAttribute(\"torph-id\", block.id);\n span.textContent = block.string;\n element.appendChild(span);\n });\n\n this.currentMeasures = this.measure();\n this.updateStyles(blocks);\n\n exiting.forEach((child) => {\n if (this.isInitialRender) {\n child.remove();\n return;\n }\n\n // Find the anchor neighbor's FLIP delta so we move in sync with it\n const anchorId = exitingAnchorId.get(child);\n let dx = 0;\n let dy = 0;\n\n if (\n anchorId &&\n this.prevMeasures[anchorId] &&\n this.currentMeasures[anchorId]\n ) {\n const anchorPrev = this.prevMeasures[anchorId]!;\n const anchorCurr = this.currentMeasures[anchorId]!;\n dx = anchorCurr.x - anchorPrev.x;\n dy = anchorCurr.y - anchorPrev.y;\n }\n\n child.getAnimations().forEach((a) => a.cancel());\n child.animate(\n {\n transform: this.options.scale\n ? `translate(${dx}px, ${dy}px) scale(0.95)`\n : `translate(${dx}px, ${dy}px)`,\n offset: 1,\n },\n {\n duration: this.options.duration,\n easing: this.options.ease,\n fill: \"both\",\n },\n );\n const animation: Animation = child.animate(\n {\n opacity: 0,\n offset: 1,\n },\n {\n duration: this.options.duration! * 0.25,\n easing: \"linear\",\n fill: \"both\",\n },\n );\n animation.onfinish = () => child.remove();\n });\n\n if (this.isInitialRender) {\n this.isInitialRender = false;\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n return;\n }\n\n if (oldWidth === 0 || oldHeight === 0) return;\n\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n void element.offsetWidth; // force reflow\n\n const newWidth = element.offsetWidth;\n const newHeight = element.offsetHeight;\n\n element.style.width = `${oldWidth}px`;\n element.style.height = `${oldHeight}px`;\n void element.offsetWidth; // force reflow\n\n element.style.width = `${newWidth}px`;\n element.style.height = `${newHeight}px`;\n\n // TODO: move to `transitionend` event listener\n setTimeout(() => {\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n if (this.options.onAnimationComplete) {\n this.options.onAnimationComplete();\n }\n }, this.options.duration);\n }\n\n private measure() {\n const children = Array.from(this.element.children) as HTMLElement[];\n const measures: Measures = {};\n\n children.forEach((child, index) => {\n if (child.hasAttribute(\"torph-exiting\")) return;\n const key = child.getAttribute(\"torph-id\") || `child-${index}`;\n measures[key] = {\n x: child.offsetLeft,\n y: child.offsetTop,\n };\n });\n\n return measures;\n }\n\n private updateStyles(blocks: Block[]) {\n if (this.isInitialRender) return;\n\n const children = Array.from(this.element.children) as HTMLElement[];\n\n const persistentIds = new Set(\n blocks.map((b) => b.id).filter((id) => this.prevMeasures[id]),\n );\n\n children.forEach((child, index) => {\n if (child.hasAttribute(\"torph-exiting\")) return;\n const key = child.getAttribute(\"torph-id\") || `child-${index}`;\n const prev = this.prevMeasures[key];\n const current = this.currentMeasures[key];\n\n const cx = current?.x || 0;\n const cy = current?.y || 0;\n\n let deltaX = prev ? prev.x - cx : 0;\n let deltaY = prev ? prev.y - cy : 0;\n const isNew = !prev;\n\n // For new chars, use the nearest persistent neighbor's FLIP delta\n // so all new chars get the same consistent offset\n if (isNew) {\n const blockIndex = blocks.findIndex((b) => b.id === key);\n let anchorId: string | null = null;\n\n for (let j = blockIndex - 1; j >= 0; j--) {\n if (persistentIds.has(blocks[j]!.id)) {\n anchorId = blocks[j]!.id;\n break;\n }\n }\n if (!anchorId) {\n for (let j = blockIndex + 1; j < blocks.length; j++) {\n if (persistentIds.has(blocks[j]!.id)) {\n anchorId = blocks[j]!.id;\n break;\n }\n }\n }\n\n if (anchorId) {\n const anchorPrev = this.prevMeasures[anchorId]!;\n const anchorCurr = this.currentMeasures[anchorId]!;\n deltaX = anchorPrev.x - anchorCurr.x;\n deltaY = anchorPrev.y - anchorCurr.y;\n }\n }\n\n child.getAnimations().forEach((a) => a.cancel());\n child.animate(\n {\n transform: `translate(${deltaX}px, ${deltaY}px) scale(${isNew ? 0.95 : 1})`,\n offset: 0,\n },\n {\n duration: this.options.duration,\n easing: this.options.ease,\n fill: \"both\",\n },\n );\n const duration = isNew ? this.options.duration! * 0.25 : 0;\n const delay = isNew ? this.options.duration! * 0.25 : 0;\n child.animate(\n {\n opacity: isNew ? 0 : 1,\n offset: 0,\n },\n {\n duration: duration,\n delay: delay,\n easing: \"linear\",\n fill: \"both\",\n },\n );\n });\n }\n\n private addStyles() {\n if (TextMorph.styleEl) return;\n\n const style = document.createElement(\"style\");\n style.dataset.torph = \"true\";\n style.innerHTML = `\n[torph-root] {\n display: inline-flex;\n position: relative;\n will-change: width, height;\n transition-property: width, height;\n white-space: nowrap;\n}\n\n[torph-item] {\n display: inline-block;\n will-change: opacity, transform;\n transform: none;\n opacity: 1;\n}\n\n[torph-root][torph-debug] {\n outline:2px solid magenta;\n [torph-item] {\n outline:2px solid cyan;\n outline-offset: -4px;\n }\n}\n `;\n document.head.appendChild(style);\n TextMorph.styleEl = style;\n }\n\n private removeStyles() {\n if (TextMorph.styleEl) {\n TextMorph.styleEl.remove();\n TextMorph.styleEl = undefined!;\n }\n }\n\n // utils\n\n private blocks(iterator: Intl.SegmentIterator<Intl.SegmentData>) {\n const uniqueStrings: Block[] = Array.from(iterator).reduce(\n (acc, string) => {\n if (string.segment === \" \") {\n return [...acc, { id: `space-${string.index}`, string: \"\\u00A0\" }];\n }\n\n const existingString = acc.find((x) => x.string === string.segment);\n if (existingString) {\n return [\n ...acc,\n { id: `${string.segment}-${string.index}`, string: string.segment },\n ];\n }\n\n return [\n ...acc,\n {\n id: string.segment,\n string: string.segment,\n },\n ];\n },\n [] as Block[],\n );\n\n return uniqueStrings;\n }\n\n private blocksFallback(value: string, byWord: boolean): Block[] {\n const segments = byWord ? value.split(\" \") : value.split(\"\");\n const blocks: Block[] = [];\n\n if (byWord) {\n segments.forEach((segment, index) => {\n if (index > 0) {\n blocks.push({ id: `space-${index}`, string: \"\\u00A0\" });\n }\n const existing = blocks.find((x) => x.string === segment);\n if (existing) {\n blocks.push({ id: `${segment}-${index}`, string: segment });\n } else {\n blocks.push({ id: segment, string: segment });\n }\n });\n } else {\n segments.forEach((segment, index) => {\n const existing = blocks.find((x) => x.string === segment);\n if (existing) {\n blocks.push({ id: `${segment}-${index}`, string: segment });\n } else {\n blocks.push({ id: segment, string: segment });\n }\n });\n }\n\n return blocks;\n }\n\n private log(...args: any[]) {\n if (this.options.debug) console.log(\"[TextMorph]\", ...args);\n }\n}\n"],"mappings":"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","names":["src_exports","__export","TextMorph","version","__toCommonJS","version","TextMorph","_TextMorph","options","listener","event","anim","value","element","oldWidth","oldHeight","byWord","blocks","iterator","oldChildren","newIds","b","exiting","child","exitingSet","exitingAnchorId","i","anchor","j","siblingId","parentRect","rect","id","block","span","anchorId","dx","dy","anchorPrev","anchorCurr","a","animation","newWidth","newHeight","children","measures","index","key","persistentIds","prev","current","cx","cy","deltaX","deltaY","isNew","blockIndex","duration","delay","style","acc","string","x","segments","segment","args"]}
|
|
1
|
+
{"version":3,"sources":["../src/lib/text-morph/index.ts"],"names":["DEFAULT_AS","DEFAULT_TEXT_MORPH_OPTIONS","TextMorph","_TextMorph","options","anim","event","value","element","oldWidth","oldHeight","byWord","blocks","iterator","oldChildren","newIds","b","exiting","child","exitingSet","exitingAnchorId","i","anchor","j","siblingId","exitPositions","a","pos","id","node","block","span","anchorId","dx","dy","anchorPrev","anchorCurr","animation","newWidth","newHeight","children","measures","index","key","persistentIds","prev","current","cx","cy","deltaX","deltaY","isNew","blockIndex","duration","delay","style","acc","string","x","segments","segment","args"],"mappings":"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","file":"index.js","sourcesContent":["import type { TextMorphOptions } from \"./types\";\n\nexport type { TextMorphOptions } from \"./types\";\n\nexport const DEFAULT_AS = \"span\";\nexport const DEFAULT_TEXT_MORPH_OPTIONS = {\n debug: false,\n locale: \"en\",\n duration: 400,\n scale: true,\n ease: \"cubic-bezier(0.19, 1, 0.22, 1)\",\n disabled: false,\n respectReducedMotion: true,\n} as const satisfies Omit<TextMorphOptions, \"element\">;\n\ntype Block = {\n id: string;\n string: string;\n};\ntype Measures = {\n [key: string]: { x: number; y: number };\n};\n\nexport class TextMorph {\n private element: HTMLElement;\n private options: Omit<TextMorphOptions, \"element\"> = {};\n\n private data: HTMLElement | string;\n\n private currentMeasures: Measures = {};\n private prevMeasures: Measures = {};\n private isInitialRender = true;\n private prefersReducedMotion = false;\n private mediaQuery?: MediaQueryList;\n\n static styleEl: HTMLStyleElement;\n\n constructor(options: TextMorphOptions) {\n this.options = {\n ...DEFAULT_TEXT_MORPH_OPTIONS,\n ...options,\n };\n\n this.element = options.element;\n\n // reduced motion detection\n if (typeof window !== \"undefined\" && this.options.respectReducedMotion) {\n this.mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n this.prefersReducedMotion = this.mediaQuery.matches;\n this.mediaQuery.addEventListener(\"change\", this.handleMediaQueryChange);\n }\n\n if (!this.isDisabled()) {\n this.element.setAttribute(\"torph-root\", \"\");\n this.element.style.transitionDuration = `${this.options.duration}ms`;\n this.element.style.transitionTimingFunction = this.options.ease!;\n\n if (options.debug) this.element.setAttribute(\"torph-debug\", \"\");\n }\n\n this.data = \"\";\n if (!this.isDisabled()) {\n this.addStyles();\n }\n }\n\n destroy() {\n if (this.mediaQuery) {\n this.mediaQuery.removeEventListener(\n \"change\",\n this.handleMediaQueryChange,\n );\n }\n this.element.getAnimations().forEach((anim) => anim.cancel());\n this.element.removeAttribute(\"torph-root\");\n this.element.removeAttribute(\"torph-debug\");\n this.removeStyles();\n }\n\n private handleMediaQueryChange = (event: MediaQueryListEvent) => {\n this.prefersReducedMotion = event.matches;\n };\n\n private isDisabled(): boolean {\n return Boolean(\n this.options.disabled ||\n (this.options.respectReducedMotion && this.prefersReducedMotion),\n );\n }\n\n update(value: HTMLElement | string) {\n if (value === this.data) return;\n this.data = value;\n\n if (this.isDisabled()) {\n if (typeof value === \"string\") {\n this.element.textContent = value;\n }\n return;\n }\n\n if (this.data instanceof HTMLElement) {\n // TODO: handle HTMLElement case\n throw new Error(\"HTMLElement not yet supported\");\n } else {\n if (this.options.onAnimationStart && !this.isInitialRender) {\n this.options.onAnimationStart();\n }\n this.createTextGroup(this.data, this.element);\n }\n }\n\n private createTextGroup(value: string, element: HTMLElement) {\n const oldWidth = element.offsetWidth;\n const oldHeight = element.offsetHeight;\n\n const byWord = value.includes(\" \");\n let blocks: Block[];\n\n if (typeof Intl.Segmenter !== \"undefined\") {\n const segmenter = new Intl.Segmenter(this.options.locale, {\n granularity: byWord ? \"word\" : \"grapheme\",\n });\n const iterator = segmenter.segment(value)[Symbol.iterator]();\n blocks = this.blocks(iterator);\n } else {\n // Fallback for browsers without Intl.Segmenter\n blocks = this.blocksFallback(value, byWord);\n }\n\n this.prevMeasures = this.measure();\n const oldChildren = Array.from(element.children) as HTMLElement[];\n const newIds = new Set(blocks.map((b) => b.id));\n\n const exiting = oldChildren.filter(\n (child) =>\n !newIds.has(child.getAttribute(\"torph-id\") as string) &&\n !child.hasAttribute(\"torph-exiting\"),\n );\n\n // For each exiting char, find the nearest persistent neighbor in old order\n // so we can make it follow that neighbor's FLIP movement\n const exitingSet = new Set(exiting);\n const exitingAnchorId = new Map<HTMLElement, string | null>();\n for (let i = 0; i < oldChildren.length; i++) {\n const child = oldChildren[i]!;\n if (!exitingSet.has(child)) continue;\n\n // Look forward for nearest persistent char\n let anchor: string | null = null;\n for (let j = i + 1; j < oldChildren.length; j++) {\n const siblingId = oldChildren[j]!.getAttribute(\"torph-id\") as string;\n if (newIds.has(siblingId) && !exitingSet.has(oldChildren[j]!)) {\n anchor = siblingId;\n break;\n }\n }\n // If none forward, look backward\n if (!anchor) {\n for (let j = i - 1; j >= 0; j--) {\n const siblingId = oldChildren[j]!.getAttribute(\"torph-id\") as string;\n if (newIds.has(siblingId) && !exitingSet.has(oldChildren[j]!)) {\n anchor = siblingId;\n break;\n }\n }\n }\n exitingAnchorId.set(child, anchor);\n }\n\n // Two-pass: read all positions before modifying any element,\n // since setting position:absolute removes from flow and shifts siblings\n const exitPositions = exiting.map((child) => {\n child.getAnimations().forEach((a) => a.cancel());\n return {\n left: child.offsetLeft,\n top: child.offsetTop,\n width: child.offsetWidth,\n height: child.offsetHeight,\n };\n });\n exiting.forEach((child, i) => {\n const pos = exitPositions[i]!;\n child.setAttribute(\"torph-exiting\", \"\");\n child.style.position = \"absolute\";\n child.style.pointerEvents = \"none\";\n child.style.left = `${pos.left}px`;\n child.style.top = `${pos.top}px`;\n child.style.width = `${pos.width}px`;\n child.style.height = `${pos.height}px`;\n });\n\n oldChildren.forEach((child) => {\n const id = child.getAttribute(\"torph-id\") as string;\n if (newIds.has(id)) child.remove();\n });\n\n // Disabled-mode updates set plain text via textContent; remove that text node\n // before appending torph items so old content is not duplicated.\n Array.from(element.childNodes).forEach((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n node.remove();\n }\n });\n\n blocks.forEach((block) => {\n const span = document.createElement(\"span\");\n span.setAttribute(\"torph-item\", \"\");\n span.setAttribute(\"torph-id\", block.id);\n span.textContent = block.string;\n element.appendChild(span);\n });\n\n this.currentMeasures = this.measure();\n this.updateStyles(blocks);\n\n exiting.forEach((child) => {\n if (this.isInitialRender) {\n child.remove();\n return;\n }\n\n // Find the anchor neighbor's FLIP delta so we move in sync with it\n const anchorId = exitingAnchorId.get(child);\n let dx = 0;\n let dy = 0;\n\n if (\n anchorId &&\n this.prevMeasures[anchorId] &&\n this.currentMeasures[anchorId]\n ) {\n const anchorPrev = this.prevMeasures[anchorId]!;\n const anchorCurr = this.currentMeasures[anchorId]!;\n dx = anchorCurr.x - anchorPrev.x;\n dy = anchorCurr.y - anchorPrev.y;\n }\n\n child.animate(\n {\n transform: this.options.scale\n ? `translate(${dx}px, ${dy}px) scale(0.95)`\n : `translate(${dx}px, ${dy}px)`,\n offset: 1,\n },\n {\n duration: this.options.duration,\n easing: this.options.ease,\n fill: \"both\",\n },\n );\n const animation: Animation = child.animate(\n {\n opacity: 0,\n offset: 1,\n },\n {\n duration: this.options.duration! * 0.25,\n easing: \"linear\",\n fill: \"both\",\n },\n );\n animation.onfinish = () => child.remove();\n });\n\n if (this.isInitialRender) {\n this.isInitialRender = false;\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n return;\n }\n\n if (oldWidth === 0 || oldHeight === 0) return;\n\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n void element.offsetWidth; // force reflow\n\n const newWidth = element.offsetWidth;\n const newHeight = element.offsetHeight;\n\n element.style.width = `${oldWidth}px`;\n element.style.height = `${oldHeight}px`;\n void element.offsetWidth; // force reflow\n\n element.style.width = `${newWidth}px`;\n element.style.height = `${newHeight}px`;\n\n // TODO: move to `transitionend` event listener\n setTimeout(() => {\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n if (this.options.onAnimationComplete) {\n this.options.onAnimationComplete();\n }\n }, this.options.duration);\n }\n\n private measure() {\n const children = Array.from(this.element.children) as HTMLElement[];\n const measures: Measures = {};\n\n children.forEach((child, index) => {\n if (child.hasAttribute(\"torph-exiting\")) return;\n const key = child.getAttribute(\"torph-id\") || `child-${index}`;\n measures[key] = {\n x: child.offsetLeft,\n y: child.offsetTop,\n };\n });\n\n return measures;\n }\n\n private updateStyles(blocks: Block[]) {\n if (this.isInitialRender) return;\n\n const children = Array.from(this.element.children) as HTMLElement[];\n\n const persistentIds = new Set(\n blocks.map((b) => b.id).filter((id) => this.prevMeasures[id]),\n );\n\n children.forEach((child, index) => {\n if (child.hasAttribute(\"torph-exiting\")) return;\n const key = child.getAttribute(\"torph-id\") || `child-${index}`;\n const prev = this.prevMeasures[key];\n const current = this.currentMeasures[key];\n\n const cx = current?.x || 0;\n const cy = current?.y || 0;\n\n let deltaX = prev ? prev.x - cx : 0;\n let deltaY = prev ? prev.y - cy : 0;\n const isNew = !prev;\n\n // For new chars, use the nearest persistent neighbor's FLIP delta\n // so all new chars get the same consistent offset\n if (isNew) {\n const blockIndex = blocks.findIndex((b) => b.id === key);\n let anchorId: string | null = null;\n\n for (let j = blockIndex - 1; j >= 0; j--) {\n if (persistentIds.has(blocks[j]!.id)) {\n anchorId = blocks[j]!.id;\n break;\n }\n }\n if (!anchorId) {\n for (let j = blockIndex + 1; j < blocks.length; j++) {\n if (persistentIds.has(blocks[j]!.id)) {\n anchorId = blocks[j]!.id;\n break;\n }\n }\n }\n\n if (anchorId) {\n const anchorPrev = this.prevMeasures[anchorId]!;\n const anchorCurr = this.currentMeasures[anchorId]!;\n deltaX = anchorPrev.x - anchorCurr.x;\n deltaY = anchorPrev.y - anchorCurr.y;\n }\n }\n\n child.getAnimations().forEach((a) => a.cancel());\n child.animate(\n {\n transform: `translate(${deltaX}px, ${deltaY}px) scale(${isNew ? 0.95 : 1})`,\n offset: 0,\n },\n {\n duration: this.options.duration,\n easing: this.options.ease,\n fill: \"both\",\n },\n );\n const duration = isNew ? this.options.duration! * 0.25 : 0;\n const delay = isNew ? this.options.duration! * 0.25 : 0;\n child.animate(\n {\n opacity: isNew ? 0 : 1,\n offset: 0,\n },\n {\n duration: duration,\n delay: delay,\n easing: \"linear\",\n fill: \"both\",\n },\n );\n });\n }\n\n private addStyles() {\n if (TextMorph.styleEl) return;\n\n const style = document.createElement(\"style\");\n style.dataset.torph = \"true\";\n style.innerHTML = `\n[torph-root] {\n display: inline-flex;\n position: relative;\n will-change: width, height;\n transition-property: width, height;\n white-space: nowrap;\n}\n\n[torph-item] {\n display: inline-block;\n will-change: opacity, transform;\n transform: none;\n opacity: 1;\n}\n\n[torph-root][torph-debug] {\n outline:2px solid magenta;\n [torph-item] {\n outline:2px solid cyan;\n outline-offset: -4px;\n }\n}\n `;\n document.head.appendChild(style);\n TextMorph.styleEl = style;\n }\n\n private removeStyles() {\n if (TextMorph.styleEl) {\n TextMorph.styleEl.remove();\n TextMorph.styleEl = undefined!;\n }\n }\n\n // utils\n\n private blocks(iterator: Intl.SegmentIterator<Intl.SegmentData>) {\n const uniqueStrings: Block[] = Array.from(iterator).reduce(\n (acc, string) => {\n if (string.segment === \" \") {\n return [...acc, { id: `space-${string.index}`, string: \"\\u00A0\" }];\n }\n\n const existingString = acc.find((x) => x.string === string.segment);\n if (existingString) {\n return [\n ...acc,\n { id: `${string.segment}-${string.index}`, string: string.segment },\n ];\n }\n\n return [\n ...acc,\n {\n id: string.segment,\n string: string.segment,\n },\n ];\n },\n [] as Block[],\n );\n\n return uniqueStrings;\n }\n\n private blocksFallback(value: string, byWord: boolean): Block[] {\n const segments = byWord ? value.split(\" \") : value.split(\"\");\n const blocks: Block[] = [];\n\n if (byWord) {\n segments.forEach((segment, index) => {\n if (index > 0) {\n blocks.push({ id: `space-${index}`, string: \"\\u00A0\" });\n }\n const existing = blocks.find((x) => x.string === segment);\n if (existing) {\n blocks.push({ id: `${segment}-${index}`, string: segment });\n } else {\n blocks.push({ id: segment, string: segment });\n }\n });\n } else {\n segments.forEach((segment, index) => {\n const existing = blocks.find((x) => x.string === segment);\n if (existing) {\n blocks.push({ id: `${segment}-${index}`, string: segment });\n } else {\n blocks.push({ id: segment, string: segment });\n }\n });\n }\n\n return blocks;\n }\n\n private log(...args: any[]) {\n if (this.options.debug) console.log(\"[TextMorph]\", ...args);\n }\n}\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,25 @@
|
|
|
1
|
-
"
|
|
2
|
-
|
|
1
|
+
var T="span",A={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},b=class g{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;prefersReducedMotion=false;mediaQuery;static styleEl;constructor(e){this.options={...A,...e},this.element=e.element,typeof window<"u"&&this.options.respectReducedMotion&&(this.mediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),this.prefersReducedMotion=this.mediaQuery.matches,this.mediaQuery.addEventListener("change",this.handleMediaQueryChange)),this.isDisabled()||(this.element.setAttribute("torph-root",""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,e.debug&&this.element.setAttribute("torph-debug","")),this.data="",this.isDisabled()||this.addStyles();}destroy(){this.mediaQuery&&this.mediaQuery.removeEventListener("change",this.handleMediaQueryChange),this.element.getAnimations().forEach(e=>e.cancel()),this.element.removeAttribute("torph-root"),this.element.removeAttribute("torph-debug"),this.removeStyles();}handleMediaQueryChange=e=>{this.prefersReducedMotion=e.matches;};isDisabled(){return !!(this.options.disabled||this.options.respectReducedMotion&&this.prefersReducedMotion)}update(e){if(e!==this.data){if(this.data=e,this.isDisabled()){typeof e=="string"&&(this.element.textContent=e);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(e,s){let h=s.offsetWidth,i=s.offsetHeight,a=e.includes(" "),p;if(typeof Intl.Segmenter<"u"){let r=new Intl.Segmenter(this.options.locale,{granularity:a?"word":"grapheme"}).segment(e)[Symbol.iterator]();p=this.blocks(r);}else p=this.blocksFallback(e,a);this.prevMeasures=this.measure();let l=Array.from(s.children),d=new Set(p.map(t=>t.id)),c=l.filter(t=>!d.has(t.getAttribute("torph-id"))&&!t.hasAttribute("torph-exiting")),m=new Set(c),y=new Map;for(let t=0;t<l.length;t++){let r=l[t];if(!m.has(r))continue;let o=null;for(let n=t+1;n<l.length;n++){let u=l[n].getAttribute("torph-id");if(d.has(u)&&!m.has(l[n])){o=u;break}}if(!o)for(let n=t-1;n>=0;n--){let u=l[n].getAttribute("torph-id");if(d.has(u)&&!m.has(l[n])){o=u;break}}y.set(r,o);}let x=c.map(t=>(t.getAnimations().forEach(r=>r.cancel()),{left:t.offsetLeft,top:t.offsetTop,width:t.offsetWidth,height:t.offsetHeight}));if(c.forEach((t,r)=>{let o=x[r];t.setAttribute("torph-exiting",""),t.style.position="absolute",t.style.pointerEvents="none",t.style.left=`${o.left}px`,t.style.top=`${o.top}px`,t.style.width=`${o.width}px`,t.style.height=`${o.height}px`;}),l.forEach(t=>{let r=t.getAttribute("torph-id");d.has(r)&&t.remove();}),Array.from(s.childNodes).forEach(t=>{t.nodeType===Node.TEXT_NODE&&t.remove();}),p.forEach(t=>{let r=document.createElement("span");r.setAttribute("torph-item",""),r.setAttribute("torph-id",t.id),r.textContent=t.string,s.appendChild(r);}),this.currentMeasures=this.measure(),this.updateStyles(p),c.forEach(t=>{if(this.isInitialRender){t.remove();return}let r=y.get(t),o=0,n=0;if(r&&this.prevMeasures[r]&&this.currentMeasures[r]){let E=this.prevMeasures[r],v=this.currentMeasures[r];o=v.x-E.x,n=v.y-E.y;}t.animate({transform:this.options.scale?`translate(${o}px, ${n}px) scale(0.95)`:`translate(${o}px, ${n}px)`,offset:1},{duration:this.options.duration,easing:this.options.ease,fill:"both"});let u=t.animate({opacity:0,offset:1},{duration:this.options.duration*.25,easing:"linear",fill:"both"});u.onfinish=()=>t.remove();}),this.isInitialRender){this.isInitialRender=false,s.style.width="auto",s.style.height="auto";return}if(h===0||i===0)return;s.style.width="auto",s.style.height="auto",s.offsetWidth;let f=s.offsetWidth,M=s.offsetHeight;s.style.width=`${h}px`,s.style.height=`${i}px`,s.offsetWidth,s.style.width=`${f}px`,s.style.height=`${M}px`,setTimeout(()=>{s.style.width="auto",s.style.height="auto",this.options.onAnimationComplete&&this.options.onAnimationComplete();},this.options.duration);}measure(){let e=Array.from(this.element.children),s={};return e.forEach((h,i)=>{if(h.hasAttribute("torph-exiting"))return;let a=h.getAttribute("torph-id")||`child-${i}`;s[a]={x:h.offsetLeft,y:h.offsetTop};}),s}updateStyles(e){if(this.isInitialRender)return;let s=Array.from(this.element.children),h=new Set(e.map(i=>i.id).filter(i=>this.prevMeasures[i]));s.forEach((i,a)=>{if(i.hasAttribute("torph-exiting"))return;let p=i.getAttribute("torph-id")||`child-${a}`,l=this.prevMeasures[p],d=this.currentMeasures[p],c=d?.x||0,m=d?.y||0,y=l?l.x-c:0,x=l?l.y-m:0,f=!l;if(f){let r=e.findIndex(n=>n.id===p),o=null;for(let n=r-1;n>=0;n--)if(h.has(e[n].id)){o=e[n].id;break}if(!o){for(let n=r+1;n<e.length;n++)if(h.has(e[n].id)){o=e[n].id;break}}if(o){let n=this.prevMeasures[o],u=this.currentMeasures[o];y=n.x-u.x,x=n.y-u.y;}}i.getAnimations().forEach(r=>r.cancel()),i.animate({transform:`translate(${y}px, ${x}px) scale(${f?.95:1})`,offset:0},{duration:this.options.duration,easing:this.options.ease,fill:"both"});let M=f?this.options.duration*.25:0,t=f?this.options.duration*.25:0;i.animate({opacity:f?0:1,offset:0},{duration:M,delay:t,easing:"linear",fill:"both"});});}addStyles(){if(g.styleEl)return;let e=document.createElement("style");e.dataset.torph="true",e.innerHTML=`
|
|
2
|
+
[torph-root] {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
position: relative;
|
|
5
|
+
will-change: width, height;
|
|
6
|
+
transition-property: width, height;
|
|
7
|
+
white-space: nowrap;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
[torph-item] {
|
|
11
|
+
display: inline-block;
|
|
12
|
+
will-change: opacity, transform;
|
|
13
|
+
transform: none;
|
|
14
|
+
opacity: 1;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
[torph-root][torph-debug] {
|
|
18
|
+
outline:2px solid magenta;
|
|
19
|
+
[torph-item] {
|
|
20
|
+
outline:2px solid cyan;
|
|
21
|
+
outline-offset: -4px;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
`,document.head.appendChild(e),g.styleEl=e;}removeStyles(){g.styleEl&&(g.styleEl.remove(),g.styleEl=void 0);}blocks(e){return Array.from(e).reduce((h,i)=>i.segment===" "?[...h,{id:`space-${i.index}`,string:"\xA0"}]:h.find(p=>p.string===i.segment)?[...h,{id:`${i.segment}-${i.index}`,string:i.segment}]:[...h,{id:i.segment,string:i.segment}],[])}blocksFallback(e,s){let h=s?e.split(" "):e.split(""),i=[];return s?h.forEach((a,p)=>{p>0&&i.push({id:`space-${p}`,string:"\xA0"}),i.find(d=>d.string===a)?i.push({id:`${a}-${p}`,string:a}):i.push({id:a,string:a});}):h.forEach((a,p)=>{i.find(d=>d.string===a)?i.push({id:`${a}-${p}`,string:a}):i.push({id:a,string:a});}),i}log(...e){this.options.debug&&console.log("[TextMorph]",...e);}};export{T as DEFAULT_AS,A as DEFAULT_TEXT_MORPH_OPTIONS,b as TextMorph};//# sourceMappingURL=index.mjs.map
|
|
3
25
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../package.json"],"sourcesContent":["{\n \"name\": \"torph\",\n \"version\": \"0.0.5\",\n \"description\": \"Dependency-free animated text component.\",\n \"author\": \"Lochie Axon\",\n \"license\": \"MIT\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/lochie/torph.git\",\n \"directory\": \"packages/torph\"\n },\n \"types\": \"dist/index.d.ts\",\n \"exports\": {\n \".\": {\n \"types\": \"./dist/index.d.ts\",\n \"import\": \"./dist/index.mjs\",\n \"require\": \"./dist/index.js\"\n },\n \"./react\": {\n \"types\": \"./dist/react/index.d.ts\",\n \"import\": \"./dist/react/index.mjs\",\n \"require\": \"./dist/react/index.js\"\n },\n \"./vue\": {\n \"types\": \"./dist/vue/index.d.ts\",\n \"import\": \"./dist/vue/index.mjs\",\n \"require\": \"./dist/vue/index.js\"\n },\n \"./svelte\": {\n \"types\": \"./dist/svelte/index.d.ts\",\n \"import\": \"./dist/svelte/index.mjs\",\n \"require\": \"./dist/svelte/index.js\"\n }\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"build\": \"tsup\",\n \"dev\": \"tsup --watch\",\n \"lint\": \"eslint -c .eslintrc.cjs ./src/**/*.{ts,tsx}\",\n \"lint:fix\": \"eslint --fix -c .eslintrc.cjs ./src/**/*.{ts,tsx}\",\n \"pre-commit\": \"lint-staged\"\n },\n \"keywords\": [\n \"react\",\n \"vue\",\n \"svelte\",\n \"text\",\n \"animation\",\n \"morph\"\n ],\n \"bugs\": {\n \"url\": \"https://github.com/lochie/torph/issues\"\n },\n \"files\": [\n \"dist/*\"\n ],\n \"peerDependencies\": {\n \"react\": \">=18\",\n \"react-dom\": \">=18\",\n \"vue\": \">=3\",\n \"svelte\": \">=4\"\n },\n \"peerDependenciesMeta\": {\n \"react\": {\n \"optional\": true\n },\n \"react-dom\": {\n \"optional\": true\n },\n \"vue\": {\n \"optional\": true\n },\n \"svelte\": {\n \"optional\": true\n }\n },\n \"devDependencies\": {\n \"@types/react\": \"^18.2.15\",\n \"@typescript-eslint/eslint-plugin\": \"^6.8.0\",\n \"@typescript-eslint/parser\": \"^6.8.0\",\n \"eslint\": \"^9.36.0\",\n \"eslint-config-airbnb\": \"^19.0.4\",\n \"eslint-config-airbnb-typescript\": \"^17.1.0\",\n \"eslint-config-prettier\": \"^9.0.0\",\n \"eslint-plugin-import\": \"^2.28.1\",\n \"eslint-plugin-jsx-a11y\": \"^6.7.1\",\n \"eslint-plugin-prettier\": \"^5.0.1\",\n \"eslint-plugin-react\": \"^7.33.2\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"prettier\": \"^3.0.3\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"svelte\": \"^4.0.0\",\n \"tsup\": \"^8.5.0\",\n \"typescript\": \"^5.9.3\",\n \"vue\": \"^3.3.0\"\n }\n}\n"],"mappings":";yCAEE,IAAAA,EAAW","names":["version"]}
|
|
1
|
+
{"version":3,"sources":["../src/lib/text-morph/index.ts"],"names":["DEFAULT_AS","DEFAULT_TEXT_MORPH_OPTIONS","TextMorph","_TextMorph","options","anim","event","value","element","oldWidth","oldHeight","byWord","blocks","iterator","oldChildren","newIds","b","exiting","child","exitingSet","exitingAnchorId","i","anchor","j","siblingId","exitPositions","a","pos","id","node","block","span","anchorId","dx","dy","anchorPrev","anchorCurr","animation","newWidth","newHeight","children","measures","index","key","persistentIds","prev","current","cx","cy","deltaX","deltaY","isNew","blockIndex","duration","delay","style","acc","string","x","segments","segment","args"],"mappings":"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","file":"index.mjs","sourcesContent":["import type { TextMorphOptions } from \"./types\";\n\nexport type { TextMorphOptions } from \"./types\";\n\nexport const DEFAULT_AS = \"span\";\nexport const DEFAULT_TEXT_MORPH_OPTIONS = {\n debug: false,\n locale: \"en\",\n duration: 400,\n scale: true,\n ease: \"cubic-bezier(0.19, 1, 0.22, 1)\",\n disabled: false,\n respectReducedMotion: true,\n} as const satisfies Omit<TextMorphOptions, \"element\">;\n\ntype Block = {\n id: string;\n string: string;\n};\ntype Measures = {\n [key: string]: { x: number; y: number };\n};\n\nexport class TextMorph {\n private element: HTMLElement;\n private options: Omit<TextMorphOptions, \"element\"> = {};\n\n private data: HTMLElement | string;\n\n private currentMeasures: Measures = {};\n private prevMeasures: Measures = {};\n private isInitialRender = true;\n private prefersReducedMotion = false;\n private mediaQuery?: MediaQueryList;\n\n static styleEl: HTMLStyleElement;\n\n constructor(options: TextMorphOptions) {\n this.options = {\n ...DEFAULT_TEXT_MORPH_OPTIONS,\n ...options,\n };\n\n this.element = options.element;\n\n // reduced motion detection\n if (typeof window !== \"undefined\" && this.options.respectReducedMotion) {\n this.mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n this.prefersReducedMotion = this.mediaQuery.matches;\n this.mediaQuery.addEventListener(\"change\", this.handleMediaQueryChange);\n }\n\n if (!this.isDisabled()) {\n this.element.setAttribute(\"torph-root\", \"\");\n this.element.style.transitionDuration = `${this.options.duration}ms`;\n this.element.style.transitionTimingFunction = this.options.ease!;\n\n if (options.debug) this.element.setAttribute(\"torph-debug\", \"\");\n }\n\n this.data = \"\";\n if (!this.isDisabled()) {\n this.addStyles();\n }\n }\n\n destroy() {\n if (this.mediaQuery) {\n this.mediaQuery.removeEventListener(\n \"change\",\n this.handleMediaQueryChange,\n );\n }\n this.element.getAnimations().forEach((anim) => anim.cancel());\n this.element.removeAttribute(\"torph-root\");\n this.element.removeAttribute(\"torph-debug\");\n this.removeStyles();\n }\n\n private handleMediaQueryChange = (event: MediaQueryListEvent) => {\n this.prefersReducedMotion = event.matches;\n };\n\n private isDisabled(): boolean {\n return Boolean(\n this.options.disabled ||\n (this.options.respectReducedMotion && this.prefersReducedMotion),\n );\n }\n\n update(value: HTMLElement | string) {\n if (value === this.data) return;\n this.data = value;\n\n if (this.isDisabled()) {\n if (typeof value === \"string\") {\n this.element.textContent = value;\n }\n return;\n }\n\n if (this.data instanceof HTMLElement) {\n // TODO: handle HTMLElement case\n throw new Error(\"HTMLElement not yet supported\");\n } else {\n if (this.options.onAnimationStart && !this.isInitialRender) {\n this.options.onAnimationStart();\n }\n this.createTextGroup(this.data, this.element);\n }\n }\n\n private createTextGroup(value: string, element: HTMLElement) {\n const oldWidth = element.offsetWidth;\n const oldHeight = element.offsetHeight;\n\n const byWord = value.includes(\" \");\n let blocks: Block[];\n\n if (typeof Intl.Segmenter !== \"undefined\") {\n const segmenter = new Intl.Segmenter(this.options.locale, {\n granularity: byWord ? \"word\" : \"grapheme\",\n });\n const iterator = segmenter.segment(value)[Symbol.iterator]();\n blocks = this.blocks(iterator);\n } else {\n // Fallback for browsers without Intl.Segmenter\n blocks = this.blocksFallback(value, byWord);\n }\n\n this.prevMeasures = this.measure();\n const oldChildren = Array.from(element.children) as HTMLElement[];\n const newIds = new Set(blocks.map((b) => b.id));\n\n const exiting = oldChildren.filter(\n (child) =>\n !newIds.has(child.getAttribute(\"torph-id\") as string) &&\n !child.hasAttribute(\"torph-exiting\"),\n );\n\n // For each exiting char, find the nearest persistent neighbor in old order\n // so we can make it follow that neighbor's FLIP movement\n const exitingSet = new Set(exiting);\n const exitingAnchorId = new Map<HTMLElement, string | null>();\n for (let i = 0; i < oldChildren.length; i++) {\n const child = oldChildren[i]!;\n if (!exitingSet.has(child)) continue;\n\n // Look forward for nearest persistent char\n let anchor: string | null = null;\n for (let j = i + 1; j < oldChildren.length; j++) {\n const siblingId = oldChildren[j]!.getAttribute(\"torph-id\") as string;\n if (newIds.has(siblingId) && !exitingSet.has(oldChildren[j]!)) {\n anchor = siblingId;\n break;\n }\n }\n // If none forward, look backward\n if (!anchor) {\n for (let j = i - 1; j >= 0; j--) {\n const siblingId = oldChildren[j]!.getAttribute(\"torph-id\") as string;\n if (newIds.has(siblingId) && !exitingSet.has(oldChildren[j]!)) {\n anchor = siblingId;\n break;\n }\n }\n }\n exitingAnchorId.set(child, anchor);\n }\n\n // Two-pass: read all positions before modifying any element,\n // since setting position:absolute removes from flow and shifts siblings\n const exitPositions = exiting.map((child) => {\n child.getAnimations().forEach((a) => a.cancel());\n return {\n left: child.offsetLeft,\n top: child.offsetTop,\n width: child.offsetWidth,\n height: child.offsetHeight,\n };\n });\n exiting.forEach((child, i) => {\n const pos = exitPositions[i]!;\n child.setAttribute(\"torph-exiting\", \"\");\n child.style.position = \"absolute\";\n child.style.pointerEvents = \"none\";\n child.style.left = `${pos.left}px`;\n child.style.top = `${pos.top}px`;\n child.style.width = `${pos.width}px`;\n child.style.height = `${pos.height}px`;\n });\n\n oldChildren.forEach((child) => {\n const id = child.getAttribute(\"torph-id\") as string;\n if (newIds.has(id)) child.remove();\n });\n\n // Disabled-mode updates set plain text via textContent; remove that text node\n // before appending torph items so old content is not duplicated.\n Array.from(element.childNodes).forEach((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n node.remove();\n }\n });\n\n blocks.forEach((block) => {\n const span = document.createElement(\"span\");\n span.setAttribute(\"torph-item\", \"\");\n span.setAttribute(\"torph-id\", block.id);\n span.textContent = block.string;\n element.appendChild(span);\n });\n\n this.currentMeasures = this.measure();\n this.updateStyles(blocks);\n\n exiting.forEach((child) => {\n if (this.isInitialRender) {\n child.remove();\n return;\n }\n\n // Find the anchor neighbor's FLIP delta so we move in sync with it\n const anchorId = exitingAnchorId.get(child);\n let dx = 0;\n let dy = 0;\n\n if (\n anchorId &&\n this.prevMeasures[anchorId] &&\n this.currentMeasures[anchorId]\n ) {\n const anchorPrev = this.prevMeasures[anchorId]!;\n const anchorCurr = this.currentMeasures[anchorId]!;\n dx = anchorCurr.x - anchorPrev.x;\n dy = anchorCurr.y - anchorPrev.y;\n }\n\n child.animate(\n {\n transform: this.options.scale\n ? `translate(${dx}px, ${dy}px) scale(0.95)`\n : `translate(${dx}px, ${dy}px)`,\n offset: 1,\n },\n {\n duration: this.options.duration,\n easing: this.options.ease,\n fill: \"both\",\n },\n );\n const animation: Animation = child.animate(\n {\n opacity: 0,\n offset: 1,\n },\n {\n duration: this.options.duration! * 0.25,\n easing: \"linear\",\n fill: \"both\",\n },\n );\n animation.onfinish = () => child.remove();\n });\n\n if (this.isInitialRender) {\n this.isInitialRender = false;\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n return;\n }\n\n if (oldWidth === 0 || oldHeight === 0) return;\n\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n void element.offsetWidth; // force reflow\n\n const newWidth = element.offsetWidth;\n const newHeight = element.offsetHeight;\n\n element.style.width = `${oldWidth}px`;\n element.style.height = `${oldHeight}px`;\n void element.offsetWidth; // force reflow\n\n element.style.width = `${newWidth}px`;\n element.style.height = `${newHeight}px`;\n\n // TODO: move to `transitionend` event listener\n setTimeout(() => {\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n if (this.options.onAnimationComplete) {\n this.options.onAnimationComplete();\n }\n }, this.options.duration);\n }\n\n private measure() {\n const children = Array.from(this.element.children) as HTMLElement[];\n const measures: Measures = {};\n\n children.forEach((child, index) => {\n if (child.hasAttribute(\"torph-exiting\")) return;\n const key = child.getAttribute(\"torph-id\") || `child-${index}`;\n measures[key] = {\n x: child.offsetLeft,\n y: child.offsetTop,\n };\n });\n\n return measures;\n }\n\n private updateStyles(blocks: Block[]) {\n if (this.isInitialRender) return;\n\n const children = Array.from(this.element.children) as HTMLElement[];\n\n const persistentIds = new Set(\n blocks.map((b) => b.id).filter((id) => this.prevMeasures[id]),\n );\n\n children.forEach((child, index) => {\n if (child.hasAttribute(\"torph-exiting\")) return;\n const key = child.getAttribute(\"torph-id\") || `child-${index}`;\n const prev = this.prevMeasures[key];\n const current = this.currentMeasures[key];\n\n const cx = current?.x || 0;\n const cy = current?.y || 0;\n\n let deltaX = prev ? prev.x - cx : 0;\n let deltaY = prev ? prev.y - cy : 0;\n const isNew = !prev;\n\n // For new chars, use the nearest persistent neighbor's FLIP delta\n // so all new chars get the same consistent offset\n if (isNew) {\n const blockIndex = blocks.findIndex((b) => b.id === key);\n let anchorId: string | null = null;\n\n for (let j = blockIndex - 1; j >= 0; j--) {\n if (persistentIds.has(blocks[j]!.id)) {\n anchorId = blocks[j]!.id;\n break;\n }\n }\n if (!anchorId) {\n for (let j = blockIndex + 1; j < blocks.length; j++) {\n if (persistentIds.has(blocks[j]!.id)) {\n anchorId = blocks[j]!.id;\n break;\n }\n }\n }\n\n if (anchorId) {\n const anchorPrev = this.prevMeasures[anchorId]!;\n const anchorCurr = this.currentMeasures[anchorId]!;\n deltaX = anchorPrev.x - anchorCurr.x;\n deltaY = anchorPrev.y - anchorCurr.y;\n }\n }\n\n child.getAnimations().forEach((a) => a.cancel());\n child.animate(\n {\n transform: `translate(${deltaX}px, ${deltaY}px) scale(${isNew ? 0.95 : 1})`,\n offset: 0,\n },\n {\n duration: this.options.duration,\n easing: this.options.ease,\n fill: \"both\",\n },\n );\n const duration = isNew ? this.options.duration! * 0.25 : 0;\n const delay = isNew ? this.options.duration! * 0.25 : 0;\n child.animate(\n {\n opacity: isNew ? 0 : 1,\n offset: 0,\n },\n {\n duration: duration,\n delay: delay,\n easing: \"linear\",\n fill: \"both\",\n },\n );\n });\n }\n\n private addStyles() {\n if (TextMorph.styleEl) return;\n\n const style = document.createElement(\"style\");\n style.dataset.torph = \"true\";\n style.innerHTML = `\n[torph-root] {\n display: inline-flex;\n position: relative;\n will-change: width, height;\n transition-property: width, height;\n white-space: nowrap;\n}\n\n[torph-item] {\n display: inline-block;\n will-change: opacity, transform;\n transform: none;\n opacity: 1;\n}\n\n[torph-root][torph-debug] {\n outline:2px solid magenta;\n [torph-item] {\n outline:2px solid cyan;\n outline-offset: -4px;\n }\n}\n `;\n document.head.appendChild(style);\n TextMorph.styleEl = style;\n }\n\n private removeStyles() {\n if (TextMorph.styleEl) {\n TextMorph.styleEl.remove();\n TextMorph.styleEl = undefined!;\n }\n }\n\n // utils\n\n private blocks(iterator: Intl.SegmentIterator<Intl.SegmentData>) {\n const uniqueStrings: Block[] = Array.from(iterator).reduce(\n (acc, string) => {\n if (string.segment === \" \") {\n return [...acc, { id: `space-${string.index}`, string: \"\\u00A0\" }];\n }\n\n const existingString = acc.find((x) => x.string === string.segment);\n if (existingString) {\n return [\n ...acc,\n { id: `${string.segment}-${string.index}`, string: string.segment },\n ];\n }\n\n return [\n ...acc,\n {\n id: string.segment,\n string: string.segment,\n },\n ];\n },\n [] as Block[],\n );\n\n return uniqueStrings;\n }\n\n private blocksFallback(value: string, byWord: boolean): Block[] {\n const segments = byWord ? value.split(\" \") : value.split(\"\");\n const blocks: Block[] = [];\n\n if (byWord) {\n segments.forEach((segment, index) => {\n if (index > 0) {\n blocks.push({ id: `space-${index}`, string: \"\\u00A0\" });\n }\n const existing = blocks.find((x) => x.string === segment);\n if (existing) {\n blocks.push({ id: `${segment}-${index}`, string: segment });\n } else {\n blocks.push({ id: segment, string: segment });\n }\n });\n } else {\n segments.forEach((segment, index) => {\n const existing = blocks.find((x) => x.string === segment);\n if (existing) {\n blocks.push({ id: `${segment}-${index}`, string: segment });\n } else {\n blocks.push({ id: segment, string: segment });\n }\n });\n }\n\n return blocks;\n }\n\n private log(...args: any[]) {\n if (this.options.debug) console.log(\"[TextMorph]\", ...args);\n }\n}\n"]}
|
package/dist/react/index.d.mts
CHANGED
|
@@ -1,11 +1,23 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
interface TextMorphOptions {
|
|
4
|
+
debug?: boolean;
|
|
5
|
+
element: HTMLElement;
|
|
6
|
+
locale?: Intl.LocalesArgument;
|
|
7
|
+
scale?: boolean;
|
|
8
|
+
duration?: number;
|
|
9
|
+
ease?: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
respectReducedMotion?: boolean;
|
|
12
|
+
onAnimationStart?: () => void;
|
|
13
|
+
onAnimationComplete?: () => void;
|
|
14
|
+
}
|
|
3
15
|
|
|
4
16
|
type TextMorphProps = Omit<TextMorphOptions, "element"> & {
|
|
5
|
-
children:
|
|
17
|
+
children: React.ReactNode;
|
|
6
18
|
className?: string;
|
|
7
19
|
style?: React.CSSProperties;
|
|
8
|
-
as?:
|
|
20
|
+
as?: React.ElementType;
|
|
9
21
|
};
|
|
10
22
|
declare const TextMorph: ({ children, className, style, as, ...props }: TextMorphProps) => React.JSX.Element;
|
|
11
23
|
declare function useTextMorph(props: Omit<TextMorphOptions, "element">): {
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,11 +1,23 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
interface TextMorphOptions {
|
|
4
|
+
debug?: boolean;
|
|
5
|
+
element: HTMLElement;
|
|
6
|
+
locale?: Intl.LocalesArgument;
|
|
7
|
+
scale?: boolean;
|
|
8
|
+
duration?: number;
|
|
9
|
+
ease?: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
respectReducedMotion?: boolean;
|
|
12
|
+
onAnimationStart?: () => void;
|
|
13
|
+
onAnimationComplete?: () => void;
|
|
14
|
+
}
|
|
3
15
|
|
|
4
16
|
type TextMorphProps = Omit<TextMorphOptions, "element"> & {
|
|
5
|
-
children:
|
|
17
|
+
children: React.ReactNode;
|
|
6
18
|
className?: string;
|
|
7
19
|
style?: React.CSSProperties;
|
|
8
|
-
as?:
|
|
20
|
+
as?: React.ElementType;
|
|
9
21
|
};
|
|
10
22
|
declare const TextMorph: ({ children, className, style, as, ...props }: TextMorphProps) => React.JSX.Element;
|
|
11
23
|
declare function useTextMorph(props: Omit<TextMorphOptions, "element">): {
|
package/dist/react/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
"use strict";var I=Object.create;var v=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var C=(a,t)=>{for(var e in t)v(a,e,{get:t[e],enumerable:!0})},$=(a,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of L(t))!H.call(a,i)&&i!==e&&v(a,i,{get:()=>t[i],enumerable:!(o=R(t,i))||o.enumerable});return a};var Q=(a,t,e)=>(e=a!=null?I(k(a)):{},$(t||!a||!a.__esModule?v(e,"default",{value:a,enumerable:!0}):e,a)),B=a=>$(v({},"__esModule",{value:!0}),a);var O={};C(O,{TextMorph:()=>S,useTextMorph:()=>A});module.exports=B(O);var m=Q(require("react"));var E=class a{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=!0;prefersReducedMotion=!1;mediaQuery;static styleEl;constructor(t){if(this.options={locale:"en",duration:400,scale:!0,ease:"cubic-bezier(0.19, 1, 0.22, 1)",respectReducedMotion:!0,...t},this.element=t.element,typeof window<"u"&&this.options.respectReducedMotion){this.mediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),this.prefersReducedMotion=this.mediaQuery.matches;let e=o=>{this.prefersReducedMotion=o.matches};this.mediaQuery.addEventListener("change",e)}this.isDisabled()||(this.element.setAttribute("torph-root",""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,t.debug&&this.element.setAttribute("torph-debug","")),this.data=this.element.innerHTML,this.isDisabled()||this.addStyles()}destroy(){this.mediaQuery&&this.mediaQuery.removeEventListener("change",this.handleMediaQueryChange),this.element.getAnimations().forEach(t=>t.cancel()),this.element.removeAttribute("torph-root"),this.element.removeAttribute("torph-debug"),this.removeStyles()}handleMediaQueryChange=t=>{this.prefersReducedMotion=t.matches};isDisabled(){return!!(this.options.disabled||this.options.respectReducedMotion&&this.prefersReducedMotion)}update(t){if(t!==this.data){if(this.data=t,this.isDisabled()){typeof t=="string"&&(this.element.textContent=t);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element)}}createTextGroup(t,e){let o=e.offsetWidth,i=e.offsetHeight,h=t.includes(" "),p;if(typeof Intl.Segmenter<"u"){let n=new Intl.Segmenter(this.options.locale,{granularity:h?"word":"grapheme"}).segment(t)[Symbol.iterator]();p=this.blocks(n)}else p=this.blocksFallback(t,h);this.prevMeasures=this.measure();let l=Array.from(e.children),d=new Set(p.map(s=>s.id)),g=l.filter(s=>!d.has(s.getAttribute("torph-id"))&&!s.hasAttribute("torph-exiting")),y=new Set(g),x=new Map;for(let s=0;s<l.length;s++){let n=l[s];if(!y.has(n))continue;let u=null;for(let r=s+1;r<l.length;r++){let c=l[r].getAttribute("torph-id");if(d.has(c)&&!y.has(l[r])){u=c;break}}if(!u)for(let r=s-1;r>=0;r--){let c=l[r].getAttribute("torph-id");if(d.has(c)&&!y.has(l[r])){u=c;break}}x.set(n,u)}let M=e.getBoundingClientRect();if(g.forEach(s=>{let n=s.getBoundingClientRect();s.setAttribute("torph-exiting",""),s.style.position="absolute",s.style.pointerEvents="none",s.style.left=`${n.left-M.left}px`,s.style.top=`${n.top-M.top}px`,s.style.width=`${n.width}px`,s.style.height=`${n.height}px`}),l.forEach(s=>{let n=s.getAttribute("torph-id");d.has(n)&&s.remove()}),p.forEach(s=>{let n=document.createElement("span");n.setAttribute("torph-item",""),n.setAttribute("torph-id",s.id),n.textContent=s.string,e.appendChild(n)}),this.currentMeasures=this.measure(),this.updateStyles(p),g.forEach(s=>{if(this.isInitialRender){s.remove();return}let n=x.get(s),u=0,r=0;if(n&&this.prevMeasures[n]&&this.currentMeasures[n]){let b=this.prevMeasures[n],w=this.currentMeasures[n];u=w.x-b.x,r=w.y-b.y}s.getAnimations().forEach(b=>b.cancel()),s.animate({transform:this.options.scale?`translate(${u}px, ${r}px) scale(0.95)`:`translate(${u}px, ${r}px)`,offset:1},{duration:this.options.duration,easing:this.options.ease,fill:"both"});let c=s.animate({opacity:0,offset:1},{duration:this.options.duration*.25,easing:"linear",fill:"both"});c.onfinish=()=>s.remove()}),this.isInitialRender){this.isInitialRender=!1,e.style.width="auto",e.style.height="auto";return}if(o===0||i===0)return;e.style.width="auto",e.style.height="auto",e.offsetWidth;let f=e.offsetWidth,T=e.offsetHeight;e.style.width=`${o}px`,e.style.height=`${i}px`,e.offsetWidth,e.style.width=`${f}px`,e.style.height=`${T}px`,setTimeout(()=>{e.style.width="auto",e.style.height="auto",this.options.onAnimationComplete&&this.options.onAnimationComplete()},this.options.duration)}measure(){let t=Array.from(this.element.children),e={};return t.forEach((o,i)=>{if(o.hasAttribute("torph-exiting"))return;let h=o.getAttribute("torph-id")||`child-${i}`;e[h]={x:o.offsetLeft,y:o.offsetTop}}),e}updateStyles(t){if(this.isInitialRender)return;let e=Array.from(this.element.children),o=new Set(t.map(i=>i.id).filter(i=>this.prevMeasures[i]));e.forEach((i,h)=>{if(i.hasAttribute("torph-exiting"))return;let p=i.getAttribute("torph-id")||`child-${h}`,l=this.prevMeasures[p],d=this.currentMeasures[p],g=d?.x||0,y=d?.y||0,x=l?l.x-g:0,M=l?l.y-y:0,f=!l;if(f){let n=t.findIndex(r=>r.id===p),u=null;for(let r=n-1;r>=0;r--)if(o.has(t[r].id)){u=t[r].id;break}if(!u){for(let r=n+1;r<t.length;r++)if(o.has(t[r].id)){u=t[r].id;break}}if(u){let r=this.prevMeasures[u],c=this.currentMeasures[u];x=r.x-c.x,M=r.y-c.y}}i.getAnimations().forEach(n=>n.cancel()),i.animate({transform:`translate(${x}px, ${M}px) scale(${f?.95:1})`,offset:0},{duration:this.options.duration,easing:this.options.ease,fill:"both"});let T=f?this.options.duration*.25:0,s=f?this.options.duration*.25:0;i.animate({opacity:f?0:1,offset:0},{duration:T,delay:s,easing:"linear",fill:"both"})})}addStyles(){if(a.styleEl)return;let t=document.createElement("style");t.dataset.torph="true",t.innerHTML=`
|
|
1
|
+
'use strict';var c=require('react');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var c__default=/*#__PURE__*/_interopDefault(c);var A="span",$={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},b=class h{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;prefersReducedMotion=false;mediaQuery;static styleEl;constructor(t){this.options={...$,...t},this.element=t.element,typeof window<"u"&&this.options.respectReducedMotion&&(this.mediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),this.prefersReducedMotion=this.mediaQuery.matches,this.mediaQuery.addEventListener("change",this.handleMediaQueryChange)),this.isDisabled()||(this.element.setAttribute("torph-root",""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,t.debug&&this.element.setAttribute("torph-debug","")),this.data="",this.isDisabled()||this.addStyles();}destroy(){this.mediaQuery&&this.mediaQuery.removeEventListener("change",this.handleMediaQueryChange),this.element.getAnimations().forEach(t=>t.cancel()),this.element.removeAttribute("torph-root"),this.element.removeAttribute("torph-debug"),this.removeStyles();}handleMediaQueryChange=t=>{this.prefersReducedMotion=t.matches;};isDisabled(){return !!(this.options.disabled||this.options.respectReducedMotion&&this.prefersReducedMotion)}update(t){if(t!==this.data){if(this.data=t,this.isDisabled()){typeof t=="string"&&(this.element.textContent=t);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(t,s){let o=s.offsetWidth,i=s.offsetHeight,a=t.includes(" "),l;if(typeof Intl.Segmenter<"u"){let n=new Intl.Segmenter(this.options.locale,{granularity:a?"word":"grapheme"}).segment(t)[Symbol.iterator]();l=this.blocks(n);}else l=this.blocksFallback(t,a);this.prevMeasures=this.measure();let p=Array.from(s.children),d=new Set(l.map(e=>e.id)),m=p.filter(e=>!d.has(e.getAttribute("torph-id"))&&!e.hasAttribute("torph-exiting")),y=new Set(m),x=new Map;for(let e=0;e<p.length;e++){let n=p[e];if(!y.has(n))continue;let u=null;for(let r=e+1;r<p.length;r++){let f=p[r].getAttribute("torph-id");if(d.has(f)&&!y.has(p[r])){u=f;break}}if(!u)for(let r=e-1;r>=0;r--){let f=p[r].getAttribute("torph-id");if(d.has(f)&&!y.has(p[r])){u=f;break}}x.set(n,u);}let M=m.map(e=>(e.getAnimations().forEach(n=>n.cancel()),{left:e.offsetLeft,top:e.offsetTop,width:e.offsetWidth,height:e.offsetHeight}));if(m.forEach((e,n)=>{let u=M[n];e.setAttribute("torph-exiting",""),e.style.position="absolute",e.style.pointerEvents="none",e.style.left=`${u.left}px`,e.style.top=`${u.top}px`,e.style.width=`${u.width}px`,e.style.height=`${u.height}px`;}),p.forEach(e=>{let n=e.getAttribute("torph-id");d.has(n)&&e.remove();}),Array.from(s.childNodes).forEach(e=>{e.nodeType===Node.TEXT_NODE&&e.remove();}),l.forEach(e=>{let n=document.createElement("span");n.setAttribute("torph-item",""),n.setAttribute("torph-id",e.id),n.textContent=e.string,s.appendChild(n);}),this.currentMeasures=this.measure(),this.updateStyles(l),m.forEach(e=>{if(this.isInitialRender){e.remove();return}let n=x.get(e),u=0,r=0;if(n&&this.prevMeasures[n]&&this.currentMeasures[n]){let E=this.prevMeasures[n],v=this.currentMeasures[n];u=v.x-E.x,r=v.y-E.y;}e.animate({transform:this.options.scale?`translate(${u}px, ${r}px) scale(0.95)`:`translate(${u}px, ${r}px)`,offset:1},{duration:this.options.duration,easing:this.options.ease,fill:"both"});let f=e.animate({opacity:0,offset:1},{duration:this.options.duration*.25,easing:"linear",fill:"both"});f.onfinish=()=>e.remove();}),this.isInitialRender){this.isInitialRender=false,s.style.width="auto",s.style.height="auto";return}if(o===0||i===0)return;s.style.width="auto",s.style.height="auto",s.offsetWidth;let g=s.offsetWidth,T=s.offsetHeight;s.style.width=`${o}px`,s.style.height=`${i}px`,s.offsetWidth,s.style.width=`${g}px`,s.style.height=`${T}px`,setTimeout(()=>{s.style.width="auto",s.style.height="auto",this.options.onAnimationComplete&&this.options.onAnimationComplete();},this.options.duration);}measure(){let t=Array.from(this.element.children),s={};return t.forEach((o,i)=>{if(o.hasAttribute("torph-exiting"))return;let a=o.getAttribute("torph-id")||`child-${i}`;s[a]={x:o.offsetLeft,y:o.offsetTop};}),s}updateStyles(t){if(this.isInitialRender)return;let s=Array.from(this.element.children),o=new Set(t.map(i=>i.id).filter(i=>this.prevMeasures[i]));s.forEach((i,a)=>{if(i.hasAttribute("torph-exiting"))return;let l=i.getAttribute("torph-id")||`child-${a}`,p=this.prevMeasures[l],d=this.currentMeasures[l],m=d?.x||0,y=d?.y||0,x=p?p.x-m:0,M=p?p.y-y:0,g=!p;if(g){let n=t.findIndex(r=>r.id===l),u=null;for(let r=n-1;r>=0;r--)if(o.has(t[r].id)){u=t[r].id;break}if(!u){for(let r=n+1;r<t.length;r++)if(o.has(t[r].id)){u=t[r].id;break}}if(u){let r=this.prevMeasures[u],f=this.currentMeasures[u];x=r.x-f.x,M=r.y-f.y;}}i.getAnimations().forEach(n=>n.cancel()),i.animate({transform:`translate(${x}px, ${M}px) scale(${g?.95:1})`,offset:0},{duration:this.options.duration,easing:this.options.ease,fill:"both"});let T=g?this.options.duration*.25:0,e=g?this.options.duration*.25:0;i.animate({opacity:g?0:1,offset:0},{duration:T,delay:e,easing:"linear",fill:"both"});});}addStyles(){if(h.styleEl)return;let t=document.createElement("style");t.dataset.torph="true",t.innerHTML=`
|
|
3
2
|
[torph-root] {
|
|
4
3
|
display: inline-flex;
|
|
5
4
|
position: relative;
|
|
@@ -22,5 +21,5 @@
|
|
|
22
21
|
outline-offset: -4px;
|
|
23
22
|
}
|
|
24
23
|
}
|
|
25
|
-
`,document.head.appendChild(t),
|
|
24
|
+
`,document.head.appendChild(t),h.styleEl=t;}removeStyles(){h.styleEl&&(h.styleEl.remove(),h.styleEl=void 0);}blocks(t){return Array.from(t).reduce((o,i)=>i.segment===" "?[...o,{id:`space-${i.index}`,string:"\xA0"}]:o.find(l=>l.string===i.segment)?[...o,{id:`${i.segment}-${i.index}`,string:i.segment}]:[...o,{id:i.segment,string:i.segment}],[])}blocksFallback(t,s){let o=s?t.split(" "):t.split(""),i=[];return s?o.forEach((a,l)=>{l>0&&i.push({id:`space-${l}`,string:"\xA0"}),i.find(d=>d.string===a)?i.push({id:`${a}-${l}`,string:a}):i.push({id:a,string:a});}):o.forEach((a,l)=>{i.find(d=>d.string===a)?i.push({id:`${a}-${l}`,string:a}):i.push({id:a,string:a});}),i}log(...t){this.options.debug&&console.log("[TextMorph]",...t);}};function w(h){if(typeof h=="string")return h;if(typeof h=="number")return String(h);if(!h||typeof h=="boolean")return "";if(Array.isArray(h))return h.map(w).join("");throw c__default.default.isValidElement(h)?new Error("TextMorph only accepts text content. Found a React element \u2014 use strings, numbers, or expressions instead."):new Error(`TextMorph received an unsupported child of type "${typeof h}".`)}var R=({children:h,className:t,style:s,as:o=A,...i})=>{let{ref:a,update:l}=S(i),p=w(h),d=c__default.default.useRef({__html:p});return c__default.default.useEffect(()=>{l(p);},[p,l]),c__default.default.createElement(o,{ref:a,className:t,style:s,dangerouslySetInnerHTML:d.current})};function S(h){let t=c__default.default.useRef(null),s=c__default.default.useRef(null);c__default.default.useEffect(()=>(t.current&&(s.current=new b({element:t.current,...h})),()=>{s.current?.destroy();}),[]);let o=c__default.default.useCallback(i=>{s.current?.update(i);},[]);return {ref:t,update:o}}exports.TextMorph=R;exports.useTextMorph=S;//# sourceMappingURL=index.js.map
|
|
26
25
|
//# sourceMappingURL=index.js.map
|
package/dist/react/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/react/index.ts","../../src/react/TextMorph.tsx","../../src/lib/text-morph/index.ts"],"sourcesContent":["export { TextMorph, useTextMorph } from \"./TextMorph\";\nexport type { TextMorphProps } from \"./TextMorph\";\n\n","\"use client\";\n\nimport React from \"react\";\nimport { TextMorph as Morph } from \"../lib/text-morph\";\nimport type { TextMorphOptions } from \"../lib/text-morph/types\";\n\nexport type TextMorphProps = Omit<TextMorphOptions, \"element\"> & {\n children: string; //React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n as?: keyof JSX.IntrinsicElements;\n};\n\nexport const TextMorph = ({\n children,\n className,\n style,\n as = \"div\",\n ...props\n}: TextMorphProps) => {\n const { ref, update } = useTextMorph(props);\n\n React.useEffect(() => {\n update(children);\n }, [children, update]);\n\n const Component = as as any;\n return <Component ref={ref} className={className} style={style} />;\n};\n\nexport function useTextMorph(props: Omit<TextMorphOptions, \"element\">) {\n const ref = React.useRef<HTMLDivElement | null>(null);\n const morphRef = React.useRef<Morph | null>(null);\n\n React.useEffect(() => {\n if (ref.current) {\n morphRef.current = new Morph({ element: ref.current, ...props });\n }\n\n return () => {\n morphRef.current?.destroy();\n };\n }, []);\n\n const update = (text: string) => {\n morphRef.current?.update(text);\n };\n\n return { ref, update };\n}\n","import type { TextMorphOptions } from \"./types\";\n\nexport type { TextMorphOptions } from \"./types\";\n\ntype Block = {\n id: string;\n string: string;\n};\ntype Measures = {\n [key: string]: { x: number; y: number };\n};\n\nexport class TextMorph {\n private element: HTMLElement;\n private options: Omit<TextMorphOptions, \"element\"> = {};\n\n private data: HTMLElement | string;\n\n private currentMeasures: Measures = {};\n private prevMeasures: Measures = {};\n private isInitialRender = true;\n private prefersReducedMotion = false;\n private mediaQuery?: MediaQueryList;\n\n static styleEl: HTMLStyleElement;\n\n constructor(options: TextMorphOptions) {\n this.options = {\n locale: \"en\",\n duration: 400,\n scale: true,\n ease: \"cubic-bezier(0.19, 1, 0.22, 1)\",\n respectReducedMotion: true,\n ...options,\n };\n\n this.element = options.element;\n\n // reduced motion detection\n if (typeof window !== \"undefined\" && this.options.respectReducedMotion) {\n this.mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n this.prefersReducedMotion = this.mediaQuery.matches;\n\n const listener = (event: MediaQueryListEvent) => {\n this.prefersReducedMotion = event.matches;\n };\n\n this.mediaQuery.addEventListener(\"change\", listener);\n }\n\n if (!this.isDisabled()) {\n this.element.setAttribute(\"torph-root\", \"\");\n this.element.style.transitionDuration = `${this.options.duration}ms`;\n this.element.style.transitionTimingFunction = this.options.ease!;\n\n if (options.debug) this.element.setAttribute(\"torph-debug\", \"\");\n }\n\n this.data = this.element.innerHTML;\n\n if (!this.isDisabled()) {\n this.addStyles();\n }\n }\n\n destroy() {\n if (this.mediaQuery) {\n this.mediaQuery.removeEventListener(\n \"change\",\n this.handleMediaQueryChange,\n );\n }\n this.element.getAnimations().forEach((anim) => anim.cancel());\n this.element.removeAttribute(\"torph-root\");\n this.element.removeAttribute(\"torph-debug\");\n this.removeStyles();\n }\n\n private handleMediaQueryChange = (event: MediaQueryListEvent) => {\n this.prefersReducedMotion = event.matches;\n };\n\n private isDisabled(): boolean {\n return Boolean(\n this.options.disabled ||\n (this.options.respectReducedMotion && this.prefersReducedMotion),\n );\n }\n\n update(value: HTMLElement | string) {\n if (value === this.data) return;\n this.data = value;\n\n if (this.isDisabled()) {\n if (typeof value === \"string\") {\n this.element.textContent = value;\n }\n return;\n }\n\n if (this.data instanceof HTMLElement) {\n // TODO: handle HTMLElement case\n throw new Error(\"HTMLElement not yet supported\");\n } else {\n if (this.options.onAnimationStart && !this.isInitialRender) {\n this.options.onAnimationStart();\n }\n this.createTextGroup(this.data, this.element);\n }\n }\n\n private createTextGroup(value: string, element: HTMLElement) {\n const oldWidth = element.offsetWidth;\n const oldHeight = element.offsetHeight;\n\n const byWord = value.includes(\" \");\n let blocks: Block[];\n\n if (typeof Intl.Segmenter !== \"undefined\") {\n const segmenter = new Intl.Segmenter(this.options.locale, {\n granularity: byWord ? \"word\" : \"grapheme\",\n });\n const iterator = segmenter.segment(value)[Symbol.iterator]();\n blocks = this.blocks(iterator);\n } else {\n // Fallback for browsers without Intl.Segmenter\n blocks = this.blocksFallback(value, byWord);\n }\n\n this.prevMeasures = this.measure();\n const oldChildren = Array.from(element.children) as HTMLElement[];\n const newIds = new Set(blocks.map((b) => b.id));\n\n const exiting = oldChildren.filter(\n (child) =>\n !newIds.has(child.getAttribute(\"torph-id\") as string) &&\n !child.hasAttribute(\"torph-exiting\"),\n );\n\n // For each exiting char, find the nearest persistent neighbor in old order\n // so we can make it follow that neighbor's FLIP movement\n const exitingSet = new Set(exiting);\n const exitingAnchorId = new Map<HTMLElement, string | null>();\n for (let i = 0; i < oldChildren.length; i++) {\n const child = oldChildren[i]!;\n if (!exitingSet.has(child)) continue;\n\n // Look forward for nearest persistent char\n let anchor: string | null = null;\n for (let j = i + 1; j < oldChildren.length; j++) {\n const siblingId = oldChildren[j]!.getAttribute(\"torph-id\") as string;\n if (newIds.has(siblingId) && !exitingSet.has(oldChildren[j]!)) {\n anchor = siblingId;\n break;\n }\n }\n // If none forward, look backward\n if (!anchor) {\n for (let j = i - 1; j >= 0; j--) {\n const siblingId = oldChildren[j]!.getAttribute(\"torph-id\") as string;\n if (newIds.has(siblingId) && !exitingSet.has(oldChildren[j]!)) {\n anchor = siblingId;\n break;\n }\n }\n }\n exitingAnchorId.set(child, anchor);\n }\n\n const parentRect = element.getBoundingClientRect();\n exiting.forEach((child) => {\n const rect = child.getBoundingClientRect();\n child.setAttribute(\"torph-exiting\", \"\");\n child.style.position = \"absolute\";\n child.style.pointerEvents = \"none\";\n child.style.left = `${rect.left - parentRect.left}px`;\n child.style.top = `${rect.top - parentRect.top}px`;\n child.style.width = `${rect.width}px`;\n child.style.height = `${rect.height}px`;\n });\n\n oldChildren.forEach((child) => {\n const id = child.getAttribute(\"torph-id\") as string;\n if (newIds.has(id)) child.remove();\n });\n\n blocks.forEach((block) => {\n const span = document.createElement(\"span\");\n span.setAttribute(\"torph-item\", \"\");\n span.setAttribute(\"torph-id\", block.id);\n span.textContent = block.string;\n element.appendChild(span);\n });\n\n this.currentMeasures = this.measure();\n this.updateStyles(blocks);\n\n exiting.forEach((child) => {\n if (this.isInitialRender) {\n child.remove();\n return;\n }\n\n // Find the anchor neighbor's FLIP delta so we move in sync with it\n const anchorId = exitingAnchorId.get(child);\n let dx = 0;\n let dy = 0;\n\n if (\n anchorId &&\n this.prevMeasures[anchorId] &&\n this.currentMeasures[anchorId]\n ) {\n const anchorPrev = this.prevMeasures[anchorId]!;\n const anchorCurr = this.currentMeasures[anchorId]!;\n dx = anchorCurr.x - anchorPrev.x;\n dy = anchorCurr.y - anchorPrev.y;\n }\n\n child.getAnimations().forEach((a) => a.cancel());\n child.animate(\n {\n transform: this.options.scale\n ? `translate(${dx}px, ${dy}px) scale(0.95)`\n : `translate(${dx}px, ${dy}px)`,\n offset: 1,\n },\n {\n duration: this.options.duration,\n easing: this.options.ease,\n fill: \"both\",\n },\n );\n const animation: Animation = child.animate(\n {\n opacity: 0,\n offset: 1,\n },\n {\n duration: this.options.duration! * 0.25,\n easing: \"linear\",\n fill: \"both\",\n },\n );\n animation.onfinish = () => child.remove();\n });\n\n if (this.isInitialRender) {\n this.isInitialRender = false;\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n return;\n }\n\n if (oldWidth === 0 || oldHeight === 0) return;\n\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n void element.offsetWidth; // force reflow\n\n const newWidth = element.offsetWidth;\n const newHeight = element.offsetHeight;\n\n element.style.width = `${oldWidth}px`;\n element.style.height = `${oldHeight}px`;\n void element.offsetWidth; // force reflow\n\n element.style.width = `${newWidth}px`;\n element.style.height = `${newHeight}px`;\n\n // TODO: move to `transitionend` event listener\n setTimeout(() => {\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n if (this.options.onAnimationComplete) {\n this.options.onAnimationComplete();\n }\n }, this.options.duration);\n }\n\n private measure() {\n const children = Array.from(this.element.children) as HTMLElement[];\n const measures: Measures = {};\n\n children.forEach((child, index) => {\n if (child.hasAttribute(\"torph-exiting\")) return;\n const key = child.getAttribute(\"torph-id\") || `child-${index}`;\n measures[key] = {\n x: child.offsetLeft,\n y: child.offsetTop,\n };\n });\n\n return measures;\n }\n\n private updateStyles(blocks: Block[]) {\n if (this.isInitialRender) return;\n\n const children = Array.from(this.element.children) as HTMLElement[];\n\n const persistentIds = new Set(\n blocks.map((b) => b.id).filter((id) => this.prevMeasures[id]),\n );\n\n children.forEach((child, index) => {\n if (child.hasAttribute(\"torph-exiting\")) return;\n const key = child.getAttribute(\"torph-id\") || `child-${index}`;\n const prev = this.prevMeasures[key];\n const current = this.currentMeasures[key];\n\n const cx = current?.x || 0;\n const cy = current?.y || 0;\n\n let deltaX = prev ? prev.x - cx : 0;\n let deltaY = prev ? prev.y - cy : 0;\n const isNew = !prev;\n\n // For new chars, use the nearest persistent neighbor's FLIP delta\n // so all new chars get the same consistent offset\n if (isNew) {\n const blockIndex = blocks.findIndex((b) => b.id === key);\n let anchorId: string | null = null;\n\n for (let j = blockIndex - 1; j >= 0; j--) {\n if (persistentIds.has(blocks[j]!.id)) {\n anchorId = blocks[j]!.id;\n break;\n }\n }\n if (!anchorId) {\n for (let j = blockIndex + 1; j < blocks.length; j++) {\n if (persistentIds.has(blocks[j]!.id)) {\n anchorId = blocks[j]!.id;\n break;\n }\n }\n }\n\n if (anchorId) {\n const anchorPrev = this.prevMeasures[anchorId]!;\n const anchorCurr = this.currentMeasures[anchorId]!;\n deltaX = anchorPrev.x - anchorCurr.x;\n deltaY = anchorPrev.y - anchorCurr.y;\n }\n }\n\n child.getAnimations().forEach((a) => a.cancel());\n child.animate(\n {\n transform: `translate(${deltaX}px, ${deltaY}px) scale(${isNew ? 0.95 : 1})`,\n offset: 0,\n },\n {\n duration: this.options.duration,\n easing: this.options.ease,\n fill: \"both\",\n },\n );\n const duration = isNew ? this.options.duration! * 0.25 : 0;\n const delay = isNew ? this.options.duration! * 0.25 : 0;\n child.animate(\n {\n opacity: isNew ? 0 : 1,\n offset: 0,\n },\n {\n duration: duration,\n delay: delay,\n easing: \"linear\",\n fill: \"both\",\n },\n );\n });\n }\n\n private addStyles() {\n if (TextMorph.styleEl) return;\n\n const style = document.createElement(\"style\");\n style.dataset.torph = \"true\";\n style.innerHTML = `\n[torph-root] {\n display: inline-flex;\n position: relative;\n will-change: width, height;\n transition-property: width, height;\n white-space: nowrap;\n}\n\n[torph-item] {\n display: inline-block;\n will-change: opacity, transform;\n transform: none;\n opacity: 1;\n}\n\n[torph-root][torph-debug] {\n outline:2px solid magenta;\n [torph-item] {\n outline:2px solid cyan;\n outline-offset: -4px;\n }\n}\n `;\n document.head.appendChild(style);\n TextMorph.styleEl = style;\n }\n\n private removeStyles() {\n if (TextMorph.styleEl) {\n TextMorph.styleEl.remove();\n TextMorph.styleEl = undefined!;\n }\n }\n\n // utils\n\n private blocks(iterator: Intl.SegmentIterator<Intl.SegmentData>) {\n const uniqueStrings: Block[] = Array.from(iterator).reduce(\n (acc, string) => {\n if (string.segment === \" \") {\n return [...acc, { id: `space-${string.index}`, string: \"\\u00A0\" }];\n }\n\n const existingString = acc.find((x) => x.string === string.segment);\n if (existingString) {\n return [\n ...acc,\n { id: `${string.segment}-${string.index}`, string: string.segment },\n ];\n }\n\n return [\n ...acc,\n {\n id: string.segment,\n string: string.segment,\n },\n ];\n },\n [] as Block[],\n );\n\n return uniqueStrings;\n }\n\n private blocksFallback(value: string, byWord: boolean): Block[] {\n const segments = byWord ? value.split(\" \") : value.split(\"\");\n const blocks: Block[] = [];\n\n if (byWord) {\n segments.forEach((segment, index) => {\n if (index > 0) {\n blocks.push({ id: `space-${index}`, string: \"\\u00A0\" });\n }\n const existing = blocks.find((x) => x.string === segment);\n if (existing) {\n blocks.push({ id: `${segment}-${index}`, string: segment });\n } else {\n blocks.push({ id: segment, string: segment });\n }\n });\n } else {\n segments.forEach((segment, index) => {\n const existing = blocks.find((x) => x.string === segment);\n if (existing) {\n blocks.push({ id: `${segment}-${index}`, string: segment });\n } else {\n blocks.push({ id: segment, string: segment });\n }\n });\n }\n\n return blocks;\n }\n\n private log(...args: any[]) {\n if (this.options.debug) console.log(\"[TextMorph]\", ...args);\n }\n}\n"],"mappings":"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","names":["react_exports","__export","TextMorph","useTextMorph","__toCommonJS","import_react","TextMorph","_TextMorph","options","listener","event","anim","value","element","oldWidth","oldHeight","byWord","blocks","iterator","oldChildren","newIds","b","exiting","child","exitingSet","exitingAnchorId","i","anchor","j","siblingId","parentRect","rect","id","block","span","anchorId","dx","dy","anchorPrev","anchorCurr","a","animation","newWidth","newHeight","children","measures","index","key","persistentIds","prev","current","cx","cy","deltaX","deltaY","isNew","blockIndex","duration","delay","style","acc","string","x","segments","segment","args","TextMorph","children","className","style","as","props","ref","update","useTextMorph","React","morphRef","text"]}
|
|
1
|
+
{"version":3,"sources":["../../src/lib/text-morph/index.ts","../../src/react/TextMorph.tsx"],"names":["DEFAULT_AS","DEFAULT_TEXT_MORPH_OPTIONS","TextMorph","_TextMorph","options","anim","event","value","element","oldWidth","oldHeight","byWord","blocks","iterator","oldChildren","newIds","b","exiting","child","exitingSet","exitingAnchorId","i","anchor","j","siblingId","exitPositions","a","pos","id","node","block","span","anchorId","dx","dy","anchorPrev","anchorCurr","animation","newWidth","newHeight","children","measures","index","key","persistentIds","prev","current","cx","cy","deltaX","deltaY","isNew","blockIndex","duration","delay","style","acc","string","x","segments","segment","args","childrenToString","React","className","as","props","ref","update","useTextMorph","text","initialHTML","morphRef"],"mappings":"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","file":"index.js","sourcesContent":["import type { TextMorphOptions } from \"./types\";\n\nexport type { TextMorphOptions } from \"./types\";\n\nexport const DEFAULT_AS = \"span\";\nexport const DEFAULT_TEXT_MORPH_OPTIONS = {\n debug: false,\n locale: \"en\",\n duration: 400,\n scale: true,\n ease: \"cubic-bezier(0.19, 1, 0.22, 1)\",\n disabled: false,\n respectReducedMotion: true,\n} as const satisfies Omit<TextMorphOptions, \"element\">;\n\ntype Block = {\n id: string;\n string: string;\n};\ntype Measures = {\n [key: string]: { x: number; y: number };\n};\n\nexport class TextMorph {\n private element: HTMLElement;\n private options: Omit<TextMorphOptions, \"element\"> = {};\n\n private data: HTMLElement | string;\n\n private currentMeasures: Measures = {};\n private prevMeasures: Measures = {};\n private isInitialRender = true;\n private prefersReducedMotion = false;\n private mediaQuery?: MediaQueryList;\n\n static styleEl: HTMLStyleElement;\n\n constructor(options: TextMorphOptions) {\n this.options = {\n ...DEFAULT_TEXT_MORPH_OPTIONS,\n ...options,\n };\n\n this.element = options.element;\n\n // reduced motion detection\n if (typeof window !== \"undefined\" && this.options.respectReducedMotion) {\n this.mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n this.prefersReducedMotion = this.mediaQuery.matches;\n this.mediaQuery.addEventListener(\"change\", this.handleMediaQueryChange);\n }\n\n if (!this.isDisabled()) {\n this.element.setAttribute(\"torph-root\", \"\");\n this.element.style.transitionDuration = `${this.options.duration}ms`;\n this.element.style.transitionTimingFunction = this.options.ease!;\n\n if (options.debug) this.element.setAttribute(\"torph-debug\", \"\");\n }\n\n this.data = \"\";\n if (!this.isDisabled()) {\n this.addStyles();\n }\n }\n\n destroy() {\n if (this.mediaQuery) {\n this.mediaQuery.removeEventListener(\n \"change\",\n this.handleMediaQueryChange,\n );\n }\n this.element.getAnimations().forEach((anim) => anim.cancel());\n this.element.removeAttribute(\"torph-root\");\n this.element.removeAttribute(\"torph-debug\");\n this.removeStyles();\n }\n\n private handleMediaQueryChange = (event: MediaQueryListEvent) => {\n this.prefersReducedMotion = event.matches;\n };\n\n private isDisabled(): boolean {\n return Boolean(\n this.options.disabled ||\n (this.options.respectReducedMotion && this.prefersReducedMotion),\n );\n }\n\n update(value: HTMLElement | string) {\n if (value === this.data) return;\n this.data = value;\n\n if (this.isDisabled()) {\n if (typeof value === \"string\") {\n this.element.textContent = value;\n }\n return;\n }\n\n if (this.data instanceof HTMLElement) {\n // TODO: handle HTMLElement case\n throw new Error(\"HTMLElement not yet supported\");\n } else {\n if (this.options.onAnimationStart && !this.isInitialRender) {\n this.options.onAnimationStart();\n }\n this.createTextGroup(this.data, this.element);\n }\n }\n\n private createTextGroup(value: string, element: HTMLElement) {\n const oldWidth = element.offsetWidth;\n const oldHeight = element.offsetHeight;\n\n const byWord = value.includes(\" \");\n let blocks: Block[];\n\n if (typeof Intl.Segmenter !== \"undefined\") {\n const segmenter = new Intl.Segmenter(this.options.locale, {\n granularity: byWord ? \"word\" : \"grapheme\",\n });\n const iterator = segmenter.segment(value)[Symbol.iterator]();\n blocks = this.blocks(iterator);\n } else {\n // Fallback for browsers without Intl.Segmenter\n blocks = this.blocksFallback(value, byWord);\n }\n\n this.prevMeasures = this.measure();\n const oldChildren = Array.from(element.children) as HTMLElement[];\n const newIds = new Set(blocks.map((b) => b.id));\n\n const exiting = oldChildren.filter(\n (child) =>\n !newIds.has(child.getAttribute(\"torph-id\") as string) &&\n !child.hasAttribute(\"torph-exiting\"),\n );\n\n // For each exiting char, find the nearest persistent neighbor in old order\n // so we can make it follow that neighbor's FLIP movement\n const exitingSet = new Set(exiting);\n const exitingAnchorId = new Map<HTMLElement, string | null>();\n for (let i = 0; i < oldChildren.length; i++) {\n const child = oldChildren[i]!;\n if (!exitingSet.has(child)) continue;\n\n // Look forward for nearest persistent char\n let anchor: string | null = null;\n for (let j = i + 1; j < oldChildren.length; j++) {\n const siblingId = oldChildren[j]!.getAttribute(\"torph-id\") as string;\n if (newIds.has(siblingId) && !exitingSet.has(oldChildren[j]!)) {\n anchor = siblingId;\n break;\n }\n }\n // If none forward, look backward\n if (!anchor) {\n for (let j = i - 1; j >= 0; j--) {\n const siblingId = oldChildren[j]!.getAttribute(\"torph-id\") as string;\n if (newIds.has(siblingId) && !exitingSet.has(oldChildren[j]!)) {\n anchor = siblingId;\n break;\n }\n }\n }\n exitingAnchorId.set(child, anchor);\n }\n\n // Two-pass: read all positions before modifying any element,\n // since setting position:absolute removes from flow and shifts siblings\n const exitPositions = exiting.map((child) => {\n child.getAnimations().forEach((a) => a.cancel());\n return {\n left: child.offsetLeft,\n top: child.offsetTop,\n width: child.offsetWidth,\n height: child.offsetHeight,\n };\n });\n exiting.forEach((child, i) => {\n const pos = exitPositions[i]!;\n child.setAttribute(\"torph-exiting\", \"\");\n child.style.position = \"absolute\";\n child.style.pointerEvents = \"none\";\n child.style.left = `${pos.left}px`;\n child.style.top = `${pos.top}px`;\n child.style.width = `${pos.width}px`;\n child.style.height = `${pos.height}px`;\n });\n\n oldChildren.forEach((child) => {\n const id = child.getAttribute(\"torph-id\") as string;\n if (newIds.has(id)) child.remove();\n });\n\n // Disabled-mode updates set plain text via textContent; remove that text node\n // before appending torph items so old content is not duplicated.\n Array.from(element.childNodes).forEach((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n node.remove();\n }\n });\n\n blocks.forEach((block) => {\n const span = document.createElement(\"span\");\n span.setAttribute(\"torph-item\", \"\");\n span.setAttribute(\"torph-id\", block.id);\n span.textContent = block.string;\n element.appendChild(span);\n });\n\n this.currentMeasures = this.measure();\n this.updateStyles(blocks);\n\n exiting.forEach((child) => {\n if (this.isInitialRender) {\n child.remove();\n return;\n }\n\n // Find the anchor neighbor's FLIP delta so we move in sync with it\n const anchorId = exitingAnchorId.get(child);\n let dx = 0;\n let dy = 0;\n\n if (\n anchorId &&\n this.prevMeasures[anchorId] &&\n this.currentMeasures[anchorId]\n ) {\n const anchorPrev = this.prevMeasures[anchorId]!;\n const anchorCurr = this.currentMeasures[anchorId]!;\n dx = anchorCurr.x - anchorPrev.x;\n dy = anchorCurr.y - anchorPrev.y;\n }\n\n child.animate(\n {\n transform: this.options.scale\n ? `translate(${dx}px, ${dy}px) scale(0.95)`\n : `translate(${dx}px, ${dy}px)`,\n offset: 1,\n },\n {\n duration: this.options.duration,\n easing: this.options.ease,\n fill: \"both\",\n },\n );\n const animation: Animation = child.animate(\n {\n opacity: 0,\n offset: 1,\n },\n {\n duration: this.options.duration! * 0.25,\n easing: \"linear\",\n fill: \"both\",\n },\n );\n animation.onfinish = () => child.remove();\n });\n\n if (this.isInitialRender) {\n this.isInitialRender = false;\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n return;\n }\n\n if (oldWidth === 0 || oldHeight === 0) return;\n\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n void element.offsetWidth; // force reflow\n\n const newWidth = element.offsetWidth;\n const newHeight = element.offsetHeight;\n\n element.style.width = `${oldWidth}px`;\n element.style.height = `${oldHeight}px`;\n void element.offsetWidth; // force reflow\n\n element.style.width = `${newWidth}px`;\n element.style.height = `${newHeight}px`;\n\n // TODO: move to `transitionend` event listener\n setTimeout(() => {\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n if (this.options.onAnimationComplete) {\n this.options.onAnimationComplete();\n }\n }, this.options.duration);\n }\n\n private measure() {\n const children = Array.from(this.element.children) as HTMLElement[];\n const measures: Measures = {};\n\n children.forEach((child, index) => {\n if (child.hasAttribute(\"torph-exiting\")) return;\n const key = child.getAttribute(\"torph-id\") || `child-${index}`;\n measures[key] = {\n x: child.offsetLeft,\n y: child.offsetTop,\n };\n });\n\n return measures;\n }\n\n private updateStyles(blocks: Block[]) {\n if (this.isInitialRender) return;\n\n const children = Array.from(this.element.children) as HTMLElement[];\n\n const persistentIds = new Set(\n blocks.map((b) => b.id).filter((id) => this.prevMeasures[id]),\n );\n\n children.forEach((child, index) => {\n if (child.hasAttribute(\"torph-exiting\")) return;\n const key = child.getAttribute(\"torph-id\") || `child-${index}`;\n const prev = this.prevMeasures[key];\n const current = this.currentMeasures[key];\n\n const cx = current?.x || 0;\n const cy = current?.y || 0;\n\n let deltaX = prev ? prev.x - cx : 0;\n let deltaY = prev ? prev.y - cy : 0;\n const isNew = !prev;\n\n // For new chars, use the nearest persistent neighbor's FLIP delta\n // so all new chars get the same consistent offset\n if (isNew) {\n const blockIndex = blocks.findIndex((b) => b.id === key);\n let anchorId: string | null = null;\n\n for (let j = blockIndex - 1; j >= 0; j--) {\n if (persistentIds.has(blocks[j]!.id)) {\n anchorId = blocks[j]!.id;\n break;\n }\n }\n if (!anchorId) {\n for (let j = blockIndex + 1; j < blocks.length; j++) {\n if (persistentIds.has(blocks[j]!.id)) {\n anchorId = blocks[j]!.id;\n break;\n }\n }\n }\n\n if (anchorId) {\n const anchorPrev = this.prevMeasures[anchorId]!;\n const anchorCurr = this.currentMeasures[anchorId]!;\n deltaX = anchorPrev.x - anchorCurr.x;\n deltaY = anchorPrev.y - anchorCurr.y;\n }\n }\n\n child.getAnimations().forEach((a) => a.cancel());\n child.animate(\n {\n transform: `translate(${deltaX}px, ${deltaY}px) scale(${isNew ? 0.95 : 1})`,\n offset: 0,\n },\n {\n duration: this.options.duration,\n easing: this.options.ease,\n fill: \"both\",\n },\n );\n const duration = isNew ? this.options.duration! * 0.25 : 0;\n const delay = isNew ? this.options.duration! * 0.25 : 0;\n child.animate(\n {\n opacity: isNew ? 0 : 1,\n offset: 0,\n },\n {\n duration: duration,\n delay: delay,\n easing: \"linear\",\n fill: \"both\",\n },\n );\n });\n }\n\n private addStyles() {\n if (TextMorph.styleEl) return;\n\n const style = document.createElement(\"style\");\n style.dataset.torph = \"true\";\n style.innerHTML = `\n[torph-root] {\n display: inline-flex;\n position: relative;\n will-change: width, height;\n transition-property: width, height;\n white-space: nowrap;\n}\n\n[torph-item] {\n display: inline-block;\n will-change: opacity, transform;\n transform: none;\n opacity: 1;\n}\n\n[torph-root][torph-debug] {\n outline:2px solid magenta;\n [torph-item] {\n outline:2px solid cyan;\n outline-offset: -4px;\n }\n}\n `;\n document.head.appendChild(style);\n TextMorph.styleEl = style;\n }\n\n private removeStyles() {\n if (TextMorph.styleEl) {\n TextMorph.styleEl.remove();\n TextMorph.styleEl = undefined!;\n }\n }\n\n // utils\n\n private blocks(iterator: Intl.SegmentIterator<Intl.SegmentData>) {\n const uniqueStrings: Block[] = Array.from(iterator).reduce(\n (acc, string) => {\n if (string.segment === \" \") {\n return [...acc, { id: `space-${string.index}`, string: \"\\u00A0\" }];\n }\n\n const existingString = acc.find((x) => x.string === string.segment);\n if (existingString) {\n return [\n ...acc,\n { id: `${string.segment}-${string.index}`, string: string.segment },\n ];\n }\n\n return [\n ...acc,\n {\n id: string.segment,\n string: string.segment,\n },\n ];\n },\n [] as Block[],\n );\n\n return uniqueStrings;\n }\n\n private blocksFallback(value: string, byWord: boolean): Block[] {\n const segments = byWord ? value.split(\" \") : value.split(\"\");\n const blocks: Block[] = [];\n\n if (byWord) {\n segments.forEach((segment, index) => {\n if (index > 0) {\n blocks.push({ id: `space-${index}`, string: \"\\u00A0\" });\n }\n const existing = blocks.find((x) => x.string === segment);\n if (existing) {\n blocks.push({ id: `${segment}-${index}`, string: segment });\n } else {\n blocks.push({ id: segment, string: segment });\n }\n });\n } else {\n segments.forEach((segment, index) => {\n const existing = blocks.find((x) => x.string === segment);\n if (existing) {\n blocks.push({ id: `${segment}-${index}`, string: segment });\n } else {\n blocks.push({ id: segment, string: segment });\n }\n });\n }\n\n return blocks;\n }\n\n private log(...args: any[]) {\n if (this.options.debug) console.log(\"[TextMorph]\", ...args);\n }\n}\n","\"use client\";\n\nimport React from \"react\";\nimport { DEFAULT_AS, TextMorph as Morph } from \"../lib/text-morph\";\nimport type { TextMorphOptions } from \"../lib/text-morph/types\";\n\nexport type TextMorphProps = Omit<TextMorphOptions, \"element\"> & {\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n as?: React.ElementType;\n};\n\nfunction childrenToString(node: React.ReactNode): string {\n if (typeof node === \"string\") return node;\n if (typeof node === \"number\") return String(node);\n if (!node || typeof node === \"boolean\") return \"\";\n if (Array.isArray(node)) return node.map(childrenToString).join(\"\");\n if (React.isValidElement(node)) {\n throw new Error(\n \"TextMorph only accepts text content. Found a React element — use strings, numbers, or expressions instead.\"\n );\n }\n throw new Error(\n `TextMorph received an unsupported child of type \"${typeof node}\".`\n );\n}\n\nexport const TextMorph = ({\n children,\n className,\n style,\n as = DEFAULT_AS,\n ...props\n}: TextMorphProps) => {\n const { ref, update } = useTextMorph(props);\n const text = childrenToString(children);\n const initialHTML = React.useRef({ __html: text });\n\n React.useEffect(() => {\n update(text);\n }, [text, update]);\n\n const Component = as;\n\n return (\n <Component\n ref={ref}\n className={className}\n style={style}\n dangerouslySetInnerHTML={initialHTML.current}\n />\n );\n};\n\nexport function useTextMorph(props: Omit<TextMorphOptions, \"element\">) {\n const ref = React.useRef<HTMLDivElement | null>(null);\n const morphRef = React.useRef<Morph | null>(null);\n\n React.useEffect(() => {\n if (ref.current) {\n morphRef.current = new Morph({ element: ref.current, ...props });\n }\n\n return () => {\n morphRef.current?.destroy();\n };\n }, []);\n\n const update = React.useCallback((text: string) => {\n morphRef.current?.update(text);\n }, []);\n\n return { ref, update };\n}\n"]}
|
package/dist/react/index.mjs
CHANGED
|
@@ -1,3 +1,25 @@
|
|
|
1
|
-
"
|
|
2
|
-
|
|
1
|
+
import c from'react';var A="span",$={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},b=class h{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;prefersReducedMotion=false;mediaQuery;static styleEl;constructor(t){this.options={...$,...t},this.element=t.element,typeof window<"u"&&this.options.respectReducedMotion&&(this.mediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),this.prefersReducedMotion=this.mediaQuery.matches,this.mediaQuery.addEventListener("change",this.handleMediaQueryChange)),this.isDisabled()||(this.element.setAttribute("torph-root",""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,t.debug&&this.element.setAttribute("torph-debug","")),this.data="",this.isDisabled()||this.addStyles();}destroy(){this.mediaQuery&&this.mediaQuery.removeEventListener("change",this.handleMediaQueryChange),this.element.getAnimations().forEach(t=>t.cancel()),this.element.removeAttribute("torph-root"),this.element.removeAttribute("torph-debug"),this.removeStyles();}handleMediaQueryChange=t=>{this.prefersReducedMotion=t.matches;};isDisabled(){return !!(this.options.disabled||this.options.respectReducedMotion&&this.prefersReducedMotion)}update(t){if(t!==this.data){if(this.data=t,this.isDisabled()){typeof t=="string"&&(this.element.textContent=t);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(t,s){let o=s.offsetWidth,i=s.offsetHeight,a=t.includes(" "),l;if(typeof Intl.Segmenter<"u"){let n=new Intl.Segmenter(this.options.locale,{granularity:a?"word":"grapheme"}).segment(t)[Symbol.iterator]();l=this.blocks(n);}else l=this.blocksFallback(t,a);this.prevMeasures=this.measure();let p=Array.from(s.children),d=new Set(l.map(e=>e.id)),m=p.filter(e=>!d.has(e.getAttribute("torph-id"))&&!e.hasAttribute("torph-exiting")),y=new Set(m),x=new Map;for(let e=0;e<p.length;e++){let n=p[e];if(!y.has(n))continue;let u=null;for(let r=e+1;r<p.length;r++){let f=p[r].getAttribute("torph-id");if(d.has(f)&&!y.has(p[r])){u=f;break}}if(!u)for(let r=e-1;r>=0;r--){let f=p[r].getAttribute("torph-id");if(d.has(f)&&!y.has(p[r])){u=f;break}}x.set(n,u);}let M=m.map(e=>(e.getAnimations().forEach(n=>n.cancel()),{left:e.offsetLeft,top:e.offsetTop,width:e.offsetWidth,height:e.offsetHeight}));if(m.forEach((e,n)=>{let u=M[n];e.setAttribute("torph-exiting",""),e.style.position="absolute",e.style.pointerEvents="none",e.style.left=`${u.left}px`,e.style.top=`${u.top}px`,e.style.width=`${u.width}px`,e.style.height=`${u.height}px`;}),p.forEach(e=>{let n=e.getAttribute("torph-id");d.has(n)&&e.remove();}),Array.from(s.childNodes).forEach(e=>{e.nodeType===Node.TEXT_NODE&&e.remove();}),l.forEach(e=>{let n=document.createElement("span");n.setAttribute("torph-item",""),n.setAttribute("torph-id",e.id),n.textContent=e.string,s.appendChild(n);}),this.currentMeasures=this.measure(),this.updateStyles(l),m.forEach(e=>{if(this.isInitialRender){e.remove();return}let n=x.get(e),u=0,r=0;if(n&&this.prevMeasures[n]&&this.currentMeasures[n]){let E=this.prevMeasures[n],v=this.currentMeasures[n];u=v.x-E.x,r=v.y-E.y;}e.animate({transform:this.options.scale?`translate(${u}px, ${r}px) scale(0.95)`:`translate(${u}px, ${r}px)`,offset:1},{duration:this.options.duration,easing:this.options.ease,fill:"both"});let f=e.animate({opacity:0,offset:1},{duration:this.options.duration*.25,easing:"linear",fill:"both"});f.onfinish=()=>e.remove();}),this.isInitialRender){this.isInitialRender=false,s.style.width="auto",s.style.height="auto";return}if(o===0||i===0)return;s.style.width="auto",s.style.height="auto",s.offsetWidth;let g=s.offsetWidth,T=s.offsetHeight;s.style.width=`${o}px`,s.style.height=`${i}px`,s.offsetWidth,s.style.width=`${g}px`,s.style.height=`${T}px`,setTimeout(()=>{s.style.width="auto",s.style.height="auto",this.options.onAnimationComplete&&this.options.onAnimationComplete();},this.options.duration);}measure(){let t=Array.from(this.element.children),s={};return t.forEach((o,i)=>{if(o.hasAttribute("torph-exiting"))return;let a=o.getAttribute("torph-id")||`child-${i}`;s[a]={x:o.offsetLeft,y:o.offsetTop};}),s}updateStyles(t){if(this.isInitialRender)return;let s=Array.from(this.element.children),o=new Set(t.map(i=>i.id).filter(i=>this.prevMeasures[i]));s.forEach((i,a)=>{if(i.hasAttribute("torph-exiting"))return;let l=i.getAttribute("torph-id")||`child-${a}`,p=this.prevMeasures[l],d=this.currentMeasures[l],m=d?.x||0,y=d?.y||0,x=p?p.x-m:0,M=p?p.y-y:0,g=!p;if(g){let n=t.findIndex(r=>r.id===l),u=null;for(let r=n-1;r>=0;r--)if(o.has(t[r].id)){u=t[r].id;break}if(!u){for(let r=n+1;r<t.length;r++)if(o.has(t[r].id)){u=t[r].id;break}}if(u){let r=this.prevMeasures[u],f=this.currentMeasures[u];x=r.x-f.x,M=r.y-f.y;}}i.getAnimations().forEach(n=>n.cancel()),i.animate({transform:`translate(${x}px, ${M}px) scale(${g?.95:1})`,offset:0},{duration:this.options.duration,easing:this.options.ease,fill:"both"});let T=g?this.options.duration*.25:0,e=g?this.options.duration*.25:0;i.animate({opacity:g?0:1,offset:0},{duration:T,delay:e,easing:"linear",fill:"both"});});}addStyles(){if(h.styleEl)return;let t=document.createElement("style");t.dataset.torph="true",t.innerHTML=`
|
|
2
|
+
[torph-root] {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
position: relative;
|
|
5
|
+
will-change: width, height;
|
|
6
|
+
transition-property: width, height;
|
|
7
|
+
white-space: nowrap;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
[torph-item] {
|
|
11
|
+
display: inline-block;
|
|
12
|
+
will-change: opacity, transform;
|
|
13
|
+
transform: none;
|
|
14
|
+
opacity: 1;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
[torph-root][torph-debug] {
|
|
18
|
+
outline:2px solid magenta;
|
|
19
|
+
[torph-item] {
|
|
20
|
+
outline:2px solid cyan;
|
|
21
|
+
outline-offset: -4px;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
`,document.head.appendChild(t),h.styleEl=t;}removeStyles(){h.styleEl&&(h.styleEl.remove(),h.styleEl=void 0);}blocks(t){return Array.from(t).reduce((o,i)=>i.segment===" "?[...o,{id:`space-${i.index}`,string:"\xA0"}]:o.find(l=>l.string===i.segment)?[...o,{id:`${i.segment}-${i.index}`,string:i.segment}]:[...o,{id:i.segment,string:i.segment}],[])}blocksFallback(t,s){let o=s?t.split(" "):t.split(""),i=[];return s?o.forEach((a,l)=>{l>0&&i.push({id:`space-${l}`,string:"\xA0"}),i.find(d=>d.string===a)?i.push({id:`${a}-${l}`,string:a}):i.push({id:a,string:a});}):o.forEach((a,l)=>{i.find(d=>d.string===a)?i.push({id:`${a}-${l}`,string:a}):i.push({id:a,string:a});}),i}log(...t){this.options.debug&&console.log("[TextMorph]",...t);}};function w(h){if(typeof h=="string")return h;if(typeof h=="number")return String(h);if(!h||typeof h=="boolean")return "";if(Array.isArray(h))return h.map(w).join("");throw c.isValidElement(h)?new Error("TextMorph only accepts text content. Found a React element \u2014 use strings, numbers, or expressions instead."):new Error(`TextMorph received an unsupported child of type "${typeof h}".`)}var R=({children:h,className:t,style:s,as:o=A,...i})=>{let{ref:a,update:l}=S(i),p=w(h),d=c.useRef({__html:p});return c.useEffect(()=>{l(p);},[p,l]),c.createElement(o,{ref:a,className:t,style:s,dangerouslySetInnerHTML:d.current})};function S(h){let t=c.useRef(null),s=c.useRef(null);c.useEffect(()=>(t.current&&(s.current=new b({element:t.current,...h})),()=>{s.current?.destroy();}),[]);let o=c.useCallback(i=>{s.current?.update(i);},[]);return {ref:t,update:o}}export{R as TextMorph,S as useTextMorph};//# sourceMappingURL=index.mjs.map
|
|
3
25
|
//# sourceMappingURL=index.mjs.map
|
package/dist/react/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/react/TextMorph.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { TextMorph as Morph } from \"../lib/text-morph\";\nimport type { TextMorphOptions } from \"../lib/text-morph/types\";\n\nexport type TextMorphProps = Omit<TextMorphOptions, \"element\"> & {\n children: string; //React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n as?: keyof JSX.IntrinsicElements;\n};\n\nexport const TextMorph = ({\n children,\n className,\n style,\n as = \"div\",\n ...props\n}: TextMorphProps) => {\n const { ref, update } = useTextMorph(props);\n\n React.useEffect(() => {\n update(children);\n }, [children, update]);\n\n const Component = as as any;\n return <Component ref={ref} className={className} style={style} />;\n};\n\nexport function useTextMorph(props: Omit<TextMorphOptions, \"element\">) {\n const ref = React.useRef<HTMLDivElement | null>(null);\n const morphRef = React.useRef<Morph | null>(null);\n\n React.useEffect(() => {\n if (ref.current) {\n morphRef.current = new Morph({ element: ref.current, ...props });\n }\n\n return () => {\n morphRef.current?.destroy();\n };\n }, []);\n\n const update = (text: string) => {\n morphRef.current?.update(text);\n };\n\n return { ref, update };\n}\n"],"mappings":";0CAEA,OAAOA,MAAW,QAWX,IAAMC,EAAY,CAAC,CACxB,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,GAAAC,EAAK,MACL,GAAGC,CACL,IAAsB,CACpB,GAAM,CAAE,IAAAC,EAAK,OAAAC,CAAO,EAAIC,EAAaH,CAAK,EAE1C,OAAAI,EAAM,UAAU,IAAM,CACpBF,EAAON,CAAQ,CACjB,EAAG,CAACA,EAAUM,CAAM,CAAC,EAGdE,EAAA,cADWL,EACV,CAAU,IAAKE,EAAK,UAAWJ,EAAW,MAAOC,EAAO,CAClE,EAEO,SAASK,EAAaH,EAA0C,CACrE,IAAMC,EAAMG,EAAM,OAA8B,IAAI,EAC9CC,EAAWD,EAAM,OAAqB,IAAI,EAEhD,OAAAA,EAAM,UAAU,KACVH,EAAI,UACNI,EAAS,QAAU,IAAIV,EAAM,CAAE,QAASM,EAAI,QAAS,GAAGD,CAAM,CAAC,GAG1D,IAAM,CACXK,EAAS,SAAS,QAAQ,CAC5B,GACC,CAAC,CAAC,EAME,CAAE,IAAAJ,EAAK,OAJEK,GAAiB,CAC/BD,EAAS,SAAS,OAAOC,CAAI,CAC/B,CAEqB,CACvB","names":["React","TextMorph","children","className","style","as","props","ref","update","useTextMorph","React","morphRef","text"]}
|
|
1
|
+
{"version":3,"sources":["../../src/lib/text-morph/index.ts","../../src/react/TextMorph.tsx"],"names":["DEFAULT_AS","DEFAULT_TEXT_MORPH_OPTIONS","TextMorph","_TextMorph","options","anim","event","value","element","oldWidth","oldHeight","byWord","blocks","iterator","oldChildren","newIds","b","exiting","child","exitingSet","exitingAnchorId","i","anchor","j","siblingId","exitPositions","a","pos","id","node","block","span","anchorId","dx","dy","anchorPrev","anchorCurr","animation","newWidth","newHeight","children","measures","index","key","persistentIds","prev","current","cx","cy","deltaX","deltaY","isNew","blockIndex","duration","delay","style","acc","string","x","segments","segment","args","childrenToString","React","className","as","props","ref","update","useTextMorph","text","initialHTML","morphRef"],"mappings":"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","file":"index.mjs","sourcesContent":["import type { TextMorphOptions } from \"./types\";\n\nexport type { TextMorphOptions } from \"./types\";\n\nexport const DEFAULT_AS = \"span\";\nexport const DEFAULT_TEXT_MORPH_OPTIONS = {\n debug: false,\n locale: \"en\",\n duration: 400,\n scale: true,\n ease: \"cubic-bezier(0.19, 1, 0.22, 1)\",\n disabled: false,\n respectReducedMotion: true,\n} as const satisfies Omit<TextMorphOptions, \"element\">;\n\ntype Block = {\n id: string;\n string: string;\n};\ntype Measures = {\n [key: string]: { x: number; y: number };\n};\n\nexport class TextMorph {\n private element: HTMLElement;\n private options: Omit<TextMorphOptions, \"element\"> = {};\n\n private data: HTMLElement | string;\n\n private currentMeasures: Measures = {};\n private prevMeasures: Measures = {};\n private isInitialRender = true;\n private prefersReducedMotion = false;\n private mediaQuery?: MediaQueryList;\n\n static styleEl: HTMLStyleElement;\n\n constructor(options: TextMorphOptions) {\n this.options = {\n ...DEFAULT_TEXT_MORPH_OPTIONS,\n ...options,\n };\n\n this.element = options.element;\n\n // reduced motion detection\n if (typeof window !== \"undefined\" && this.options.respectReducedMotion) {\n this.mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n this.prefersReducedMotion = this.mediaQuery.matches;\n this.mediaQuery.addEventListener(\"change\", this.handleMediaQueryChange);\n }\n\n if (!this.isDisabled()) {\n this.element.setAttribute(\"torph-root\", \"\");\n this.element.style.transitionDuration = `${this.options.duration}ms`;\n this.element.style.transitionTimingFunction = this.options.ease!;\n\n if (options.debug) this.element.setAttribute(\"torph-debug\", \"\");\n }\n\n this.data = \"\";\n if (!this.isDisabled()) {\n this.addStyles();\n }\n }\n\n destroy() {\n if (this.mediaQuery) {\n this.mediaQuery.removeEventListener(\n \"change\",\n this.handleMediaQueryChange,\n );\n }\n this.element.getAnimations().forEach((anim) => anim.cancel());\n this.element.removeAttribute(\"torph-root\");\n this.element.removeAttribute(\"torph-debug\");\n this.removeStyles();\n }\n\n private handleMediaQueryChange = (event: MediaQueryListEvent) => {\n this.prefersReducedMotion = event.matches;\n };\n\n private isDisabled(): boolean {\n return Boolean(\n this.options.disabled ||\n (this.options.respectReducedMotion && this.prefersReducedMotion),\n );\n }\n\n update(value: HTMLElement | string) {\n if (value === this.data) return;\n this.data = value;\n\n if (this.isDisabled()) {\n if (typeof value === \"string\") {\n this.element.textContent = value;\n }\n return;\n }\n\n if (this.data instanceof HTMLElement) {\n // TODO: handle HTMLElement case\n throw new Error(\"HTMLElement not yet supported\");\n } else {\n if (this.options.onAnimationStart && !this.isInitialRender) {\n this.options.onAnimationStart();\n }\n this.createTextGroup(this.data, this.element);\n }\n }\n\n private createTextGroup(value: string, element: HTMLElement) {\n const oldWidth = element.offsetWidth;\n const oldHeight = element.offsetHeight;\n\n const byWord = value.includes(\" \");\n let blocks: Block[];\n\n if (typeof Intl.Segmenter !== \"undefined\") {\n const segmenter = new Intl.Segmenter(this.options.locale, {\n granularity: byWord ? \"word\" : \"grapheme\",\n });\n const iterator = segmenter.segment(value)[Symbol.iterator]();\n blocks = this.blocks(iterator);\n } else {\n // Fallback for browsers without Intl.Segmenter\n blocks = this.blocksFallback(value, byWord);\n }\n\n this.prevMeasures = this.measure();\n const oldChildren = Array.from(element.children) as HTMLElement[];\n const newIds = new Set(blocks.map((b) => b.id));\n\n const exiting = oldChildren.filter(\n (child) =>\n !newIds.has(child.getAttribute(\"torph-id\") as string) &&\n !child.hasAttribute(\"torph-exiting\"),\n );\n\n // For each exiting char, find the nearest persistent neighbor in old order\n // so we can make it follow that neighbor's FLIP movement\n const exitingSet = new Set(exiting);\n const exitingAnchorId = new Map<HTMLElement, string | null>();\n for (let i = 0; i < oldChildren.length; i++) {\n const child = oldChildren[i]!;\n if (!exitingSet.has(child)) continue;\n\n // Look forward for nearest persistent char\n let anchor: string | null = null;\n for (let j = i + 1; j < oldChildren.length; j++) {\n const siblingId = oldChildren[j]!.getAttribute(\"torph-id\") as string;\n if (newIds.has(siblingId) && !exitingSet.has(oldChildren[j]!)) {\n anchor = siblingId;\n break;\n }\n }\n // If none forward, look backward\n if (!anchor) {\n for (let j = i - 1; j >= 0; j--) {\n const siblingId = oldChildren[j]!.getAttribute(\"torph-id\") as string;\n if (newIds.has(siblingId) && !exitingSet.has(oldChildren[j]!)) {\n anchor = siblingId;\n break;\n }\n }\n }\n exitingAnchorId.set(child, anchor);\n }\n\n // Two-pass: read all positions before modifying any element,\n // since setting position:absolute removes from flow and shifts siblings\n const exitPositions = exiting.map((child) => {\n child.getAnimations().forEach((a) => a.cancel());\n return {\n left: child.offsetLeft,\n top: child.offsetTop,\n width: child.offsetWidth,\n height: child.offsetHeight,\n };\n });\n exiting.forEach((child, i) => {\n const pos = exitPositions[i]!;\n child.setAttribute(\"torph-exiting\", \"\");\n child.style.position = \"absolute\";\n child.style.pointerEvents = \"none\";\n child.style.left = `${pos.left}px`;\n child.style.top = `${pos.top}px`;\n child.style.width = `${pos.width}px`;\n child.style.height = `${pos.height}px`;\n });\n\n oldChildren.forEach((child) => {\n const id = child.getAttribute(\"torph-id\") as string;\n if (newIds.has(id)) child.remove();\n });\n\n // Disabled-mode updates set plain text via textContent; remove that text node\n // before appending torph items so old content is not duplicated.\n Array.from(element.childNodes).forEach((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n node.remove();\n }\n });\n\n blocks.forEach((block) => {\n const span = document.createElement(\"span\");\n span.setAttribute(\"torph-item\", \"\");\n span.setAttribute(\"torph-id\", block.id);\n span.textContent = block.string;\n element.appendChild(span);\n });\n\n this.currentMeasures = this.measure();\n this.updateStyles(blocks);\n\n exiting.forEach((child) => {\n if (this.isInitialRender) {\n child.remove();\n return;\n }\n\n // Find the anchor neighbor's FLIP delta so we move in sync with it\n const anchorId = exitingAnchorId.get(child);\n let dx = 0;\n let dy = 0;\n\n if (\n anchorId &&\n this.prevMeasures[anchorId] &&\n this.currentMeasures[anchorId]\n ) {\n const anchorPrev = this.prevMeasures[anchorId]!;\n const anchorCurr = this.currentMeasures[anchorId]!;\n dx = anchorCurr.x - anchorPrev.x;\n dy = anchorCurr.y - anchorPrev.y;\n }\n\n child.animate(\n {\n transform: this.options.scale\n ? `translate(${dx}px, ${dy}px) scale(0.95)`\n : `translate(${dx}px, ${dy}px)`,\n offset: 1,\n },\n {\n duration: this.options.duration,\n easing: this.options.ease,\n fill: \"both\",\n },\n );\n const animation: Animation = child.animate(\n {\n opacity: 0,\n offset: 1,\n },\n {\n duration: this.options.duration! * 0.25,\n easing: \"linear\",\n fill: \"both\",\n },\n );\n animation.onfinish = () => child.remove();\n });\n\n if (this.isInitialRender) {\n this.isInitialRender = false;\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n return;\n }\n\n if (oldWidth === 0 || oldHeight === 0) return;\n\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n void element.offsetWidth; // force reflow\n\n const newWidth = element.offsetWidth;\n const newHeight = element.offsetHeight;\n\n element.style.width = `${oldWidth}px`;\n element.style.height = `${oldHeight}px`;\n void element.offsetWidth; // force reflow\n\n element.style.width = `${newWidth}px`;\n element.style.height = `${newHeight}px`;\n\n // TODO: move to `transitionend` event listener\n setTimeout(() => {\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n if (this.options.onAnimationComplete) {\n this.options.onAnimationComplete();\n }\n }, this.options.duration);\n }\n\n private measure() {\n const children = Array.from(this.element.children) as HTMLElement[];\n const measures: Measures = {};\n\n children.forEach((child, index) => {\n if (child.hasAttribute(\"torph-exiting\")) return;\n const key = child.getAttribute(\"torph-id\") || `child-${index}`;\n measures[key] = {\n x: child.offsetLeft,\n y: child.offsetTop,\n };\n });\n\n return measures;\n }\n\n private updateStyles(blocks: Block[]) {\n if (this.isInitialRender) return;\n\n const children = Array.from(this.element.children) as HTMLElement[];\n\n const persistentIds = new Set(\n blocks.map((b) => b.id).filter((id) => this.prevMeasures[id]),\n );\n\n children.forEach((child, index) => {\n if (child.hasAttribute(\"torph-exiting\")) return;\n const key = child.getAttribute(\"torph-id\") || `child-${index}`;\n const prev = this.prevMeasures[key];\n const current = this.currentMeasures[key];\n\n const cx = current?.x || 0;\n const cy = current?.y || 0;\n\n let deltaX = prev ? prev.x - cx : 0;\n let deltaY = prev ? prev.y - cy : 0;\n const isNew = !prev;\n\n // For new chars, use the nearest persistent neighbor's FLIP delta\n // so all new chars get the same consistent offset\n if (isNew) {\n const blockIndex = blocks.findIndex((b) => b.id === key);\n let anchorId: string | null = null;\n\n for (let j = blockIndex - 1; j >= 0; j--) {\n if (persistentIds.has(blocks[j]!.id)) {\n anchorId = blocks[j]!.id;\n break;\n }\n }\n if (!anchorId) {\n for (let j = blockIndex + 1; j < blocks.length; j++) {\n if (persistentIds.has(blocks[j]!.id)) {\n anchorId = blocks[j]!.id;\n break;\n }\n }\n }\n\n if (anchorId) {\n const anchorPrev = this.prevMeasures[anchorId]!;\n const anchorCurr = this.currentMeasures[anchorId]!;\n deltaX = anchorPrev.x - anchorCurr.x;\n deltaY = anchorPrev.y - anchorCurr.y;\n }\n }\n\n child.getAnimations().forEach((a) => a.cancel());\n child.animate(\n {\n transform: `translate(${deltaX}px, ${deltaY}px) scale(${isNew ? 0.95 : 1})`,\n offset: 0,\n },\n {\n duration: this.options.duration,\n easing: this.options.ease,\n fill: \"both\",\n },\n );\n const duration = isNew ? this.options.duration! * 0.25 : 0;\n const delay = isNew ? this.options.duration! * 0.25 : 0;\n child.animate(\n {\n opacity: isNew ? 0 : 1,\n offset: 0,\n },\n {\n duration: duration,\n delay: delay,\n easing: \"linear\",\n fill: \"both\",\n },\n );\n });\n }\n\n private addStyles() {\n if (TextMorph.styleEl) return;\n\n const style = document.createElement(\"style\");\n style.dataset.torph = \"true\";\n style.innerHTML = `\n[torph-root] {\n display: inline-flex;\n position: relative;\n will-change: width, height;\n transition-property: width, height;\n white-space: nowrap;\n}\n\n[torph-item] {\n display: inline-block;\n will-change: opacity, transform;\n transform: none;\n opacity: 1;\n}\n\n[torph-root][torph-debug] {\n outline:2px solid magenta;\n [torph-item] {\n outline:2px solid cyan;\n outline-offset: -4px;\n }\n}\n `;\n document.head.appendChild(style);\n TextMorph.styleEl = style;\n }\n\n private removeStyles() {\n if (TextMorph.styleEl) {\n TextMorph.styleEl.remove();\n TextMorph.styleEl = undefined!;\n }\n }\n\n // utils\n\n private blocks(iterator: Intl.SegmentIterator<Intl.SegmentData>) {\n const uniqueStrings: Block[] = Array.from(iterator).reduce(\n (acc, string) => {\n if (string.segment === \" \") {\n return [...acc, { id: `space-${string.index}`, string: \"\\u00A0\" }];\n }\n\n const existingString = acc.find((x) => x.string === string.segment);\n if (existingString) {\n return [\n ...acc,\n { id: `${string.segment}-${string.index}`, string: string.segment },\n ];\n }\n\n return [\n ...acc,\n {\n id: string.segment,\n string: string.segment,\n },\n ];\n },\n [] as Block[],\n );\n\n return uniqueStrings;\n }\n\n private blocksFallback(value: string, byWord: boolean): Block[] {\n const segments = byWord ? value.split(\" \") : value.split(\"\");\n const blocks: Block[] = [];\n\n if (byWord) {\n segments.forEach((segment, index) => {\n if (index > 0) {\n blocks.push({ id: `space-${index}`, string: \"\\u00A0\" });\n }\n const existing = blocks.find((x) => x.string === segment);\n if (existing) {\n blocks.push({ id: `${segment}-${index}`, string: segment });\n } else {\n blocks.push({ id: segment, string: segment });\n }\n });\n } else {\n segments.forEach((segment, index) => {\n const existing = blocks.find((x) => x.string === segment);\n if (existing) {\n blocks.push({ id: `${segment}-${index}`, string: segment });\n } else {\n blocks.push({ id: segment, string: segment });\n }\n });\n }\n\n return blocks;\n }\n\n private log(...args: any[]) {\n if (this.options.debug) console.log(\"[TextMorph]\", ...args);\n }\n}\n","\"use client\";\n\nimport React from \"react\";\nimport { DEFAULT_AS, TextMorph as Morph } from \"../lib/text-morph\";\nimport type { TextMorphOptions } from \"../lib/text-morph/types\";\n\nexport type TextMorphProps = Omit<TextMorphOptions, \"element\"> & {\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n as?: React.ElementType;\n};\n\nfunction childrenToString(node: React.ReactNode): string {\n if (typeof node === \"string\") return node;\n if (typeof node === \"number\") return String(node);\n if (!node || typeof node === \"boolean\") return \"\";\n if (Array.isArray(node)) return node.map(childrenToString).join(\"\");\n if (React.isValidElement(node)) {\n throw new Error(\n \"TextMorph only accepts text content. Found a React element — use strings, numbers, or expressions instead.\"\n );\n }\n throw new Error(\n `TextMorph received an unsupported child of type \"${typeof node}\".`\n );\n}\n\nexport const TextMorph = ({\n children,\n className,\n style,\n as = DEFAULT_AS,\n ...props\n}: TextMorphProps) => {\n const { ref, update } = useTextMorph(props);\n const text = childrenToString(children);\n const initialHTML = React.useRef({ __html: text });\n\n React.useEffect(() => {\n update(text);\n }, [text, update]);\n\n const Component = as;\n\n return (\n <Component\n ref={ref}\n className={className}\n style={style}\n dangerouslySetInnerHTML={initialHTML.current}\n />\n );\n};\n\nexport function useTextMorph(props: Omit<TextMorphOptions, \"element\">) {\n const ref = React.useRef<HTMLDivElement | null>(null);\n const morphRef = React.useRef<Morph | null>(null);\n\n React.useEffect(() => {\n if (ref.current) {\n morphRef.current = new Morph({ element: ref.current, ...props });\n }\n\n return () => {\n morphRef.current?.destroy();\n };\n }, []);\n\n const update = React.useCallback((text: string) => {\n morphRef.current?.update(text);\n }, []);\n\n return { ref, update };\n}\n"]}
|
package/dist/svelte/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';require('svelte/internal/disclose-version');var e=require('svelte/internal/client'),svelte=require('svelte'),textMorph=require('../lib/text-morph');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var e__namespace=/*#__PURE__*/_interopNamespace(e);function d(l,t){e__namespace.push(t,true);let s=e__namespace.prop(t,"locale",19,()=>textMorph.DEFAULT_TEXT_MORPH_OPTIONS.locale),p=e__namespace.prop(t,"duration",19,()=>textMorph.DEFAULT_TEXT_MORPH_OPTIONS.duration),c=e__namespace.prop(t,"ease",19,()=>textMorph.DEFAULT_TEXT_MORPH_OPTIONS.ease),u=e__namespace.prop(t,"scale",19,()=>textMorph.DEFAULT_TEXT_MORPH_OPTIONS.scale),m=e__namespace.prop(t,"debug",19,()=>textMorph.DEFAULT_TEXT_MORPH_OPTIONS.debug),f=e__namespace.prop(t,"disabled",19,()=>textMorph.DEFAULT_TEXT_MORPH_OPTIONS.disabled),g=e__namespace.prop(t,"respectReducedMotion",19,()=>textMorph.DEFAULT_TEXT_MORPH_OPTIONS.respectReducedMotion),b=e__namespace.prop(t,"onAnimationStart",19,()=>{}),M=e__namespace.prop(t,"onAnimationComplete",19,()=>{}),$=e__namespace.prop(t,"as",3,textMorph.DEFAULT_AS),A=e__namespace.rest_props(t,["$$slots","$$events","$$legacy","text","locale","duration","ease","scale","debug","disabled","respectReducedMotion","onAnimationStart","onAnimationComplete","as"]),n=e__namespace.state(void 0),a=e__namespace.state(null);svelte.onMount(()=>(e__namespace.get(n)&&(e__namespace.set(a,new textMorph.TextMorph({element:e__namespace.get(n),locale:s(),duration:p(),ease:c(),debug:m(),scale:u(),disabled:f(),respectReducedMotion:g(),onAnimationStart:b(),onAnimationComplete:M()}),true),e__namespace.get(a).update(t.text)),()=>{e__namespace.get(a)?.destroy();})),e__namespace.user_effect(()=>{e__namespace.get(a)&&e__namespace.get(a).update(t.text);});var i=e__namespace.comment(),h=e__namespace.first_child(i);e__namespace.element(h,$,false,(r,v)=>{e__namespace.bind_this(r,x=>e__namespace.set(n,x,true),()=>e__namespace.get(n)),e__namespace.attribute_effect(r,()=>({...A}));}),e__namespace.append(l,i),e__namespace.pop();}exports.TextMorph=d;//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/svelte/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/svelte/index.ts","../../src/svelte/TextMorph.svelte"],"sourcesContent":["export { default as TextMorph } from \"./TextMorph.svelte\";\nexport type { TextMorphProps } from \"./types\";\n\n","/* src/svelte/TextMorph.svelte generated by Svelte v4.2.20 */\nimport {\n\tSvelteComponent,\n\tassign,\n\tbinding_callbacks,\n\tdetach,\n\telement,\n\tempty,\n\tget_spread_update,\n\tinit,\n\tinsert,\n\tnoop,\n\tsafe_not_equal,\n\tset_dynamic_element_data\n} from \"svelte/internal\";\n\nimport \"svelte/internal/disclose-version\";\nimport { onMount, onDestroy } from \"svelte\";\nimport { TextMorph as Morph } from \"../lib/text-morph\";\n\nfunction create_dynamic_element(ctx) {\n\tlet svelte_element;\n\tlet svelte_element_levels = [{ class: /*className*/ ctx[0] }, { style: /*style*/ ctx[1] }];\n\tlet svelte_element_data = {};\n\n\tfor (let i = 0; i < svelte_element_levels.length; i += 1) {\n\t\tsvelte_element_data = assign(svelte_element_data, svelte_element_levels[i]);\n\t}\n\n\treturn {\n\t\tc() {\n\t\t\tsvelte_element = element(/*as*/ ctx[2]);\n\t\t\tset_dynamic_element_data(/*as*/ ctx[2])(svelte_element, svelte_element_data);\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, svelte_element, anchor);\n\t\t\t/*svelte_element_binding*/ ctx[14](svelte_element);\n\t\t},\n\t\tp(ctx, dirty) {\n\t\t\tset_dynamic_element_data(/*as*/ ctx[2])(svelte_element, svelte_element_data = get_spread_update(svelte_element_levels, [\n\t\t\t\tdirty & /*className*/ 1 && { class: /*className*/ ctx[0] },\n\t\t\t\tdirty & /*style*/ 2 && { style: /*style*/ ctx[1] }\n\t\t\t]));\n\t\t},\n\t\td(detaching) {\n\t\t\tif (detaching) {\n\t\t\t\tdetach(svelte_element);\n\t\t\t}\n\n\t\t\t/*svelte_element_binding*/ ctx[14](null);\n\t\t}\n\t};\n}\n\nfunction create_fragment(ctx) {\n\tlet previous_tag = /*as*/ ctx[2];\n\tlet svelte_element_anchor;\n\tlet svelte_element = /*as*/ ctx[2] && create_dynamic_element(ctx);\n\n\treturn {\n\t\tc() {\n\t\t\tif (svelte_element) svelte_element.c();\n\t\t\tsvelte_element_anchor = empty();\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tif (svelte_element) svelte_element.m(target, anchor);\n\t\t\tinsert(target, svelte_element_anchor, anchor);\n\t\t},\n\t\tp(ctx, [dirty]) {\n\t\t\tif (/*as*/ ctx[2]) {\n\t\t\t\tif (!previous_tag) {\n\t\t\t\t\tsvelte_element = create_dynamic_element(ctx);\n\t\t\t\t\tprevious_tag = /*as*/ ctx[2];\n\t\t\t\t\tsvelte_element.c();\n\t\t\t\t\tsvelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor);\n\t\t\t\t} else if (safe_not_equal(previous_tag, /*as*/ ctx[2])) {\n\t\t\t\t\tsvelte_element.d(1);\n\t\t\t\t\tsvelte_element = create_dynamic_element(ctx);\n\t\t\t\t\tprevious_tag = /*as*/ ctx[2];\n\t\t\t\t\tsvelte_element.c();\n\t\t\t\t\tsvelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor);\n\t\t\t\t} else {\n\t\t\t\t\tsvelte_element.p(ctx, dirty);\n\t\t\t\t}\n\t\t\t} else if (previous_tag) {\n\t\t\t\tsvelte_element.d(1);\n\t\t\t\tsvelte_element = null;\n\t\t\t\tprevious_tag = /*as*/ ctx[2];\n\t\t\t}\n\t\t},\n\t\ti: noop,\n\t\to: noop,\n\t\td(detaching) {\n\t\t\tif (detaching) {\n\t\t\t\tdetach(svelte_element_anchor);\n\t\t\t}\n\n\t\t\tif (svelte_element) svelte_element.d(detaching);\n\t\t}\n\t};\n}\n\nfunction instance($$self, $$props, $$invalidate) {\n\tlet { text } = $$props;\n\tlet { locale = \"en\" } = $$props;\n\tlet { duration = 400 } = $$props;\n\tlet { ease = \"cubic-bezier(0.19, 1, 0.22, 1)\" } = $$props;\n\tlet { debug = false } = $$props;\n\tlet { disabled = false } = $$props;\n\tlet { respectReducedMotion = true } = $$props;\n\tlet { onAnimationStart = void 0 } = $$props;\n\tlet { onAnimationComplete = void 0 } = $$props;\n\tlet { class: className = \"\" } = $$props;\n\tlet { style = \"\" } = $$props;\n\tlet { as = \"div\" } = $$props;\n\tlet containerRef;\n\tlet morphInstance = null;\n\n\tonMount(() => {\n\t\tif (containerRef) {\n\t\t\t$$invalidate(13, morphInstance = new Morph({\n\t\t\t\t\telement: containerRef,\n\t\t\t\t\tlocale,\n\t\t\t\t\tduration,\n\t\t\t\t\tease,\n\t\t\t\t\tdebug,\n\t\t\t\t\tdisabled,\n\t\t\t\t\trespectReducedMotion,\n\t\t\t\t\tonAnimationStart,\n\t\t\t\t\tonAnimationComplete\n\t\t\t\t}));\n\n\t\t\tmorphInstance.update(text);\n\t\t}\n\t});\n\n\tonDestroy(() => {\n\t\tmorphInstance?.destroy();\n\t});\n\n\tfunction svelte_element_binding($$value) {\n\t\tbinding_callbacks[$$value ? 'unshift' : 'push'](() => {\n\t\t\tcontainerRef = $$value;\n\t\t\t$$invalidate(3, containerRef);\n\t\t});\n\t}\n\n\t$$self.$$set = $$props => {\n\t\tif ('text' in $$props) $$invalidate(4, text = $$props.text);\n\t\tif ('locale' in $$props) $$invalidate(5, locale = $$props.locale);\n\t\tif ('duration' in $$props) $$invalidate(6, duration = $$props.duration);\n\t\tif ('ease' in $$props) $$invalidate(7, ease = $$props.ease);\n\t\tif ('debug' in $$props) $$invalidate(8, debug = $$props.debug);\n\t\tif ('disabled' in $$props) $$invalidate(9, disabled = $$props.disabled);\n\t\tif ('respectReducedMotion' in $$props) $$invalidate(10, respectReducedMotion = $$props.respectReducedMotion);\n\t\tif ('onAnimationStart' in $$props) $$invalidate(11, onAnimationStart = $$props.onAnimationStart);\n\t\tif ('onAnimationComplete' in $$props) $$invalidate(12, onAnimationComplete = $$props.onAnimationComplete);\n\t\tif ('class' in $$props) $$invalidate(0, className = $$props.class);\n\t\tif ('style' in $$props) $$invalidate(1, style = $$props.style);\n\t\tif ('as' in $$props) $$invalidate(2, as = $$props.as);\n\t};\n\n\t$$self.$$.update = () => {\n\t\tif ($$self.$$.dirty & /*morphInstance, text*/ 8208) {\n\t\t\t$: if (morphInstance) {\n\t\t\t\tmorphInstance.update(text);\n\t\t\t}\n\t\t}\n\t};\n\n\treturn [\n\t\tclassName,\n\t\tstyle,\n\t\tas,\n\t\tcontainerRef,\n\t\ttext,\n\t\tlocale,\n\t\tduration,\n\t\tease,\n\t\tdebug,\n\t\tdisabled,\n\t\trespectReducedMotion,\n\t\tonAnimationStart,\n\t\tonAnimationComplete,\n\t\tmorphInstance,\n\t\tsvelte_element_binding\n\t];\n}\n\nclass TextMorph extends SvelteComponent {\n\tconstructor(options) {\n\t\tsuper();\n\n\t\tinit(this, options, instance, create_fragment, safe_not_equal, {\n\t\t\ttext: 4,\n\t\t\tlocale: 5,\n\t\t\tduration: 6,\n\t\t\tease: 7,\n\t\t\tdebug: 8,\n\t\t\tdisabled: 9,\n\t\t\trespectReducedMotion: 10,\n\t\t\tonAnimationStart: 11,\n\t\t\tonAnimationComplete: 12,\n\t\t\tclass: 0,\n\t\t\tstyle: 1,\n\t\t\tas: 2\n\t\t});\n\t}\n}\n\nexport default TextMorph;"],"mappings":"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","names":["svelte_exports","__export","TextMorph_default","__toCommonJS","import_internal","import_disclose_version","import_svelte","import_text_morph","create_dynamic_element","ctx","svelte_element","svelte_element_levels","svelte_element_data","i","target","anchor","dirty","detaching","create_fragment","previous_tag","svelte_element_anchor","instance","$$self","$$props","$$invalidate","text","locale","duration","ease","debug","disabled","respectReducedMotion","onAnimationStart","onAnimationComplete","className","style","as","containerRef","morphInstance","Morph","svelte_element_binding","$$value","TextMorph","options","TextMorph_default"]}
|
|
1
|
+
{"version":3,"sources":["../../src/svelte/TextMorph.svelte"],"names":["TextMorph","$$anchor","$$props","e","locale","DEFAULT_TEXT_MORPH_OPTIONS","duration","ease","scale","debug","disabled","respectReducedMotion","onAnimationStart","onAnimationComplete","as","DEFAULT_AS","props","containerRef","morphInstance","onMount","Morph","fragment","node","$$element","$$value"],"mappings":"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","file":"index.js","sourcesContent":["import 'svelte/internal/disclose-version';\nimport * as $ from 'svelte/internal/client';\nimport { onMount } from \"svelte\";\nimport { DEFAULT_AS, DEFAULT_TEXT_MORPH_OPTIONS, TextMorph as Morph } from \"../lib/text-morph\";\n\nexport default function TextMorph($$anchor, $$props) {\n\t$.push($$props, true);\n\n\tlet locale = $.prop($$props, 'locale', 19, () => DEFAULT_TEXT_MORPH_OPTIONS.locale),\n\t\tduration = $.prop($$props, 'duration', 19, () => DEFAULT_TEXT_MORPH_OPTIONS.duration),\n\t\tease = $.prop($$props, 'ease', 19, () => DEFAULT_TEXT_MORPH_OPTIONS.ease),\n\t\tscale = $.prop($$props, 'scale', 19, () => DEFAULT_TEXT_MORPH_OPTIONS.scale),\n\t\tdebug = $.prop($$props, 'debug', 19, () => DEFAULT_TEXT_MORPH_OPTIONS.debug),\n\t\tdisabled = $.prop($$props, 'disabled', 19, () => DEFAULT_TEXT_MORPH_OPTIONS.disabled),\n\t\trespectReducedMotion = $.prop($$props, 'respectReducedMotion', 19, () => DEFAULT_TEXT_MORPH_OPTIONS.respectReducedMotion),\n\t\tonAnimationStart = $.prop($$props, 'onAnimationStart', 19, () => void 0),\n\t\tonAnimationComplete = $.prop($$props, 'onAnimationComplete', 19, () => void 0),\n\t\tas = $.prop($$props, 'as', 3, DEFAULT_AS),\n\t\tprops = $.rest_props($$props, [\n\t\t\t'$$slots',\n\t\t\t'$$events',\n\t\t\t'$$legacy',\n\t\t\t'text',\n\t\t\t'locale',\n\t\t\t'duration',\n\t\t\t'ease',\n\t\t\t'scale',\n\t\t\t'debug',\n\t\t\t'disabled',\n\t\t\t'respectReducedMotion',\n\t\t\t'onAnimationStart',\n\t\t\t'onAnimationComplete',\n\t\t\t'as'\n\t\t]);\n\n\tlet containerRef = $.state(void 0);\n\tlet morphInstance = $.state(null);\n\n\tonMount(() => {\n\t\tif ($.get(containerRef)) {\n\t\t\t$.set(\n\t\t\t\tmorphInstance,\n\t\t\t\tnew Morph({\n\t\t\t\t\telement: $.get(containerRef),\n\t\t\t\t\tlocale: locale(),\n\t\t\t\t\tduration: duration(),\n\t\t\t\t\tease: ease(),\n\t\t\t\t\tdebug: debug(),\n\t\t\t\t\tscale: scale(),\n\t\t\t\t\tdisabled: disabled(),\n\t\t\t\t\trespectReducedMotion: respectReducedMotion(),\n\t\t\t\t\tonAnimationStart: onAnimationStart(),\n\t\t\t\t\tonAnimationComplete: onAnimationComplete()\n\t\t\t\t}),\n\t\t\t\ttrue\n\t\t\t);\n\n\t\t\t$.get(morphInstance).update($$props.text);\n\t\t}\n\n\t\treturn () => {\n\t\t\t$.get(morphInstance)?.destroy();\n\t\t};\n\t});\n\n\t$.user_effect(() => {\n\t\tif ($.get(morphInstance)) {\n\t\t\t$.get(morphInstance).update($$props.text);\n\t\t}\n\t});\n\n\tvar fragment = $.comment();\n\tvar node = $.first_child(fragment);\n\n\t$.element(node, as, false, ($$element, $$anchor) => {\n\t\t$.bind_this($$element, ($$value) => $.set(containerRef, $$value, true), () => $.get(containerRef));\n\t\t$.attribute_effect($$element, () => ({ ...props }));\n\t});\n\n\t$.append($$anchor, fragment);\n\t$.pop();\n}"]}
|
package/dist/svelte/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import'svelte/internal/disclose-version';import*as e from'svelte/internal/client';import {onMount}from'svelte';import {DEFAULT_TEXT_MORPH_OPTIONS,DEFAULT_AS,TextMorph}from'../lib/text-morph';function d(l,t){e.push(t,true);let s=e.prop(t,"locale",19,()=>DEFAULT_TEXT_MORPH_OPTIONS.locale),p=e.prop(t,"duration",19,()=>DEFAULT_TEXT_MORPH_OPTIONS.duration),c=e.prop(t,"ease",19,()=>DEFAULT_TEXT_MORPH_OPTIONS.ease),u=e.prop(t,"scale",19,()=>DEFAULT_TEXT_MORPH_OPTIONS.scale),m=e.prop(t,"debug",19,()=>DEFAULT_TEXT_MORPH_OPTIONS.debug),f=e.prop(t,"disabled",19,()=>DEFAULT_TEXT_MORPH_OPTIONS.disabled),g=e.prop(t,"respectReducedMotion",19,()=>DEFAULT_TEXT_MORPH_OPTIONS.respectReducedMotion),b=e.prop(t,"onAnimationStart",19,()=>{}),M=e.prop(t,"onAnimationComplete",19,()=>{}),$=e.prop(t,"as",3,DEFAULT_AS),A=e.rest_props(t,["$$slots","$$events","$$legacy","text","locale","duration","ease","scale","debug","disabled","respectReducedMotion","onAnimationStart","onAnimationComplete","as"]),n=e.state(void 0),a=e.state(null);onMount(()=>(e.get(n)&&(e.set(a,new TextMorph({element:e.get(n),locale:s(),duration:p(),ease:c(),debug:m(),scale:u(),disabled:f(),respectReducedMotion:g(),onAnimationStart:b(),onAnimationComplete:M()}),true),e.get(a).update(t.text)),()=>{e.get(a)?.destroy();})),e.user_effect(()=>{e.get(a)&&e.get(a).update(t.text);});var i=e.comment(),h=e.first_child(i);e.element(h,$,false,(r,v)=>{e.bind_this(r,x=>e.set(n,x,true),()=>e.get(n)),e.attribute_effect(r,()=>({...A}));}),e.append(l,i),e.pop();}export{d as TextMorph};//# sourceMappingURL=index.mjs.map
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/svelte/TextMorph.svelte"],"sourcesContent":["/* src/svelte/TextMorph.svelte generated by Svelte v4.2.20 */\nimport {\n\tSvelteComponent,\n\tassign,\n\tbinding_callbacks,\n\tdetach,\n\telement,\n\tempty,\n\tget_spread_update,\n\tinit,\n\tinsert,\n\tnoop,\n\tsafe_not_equal,\n\tset_dynamic_element_data\n} from \"svelte/internal\";\n\nimport \"svelte/internal/disclose-version\";\nimport { onMount, onDestroy } from \"svelte\";\nimport { TextMorph as Morph } from \"../lib/text-morph\";\n\nfunction create_dynamic_element(ctx) {\n\tlet svelte_element;\n\tlet svelte_element_levels = [{ class: /*className*/ ctx[0] }, { style: /*style*/ ctx[1] }];\n\tlet svelte_element_data = {};\n\n\tfor (let i = 0; i < svelte_element_levels.length; i += 1) {\n\t\tsvelte_element_data = assign(svelte_element_data, svelte_element_levels[i]);\n\t}\n\n\treturn {\n\t\tc() {\n\t\t\tsvelte_element = element(/*as*/ ctx[2]);\n\t\t\tset_dynamic_element_data(/*as*/ ctx[2])(svelte_element, svelte_element_data);\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, svelte_element, anchor);\n\t\t\t/*svelte_element_binding*/ ctx[14](svelte_element);\n\t\t},\n\t\tp(ctx, dirty) {\n\t\t\tset_dynamic_element_data(/*as*/ ctx[2])(svelte_element, svelte_element_data = get_spread_update(svelte_element_levels, [\n\t\t\t\tdirty & /*className*/ 1 && { class: /*className*/ ctx[0] },\n\t\t\t\tdirty & /*style*/ 2 && { style: /*style*/ ctx[1] }\n\t\t\t]));\n\t\t},\n\t\td(detaching) {\n\t\t\tif (detaching) {\n\t\t\t\tdetach(svelte_element);\n\t\t\t}\n\n\t\t\t/*svelte_element_binding*/ ctx[14](null);\n\t\t}\n\t};\n}\n\nfunction create_fragment(ctx) {\n\tlet previous_tag = /*as*/ ctx[2];\n\tlet svelte_element_anchor;\n\tlet svelte_element = /*as*/ ctx[2] && create_dynamic_element(ctx);\n\n\treturn {\n\t\tc() {\n\t\t\tif (svelte_element) svelte_element.c();\n\t\t\tsvelte_element_anchor = empty();\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tif (svelte_element) svelte_element.m(target, anchor);\n\t\t\tinsert(target, svelte_element_anchor, anchor);\n\t\t},\n\t\tp(ctx, [dirty]) {\n\t\t\tif (/*as*/ ctx[2]) {\n\t\t\t\tif (!previous_tag) {\n\t\t\t\t\tsvelte_element = create_dynamic_element(ctx);\n\t\t\t\t\tprevious_tag = /*as*/ ctx[2];\n\t\t\t\t\tsvelte_element.c();\n\t\t\t\t\tsvelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor);\n\t\t\t\t} else if (safe_not_equal(previous_tag, /*as*/ ctx[2])) {\n\t\t\t\t\tsvelte_element.d(1);\n\t\t\t\t\tsvelte_element = create_dynamic_element(ctx);\n\t\t\t\t\tprevious_tag = /*as*/ ctx[2];\n\t\t\t\t\tsvelte_element.c();\n\t\t\t\t\tsvelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor);\n\t\t\t\t} else {\n\t\t\t\t\tsvelte_element.p(ctx, dirty);\n\t\t\t\t}\n\t\t\t} else if (previous_tag) {\n\t\t\t\tsvelte_element.d(1);\n\t\t\t\tsvelte_element = null;\n\t\t\t\tprevious_tag = /*as*/ ctx[2];\n\t\t\t}\n\t\t},\n\t\ti: noop,\n\t\to: noop,\n\t\td(detaching) {\n\t\t\tif (detaching) {\n\t\t\t\tdetach(svelte_element_anchor);\n\t\t\t}\n\n\t\t\tif (svelte_element) svelte_element.d(detaching);\n\t\t}\n\t};\n}\n\nfunction instance($$self, $$props, $$invalidate) {\n\tlet { text } = $$props;\n\tlet { locale = \"en\" } = $$props;\n\tlet { duration = 400 } = $$props;\n\tlet { ease = \"cubic-bezier(0.19, 1, 0.22, 1)\" } = $$props;\n\tlet { debug = false } = $$props;\n\tlet { disabled = false } = $$props;\n\tlet { respectReducedMotion = true } = $$props;\n\tlet { onAnimationStart = void 0 } = $$props;\n\tlet { onAnimationComplete = void 0 } = $$props;\n\tlet { class: className = \"\" } = $$props;\n\tlet { style = \"\" } = $$props;\n\tlet { as = \"div\" } = $$props;\n\tlet containerRef;\n\tlet morphInstance = null;\n\n\tonMount(() => {\n\t\tif (containerRef) {\n\t\t\t$$invalidate(13, morphInstance = new Morph({\n\t\t\t\t\telement: containerRef,\n\t\t\t\t\tlocale,\n\t\t\t\t\tduration,\n\t\t\t\t\tease,\n\t\t\t\t\tdebug,\n\t\t\t\t\tdisabled,\n\t\t\t\t\trespectReducedMotion,\n\t\t\t\t\tonAnimationStart,\n\t\t\t\t\tonAnimationComplete\n\t\t\t\t}));\n\n\t\t\tmorphInstance.update(text);\n\t\t}\n\t});\n\n\tonDestroy(() => {\n\t\tmorphInstance?.destroy();\n\t});\n\n\tfunction svelte_element_binding($$value) {\n\t\tbinding_callbacks[$$value ? 'unshift' : 'push'](() => {\n\t\t\tcontainerRef = $$value;\n\t\t\t$$invalidate(3, containerRef);\n\t\t});\n\t}\n\n\t$$self.$$set = $$props => {\n\t\tif ('text' in $$props) $$invalidate(4, text = $$props.text);\n\t\tif ('locale' in $$props) $$invalidate(5, locale = $$props.locale);\n\t\tif ('duration' in $$props) $$invalidate(6, duration = $$props.duration);\n\t\tif ('ease' in $$props) $$invalidate(7, ease = $$props.ease);\n\t\tif ('debug' in $$props) $$invalidate(8, debug = $$props.debug);\n\t\tif ('disabled' in $$props) $$invalidate(9, disabled = $$props.disabled);\n\t\tif ('respectReducedMotion' in $$props) $$invalidate(10, respectReducedMotion = $$props.respectReducedMotion);\n\t\tif ('onAnimationStart' in $$props) $$invalidate(11, onAnimationStart = $$props.onAnimationStart);\n\t\tif ('onAnimationComplete' in $$props) $$invalidate(12, onAnimationComplete = $$props.onAnimationComplete);\n\t\tif ('class' in $$props) $$invalidate(0, className = $$props.class);\n\t\tif ('style' in $$props) $$invalidate(1, style = $$props.style);\n\t\tif ('as' in $$props) $$invalidate(2, as = $$props.as);\n\t};\n\n\t$$self.$$.update = () => {\n\t\tif ($$self.$$.dirty & /*morphInstance, text*/ 8208) {\n\t\t\t$: if (morphInstance) {\n\t\t\t\tmorphInstance.update(text);\n\t\t\t}\n\t\t}\n\t};\n\n\treturn [\n\t\tclassName,\n\t\tstyle,\n\t\tas,\n\t\tcontainerRef,\n\t\ttext,\n\t\tlocale,\n\t\tduration,\n\t\tease,\n\t\tdebug,\n\t\tdisabled,\n\t\trespectReducedMotion,\n\t\tonAnimationStart,\n\t\tonAnimationComplete,\n\t\tmorphInstance,\n\t\tsvelte_element_binding\n\t];\n}\n\nclass TextMorph extends SvelteComponent {\n\tconstructor(options) {\n\t\tsuper();\n\n\t\tinit(this, options, instance, create_fragment, safe_not_equal, {\n\t\t\ttext: 4,\n\t\t\tlocale: 5,\n\t\t\tduration: 6,\n\t\t\tease: 7,\n\t\t\tdebug: 8,\n\t\t\tdisabled: 9,\n\t\t\trespectReducedMotion: 10,\n\t\t\tonAnimationStart: 11,\n\t\t\tonAnimationComplete: 12,\n\t\t\tclass: 0,\n\t\t\tstyle: 1,\n\t\t\tas: 2\n\t\t});\n\t}\n}\n\nexport default TextMorph;"],"mappings":"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","names":["SvelteComponent","assign","binding_callbacks","detach","element","empty","get_spread_update","init","insert","noop","safe_not_equal","set_dynamic_element_data","onMount","onDestroy","Morph","create_dynamic_element","ctx","svelte_element","svelte_element_levels","svelte_element_data","i","target","anchor","dirty","detaching","create_fragment","previous_tag","svelte_element_anchor","instance","$$self","$$props","$$invalidate","text","locale","duration","ease","debug","disabled","respectReducedMotion","onAnimationStart","onAnimationComplete","className","style","as","containerRef","morphInstance","svelte_element_binding","$$value","TextMorph","options","TextMorph_default"]}
|
|
1
|
+
{"version":3,"sources":["../../src/svelte/TextMorph.svelte"],"names":["TextMorph","$$anchor","$$props","locale","DEFAULT_TEXT_MORPH_OPTIONS","duration","ease","scale","debug","disabled","respectReducedMotion","onAnimationStart","onAnimationComplete","as","DEFAULT_AS","props","containerRef","morphInstance","onMount","Morph","fragment","node","$$element","$$value"],"mappings":"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","file":"index.mjs","sourcesContent":["import 'svelte/internal/disclose-version';\nimport * as $ from 'svelte/internal/client';\nimport { onMount } from \"svelte\";\nimport { DEFAULT_AS, DEFAULT_TEXT_MORPH_OPTIONS, TextMorph as Morph } from \"../lib/text-morph\";\n\nexport default function TextMorph($$anchor, $$props) {\n\t$.push($$props, true);\n\n\tlet locale = $.prop($$props, 'locale', 19, () => DEFAULT_TEXT_MORPH_OPTIONS.locale),\n\t\tduration = $.prop($$props, 'duration', 19, () => DEFAULT_TEXT_MORPH_OPTIONS.duration),\n\t\tease = $.prop($$props, 'ease', 19, () => DEFAULT_TEXT_MORPH_OPTIONS.ease),\n\t\tscale = $.prop($$props, 'scale', 19, () => DEFAULT_TEXT_MORPH_OPTIONS.scale),\n\t\tdebug = $.prop($$props, 'debug', 19, () => DEFAULT_TEXT_MORPH_OPTIONS.debug),\n\t\tdisabled = $.prop($$props, 'disabled', 19, () => DEFAULT_TEXT_MORPH_OPTIONS.disabled),\n\t\trespectReducedMotion = $.prop($$props, 'respectReducedMotion', 19, () => DEFAULT_TEXT_MORPH_OPTIONS.respectReducedMotion),\n\t\tonAnimationStart = $.prop($$props, 'onAnimationStart', 19, () => void 0),\n\t\tonAnimationComplete = $.prop($$props, 'onAnimationComplete', 19, () => void 0),\n\t\tas = $.prop($$props, 'as', 3, DEFAULT_AS),\n\t\tprops = $.rest_props($$props, [\n\t\t\t'$$slots',\n\t\t\t'$$events',\n\t\t\t'$$legacy',\n\t\t\t'text',\n\t\t\t'locale',\n\t\t\t'duration',\n\t\t\t'ease',\n\t\t\t'scale',\n\t\t\t'debug',\n\t\t\t'disabled',\n\t\t\t'respectReducedMotion',\n\t\t\t'onAnimationStart',\n\t\t\t'onAnimationComplete',\n\t\t\t'as'\n\t\t]);\n\n\tlet containerRef = $.state(void 0);\n\tlet morphInstance = $.state(null);\n\n\tonMount(() => {\n\t\tif ($.get(containerRef)) {\n\t\t\t$.set(\n\t\t\t\tmorphInstance,\n\t\t\t\tnew Morph({\n\t\t\t\t\telement: $.get(containerRef),\n\t\t\t\t\tlocale: locale(),\n\t\t\t\t\tduration: duration(),\n\t\t\t\t\tease: ease(),\n\t\t\t\t\tdebug: debug(),\n\t\t\t\t\tscale: scale(),\n\t\t\t\t\tdisabled: disabled(),\n\t\t\t\t\trespectReducedMotion: respectReducedMotion(),\n\t\t\t\t\tonAnimationStart: onAnimationStart(),\n\t\t\t\t\tonAnimationComplete: onAnimationComplete()\n\t\t\t\t}),\n\t\t\t\ttrue\n\t\t\t);\n\n\t\t\t$.get(morphInstance).update($$props.text);\n\t\t}\n\n\t\treturn () => {\n\t\t\t$.get(morphInstance)?.destroy();\n\t\t};\n\t});\n\n\t$.user_effect(() => {\n\t\tif ($.get(morphInstance)) {\n\t\t\t$.get(morphInstance).update($$props.text);\n\t\t}\n\t});\n\n\tvar fragment = $.comment();\n\tvar node = $.first_child(fragment);\n\n\t$.element(node, as, false, ($$element, $$anchor) => {\n\t\t$.bind_this($$element, ($$value) => $.set(containerRef, $$value, true), () => $.get(containerRef));\n\t\t$.attribute_effect($$element, () => ({ ...props }));\n\t});\n\n\t$.append($$anchor, fragment);\n\t$.pop();\n}"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { TextMorphOptions } from '../../lib/text-morph/types';
|
|
2
|
+
|
|
3
|
+
interface TextMorphProps extends Omit<TextMorphOptions, "element"> {
|
|
4
|
+
text: string;
|
|
5
|
+
class?: string;
|
|
6
|
+
style?: Record<string, string | number>;
|
|
7
|
+
as?: string;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export type { TextMorphProps };
|
package/dist/vue/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';var TextMorphSZJHGWGL_vue=require('../TextMorph-SZJHGWGL.vue');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var TextMorphSZJHGWGL_vue__default=/*#__PURE__*/_interopDefault(TextMorphSZJHGWGL_vue);Object.defineProperty(exports,"TextMorph",{enumerable:true,get:function(){return TextMorphSZJHGWGL_vue__default.default}});//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/vue/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}
|
package/dist/vue/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
export{default as TextMorph}from'../TextMorph-SZJHGWGL.vue';//# sourceMappingURL=index.mjs.map
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/vue/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs","sourcesContent":[]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "torph",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"description": "Dependency-free animated text component.",
|
|
5
|
+
"homepage": "https://torph.lochie.me",
|
|
5
6
|
"author": "Lochie Axon",
|
|
6
7
|
"license": "MIT",
|
|
7
8
|
"repository": {
|
|
@@ -46,6 +47,7 @@
|
|
|
46
47
|
"bugs": {
|
|
47
48
|
"url": "https://github.com/lochie/torph/issues"
|
|
48
49
|
},
|
|
50
|
+
"sideEffects": false,
|
|
49
51
|
"files": [
|
|
50
52
|
"dist/*"
|
|
51
53
|
],
|
|
@@ -53,7 +55,7 @@
|
|
|
53
55
|
"react": ">=18",
|
|
54
56
|
"react-dom": ">=18",
|
|
55
57
|
"vue": ">=3",
|
|
56
|
-
"svelte": ">=
|
|
58
|
+
"svelte": ">=5"
|
|
57
59
|
},
|
|
58
60
|
"peerDependenciesMeta": {
|
|
59
61
|
"react": {
|
|
@@ -85,7 +87,7 @@
|
|
|
85
87
|
"prettier": "^3.0.3",
|
|
86
88
|
"react": "^18.2.0",
|
|
87
89
|
"react-dom": "^18.2.0",
|
|
88
|
-
"svelte": "^
|
|
90
|
+
"svelte": "^5.0.0",
|
|
89
91
|
"tsup": "^8.5.0",
|
|
90
92
|
"typescript": "^5.9.3",
|
|
91
93
|
"vue": "^3.3.0"
|
package/dist/chunk-5MHVW5FX.mjs
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
var E=class f{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=!0;prefersReducedMotion=!1;mediaQuery;static styleEl;constructor(t){if(this.options={locale:"en",duration:400,scale:!0,ease:"cubic-bezier(0.19, 1, 0.22, 1)",respectReducedMotion:!0,...t},this.element=t.element,typeof window<"u"&&this.options.respectReducedMotion){this.mediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),this.prefersReducedMotion=this.mediaQuery.matches;let s=o=>{this.prefersReducedMotion=o.matches};this.mediaQuery.addEventListener("change",s)}this.isDisabled()||(this.element.setAttribute("torph-root",""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,t.debug&&this.element.setAttribute("torph-debug","")),this.data=this.element.innerHTML,this.isDisabled()||this.addStyles()}destroy(){this.mediaQuery&&this.mediaQuery.removeEventListener("change",this.handleMediaQueryChange),this.element.getAnimations().forEach(t=>t.cancel()),this.element.removeAttribute("torph-root"),this.element.removeAttribute("torph-debug"),this.removeStyles()}handleMediaQueryChange=t=>{this.prefersReducedMotion=t.matches};isDisabled(){return!!(this.options.disabled||this.options.respectReducedMotion&&this.prefersReducedMotion)}update(t){if(t!==this.data){if(this.data=t,this.isDisabled()){typeof t=="string"&&(this.element.textContent=t);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element)}}createTextGroup(t,s){let o=s.offsetWidth,i=s.offsetHeight,a=t.includes(" "),h;if(typeof Intl.Segmenter<"u"){let r=new Intl.Segmenter(this.options.locale,{granularity:a?"word":"grapheme"}).segment(t)[Symbol.iterator]();h=this.blocks(r)}else h=this.blocksFallback(t,a);this.prevMeasures=this.measure();let l=Array.from(s.children),d=new Set(h.map(e=>e.id)),g=l.filter(e=>!d.has(e.getAttribute("torph-id"))&&!e.hasAttribute("torph-exiting")),y=new Set(g),m=new Map;for(let e=0;e<l.length;e++){let r=l[e];if(!y.has(r))continue;let p=null;for(let n=e+1;n<l.length;n++){let u=l[n].getAttribute("torph-id");if(d.has(u)&&!y.has(l[n])){p=u;break}}if(!p)for(let n=e-1;n>=0;n--){let u=l[n].getAttribute("torph-id");if(d.has(u)&&!y.has(l[n])){p=u;break}}m.set(r,p)}let x=s.getBoundingClientRect();if(g.forEach(e=>{let r=e.getBoundingClientRect();e.setAttribute("torph-exiting",""),e.style.position="absolute",e.style.pointerEvents="none",e.style.left=`${r.left-x.left}px`,e.style.top=`${r.top-x.top}px`,e.style.width=`${r.width}px`,e.style.height=`${r.height}px`}),l.forEach(e=>{let r=e.getAttribute("torph-id");d.has(r)&&e.remove()}),h.forEach(e=>{let r=document.createElement("span");r.setAttribute("torph-item",""),r.setAttribute("torph-id",e.id),r.textContent=e.string,s.appendChild(r)}),this.currentMeasures=this.measure(),this.updateStyles(h),g.forEach(e=>{if(this.isInitialRender){e.remove();return}let r=m.get(e),p=0,n=0;if(r&&this.prevMeasures[r]&&this.currentMeasures[r]){let M=this.prevMeasures[r],v=this.currentMeasures[r];p=v.x-M.x,n=v.y-M.y}e.getAnimations().forEach(M=>M.cancel()),e.animate({transform:this.options.scale?`translate(${p}px, ${n}px) scale(0.95)`:`translate(${p}px, ${n}px)`,offset:1},{duration:this.options.duration,easing:this.options.ease,fill:"both"});let u=e.animate({opacity:0,offset:1},{duration:this.options.duration*.25,easing:"linear",fill:"both"});u.onfinish=()=>e.remove()}),this.isInitialRender){this.isInitialRender=!1,s.style.width="auto",s.style.height="auto";return}if(o===0||i===0)return;s.style.width="auto",s.style.height="auto",s.offsetWidth;let c=s.offsetWidth,b=s.offsetHeight;s.style.width=`${o}px`,s.style.height=`${i}px`,s.offsetWidth,s.style.width=`${c}px`,s.style.height=`${b}px`,setTimeout(()=>{s.style.width="auto",s.style.height="auto",this.options.onAnimationComplete&&this.options.onAnimationComplete()},this.options.duration)}measure(){let t=Array.from(this.element.children),s={};return t.forEach((o,i)=>{if(o.hasAttribute("torph-exiting"))return;let a=o.getAttribute("torph-id")||`child-${i}`;s[a]={x:o.offsetLeft,y:o.offsetTop}}),s}updateStyles(t){if(this.isInitialRender)return;let s=Array.from(this.element.children),o=new Set(t.map(i=>i.id).filter(i=>this.prevMeasures[i]));s.forEach((i,a)=>{if(i.hasAttribute("torph-exiting"))return;let h=i.getAttribute("torph-id")||`child-${a}`,l=this.prevMeasures[h],d=this.currentMeasures[h],g=d?.x||0,y=d?.y||0,m=l?l.x-g:0,x=l?l.y-y:0,c=!l;if(c){let r=t.findIndex(n=>n.id===h),p=null;for(let n=r-1;n>=0;n--)if(o.has(t[n].id)){p=t[n].id;break}if(!p){for(let n=r+1;n<t.length;n++)if(o.has(t[n].id)){p=t[n].id;break}}if(p){let n=this.prevMeasures[p],u=this.currentMeasures[p];m=n.x-u.x,x=n.y-u.y}}i.getAnimations().forEach(r=>r.cancel()),i.animate({transform:`translate(${m}px, ${x}px) scale(${c?.95:1})`,offset:0},{duration:this.options.duration,easing:this.options.ease,fill:"both"});let b=c?this.options.duration*.25:0,e=c?this.options.duration*.25:0;i.animate({opacity:c?0:1,offset:0},{duration:b,delay:e,easing:"linear",fill:"both"})})}addStyles(){if(f.styleEl)return;let t=document.createElement("style");t.dataset.torph="true",t.innerHTML=`
|
|
3
|
-
[torph-root] {
|
|
4
|
-
display: inline-flex;
|
|
5
|
-
position: relative;
|
|
6
|
-
will-change: width, height;
|
|
7
|
-
transition-property: width, height;
|
|
8
|
-
white-space: nowrap;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
[torph-item] {
|
|
12
|
-
display: inline-block;
|
|
13
|
-
will-change: opacity, transform;
|
|
14
|
-
transform: none;
|
|
15
|
-
opacity: 1;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
[torph-root][torph-debug] {
|
|
19
|
-
outline:2px solid magenta;
|
|
20
|
-
[torph-item] {
|
|
21
|
-
outline:2px solid cyan;
|
|
22
|
-
outline-offset: -4px;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
`,document.head.appendChild(t),f.styleEl=t}removeStyles(){f.styleEl&&(f.styleEl.remove(),f.styleEl=void 0)}blocks(t){return Array.from(t).reduce((o,i)=>i.segment===" "?[...o,{id:`space-${i.index}`,string:"\xA0"}]:o.find(h=>h.string===i.segment)?[...o,{id:`${i.segment}-${i.index}`,string:i.segment}]:[...o,{id:i.segment,string:i.segment}],[])}blocksFallback(t,s){let o=s?t.split(" "):t.split(""),i=[];return s?o.forEach((a,h)=>{h>0&&i.push({id:`space-${h}`,string:"\xA0"}),i.find(d=>d.string===a)?i.push({id:`${a}-${h}`,string:a}):i.push({id:a,string:a})}):o.forEach((a,h)=>{i.find(d=>d.string===a)?i.push({id:`${a}-${h}`,string:a}):i.push({id:a,string:a})}),i}log(...t){this.options.debug&&console.log("[TextMorph]",...t)}};export{E as a};
|
|
26
|
-
//# sourceMappingURL=chunk-5MHVW5FX.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/lib/text-morph/index.ts"],"sourcesContent":["import type { TextMorphOptions } from \"./types\";\n\nexport type { TextMorphOptions } from \"./types\";\n\ntype Block = {\n id: string;\n string: string;\n};\ntype Measures = {\n [key: string]: { x: number; y: number };\n};\n\nexport class TextMorph {\n private element: HTMLElement;\n private options: Omit<TextMorphOptions, \"element\"> = {};\n\n private data: HTMLElement | string;\n\n private currentMeasures: Measures = {};\n private prevMeasures: Measures = {};\n private isInitialRender = true;\n private prefersReducedMotion = false;\n private mediaQuery?: MediaQueryList;\n\n static styleEl: HTMLStyleElement;\n\n constructor(options: TextMorphOptions) {\n this.options = {\n locale: \"en\",\n duration: 400,\n scale: true,\n ease: \"cubic-bezier(0.19, 1, 0.22, 1)\",\n respectReducedMotion: true,\n ...options,\n };\n\n this.element = options.element;\n\n // reduced motion detection\n if (typeof window !== \"undefined\" && this.options.respectReducedMotion) {\n this.mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n this.prefersReducedMotion = this.mediaQuery.matches;\n\n const listener = (event: MediaQueryListEvent) => {\n this.prefersReducedMotion = event.matches;\n };\n\n this.mediaQuery.addEventListener(\"change\", listener);\n }\n\n if (!this.isDisabled()) {\n this.element.setAttribute(\"torph-root\", \"\");\n this.element.style.transitionDuration = `${this.options.duration}ms`;\n this.element.style.transitionTimingFunction = this.options.ease!;\n\n if (options.debug) this.element.setAttribute(\"torph-debug\", \"\");\n }\n\n this.data = this.element.innerHTML;\n\n if (!this.isDisabled()) {\n this.addStyles();\n }\n }\n\n destroy() {\n if (this.mediaQuery) {\n this.mediaQuery.removeEventListener(\n \"change\",\n this.handleMediaQueryChange,\n );\n }\n this.element.getAnimations().forEach((anim) => anim.cancel());\n this.element.removeAttribute(\"torph-root\");\n this.element.removeAttribute(\"torph-debug\");\n this.removeStyles();\n }\n\n private handleMediaQueryChange = (event: MediaQueryListEvent) => {\n this.prefersReducedMotion = event.matches;\n };\n\n private isDisabled(): boolean {\n return Boolean(\n this.options.disabled ||\n (this.options.respectReducedMotion && this.prefersReducedMotion),\n );\n }\n\n update(value: HTMLElement | string) {\n if (value === this.data) return;\n this.data = value;\n\n if (this.isDisabled()) {\n if (typeof value === \"string\") {\n this.element.textContent = value;\n }\n return;\n }\n\n if (this.data instanceof HTMLElement) {\n // TODO: handle HTMLElement case\n throw new Error(\"HTMLElement not yet supported\");\n } else {\n if (this.options.onAnimationStart && !this.isInitialRender) {\n this.options.onAnimationStart();\n }\n this.createTextGroup(this.data, this.element);\n }\n }\n\n private createTextGroup(value: string, element: HTMLElement) {\n const oldWidth = element.offsetWidth;\n const oldHeight = element.offsetHeight;\n\n const byWord = value.includes(\" \");\n let blocks: Block[];\n\n if (typeof Intl.Segmenter !== \"undefined\") {\n const segmenter = new Intl.Segmenter(this.options.locale, {\n granularity: byWord ? \"word\" : \"grapheme\",\n });\n const iterator = segmenter.segment(value)[Symbol.iterator]();\n blocks = this.blocks(iterator);\n } else {\n // Fallback for browsers without Intl.Segmenter\n blocks = this.blocksFallback(value, byWord);\n }\n\n this.prevMeasures = this.measure();\n const oldChildren = Array.from(element.children) as HTMLElement[];\n const newIds = new Set(blocks.map((b) => b.id));\n\n const exiting = oldChildren.filter(\n (child) =>\n !newIds.has(child.getAttribute(\"torph-id\") as string) &&\n !child.hasAttribute(\"torph-exiting\"),\n );\n\n // For each exiting char, find the nearest persistent neighbor in old order\n // so we can make it follow that neighbor's FLIP movement\n const exitingSet = new Set(exiting);\n const exitingAnchorId = new Map<HTMLElement, string | null>();\n for (let i = 0; i < oldChildren.length; i++) {\n const child = oldChildren[i]!;\n if (!exitingSet.has(child)) continue;\n\n // Look forward for nearest persistent char\n let anchor: string | null = null;\n for (let j = i + 1; j < oldChildren.length; j++) {\n const siblingId = oldChildren[j]!.getAttribute(\"torph-id\") as string;\n if (newIds.has(siblingId) && !exitingSet.has(oldChildren[j]!)) {\n anchor = siblingId;\n break;\n }\n }\n // If none forward, look backward\n if (!anchor) {\n for (let j = i - 1; j >= 0; j--) {\n const siblingId = oldChildren[j]!.getAttribute(\"torph-id\") as string;\n if (newIds.has(siblingId) && !exitingSet.has(oldChildren[j]!)) {\n anchor = siblingId;\n break;\n }\n }\n }\n exitingAnchorId.set(child, anchor);\n }\n\n const parentRect = element.getBoundingClientRect();\n exiting.forEach((child) => {\n const rect = child.getBoundingClientRect();\n child.setAttribute(\"torph-exiting\", \"\");\n child.style.position = \"absolute\";\n child.style.pointerEvents = \"none\";\n child.style.left = `${rect.left - parentRect.left}px`;\n child.style.top = `${rect.top - parentRect.top}px`;\n child.style.width = `${rect.width}px`;\n child.style.height = `${rect.height}px`;\n });\n\n oldChildren.forEach((child) => {\n const id = child.getAttribute(\"torph-id\") as string;\n if (newIds.has(id)) child.remove();\n });\n\n blocks.forEach((block) => {\n const span = document.createElement(\"span\");\n span.setAttribute(\"torph-item\", \"\");\n span.setAttribute(\"torph-id\", block.id);\n span.textContent = block.string;\n element.appendChild(span);\n });\n\n this.currentMeasures = this.measure();\n this.updateStyles(blocks);\n\n exiting.forEach((child) => {\n if (this.isInitialRender) {\n child.remove();\n return;\n }\n\n // Find the anchor neighbor's FLIP delta so we move in sync with it\n const anchorId = exitingAnchorId.get(child);\n let dx = 0;\n let dy = 0;\n\n if (\n anchorId &&\n this.prevMeasures[anchorId] &&\n this.currentMeasures[anchorId]\n ) {\n const anchorPrev = this.prevMeasures[anchorId]!;\n const anchorCurr = this.currentMeasures[anchorId]!;\n dx = anchorCurr.x - anchorPrev.x;\n dy = anchorCurr.y - anchorPrev.y;\n }\n\n child.getAnimations().forEach((a) => a.cancel());\n child.animate(\n {\n transform: this.options.scale\n ? `translate(${dx}px, ${dy}px) scale(0.95)`\n : `translate(${dx}px, ${dy}px)`,\n offset: 1,\n },\n {\n duration: this.options.duration,\n easing: this.options.ease,\n fill: \"both\",\n },\n );\n const animation: Animation = child.animate(\n {\n opacity: 0,\n offset: 1,\n },\n {\n duration: this.options.duration! * 0.25,\n easing: \"linear\",\n fill: \"both\",\n },\n );\n animation.onfinish = () => child.remove();\n });\n\n if (this.isInitialRender) {\n this.isInitialRender = false;\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n return;\n }\n\n if (oldWidth === 0 || oldHeight === 0) return;\n\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n void element.offsetWidth; // force reflow\n\n const newWidth = element.offsetWidth;\n const newHeight = element.offsetHeight;\n\n element.style.width = `${oldWidth}px`;\n element.style.height = `${oldHeight}px`;\n void element.offsetWidth; // force reflow\n\n element.style.width = `${newWidth}px`;\n element.style.height = `${newHeight}px`;\n\n // TODO: move to `transitionend` event listener\n setTimeout(() => {\n element.style.width = \"auto\";\n element.style.height = \"auto\";\n if (this.options.onAnimationComplete) {\n this.options.onAnimationComplete();\n }\n }, this.options.duration);\n }\n\n private measure() {\n const children = Array.from(this.element.children) as HTMLElement[];\n const measures: Measures = {};\n\n children.forEach((child, index) => {\n if (child.hasAttribute(\"torph-exiting\")) return;\n const key = child.getAttribute(\"torph-id\") || `child-${index}`;\n measures[key] = {\n x: child.offsetLeft,\n y: child.offsetTop,\n };\n });\n\n return measures;\n }\n\n private updateStyles(blocks: Block[]) {\n if (this.isInitialRender) return;\n\n const children = Array.from(this.element.children) as HTMLElement[];\n\n const persistentIds = new Set(\n blocks.map((b) => b.id).filter((id) => this.prevMeasures[id]),\n );\n\n children.forEach((child, index) => {\n if (child.hasAttribute(\"torph-exiting\")) return;\n const key = child.getAttribute(\"torph-id\") || `child-${index}`;\n const prev = this.prevMeasures[key];\n const current = this.currentMeasures[key];\n\n const cx = current?.x || 0;\n const cy = current?.y || 0;\n\n let deltaX = prev ? prev.x - cx : 0;\n let deltaY = prev ? prev.y - cy : 0;\n const isNew = !prev;\n\n // For new chars, use the nearest persistent neighbor's FLIP delta\n // so all new chars get the same consistent offset\n if (isNew) {\n const blockIndex = blocks.findIndex((b) => b.id === key);\n let anchorId: string | null = null;\n\n for (let j = blockIndex - 1; j >= 0; j--) {\n if (persistentIds.has(blocks[j]!.id)) {\n anchorId = blocks[j]!.id;\n break;\n }\n }\n if (!anchorId) {\n for (let j = blockIndex + 1; j < blocks.length; j++) {\n if (persistentIds.has(blocks[j]!.id)) {\n anchorId = blocks[j]!.id;\n break;\n }\n }\n }\n\n if (anchorId) {\n const anchorPrev = this.prevMeasures[anchorId]!;\n const anchorCurr = this.currentMeasures[anchorId]!;\n deltaX = anchorPrev.x - anchorCurr.x;\n deltaY = anchorPrev.y - anchorCurr.y;\n }\n }\n\n child.getAnimations().forEach((a) => a.cancel());\n child.animate(\n {\n transform: `translate(${deltaX}px, ${deltaY}px) scale(${isNew ? 0.95 : 1})`,\n offset: 0,\n },\n {\n duration: this.options.duration,\n easing: this.options.ease,\n fill: \"both\",\n },\n );\n const duration = isNew ? this.options.duration! * 0.25 : 0;\n const delay = isNew ? this.options.duration! * 0.25 : 0;\n child.animate(\n {\n opacity: isNew ? 0 : 1,\n offset: 0,\n },\n {\n duration: duration,\n delay: delay,\n easing: \"linear\",\n fill: \"both\",\n },\n );\n });\n }\n\n private addStyles() {\n if (TextMorph.styleEl) return;\n\n const style = document.createElement(\"style\");\n style.dataset.torph = \"true\";\n style.innerHTML = `\n[torph-root] {\n display: inline-flex;\n position: relative;\n will-change: width, height;\n transition-property: width, height;\n white-space: nowrap;\n}\n\n[torph-item] {\n display: inline-block;\n will-change: opacity, transform;\n transform: none;\n opacity: 1;\n}\n\n[torph-root][torph-debug] {\n outline:2px solid magenta;\n [torph-item] {\n outline:2px solid cyan;\n outline-offset: -4px;\n }\n}\n `;\n document.head.appendChild(style);\n TextMorph.styleEl = style;\n }\n\n private removeStyles() {\n if (TextMorph.styleEl) {\n TextMorph.styleEl.remove();\n TextMorph.styleEl = undefined!;\n }\n }\n\n // utils\n\n private blocks(iterator: Intl.SegmentIterator<Intl.SegmentData>) {\n const uniqueStrings: Block[] = Array.from(iterator).reduce(\n (acc, string) => {\n if (string.segment === \" \") {\n return [...acc, { id: `space-${string.index}`, string: \"\\u00A0\" }];\n }\n\n const existingString = acc.find((x) => x.string === string.segment);\n if (existingString) {\n return [\n ...acc,\n { id: `${string.segment}-${string.index}`, string: string.segment },\n ];\n }\n\n return [\n ...acc,\n {\n id: string.segment,\n string: string.segment,\n },\n ];\n },\n [] as Block[],\n );\n\n return uniqueStrings;\n }\n\n private blocksFallback(value: string, byWord: boolean): Block[] {\n const segments = byWord ? value.split(\" \") : value.split(\"\");\n const blocks: Block[] = [];\n\n if (byWord) {\n segments.forEach((segment, index) => {\n if (index > 0) {\n blocks.push({ id: `space-${index}`, string: \"\\u00A0\" });\n }\n const existing = blocks.find((x) => x.string === segment);\n if (existing) {\n blocks.push({ id: `${segment}-${index}`, string: segment });\n } else {\n blocks.push({ id: segment, string: segment });\n }\n });\n } else {\n segments.forEach((segment, index) => {\n const existing = blocks.find((x) => x.string === segment);\n if (existing) {\n blocks.push({ id: `${segment}-${index}`, string: segment });\n } else {\n blocks.push({ id: segment, string: segment });\n }\n });\n }\n\n return blocks;\n }\n\n private log(...args: any[]) {\n if (this.options.debug) console.log(\"[TextMorph]\", ...args);\n }\n}\n"],"mappings":"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","names":["TextMorph","_TextMorph","options","listener","event","anim","value","element","oldWidth","oldHeight","byWord","blocks","iterator","oldChildren","newIds","b","exiting","child","exitingSet","exitingAnchorId","i","anchor","j","siblingId","parentRect","rect","id","block","span","anchorId","dx","dy","anchorPrev","anchorCurr","a","animation","newWidth","newHeight","children","measures","index","key","persistentIds","prev","current","cx","cy","deltaX","deltaY","isNew","blockIndex","duration","delay","style","acc","string","x","segments","segment","args"]}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
interface TextMorphOptions {
|
|
2
|
-
debug?: boolean;
|
|
3
|
-
element: HTMLElement;
|
|
4
|
-
locale?: Intl.LocalesArgument;
|
|
5
|
-
scale?: boolean;
|
|
6
|
-
duration?: number;
|
|
7
|
-
ease?: string;
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
respectReducedMotion?: boolean;
|
|
10
|
-
onAnimationStart?: () => void;
|
|
11
|
-
onAnimationComplete?: () => void;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export type { TextMorphOptions as T };
|
package/dist/types-CnPojgn6.d.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
interface TextMorphOptions {
|
|
2
|
-
debug?: boolean;
|
|
3
|
-
element: HTMLElement;
|
|
4
|
-
locale?: Intl.LocalesArgument;
|
|
5
|
-
scale?: boolean;
|
|
6
|
-
duration?: number;
|
|
7
|
-
ease?: string;
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
respectReducedMotion?: boolean;
|
|
10
|
-
onAnimationStart?: () => void;
|
|
11
|
-
onAnimationComplete?: () => void;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export type { TextMorphOptions as T };
|