https://github.com/roman01la/babel-plugin-react-hyperscript

HyperScript syntax for React components without runtime overhead
https://github.com/roman01la/babel-plugin-react-hyperscript

hyperscript

Last synced: about 10 hours ago
JSON representation

HyperScript syntax for React components without runtime overhead

• Host: GitHub
• URL: https://github.com/roman01la/babel-plugin-react-hyperscript
• Owner: roman01la
• License: mit
• Created: 2017-04-18T14:49:03.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-07-28T04:48:12.000Z (over 7 years ago)
• Last Synced: 2024-10-02T09:24:36.222Z (about 1 month ago)
• Topics: hyperscript
• Language: JavaScript
• Homepage:
• Size: 20.5 KB
• Stars: 20
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-babel - react-hyperscript - HyperScript syntax for React components without runtime overhead. (Plugins / React)

README

        
# babel-plugin-react-hyperscript

[![npm](https://img.shields.io/npm/v/babel-plugin-react-hyperscript.svg)](https://www.npmjs.com/package/babel-plugin-react-hyperscript)

*HyperScript syntax for React components without runtime overhead.*

Compiles [react-hyperscript](https://github.com/mlmorg/react-hyperscript) into `React.createElement`.

## Example

**Input**

```js

h('h1#boom.whatever.foo', [

  h('span'),

  h(MyComponent, { text: 'Hello!' })

]);

```

**Output**

```js

React.createElement('h1', {

  id: 'boom',

  className: 'whatever foo'

},

React.createElement('span'),

React.createElement(MyComponent, { text: 'Hello!' }));

```

## Installation

```

npm i babel-plugin-react-hyperscript

```

## Plugin options

**pragma**

By default calls to `h` will be replaced with `React.createElement`, but you can override this with a custom pragma (including `h` itself when used with [Preact](https://github.com/developit/preact)).

```js

{

  "plugins": ["react-hyperscript", { "pragma": "yo" }]

}

```

```js

// Input

h('h1#boom.whatever.foo', [

  h('span'),

  h(MyComponent, { text: 'Hello!' })

]);

// Output

yo('h1', {

  id: 'boom',

  className: 'whatever foo'

},

yo('span'),

yo(MyComponent, { text: 'Hello!' }));

```

## Usage

### Via .babelrc (Recommended)

__.babelrc__

```json

{

  "plugins": ["react-hyperscript"]

}

```

### Via CLI

```

babel --plugins react-hyperscript script.js

```

### Via Node API

```js

require("babel-core").transform("code", {

  plugins: ["react-hyperscript"]

});

```

## License

MIT