Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/1j01/react-script
An elegant DSL for React - DEPRECATED: CoffeeScript 2 has JSX built in! http://coffeescript.org/v2/#jsx (requires a separate JSX→JS conversion)
https://github.com/1j01/react-script
classnames coffeescript dsl glue hyperscript jsx library module react wrapper
Last synced: 2 months ago
JSON representation
An elegant DSL for React - DEPRECATED: CoffeeScript 2 has JSX built in! http://coffeescript.org/v2/#jsx (requires a separate JSX→JS conversion)
- Host: GitHub
- URL: https://github.com/1j01/react-script
- Owner: 1j01
- Created: 2015-03-15T23:44:07.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-06-13T05:10:10.000Z (over 6 years ago)
- Last Synced: 2024-10-03T21:10:02.515Z (3 months ago)
- Topics: classnames, coffeescript, dsl, glue, hyperscript, jsx, library, module, react, wrapper
- Language: CoffeeScript
- Homepage: https://www.npmjs.com/package/react-script
- Size: 22.5 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReactScript
An elegant, flexible DSL for React
for use with CoffeeScript
(and maybe other languages)
With CoffeeScript:
```coffee
# Alias it as whatever you want (maybe _ or $?)
E = ReactScript or require "react-script"
class Message extends React.Component
render: ->
E ".message", class: (if @props.author is you then "from-you"),
E ".info",
style: float: "right"
"From "
E "span.author", @props.author
" at "
E "span.time", @props.time
E "p.body",
@props.text
if @props.fileTransfers
E ".transfers",
"Sent files:"
E "ul.files",
for transfer in @props.fileTransfers
E "li", E "a",
href: transfer.downloadLink
download: transfer.fileName
transfer.fileName
message = E Message,
author: "John"
time: "5:47 PM"
text: "Hello world!"
fileTransfers: [
{fileName: "virus.exe", downloadLink: "#"}
]
ReactDOM.render message, document.body
```
By simply supporting arrays and ignoring nully values,
it works with all forms of conditionals and comprehensions.
All the functionality of [classnames](https://github.com/JedWatson/classnames)
is built in. Just provide any
class, classes, className, classNames or classList.
All those properties are treated the same and can be
a single class name,
a single string with multiple class names,
an object where the keys are the class names and the values are whether they should be present,
or an array of any of the preceding.
Nully values are ignored, allowing for conditionals.
The whole library tries to be pretty flexible.
You can specify `data-*` and `aria-*` properties
either as e.g. `"data-size"`/`"aria-pressed"`
or `dataSize`/`ariaPressed`
or `data_size`/`aria_pressed`
or `data: size: 1.337`/`aria: pressed: true`.
(ARIA's `role` attribute is just `role`.)
Check out the [specs](https://github.com/1j01/react-script/tree/master/spec/tests) for more details.
If you find something that doesn't work as you'd hope,
feel free to [open an issue](https://github.com/1j01/react-script/issues).
## Installation
`npm i react-script --save`
## Usage
You can use ReactScript through a bundler like [browserify][] or [webpack][], or you can include it as a script:
```html
`
```
Then alias `ReactScript` as something short such as `E` to use as a DSL.
```js
var E = ReactScript; // or require("react-script");
```
[webpack]: https://webpack.github.io/
[browserify]: http://browserify.org/
## Run tests
`npm test`
## Similar Projects
* [hyperscript](https://github.com/dominictarr/hyperscript)
(generates HTML)
* [react-hyperscript](https://github.com/mlmorg/react-hyperscript)
(hyperscript for React)
* [virtual-hyperscript](https://github.com/Matt-Esch/virtual-dom/tree/master/virtual-hyperscript)
(hyperscript for [virtual-dom](https://github.com/Matt-Esch/virtual-dom))
* [zorium](https://github.com/Zorium/zorium)
(framework for virtual-dom)
* [hyper](https://github.com/xixixao/hyper)
("React.js wrapper for CoffeeScript", part library, part transformer)
* [coffee-react](https://github.com/jsdf/coffee-react)
(JSX for CoffeeScript
(plus [related projects](https://github.com/jsdf/coffee-react#related-projects)))
* [react-no-jsx](https://www.npmjs.com/package/react-no-jsx)
(uses arrays rather than function calls; not enough CoffeeScript)