Synchronous Events with sync()

While not a common use case, you may occasionally need to process events synchronously.

Since Qwik processes asynchronously by default, your code must be explicitly configured for synchronous calls.

There are two ways of processing events synchronously:

1. preferred way: use sync$() to load code synchronously. Fast, resumable but with significant restrictions on event handler size.
2. eager registration: use useVisibleTask$() to load code synchronously. No restrictions, but requires eager code execution, which goes against resumability.

This example shows how to use synchronous code blocks using sync$().

  <a href="/" 
    onClick$={sync$((event, target) => {
      if (event.ctrlKey) {
        event.preventDefault();
      }
    })}>
    link
  </a>

sync$() Restrictions (BETA)

The sync$() function is a resumable way to process events synchronously. However, it has some significant restrictions. The sync$() can't close over anything. The implications are that you can't:

• access any state: The recommended way to get the state into function is to place on element attributes.
• access any non-browser functions: No imports or closing over any variables or functions are allowed.
• the function should be small as it will get inlined into the resulting HTML.

For this reason, we recommended breaking up the event handlers into two parts:

1. sync$(): The part which must be synchronous. This part should be small and not close over anything.
2. $(): The part which can be asynchronous. This part can be large and can close over anything including the state.

  <a href="/" 
    onClick$={[
      sync$((event, target) => {
        // This part is synchronous and can't close over anything.
        if (event.ctrlKey) {
          event.preventDefault();
        }
      }),
      $(() => {
        // This part can be asynchronous and can close over anything.
        console.log('clicked');
      })
    ]}>
    link
  </a>

Your task: Convert the onClick$ from asynchronous event to synchronous event by using useVisibleTask$ lifecycle and normal event registration.

Next: Synchronous Events with useVisibleTask$()