<?hh

require __DIR__ . "/vendor/hh_autoload.php";

class MyClass {
  public function getInt(): int {
    return 4;
  }
}

function get_string(): string {
  return "Hello";
}

function get_float(): float {
  return 1.2;
}

function embed_hack(): void {
  $xhp_float = <i>{get_float()}</i>;
  $a = new MyBasicUsageExampleClass();

  echo (
    <div>
      {(new MyClass())->getInt()}
      <strong>{get_string()}</strong>
      {$xhp_float}
    </div>
  );
}

basic_usage_examples_embed_hack();

// string concatenation
<?hh
$user_name = 'Fred';
echo "<tt>Hello <strong>$user_name</strong></tt>";

// Bad
$('.btn').click(function (event) {
    var $target = $('.target');
    var newValue = $target.value() + $('.source').value();

    $target.html(newValue);

    emitter('target-changed', { value: newValue }).then(function (ok) {
        if (ok && $('.related-source').value() === 'yes deleted it') {
            $('.to-be-deleted').remove();
        }
    });
});

// string concatenation
<?hh
$user_name = 'Fred';
echo "<tt>Hello <strong>$user_name</strong></tt>";

function formatTime(time) {
    moment(time).format(timeFormat);
}

function Component(props) {
    return (
        <Clock
            time={formatTime(props.time)}
            onReset={props.resetClock}
        />
    );
}

class Component {
    render() {
        const {
            data,
            changeData,
        } = this.props;

        return (
            <App>
                <Header title={data.title} />
                <Grid rows={data.rows} />
                <Input onChange={changeData} />
            </App>
        );
    }
}