From f50fd4d65941820b50c13d8f915feb6feac18de5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E4=B8=80=E5=86=B0?=
 <14512567+sunyibing@user.noreply.gitee.com>
Date: Wed, 7 Aug 2024 17:25:12 +0800
Subject: [PATCH] fix: fix template literal state compute bug and add tests

---
 packages/inula-next/test/computed.test.tsx    | 548 ++++++++++++++++++
 packages/inula-next/test/state.test.tsx       | 351 ++++++++++-
 .../src/analyze/utils.ts                      |   6 +-
 3 files changed, 894 insertions(+), 11 deletions(-)

diff --git a/packages/inula-next/test/computed.test.tsx b/packages/inula-next/test/computed.test.tsx
index 793a6766..8e229e81 100644
--- a/packages/inula-next/test/computed.test.tsx
+++ b/packages/inula-next/test/computed.test.tsx
@@ -87,6 +87,195 @@ describe('Computed Properties', () => {
       container.querySelector('button')!.click();
       expect(resultElement.textContent).toBe('60');
     });
+
+    it('Should correctly compute and render a derived string state', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let firstName = 'John';
+        let lastName = 'Doe';
+        const fullName = `${firstName} ${lastName}`;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateName() {
+          firstName = 'Jane';
+        }
+
+        return (
+          <div>
+            <p data-testid="result">{fullName}</p>
+            <button onClick={updateName}>Update Name</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('John Doe');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Jane Doe');
+    });
+
+    it('Should correctly compute and render a derived number state', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let price = 10;
+        let quantity = 2;
+        const total = price * quantity;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function increaseQuantity() {
+          quantity += 1;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Total: ${total}</p>
+            <button onClick={increaseQuantity}>Add Item</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Total: $20');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Total: $30');
+    });
+
+    it('Should correctly compute and render a derived boolean state', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let age = 17;
+        const isAdult = age >= 18;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function increaseAge() {
+          age += 1;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Is Adult: {isAdult ? 'Yes' : 'No'}</p>
+            <button onClick={increaseAge}>Have Birthday</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Is Adult: No');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Is Adult: Yes');
+    });
+
+    it('Should correctly compute and render a derived array state', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let numbers = [1, 2, 3, 4, 5];
+        const evenNumbers = numbers.filter(n => n % 2 === 0);
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function addNumber() {
+          numbers.push(6);
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Even numbers: {evenNumbers.join(', ')}</p>
+            <button onClick={addNumber}>Add Number</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Even numbers: 2, 4');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Even numbers: 2, 4, 6');
+    });
+
+    it('Should correctly compute and render a derived object state', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let user = { name: 'John', age: 30 };
+        const userSummary = { ...user, isAdult: user.age >= 18 };
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateAge() {
+          user.age = 17;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">
+              {userSummary.name} is {userSummary.isAdult ? 'an adult' : 'not an adult'}
+            </p>
+            <button onClick={updateAge}>Update Age</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('John is an adult');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('John is not an adult');
+    });
+
+    it('Should correctly compute state based on array index', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let items = ['Apple', 'Banana', 'Cherry'];
+        let index = 0;
+        const currentItem = items[index];
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function nextItem() {
+          index = (index + 1) % items.length;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Current item: {currentItem}</p>
+            <button onClick={nextItem}>Next Item</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Current item: Apple');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Current item: Banana');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Current item: Cherry');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Current item: Apple');
+    });
   });
 
   describe('Multiple Dependencies', () => {
@@ -148,6 +337,365 @@ describe('Computed Properties', () => {
       container.querySelectorAll('button')[1].click();
       expect(resultElement.textContent).toBe('17');
     });
+    it('Should correctly compute and render a derived string state from multi dependency', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let firstName = 'John';
+        let lastName = 'Doe';
+        let title = 'Mr.';
+        const fullName = `${title} ${firstName} ${lastName}`;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateName() {
+          firstName = 'Jane';
+          title = 'Ms.';
+        }
+
+        return (
+          <div>
+            <p data-testid="result">{fullName}</p>
+            <button onClick={updateName}>Update Name</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Mr. John Doe');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Ms. Jane Doe');
+    });
+
+    it('Should correctly compute and render a derived number state from multi dependency', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let length = 5;
+        let width = 3;
+        let height = 2;
+        const volume = length * width * height;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateDimensions() {
+          length += 1;
+          width += 2;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Volume: {volume}</p>
+            <button onClick={updateDimensions}>Update Dimensions</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Volume: 30');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Volume: 60');
+    });
+
+    it('Should correctly compute and render a derived boolean state from multi dependency', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let age = 20;
+        let hasLicense = false;
+        let hasCar = true;
+        const canDrive = age >= 18 && hasLicense && hasCar;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateStatus() {
+          hasLicense = true;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Can Drive: {canDrive ? 'Yes' : 'No'}</p>
+            <button onClick={updateStatus}>Get License</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Can Drive: No');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Can Drive: Yes');
+    });
+
+    it('Should correctly compute and render a derived array state from multi dependency', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let numbers1 = [1, 2, 3];
+        let numbers2 = [4, 5, 6];
+        let filterEven = true;
+        const result = [...numbers1, ...numbers2].filter(n => (filterEven ? n % 2 === 0 : n % 2 !== 0));
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function toggleFilter() {
+          filterEven = !filterEven;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Filtered numbers: {result.join(', ')}</p>
+            <button onClick={toggleFilter}>Toggle Filter</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Filtered numbers: 2, 4, 6');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Filtered numbers: 1, 3, 5');
+    });
+
+    it('Should correctly compute and render a derived object state from multi dependency', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let user = { name: 'John', age: 30 };
+        let settings = { theme: 'dark', fontSize: 14 };
+        let isLoggedIn = true;
+        const userProfile = {
+          ...user,
+          ...settings,
+          status: isLoggedIn ? 'Online' : 'Offline',
+        };
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateStatus() {
+          isLoggedIn = false;
+          settings.theme = 'light';
+        }
+
+        return (
+          <div>
+            <p data-testid="result">
+              {userProfile.name} ({userProfile.age}) - {userProfile.status} - Theme: {userProfile.theme}
+            </p>
+            <button onClick={updateStatus}>Logout</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('John (30) - Online - Theme: dark');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('John (30) - Offline - Theme: light');
+    });
+  });
+
+  describe('Advanced Computed States', () => {
+    it('Should support basic arithmetic operations', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let a = 10;
+        let b = 5;
+        const sum = a + b;
+        const difference = a - b;
+        const product = a * b;
+        const quotient = a / b;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        return (
+          <div data-testid="result">
+            <p>Sum: {sum}</p>
+            <p>Difference: {difference}</p>
+            <p>Product: {product}</p>
+            <p>Quotient: {quotient}</p>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.innerHTML).toBe('<p>Sum: 15</p><p>Difference: 5</p><p>Product: 50</p><p>Quotient: 2</p>');
+    });
+
+    it('Should support array indexing', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let arr = [10, 20, 30, 40, 50];
+        let index = 2;
+        const value = arr[index];
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateIndex() {
+          index = 4;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Value: {value}</p>
+            <button onClick={updateIndex}>Update Index</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Value: 30');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Value: 50');
+    });
+
+    it('Should support property access', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let obj = { name: 'John', age: 30 };
+        const name = obj.name;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateName() {
+          obj.name = 'Jane';
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Name: {name}</p>
+            <button onClick={updateName}>Update Name</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Name: John');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Name: Jane');
+    });
+
+    it('Should support function calls', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let numbers = [1, 2, 3, 4, 5];
+        const sum = numbers.reduce((a, b) => a + b, 0);
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        return <p data-testid="result">Sum: {sum}</p>;
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Sum: 15');
+    });
+
+    it('Should support various number operations', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let num = 3.14159;
+        const rounded = Math.round(num);
+        const floored = Math.floor(num);
+        const ceiled = Math.ceil(num);
+        const squared = Math.pow(num, 2);
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        return (
+          <div data-testid="result">
+            <p>Rounded: {rounded}</p>
+            <p>Floored: {floored}</p>
+            <p>Ceiled: {ceiled}</p>
+            <p>Squared: {squared.toFixed(2)}</p>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.innerHTML).toBe('<p>Rounded: 3</p><p>Floored: 3</p><p>Ceiled: 4</p><p>Squared: 9.87</p>');
+    });
+
+    it('Should support map operations', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let numbers = [1, 2, 3, 4, 5];
+        const squaredNumbers = numbers.map(n => n * n);
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        return <p data-testid="result">Squared: {squaredNumbers.join(', ')}</p>;
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Squared: 1, 4, 9, 16, 25');
+    });
+
+    it('Should support conditional expressions', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let age = 20;
+        let hasLicense = true;
+        const canDrive = age >= 18 ? (hasLicense ? 'Yes' : 'No, needs license') : 'No, too young';
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateAge() {
+          age = 16;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Can Drive: {canDrive}</p>
+            <button onClick={updateAge}>Update Age</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Can Drive: Yes');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Can Drive: No, too young');
+    });
   });
 
   describe('Nested Computed Properties', () => {
diff --git a/packages/inula-next/test/state.test.tsx b/packages/inula-next/test/state.test.tsx
index 4bcf9bf6..d5156f38 100644
--- a/packages/inula-next/test/state.test.tsx
+++ b/packages/inula-next/test/state.test.tsx
@@ -25,20 +25,351 @@ vi.mock('../src/scheduler', async () => {
   };
 });
 
-describe('state', () => {
-  it('should support "++"', ({ container }) => {
-    let incrementCount: () => void;
-    function UserInput() {
+describe('Declare state', () => {
+  it('Should correctly declare and render a string state variable', ({ container }) => {
+    function StringState() {
+      let str = 'Hello, World!';
+      return <p>{str}</p>;
+    }
+    render(StringState, container);
+    expect(container.innerHTML).toBe('<p>Hello, World!</p>');
+  });
+
+  it('Should correctly declare and render a number state variable', ({ container }) => {
+    function NumberState() {
+      let num = 42;
+      return <p>{num}</p>;
+    }
+    render(NumberState, container);
+    expect(container.innerHTML).toBe('<p>42</p>');
+  });
+
+  it('Should correctly declare and render a boolean state variable', ({ container }) => {
+    function BooleanState() {
+      let bool = true;
+      return <p>{bool.toString()}</p>;
+    }
+    render(BooleanState, container);
+    expect(container.innerHTML).toBe('<p>true</p>');
+  });
+
+  it('Should correctly declare and render an array state variable', ({ container }) => {
+    function ArrayState() {
+      let arr = [1, 2, 3];
+      return <p>{arr.join(', ')}</p>;
+    }
+    render(ArrayState, container);
+    expect(container.innerHTML).toBe('<p>1, 2, 3</p>');
+  });
+
+  it('Should correctly declare and render an object state variable', ({ container }) => {
+    function ObjectState() {
+      let obj = { name: 'John', age: 30 };
+      return <p>{`${obj.name}, ${obj.age}`}</p>;
+    }
+    render(ObjectState, container);
+    expect(container.innerHTML).toBe('<p>John, 30</p>');
+  });
+
+  it('Should correctly declare and render a map state variable', ({ container }) => {
+    function MapState() {
+      let map = new Map([
+        ['key1', 'value1'],
+        ['key2', 'value2'],
+      ]);
+      return (
+        <p>
+          {Array.from(map)
+            .map(([k, v]) => `${k}:${v}`)
+            .join(', ')}
+        </p>
+      );
+    }
+    render(MapState, container);
+    expect(container.innerHTML).toBe('<p>key1:value1, key2:value2</p>');
+  });
+
+  it('Should correctly declare and render a set state variable', ({ container }) => {
+    function SetState() {
+      let set = new Set([1, 2, 3]);
+      return <p>{Array.from(set).join(', ')}</p>;
+    }
+    render(SetState, container);
+    expect(container.innerHTML).toBe('<p>1, 2, 3</p>');
+  });
+});
+
+describe('Update state', () => {
+  it('Should correctly update and render a string state variable', ({ container }) => {
+    let updateStr: () => void;
+    function StringState() {
+      let str = 'Hello';
+      updateStr = () => {
+        str = 'Hello, World!';
+      };
+      return <p>{str}</p>;
+    }
+    render(StringState, container);
+    expect(container.innerHTML).toBe('<p>Hello</p>');
+    updateStr();
+    expect(container.innerHTML).toBe('<p>Hello, World!</p>');
+  });
+
+  it('Should correctly update and render a number state variable', ({ container }) => {
+    let updateNum: () => void;
+    function NumberState() {
+      let num = 42;
+      updateNum = () => {
+        num = 84;
+      };
+      return <p>{num}</p>;
+    }
+    render(NumberState, container);
+    expect(container.innerHTML).toBe('<p>42</p>');
+    updateNum();
+    expect(container.innerHTML).toBe('<p>84</p>');
+  });
+
+  it('Should correctly update and render a boolean state variable', ({ container }) => {
+    let toggleBool: () => void;
+    function BooleanState() {
+      let bool = true;
+      toggleBool = () => {
+        bool = !bool;
+      };
+      return <p>{bool.toString()}</p>;
+    }
+    render(BooleanState, container);
+    expect(container.innerHTML).toBe('<p>true</p>');
+    toggleBool();
+    expect(container.innerHTML).toBe('<p>false</p>');
+  });
+
+  it('Should correctly update and render an object state variable', ({ container }) => {
+    let updateObj: () => void;
+    function ObjectState() {
+      let obj = { name: 'John', age: 30 };
+      updateObj = () => {
+        obj.age = 31;
+      };
+      return <p>{`${obj.name}, ${obj.age}`}</p>;
+    }
+    render(ObjectState, container);
+    expect(container.innerHTML).toBe('<p>John, 30</p>');
+    updateObj();
+    expect(container.innerHTML).toBe('<p>John, 31</p>');
+  });
+
+  it('Should correctly handle increment operations (n++)', ({ container }) => {
+    let increment: () => void;
+    function IncrementState() {
       let count = 0;
-      incrementCount = () => {
+      increment = () => {
         count++;
       };
+      return <p>{count}</p>;
+    }
+    render(IncrementState, container);
+    expect(container.innerHTML).toBe('<p>0</p>');
+    increment();
+    expect(container.innerHTML).toBe('<p>1</p>');
+  });
 
-      return <h1>{count}</h1>;
+  it('Should correctly handle decrement operations (n--)', ({ container }) => {
+    let decrement: () => void;
+    function DecrementState() {
+      let count = 5;
+      decrement = () => {
+        count--;
+      };
+      return <p>{count}</p>;
+    }
+    render(DecrementState, container);
+    expect(container.innerHTML).toBe('<p>5</p>');
+    decrement();
+    expect(container.innerHTML).toBe('<p>4</p>');
+  });
+
+  it('Should correctly handle operations (+=)', ({ container }) => {
+    let addValue: (value: number) => void;
+    function AdditionAssignmentState() {
+      let count = 10;
+      addValue = (value: number) => {
+        count += value;
+      };
+      return <p>{count}</p>;
+    }
+    render(AdditionAssignmentState, container);
+    expect(container.innerHTML).toBe('<p>10</p>');
+    addValue(5);
+    expect(container.innerHTML).toBe('<p>15</p>');
+    addValue(-3);
+    expect(container.innerHTML).toBe('<p>12</p>');
+  });
+
+  it('Should correctly handle operations (-=)', ({ container }) => {
+    let subtractValue: (value: number) => void;
+    function SubtractionAssignmentState() {
+      let count = 20;
+      subtractValue = (value: number) => {
+        count -= value;
+      };
+      return <p>{count}</p>;
+    }
+    render(SubtractionAssignmentState, container);
+    expect(container.innerHTML).toBe('<p>20</p>');
+    subtractValue(7);
+    expect(container.innerHTML).toBe('<p>13</p>');
+    subtractValue(-4);
+    expect(container.innerHTML).toBe('<p>17</p>');
+  });
+
+  it('Should correctly update and render a state variable as an index of array', ({ container }) => {
+    let updateIndex: () => void;
+    function ArrayIndexState() {
+      const items = ['Apple', 'Banana', 'Cherry', 'Date'];
+      let index = 0;
+      updateIndex = () => {
+        index = (index + 1) % items.length;
+      };
+      return <p>{items[index]}</p>;
+    }
+    render(ArrayIndexState, container);
+    expect(container.innerHTML).toBe('<p>Apple</p>');
+    updateIndex();
+    expect(container.innerHTML).toBe('<p>Banana</p>');
+    updateIndex();
+    expect(container.innerHTML).toBe('<p>Cherry</p>');
+    updateIndex();
+    expect(container.innerHTML).toBe('<p>Date</p>');
+    updateIndex();
+    expect(container.innerHTML).toBe('<p>Apple</p>');
+  });
+
+  it('Should correctly update and render a state variable as a property of an object', ({ container }) => {
+    let updatePerson: () => void;
+    function ObjectPropertyState() {
+      let person = { name: 'Alice', age: 30, job: 'Engineer' };
+      updatePerson = () => {
+        person.age += 1;
+        person.job = 'Senior Engineer';
+      };
+      return (
+        <div>
+          <p>Name: {person.name}</p>
+          <p>Age: {person.age}</p>
+          <p>Job: {person.job}</p>
+        </div>
+      );
+    }
+    render(ObjectPropertyState, container);
+    expect(container.innerHTML).toBe('<div><p>Name: Alice</p><p>Age: 30</p><p>Job: Engineer</p></div>');
+    updatePerson();
+    expect(container.innerHTML).toBe('<div><p>Name: Alice</p><p>Age: 31</p><p>Job: Senior Engineer</p></div>');
+  });
+
+  it('Should correctly update and render an array state variable - push operation', ({ container }) => {
+    let pushItem: () => void;
+    function ArrayPushState() {
+      let items = ['Apple', 'Banana'];
+      pushItem = () => {
+        items.push('Cherry');
+      };
+      return <p>{items.join(', ')}</p>;
+    }
+    render(ArrayPushState, container);
+    expect(container.innerHTML).toBe('<p>Apple, Banana</p>');
+    pushItem();
+    expect(container.innerHTML).toBe('<p>Apple, Banana, Cherry</p>');
+  });
+
+  it('Should correctly update and render an array state variable - pop operation', ({ container }) => {
+    let popItem: () => void;
+    function ArrayPopState() {
+      let items = ['Apple', 'Banana', 'Cherry'];
+      popItem = () => {
+        items.pop();
+      };
+      return <p>{items.join(', ')}</p>;
+    }
+    render(ArrayPopState, container);
+    expect(container.innerHTML).toBe('<p>Apple, Banana, Cherry</p>');
+    popItem();
+    expect(container.innerHTML).toBe('<p>Apple, Banana</p>');
+  });
+
+  it('Should correctly update and render an array state variable - unshift operation', ({ container }) => {
+    let unshiftItem: () => void;
+    function ArrayUnshiftState() {
+      let items = ['Banana', 'Cherry'];
+      unshiftItem = () => {
+        items.unshift('Apple');
+      };
+      return <p>{items.join(', ')}</p>;
+    }
+    render(ArrayUnshiftState, container);
+    expect(container.innerHTML).toBe('<p>Banana, Cherry</p>');
+    unshiftItem();
+    expect(container.innerHTML).toBe('<p>Apple, Banana, Cherry</p>');
+  });
+
+  it('Should correctly update and render an array state variable - shift operation', ({ container }) => {
+    let shiftItem: () => void;
+    function ArrayShiftState() {
+      let items = ['Apple', 'Banana', 'Cherry'];
+      shiftItem = () => {
+        items.shift();
+      };
+      return <p>{items.join(', ')}</p>;
+    }
+    render(ArrayShiftState, container);
+    expect(container.innerHTML).toBe('<p>Apple, Banana, Cherry</p>');
+    shiftItem();
+    expect(container.innerHTML).toBe('<p>Banana, Cherry</p>');
+  });
+
+  it('Should correctly update and render an array state variable - splice operation', ({ container }) => {
+    let spliceItems: () => void;
+    function ArraySpliceState() {
+      let items = ['Apple', 'Banana', 'Cherry', 'Date'];
+      spliceItems = () => {
+        items.splice(1, 2, 'Elderberry', 'Fig');
+      };
+      return <p>{items.join(', ')}</p>;
+    }
+    render(ArraySpliceState, container);
+    expect(container.innerHTML).toBe('<p>Apple, Banana, Cherry, Date</p>');
+    spliceItems();
+    expect(container.innerHTML).toBe('<p>Apple, Elderberry, Fig, Date</p>');
+  });
+
+  it('Should correctly update and render an array state variable - filter operation', ({ container }) => {
+    let filterItems: () => void;
+    function ArrayFilterState() {
+      let items = ['Apple', 'Banana', 'Cherry', 'Date'];
+      filterItems = () => {
+        items = items.filter(item => item.length > 5);
+      };
+      return <p>{items.join(', ')}</p>;
+    }
+    render(ArrayFilterState, container);
+    expect(container.innerHTML).toBe('<p>Apple, Banana, Cherry, Date</p>');
+    filterItems();
+    expect(container.innerHTML).toBe('<p>Banana, Cherry</p>');
+  });
+
+  it('Should correctly update and render an array state variable - map operation', ({ container }) => {
+    let mapItems: () => void;
+    function ArrayMapState() {
+      let items = ['apple', 'banana', 'cherry'];
+      mapItems = () => {
+        items = items.map(item => item.toUpperCase());
+      };
+      return <p>{items.join(', ')}</p>;
     }
-    render(UserInput, container);
-    expect(container.innerHTML).toBe('<h1>0</h1>');
-    incrementCount();
-    expect(container.innerHTML).toBe('<h1>1</h1>');
+    render(ArrayMapState, container);
+    expect(container.innerHTML).toBe('<p>apple, banana, cherry</p>');
+    mapItems();
+    expect(container.innerHTML).toBe('<p>APPLE, BANANA, CHERRY</p>');
   });
 });
diff --git a/packages/transpiler/babel-inula-next-core/src/analyze/utils.ts b/packages/transpiler/babel-inula-next-core/src/analyze/utils.ts
index 92d76574..2918694c 100644
--- a/packages/transpiler/babel-inula-next-core/src/analyze/utils.ts
+++ b/packages/transpiler/babel-inula-next-core/src/analyze/utils.ts
@@ -58,7 +58,11 @@ export function extractFnBody(node: t.FunctionExpression | t.ArrowFunctionExpres
 }
 
 export function isStaticValue(node: t.VariableDeclarator['init']) {
-  return t.isLiteral(node) || t.isArrowFunctionExpression(node) || t.isFunctionExpression(node);
+  return (
+    (t.isLiteral(node) && !t.isTemplateLiteral(node)) ||
+    t.isArrowFunctionExpression(node) ||
+    t.isFunctionExpression(node)
+  );
 }
 
 export function assertComponentNode(node: any): asserts node is ComponentNode {
-- 
Gitee