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.

import tersus from 'tersus-jsx.macro';

class App extends Component {
  const a = 0;
  render() {
    return tersus(
      <>
        <div tj-if={a === 0}>Make neater JSX</div>
      </>
    )
  }
}

is equivalent to

class App extends Component {
  const a = 0;
  render() {
    return (
      <>
        {a === 0 && <><div>Make neater JSX</div></>}
      </>
    )
  }
}

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.

import tersus from 'tersus-jsx.macro';

class App extends Component {
  const a = 0;
  render() {
    return tersus(
      <>
        <div tj-for={['a','b','c','d','e']}>
          <b>{'--value'}</b>
          <i>{'--index'}</i>
        </div>
      </>
    )
  }
}

is equivalent to

class App extends Component {
  const a = 0;
  render() {
    return (
      <>
        {['a', 'b', 'c', 'd', 'e'].map((value, index) => <><div>
          <b>{value}</b>
          <i>{index}</i>
        </div></>)}
      </>
    )
  }
}

Advance mix use-case

import tersus from 'tersus-jsx.macro';

class App extends Component {
  const a = 0;
  render() {
    return tersus(
      <>
        <div tj-if={a === 0}>
          <div tj-for={['a','b','c','d','e']}>
            <div tj-if={'--value'=== c}>
              {'--value'}
            </div>
          </div>
        </div> 
      </>
    )
  }
}

is equivalent to

class App extends Component {
  const a = 0;
  render() {
    return (
      <>
        {a === 0 && <><div>
          {['a', 'b', 'c', 'd', 'e'].map((value, index) => <><div>
            {value === c && <><div>
              {value}
            </div></>}
          </div></>)}
        </div></>} 
      </>
    )
  }
}

License

MIT