AsyncFunctionalComponent about rfcs

[LinusBorg]

Yes, functional components are pure, synchronous functions where props go in, and vnodes come out.

For what "simple operation" do you want to use a async functional component,? You haven't provided a use case for your feature request

[trajano]

My use case is to submit a form to the backend as part of vue router that would route to another page. So I used ChatGPT to convert a template-less component

export default defineComponent({
  setup() {
    const router = useRouter();

    const {
      executeRecaptcha,
      recaptchaLoaded,
      instance: recaptchaInstance,
    } = useReCaptcha();

    const waitForRecaptcha = () => {
      return new Promise<void>(async (resolve, reject) => {
        const timeoutId = setTimeout(() => {
          reject(new Error("recaptchaLoaded() took longer than 5 seconds"));
        }, 5000);

        while (true) {
          const loaded = await recaptchaLoaded();
          if (loaded) {
            clearTimeout(timeoutId);
            resolve();
            break;
          }
          await new Promise((resolve) => setTimeout(resolve, 100));
        }
      });
    };

    onMounted(async () => {
      let recaptchaToken: string | null = null;
      try {
        if (recaptchaInstance) {
          await waitForRecaptcha();
          recaptchaToken = await executeRecaptcha("submitAssessment");
        }

        const userProfileStore = useUserProfileStore();
        if (recaptchaToken) {
          const assessmentPayload: AssessmentPayload = {
            assessment: userProfileStore.assessmentToSendToBackend,
            recaptchaToken,
          };
          if (userProfileStore.isRandomized) {
            console.info(
              "Assessment payload was not sent as it is randomized",
              assessmentPayload
            );
          } else {
            await submitAssessment(assessmentPayload);
          }
        }
      } catch (err: unknown) {
        console.error(err);
      }
      router.replace("/report");
    });

    return {};
  },
  render: () => null,
});

what I would rather have had was something like this (where I take out some of the boiler plate parts like onMounted, defineComponent etc.

const Submit = async ()=> {
    const router = useRouter(); // note this line won't actually work since `useRouter()` does not work in a FunctionalComponent but usePinia does.

    const {
      executeRecaptcha,
      recaptchaLoaded,
      instance: recaptchaInstance,
    } = useReCaptcha();

    const waitForRecaptcha = () => {
      return new Promise<void>(async (resolve, reject) => {
        const timeoutId = setTimeout(() => {
          reject(new Error("recaptchaLoaded() took longer than 5 seconds"));
        }, 5000);

        while (true) {
          const loaded = await recaptchaLoaded();
          if (loaded) {
            clearTimeout(timeoutId);
            resolve();
            break;
          }
          await new Promise((resolve) => setTimeout(resolve, 100));
        }
      });
    };

      let recaptchaToken: string | null = null;
      try {
        if (recaptchaInstance) {
          await waitForRecaptcha();
          recaptchaToken = await executeRecaptcha("submitAssessment");
        }

        const userProfileStore = useUserProfileStore();
        if (recaptchaToken) {
          const assessmentPayload: AssessmentPayload = {
            assessment: userProfileStore.assessmentToSendToBackend,
            recaptchaToken,
          };
          if (userProfileStore.isRandomized) {
            console.info(
              "Assessment payload was not sent as it is randomized",
              assessmentPayload
            );
          } else {
            await submitAssessment(assessmentPayload);
          }
        }
      } catch (err: unknown) {
        console.error(err);
      }
      router.replace("/report");
   };
Setup.props = []
Setup.emits = []
export default Setup;

[LinusBorg]

That doesn't look like a component, it looks like a VueRouter Navigation Guard? Is there a reason this could not be a guard?

[trajano]

If it was a navigation guard then it will be triggered per entry of the /report which I want to avoid

I could make it a

{
  path: '/submit'
  beforeEnter: (...)
}

But that means my route configuration would be larger I'd rather simply put components to keep it consistent with the rest of the routes.

{
  path: '/submit'
  component: Submit
}