From ab121cc0f9a0c2bfe51e9ec4452064076ea519ce Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Thu, 12 Jun 2025 17:34:17 +0000
Subject: [PATCH 1/3] feat(core)!: implement template loading state with
 pending/resolved status
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add SugarTemplateState type supporting pending and resolved states
- Implement useIsPending hook for React components to track loading state
- Update SugarInner to handle new template state structure
- Modify useObject to propagate pending state to nested Sugar instances
- Update useForm interface to accept new template format
- Add comprehensive tests for template loading functionality
- Update all existing tests to use new template format

BREAKING CHANGE: Template type changed from T | undefined to SugarTemplateState<T>
which supports { status: 'pending' } | { status: 'resolved', value: T } | undefined

Co-Authored-By: あすぱる <contact@aspulse.dev>
---
 packages/core/src/form/index.ts               |   9 +-
 packages/core/src/lib.ts                      |   2 +-
 packages/core/src/sugar/index.ts              |  26 ++++-
 packages/core/src/sugar/types.ts              |   8 ++
 packages/core/src/sugar/useIsPending.ts       |  28 +++++
 packages/core/src/sugar/useObject.ts          |  53 ++++++++-
 tests/core-unittest/src/collect.spec.tsx      |  10 +-
 tests/core-unittest/src/component.spec.tsx    |   8 +-
 .../src/destroyBeforeReady.spec.tsx           |   4 +-
 tests/core-unittest/src/setTemplate.spec.tsx  |  47 +++++---
 tests/core-unittest/src/useIsPending.spec.tsx | 107 ++++++++++++++++++
 tests/sandbox/src/App.tsx                     |  90 ++++++++++++---
 12 files changed, 345 insertions(+), 47 deletions(-)
 create mode 100644 packages/core/src/sugar/useIsPending.ts
 create mode 100644 tests/core-unittest/src/useIsPending.spec.tsx

diff --git a/packages/core/src/form/index.ts b/packages/core/src/form/index.ts
index ab60b2d..9627dd1 100644
--- a/packages/core/src/form/index.ts
+++ b/packages/core/src/form/index.ts
@@ -1,6 +1,11 @@
 import { useRef } from 'react';
 import { SugarInner } from '../sugar';
