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.

Sign up for GitHub

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

Jump to bottom

Use optional chaining, optional catch binding. #21967

Merged
merged 3 commits into from
May 1, 2020
Merged

Use optional chaining, optional catch binding. #21967

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
21176a7
Use optional catch binding!
sainthkh Apr 30, 2020
171ce96
Use optional chaining.
sainthkh Apr 30, 2020
750318b
Update packages/block-editor/src/components/link-control/index.js
sainthkh May 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/link-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,9 +326,9 @@ function LinkControl( {
* the next render, if focus was within the wrapper when editing finished.
*/
function stopEditing() {
isEndingEditWithFocus.current =
!! wrapperNode.current &&
wrapperNode.current.contains( document.activeElement );
isEndingEditWithFocus.current = wrapperNode.current?.contains(
Copy link
Member

Choose a reason for hiding this comment

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

It's only going to become a problem at the point when this file is properly type-checked, but: isEndingEditWithFocus is going to assume to be assigned a boolean value, which we were doing prior to these changes, but with these changes, it may also be assigned as undefined if wrapperNode.current is absent.

const wrapperNode = { current: undefined };
const current = wrapperNode.current?.contains( document.activeElement );
console.log( typeof current );
// "undefined"

Technically it still works because it's falsey, but the previous !! existed for this purpose to always coerce it to a boolean.

Suggested change
isEndingEditWithFocus.current = wrapperNode.current?.contains(
isEndingEditWithFocus.current = !! wrapperNode.current?.contains(

(Boolean( /* ... */ ) works as well for coercion, if wanting to be more explicit)

Aside: I think this is going to be another common pitfall with using optional chaining, where it will be easy to assign a falsey value where we might actually want a strictly-false (boolean) value, especially when the end of the chain is a function which we know to return a boolean (like Element#contains).

Copy link
Contributor Author

@sainthkh sainthkh May 1, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

I committed your suggestion.

By the way, how about adding these findings to the JavaScript section of our coding guideline?

I simply thought optional chaining is just a good way to remove && and check validness of variables. But there are many pitfalls we have to avoid. These things are important but cannot be easily found in other documentations.

I think it's good for us and other future developers.

Copy link
Member

Choose a reason for hiding this comment

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

@sainthkh For sure, I think it makes sense to be be documenting these. I'd actually planned to bring some of these up in next week's JavaScript chat, moreso as observations of common issues people may encounter, but documentation is a good action item. I think we're still so early on in its usage that we're still at a point of identifying these issues. That said, the coding guidelines are always a "working document" and be revised over time.

As with the other discussion, I think we'll ultimately want to come to rely on our tooling:

† Aside: I actually tried to test this in code by adding @ts-check to the top of the file, and it didn't exactly work as I expected. Not sure if it's an issue with JavaScript typing, with typing of useRef, or other. Maybe something we need to figure out in the future, or if it's an upstream issue, to wait for a fix.

Copy link
Member

Choose a reason for hiding this comment

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

I created a pull request at #22029 to document the two gotchas observed here.

document.activeElement
);

setIsEditingLink( false );
}
Expand Down
2 changes: 1 addition & 1 deletion packages/url/src/is-url.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function isURL( url ) {
try {
new URL( url );
return true;
} catch ( error ) {
} catch {
return false;
}
}