The html-to-rescript-jsx from protoship

html-to-rescript-jsx's People

Contributors

Stargazers

Watchers

html-to-rescript-jsx's Issues

handling html void elements

Currently, if we use it with these tag:

<input />
<input class="disabled" />

<input class="success" />
<input class="warning" />
<input class="danger" />
<br>
<img src="img.jpg" />
<div class="input-group prefix">
  <span class="label prefix">Company</span>
  <input />
</div>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png" />
<br>
<hr>
<input type="number" placeholder="Enter your favorite number">

we get this output:

let s = React.string

@react.component
let make = () => {
  <>

    <input >
    </input>
    <input className="disabled">
    </input>
    <input className="success">
    </input>
    <input className="warning">
    </input>
    <input className="danger">
    </input>
    <br >
    </br>
    <img src="img.jpg">
    </img>
    <div className="input-group prefix">
      <span className="label prefix">
        {s("Company")}
      </span>
      <input >
      </input>
    </div>
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png">
    </img>
    <br >
    </br>
    <hr >
    </hr>
    <input type_="number" placeholder="Enter your favorite number">
    </input>

  </>
}

Ideally it should be:

let s = React.string

@react.component
let make = () => {
  <>

    <input  />
    <input className="disabled" />
    <input className="success" />
    <input className="warning" />
    <input className="danger" />
    <br  />
    <img src="img.jpg" />
    <div className="input-group prefix">
      <span className="label prefix">
        {s("Company")}
      </span>
      <input  />
    </div>
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png" />
    <br  />
    <hr  />
    <input type_="number" placeholder="Enter your favorite number" />

  </>
}