ac6ea5c feat(Form): multi onSubmit$ handlers (#6241)

QwikDev/qwik@38ecf2b
QwikDev · May 10, 2024 · 152398a · 152398a
1 parent 4ccdff6
commit 152398a
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 40 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -9,6 +9,7 @@ import type { EnvGetter } from '@builder.io/qwik-city/middleware/request-handler
 import { JSXNode } from '@builder.io/qwik';
 import { JSXOutput } from '@builder.io/qwik';
 import { QRL } from '@builder.io/qwik';
+import { QRLEventHandlerMulti } from '@builder.io/qwik';
 import { QwikIntrinsicElements } from '@builder.io/qwik';
 import { QwikJSX } from '@builder.io/qwik';
 import type { ReadonlySignal } from '@builder.io/qwik';
@@ -19,7 +20,7 @@ import { RequestEventCommon } from '@builder.io/qwik-city/middleware/request-han
 import { RequestEventLoader } from '@builder.io/qwik-city/middleware/request-handler';
 import { RequestHandler } from '@builder.io/qwik-city/middleware/request-handler';
 import type { ResolveSyncValue } from '@builder.io/qwik-city/middleware/request-handler';
-import { ValueOrPromise } from '@builder.io/qwik';
+import type { ValueOrPromise } from '@builder.io/qwik';
 import { z } from 'zod';
 import type * as zod from 'zod';
 
@@ -149,6 +150,8 @@ export declare type ActionStore<RETURN, INPUT, OPTIONAL extends boolean = true>
      * action in the server.
      */
     readonly submit: QRL<OPTIONAL extends true ? (form?: INPUT | FormData | SubmitEvent) => Promise<ActionReturn<RETURN>> : (form: INPUT | FormData | SubmitEvent) => Promise<ActionReturn<RETURN>>>;
+    /** Is action.submit was submitted */
+    readonly submitted: boolean;
 };
 
 declare type AnchorAttributes = QwikIntrinsicElements['a'];
@@ -303,9 +306,9 @@ export declare interface FormProps<O, I> extends Omit<QwikJSX.IntrinsicElements[
      */
     spaReset?: boolean;
     /** Event handler executed right when the form is submitted. */
-    onSubmit$?: (event: Event, form: HTMLFormElement) => ValueOrPromise<void>;
+    onSubmit$?: QRLEventHandlerMulti<SubmitEvent, HTMLFormElement> | undefined;
     /** Event handler executed right after the action is executed successfully and returns some data. */
-    onSubmitCompleted$?: (event: CustomEvent<FormSubmitSuccessDetail<O>>, form: HTMLFormElement) => ValueOrPromise<void>;
+    onSubmitCompleted$?: QRLEventHandlerMulti<CustomEvent<FormSubmitSuccessDetail<O>>, HTMLFormElement> | undefined;
     key?: string | number | null;
 }
 

