{"id":13400848,"url":"https://github.com/jsdf/coffee-react-transform","last_synced_at":"2025-05-16T01:05:51.196Z","repository":{"id":14424186,"uuid":"17135280","full_name":"jsdf/coffee-react-transform","owner":"jsdf","description":"DEPRECATED – Provides React JSX support for Coffeescript","archived":false,"fork":false,"pushed_at":"2019-11-07T17:25:14.000Z","size":963,"stargazers_count":433,"open_issues_count":25,"forks_count":58,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-06T21:50:10.337Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","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/jsdf.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-24T12:24:13.000Z","updated_at":"2025-03-23T01:25:07.000Z","dependencies_parsed_at":"2022-08-29T05:40:24.115Z","dependency_job_id":null,"html_url":"https://github.com/jsdf/coffee-react-transform","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Fcoffee-react-transform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Fcoffee-react-transform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Fcoffee-react-transform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Fcoffee-react-transform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsdf","download_url":"https://codeload.github.com/jsdf/coffee-react-transform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253692392,"owners_count":21948314,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-07-30T19:00:56.199Z","updated_at":"2025-05-16T01:05:46.175Z","avatar_url":"https://github.com/jsdf.png","language":"CoffeeScript","readme":"# Coffeescript React JSX Transformer\n\n\n**[CoffeeScript 2 has JSX built in. You should use that instead](http://coffeescript.org/v2/#jsx)**\n\n\n# STATUS: DEPRECATED\n\nThis tool is no longer maintained. If you need to transition your codebase from\nit, a codemod is available to do so: [cjsx-codemod](https://github.com/jsdf/cjsx-codemod). You can also use [CoffeeScript 2, which has JSX built in.](http://coffeescript.org/v2/#jsx)\n\n\nThis project started as a way for me to explore how JSX could fit into\nCoffeescript syntax, as a quickly hacked together prototype. While I never\nreally promoted it, it quickly took on a life of its own, and before long people\nwere asking for it to support all kinds of different use cases. On top of that I\nhad no experience writing parsers, so the result is something with \n[insurmountable limitations](https://github.com/jsdf/coffee-react/issues/32).\n\nAs I eventually stopped using Coffeescript I ended up neglecting this project,\nbut as people were using it I didn't want to kill it. I really should have,\nhowever, because it meant that people were using a crappy, ill-conceived,\nunmaintained tool. Now, long overdue, I'm putting it out to pasture.\n\nOriginal readme follows:\n\nProvides support for an equivalent of JSX syntax in Coffeescript (called CJSX) so you can write your React components with the full awesomeness of Coffeescript. [Try it out](https://jsdf.github.io/coffee-react-transform/).\n\n#### Example\n\ncar-component.coffee\n\n```coffee\nCar = React.createClass\n  render: -\u003e\n    \u003cVehicle doors={4} locked={isLocked()} data-colour=\"red\" on\u003e\n      \u003cParts.FrontSeat /\u003e\n      \u003cParts.BackSeat /\u003e\n      \u003cp className=\"seat\"\u003eWhich seat can I take? {@props?.seat or 'none'}\u003c/p\u003e\n      {# also, this is an inline comment}\n    \u003c/Vehicle\u003e\n```\n\ntransform\n\n```bash\ncjsx-transform car-component.coffee\n```\n\noutput\n\n```coffee\nCar = React.createClass\n  render: -\u003e\n    React.createElement(Vehicle, {\"doors\": (4), \"locked\": (isLocked()), \"data-colour\": \"red\", \"on\": true},\n      React.createElement(Parts.FrontSeat, null),\n      React.createElement(Parts.BackSeat, null),\n      React.createElement(\"p\", {\"className\": \"seat\"}, \"Which seat can I take? \", (@props?.seat or 'none'))\n    )\n```\n\n### Getting Started\n`coffee-react-transform` simply handles preprocessing Coffeescript with JSX-style markup into valid Coffeescript. Instead of using it directly, you may want to make use of one of these more high-level tools:\n- [coffee-react](https://github.com/jsdf/coffee-react): a drop-in replacement for the `coffee` executable, for compiling CJSX.\n- [node-cjsx](https://github.com/SimonDegraeve/node-cjsx): `require` CJSX files on the server (also possible with [coffee-react/register](https://github.com/jsdf/coffee-react)).\n- [coffee-reactify](https://github.com/jsdf/coffee-reactify): bundle CJSX files via [browserify](https://github.com/substack/node-browserify), see also [cjsxify](https://github.com/SimonDegraeve/cjsxify).\n- [cjsx-loader](https://github.com/KyleAMathews/cjsx-loader): loader module for Webpack.\n- [react-coffee-quickstart](https://github.com/SimonDegraeve/react-coffee-quickstart): equivalent to [react-quickstart](https://github.com/andreypopp/react-quickstart).\n- [coffee-react-quickstart](https://github.com/KyleAMathews/coffee-react-quickstart): Quickstart for building React single page apps using Coffeescript, Gulp, Webpack, and React-Router\n- [sprockets preprocessor](https://github.com/jsdf/sprockets-coffee-react): use CJSX with Rails/Sprockets\n- [ruby coffee-react gem](https://github.com/jsdf/ruby-coffee-react) for general ruby integration\n- [vim plugin](https://github.com/mtscout6/vim-cjsx) for syntax highlighting\n- [sublime text package](https://github.com/Guidebook/sublime-cjsx) for syntax highlighting\n- [mimosa plugin](https://github.com/mtscout6/mimosa-cjsx) for the mimosa build tool\n- [karma preprocessor](https://github.com/mtscout6/karma-cjsx-preprocessor) for karma test runner\n- [broccoli plugin](https://github.com/ghempton/broccoli-cjsx) for the broccoli build tool\n\n### CLI\n\n```bash\ncjsx-transform [input file]\n```\nOutputs Coffeescript code to stdout. Redirect it to a file or straight to the Coffeescript compiler, eg.\n```bash\ncjsx-transform examples/car.coffee | coffee -cs \u003e car.js\n```\n\n### API\n```coffee\ntransform = require 'coffee-react-transform'\n\ntransformed = transform('...some CJSX code...')\n```\n\n### Installation\nFrom [npm](https://www.npmjs.org/):\n```bash\nnpm install -g coffee-react-transform\n```\n\n#### Version compatibility\n- 4.x - React \u003e=0.14.x\n- 3.x - React \u003e=0.13.x \u003c=0.14.x\n- 2.1.x - React 0.12.1\n- 2.x - React 0.12\n- 1.x - React 0.11.2\n- 0.x - React 0.11 and below\n\n#### Spread attributes\nJSX/CJSX 'spread attributes' allow merging in an object of props when creating an element, eg:\n```coffee\nextraProps = color: 'red', speed: 'fast'\n\u003cdiv color=\"blue\" {...extraProps} /\u003e\n```\nwhich is transformed to:\n```coffee\nextraProps = color: 'red', speed: 'fast'\nReact.createElement(\"div\", Object.assign({\"color\": \"blue\"},  extraProps)\n```\n\nIf you use this syntax in your code, be sure to include a shim for `Object.assign` for browsers/environments which don't yet support it. [object.assign](https://www.npmjs.org/package/object.assign), [core-js](https://github.com/zloirock/core-js) and \n[es6-shim](https://github.com/es-shims/es6-shim) are some possible choices.\n\n#### UMD bundle for the browser\nIf you want to use coffee-react-transform in the browser or under ExecJS or some other environment that doesn't support CommonJS modules, you can use this build provided by [BrowserifyCDN](wzrd.in), which will work as an AMD module or just a plain old script tag:\n\n[http://wzrd.in/standalone/coffee-react-transform](http://wzrd.in/standalone/coffee-react-transform)\n\n```html\n\u003cscript src=\"http://wzrd.in/standalone/coffee-react-transform\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  coffeeReactTransform('-\u003e \u003ca /\u003e');\n  // returns '-\u003e React.createElement(\"a\", null)'\n\u003c/script\u003e\n```\n\n\n### Tests\n\n`npm test` or `cake test` or `cake watch:test`\n\n### Changelog\n\nSee [CHANGELOG.md](CHANGELOG.md).\n","funding_links":[],"categories":["Uncategorized","Awesome React","React [🔝](#readme)"],"sub_categories":["Uncategorized","Tools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdf%2Fcoffee-react-transform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsdf%2Fcoffee-react-transform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdf%2Fcoffee-react-transform/lists"}