@grahlnn/comps 0.1.4 → 0.1.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/dist/index.js CHANGED
@@ -3692,15 +3692,6 @@ function getMeasurementLayerStyle(layoutContext, useContentInlineSize = false) {
3692
3692
  function resolveFlowText(committedMeasurement, stateMeasurement, text) {
3693
3693
  return committedMeasurement?.snapshot.text ?? stateMeasurement?.snapshot.text ?? text;
3694
3694
  }
3695
- function resolveVisibleFlowText(pendingBootstrapText, committedMeasurement, stateMeasurement, text) {
3696
- return pendingBootstrapText ?? resolveFlowText(committedMeasurement, stateMeasurement, text);
3697
- }
3698
- function resolveActivationBootstrapText(isActivated, previousText, nextText) {
3699
- if (!isActivated && nextText !== previousText) {
3700
- return previousText;
3701
- }
3702
- return null;
3703
- }
3704
3695
  function getOverlayStyle(plan) {
3705
3696
  return {
3706
3697
  ...OVERLAY_STYLE,
@@ -3788,20 +3779,15 @@ function MeasurementLayer({
3788
3779
  }, segment.key, false, undefined, this))
3789
3780
  }, undefined, false, undefined, this);
3790
3781
  }
3791
- function useMorphTransition(text, className, bootstrapText = null) {
3782
+ function useMorphTransition(text, className) {
3792
3783
  const { ref, layoutContext } = useObservedLayoutContext([className]);
3793
3784
  const measurementLayerRef = useRef(null);
3794
- const bootstrapMeasurementLayerRef = useRef(null);
3795
3785
  const completedDomMeasurementKeyRef = useRef(null);
3796
3786
  const domMeasurementSnapshotCacheRef = useRef(new Map);
3797
- const pendingBootstrapTextRef = useRef(bootstrapText);
3798
3787
  const sessionRef = useRef({ ...EMPTY_SESSION });
3799
3788
  const timelineRef = useRef({ ...EMPTY_TIMELINE });
3800
3789
  const [domMeasurementRequestKey, setDomMeasurementRequestKey] = useState(null);
3801
3790
  const [state, setState] = useState(EMPTY_STATE);
3802
- if (pendingBootstrapTextRef.current === null && bootstrapText !== null && bootstrapText !== text && sessionRef.current.committed === null) {
3803
- pendingBootstrapTextRef.current = bootstrapText;
3804
- }
3805
3791
  let measurementHint = sessionRef.current.committed;
3806
3792
  if (sessionRef.current.animating) {
3807
3793
  measurementHint = sessionRef.current.target ?? sessionRef.current.committed;
@@ -3811,26 +3797,11 @@ function useMorphTransition(text, className, bootstrapText = null) {
3811
3797
  layoutContext,
3812
3798
  layoutHint: measurementHint
3813
3799
  }), [text, layoutContext, measurementHint]);
3814
- let pendingBootstrapText = null;
3815
- if (sessionRef.current.committed === null) {
3816
- pendingBootstrapText = pendingBootstrapTextRef.current;
3817
- }
3818
- const bootstrapMeasurementRequest = useMemo(() => {
3819
- if (pendingBootstrapText === null) {
3820
- return null;
3821
- }
3822
- return createMorphMeasurementRequest({
3823
- text: pendingBootstrapText,
3824
- layoutContext,
3825
- layoutHint: null
3826
- });
3827
- }, [pendingBootstrapText, layoutContext]);
3828
3800
  const renderText = measurementRequest?.renderText ?? text;
3829
3801
  const useContentInlineSize = measurementRequest?.useContentInlineSize ?? false;
3830
3802
  const measurementBackend = measurementRequest?.measurementBackend ?? null;
3831
3803
  const segments = measurementRequest?.segments ?? EMPTY_SEGMENTS;
3832
3804
  const domMeasurementKey = measurementRequest?.domMeasurementKey ?? null;
3833
- const shouldRenderBootstrapSourceMeasurementLayer = bootstrapMeasurementRequest?.domMeasurementKey !== null;
3834
3805
  useLayoutEffect(() => {
3835
3806
  if (ref.current === null || layoutContext === null) {
3836
3807
  completedDomMeasurementKeyRef.current = null;
@@ -3852,36 +3823,6 @@ function useMorphTransition(text, className, bootstrapText = null) {
3852
3823
  });
3853
3824
  return;
3854
3825
  }
3855
- if (pendingBootstrapText !== null && pendingBootstrapText !== text && bootstrapMeasurementRequest !== null && measurementRequest !== null) {
3856
- let bootstrapDomSnapshot = null;
3857
- if (bootstrapMeasurementRequest.domMeasurementKey !== null && canCacheMeasurementLayerSnapshot(bootstrapMeasurementRequest.measurementBackend)) {
3858
- bootstrapDomSnapshot = readCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, bootstrapMeasurementRequest.domMeasurementKey);
3859
- }
3860
- if (bootstrapMeasurementRequest.domMeasurementKey !== null && bootstrapDomSnapshot === null && bootstrapMeasurementLayerRef.current === null) {
3861
- return;
3862
- }
3863
- const bootstrapMeasurement = measureFromNodes({
3864
- root: ref.current,
3865
- layoutContext,
3866
- layoutHint: null,
3867
- layer: bootstrapMeasurementLayerRef.current,
3868
- measurementBackend: bootstrapMeasurementRequest.measurementBackend,
3869
- snapshotOverride: bootstrapDomSnapshot,
3870
- text: bootstrapMeasurementRequest.text,
3871
- renderText: bootstrapMeasurementRequest.renderText,
3872
- segments: bootstrapMeasurementRequest.segments
3873
- });
3874
- if (bootstrapMeasurementRequest.domMeasurementKey !== null && bootstrapDomSnapshot === null && canCacheMeasurementLayerSnapshot(bootstrapMeasurementRequest.measurementBackend)) {
3875
- rememberCachedMorphSnapshot(domMeasurementSnapshotCacheRef.current, bootstrapMeasurementRequest.domMeasurementKey, bootstrapMeasurement.snapshot);
3876
- }
3877
- completedDomMeasurementKeyRef.current = null;
3878
- pendingBootstrapTextRef.current = null;
3879
- if (domMeasurementRequestKey !== null) {
3880
- setDomMeasurementRequestKey(null);
3881
- }
3882
- commitStaticMeasurement(sessionRef.current, bootstrapMeasurement, setState);
3883
- return;
3884
- }
3885
3826
  if (domMeasurementKey !== null) {
3886
3827
  let cachedSnapshot = null;
3887
3828
  if (canCacheMeasurementLayerSnapshot(measurementBackend)) {
@@ -3968,8 +3909,6 @@ function useMorphTransition(text, className, bootstrapText = null) {
3968
3909
  layoutContext,
3969
3910
  measurementBackend,
3970
3911
  measurementRequest,
3971
- pendingBootstrapText,
3972
- bootstrapMeasurementRequest,
3973
3912
  domMeasurementKey,
3974
3913
  domMeasurementRequestKey
3975
3914
  ]);
@@ -3990,70 +3929,33 @@ function useMorphTransition(text, className, bootstrapText = null) {
3990
3929
  committedMeasurement: sessionRef.current.committed,
3991
3930
  domMeasurementRequestKey,
3992
3931
  ref,
3993
- bootstrapMeasurementLayerRef,
3994
- measurementBackend,
3995
3932
  measurementLayerRef,
3996
3933
  renderText,
3997
3934
  segments,
3998
3935
  layoutContext,
3999
3936
  state,
4000
- pendingBootstrapText,
4001
- shouldRenderBootstrapSourceMeasurementLayer,
4002
- bootstrapMeasurementRequest,
4003
3937
  useContentInlineSize
4004
3938
  };
4005
3939
  }
4006
- function StaticTorph({ text, className }) {
4007
- return /* @__PURE__ */ jsxDEV("div", {
4008
- className,
4009
- children: [
4010
- /* @__PURE__ */ jsxDEV("span", {
4011
- style: SCREEN_READER_ONLY_STYLE,
4012
- children: text
4013
- }, undefined, false, undefined, this),
4014
- /* @__PURE__ */ jsxDEV("span", {
4015
- "aria-hidden": "true",
4016
- style: FALLBACK_TEXT_STYLE,
4017
- children: text
4018
- }, undefined, false, undefined, this)
4019
- ]
4020
- }, undefined, true, undefined, this);
4021
- }
4022
3940
  function ActiveTorph({
4023
3941
  text,
4024
- className,
4025
- bootstrapText
3942
+ className
4026
3943
  }) {
4027
3944
  const {
4028
3945
  committedMeasurement,
4029
3946
  domMeasurementRequestKey,
4030
3947
  ref,
4031
- bootstrapMeasurementLayerRef,
4032
- measurementBackend,
4033
3948
  measurementLayerRef,
4034
3949
  renderText,
4035
3950
  segments,
4036
3951
  layoutContext,
4037
3952
  state,
4038
- pendingBootstrapText,
4039
- shouldRenderBootstrapSourceMeasurementLayer,
4040
- bootstrapMeasurementRequest,
4041
3953
  useContentInlineSize
4042
- } = useMorphTransition(text, className, bootstrapText);
3954
+ } = useMorphTransition(text, className);
4043
3955
  const plan = state.plan;
4044
3956
  const shouldRenderOverlay = state.stage !== "idle" && plan !== null;
4045
3957
  const shouldRenderMeasurementLayer = domMeasurementRequestKey !== null;
4046
- const flowText = resolveVisibleFlowText(pendingBootstrapText, committedMeasurement, state.measurement, text);
4047
- let bootstrapMeasurementLayer = null;
4048
- if (shouldRenderBootstrapSourceMeasurementLayer && bootstrapMeasurementRequest !== null) {
4049
- bootstrapMeasurementLayer = /* @__PURE__ */ jsxDEV(MeasurementLayer, {
4050
- layerRef: bootstrapMeasurementLayerRef,
4051
- layoutContext,
4052
- text: bootstrapMeasurementRequest.renderText,
4053
- segments: bootstrapMeasurementRequest.segments,
4054
- useContentInlineSize: bootstrapMeasurementRequest.useContentInlineSize
4055
- }, undefined, false, undefined, this);
4056
- }
3958
+ const flowText = resolveFlowText(committedMeasurement, state.measurement, text);
4057
3959
  let measurementLayer = null;
4058
3960
  if (shouldRenderMeasurementLayer) {
4059
3961
  measurementLayer = /* @__PURE__ */ jsxDEV(MeasurementLayer, {
@@ -4085,7 +3987,6 @@ function ActiveTorph({
4085
3987
  style: getFallbackTextStyle(shouldRenderOverlay),
4086
3988
  children: flowText
4087
3989
  }, undefined, false, undefined, this),
4088
- bootstrapMeasurementLayer,
4089
3990
  measurementLayer,
4090
3991
  overlay
4091
3992
  ]
@@ -4095,36 +3996,15 @@ function Torph({
4095
3996
  text,
4096
3997
  className
4097
3998
  }) {
4098
- const [isActivated, setIsActivated] = useState(false);
4099
- const previousTextRef = useRef(text);
4100
- const bootstrapText = resolveActivationBootstrapText(isActivated, previousTextRef.current, text);
4101
- const shouldActivate = isActivated || bootstrapText !== null;
4102
- useLayoutEffect(() => {
4103
- if (!isActivated && text !== previousTextRef.current) {
4104
- previousTextRef.current = text;
4105
- setIsActivated(true);
4106
- return;
4107
- }
4108
- previousTextRef.current = text;
4109
- }, [isActivated, text]);
4110
- if (shouldActivate) {
4111
- return /* @__PURE__ */ jsxDEV(ActiveTorph, {
4112
- text,
4113
- className,
4114
- bootstrapText
4115
- }, undefined, false, undefined, this);
4116
- }
4117
- return /* @__PURE__ */ jsxDEV(StaticTorph, {
3999
+ return /* @__PURE__ */ jsxDEV(ActiveTorph, {
4118
4000
  text,
4119
4001
  className
4120
4002
  }, undefined, false, undefined, this);
4121
4003
  }
4122
4004
  export {
4123
4005
  supportsIntrinsicWidthLock,
4124
- resolveVisibleFlowText,
4125
4006
  resolveMorphFrameBounds,
4126
4007
  resolveFlowText,
4127
- resolveActivationBootstrapText,
4128
4008
  pairMorphCharacters,
4129
4009
  needsMeasurementLayer,
4130
4010
  measureMorphSnapshotFromLayer,
@@ -95,8 +95,6 @@ export declare function getRootDisplay(layoutContext: LayoutContext | null): "gr
95
95
  export declare function getRootStyle(stage: MorphStage, plan: MorphRenderPlan | null, measurement: MorphMeasurement | null, layoutContext: LayoutContext | null): CSSProperties;
96
96
  export declare function getMeasurementLayerStyle(layoutContext: LayoutContext | null, useContentInlineSize?: boolean): CSSProperties;
97
97
  export declare function resolveFlowText(committedMeasurement: MorphMeasurement | null, stateMeasurement: MorphMeasurement | null, text: string): string;
98
- export declare function resolveVisibleFlowText(pendingBootstrapText: string | null, committedMeasurement: MorphMeasurement | null, stateMeasurement: MorphMeasurement | null, text: string): string;
99
- export declare function resolveActivationBootstrapText(isActivated: boolean, previousText: string, nextText: string): string | null;
100
98
  export declare function Torph({ text, className, }: {
101
99
  text: string;
102
100
  className?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@grahlnn/comps",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "description": "React components from grahlnn/comps.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",