fix(reloadState): stabilize render edge cases

Author: ido-pluto

examples/simple-form/package.json

@@ -17,7 +17,7 @@
     "@astrojs/react": "^3.6.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "astro": "^4.7.0",
+    "astro": "^4.16.19",
     "bootstrap": "^5.3.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

examples/simple-form/src/components/SubState.astro

@@ -1,17 +1,23 @@
 ---
 import { BButton, Bind, BindForm } from "@astro-utils/forms/forms.js";
 
-const bind = Bind();
-const { session, forms } = Astro.locals;
+interface Props {
+    incParentCounter: () => void;
+    debugParam?: string;
+}
+
+const { incParentCounter, debugParam } = Astro.props;
+const bind = Bind({counter: 0, debugParam});
+const { forms } = Astro.locals;
 
 async function onSubmit(){
-    session.counter ??= 0;
-    session.counter++;
+    bind.counter++;
+    incParentCounter();
     forms.reloadState();
 }
 
 ---
 <BindForm {bind}>
-    <p>Counter of sub-state: {session.counter}</p>
+    <p>Counter of sub-state: {bind.counter}</p>
     <BButton onClick={onSubmit}>Button From Sub-State</BButton>
 </BindForm>

examples/simple-form/src/pages/child-rephrase-parent.astro

@@ -1,29 +1,37 @@
 ---
-import { BButton, Bind, BindForm, BInput } from "@astro-utils/forms/forms.js";
+import { BButton, Bind, BindForm, BInput } from '@astro-utils/forms/forms.js';
 import { Button } from 'reactstrap';
-import Layout from "../layouts/Layout.astro";
-import SubState from "../components/SubState.astro";
+import Layout from '../layouts/Layout.astro';
+import SubState from '../components/SubState.astro';
 
-const { session } = Astro.locals;
-const bind = Bind();
+const bind = Bind({counter: 0});
 
 async function increaseCounter() {
-    session.counter ??= 0
-    session.counter++;
+    bind.counter++;
 }
-
 ---
-<Layout title="counter">
+
+<Layout title='counter'>
     <p>
         The inner state reload the parent state, so the parent state will show the new date from the child. <br />
         In this example when you click on the inner-state counter, it will reload the parent counter as well.
     </p>
     <BindForm {bind}>
-        <BInput name="name" />
-        <BButton as={Button} onClick={increaseCounter}>++</BButton>
-        {session.counter}
+        <BindForm>
+            <BInput name='name' />
+            <BButton as={Button} onClick={increaseCounter}>++</BButton>
+            {bind.counter}
+
+            <p>Sub-state1</p>
+            {[<SubState incParentCounter={increaseCounter} debugParam='1' />, <SubState incParentCounter={increaseCounter} debugParam='2' />]}
+
+        </BindForm>
+
+        <BindForm>
+            <BInput name='name' />
+            <p>Sub-state2</p>
+            {[<SubState incParentCounter={increaseCounter} debugParam='3' />, <SubState incParentCounter={increaseCounter} debugParam='4' />]}
 
-        <p>Sub-state</p>
-        <SubState />
+        </BindForm>
     </BindForm>
-</Layout>
+</Layout>