@grahlnn/comps 0.1.3 → 0.1.4

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);
@@ -3819,7 +3830,7 @@ function useMorphTransition(text, className, bootstrapText = null) {
   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;
@@ -3843,7 +3854,7 @@ function useMorphTransition(text, className, bootstrapText = null) {
     }
     if (pendingBootstrapText !== null && pendingBootstrapText !== text && bootstrapMeasurementRequest !== null && measurementRequest !== 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 +3871,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 +3883,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 +3929,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) {
@@ -4026,7 +4042,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) {
@@ -4110,6 +4126,7 @@ export {
   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): {

package/package.json

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