Home > Back-end >  How to convert a TemplateLiteral AST node back into template string source code?
How to convert a TemplateLiteral AST node back into template string source code?

Time:11-19

So I am working through "normalizing" a JS AST in certain ways to make transpilation easier into a particular target language. So I am having to learn the inner details of the AST. Then for testing, I am converting it back into JS source code, using print functions. I have handled pretty much every case so far, but the TemplateLiteral seems like it's a strange structure.

For example, you have this template string:

const str = 'const b83 = `foo${a100} bar ${b82}`'

Parse that str into an AST and you get this structure:

{
  "type": "TemplateLiteral",
  "start": 2692,
  "end": 2715,
  "expressions": [
    {
      "type": "Identifier",
      "start": 2698,
      "end": 2702,
      "name": "a100"
    },
    {
      "type": "Identifier",
      "start": 2710,
      "end": 2713,
      "name": "b82"
    }
  ],
  "quasis": [
    {
      "type": "TemplateElement",
      "start": 2693,
      "end": 2696,
      "value": {
        "raw": "foo",
        "cooked": "foo"
      },
      "tail": false
    },
    {
      "type": "TemplateElement",
      "start": 2703,
      "end": 2708,
      "value": {
        "raw": " bar ",
        "cooked": " bar "
      },
      "tail": false
    },
    {
      "type": "TemplateElement",
      "start": 2714,
      "end": 2714,
      "value": {
        "raw": "",
        "cooked": ""
      },
      "tail": true
    }
  ]
}

Notice, the "expressions" and "quasis" are not interlaced, they are made into separate arrays. How am I to go back and properly put them in the right order to regenerate the template string source code? Assume this AST node might be part of a larger AST, and the tree might be rewritten, so any information you use regarding the start and end text positions will only be useful from a relative, not absolute, perspective. I am just not quite sure the best way to read the start and end to re-interlace the expressions and quasis.

CodePudding user response:

You're always going to have quasis.length == expressions.length 1. You just take the first quasi, then the first expression, then the next quasi, then the next expression, etc., until the last quasi.

  • Related