insin / babel-plugin-react-html-attrs

Babel plugin which transforms HTML and SVG attributes on JSX host elements into React-compatible attributes

Recent Releases

• 2024-07-14 – control-panel-for-youtube v1.2.0
  Browser extension which gives you more control over YouTube by adding missing options and UI improvements - for desktop & mobile browsers
  v1.2.0 release notes

  Visit the Control Panel for YouTube website for installation links, more information about the extension, and FAQs.

  Changes

  New options for desktop YouTube:

  • Full size theater mode
  • Hide Miniplayer button
  • Search thumbnail size, which by default reverts the recent size increase YouTube made to search result thumbnails
  • Minimum grid items per row, for Home and Subscriptions

  hideSuggestedSections:

  • Now also hides Recommended videos and Recommended playlists when viewing a (non-Watch Later) playlist

  Availability

  New versions have to be reviewed and published by each browser extension store before they're available for use.

  This release is available in the following extension stores:

  

  Screenshots

  Full size theater mode

  Before	After

  Search thumbnail size

  Large (YouTube default)	Medium (Control Panel default)	Small

  Minimum grid items per row in Home and Subscriptions

  e.g. minimum of 5 items per row:

  

  Donate

  Support Control Panel for YouTube development with a tip:

  

• 2024-06-17 – control-panel-for-twitter v4.1.2
  Browser extension which gives you more control over your Twitter timeline and adds missing features and UI improvements - available for desktop and mobile browsers
  v4.1.2 release notes

  Changes

  • Fixed hiding "Subscriber" indicators in replies from subscribers
  • Fixed handling the Subscribers tab in a user's followers/following page
  • Fixed fallback font for custom content when the main font rule isn't found
  • Fixed hiding the "Yeah! for Twitter" button on desktop when using that extension

  Availability

  New versions have to be reviewed and published by each browser extension store before they're available for use.

  This release is available in the following extension stores:

  

  Donate

  Support Control Panel for Twitter development with a tip:

  

• 2024-03-18 – astro-lazy-youtube-embed v0.4.0
  Embed YouTube videos with a static placeholder which only embeds when you click
  v0.4.0 release notes

  Added

  • Added a thumbnail prop, enabling use of the alternate screenshot thumbnails YouTube provides
  • Added a cookie flag prop to opt-in to using www.youtube.com/embed instead of www.youtube-nocookie.com/embed
  • Added JSDoc to props to improve editor DX

  Changed

  • The embed now uses www.youtube-nocookie.com/embed by default
  • The static embed thumbnail <img> now uses loading="lazy" by default
  • The static embed now uses a black background, so there isn't a flash of gradient when the thumbnail <img> lazy-loads
  • The static embed now uses i.ytimg.com instead of img.youtube.com for the thumbnail <img>, as per the YouTube site and its API
  • The modestbranding embed parameter was deprecated by YouTube on August 15, 2023 and now has no effect - removed it from the embedParams defaults and marked it as deprecated
  • The thumbnailRes prop now also supports passing the mq/hq/sd abbreviations YouTube uses

  Fixed

  • Fixed overriding defaulted <iframe> attributes - Astro doesn't merge attributes on HTML elements, so user-supplied attributes need to come first
• 2023-10-19 – comments-owl-for-hacker-news v2.2.0
  Browser extension which makes it easer to follow comment threads on Hacker News across multiple visits, allows you to annotate and mute users, and other UI tweaks and mobile UX improvements
  v2.2.0 release notes

  • Added an option to disable or require confirmation for hiding on list pages
  • Added an option to increase the contrast of submission text (enabled by default)

  ---

  Available in the following extension stores:

  

• 2021-11-24 – rllmuk-ignore-topics v1.2
  Hide topics and forums you're not interested in on the Rllmuk forum
  v1.2 release notes

  • Added support for the Fluid view
  • Added a collapse control for the Fluid sidebar

babel-plugin-react-html-attrs's Issues

Option to white-list components

Would be cool to allow an option to white-list certain component names, as ^3.0.0 only applies to native html elements. In my case, allowing <Link> would be great.

Remove the attribute value for boolean attributes

Boolean attributes in HTML are true if present no matter which value they have.

In JSX, the equivalent is providing just the attribute name, so we should remove values from boolean attributes in pasted HTML.

The plugin "react-html-attrs" didn't export a Plugin instance while parsing file

.package.json

"devDependencies": {
"@babel/plugin-transform-react-inline-elements": "^7.2.0",
"autoprefixer": "^9.0.1",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-plugin-react-html-attrs": "^2.1.0",
"babel-preset-react": "^6.24.1",
"babelify": "^6.1.2",
"browserify": "^16.2.3",
"envify": "^4.1.0",
"grunt": "^1.0.3",
"grunt-browser-sync": "^2.2.0",
"grunt-browserify": "^5.3.0",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^2.2.1",
"grunt-contrib-imagemin": "^3.1.0",
"grunt-contrib-rename": "0.2.0",
"grunt-contrib-uglify": "^3.3.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-neuter": "^0.6.0",
"grunt-postcss": "^0.9.0",
"grunt-react": "^0.12.3",
"grunt-sass": "3.0.1",
"grunt-shell": "^2.1.0",
"load-grunt-tasks": "^4.0.0",
"node-sass": "^4.9.2",
"postcss-flexbugs-fixes": "^4.0.0",
"react-dom": "^16.6.3",
"react-redux": "^5.1.1",
"reactify": "^1.1.1",
"redux": "^4.0.1",
"time-grunt": "^1.4.0"
},
"dependencies": {
"react": "^16.6.3"
}

