fix(nested-forms): stack loading nested forms

withastro-utils · May 8, 2024 · b2caa6e · b2caa6e
1 parent deadffe
commit b2caa6e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 14 deletions.
diff --git a/examples/simple-form/src/pages/multi-forms.astro b/examples/simple-form/src/pages/multi-forms.astro
@@ -15,10 +15,10 @@ function submit(){
     <BindForm bind={bind1}>
         <BInput type='int' name='num' />
         <BButton onClick={submit} extra={bind1}>Increase</BButton>
-    </BindForm>
 
-    <BindForm bind={bind2}>
-        <BInput type='int' name='num' />
-        <BButton onClick={submit} extra={bind2}>Increase</BButton>
+        <BindForm bind={bind2}>
+            <BInput type='int' name='num' />
+            <BButton onClick={submit} extra={bind2}>Increase</BButton>
+        </BindForm>
     </BindForm>
 </Layout>
diff --git a/packages/context/src/index.ts b/packages/context/src/index.ts
@@ -33,8 +33,8 @@ export async function asyncContext<T>(promise: () => Promise<T>, astro: ContextA
     const contextHistory = getContextHistory(astro, name);
 
     contextHistory.push({
-        ...(context ?? astro.props),
-        ...contextHistory.at(-1)
+        ...contextHistory.at(-1),
+        ...(context ?? astro.props)
     });
 
     let resolver: () => void | null;

diff --git a/packages/forms/src/components/WebForms.astro b/packages/forms/src/components/WebForms.astro
@@ -10,8 +10,17 @@ const context = {
     webFormsSettings: { haveFileUpload: false },
     tempValues: {},
     viewStates: {
-        counter: 0,
-        store: {},
+        counterHash: new Map<any, number>(),
+        lastCounter: 0,
+        incCounter(ref: any){
+            const haveCounter = context.viewStates.counterHash.get(ref);
+            if(haveCounter) {
+                return haveCounter;
+            }
+            
+            context.viewStates.counterHash.set(ref, context.viewStates.lastCounter);
+            return context.viewStates.lastCounter++;
+        }
     },
 };
 

diff --git a/packages/forms/src/components/form/BindForm.astro b/packages/forms/src/components/form/BindForm.astro
@@ -11,7 +11,7 @@ export interface Props {
     defaultSubmitClick?: string | false;
 }
 
-const { viewStates } = getContext(Astro, '@astro-utils/forms');
+const { viewStates, bindCounter: parantBindCounter = '' } = getContext(Astro, '@astro-utils/forms');
 const { bind = Bind(), defaultSubmitClick } = Astro.props;
 const context = {
     executeAfter: [],
@@ -22,7 +22,7 @@ const context = {
     onSubmitClickGlobal: defaultSubmitClick,
     buttonIds: [] as [string, string | null, boolean][],
     settings: {showValidationErrors: false},
-    bindCounter: viewStates.counter++
+    bindCounter: viewStates.incCounter(bind)
 };
 
 const viewState = new ViewStateManager(bind, context.elementsState, Astro, context.bindCounter);
@@ -37,15 +37,15 @@ if (!haveState) {
 }
 
 // Get information about the form
-await asyncContext(() => Astro.slots.render('default'), Astro, { name: '@astro-utils/forms', context, lock: 'bindForm' });
+await asyncContext(() => Astro.slots.render('default'), Astro, { name: '@astro-utils/forms', context, lock: 'bindForm' + parantBindCounter });
 
 // resert the form execution
 context.tempBindValues = {};
 context.executeAfter = [];
 
 // first 'GET' render
 context.method = Astro.request.method;
-let htmlSolt = await asyncContext(() => Astro.slots.render('default'), Astro, { name: '@astro-utils/forms', context, lock: 'bindForm' });
+let htmlSolt = await asyncContext(() => Astro.slots.render('default'), Astro, { name: '@astro-utils/forms', context, lock: 'bindForm' + parantBindCounter });
 bind.__finishFormValidation();
 
 for (const func of context.executeAfter) {
@@ -55,7 +55,7 @@ for (const func of context.executeAfter) {
 if (context.method == 'POST') {
     context.method = 'GET';
     context.tempBindValues = {};
-    htmlSolt = await asyncContext(() => Astro.slots.render('default'), Astro, { name: '@astro-utils/forms', context, lock: 'bindForm' });
+    htmlSolt = await asyncContext(() => Astro.slots.render('default'), Astro, { name: '@astro-utils/forms', context, lock: 'bindForm' + parantBindCounter });
 }
 
 // Edit form render, add default submit button
@@ -67,7 +67,7 @@ if (context.onSubmitClickGlobal == null && context.buttonIds.length > 0) {
     context.onSubmitClickGlobal = state.id;
 
     context.tempBindValues = {};
-    htmlSolt = await asyncContext(() => Astro.slots.render('default'), Astro, { name: '@astro-utils/forms', context, lock: 'bindForm' });
+    htmlSolt = await asyncContext(() => Astro.slots.render('default'), Astro, { name: '@astro-utils/forms', context, lock: 'bindForm' + parantBindCounter });
 }
 ---