Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interactivity API Docs: Add withScope description #59542

Merged
merged 2 commits into from Mar 4, 2024

Conversation

cbravobernal
Copy link
Contributor

What?

Add withScope() function description and an example.

@cbravobernal cbravobernal added [Type] Developer Documentation Documentation for developers [Packages] Interactivity /packages/interactivity labels Mar 4, 2024
@cbravobernal cbravobernal self-assigned this Mar 4, 2024
Copy link

github-actions bot commented Mar 4, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: c4rl0sbr4v0 <cbravobernal@git.wordpress.org>
Co-authored-by: sirreal <jonsurrell@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Copy link
Member

@sirreal sirreal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! I left a few suggestions but this looks good.

@@ -1042,6 +1042,30 @@ The code will log:
}
```

### useScope()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### useScope()
### withScope()

### useScope()

Actions can depend on the scope when they are called, e.g., when you call `getContext()` or `getElement()`.
When the Interactivity API runtime execute callbacks, the scope is set automatically. However, if you call an action from a callback that is not executed by the runtime, like `setInterval()`, you need to ensure that callback sets the scope. The way of doing so is by wrapping the callback with `withScope()` function.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
When the Interactivity API runtime execute callbacks, the scope is set automatically. However, if you call an action from a callback that is not executed by the runtime, like `setInterval()`, you need to ensure that callback sets the scope. The way of doing so is by wrapping the callback with `withScope()` function.
When the Interactivity API runtime execute callbacks, the scope is set automatically. However, if you call an action from a callback that is not executed by the runtime, like in a `setInterval()` callback, you need to ensure that the scope is properly set. Use the `withScope()` function to ensure the scope is properly set in these cases.

Comment on lines 1056 to 1064
const ctx = getContext();
if ( ctx.autoplay ) {
setInterval(
withScope( () => {
actions.nextImage();
} ),
state.transitionsSpeed
);
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd remove some of the less relevant parts of the example:

Suggested change
const ctx = getContext();
if ( ctx.autoplay ) {
setInterval(
withScope( () => {
actions.nextImage();
} ),
state.transitionsSpeed
);
}
setInterval(
withScope( () => {
actions.nextImage();
} ),
3_000
);

@cbravobernal cbravobernal enabled auto-merge (squash) March 4, 2024 10:21
@cbravobernal cbravobernal merged commit 7df076f into trunk Mar 4, 2024
55 of 56 checks passed
@cbravobernal cbravobernal deleted the docs/interactivity-add-scope branch March 4, 2024 10:38
@github-actions github-actions bot added this to the Gutenberg 17.9 milestone Mar 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Packages] Interactivity /packages/interactivity [Type] Developer Documentation Documentation for developers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants