Reasons

readme.md

Хуки:

function ConferenceSpeakersReact() {
  const [ speakers ] = useState(['Tom', 'Yehuda', 'Ed']);
  const [ current, updateCurrent ] = useState(0);

  const next = () => {
    let nextSpeaker = current + 1;
    updateCurrent(nextSpeaker);
  }

  return {
    current,
    next, speakers
  }
}

function ConferenceSpeakersReact() {
  const [ speakers ] = useState(['Tom', 'Yehuda', 'Ed']);
  const [ current, updateCurrent ] = useState(0);

  const next = () => {
    let nextSpeaker = current + 1;
    updateCurrent(nextSpeaker);
  }

  return {
    currentlySpeaking: speakers[current],
    moreSpeakers: (speakers.length - 1) > current,
    current,
    next, speakers
  }
}

{
  template: `
    <div @click="data.count++">
      {{data.count}} {{double}}
    </div>
  `,
  hooks() {
    const data = useData({count: 0})
    const double = useComputed(() => data.count * 2);
    return { data, double };
  }
}

function friendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id)
  
  return (
    <li style={{color: isOnline ? 'green' : 'black'}}>
      {props.friend.name}
    </li>
  )
}

function friendListItem(props) {
  const [isOnline, toggleStatus] = useFriendStatus(props.friend.id)
  return { isOnline, toggleStatus }
}

Списки:

vue

<ul>
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>

angular

<ul>
  <li *ngFor="let item of items; let i=index;" >
    {{ index }} - {{ item.message }}
  </li>
</ul>

ember

<ul>
{{#each items as |item index|}}
  <li>{{ index }} - {{ item.message }}</li>
{{/each}}
</ul>

svielte

<ul>
{#each items as item index}
    <li>{ index } - { item.message }</li>
{/each}
</ul>

react

function({items}) {
  return (
    <ul>
      {elements.map((item, index) => {
        return <li key={index}>{ index } - { item.message }</li>
      })}
    </ul>
  )
}

JSX

function Headline({
    data,
    dataMapper,
    dataReducer,
    dataFilter
}) {
    const preResult = data.map(dataMapper);
    const prePreResult = preResult.reduce(dataReducer, 0);
    const result = prePreResult.filter(dataFilter);
    return <h1> {
        result
    } </h1>;
};

HBS

{{#let (hash result=(filter @dataFilter (reduce @dataReducer (map @dataMapper @data) 0))) as |ctx|}}
  <h1>{{ctx.result}}</h1>
{{/let}}

JSX

export function template() {
    return <ul class = "companies" > {
        [{
            name: "Widgets",
            contacts: [{
                name: "Chad",
                email: "345@gmail.com",
                phone: "123"
            }]
        }].map((company) => <> <li class="company"> <Company company = { company } /></li> </>)
        } </ul>;
    }

HBS

<ul class="companies">
  {{#each (array 
    (hash name="Widgets" contacts=(array (hash name="Chad" email="345@gmail.com" phone="123")))
  ) as |company|}}
    <li class="company"><Company @company={{company}} /></li>
  {{/each}}
</ul>

demo.js

  class Foo {
    constructor () {
      if (this.hasQuestion) {
        alert(42);
      }
    }
  }