https://github.com/xixixao/hyper

React.js wrapper for CoffeeScript
https://github.com/xixixao/hyper

Last synced: 2 months ago
JSON representation

React.js wrapper for CoffeeScript

• Host: GitHub
• URL: https://github.com/xixixao/hyper
• Owner: xixixao
• Created: 2013-12-25T18:59:04.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2014-03-17T04:17:06.000Z (almost 11 years ago)
• Last Synced: 2024-11-10T16:14:40.287Z (2 months ago)
• Language: CoffeeScript
• Size: 566 KB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Hyper

React.js wrapper for CoffeeScript.

```coffee

hyper class HelloMessage

  render: ->

    _div

      "Hello #{@props.name}"

hyper.render document.getElementById('container'),

  _HelloMessage name: _strong "John"

```

Library Features:

- `hyper class` declaration adds `displayName` for debugging

- components don't require props as first argument

- `_` prefixed bultin tags allow nice syntax

- `render` method swaps order of arguments of `renderComponent`

Transform Features:

- `hyper class` declaration adds `_` prefixed variable to the current scope

- tags get auto required

- component implicit calling allows nicer syntax

- interpolation in component children allows components between strings

see [facebook/react](https://github.com/facebook/react)

# Using Transform

```

npm install -g hyper

hyper ./ my_component.h.coffee

```

Creates `my_component.js`

## Using Library

Via bower:

```

bower install hyper

```

- Using RequireJS (with CommonJS syntax):

  ```coffee

  require

    paths:

      react: 'bower_components/react/react'

      hyper: 'bower_components/hyper/hyper'

  # ...

  {_div, _h3, _ul, _li, _} = require 'hyper'

  ```

- Using globals:

  ```html

  

  

  ```

  ```coffee

  {_div, _h3, _ul, _li, _} = hyper

  ```