diff --git a/index.qwik.cjs b/index.qwik.cjs
@@ -1113,6 +1113,7 @@ const routeActionQrl = (actionQrl, ...rest) => {
     const currentAction = useAction();
     const initialState = {
       actionPath: `?${QACTION_KEY}=${id}`,
+      submitted: false,
       isRunning: false,
       status: void 0,
       value: void 0,
@@ -1151,6 +1152,7 @@ Action.run() can only be called on the browser, for example when a user clicks a
       return new Promise((resolve) => {
         if (data instanceof FormData)
           state2.formData = data;
+        state2.submitted = true;
         state2.isRunning = true;
         loc2.isNavigating = true;
         currentAction2.value = {
@@ -1392,7 +1394,32 @@ const deserializeStream = async function* (stream, ctxElm, signal) {
 };
 const Form = ({ action, spaReset, reloadDocument, onSubmit$, ...rest }, key) => {
   qwik._jsxBranch();
-  if (action)
+  if (action) {
+    const isArrayApi = Array.isArray(onSubmit$);
+    if (isArrayApi)
+      return qwik._jsxS("form", {
+        ...rest,
+        get action() {
+          return action.actionPath;
+        },
+        action: qwik._wrapSignal(action, "actionPath"),
+        "preventdefault:submit": !reloadDocument,
+        method: "post",
+        ["data-spa-reset"]: spaReset ? "true" : void 0,
+        onSubmit$: [
+          ...onSubmit$,
+          // action.submit "submitcompleted" event for onSubmitCompleted$ events
+          !reloadDocument ? /* @__PURE__ */ qwik.inlinedQrl((evt) => {
+            const [action2] = qwik.useLexicalScope();
+            if (!action2.submitted)
+              return action2.submit(evt);
+          }, "Form_form_onSubmit_uPHV2oGn4wc", [
+            action
+          ]) : void 0
+        ]
+      }, {
+        method: qwik._IMMUTABLE
+      }, 0, key);
     return qwik._jsxS("form", {
       ...rest,
       get action() {
@@ -1403,13 +1430,15 @@ const Form = ({ action, spaReset, reloadDocument, onSubmit$, ...rest }, key) =>
       method: "post",
       ["data-spa-reset"]: spaReset ? "true" : void 0,
       onSubmit$: [
+        // action.submit "submitcompleted" event for onSubmitCompleted$ events
         !reloadDocument ? action.submit : void 0,
+        // TODO: v2 breaking change this should fire before the action.submit
         onSubmit$
       ]
     }, {
       method: qwik._IMMUTABLE
     }, 0, key);
-  else
+  } else
     return /* @__PURE__ */ qwik._jsxC(GetForm, {
       spaReset,
       reloadDocument,
@@ -1435,18 +1464,26 @@ const GetForm = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQr
     },
     ...rest,
     children: /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "BC_0"),
-    onSubmit$: /* @__PURE__ */ qwik.inlinedQrl(async (_, form) => {
-      const [nav2] = qwik.useLexicalScope();
-      const formData = new FormData(form);
-      const params = new URLSearchParams();
-      formData.forEach((value, key) => {
-        if (typeof value === "string")
-          params.append(key, value);
-      });
-      nav2("?" + params.toString(), {
-        type: "form",
-        forceReload: true
-      }).then(() => {
+    onSubmit$: [
+      ...Array.isArray(props.onSubmit$) ? props.onSubmit$ : [
+        props.onSubmit$
+      ],
+      /* @__PURE__ */ qwik.inlinedQrl(async (_evt, form) => {
+        const [nav2] = qwik.useLexicalScope();
+        const formData = new FormData(form);
+        const params = new URLSearchParams();
+        formData.forEach((value, key) => {
+          if (typeof value === "string")
+            params.append(key, value);
+        });
+        await nav2("?" + params.toString(), {
+          type: "form",
+          forceReload: true
+        });
+      }, "GetForm_component_form_onSubmit_p9MSze0ojs4", [
+        nav
+      ]),
+      /* @__PURE__ */ qwik.inlinedQrl((_evt, form) => {
         if (form.getAttribute("data-spa-reset") === "true")
           form.reset();
         form.dispatchEvent(new CustomEvent("submitcompleted", {
@@ -1457,10 +1494,8 @@ const GetForm = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQr
             status: 200
           }
         }));
-      });
-    }, "GetForm_component_form_onSubmit_p9MSze0ojs4", [
-      nav
-    ])
+      }, "GetForm_component_form_onSubmit_1_KK5BfmKH4ZI")
+    ]
   }, {
     action: qwik._IMMUTABLE,
     "preventdefault:submit": qwik._fnSignal((p0) => !p0.reloadDocument, [

diff --git a/index.qwik.mjs b/index.qwik.mjs
@@ -1095,6 +1095,7 @@ const routeActionQrl = (actionQrl, ...rest) => {
     const currentAction = useAction();
     const initialState = {
       actionPath: `?${QACTION_KEY}=${id}`,
+      submitted: false,
       isRunning: false,
       status: void 0,
       value: void 0,
@@ -1133,6 +1134,7 @@ Action.run() can only be called on the browser, for example when a user clicks a
       return new Promise((resolve) => {
         if (data instanceof FormData)
           state2.formData = data;
+        state2.submitted = true;
         state2.isRunning = true;
         loc2.isNavigating = true;
         currentAction2.value = {
@@ -1374,7 +1376,32 @@ const deserializeStream = async function* (stream, ctxElm, signal) {
 };
 const Form = ({ action, spaReset, reloadDocument, onSubmit$, ...rest }, key) => {
   _jsxBranch();
-  if (action)
+  if (action) {
+    const isArrayApi = Array.isArray(onSubmit$);
+    if (isArrayApi)
+      return _jsxS("form", {
+        ...rest,
+        get action() {
+          return action.actionPath;
+        },
+        action: _wrapSignal(action, "actionPath"),
+        "preventdefault:submit": !reloadDocument,
+        method: "post",
+        ["data-spa-reset"]: spaReset ? "true" : void 0,
+        onSubmit$: [
+          ...onSubmit$,
+          // action.submit "submitcompleted" event for onSubmitCompleted$ events
+          !reloadDocument ? /* @__PURE__ */ inlinedQrl((evt) => {
+            const [action2] = useLexicalScope();
+            if (!action2.submitted)
+              return action2.submit(evt);
+          }, "Form_form_onSubmit_uPHV2oGn4wc", [
+            action
+          ]) : void 0
+        ]
+      }, {
+        method: _IMMUTABLE
+      }, 0, key);
     return _jsxS("form", {
       ...rest,
       get action() {
@@ -1385,13 +1412,15 @@ const Form = ({ action, spaReset, reloadDocument, onSubmit$, ...rest }, key) =>
       method: "post",
       ["data-spa-reset"]: spaReset ? "true" : void 0,
       onSubmit$: [
+        // action.submit "submitcompleted" event for onSubmitCompleted$ events
         !reloadDocument ? action.submit : void 0,
+        // TODO: v2 breaking change this should fire before the action.submit
         onSubmit$
       ]
     }, {
       method: _IMMUTABLE
     }, 0, key);
-  else
+  } else
     return /* @__PURE__ */ _jsxC(GetForm, {
       spaReset,
       reloadDocument,
@@ -1417,18 +1446,26 @@ const GetForm = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
     },
     ...rest,
     children: /* @__PURE__ */ _jsxC(Slot, null, 3, "BC_0"),
-    onSubmit$: /* @__PURE__ */ inlinedQrl(async (_, form) => {
-      const [nav2] = useLexicalScope();
-      const formData = new FormData(form);
-      const params = new URLSearchParams();
-      formData.forEach((value, key) => {
-        if (typeof value === "string")
-          params.append(key, value);
-      });
-      nav2("?" + params.toString(), {
-        type: "form",
-        forceReload: true
-      }).then(() => {
+    onSubmit$: [
+      ...Array.isArray(props.onSubmit$) ? props.onSubmit$ : [
+        props.onSubmit$
+      ],
+      /* @__PURE__ */ inlinedQrl(async (_evt, form) => {
+        const [nav2] = useLexicalScope();
+        const formData = new FormData(form);
+        const params = new URLSearchParams();
+        formData.forEach((value, key) => {
+          if (typeof value === "string")
+            params.append(key, value);
+        });
+        await nav2("?" + params.toString(), {
+          type: "form",
+          forceReload: true
+        });
+      }, "GetForm_component_form_onSubmit_p9MSze0ojs4", [
+        nav
+      ]),
+      /* @__PURE__ */ inlinedQrl((_evt, form) => {
         if (form.getAttribute("data-spa-reset") === "true")
           form.reset();
         form.dispatchEvent(new CustomEvent("submitcompleted", {
@@ -1439,10 +1476,8 @@ const GetForm = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
             status: 200
           }
         }));
-      });
-    }, "GetForm_component_form_onSubmit_p9MSze0ojs4", [
-      nav
-    ])
+      }, "GetForm_component_form_onSubmit_1_KK5BfmKH4ZI")
+    ]
   }, {
     action: _IMMUTABLE,
     "preventdefault:submit": _fnSignal((p0) => !p0.reloadDocument, [

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/qwik-city",
   "description": "The meta-framework for Qwik.",
-  "version": "1.5.4-dev20240510130920",
+  "version": "1.5.4-dev20240510131703",
   "bugs": "https://github.com/QwikDev/qwik/issues",
   "dependencies": {
     "@mdx-js/mdx": "^3.0.1",