{"id":16593997,"url":"https://github.com/jsdf/coffee-react","last_synced_at":"2025-04-04T07:06:11.756Z","repository":{"id":15721957,"uuid":"18460113","full_name":"jsdf/coffee-react","owner":"jsdf","description":"DEPRECATED – Unfancy JavaScript with React JSX markup","archived":false,"fork":false,"pushed_at":"2020-09-04T21:33:06.000Z","size":11141,"stargazers_count":413,"open_issues_count":10,"forks_count":28,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-02T02:55:48.234Z","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":null,"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-04-05T04:44:13.000Z","updated_at":"2025-03-23T01:25:11.000Z","dependencies_parsed_at":"2022-08-08T13:00:21.113Z","dependency_job_id":null,"html_url":"https://github.com/jsdf/coffee-react","commit_stats":null,"previous_names":[],"tags_count":80,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Fcoffee-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Fcoffee-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Fcoffee-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Fcoffee-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsdf","download_url":"https://codeload.github.com/jsdf/coffee-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247135143,"owners_count":20889420,"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-10-11T23:44:43.703Z","updated_at":"2025-04-04T07:06:11.738Z","avatar_url":"https://github.com/jsdf.png","language":"CoffeeScript","readme":"# Coffee-React\n\n**[CoffeeScript 2 has JSX built in. You should use that instead](http://coffeescript.org/v2/#jsx)**\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\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\nCoffee-React provides a JSX-like syntax for building [React](http://facebook.github.io/react/) components with the full awesomeness of CoffeeScript.\n\n[Try it out](https://jsdf.github.io/coffee-react-transform/).\n\nIncluded is the `cjsx` executable, which is wrapper for `coffee`, using\n[coffee-react-transform](https://github.com/jsdf/coffee-react-transform) and\n[coffee-script](https://github.com/jashkenas/coffeescript) to transform CJSX to Javascript.\nYou can also `require()` CJSX components under [node](http://nodejs.org) for server-side rendering.\n\n### Example\n\nneat-component.cjsx\n```coffee\nNeatComponent = React.createClass\n  render: -\u003e\n    \u003cdiv className=\"neat-component\"\u003e\n      {\u003ch1\u003eA Component is I\u003c/h1\u003e if @props.showTitle}\n      \u003chr /\u003e\n      {\u003cp key={n}\u003eThis line has been printed {n} times\u003c/p\u003e for n in [1..5]}\n    \u003c/div\u003e\n```\n\ncompile it\n```bash\n$ cjsx -cb neat-component.cjsx\n```\n\nneat-component.js\n```js\n// Generated by CoffeeScript 1.9.1\nvar NeatComponent;\n\nNeatComponent = React.createClass({displayName: \"NeatComponent\",\n  render: function() {\n    var n;\n    return React.createElement(\"div\", {\n      \"className\": \"neat-component\"\n    }, (this.props.showTitle ? React.createElement(\"h1\", null, \"A Component is I\") : void 0), React.createElement(\"hr\", null), (function() {\n      var i, results;\n      results = [];\n      for (n = i = 1; i \u003c= 5; n = ++i) {\n        results.push(React.createElement(\"p\", {\n          \"key\": n\n        }, \"This line has been printed \", n, \" times\"));\n      }\n      return results;\n    })());\n  }\n});\n```\n\n### Installation\n```bash\nnpm install -g coffee-react\n```\n\n#### Version compatibility\n- 5.x - React 0.13.x - 0.15.x\n- 4.x - React 0.13.x - 0.14.x\n- 3.x - React 0.13.x - 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### Usage\n\n```\n$ cjsx -h\n\nUsage: cjsx [options] path/to/script.cjsx -- [args]\n\nIf called without options, `cjsx` will run your script.\n\n  -b, --bare         compile without a top-level function wrapper\n  -c, --compile      compile to JavaScript and save as .js files\n  -e, --eval         pass a string from the command line as input\n  -h, --help         display this help message\n  -j, --join         concatenate the source CoffeeScript before compiling\n  -m, --map          generate source map and save as .map files\n  -n, --nodes        print out the parse tree that the parser produces\n      --nodejs       pass options directly to the \"node\" binary\n      --no-header    suppress the \"Generated by\" header\n  -o, --output       set the output directory for compiled JavaScript\n  -p, --print        print out the compiled JavaScript\n  -s, --stdio        listen for and compile scripts over stdio\n  -l, --literate     treat stdio as literate style coffee-script\n  -t, --tokens       print out the tokens that the lexer/rewriter produce\n  -v, --version      display the version number\n  -w, --watch        watch scripts for changes and rerun commands\n\n```\n\nOutput compiled JS to a file of the same name:\n```bash\n$ cjsx -c my-component.cjsx\n```\n\n#### Require .cjsx files under node\nAs with the `coffee-script` module, you need to register `.cjsx` with the module loader:\n```coffee\nrequire('coffee-react/register')\n\nComponent = require('./component.cjsx')\n\n```\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### React.createElement\n\nReact 0.12 introduced changes to the way component descriptors are constructed, where the return value of `React.createClass` is not a descriptor factory but simply the component class itself, and descriptors must be created manually using `React.createElement` or by wrapping the component class with `React.createDescriptor`.\n\ncoffee-react-transform (and as a result, coffee-react) now outputs calls to `React.createElement` to construct element descriptors from component classes for you, so you won't need to [wrap your classes using `React.createFactory`](https://gist.github.com/sebmarkbage/ae327f2eda03bf165261). However, for this to work you will need to be using at least React 0.11.2, which adds `React.createElement`.\n\nIf you want the older style JSX output (which just desugars into function calls) then you need to use the 0.x branch, eg. 0.5.1.\n\nAdditionally, as of 1.0.0, all input files will be CJSX transformed, even if they don't have a `.cjsx` extension or `# @cjsx` pragma.\n\n### Related projects\n- [coffee-react-transform](https://github.com/jsdf/coffee-react-transform), the underlying parser/transformer package.\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- [react-coffee-quickstart](https://github.com/SimonDegraeve/react-coffee-quickstart): equivalent to [react-quickstart](https://github.com/andreypopp/react-quickstart).\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): transform CJSX to Coffeescript under Ruby\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- [gulp plugin](https://github.com/mtscout6/gulp-cjsx) for the gulp build tool\n- [karma preprocessor](https://github.com/mtscout6/karma-cjsx-preprocessor) for karma test runner\n","funding_links":[],"categories":["Awesome React"],"sub_categories":["Tools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdf%2Fcoffee-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsdf%2Fcoffee-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdf%2Fcoffee-react/lists"}