@grahlnn/comps 0.1.3 → 0.1.5

package/dist/index.js

@@ -2931,6 +2931,15 @@ function getDomMeasurementRequestKey(text, renderText, layoutContext, useContent
   }
   return `dom\x00${inlineSizeMode}\x00${text}\x00${renderText}\x00${layoutContext.measurementVersion}\x00${getMorphMeasurementEpoch()}`;
 }
+function needsMeasurementLayer(measurementBackend, renderText) {
+  if (measurementBackend === "pretext") {
+    return false;
+  }
+  return renderText.length > 0;
+}
+function canCacheMeasurementLayerSnapshot(measurementBackend) {
+  return measurementBackend === "dom";
+}
 function readCachedMorphSnapshot(cache, cacheKey) {
   const cached = cache.get(cacheKey);
   if (cached === undefined) {
@@ -3118,7 +3127,7 @@ function createMorphMeasurementRequest({
     segments = EMPTY_SEGMENTS;
   }
   let domMeasurementKey = null;
-  if (measurementBackend === "dom" && renderText.length > 0) {
+  if (needsMeasurementLayer(measurementBackend, renderText)) {
     domMeasurementKey = getDomMeasurementRequestKey(text, renderText, layoutContext, useContentInlineSize);
   }
   return {
@@ -3190,17 +3199,19 @@ function measureFromNodes({
       pretextSnapshot = measureMorphSnapshotWithPretext(text, measurementLayoutContext);
     }
     let domSnapshot = null;
-    if (measurementBackend === "dom") {
-      domSnapshot = measureMorphSnapshotFromLayer(text, renderText, segments, layer);
-    } else if (measurementBackend !== "pretext") {
-      domSnapshot = measureMorphSnapshotWithDomService({
-        root,
-        layoutContext,
-        text,
-        renderText,
-        segments,
-        useContentInlineSize
-      });
+    if (measurementBackend !== "pretext") {
+      if (layer !== null) {
+        domSnapshot = measureMorphSnapshotFromLayer(text, renderText, segments, layer);
+      } else {
+        domSnapshot = measureMorphSnapshotWithDomService({
+          root,
+          layoutContext,
+          text,
+          renderText,
+          segments,
+          useContentInlineSize
+        });
+      }
     }
     if (measurementBackend === "probe" && pretextSnapshot !== null && domSnapshot !== null) {
       const trusted = areSnapshotsEquivalentForPretextTrust(pretextSnapshot, domSnapshot);
@@ -3690,6 +3701,9 @@ function resolveActivationBootstrapText(isActivated, previousText, nextText) {
   }
   return null;
 }
+function shouldDeferTargetMeasurement(committedMeasurement, pendingBootstrapText, text) {
+  return committedMeasurement === null && pendingBootstrapText !== null && pendingBootstrapText !== text;
+}
 function getOverlayStyle(plan) {
   return {
     ...OVERLAY_STYLE,
@@ -3795,17 +3809,23 @@ function useMorphTransition(text, className, bootstrapText = null) {
   if (sessionRef.current.animating) {
     measurementHint = sessionRef.current.target ?? sessionRef.current.committed;
   }
-  const measurementRequest = useMemo(() => createMorphMeasurementRequest({
-    text,
-    layoutContext,
-    layoutHint: measurementHint
-  }), [text, layoutContext, measurementHint]);
   let pendingBootstrapText = null;
   if (sessionRef.current.committed === null) {
     pendingBootstrapText = pendingBootstrapTextRef.current;
   }
+  const isBootstrapping = shouldDeferTargetMeasurement(sessionRef.current.committed, pendingBootstrapText, text);
+  const measurementRequest = useMemo(() => {
+    if (isBootstrapping) {
+      return null;
+    }
+    return createMorphMeasurementRequest({
+      text,
+      layoutContext,
+      layoutHint: measurementHint
+    });
+  }, [text, layoutContext, measurementHint, isBootstrapping]);
   const bootstrapMeasurementRequest = useMemo(() => {
-    if (pendingBootstrapText === null) {
+    if (!isBootstrapping || pendingBootstrapText === null) {
       return null;
     }
     return createMorphMeasurementRequest({
@@ -3813,13 +3833,13 @@ function useMorphTransition(text, className, bootstrapText = null) {
       layoutContext,
       layoutHint: null
     });
-  }, [pendingBootstrapText, layoutContext]);
+  }, [pendingBootstrapText, layoutContext, isBootstrapping]);
   const renderText = measurementRequest?.renderText ?? text;
   const useContentInlineSize = measurementRequest?.useContentInlineSize ?? false;
   const measurementBackend = measurementRequest?.measurementBackend ?? null;
   const segments = measurementRequest?.segments ?? EMPTY_SEGMENTS;
   const domMeasurementKey = measurementRequest?.domMeasurementKey ?? null;
-  const shouldRenderBootstrapSourceMeasurementLayer = bootstrapMeasurementRequest?.measurementBackend === "dom" && bootstrapMeasurementRequest.renderText.length > 0;
+  const shouldRenderBootstrapSourceMeasurementLayer = bootstrapMeasurementRequest?.domMeasurementKey !== null;
   useLayoutEffect(() => {
     if (ref.current === null || layoutContext === null) {
       completedDomMeasurementKeyRef.current = null;
@@ -3841,9 +3861,9 @@ function useMorphTransition(text, className, bootstrapText = null) {
       });
       return;
     }
-    if (pendingBootstrapText !== null && pendingBootstrapText !== text && bootstrapMeasurementRequest !== null && measurementRequest !== null) {
+    if (isBootstrapping && bootstrapMeasurementRequest !== null) {
       let bootstrapDomSnapshot = null;
-      if (bootstrapMeasurementRequest.domMeasurementKey !== null) {
+      if (bootstrapMeasurementRequest.domMeasurementKey !== null && canCacheMeasurementLayerSnapshot(bootstrapMeasurementRequest.measurementBackend)) {
         bootstrapDomSnapshot = readCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, bootstrapMeasurementRequest.domMeasurementKey);
       }
       if (bootstrapMeasurementRequest.domMeasurementKey !== null && bootstrapDomSnapshot === null && bootstrapMeasurementLayerRef.current === null) {
@@ -3860,7 +3880,7 @@ function useMorphTransition(text, className, bootstrapText = null) {
         renderText: bootstrapMeasurementRequest.renderText,
         segments: bootstrapMeasurementRequest.segments
       });
-      if (bootstrapMeasurementRequest.domMeasurementKey !== null && bootstrapDomSnapshot === null) {
+      if (bootstrapMeasurementRequest.domMeasurementKey !== null && bootstrapDomSnapshot === null && canCacheMeasurementLayerSnapshot(bootstrapMeasurementRequest.measurementBackend)) {
         rememberCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, bootstrapMeasurementRequest.domMeasurementKey, bootstrapMeasurement.snapshot);
       }
       completedDomMeasurementKeyRef.current = null;
@@ -3872,7 +3892,10 @@ function useMorphTransition(text, className, bootstrapText = null) {
       return;
     }
     if (domMeasurementKey !== null) {
-      const cachedSnapshot = readCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, domMeasurementKey);
+      let cachedSnapshot = null;
+      if (canCacheMeasurementLayerSnapshot(measurementBackend)) {
+        cachedSnapshot = readCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, domMeasurementKey);
+      }
       if (cachedSnapshot !== null) {
         completedDomMeasurementKeyRef.current = domMeasurementKey;
         if (domMeasurementRequestKey !== null) {
@@ -3915,7 +3938,9 @@ function useMorphTransition(text, className, bootstrapText = null) {
           setState
         });
         if (nextMeasurement !== null) {
-          rememberCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, domMeasurementKey, nextMeasurement.snapshot);
+          if (canCacheMeasurementLayerSnapshot(measurementBackend)) {
+            rememberCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, domMeasurementKey, nextMeasurement.snapshot);
+          }
         }
         completedDomMeasurementKeyRef.current = domMeasurementKey;
         if (domMeasurementRequestKey !== null) {
@@ -3952,6 +3977,7 @@ function useMorphTransition(text, className, bootstrapText = null) {
     layoutContext,
     measurementBackend,
     measurementRequest,
+    isBootstrapping,
     pendingBootstrapText,
     bootstrapMeasurementRequest,
     domMeasurementKey,
@@ -4026,7 +4052,7 @@ function ActiveTorph({
   } = useMorphTransition(text, className, bootstrapText);
   const plan = state.plan;
   const shouldRenderOverlay = state.stage !== "idle" && plan !== null;
-  const shouldRenderMeasurementLayer = measurementBackend === "dom" && domMeasurementRequestKey !== null;
+  const shouldRenderMeasurementLayer = domMeasurementRequestKey !== null;
   const flowText = resolveVisibleFlowText(pendingBootstrapText, committedMeasurement, state.measurement, text);
   let bootstrapMeasurementLayer = null;
   if (shouldRenderBootstrapSourceMeasurementLayer && bootstrapMeasurementRequest !== null) {
@@ -4105,11 +4131,13 @@ function Torph({
 }
 export {
   supportsIntrinsicWidthLock,
+  shouldDeferTargetMeasurement,
   resolveVisibleFlowText,
   resolveMorphFrameBounds,
   resolveFlowText,
   resolveActivationBootstrapText,
   pairMorphCharacters,
+  needsMeasurementLayer,
   measureMorphSnapshotFromLayer,
   getRootStyle,
   getRootDisplay,

package/dist/torph/src/components/Torph.d.ts

@@ -1,4 +1,5 @@
 import { type CSSProperties } from "react";
+import { type PretextMorphMeasurementBackend } from "../utils/text-layout/pretextMorph";
 export type SupportedWhiteSpace = "normal" | "nowrap" | "pre-wrap";
 export type MorphCharacterLayout = {
     glyph: string;
@@ -76,6 +77,7 @@ type GlyphExit = {
     from: MorphCharacterLayout;
 };
 type GlyphPairing = GlyphMove | GlyphEnter | GlyphExit;
+export declare function needsMeasurementLayer(measurementBackend: PretextMorphMeasurementBackend, renderText: string): boolean;
 export declare function measureMorphSnapshotFromLayer(text: string, renderText: string, segments: readonly MorphSegment[], layer: HTMLElement | null): MorphSnapshot;
 export declare function pairMorphCharacters(previous: MorphCharacterLayout[], next: MorphCharacterLayout[]): GlyphPairing[];
 export declare function resolveMorphFrameBounds(previous: MorphSnapshot, next: MorphSnapshot): {
@@ -95,6 +97,7 @@ export declare function getMeasurementLayerStyle(layoutContext: LayoutContext |
 export declare function resolveFlowText(committedMeasurement: MorphMeasurement | null, stateMeasurement: MorphMeasurement | null, text: string): string;
 export declare function resolveVisibleFlowText(pendingBootstrapText: string | null, committedMeasurement: MorphMeasurement | null, stateMeasurement: MorphMeasurement | null, text: string): string;
 export declare function resolveActivationBootstrapText(isActivated: boolean, previousText: string, nextText: string): string | null;
+export declare function shouldDeferTargetMeasurement(committedMeasurement: MorphMeasurement | null, pendingBootstrapText: string | null, text: string): boolean;
 export declare function Torph({ text, className, }: {
     text: string;
     className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grahlnn/comps",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "React components from grahlnn/comps.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",