fix(nest-formBind): rerender only once

ido-pluto · ido-pluto · commit 520adc10280a · 2024-05-10T13:19:46.000+03:00
diff --git a/examples/simple-form/src/layouts/Layout.astro b/examples/simple-form/src/layouts/Layout.astro
@@ -6,6 +6,8 @@ interface Props {
 }
 
 const { title } = Astro.props;
+
+export const astroFiles = import.meta.glob('../pages/*.astro', { eager: true });
 ---
 
 <!doctype html>
@@ -19,6 +21,9 @@ const { title } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body>
+		<div class="menu">
+			{Object.values(astroFiles).map((x: any) => <a href={x.url}>{x.url.slice(1)}</a>)}
+		</div>
 		<WebForms>
 			<slot />
 		</WebForms>
@@ -28,4 +33,12 @@ const { title } = Astro.props;
 	html {
 		background: aliceblue;
 	}
+
+	.menu {
+		display: flex;
+		flex-wrap: wrap;
+		gap:20px;
+		justify-content: center;
+		padding: 40px 0;
+	}
 </style>
diff --git a/examples/simple-form/src/pages/counter.astro b/examples/simple-form/src/pages/counter.astro
@@ -1,5 +1,5 @@
 ---
-import { BButton, BindForm } from "@astro-utils/forms/forms.js";
+import { BButton, Bind, BindForm } from "@astro-utils/forms/forms.js";
 import { Button } from 'reactstrap';
 import Layout from "../layouts/Layout.astro";
 
