manakuro

let person = { score: 25 };

let newScore = person.score
  |> double
  |> add(7, ?)
  |> boundScore(0, 100, ?);

newScore //=> 57

manakuro

const user = url
  |> api.get
  |> await
  |> (r => r.json())
  |> await
  |> (j => j.data.user);

manakuro

{
  "plugins":[
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal"}],
    ["@babel/plugin-proposal-optional-chaining", { "loose": false }],
  ]
}

manakuro

const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};
const baz = obj?.foo?.bar?.baz; // 42
const safe = obj?.qux?.baz; // undefined
const fooValue = myForm.querySelector('input[name=foo]')?.value

manakuro

if (myForm.checkValidity?.() === false) {
    return;
}

manakuro

{
  "plugins":[
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal"}],
    ["@babel/plugin-proposal-optional-chaining", { "loose": false }],
    "@babel/plugin-proposal-logical-assignment-operators"
  ]
}

manakuro

let a
let b = 'foo'
a ||= b  // a -> 'foo'

let c = 'bar'
let d = 'ddd'
c &&= d // c -> 'ddd'

manakuro

{
  "plugins":[
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal"}],
    ["@babel/plugin-proposal-optional-chaining", { "loose": false }],
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-do-expressions"
  ]
}

manakuro

const f = () => 10
let x = do {
  let tmp = f();
  tmp * tmp + 1
};  // x -> 101

manakuro

const getColoredComponent = color => {
  if(color === 'blue') { return <BlueComponent/>; }
  if(color === 'red') { return <RedComponent/>; }
  if(color === 'green') { return <GreenComponent/>; }
}
const Component = props =>
  <div className='myComponent'>
    {getColoredComponent()}
  </div>
;