feat: multline support and testbench

package.json

@@ -8,7 +8,7 @@
  "dev": "pnpm run watch & pnpm run site:dev",
  "build": "pnpm --filter=torph build",
  "site:dev": "pnpm --filter=site dev",
- "site:build": "pnpm run build && pnpm --filter=site build",
+ "site:build": "pnpm run build && node scripts/bundle-sizes.mjs && pnpm --filter=site build",
  "example:react": "pnpm --filter=react-example dev",
  "example:svelte": "pnpm --filter=svelte-example dev",
  "example:svelte-ssr": "pnpm --filter=svelte-ssr-example dev",

packages/torph/package.json

@@ -50,6 +50,7 @@
  "dev": "tsup --watch",
  "lint": "eslint -c .eslintrc.cjs ./src/**/*.{ts,tsx}",
  "lint:fix": "eslint --fix -c .eslintrc.cjs ./src/**/*.{ts,tsx}",
+ "test": "vitest run",
  "pre-commit": "lint-staged"
  },
  "keywords": [
@@ -70,8 +71,8 @@
  "peerDependencies": {
  "react": ">=18",
  "react-dom": ">=18",
- "vue": ">=3",
- "svelte": ">=5"
+ "svelte": ">=5",
+ "vue": ">=3"
  },
  "peerDependenciesMeta": {
  "react": {
@@ -106,6 +107,7 @@
  "svelte": "^5.0.0",
  "tsup": "^8.5.0",
  "typescript": "^5.9.3",
+ "vitest": "^4.0.18",
  "vue": "^3.3.0"
  }
 }

packages/torph/src/index.ts

@@ -1,3 +1,7 @@
 export { DEFAULT_AS, DEFAULT_TEXT_MORPH_OPTIONS, MorphController, TextMorph } from "./lib/text-morph";
 export type { TextMorphOptions } from "./lib/text-morph/types";
 export type { SpringParams } from "./lib/text-morph/utils/spring";
+export { segmentText } from "./lib/text-morph/utils/segment";
+export type { Segment } from "./lib/text-morph/utils/segment";
+export { diffSegments } from "./lib/text-morph/utils/diff";
+export type { DiffResult } from "./lib/text-morph/utils/diff";

packages/torph/src/lib/text-morph/index.ts

@@ -13,7 +13,8 @@ import {
  animateEnterOrPersist,
  transitionContainerSize,
 } from "./utils/animate";
-import { detachFromFlow, reconcileChildren } from "./utils/dom";
+import { detachFromFlow, splitWordSpans, reconcileChildren } from "./utils/dom";
+import { diffSegments } from "./utils/diff";
 import { addStyles, removeStyles } from "./utils/styles";
 import {
  ATTR_ROOT,
@@ -49,9 +50,10 @@ export class TextMorph {
 
  private currentMeasures: Measures = {};
  private prevMeasures: Measures = {};
+ private previousSegments: Segment[] = [];
  private isInitialRender = true;
  private reducedMotion: ReducedMotionState | null = null;
-
+ private emptyTransitionTimer: ReturnType<typeof setTimeout> | null = null;
 
  constructor(options: TextMorphOptions) {
  const { ease: rawEase, ...rest } = { ...DEFAULT_TEXT_MORPH_OPTIONS, ...options };
@@ -77,9 +79,6 @@ export class TextMorph {
 
  if (!this.isDisabled()) {
  this.element.setAttribute(ATTR_ROOT, "");
- this.element.style.transitionDuration = `${this.options.duration}ms`;
- this.element.style.transitionTimingFunction = this.options.ease!;
-
  if (options.debug) this.element.setAttribute(ATTR_DEBUG, "");
  }
 
@@ -90,6 +89,10 @@ export class TextMorph {
  }
 
  destroy() {
+ if (this.emptyTransitionTimer !== null) {
+ clearTimeout(this.emptyTransitionTimer);
+ this.emptyTransitionTimer = null;
+ }
  this.reducedMotion?.destroy();
  this.element.getAnimations().forEach((anim) => anim.cancel());
  this.element.removeAttribute(ATTR_ROOT);
@@ -126,11 +129,40 @@ export class TextMorph {
  }
 
  private createTextGroup(value: string, element: HTMLElement) {
+ // Cancel any pending empty-transition timeout from a previous morph
+ // and restore the styles it would have cleaned up
+ if (this.emptyTransitionTimer !== null) {
+ clearTimeout(this.emptyTransitionTimer);
+ this.emptyTransitionTimer = null;
+ element.style.width = "auto";
+ element.style.height = "auto";
+ element.style.transitionProperty = "";
+ }
+
  const oldRect = element.getBoundingClientRect();
  const oldWidth = oldRect.width;
  const oldHeight = oldRect.height;
 
- const segments = segmentText(value, this.options.locale!);
+ let segments: Segment[];
+ let splits: Map<string, Segment[]>;
+
+ if (this.previousSegments.length > 0) {
+ const result = diffSegments(this.previousSegments, value, this.options.locale!);
+ segments = result.segments;
+ splits = result.splits;
+ } else {
+ segments = segmentText(value, this.options.locale!);
+ splits = new Map();
+ }
+
+ // Keep a zero-width space segment so the container always has in-flow
+ // content, preserving the line box height during exit animations.
+ const isEmptyTransition = segments.length === 0;
+ if (isEmptyTransition) {
+ segments = [{ id: "empty", string: "\u200B" }];
+ }
+
+ splitWordSpans(element, splits);
 
  this.prevMeasures = measure(this.element);
  const oldChildren = Array.from(element.children) as HTMLElement[];
@@ -157,10 +189,19 @@ export class TextMorph {
  reconcileChildren(element, oldChildren, newIds, segments);
 
  this.currentMeasures = measure(this.element);
- this.updateStyles(segments);
+
+ // Measure at oldWidth to get actual first-frame positions.
+ // This correctly handles text-align when content overflows the container
+ // (text-align has no effect on overflowing content).
+ element.style.width = `${oldWidth}px`;
+ void element.offsetWidth;
+ const firstFrameMeasures = measure(this.element);
+ element.style.width = "auto";
+
+ this.updateStyles(segments, firstFrameMeasures);
 
  exiting.forEach((child) => {
- if (this.isInitialRender) {
+ if (this.isInitialRender || child.getAttribute(ATTR_ID) === "empty") {
  child.remove();
  return;
  }
@@ -179,23 +220,41 @@ export class TextMorph {
  });
  });
 
+ this.previousSegments = segments;
+
  if (this.isInitialRender) {
  this.isInitialRender = false;
  element.style.width = "auto";
  element.style.height = "auto";
  return;
  }
 
- transitionContainerSize(
- element,
- oldWidth,
- oldHeight,
- this.options.duration!,
- this.options.onAnimationComplete,
- );
+ if (isEmptyTransition) {
+ // Lock container at old size while exits play so the container
+ // doesn't reposition (e.g. under text-align: center).
+ element.style.transitionProperty = "none";
+ element.style.width = `${oldWidth}px`;
+ element.style.height = `${oldHeight}px`;
+ this.emptyTransitionTimer = setTimeout(() => {
+ this.emptyTransitionTimer = null;
+ element.style.width = "auto";
+ element.style.height = "auto";
+ element.style.transitionProperty = "";
+ this.options.onAnimationComplete?.();
+ }, this.options.duration!);
+ } else {
+ transitionContainerSize(
+ element,
+ oldWidth,
+ oldHeight,
+ this.options.duration!,
+ this.options.ease!,
+ this.options.onAnimationComplete,
+ );
+ }
  }
 
- private updateStyles(segments: Segment[]) {
+ private updateStyles(segments: Segment[], firstFrameMeasures: Measures) {
  if (this.isInitialRender) return;
 
  const children = Array.from(this.element.children) as HTMLElement[];
@@ -207,7 +266,9 @@ export class TextMorph {
 
  children.forEach((child, index) => {
  if (child.hasAttribute(ATTR_EXITING)) return;
+ if (child.tagName === "BR") return;
  const key = child.getAttribute(ATTR_ID) || `child-${index}`;
+ if (key === "empty") return;
  const isNew = !this.prevMeasures[key];
 
  const deltaKey = isNew
@@ -219,7 +280,7 @@ export class TextMorph {
  : key;
 
  const { dx: deltaX, dy: deltaY } = deltaKey
- ? computeDelta(this.prevMeasures, this.currentMeasures, deltaKey)
+ ? computeDelta(this.prevMeasures, firstFrameMeasures, deltaKey)
  : { dx: 0, dy: 0 };
 
  animateEnterOrPersist(child, {