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

feat(html/unstable): add isValidCustomElementName() #5456

Merged
merged 15 commits into from
Aug 1, 2024
Merged

feat(html/unstable): add isValidCustomElementName() #5456

merged 15 commits into from
Aug 1, 2024

Conversation

luk3skyw4lker
Copy link
Contributor

@luk3skyw4lker luk3skyw4lker commented Jul 16, 2024 •
edited by iuioiua
Loading

These changes add a isValidCustomElement method to validate a custom element created in the HTML document. It is implemented according to the HTML spec that can be found at: https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name

I have also added tests for all the cases I could think of, if any case is missing please let me know and I can add it.

Closes #5437

@luk3skyw4lker luk3skyw4lker requested a review from kt3k as a code owner July 16, 2024 13:10
@github-actions github-actions bot added the html label Jul 16, 2024
@timreichen
Copy link
Contributor

I was wondering about the name staring with is. I am not sure if that is a common name prefix for a function instead of a property. Maybe we could borrow from regexp test or check from the element api?

@luk3skyw4lker
Copy link
Contributor Author

@timreichen hmmmm, I'm more inclined to do'testCustomElementIsValid(). Would that be okay? I don't want to leave the name too open to interpretations. The is pattern is pretty common in Ruby tho, I'm not against keeping it, although in JS/TS it's more common for properties as you said.

@luk3skyw4lker
Copy link
Contributor Author

testValidCustomElement also works for me, I think it's a very descriptive and nice name.

@timreichen
Copy link
Contributor

I would put name also in the function name. How about testCustomElementName() or checkCustomElementNameValidity()?

@luk3skyw4lker
Copy link
Contributor Author

The latter seems better for me, more descriptive. I'll put that in right now

iuioiua
iuioiua suggested changes Jul 17, 2024
View reviewed changes
Copy link
Contributor

@iuioiua iuioiua left a comment

Choose a reason for hiding this comment

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

Nice! Just a few nits.

html/entities.ts Outdated Show resolved Hide resolved
html/entities.ts Outdated Show resolved Hide resolved
html/entities.ts Outdated Show resolved Hide resolved
html/entities.ts Outdated Show resolved Hide resolved
html/entities.ts Outdated Show resolved Hide resolved
html/entities.ts Outdated Show resolved Hide resolved
html/entities.ts Outdated Show resolved Hide resolved
@kt3k
Copy link
Member

kt3k commented Jul 17, 2024

I'd prefer the name isValidCustomElementName, which clearly shows the function is a predicate, returning boolean value.

I was wondering about the name staring with is. I am not sure if that is a common name prefix for a function instead of a property.

The function name starting with is is common in std. There are many examples:

@kt3k
Copy link
Member

kt3k commented Jul 17, 2024

The function name starting with test has issues as discussed in #4364. I think we should avoid testXxx naming convention in new APIs.

kt3k
kt3k reviewed Jul 17, 2024
View reviewed changes
html/entities.ts Outdated Show resolved Hide resolved
@iuioiua iuioiua changed the title feat: add custom element name validator feat(html): isValidCustomElement() Jul 17, 2024
@iuioiua iuioiua changed the title feat(html): isValidCustomElement() feat(html): add isValidCustomElement() Jul 17, 2024
@codecov Codecov
Copy link

codecov bot commented Jul 22, 2024 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.00%. Comparing base (714fccb) to head (33a5f7e).

Additional details and impacted files 
@@            Coverage Diff             @@
##             main    #5456      +/-   ##
==========================================
- Coverage   96.37%   96.00%   -0.37%     
==========================================
  Files         465      466       +1     
  Lines       37506    37526      +20     
  Branches     5527     5497      -30     
==========================================
- Hits        36147    36028     -119     
- Misses       1317     1456     +139     
  Partials       42       42

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@iuioiua iuioiua changed the title feat(html): add isValidCustomElement() feat(html): add isValidCustomElementName() Jul 22, 2024
iuioiua
iuioiua approved these changes Jul 22, 2024
View reviewed changes
Copy link
Contributor

@iuioiua iuioiua left a comment

Choose a reason for hiding this comment

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

I've made changes to align with the codebase. Now, LGTM. Thanks!

@iuioiua iuioiua requested a review from kt3k July 22, 2024 00:35
@iuioiua iuioiua changed the title feat(html): add isValidCustomElementName() feat(html/unstable): add isValidCustomElementName() Jul 22, 2024
@luk3skyw4lker
Copy link
Contributor Author

Sorry to take long to answer guys!

kt3k
kt3k reviewed Jul 23, 2024
View reviewed changes
html/is_valid_custom_element_name_test.ts Outdated
});

await t.step("handles custom names with underscores", () => {
assertEquals(isValidCustomElementName("custom_element"), true);
Copy link
Member

Choose a reason for hiding this comment

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

A custom element name needs to include at least one -. This shouldn't be a valid name.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hmmmm, you're right, just took a look at the HTML reference and got it. I'll fix it tomorrow afternoon

kt3k
kt3k reviewed Jul 23, 2024
View reviewed changes
html/is_valid_custom_element_name_test.ts Outdated
});

await t.step("handles custom names with points", () => {
assertEquals(isValidCustomElementName("custom.element"), true);
Copy link
Member

Choose a reason for hiding this comment

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

Ditto. This isn't a valid name.

iuioiua
iuioiua approved these changes Aug 1, 2024
View reviewed changes
Copy link
Contributor

@iuioiua iuioiua left a comment

Choose a reason for hiding this comment

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

I've fixed the previously mentioned faults and improved tests. LGTM now.

@iuioiua iuioiua requested a review from kt3k August 1, 2024 00:35
kt3k
kt3k approved these changes Aug 1, 2024
View reviewed changes
Copy link
Member

@kt3k kt3k left a comment

Choose a reason for hiding this comment

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

I also cleaned up the regexp a bit.

LGTM

@kt3k kt3k merged commit bfa56fc into denoland:main Aug 1, 2024
13 checks passed
@luk3skyw4lker luk3skyw4lker deleted the feat/add-html-custom-name-validator branch August 9, 2024 16:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@iuioiua iuioiua iuioiua approved these changes

@kt3k kt3k kt3k approved these changes

Assignees
No one assigned
Labels
html
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

feat req (html): add a validator for custom name elements ?
4 participants
@luk3skyw4lker @timreichen @kt3k @iuioiua