Skip to content

Conversation

@amitraj2203
Copy link
Contributor

What?

Fixes: #61455

Why?

It adds comments for directive parsing

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

@github-actions
Copy link

github-actions bot commented May 7, 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: amitraj2203 <[email protected]>
Co-authored-by: cbravobernal <[email protected]>

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

@cbravobernal cbravobernal added [Type] Code Quality Issues or PRs that relate to code quality [Package] Interactivity /packages/interactivity labels May 7, 2024
@cbravobernal cbravobernal self-requested a review May 7, 2024 19:45
Copy link
Contributor

@cbravobernal cbravobernal left a comment

Choose a reason for hiding this comment

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

Hi there!

I was thinking about doing a refactor (setting the variables names with what they should be, instead of 'prefix' or 'suffix' rather than adding code comments 😅

Thanks for contributing on this issue!

@amitraj2203
Copy link
Contributor Author

@cbravobernal I've made the changes you suggested! Now, instead of using 'prefix' and 'suffix', I've renamed the variables more clearly.

Thanks!

@amitraj2203 amitraj2203 requested a review from cbravobernal May 7, 2024 20:10
Copy link
Contributor

@cbravobernal cbravobernal left a comment

Choose a reason for hiding this comment

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

I'm leaving this on Request changes to wait for #61409 to be merged and also to get some more feedback about the naming of those vars.

const directiveMatch = directiveParser.exec( name );
// The reducer function accumulates the __directives object.
( obj, [ directiveName, namespace, inputValue ] ) => {
// Check if the directive name matches the expected format.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
// Check if the directive name matches the expected format.

Same here.

props.__directives = directives.reduce(
( obj, [ name, ns, value ] ) => {
const directiveMatch = directiveParser.exec( name );
// The reducer function accumulates the __directives object.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
// The reducer function accumulates the __directives object.

Same here.

) {
// eslint-disable-next-line no-console
console.warn( `Invalid directive: ${ name }.` );
console.warn(
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's wait for #61409 to be merged and update with its function.

const directiveType = directiveMatch[ 1 ] || '';
const directiveInput = directiveMatch[ 2 ] || 'default';

// Creating or updating the array for the specific directive type in the directives object.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
// Creating or updating the array for the specific directive type in the directives object.

Same here

namespace: ns ?? currentNamespace(),
value,
suffix,
// Splitting the directive name into directive type and input.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
// Splitting the directive name into directive type and input.

Same here

value,
suffix,
// Splitting the directive name into directive type and input.
const directiveType = directiveMatch[ 1 ] || '';
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const directiveType = directiveMatch[ 1 ] || '';
const directive = directiveMatch[ 1 ] || '';

I think directive is a better name.

suffix,
// Splitting the directive name into directive type and input.
const directiveType = directiveMatch[ 1 ] || '';
const directiveInput = directiveMatch[ 2 ] || 'default';
Copy link
Contributor

@cbravobernal cbravobernal May 13, 2024

Choose a reason for hiding this comment

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

Could be "event" or "directiveEvent" a better name for this?

Not sure, cause they are events in data-wp-on-document or data-wp-on-window or data-wp-on. But can also be styles or classes in data-wp-class-- or data-wp--style. Even attributes for data-wp-bind

What do you think about it? Let's ping some folks with experience developing with the Interactivity API to get some feedback.

Ping: @ryanwelcher , @luisherranz , @DAreRodz or @sethrubenstein

@amitraj2203
Copy link
Contributor Author

Hi @cbravobernal I have made changes as per your suggestion. Now waiting for replies from other folks.

@cbravobernal
Copy link
Contributor

Sorry @amitraj2203 but we are not going to merge this PR. The prefix word is being used through all the Interactivity codebase, and is a bigger refactor than expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Interactivity /packages/interactivity [Type] Code Quality Issues or PRs that relate to code quality

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Interactivity API: Improve readability in directives check function inside vdom.ts

2 participants