AsyncFunctionalComponent

[trajano]

What problem does this feature solve?

FunctionalComponent are useful for simple routes that simply do an operation e.g. load pinia with random data then route. However, it does not appear to work correctly when the functional component is async.

What does the proposed API look like?

export declare interface AsyncFunctionalComponent<P = {}, E extends EmitsOptions = {}> extends ComponentInternalOptions {
    (props: P, ctx: Omit<SetupContext<E>, 'expose'>): Promise<any>;
    props?: ComponentPropsOptions<P>;
    emits?: E | (keyof E)[];
    inheritAttrs?: boolean;
    displayName?: string;
    compatConfig?: CompatConfig;
}

[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
}