Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davidyu85/Tersus-JSX
A Babel macro for making cleaner JSX elements by defining Tersus props that will be transformed into JSX expressions.
https://github.com/davidyu85/Tersus-JSX
Last synced: 2 months ago
JSON representation
A Babel macro for making cleaner JSX elements by defining Tersus props that will be transformed into JSX expressions.
- Host: GitHub
- URL: https://github.com/davidyu85/Tersus-JSX
- Owner: davidyu85
- License: mit
- Created: 2019-03-02T22:40:00.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-06-22T14:33:30.000Z (over 5 years ago)
- Last Synced: 2024-07-18T22:17:32.411Z (6 months ago)
- Language: JavaScript
- Size: 8.79 KB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tersus JSX Macro
Missing the good old days of AngularJS that you can do loops simply with "ng-repeat", as oppose to ugly mix of elements and expressions in JSX while using React?
This Babel-Macro provides useful props for making a better and neater JSX. These props are transformed into appropriate JSX expressions for you by Babel-Macro, so that people can just define props and forget about formulating unintuitive JSX expression, like what we used to do in AngularJS. The current version supports:
- if statement (tj-if) simulating ng-if
- map function (tj-for) simulating ng-repeat/ng-for
This macro is made so that people can just define props and forget about the complicated JSX expression.
## tj-if Usage (similar to ng-if)
Simply attach an expression to tj-if prop.
```js
import tersus from 'tersus-jsx.macro';
class App extends Component {
const a = 0;
render() {
return tersus(
<>
Make neater JSX
>
)
}
}
```
is equivalent to
```js
class App extends Component {
const a = 0;
render() {
return (
<>
{a === 0 && <>
Make neater JSX>}
>
)
}
}
```
## tj-for Usage (similar to ng-repeat/ng-for)
Simply attach an array to tj-for, which formulates ES6 JavaScript map.
The "--value" string will be translated into the actual value variable in map.
The "--index" string will be translated into the index.
If the array contains nested objects, you can define the string "--value.name"
for grabbing the value in the object.
```js
import tersus from 'tersus-jsx.macro';
class App extends Component {
const a = 0;
render() {
return tersus(
<>
{'--value'}
{'--index'}
>
)
}
}
```
is equivalent to
```js
class App extends Component {
const a = 0;
render() {
return (
<>
{['a', 'b', 'c', 'd', 'e'].map((value, index) => <>
{value}
{index}
>)}
>
)
}
}
```
## Advance mix use-case
```js
import tersus from 'tersus-jsx.macro';
class App extends Component {
const a = 0;
render() {
return tersus(
<>
{'--value'}
>
)
}
}
```
is equivalent to
```js
class App extends Component {
const a = 0;
render() {
return (
<>
{a === 0 && <>
{['a', 'b', 'c', 'd', 'e'].map((value, index) => <>
{value === c && <>
{value}
>}
>)}
>}
>
)
}
}
```
## License
MIT