json-template

json-template.jsx

<>
  <h1 id="login">Login</h1>
  <form aria-describedby="login" onSubmit={handleSubmit}>
    <input type="email" value={email} onChange={handleChangeEmail} />
    <input type="password" value={password} onChange={handleChangePassword} />
    <button type="submit">Submit</button>
  </form>
</>;

// VS

({
  'h1 id="login"': "Login",
  'form aria-describedby="login"': {
    onSubmit: handleSubmit,
    'input type="email"': { value: email, onChange: handleChangeEmail },
    'input type="password"': { value: password, onChange: handleChangePassword },
    'button type="submit"': "Submit",
  },
});

// VS

({
  h1: {
    id: "login",
    children: "Login",
  },
  form: {
    ariaDescribedby: "login",
    onSubmit: handleSubmit,
    input: {
      type: "email",
      value: email,
      onChange: handleChangeEmail,
    },
    // error - doubled
    input: {
      type: "password",
      value: password,
      onChange: handleChangePassword,
    },
    button: {
      type: "submit",
      children: "Submit",
    },
  },
});