What is this StencilJs Syntax?

Question

  render() {
    return (
      <Host>
        <div>

I don't understand this syntax. Stencil is written in typescript file. As a a parameter return gets some html. But it is not in quotes . I really don't understand how TypeScript compiler accepts this.

Answer 1

Stencil requires users to write their code in TypeScript. We've found that adding type information can be an enormous benefit for projects as they grow in lines of code and number of people working on them. This syntax is called 'TSX', which is the TypeScript variant of JSX. JSX is used predominantly in React, and probably where most folks know it from. In fact, if you're using React + TypeScript, you're using TSX as well!

In this code snippet

render() {
  return (
   <Host>
     <div></div>
   </Host>
  );     

you're quite right that this isn't HTML. It's similar in style (how it looks in your editor), but in fact is TypeScript/JavaScript under the hood.

The return ( line tells TypeScript/JavaScript that we're going to return an expression, which will be the <Host> tag and any of its children. <Host> is a Stencil specific element. <Host> and its children get transpiled by Stencil/the TypeScript compiler into function calls.

For example,

  render() {
    return (
      <Host>
        <div>
          Hello World
        </div>
      </Host>
    );
  }

gets transpiled to something like

render() {
  return (index.h(index.Host, null, index.h("div", null, "Hello World")));
}

which allows the browser to recreate that tree structure.