feat(core): add Sugar#useTransform method

packages/core/src/sugar/index.ts

@@ -18,6 +18,7 @@ import {
   ValidationStage,
   FailFn,
 } from './useValidation';
+import { useTransform, SugarUseTransform } from './useTransform';
 import { useIsPending, SugarUseIsPending } from './useIsPending';
 
 export class SugarInner<T extends SugarValue> {
@@ -290,6 +291,11 @@ export class SugarInner<T extends SugarValue> {
   ) =>
     useValidation(this as Sugar<T>, validator, deps)) as SugarUseValidation<T>;
 
+  useTransform: SugarUseTransform<T> = (<U extends SugarValue>(config: {
+    forward: (value: T) => Promise<U>;
+    backward: (value: U) => Promise<T>;
+  }) => useTransform(this as Sugar<T>, config)) as SugarUseTransform<T>;
+
   useIsPending: SugarUseIsPending = (() =>
     useIsPending(this as Sugar<T>)) as SugarUseIsPending;
 }

packages/core/src/sugar/types.ts

@@ -39,6 +39,7 @@ export type SugarTemplateSetter<T extends SugarValue> = (
 
 import type { SugarUseObject } from './useObject';
 import type { SugarUseValidation } from './useValidation';
+import type { SugarUseTransform } from './useTransform';
 import type { SugarUseIsPending } from './useIsPending';
 
 type SugarType<T extends SugarValue> = {
@@ -53,6 +54,7 @@ type SugarType<T extends SugarValue> = {
   destroy: () => void;
   useObject: SugarUseObject<T>;
   useValidation: SugarUseValidation<T>;
+  useTransform: SugarUseTransform<T>;
   useIsPending: SugarUseIsPending;
   addEventListener: <K extends keyof SugarEvent>(
     type: K,

packages/core/src/sugar/useTransform.ts

@@ -0,0 +1,72 @@
+import { useEffect, useRef } from 'react';
+import { Sugar, SugarGetResult, SugarValue } from './types';
+import { SugarInner } from '.';
+
+export type SugarTransformConfig<T extends SugarValue, U extends SugarValue> = {
+  forward: (value: T) => Promise<U>;
+  backward: (value: U) => Promise<T>;
+};
+
+export type SugarUseTransform<T extends SugarValue> = <U extends SugarValue>(
+  config: SugarTransformConfig<T, U>
+) => Sugar<U>;
+
+export function useTransform<T extends SugarValue, U extends SugarValue>(
+  sugar: Sugar<T>,
+  config: SugarTransformConfig<T, U>
+): Sugar<U> {
+  const transformedSugar = useRef<Sugar<U>>(undefined);
+
+  if (!transformedSugar.current) {
+    transformedSugar.current = new SugarInner<U>({ status: 'pending' });
+  }
+
+  useEffect(() => {
+    transformedSugar.current!.addEventListener('change', () =>
+      sugar.dispatchEvent('change')
+    );
+    transformedSugar.current!.addEventListener('blur', () =>
+      sugar.dispatchEvent('blur')
+    );
+
+    sugar.ready(
+      async (submit) => {
+        const transformedResult = await transformedSugar.current!.get(submit);
+        if (transformedResult.result !== 'success') {
+          return transformedResult as SugarGetResult<T>;
+        }
+        const originalValue = await config.backward(transformedResult.value);
+        return {
+          result: 'success',
+          value: originalValue,
+        };
+      },
+      async (value) => {
+        const transformedValue = await config.forward(value);
+        return await transformedSugar.current!.set(transformedValue);
+      },
+      async (value, executeSet = true) => {
+        const transformedValue = await config.forward(value);
+        return await transformedSugar.current!.setTemplate(
+          transformedValue,
+          executeSet
+        );
+      }
+    );
+
+    const originalTemplate = (sugar as SugarInner<T>).template;
+    if (originalTemplate?.status === 'pending') {
+      (transformedSugar.current as SugarInner<U>).setPendingTemplate();
+    } else if (originalTemplate?.status === 'resolved') {
+      config.forward(originalTemplate.value).then((transformedValue) => {
+        transformedSugar.current!.setTemplate(transformedValue, false);
+      });
+    }
+
+    return () => {
+      transformedSugar.current!.destroy();
+    };
+  }, [sugar, config]);
+
+  return transformedSugar.current!;
+}

tests/core-unittest/src/useTransform-simple.spec.tsx

@@ -0,0 +1,52 @@
+import { useForm, TextInput } from '@sugarform/core';
+import { render, renderHook } from '@testing-library/react';
+import { expect, test } from 'vitest';
+
+test('useTransform basic functionality', async () => {
+  const { result: form } = renderHook(() =>
+    useForm<string | null>({ template: null })
+  );
+
+  const { result: transformedSugar } = renderHook(() =>
+    form.current.sugar.useTransform<string>({
+      forward: async (value: string | null) => value ?? '',
+      backward: async (value: string) => (value === '' ? null : value),
+    })
+  );
+
+  render(<TextInput sugar={transformedSugar.current} placeholder="input" />);
+
+  await expect(form.current.sugar.get()).resolves.toStrictEqual({
+    result: 'success',
+    value: null,
+  });
+
+  await expect(transformedSugar.current.get()).resolves.toStrictEqual({
+    result: 'success',
+    value: '',
+  });
+
+  await transformedSugar.current.set('test');
+
+  await expect(form.current.sugar.get()).resolves.toStrictEqual({
+    result: 'success',
+    value: 'test',
+  });
+
+  await expect(transformedSugar.current.get()).resolves.toStrictEqual({
+    result: 'success',
+    value: 'test',
+  });
+
+  await transformedSugar.current.set('');
+
+  await expect(form.current.sugar.get()).resolves.toStrictEqual({
+    result: 'success',
+    value: null,
+  });
+
+  await expect(transformedSugar.current.get()).resolves.toStrictEqual({
+    result: 'success',
+    value: '',
+  });
+});