.babelrc

{
"plugins": [
"react-html-attrs",
"@babel/plugin-transform-react-inline-elements"
]
}

Consider adding colSpan, rowSpan and possibly others

Consider converting the "style" attribute from a string to a CSSProperties object?

Consider converting the "style" attribute from a string to a CSSProperties object?

before

let vdom=<div style="font-size:17px"></div>

after

let vdom=<div style={getStylePropValue("font-size:17px")}></div>

getStylePropValue

import { CSSProperties } from "react";
function getStylePropValue(attrValue: string): CSSProperties {
    const props = attrValue.split(";").filter((prop) => {
        return !!prop;
    });

    return props.reduce((props, prop) => {
        let [propName, propValue] = prop.split(/:(.*)/);
        propName = formatStylePropName(propName);
        return {
            ...props,
            [propName]: propValue && propValue.trim(),
        };
    }, {}) as CSSProperties;
}
function formatStylePropName(propName: string) {
    // Vendor prefixes other than "ms" should begin with a capital letter.
    // See: https://facebook.github.io/react/tips/inline-styles.html.
    propName = propName.replace(/^(\s+)?-(?=ms)/, "").trim();
    // Turn, for instance, "-webkit-property" into "WebkitProperty"
    // and "font-size" into "fontSize.
    return propName.replace(/(\-\w)/g, (match) => {
        return match[1].toUpperCase();
    });
}
export { getStylePropValue };

https://github.com/Deschtex/html2react/blob/master/src/get-props-from-attributes.js

How to edit .babelrc

Where is this file? Am I supposed to create it? Should there be anything in it besides what you are saying to add??

Release new version

how to handle typescript issue

Hi,

Maybe someone met this before:

I really like this plugin comparing to the className, but as long as I started to use it together with typescript - I see this message.

Maybe there are known ways to fix it?

Regards,

How do you solve ESLint errors?

Love this plugin. Use it everywhere.

Dunno what you do about ESLint errors:

Unknown property 'class' found, use 'className' instead react/no-unknown-property

Just turn it off?

how about style arrtibute

can we use style attribute like normal?

<div style="background:blue"></div>

instead of

<div style={{background:"blue"}}></div>

Cannot read property 'type' of undefined

Current version of library does not allow to create element attributes with object spread syntax. There was no problem in version
2.

// just artifical example for demonstration
const Example = () => {
    const dynamicAttrs = {title: "dynamic title"};
    // using spread attributes resolves in compile error "Cannot read property 'type' of undefined"
    return (<div {...dynamicAttrs}>Just test</div>);
};

node.name is undefined here:
https://github.com/insin/babel-plugin-react-html-attrs/blob/master/lib/index.js#L222

Babel 6

Leaving a note here for cross-referencing with a private repo that uses this :)

Inlining elements

Coupled with babel-plugin-transform-react-inline-elements, this doesn't work:

echo '<a class="link">b</a>' |
babel --presets react --plugins react-html-attrs,babel-plugin-transform-react-inline-elements

Output:

_jsx("a", {
  "class": "link"
}, void 0, "b");

No substitutions (for "class") observed. Expected:

_jsx("a", {
  className: "link"
}, void 0, "b");

I've tinkered with it to make it work, but I'm not much of an expert in babel / plugins / visitors mechanics not to break other use cases.

transform-react-inline-elements doesn't touch JSXAttribute, so replacing it (although leaving it doesn't change a thing) with JSXElement entry does the trick -- with or without inlining.

--- a/lib/index.js
+++ b/lib/index.js
@@ -8,9 +8,12 @@ var TRANSLATIONS = {
 module.exports = function() {
   return {
     visitor: {
-      JSXAttribute: function(node) {
-        if (node.node.name.name in TRANSLATIONS) {
-          node.node.name.name = TRANSLATIONS[node.node.name.name]
+      JSXElement: function(path, file) {
+        for (var i in path.node.openingElement.attributes) {
+          var name = path.node.openingElement.attributes[i].name
+          if (name.name in TRANSLATIONS) {
+            name.name = TRANSLATIONS[name.name]
+          }
         }
       }
     }

Restrict attribute renaming by JSX element name

Proposal:

• Make class= → className= apply to all JSX elements, as everything I've seen in the React ecosystem which takes a class uses className=
• Restrict for= → htmlFor= to <label> elements. I've seen custom label components which also use htmlFor, but it's still way less common than className.

The primary reason I created this plugin was to make it easier to copy and paste existing HTML, where class will be used all over the place and for will only be used on <label>. (Those are the only two React DOM attribute names which I really care about as CSS and forms are ubiquitous).

Example in AST Explorer:

https://astexplorer.net/#/gist/0d3e90b0821fabe17a9beafa6b78e374/cfda301987db8e71aaa9b94e0cdb60b791cfb714

---

If anyone cares about other attributes, next steps would be to bump up the number of default translations, restricted by HTML element name, and allow plugin options should you want to enable use of for= → htmlFor= everywhere or on specific custom components you use.

Pinging @ericclemmons for thoughts - are there other attribute translations you care about which you'd use the HTML version of if this was available?