HTML in AskScript

[mhagmajer]

A simple static html table in TypeScript using JSX (assuming it is consumed by React-like library):

function Component() {
  return <>
    <h1 style={{ textDecoration: 'underline' }}>Hello world!</h1>
    <table>
      <tr>
        <td>A1</td>
        <td>B1</td>
      </tr>
      <tr>
        <td>A2</td>
        <td>{2+2}</td>
      </tr>
      <tr>
        <td>A3</td>
        <td>{hello()}</td>
      </tr>
    </table>
  </>;
}

Same thing using a new html resource in AskScript:

let Component = fun {
  html {
    h1 ({ style: { textDecoration: 'underline' } }) { 'hello world!' }
    table {
      tr { td { 'A1' }, td { 'B1' } }
      tr { td { 'A2' }, td { 2 + 2 } }
      tr { td { 'A3' }, td { hello() } }
    }
  }
}

Since AskScript is a programming language, it will be also possible to mix HTML markup with computations allowing for easy rendering of a list with items in list:

let renderList = fun(list) {
  html {
    ol {
      li {
        list:map(fun (name) {
          html {
            li { name }
          }
        })
      }
    }
  }
}

[mhagmajer]

https://svelte.dev/ for reference

Let's add some examples of dynamic UI to asses feasibility of having dynamic views in AskScript

[pkarw]

Wow, this is awesome

[pkarw]

... another use case of this feature could be supporting different component engines: Vue, Angular, React, WebComponents - something like https://github.com/BuilderIO/jsx-lite