# atlas-relax-jsx-pragmas

> JSX pragmas (hyperscript and Fragment) for Relax.

Latest version **1.0.1** (published 2019-03-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install atlas-relax-jsx-pragmas
pnpm add atlas-relax-jsx-pragmas
yarn add atlas-relax-jsx-pragmas
bun add atlas-relax-jsx-pragmas
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-03-10 |
| First published | 2019-03-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | ^10.1.0 |
| Dependencies | 0 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | atlassubbed |
| Maintainers | atlassubbed |
| Keywords | atlassubbed, pragma, relax, react, reactive, meteor, declarative, async, diffing, vdom, framework, virtual-dom, components, hyperscript, jsx, reconciliation, lifecycle, virtual, dom |

## Links

- npm: https://www.npmjs.com/package/atlas-relax-jsx-pragmas
- Repository: https://github.com/atlassubbed/atlas-relax-jsx-pragmas
- Homepage: https://github.com/atlassubbed/atlas-relax-jsx-pragmas#readme
- Issues: https://github.com/atlassubbed/atlas-relax-jsx-pragmas/issues
- npm.io page: https://npm.io/package/atlas-relax-jsx-pragmas

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2019-03-10
- 1.0.0 — 2019-03-10

## README

# atlas-relax-jsx-pragmas

JSX pragmas (hyperscript and Fragment) for Relax.

[![Travis](https://img.shields.io/travis/atlassubbed/atlas-relax-jsx-pragmas.svg)](https://travis-ci.org/atlassubbed/atlas-relax-jsx-pragmas)

---

## you will need this if:

  * You want to write JSX
  * You want to use a hyperscript function manually

## install

```
npm install --save atlas-relax-jsx-pragmas
```

Make sure you have the babel plugin `babel-plugin-transform-react-jsx` installed (e.g. add it to your `.babelrc`) if you are using this as a pragma.

## usage

### with jsx

This is like any other JSX pragma. Include the following in your JSX files:

```javascript
// t stands for "template hyperscript", A stands for Array group (i.e. Fragment)
const { t, A } = require("atlas-relax-jsx-pragmas");
/** @jsx t */
/** @jsxFrag A */

const template = (
  <div class="green">
    <span key={1} class="red">hello</span>
    <span key={2} class="red">world</span>
  </div>
)
```

Babel also lets you specify the pragmas in your `.babelrc` so that you don't have to put the comments at the top of every file.

### without jsx

You could use this as a hyperscript function without JSX, but it's not strictly necessary, since Relax templates are plain old object literals.

```javascript
const { t } = require("atlas-relax-jsx-pragmas");

// using t as a more concise way to create templates
const template = t(
  "div",
  {class: "green"}, 
  [
    t("span", {class: "red", key: 1}, "hello"),
    t("span", {class: "red", key: 2}, "world")
  ]
)

// shorthand if you don't have any data or keys (second arg to t must be an array)
const template = t(
  "div", 
  [
    t("span", ["hello"]),
    t("span", ["world"])
  ]
)

// not using t at all (literals are valid templates)
// if you don't have data, simply omit the field
const template = {
  name: "div", 
  data: {class: "green"}, 
  next: [
    {name: "span", key: 1, data: {class: "red"}, next: "hello"},
    {name: "span", key: 2, data: {class: "red"}, next: "world"}
  ]
}
```

Using the `t` function tends to be more terse than using literals, but as you can see, it's not required at all. It may just come down to personal preference!

---
_Source: https://npm.io/package/atlas-relax-jsx-pragmas · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._