-import { Sugar, SugarValue, SugarGetResult } from '../sugar/types';
+import {
+  Sugar,
+  SugarValue,
+  SugarGetResult,
+  SugarTemplateState,
+} from '../sugar/types';
 
 export interface UseFormResult<T extends SugarValue> {
   sugar: Sugar<T>;
@@ -10,7 +15,7 @@ export interface UseFormResult<T extends SugarValue> {
 export const useForm = <T extends SugarValue>({
   template,
 }: {
-  template?: T;
+  template?: SugarTemplateState<T>;
 } = {}): UseFormResult<T> => {
   const sugar = useRef<Sugar<T>>(undefined);
   if (!sugar.current) {
diff --git a/packages/core/src/lib.ts b/packages/core/src/lib.ts
index a1ff34a..07b9fc6 100644
--- a/packages/core/src/lib.ts
+++ b/packages/core/src/lib.ts
@@ -2,4 +2,4 @@ export { useForm } from './form';
 export type { UseFormResult } from './form';
 export { TextInput } from './components/textInput';
 export { NumberInput } from './components/numberInput';
-export type { Sugar } from './sugar/types';
+export type { Sugar, SugarTemplateState } from './sugar/types';
diff --git a/packages/core/src/sugar/index.ts b/packages/core/src/sugar/index.ts
index 8b6ed3c..a1b45ef 100644
--- a/packages/core/src/sugar/index.ts
+++ b/packages/core/src/sugar/index.ts
@@ -7,6 +7,7 @@ import {
   SugarSetResult,
   SugarSetter,
   SugarTemplateSetter,
+  SugarTemplateState,
   SugarValue,
   SugarValueObject,
 } from './types';
@@ -17,6 +18,7 @@ import {
   ValidationStage,
   FailFn,
 } from './useValidation';
+import { useIsPending, SugarUseIsPending } from './useIsPending';
 
 export class SugarInner<T extends SugarValue> {
   // Sugarは、get/setができるようになるまでに、Reactのレンダリングを待つ必要があります。
@@ -63,12 +65,12 @@ export class SugarInner<T extends SugarValue> {
         status: 'unavailable';
       };
 
-  template: T | undefined;
+  template: SugarTemplateState<T>;
   private validators: Set<
     (stage: ValidationStage, value: T) => Promise<boolean>
   > = new Set();
 
-  constructor(template?: T) {
+  constructor(template?: SugarTemplateState<T>) {
     const { promise: getPromise, resolve: resolveGetPromise } =
       Promise.withResolvers<SugarGetResult<T>>();
     const { promise: setPromise, resolve: resolveSetPromise } =
@@ -155,7 +157,8 @@ export class SugarInner<T extends SugarValue> {
   }
 
   setTemplate(value: T, executeSet = true): Promise<SugarSetResult<T>> {
-    this.template = value;
+    this.template = { status: 'resolved', value };
+    this.dispatchEvent('templateChange');
 
     switch (this.status.status) {
       case 'unavailable':
@@ -181,6 +184,18 @@ export class SugarInner<T extends SugarValue> {
     }
   }
 
+  setPendingTemplate(): void {
+    this.template = { status: 'pending' };
+    this.dispatchEvent('templateChange');
+  }
+
+  private getTemplateValue(): T | undefined {
+    if (this.template?.status === 'resolved') {
+      return this.template.value;
+    }
+    return undefined;
+  }
+
   private eventTarget: EventTarget = new EventTarget();
 
   addEventListener<K extends keyof SugarEvent>(
@@ -214,7 +229,7 @@ export class SugarInner<T extends SugarValue> {
       const status = this.status;
       status.lock = true;
 
-      const initial = status.recentValue ?? this.template;
+      const initial = status.recentValue ?? this.getTemplateValue();
       if (initial !== undefined) {
         status.resolveSetPromise(await setter(initial));
       }
@@ -273,4 +288,7 @@ export class SugarInner<T extends SugarValue> {
     deps?: React.DependencyList
   ) =>
     useValidation(this as Sugar<T>, validator, deps)) as SugarUseValidation<T>;
+
+  useIsPending: SugarUseIsPending = (() =>
+    useIsPending(this as Sugar<T>)) as SugarUseIsPending;
 }
diff --git a/packages/core/src/sugar/types.ts b/packages/core/src/sugar/types.ts
index 9b8c3b7..1d6fa02 100644
--- a/packages/core/src/sugar/types.ts
+++ b/packages/core/src/sugar/types.ts
@@ -1,6 +1,11 @@
 export type SugarValue = unknown;
 export type SugarValueObject = SugarValue & Record<string, SugarValue>;
 
+export type SugarTemplateState<T extends SugarValue> =
+  | { status: 'pending' }
+  | { status: 'resolved'; value: T }
+  | undefined;
+
 export type SugarGetResult<T extends SugarValue> =
   | {
       result: 'success';
@@ -34,6 +39,7 @@ export type SugarTemplateSetter<T extends SugarValue> = (
 
 import type { SugarUseObject } from './useObject';
 import type { SugarUseValidation } from './useValidation';
+import type { SugarUseIsPending } from './useIsPending';
 
 type SugarType<T extends SugarValue> = {
   get: SugarGetter<T>;
@@ -47,6 +53,7 @@ type SugarType<T extends SugarValue> = {
   destroy: () => void;
   useObject: SugarUseObject<T>;
   useValidation: SugarUseValidation<T>;
+  useIsPending: SugarUseIsPending;
   addEventListener: <K extends keyof SugarEvent>(
     type: K,
     listener: CustomEventListener<SugarEvent[K]>
@@ -75,4 +82,5 @@ export type SugarEvent = {
   change: undefined;
   blur: undefined;
   submit: undefined;
+  templateChange: undefined;
 };
diff --git a/packages/core/src/sugar/useIsPending.ts b/packages/core/src/sugar/useIsPending.ts
new file mode 100644
index 0000000..b5184cc
--- /dev/null
+++ b/packages/core/src/sugar/useIsPending.ts
@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { SugarInner } from '.';
+import { Sugar, SugarValue } from './types';
+
+export type SugarUseIsPending = () => boolean;
+
+export function useIsPending<T extends SugarValue>(sugar: Sugar<T>): boolean {
+  const [isPending, setIsPending] = useState<boolean>(() => {
+    const sugarInner = sugar as unknown as SugarInner<T>;
+    return sugarInner.template?.status === 'pending';
+  });
+
+  useEffect(() => {
+    const updatePendingState = () => {
+      const sugarInner = sugar as unknown as SugarInner<T>;
+      const newIsPending = sugarInner.template?.status === 'pending';
+      setIsPending(newIsPending);
+    };
+
+    sugar.addEventListener('templateChange', updatePendingState);
+
+    return () => {
+      sugar.removeEventListener('templateChange', updatePendingState);
+    };
+  }, [sugar]);
+
+  return isPending;
+}
diff --git a/packages/core/src/sugar/useObject.ts b/packages/core/src/sugar/useObject.ts
index fd0696b..271d3a5 100644
--- a/packages/core/src/sugar/useObject.ts
+++ b/packages/core/src/sugar/useObject.ts
@@ -3,6 +3,7 @@ import {
   Sugar,
   SugarGetResult,
   SugarSetResult,
+  SugarTemplateState,
   SugarValue,
   SugarValueObject,
 } from './types';
@@ -36,7 +37,33 @@ export function useObject<T extends SugarValueObject>(
       {
         get: (target: Record<string, SugarInner<unknown>>, prop: string, _) => {
           if (!(prop in target)) {
-            const s = new SugarInner((sugar as SugarInner<T>).template?.[prop]);
+            const parentTemplate = (sugar as SugarInner<T>).template;
+            let childTemplate: SugarTemplateState<unknown>;
+
+            if (parentTemplate?.status === 'pending') {
+              childTemplate = { status: 'pending' };
+            } else if (parentTemplate?.status === 'resolved') {
+              const parentValue = parentTemplate.value as Record<
+                string,
+                unknown
+              >;
+              if (
+                parentValue &&
+                typeof parentValue === 'object' &&
+                prop in parentValue
+              ) {
+                childTemplate = {
+                  status: 'resolved',
+                  value: parentValue[prop],
+                };
+              } else {
+                childTemplate = undefined;
+              }
+            } else {
+              childTemplate = undefined;
+            }
+
+            const s = new SugarInner(childTemplate);
             sugarInitializer.current.forEach((initializer) => {
               s.addEventListener('change', initializer.dispatchChange);
               s.addEventListener('blur', initializer.dispatchBlur);
@@ -59,10 +86,31 @@ export function useObject<T extends SugarValueObject>(
       dispatchBlur,
     };
 
+    const onTemplateChange = () => {
+      const parentTemplate = (sugar as SugarInner<T>).template;
+      Object.entries(fields.current!).forEach(([key, childSugar]) => {
+        const childSugarInner = childSugar as SugarInner<unknown>;
+        if (parentTemplate?.status === 'pending') {
+          childSugarInner.setPendingTemplate();
+        } else if (parentTemplate?.status === 'resolved') {
+          const parentValue = parentTemplate.value as Record<string, unknown>;
+          if (
+            parentValue &&
+            typeof parentValue === 'object' &&
+            key in parentValue
+          ) {
+            childSugarInner.setTemplate(parentValue[key], false);
+          }
+        }
+      });
+    };
+
     Object.values(fields.current!).forEach((sugar) => {
       sugar.addEventListener('change', dispatchChange);
       sugar.addEventListener('blur', dispatchBlur);
     });
+
+    sugar.addEventListener('templateChange', onTemplateChange);
     sugarInitializer.current.push(initializer);
 
     sugar.ready(
@@ -189,9 +237,10 @@ export function useObject<T extends SugarValueObject>(
       sugar.destroy();
       if (fields.current) {
         Object.values(fields.current).forEach((sugar) => {
-          sugar.removeEventListener('change', dispatchEvent);
+          sugar.removeEventListener('change', dispatchChange);
           sugar.removeEventListener('blur', dispatchBlur);
         });
+        sugar.removeEventListener('templateChange', onTemplateChange);
         sugarInitializer.current = sugarInitializer.current.filter(
           (i) => i !== initializer
         );
diff --git a/tests/core-unittest/src/collect.spec.tsx b/tests/core-unittest/src/collect.spec.tsx
index 40fd27c..62f88dc 100644
--- a/tests/core-unittest/src/collect.spec.tsx
+++ b/tests/core-unittest/src/collect.spec.tsx
@@ -6,7 +6,7 @@ import { describeWithStrict } from '../util/describeWithStrict';
 describeWithStrict('useForm#collect', () => {
   test('collect method should be equivalent to sugar.get(true)', async () => {
     const { result } = renderHook(() =>
-      useForm<string>({ template: 'initial' })
+      useForm({ template: { status: 'resolved', value: 'initial' } })
     );
 
     render(<TextInput sugar={result.current.sugar} />);
@@ -23,7 +23,9 @@ describeWithStrict('useForm#collect', () => {
   });
 
   test('collect method should trigger validation like sugar.get(true)', async () => {
-    const { result } = renderHook(() => useForm({ template: { a: '' } }));
+    const { result } = renderHook(() =>
+      useForm({ template: { status: 'resolved', value: { a: '' } } })
+    );
     const { result: obj } = renderHook(() => result.current.sugar.useObject());
 
     const validate = async (
@@ -48,8 +50,8 @@ describeWithStrict('useForm#collect', () => {
 
   test('collect method should return the same type as sugar.get(true)', async () => {
     const { result } = renderHook(() =>
-      useForm<{ name: string; age: number }>({
-        template: { name: 'John', age: 25 },
+      useForm({
+        template: { status: 'resolved', value: { name: 'John', age: 25 } },
       })
     );
     const { result: obj } = renderHook(() => result.current.sugar.useObject());
diff --git a/tests/core-unittest/src/component.spec.tsx b/tests/core-unittest/src/component.spec.tsx
index 07d0507..57484e4 100644
--- a/tests/core-unittest/src/component.spec.tsx
+++ b/tests/core-unittest/src/component.spec.tsx
@@ -22,7 +22,9 @@ type Component = {
 describeWithStrict('Component requirements', () => {
   describe.each<Component>(Components)('$name', (c) => {
     test('Component should be ready after render', async () => {
-      const { result } = renderHook(() => useForm({ template: c.template }));
+      const { result } = renderHook(() =>
+        useForm({ template: { status: 'resolved', value: c.template } })
+      );
       const get = result.current.sugar.get();
 
       expect(await checkPending(get)).toStrictEqual({ resolved: false });
@@ -39,7 +41,9 @@ describeWithStrict('Component requirements', () => {
     });
 
     test('Sugar should be destroyed after unmount', async () => {
-      const { result } = renderHook(() => useForm({ template: c.template }));
+      const { result } = renderHook(() =>
+        useForm({ template: { status: 'resolved', value: c.template } })
+      );
       const { unmount } = render(<c.Component sugar={result.current.sugar} />);
       await expect(result.current.sugar.get()).resolves.toStrictEqual({
         result: 'success',
diff --git a/tests/core-unittest/src/destroyBeforeReady.spec.tsx b/tests/core-unittest/src/destroyBeforeReady.spec.tsx
index c01e079..b9c17d2 100644
--- a/tests/core-unittest/src/destroyBeforeReady.spec.tsx
+++ b/tests/core-unittest/src/destroyBeforeReady.spec.tsx
@@ -6,7 +6,9 @@ import { checkPending } from '../util/checkPending';
 
 describeWithStrict('Sugar#destroy before ready', () => {
   test('destroy resolves pending promises', async () => {
-    const { result } = renderHook(() => useForm<string>({ template: '' }));
+    const { result } = renderHook(() =>
+      useForm({ template: { status: 'resolved', value: '' } })
+    );
 
     const getPromise = result.current.sugar.get();
     const setPromise = result.current.sugar.set('test');
diff --git a/tests/core-unittest/src/setTemplate.spec.tsx b/tests/core-unittest/src/setTemplate.spec.tsx
index a1a3f7e..4e59c9e 100644
--- a/tests/core-unittest/src/setTemplate.spec.tsx
+++ b/tests/core-unittest/src/setTemplate.spec.tsx
@@ -7,7 +7,7 @@ import { SugarInner } from '../../../packages/core/src/sugar/index';
 describeWithStrict('Sugar#setTemplate', () => {
   test('setTemplate(value, true) updates template and executes set (default behavior)', async () => {
     const { result } = renderHook(() =>
-      useForm<string>({ template: 'original' })
+      useForm({ template: { status: 'resolved', value: 'original' } })
     );
 
     render(<TextInput sugar={result.current.sugar} />);
@@ -21,14 +21,17 @@ describeWithStrict('Sugar#setTemplate', () => {
       value: 'new template',
     });
 
-    expect((result.current.sugar as SugarInner<string>).template).toBe(
-      'new template'
+    expect((result.current.sugar as SugarInner<string>).template).toStrictEqual(
+      {
+        status: 'resolved',
+        value: 'new template',
+      }
     );
   });
 
   test('setTemplate(value, false) updates template only without executing set', async () => {
     const { result } = renderHook(() =>
-      useForm<string>({ template: 'original' })
+      useForm({ template: { status: 'resolved', value: 'original' } })
     );
 
     render(<TextInput sugar={result.current.sugar} />);
@@ -43,14 +46,17 @@ describeWithStrict('Sugar#setTemplate', () => {
       value: 'current value',
     });
 
-    expect((result.current.sugar as SugarInner<string>).template).toBe(
-      'new template'
+    expect((result.current.sugar as SugarInner<string>).template).toStrictEqual(
+      {
+        status: 'resolved',
+        value: 'new template',
+      }
     );
   });
 
   test('setTemplate without executeSet parameter defaults to true', async () => {
     const { result } = renderHook(() =>
-      useForm<string>({ template: 'original' })
+      useForm({ template: { status: 'resolved', value: 'original' } })
     );
 
     render(<TextInput sugar={result.current.sugar} />);
@@ -64,14 +70,19 @@ describeWithStrict('Sugar#setTemplate', () => {
       value: 'new template',
     });
 
-    expect((result.current.sugar as SugarInner<string>).template).toBe(
-      'new template'
+    expect((result.current.sugar as SugarInner<string>).template).toStrictEqual(
+      {
+        status: 'resolved',
+        value: 'new template',
+      }
     );
   });
 
   test('setTemplate works with nested objects', async () => {
     const { result } = renderHook(() =>
-      useForm({ template: { a: 'initial', b: 'initial' } })
+      useForm({
+        template: { status: 'resolved', value: { a: 'initial', b: 'initial' } },
+      })
     );
     const { result: obj } = renderHook(() => result.current.sugar.useObject());
 
@@ -93,9 +104,19 @@ describeWithStrict('Sugar#setTemplate', () => {
 
     expect(
       (result.current.sugar as SugarInner<{ a: string; b: string }>).template
-    ).toStrictEqual({ a: 'new-a', b: 'new-b' });
+    ).toStrictEqual({ status: 'resolved', value: { a: 'new-a', b: 'new-b' } });
 
-    expect((obj.current.fields.a as SugarInner<string>).template).toBe('new-a');
-    expect((obj.current.fields.b as SugarInner<string>).template).toBe('new-b');
+    expect((obj.current.fields.a as SugarInner<string>).template).toStrictEqual(
+      {
+        status: 'resolved',
+        value: 'new-a',
+      }
+    );
+    expect((obj.current.fields.b as SugarInner<string>).template).toStrictEqual(
+      {
+        status: 'resolved',
+        value: 'new-b',
+      }
+    );
   });
 });
diff --git a/tests/core-unittest/src/useIsPending.spec.tsx b/tests/core-unittest/src/useIsPending.spec.tsx
new file mode 100644
index 0000000..0104347
--- /dev/null
+++ b/tests/core-unittest/src/useIsPending.spec.tsx
@@ -0,0 +1,107 @@
+import { TextInput, useForm } from '@sugarform/core';
+import { renderHook, render, act } from '@testing-library/react';
+import { expect, test } from 'vitest';
+import { describeWithStrict } from '../util/describeWithStrict';
+
+describeWithStrict('Sugar#useIsPending', () => {
+  test('returns false when template is resolved', async () => {
+    const { result } = renderHook(() =>
+      useForm({ template: { status: 'resolved', value: 'test' } })
+    );
+
+    const { result: isPendingResult } = renderHook(() =>
+      result.current.sugar.useIsPending()
+    );
+
+    expect(isPendingResult.current).toBe(false);
+  });
+
+  test('returns true when template is pending', async () => {
+    const { result } = renderHook(() =>
+      useForm({ template: { status: 'pending' } })
+    );
+
+    const { result: isPendingResult } = renderHook(() =>
+      result.current.sugar.useIsPending()
+    );
+
+    expect(isPendingResult.current).toBe(true);
+  });
+
+  test('returns false when template is undefined', async () => {
+    const { result } = renderHook(() => useForm({ template: undefined }));
+
+    const { result: isPendingResult } = renderHook(() =>
+      result.current.sugar.useIsPending()
+    );
+
+    expect(isPendingResult.current).toBe(false);
+  });
+
+  test('updates when template changes from pending to resolved', async () => {
+    const { result } = renderHook(() =>
+      useForm<string>({ template: { status: 'pending' } })
+    );
+    
+    const { result: isPendingResult } = renderHook(() => 
+      result.current.sugar.useIsPending()
+    );
+
+    render(<TextInput sugar={result.current.sugar} />);
+    await act(async () => {});
+
+    expect(isPendingResult.current).toBe(true);
+
+    await act(async () => {
+      await result.current.sugar.setTemplate('resolved value');
+    });
+
+    expect(isPendingResult.current).toBe(false);
+  });
+
+  test('propagates pending state to nested objects', async () => {
+    const { result } = renderHook(() =>
+      useForm<Record<string, string>>({ template: { status: 'pending' } })
+    );
+    const { result: obj } = renderHook(() => result.current.sugar.useObject());
+
+    const { result: childIsPendingResult } = renderHook(() => 
+      obj.current.fields.a!.useIsPending()
+    );
+
+    expect(childIsPendingResult.current).toBe(true);
+  });
+
+  test('updates nested objects when parent template changes', async () => {
+    const { result } = renderHook(() =>
+      useForm<Record<string, string>>({ template: { status: 'pending' } })
+    );
+    const { result: obj } = renderHook(() => result.current.sugar.useObject());
+
+    render(
+      <>
+        {/* Fields 'a' and 'b' are guaranteed to exist in the proxy object */}
+        <TextInput sugar={obj.current.fields.a!} />
+        <TextInput sugar={obj.current.fields.b!} />
+      </>
+    );
+    await act(async () => {});
+
+    const { result: childAIsPendingResult } = renderHook(() => 
+      obj.current.fields.a!.useIsPending()
+    );
+    const { result: childBIsPendingResult } = renderHook(() => 
+      obj.current.fields.b!.useIsPending()
+    );
+
+    expect(childAIsPendingResult.current).toBe(true);
+    expect(childBIsPendingResult.current).toBe(true);
+
+    await act(async () => {
+      await result.current.sugar.setTemplate({ a: 'value-a', b: 'value-b' });
+    });
+
+    expect(childAIsPendingResult.current).toBe(false);
+    expect(childBIsPendingResult.current).toBe(false);
+  });
+});
diff --git a/tests/sandbox/src/App.tsx b/tests/sandbox/src/App.tsx
index ea36655..1a9be32 100644
--- a/tests/sandbox/src/App.tsx
+++ b/tests/sandbox/src/App.tsx
@@ -1,7 +1,13 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 // Demo showing how validation errors appear in real usage
 import './App.css';
-import { useForm, TextInput, NumberInput, type Sugar } from '@sugarform/core';
+import {
+  useForm,
+  TextInput,
+  NumberInput,
+  type Sugar,
+  type SugarTemplateState,
+} from '@sugarform/core';
 
 type Birthday = {
   year: number;
@@ -21,36 +27,74 @@ type FormType = {
 };
 
 function App() {
+  const [isLoading, setIsLoading] = useState(true);
+
+  const initialTemplate: SugarTemplateState<FormType> = isLoading
+    ? { status: 'pending' }
+    : {
+        status: 'resolved',
+        value: {
+          person_a: {
+            firstName: 'Alice',
+            lastName: 'Smith',
+            birthday: { year: 2000, month: 1, day: 1 },
+          },
+          person_b: {
+            firstName: 'Bob',
+            lastName: 'Johnson',
+            birthday: { year: 2000, month: 1, day: 1 },
+          },
+        },
+      };
+
   const { sugar, collect } = useForm<FormType>({
-    template: {
-      person_a: {
-        firstName: 'Alice',
-        lastName: 'Smith',
-        birthday: { year: 2000, month: 1, day: 1 },
-      },
-      person_b: {
-        firstName: 'Bob',
-        lastName: 'Johnson',
-        birthday: { year: 2000, month: 1, day: 1 },
-      },
-    },
+    template: initialTemplate,
   });
 
   const { fields } = sugar.useObject();
+  const isPending = sugar.useIsPending();
 
   return (
     <>
       <h1>Hello, Sugarform!</h1>
-      <h2>Person A</h2>
-      <PersonInput sugar={fields.person_a} />
-      <h2>Person B</h2>
-      <PersonInput sugar={fields.person_b} />
+      {isPending ? (
+        <div>Loading template...</div>
+      ) : (
+        <>
+          <h2>Person A</h2>
+          <PersonInput sugar={fields.person_a} />
+          <h2>Person B</h2>
+          <PersonInput sugar={fields.person_b} />
+        </>
+      )}
+      <button
+        type="button"
+        onClick={() => {
+          setIsLoading(false);
+          sugar.setTemplate({
+            person_a: {
+              firstName: 'Alice',
+              lastName: 'Smith',
+              birthday: { year: 2000, month: 1, day: 1 },
+            },
+            person_b: {
+              firstName: 'Bob',
+              lastName: 'Johnson',
+              birthday: { year: 2000, month: 1, day: 1 },
+            },
+          });
+        }}
+        disabled={!isPending}
+      >
+        Load Data
+      </button>
       <button
         type="button"
         onClick={async () => {
           const result = await collect();
           console.log(result);
         }}
+        disabled={isPending}
       >
         collect
       </button>
@@ -60,6 +104,11 @@ function App() {
 
 function PersonInput({ sugar }: { sugar: Sugar<Person> }) {
   const { fields } = sugar.useObject();
+  const isPending = sugar.useIsPending();
+
+  if (isPending) {
+    return <div>Loading person data...</div>;
+  }
 
   return (
     <div>
@@ -78,6 +127,7 @@ function PersonInput({ sugar }: { sugar: Sugar<Person> }) {
 
 function BirthdayInput({ sugar }: { sugar: Sugar<Birthday> }) {
   const { fields } = sugar.useObject();
+  const isPending = sugar.useIsPending();
 
   const errors = sugar.useValidation<string>(
     useCallback(async (value, fail) => {
@@ -107,6 +157,10 @@ function BirthdayInput({ sugar }: { sugar: Sugar<Birthday> }) {
     }, [])
   );
 
+  if (isPending) {
+    return <div>Loading birthday data...</div>;
+  }
+
   return (
     <div>
       <label>

From f0712d5519d49a127efcf6420c760c499c44a679 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Thu, 12 Jun 2025 21:56:05 +0000
Subject: [PATCH 2/3] refactor(core)!: replace templateChange events with
 setTemplate method approach in ready()
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: あすぱる <contact@aspulse.dev>
---
 packages/core/src/sugar/index.ts              |   5 +-
 packages/core/src/sugar/types.ts              |   1 -
 packages/core/src/sugar/useIsPending.ts       |  27 ++++-
 packages/core/src/sugar/useObject.ts          | 107 +++++++++++-------
 tests/core-unittest/src/useIsPending.spec.tsx |  10 +-
 5 files changed, 97 insertions(+), 53 deletions(-)

diff --git a/packages/core/src/sugar/index.ts b/packages/core/src/sugar/index.ts
index a1b45ef..7937fb2 100644
--- a/packages/core/src/sugar/index.ts
+++ b/packages/core/src/sugar/index.ts
@@ -158,7 +158,6 @@ export class SugarInner<T extends SugarValue> {
 
   setTemplate(value: T, executeSet = true): Promise<SugarSetResult<T>> {
     this.template = { status: 'resolved', value };
-    this.dispatchEvent('templateChange');
 
     switch (this.status.status) {
       case 'unavailable':
@@ -186,7 +185,9 @@ export class SugarInner<T extends SugarValue> {
 
   setPendingTemplate(): void {
     this.template = { status: 'pending' };
-    this.dispatchEvent('templateChange');
+    if (this.status.status === 'ready' && this.status.templateSetter) {
+      this.status.templateSetter(undefined as T, false);
+    }
   }
 
   private getTemplateValue(): T | undefined {
diff --git a/packages/core/src/sugar/types.ts b/packages/core/src/sugar/types.ts
index 1d6fa02..8b9be81 100644
--- a/packages/core/src/sugar/types.ts
+++ b/packages/core/src/sugar/types.ts
@@ -82,5 +82,4 @@ export type SugarEvent = {
   change: undefined;
   blur: undefined;
   submit: undefined;
-  templateChange: undefined;
 };
diff --git a/packages/core/src/sugar/useIsPending.ts b/packages/core/src/sugar/useIsPending.ts
index b5184cc..e227b4a 100644
--- a/packages/core/src/sugar/useIsPending.ts
+++ b/packages/core/src/sugar/useIsPending.ts
@@ -11,16 +11,37 @@ export function useIsPending<T extends SugarValue>(sugar: Sugar<T>): boolean {
   });
 
   useEffect(() => {
-    const updatePendingState = () => {
+    const checkPendingState = () => {
       const sugarInner = sugar as unknown as SugarInner<T>;
       const newIsPending = sugarInner.template?.status === 'pending';
       setIsPending(newIsPending);
     };
 
-    sugar.addEventListener('templateChange', updatePendingState);
+    checkPendingState();
+
+    const originalSetTemplate = sugar.setTemplate.bind(sugar);
+    sugar.setTemplate = async (value: T, executeSet = true) => {
+      const result = await originalSetTemplate(value, executeSet);
+      checkPendingState();
+      return result;
+    };
+
+    const sugarInner = sugar as unknown as SugarInner<T>;
+    const originalSetPendingTemplate = sugarInner.setPendingTemplate?.bind(
+      sugarInner
+    );
+    if (originalSetPendingTemplate) {
+      sugarInner.setPendingTemplate = () => {
+        originalSetPendingTemplate();
+        checkPendingState();
+      };
+    }
 
     return () => {
-      sugar.removeEventListener('templateChange', updatePendingState);
+      sugar.setTemplate = originalSetTemplate;
+      if (originalSetPendingTemplate) {
+        sugarInner.setPendingTemplate = originalSetPendingTemplate;
+      }
     };
   }, [sugar]);
 
diff --git a/packages/core/src/sugar/useObject.ts b/packages/core/src/sugar/useObject.ts
index 271d3a5..358da5d 100644
--- a/packages/core/src/sugar/useObject.ts
+++ b/packages/core/src/sugar/useObject.ts
@@ -86,31 +86,11 @@ export function useObject<T extends SugarValueObject>(
       dispatchBlur,
     };
 
-    const onTemplateChange = () => {
-      const parentTemplate = (sugar as SugarInner<T>).template;
-      Object.entries(fields.current!).forEach(([key, childSugar]) => {
-        const childSugarInner = childSugar as SugarInner<unknown>;
-        if (parentTemplate?.status === 'pending') {
-          childSugarInner.setPendingTemplate();
-        } else if (parentTemplate?.status === 'resolved') {
-          const parentValue = parentTemplate.value as Record<string, unknown>;
-          if (
-            parentValue &&
-            typeof parentValue === 'object' &&
-            key in parentValue
-          ) {
-            childSugarInner.setTemplate(parentValue[key], false);
-          }
-        }
-      });
-    };
-
     Object.values(fields.current!).forEach((sugar) => {
       sugar.addEventListener('change', dispatchChange);
       sugar.addEventListener('blur', dispatchBlur);
     });
 
-    sugar.addEventListener('templateChange', onTemplateChange);
     sugarInitializer.current.push(initializer);
 
     sugar.ready(
@@ -205,30 +185,74 @@ export function useObject<T extends SugarValueObject>(
         //   return { result: 'unavailable' };
         // }
 
-        const results: [string, SugarSetResult<unknown>][] = await Promise.all(
-          Object.entries(fields.current!).map(async ([key, s]) => {
-            if (key in value) {
-              const nestedValue = (value as Record<string, unknown>)[key];
-              const result = await s.setTemplate(nestedValue, executeSet);
-              return [key, result];
-            }
-            return [key, { result: 'success' as const }];
-          })
-        );
+        const parentTemplate = (sugar as SugarInner<T>).template;
 
-        const unavailables = results.filter(
-          ([_, value]) => value.result === 'unavailable'
-        );
-        if (unavailables.length > 0) {
-          console.error(
-            `Setting template for useObject sugar: ${unavailables
-              .map(([key, _]) => key)
-              .join(', ')} is unavailable.`
+        if (parentTemplate?.status === 'pending') {
+          await Promise.all(
+            Object.entries(fields.current!).map(async ([_, s]) => {
+              (s as SugarInner<unknown>).setPendingTemplate();
+            })
           );
-          return { result: 'unavailable' };
-        }
+          return { result: 'success' };
+        } else if (parentTemplate?.status === 'resolved') {
+          const parentValue = parentTemplate.value as Record<string, unknown>;
+          const results: [string, SugarSetResult<unknown>][] =
+            await Promise.all(
+              Object.entries(fields.current!).map(async ([key, s]) => {
+                if (
+                  parentValue &&
+                  typeof parentValue === 'object' &&
+                  key in parentValue
+                ) {
+                  const result = await s.setTemplate(
+                    parentValue[key],
+                    executeSet
+                  );
+                  return [key, result];
+                }
+                return [key, { result: 'success' as const }];
+              })
+            );
 
-        return { result: 'success' };
+          const unavailables = results.filter(
+            ([_, value]) => value.result === 'unavailable'
+          );
+          if (unavailables.length > 0) {
+            console.error(
+              `Setting template for useObject sugar: ${unavailables
+                .map(([key, _]) => key)
+                .join(', ')} is unavailable.`
+            );
+            return { result: 'unavailable' };
+          }
+
+          return { result: 'success' };
+        } else {
+          const results: [string, SugarSetResult<unknown>][] =
+            await Promise.all(
+              Object.entries(fields.current!).map(async ([key, s]) => {
+                const result = await s.setTemplate(
+                  undefined as unknown,
+                  executeSet
+                );
+                return [key, result];
+              })
+            );
+
+          const unavailables = results.filter(
+            ([_, value]) => value.result === 'unavailable'
+          );
+          if (unavailables.length > 0) {
+            console.error(
+              `Setting template for useObject sugar: ${unavailables
+                .map(([key, _]) => key)
+                .join(', ')} is unavailable.`
+            );
+            return { result: 'unavailable' };
+          }
+
+          return { result: 'success' };
+        }
       }
     );
 
@@ -240,7 +264,6 @@ export function useObject<T extends SugarValueObject>(
           sugar.removeEventListener('change', dispatchChange);
           sugar.removeEventListener('blur', dispatchBlur);
         });
-        sugar.removeEventListener('templateChange', onTemplateChange);
         sugarInitializer.current = sugarInitializer.current.filter(
           (i) => i !== initializer
         );
diff --git a/tests/core-unittest/src/useIsPending.spec.tsx b/tests/core-unittest/src/useIsPending.spec.tsx
index 0104347..57cdf31 100644
--- a/tests/core-unittest/src/useIsPending.spec.tsx
+++ b/tests/core-unittest/src/useIsPending.spec.tsx
@@ -42,8 +42,8 @@ describeWithStrict('Sugar#useIsPending', () => {
     const { result } = renderHook(() =>
       useForm<string>({ template: { status: 'pending' } })
     );
-    
-    const { result: isPendingResult } = renderHook(() => 
+
+    const { result: isPendingResult } = renderHook(() =>
       result.current.sugar.useIsPending()
     );
 
@@ -65,7 +65,7 @@ describeWithStrict('Sugar#useIsPending', () => {
     );
     const { result: obj } = renderHook(() => result.current.sugar.useObject());
 
-    const { result: childIsPendingResult } = renderHook(() => 
+    const { result: childIsPendingResult } = renderHook(() =>
       obj.current.fields.a!.useIsPending()
     );
 
@@ -87,10 +87,10 @@ describeWithStrict('Sugar#useIsPending', () => {
     );
     await act(async () => {});
 
-    const { result: childAIsPendingResult } = renderHook(() => 
+    const { result: childAIsPendingResult } = renderHook(() =>
       obj.current.fields.a!.useIsPending()
     );
-    const { result: childBIsPendingResult } = renderHook(() => 
+    const { result: childBIsPendingResult } = renderHook(() =>
       obj.current.fields.b!.useIsPending()
     );
 

From dcab8e0b864e608e23d0ad24588c7e34368ae4ce Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 13 Jun 2025 01:48:54 +0000
Subject: [PATCH 3/3] fix(core): address GitHub PR comments - fix TypeScript
 types and Prettier formatting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: あすぱる <contact@aspulse.dev>
---
 packages/core/src/sugar/useIsPending.ts       |  5 +-
 tests/core-unittest/src/useIsPending.spec.tsx | 15 ++--
 tests/sandbox/src/App.tsx                     | 71 ++-----------------
 3 files changed, 16 insertions(+), 75 deletions(-)

diff --git a/packages/core/src/sugar/useIsPending.ts b/packages/core/src/sugar/useIsPending.ts
index e227b4a..57583b4 100644
--- a/packages/core/src/sugar/useIsPending.ts
+++ b/packages/core/src/sugar/useIsPending.ts
@@ -27,9 +27,8 @@ export function useIsPending<T extends SugarValue>(sugar: Sugar<T>): boolean {
     };
 
     const sugarInner = sugar as unknown as SugarInner<T>;
-    const originalSetPendingTemplate = sugarInner.setPendingTemplate?.bind(
-      sugarInner
-    );
+    const originalSetPendingTemplate =
+      sugarInner.setPendingTemplate?.bind(sugarInner);
     if (originalSetPendingTemplate) {
       sugarInner.setPendingTemplate = () => {
         originalSetPendingTemplate();
diff --git a/tests/core-unittest/src/useIsPending.spec.tsx b/tests/core-unittest/src/useIsPending.spec.tsx
index 57cdf31..a6ee0b5 100644
--- a/tests/core-unittest/src/useIsPending.spec.tsx
+++ b/tests/core-unittest/src/useIsPending.spec.tsx
@@ -61,12 +61,12 @@ describeWithStrict('Sugar#useIsPending', () => {
 
   test('propagates pending state to nested objects', async () => {
     const { result } = renderHook(() =>
-      useForm<Record<string, string>>({ template: { status: 'pending' } })
+      useForm<{ a: string }>({ template: { status: 'pending' } })
     );
     const { result: obj } = renderHook(() => result.current.sugar.useObject());
 
     const { result: childIsPendingResult } = renderHook(() =>
-      obj.current.fields.a!.useIsPending()
+      obj.current.fields.a.useIsPending()
     );
 
     expect(childIsPendingResult.current).toBe(true);
@@ -74,24 +74,23 @@ describeWithStrict('Sugar#useIsPending', () => {
 
   test('updates nested objects when parent template changes', async () => {
     const { result } = renderHook(() =>
-      useForm<Record<string, string>>({ template: { status: 'pending' } })
+      useForm<{ a: string; b: string }>({ template: { status: 'pending' } })
     );
     const { result: obj } = renderHook(() => result.current.sugar.useObject());
 
     render(
       <>
-        {/* Fields 'a' and 'b' are guaranteed to exist in the proxy object */}
-        <TextInput sugar={obj.current.fields.a!} />
-        <TextInput sugar={obj.current.fields.b!} />
+        <TextInput sugar={obj.current.fields.a} />
+        <TextInput sugar={obj.current.fields.b} />
       </>
     );
     await act(async () => {});
 
     const { result: childAIsPendingResult } = renderHook(() =>
-      obj.current.fields.a!.useIsPending()
+      obj.current.fields.a.useIsPending()
     );
     const { result: childBIsPendingResult } = renderHook(() =>
-      obj.current.fields.b!.useIsPending()
+      obj.current.fields.b.useIsPending()
     );
 
     expect(childAIsPendingResult.current).toBe(true);
diff --git a/tests/sandbox/src/App.tsx b/tests/sandbox/src/App.tsx
index 1a9be32..d89980e 100644
--- a/tests/sandbox/src/App.tsx
+++ b/tests/sandbox/src/App.tsx
@@ -1,13 +1,7 @@
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 // Demo showing how validation errors appear in real usage
 import './App.css';
-import {
-  useForm,
-  TextInput,
-  NumberInput,
-  type Sugar,
-  type SugarTemplateState,
-} from '@sugarform/core';
+import { useForm, TextInput, NumberInput, type Sugar } from '@sugarform/core';
 
 type Birthday = {
   year: number;
@@ -27,74 +21,23 @@ type FormType = {
 };
 
 function App() {
-  const [isLoading, setIsLoading] = useState(true);
-
-  const initialTemplate: SugarTemplateState<FormType> = isLoading
-    ? { status: 'pending' }
-    : {
-        status: 'resolved',
-        value: {
-          person_a: {
-            firstName: 'Alice',
-            lastName: 'Smith',
-            birthday: { year: 2000, month: 1, day: 1 },
-          },
-          person_b: {
-            firstName: 'Bob',
-            lastName: 'Johnson',
-            birthday: { year: 2000, month: 1, day: 1 },
-          },
-        },
-      };
-
-  const { sugar, collect } = useForm<FormType>({
-    template: initialTemplate,
-  });
+  const { sugar, collect } = useForm<FormType>();
 
   const { fields } = sugar.useObject();
-  const isPending = sugar.useIsPending();
 
   return (
     <>
       <h1>Hello, Sugarform!</h1>
-      {isPending ? (
-        <div>Loading template...</div>
-      ) : (
-        <>
-          <h2>Person A</h2>
-          <PersonInput sugar={fields.person_a} />
-          <h2>Person B</h2>
-          <PersonInput sugar={fields.person_b} />
-        </>
-      )}
-      <button
-        type="button"
-        onClick={() => {
-          setIsLoading(false);
-          sugar.setTemplate({
-            person_a: {
-              firstName: 'Alice',
-              lastName: 'Smith',
-              birthday: { year: 2000, month: 1, day: 1 },
-            },
-            person_b: {
-              firstName: 'Bob',
-              lastName: 'Johnson',
-              birthday: { year: 2000, month: 1, day: 1 },
-            },
-          });
-        }}
-        disabled={!isPending}
-      >
-        Load Data
-      </button>
+      <h2>Person A</h2>
+      <PersonInput sugar={fields.person_a} />
+      <h2>Person B</h2>
+      <PersonInput sugar={fields.person_b} />
       <button
         type="button"
         onClick={async () => {
           const result = await collect();
           console.log(result);
         }}
-        disabled={isPending}
       >
         collect
       </button>