Glimmer.js Wire-Format

We have a glimmer template as follows, please bear with me for missing syntax highlights:

template.hbs

{{#if @condition}}
  <p class="intro">Hello, world</p>
{{/if}}

Here, the compiler encounters an if condition and the corresponding OpCode is 41:

wire-format.d.ts

export type If = [
  op: SexpOpcodes.If,
  condition: Expression,
  block: SerializedInlineBlock,
  inverse: Option<SerializedInlineBlock>
];

The If block takes in 4 arguments as listed above. First being OpCode itself, followed by the block for condition. Last two are set of lines to be executed in true and false conditions respectively. Last arg is optional which takes null. So, the above line can be converted to:

output.js

[
  41,
  [30, 1],
  [
    [
      [1, ' '],
      [10, 2],
      [14, 0, 'intro'],
      [12],
      [1, 'Hello, world'],
      [13],
      [1, 'n'],
    ],
    [],
  ],
  null,
],


Other OpCodes for above examples with explanation are listed here:

OpcodeExplanation
30GetSymbol: Here, the second argument is 1, which is the index number in symbol table to lookupcondition variable
1Append: due to whitespace / newline before the condition itself, it is appended to the wire-format
10OpenElement
  • This indicates the triangle bracket <, which indicates opening of the paratag.
  • It takes an argument like WellKnownTagName.
14StaticAttr
  • This takes two arguments which are attribute key and value.
  • Here, first arg is 0 which is class from WellKnownAttrName and value is "intro".
12FlushElement
13CloseElement
41If