@@ -15,4 +15,4 @@ function increaseCounter() {
         <BButton as={Button} props={{color: 'info'}} onClick={increaseCounter}>++</BButton>
         {session.counter}
     </BindForm>
-<Layout/>
+</Layout>
diff --git a/examples/simple-form/src/pages/default-submit.astro b/examples/simple-form/src/pages/default-submit.astro
@@ -4,13 +4,16 @@ import Layout from '../layouts/Layout.astro';
 
 const bind = Bind();
 
+let message = '';
 function handleSubmit() {
     console.log(bind);
+    message = 'Default submit works!';
 }
 ---
 
 <Layout title='forms'>
     <BindForm bind={bind}>
+        <p>{message}</p>
         <BInput type='text' name='query' placeholder='Enter text'/>
         <BInput type='text' name='query2' placeholder='Input 2'/>
         <BButton onClick={() => console.log('Do nothing')}>Do noting</BButton>
diff --git a/examples/simple-form/src/pages/multi-forms.astro b/examples/simple-form/src/pages/multi-forms.astro
@@ -2,12 +2,14 @@
 import { BButton, BInput, Bind, BindForm } from '@astro-utils/forms/forms.js';
 import Layout from '../layouts/Layout.astro';
 
-const bind1 = Bind({bind: 1, num: 1});
-const bind2 = Bind({bind: 2, num: 2});
+const bind1 = Bind({ bind: 1, num: 1 });
+const bind2 = Bind({ bind: 2, num: 2 });
 
-function submit(){
+function submit() {
     this.extra.num++;
-    this.style = `background-color: #${Math.floor(Math.random()*16777215).toString(16)}`
+    this.style = `background-color: #${Math.floor(Math.random() * 16777215).toString(16)}`;
+
+    console.log(this.extra.bind);
 }
 ---
 
@@ -18,7 +20,9 @@ function submit(){
 
         <BindForm bind={bind2}>
             <BInput type='int' name='num' />
-            <BButton onClick={submit} extra={bind2}>Increase</BButton>
+            <BButton onClick={submit} extra={bind2}>
+                Increase
+            </BButton>
         </BindForm>
     </BindForm>
 </Layout>
diff --git a/packages/forms/src/components-control/props-utils.ts b/packages/forms/src/components-control/props-utils.ts
@@ -1,9 +1,10 @@
 /**
  * Returns the difference between two objects
  */
-export function diffProps(object1: any, object2: any) {
+export function diffProps(object1: any, object2: any, skipKeys: string[] = []) {
     const diff = {};
     for (const [key, value] of Object.entries(object2)) {
+        if(skipKeys.includes(key)) continue;
         if (JSON.stringify(object1[key]) !== JSON.stringify(value)) {
             diff[key] = value;
         }
diff --git a/packages/forms/src/components/WebForms.astro b/packages/forms/src/components/WebForms.astro
@@ -10,17 +10,7 @@ const context = {
     webFormsSettings: { haveFileUpload: false },
     tempValues: {},
     viewStates: {
-        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++;
-        }
+        counter: 0,
     },
 };
 
diff --git a/packages/forms/src/components/form/BButton.astro b/packages/forms/src/components/form/BButton.astro
@@ -15,6 +15,8 @@ export interface Props<T extends keyof JSX.IntrinsicElements | React.JSXElementC
 }
 
 const {as: asComponent = 'button', props: componentProps, onClick, whenFormOK, connectId, ...props} = Astro.props;
+componentProps && Object.assign(props, componentProps);
+
 const {bind, executeAfter, elementsState, tempValues, tempBindValues, method, buttonIds, settings, bindCounter = ''} = getContext(Astro, '@astro-utils/forms');
 const tempCounter = tempBindValues || tempValues;
 const elementPropsState = elementsState || tempValues;
@@ -28,7 +30,7 @@ if (!connectId) {
     buttonUniqueId = `${bindCounter + idBaseFunction}-${counter}`;
 }
 
-const allProps = {...props, ...componentProps, ...elementPropsState[buttonUniqueId]};
+const allProps = {...props, ...elementPropsState[buttonUniqueId]};
 
 // add this button to list of button for the default submit action
 if(buttonIds && !allProps.disabled) {
@@ -44,15 +46,13 @@ async function executeFormAction(callback: Function = onClick) {
 
     const checkFormValidation = (whenFormOK && !bind?.errors.length) || !whenFormOK;
     if (checkFormValidation && validAction) {
-        const copyProps = structuredClone({...props, ...componentProps});
-        copyProps.extra = props.extra;
+        const originalProps = structuredClone(props);
         
-        if(!copyProps.disabled){
-            await callback.call(copyProps);
+        if(!allProps.disabled){
+            await callback.call(allProps);
         }
-        delete copyProps.extra;
-
-        elementPropsState[buttonUniqueId] = diffProps(allProps, copyProps);
+        
+        elementPropsState[buttonUniqueId] = diffProps(originalProps, allProps, ["extra"]);
     }
 }
 
@@ -67,7 +67,7 @@ if (executeAfter) {
 
 const {innerText, innerHTML, remove: doNotWriteHTML, ...changedProps}: any = allProps;
 delete changedProps.extra;
-delete changedProps.state; 
+delete changedProps.state;
 
 const Component = asComponent as any;
 const slotData = innerHTML ?? (Astro.slots.has('default') ? await Astro.slots.render('default') : '');
diff --git a/packages/forms/src/components/form/BindForm.astro b/packages/forms/src/components/form/BindForm.astro
@@ -11,7 +11,11 @@ export interface Props {
     defaultSubmitClick?: string | false;
 }
 
-const { viewStates, bindCounter: parantBindCounter = '' } = getContext(Astro, '@astro-utils/forms');
+const { viewStates, lastRender: parantLastRender, bindCounter: parantBindCounter = '' } = getContext(Astro, '@astro-utils/forms');
+if(parantLastRender === false) {
+    return;
+}
+
 const { bind = Bind(), defaultSubmitClick } = Astro.props;
 const context = {
     executeAfter: [],
@@ -21,54 +25,48 @@ const context = {
     elementsState: {} as any,
     onSubmitClickGlobal: defaultSubmitClick,
     buttonIds: [] as [string, string | null, boolean][],
-    settings: {showValidationErrors: false},
-    bindCounter: viewStates.incCounter(bind)
+    settings: { showValidationErrors: false},
+    bindCounter: viewStates.counter++,
+    lastRender: false
 };
 
 const viewState = new ViewStateManager(bind, context.elementsState, Astro, context.bindCounter);
 const haveState = await viewState.loadState();
-
 await bind.on.stateLoaded?.();
-
 if (!haveState) {
     await bind.on.newState?.();
 } else {
     await bind.on.pagePostBack?.();
 }
 
 // Get information about the form
-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' + parantBindCounter });
+await asyncContext(() => Astro.slots.render('default'), Astro, { name: '@astro-utils/forms', context, lock: 'bindForm' + parantBindCounter });
 bind.__finishFormValidation();
 
-for (const func of context.executeAfter) {
-    await (func as any)();
-}
-
 if (context.method == 'POST') {
+    for (const func of context.executeAfter) {
+        await (func as any)();
+    }
+
     context.method = 'GET';
     context.tempBindValues = {};
-    htmlSolt = await asyncContext(() => Astro.slots.render('default'), Astro, { name: '@astro-utils/forms', context, lock: 'bindForm' + parantBindCounter });
+    context.buttonIds = [];
+    await asyncContext(() => Astro.slots.render('default'), Astro, { name: '@astro-utils/forms', context, lock: 'bindForm' + parantBindCounter });
 }
 
 // Edit form render, add default submit button
 if (context.onSubmitClickGlobal == null && context.buttonIds.length > 0) {
-    const [buttonFormId, HTMLButtonId] = context.buttonIds.findLast(([,,whenFormOk]) => whenFormOk) ?? context.buttonIds.at(-1)!;
+    const [buttonFormId, HTMLButtonId] = context.buttonIds.findLast(([, , whenFormOk]) => whenFormOk) ?? context.buttonIds.at(-1)!;
     const state = (context.elementsState[buttonFormId] ??= {});
 
     state.id = HTMLButtonId ?? `_${buttonFormId}`;
     context.onSubmitClickGlobal = state.id;
-
     context.tempBindValues = {};
-    htmlSolt = await asyncContext(() => Astro.slots.render('default'), Astro, { name: '@astro-utils/forms', context, lock: 'bindForm' + parantBindCounter });
 }
+
+context.lastRender = true;
+const htmlSolt = await asyncContext(() => Astro.slots.render('default'), Astro, { name: '@astro-utils/forms', context, lock: 'bindForm' + parantBindCounter });
 ---
 
 {viewState.useState ? <input type='hidden' name={viewState.filedName} value={await viewState.createViewState()} /> : null}
