{"id":14981889,"url":"https://github.com/zzarcon/babel-plugin-promote-class-properties","last_synced_at":"2026-02-10T17:34:54.773Z","repository":{"id":68435508,"uuid":"102248487","full_name":"zzarcon/babel-plugin-promote-class-properties","owner":"zzarcon","description":"Babel plugin to replace old code taking advantage of ClassProperties feature","archived":false,"fork":false,"pushed_at":"2017-09-10T02:55:59.000Z","size":35,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-12T08:24:10.243Z","etag":null,"topics":["babel","babel-plugin","babel-transformation","babeljs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zzarcon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-03T07:33:42.000Z","updated_at":"2017-09-04T23:22:51.000Z","dependencies_parsed_at":"2023-03-27T20:54:45.556Z","dependency_job_id":null,"html_url":"https://github.com/zzarcon/babel-plugin-promote-class-properties","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"57843a32287a40b58c3f65b887aa27456705ebf3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zzarcon/babel-plugin-promote-class-properties","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zzarcon%2Fbabel-plugin-promote-class-properties","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zzarcon%2Fbabel-plugin-promote-class-properties/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zzarcon%2Fbabel-plugin-promote-class-properties/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zzarcon%2Fbabel-plugin-promote-class-properties/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zzarcon","download_url":"https://codeload.github.com/zzarcon/babel-plugin-promote-class-properties/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zzarcon%2Fbabel-plugin-promote-class-properties/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29309593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-10T16:09:25.305Z","status":"ssl_error","status_checked_at":"2026-02-10T16:08:52.170Z","response_time":65,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","babel-plugin","babel-transformation","babeljs"],"created_at":"2024-09-24T14:04:26.642Z","updated_at":"2026-02-10T17:34:54.755Z","avatar_url":"https://github.com/zzarcon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-promote-class-properties\n\u003e Babel plugin to replace old code taking advantage of ClassProperties feature\n\n# Before\n\n```javascript\nclass Foo {\n  constructor() {\n    this.foo = this.foo.bind(this);\n    this.bar = this.bar.bind(this);\n  }\n\n  foo(arg1, arg2) {\n    console.log(arg1, arg2)\n  }\n\n  bar(lol) {\n    return lol;\n  }\n}\n\n```\n\n# After\n\n```javascript\nclass Foo {\n  foo = (arg1, arg2) =\u003e {\n    console.log(arg1, arg2)\n  }\n\n  bar = (lol) =\u003e {\n    return lol;\n  }\n}\n\n```\n\n# Installation\n\n```\n$ yarn add babel-plugin-promote-class-properties -D\n```\n\n# Usage\n\n```\n$ promoteClassProperties ./src\n\n```\n\n# Motivation\n\nDeclaring event listeners is a common thing to do on the daily bases of every JS developer.\nIn real life applications we see a lot of this:\n\n```javascript\nclass App extends React.Component {\n  constructor() {\n    this.onLoad = this.onLoad.bind(this);\n\n    this.state = {width: 0, height: 0};\n  }\n\n  onLoad({target: {height, width}}) {\n    this.setState({width, height});\n  }\n\n  render() {\n    const {width, height} = this.state;\n\n    return (\n      \u003cdiv\u003e\n        \u003cdiv\u003e{width}x{height}\u003c/div\u003e\n        \u003cimg onLoad={this.onLoad} /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\nWe need to do \n\n```\nthis.onLoad = this.onLoad.bind(this);\n```\n\nBecause of the way of **this** context is handled on ```addEventListener```, see [The_value_of_this_within_the_handler](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_value_of_this_within_the_handler), from MDN:\n\n\u003e If attaching a handler function to an element using addEventListener(), the value of this inside the handler is a reference to the element. It is the same as the value of the currentTarget property of the event argument that is passed to the handler.\n\nDoing that reassignment, we keep the react component instance as **this** value and we can do operations like ```setState``` while still having access to the DOM element.\n\n\n# TODO\n\n- Remove empty constructor\n- Handle inline cases =\u003e ```\u003cimg onError={this.onImgError.bind(this) /\u003e```\n- Handle =\u003e ```document.body.addEventListener('scroll', this.onScroll.bind(this));```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzzarcon%2Fbabel-plugin-promote-class-properties","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzzarcon%2Fbabel-plugin-promote-class-properties","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzzarcon%2Fbabel-plugin-promote-class-properties/lists"}