feat(qwik): Experimental support for synchronous QRL `sync$()`. #5545

mhevery · 2023-12-08T21:22:05Z

It is often desirable to have call API on events synchronously. For example, event.preventDefault() and event.stopPropagation() must be called synchronously in order to have a helpful effect.

  <button onClick$={[
    $sync(event => event.preventDefault()),
    $(() => {
      // normal behavior.
    })
  ]}>Click Me</button>

The idea is that $sync() will be inlined into HTML. For this reason, the function, $sync(), must not only be a pure function but also can not depend on any external code, such as imports.

The best way to think about it is that the function inside $sync() must be able to survive fn.toString() and then be reconstructed from the string into a proper function.

In practice, this means that the function must be a simple function which can't:

Close over any state.
Close over any imports.

Fix #5322
Fix #4496

Overview

What is it?

Feature / enhancement
Bug
Docs / tests / types / typos

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Use cases and why

1. One use case
1. Another use case

Checklist:

My code follows the developer guidelines of this project
I have performed a self-review of my own code
I have made corresponding changes to the documentation
Added new tests to cover the fix / functionality

netlify · 2023-12-08T21:22:11Z

✅ Deploy Preview for qwik-insights canceled.

Name	Link
🔨 Latest commit	`787cd7f`
🔍 Latest deploy log	https://app.netlify.com/sites/qwik-insights/deploys/657cb3fde3be5a000808f45f

cloudflare-workers-and-pages · 2023-12-08T21:24:21Z

Deploying with Cloudflare Pages

Latest commit:	`787cd7f`
Status:	✅ Deploy successful!
Preview URL:	https://153a6815.qwik-docs.pages.dev
Branch Preview URL:	https://build-sync-qrl.qwik-docs.pages.dev

View logs

PatrickJS · 2023-12-12T04:43:25Z

works on my machine 👍

It is often desirable to have call API on events synchronously. For example, `event.preventDefault()` and `event.stopPropagation()` must be called synchronously in order to have a helpful effect. ```TypeScript <button onClick$={[ $sync(event => event.preventDefault()), $(() => { // normal behavior. }) ]}>Click Me</button> ``` The idea is that `$sync()` will be inlined into HTML. For this reason, the function, `$sync()`, must not only be a pure function but also can not depend on any external code, such as imports. The best way to think about it is that the function inside `$sync()` must be able to survive `fn.toString()` and then be reconstructed from the string into a proper function. In practice, this means that the function must be a simple function which can't: - Close over any state. - Close over any imports. Fix #5322 Fix #4496

* fix(qrl.ts): dedupe sync$ * refactor(core): sync$ inlineFns key

It is often desirable to have call API on events synchronously. For example, `event.preventDefault()` and `event.stopPropagation()` must be called synchronously in order to have a helpful effect. ```TypeScript <button onClick$={[ $sync(event => event.preventDefault()), $(() => { // normal behavior. }) ]}>Click Me</button> ``` The idea is that `$sync()` will be inlined into HTML. For this reason, the function, `$sync()`, must not only be a pure function but also can not depend on any external code, such as imports. The best way to think about it is that the function inside `$sync()` must be able to survive `fn.toString()` and then be reconstructed from the string into a proper function. In practice, this means that the function must be a simple function which can't: - Close over any state. - Close over any imports. Fix #5322 Fix #4496

sarat1669 · 2024-04-15T01:51:00Z

stopPropagation doesn't work. No tests were added for it as well.

mhevery mentioned this pull request Dec 8, 2023

feat(qwik): Experimental support for synchronous QRLs #5508

Closed

7 tasks

mhevery force-pushed the build/sync-qrl branch 2 times, most recently from 78c2c11 to ffba343 Compare December 9, 2023 00:10

gabrielgrant mentioned this pull request Dec 9, 2023

[✨] prevent default functions #4496

Closed

zanettin added TYPE: enhancement COMP: runtime labels Dec 10, 2023

mhevery force-pushed the build/sync-qrl branch 4 times, most recently from 65693a4 to 371ad9b Compare December 11, 2023 22:10

mhevery changed the title ~~feat(qwik): Experimental support for synchronous QRL $sync().~~ feat(qwik): Experimental support for synchronous QRL sync$(). Dec 11, 2023

mhevery force-pushed the build/sync-qrl branch 2 times, most recently from 9248059 to 330322b Compare December 11, 2023 22:57

PatrickJS approved these changes Dec 12, 2023

View reviewed changes

jordanw66 mentioned this pull request Dec 13, 2023

feat: allow overriding preventDefault for modifier keys #4625

Closed

7 tasks

mhevery and others added 2 commits December 15, 2023 08:49

fix(qrl.ts): dedupe sync$ (#5566)

db13233

* fix(qrl.ts): dedupe sync$ * refactor(core): sync$ inlineFns key

mhevery force-pushed the build/sync-qrl branch 7 times, most recently from 16f35b0 to f52ee03 Compare December 15, 2023 20:13

mhevery enabled auto-merge (squash) December 15, 2023 20:14

mhevery force-pushed the build/sync-qrl branch from f52ee03 to 787cd7f Compare December 15, 2023 20:15

mhevery merged commit d50ceaa into main Dec 15, 2023

mhevery deleted the build/sync-qrl branch December 15, 2023 20:49

sarat1669 mentioned this pull request Apr 15, 2024

[✨] stopPropagation:{eventName} #5322

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(qwik): Experimental support for synchronous QRL `sync$()`. #5545

feat(qwik): Experimental support for synchronous QRL `sync$()`. #5545

mhevery commented Dec 8, 2023

netlify bot commented Dec 8, 2023 •

edited

Loading

cloudflare-workers-and-pages bot commented Dec 8, 2023 •

edited

Loading

PatrickJS commented Dec 12, 2023

sarat1669 commented Apr 15, 2024

feat(qwik): Experimental support for synchronous QRL sync$(). #5545

feat(qwik): Experimental support for synchronous QRL sync$(). #5545

Conversation

mhevery commented Dec 8, 2023

Overview

What is it?

Description

Use cases and why

Checklist:

netlify bot commented Dec 8, 2023 • edited Loading

✅ Deploy Preview for qwik-insights canceled.

cloudflare-workers-and-pages bot commented Dec 8, 2023 • edited Loading

Deploying with Cloudflare Pages

PatrickJS commented Dec 12, 2023

sarat1669 commented Apr 15, 2024

feat(qwik): Experimental support for synchronous QRL `sync$()`. #5545

feat(qwik): Experimental support for synchronous QRL `sync$()`. #5545

netlify bot commented Dec 8, 2023 •

edited

Loading

cloudflare-workers-and-pages bot commented Dec 8, 2023 •

edited

Loading