https://github.com/atlassubbed/atlas-relax-jsx-pragmas

JSX pragmas (hyperscript and Fragment) for Relax.
https://github.com/atlassubbed/atlas-relax-jsx-pragmas

components declarative dom fragment hyperscript jsx pragma preact react relax vdom virtual-dom

Last synced: about 1 month ago
JSON representation

JSX pragmas (hyperscript and Fragment) for Relax.

• Host: GitHub
• URL: https://github.com/atlassubbed/atlas-relax-jsx-pragmas
• Owner: atlassubbed
• License: mit
• Created: 2019-03-10T23:10:21.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-10T23:17:04.000Z (almost 6 years ago)
• Last Synced: 2024-12-23T17:05:58.795Z (about 1 month ago)
• Topics: components, declarative, dom, fragment, hyperscript, jsx, pragma, preact, react, relax, vdom, virtual-dom
• Language: JavaScript
• Homepage:
• Size: 7.81 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

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 = (

  


    hello

    world

  

)

```


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!