Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Transform attribute names to proper casing#199

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Closed
gpoitch wants to merge10 commits intopreactjs:mainfromgpoitch:gp/decamel

Conversation

@gpoitch
Copy link
Contributor

@gpoitchgpoitch commentedJul 30, 2021
edited
Loading

Makes sure attributes are converted to their proper casing when rendering to string. There was a similar attempt with#55 but it was never completed. Reviving it particularly because Safari is excessively downloading an img's src upon hydration due tosrcSet casing mismatch between preact/preact-render-to-string. This also adds better support for attributes specific to SVG/RSS/XML.

Incorporated the concerns from the comments in the other attempts/issues.

Attribute list reference:https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
React reference:https://github.com/facebook/react/blob/main/packages/react-dom/src/shared/possibleStandardNames.js

Closes#55
Closes#18

@gpoitchgpoitch closed thisAug 2, 2021
@marvinhagemeister
Copy link
Member

@gpoitch I think it's definitely something we should address. Regarding the closing: Did you ran into problems with this PR? I'm mainly curious to see if there is a way without changing the casing in the JSX renderer, but lowercase it in the default mode.

@gpoitchgpoitch reopened thisAug 2, 2021
@gpoitch
Copy link
ContributorAuthor

@marvinhagemeister accidental auto-close referencing this PR in a private repo. Not familiar with default vs jsx mode - I'll have to read the source code more and circle back.

@gpoitch
Copy link
ContributorAuthor

@marvinhagemeister I updated it so the jsx renderer is unaffected by applying the normalization after the attribute hook intercepts the standard rendering.

developit reacted with thumbs up emoji

@gpoitchgpoitch changed the titleDecamelize html attributesTransform attribute names to proper html casingSep 29, 2021
@gpoitchgpoitch changed the titleTransform attribute names to proper html casingTransform attribute names to proper casingOct 22, 2021
src/index.js Outdated
// <textarea value="a&b"> --> <textarea>a&amp;b</textarea>
propChildren=v;
}elseif((v||v===0||v==='')&&typeofv!=='function'){
name=getAttributeNameInHtmlCase(name);
Copy link
Member

Choose a reason for hiding this comment

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

Likely faster if this is done on L310:

-s += ` ${name}="${encodeEntities(v)}"`;+s += ` ${getAttributeNameInHtmlCase(name)}="${encodeEntities(v)}"`;

Copy link
ContributorAuthor

Choose a reason for hiding this comment

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

Need the transformed name for theif (v === true || v === '') block

@changeset-bot
Copy link

changeset-botbot commentedNov 12, 2021
edited
Loading

🦋 Changeset detected

Latest commit:61cd8c2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
NameType
preact-render-to-stringPatch

Not sure what this means?Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

src/index.js Outdated
Comment on lines 20 to 26
constDASHED_ATTRS=/^(acceptC|httpE|(clip|color|fill|font|glyph|marker|stop|stroke|text|vert)[A-Z])/;
constCAMEL_ATTRS=/^(isP|viewB)/;
constCOLON_ATTRS=/^(xlink|xml|xmlns)([A-Z])/;

constCAPITAL_REGEXP=/([A-Z])/g;

constUNSAFE_NAME=/[\s\n\\/='"\0<>]/;
Copy link

@SukkaWSukkaWDec 12, 2021
edited
Loading

Choose a reason for hiding this comment

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

Can they cover all the attributes?react-dom has an entire file forpossibleStandardNames:

https://github.com/facebook/react/blob/ca106a02d1648f4f0048b07c6b88f69aac175d3c/packages/react-dom/src/shared/possibleStandardNames.js

If they can, at least add a unit test case to cover them all. cc@gpoitch

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

Reviewers

@developitdevelopitdevelopit left review comments

@JoviDeCroockJoviDeCroockJoviDeCroock approved these changes

+1 more reviewer

@SukkaWSukkaWSukkaW left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

srcSet not converted to srcset

5 participants

@gpoitch@marvinhagemeister@developit@JoviDeCroock@SukkaW

[8]ページ先頭

©2009-2025 Movatter.jp