[Babel-template] Support for (dot) property accessors after TS's non null assertion (!)

[Arooba-git]

Hi 👋
I'm using babel-template to generate an AST, where I keep getting 'Unexpected token' whenever it encounters access to object property after TS's post-fix non-null assertion:

Does babel-template not support (dot) property accessors after TS's non-null assertion or not support non-null assertion at all, or am I missing something? 🤔
TIA :)

[JLHwung]

I can't reproduce your issue on Babel REPL: https://babel.dev/repl#?browsers=&build=&builtIns=false&corejs=3.21&spec=false&loose=true&code_lz=IYQgdARkA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Ctypescript&prettier=false&targets=&version=7.20.4&externalPlugins=&assumptions=%7B%7D

Since you are using the Babel parser, did you enable the typescript plugin?

[Arooba-git]

Only passing in an ast node directly can work normally, and passing in the text code of the node will cause the parsing to fail.

You mean passing node as placeholder would still work in .ast()? But the doc explicitly says if no placeholders are used 🤔

[liuxingbaoyu]

It should work, but requires reparsing the incoming nodes, which will fail since the typescript plugin is not enabled by default. Whereas template strings allow direct manipulation of AST nodes, which does not require the plugin to be enabled.
https://babeljs.io/docs/en/babel-template#api
This would allow you to splice code text directly, but obviously the method you're using is better.

This has nothing to do with placeholders, but a template call in js.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

template.ast`code`

template.ast(`code`)

[Arooba-git]

I see.. thanks, I understand the issue now 👍 ... was focusing on the wrong part 😅.

[liuxingbaoyu]

const fn = (...args) => {console.log(args)};fn(`${{}}`);fn`${{}}`;

Only

template.ast`code${nodeObj}`

can get the node object.

[Arooba-git]

This made everything so much clearer now. Thank you for your time! 🙌

[JLHwung]

Since the question is now updated by using @babel/template, you can specify the plugin option in the second argument of the template.ast call:

// template.ast`foo!.bar` will not work
template.ast(`foo!.bar`, { plugins: ["typescript"] })

[liuxingbaoyu]

This works when the special node (!.) is given as an argument. And @JLHwung provides a method when using templates to parse code text containing special nodes.

template.ast`code.aaa.${nodeObj}`

vs

template.ast`code!.aaa.${nodeObj}`

For the second usage you need to pass in a second parameter to enable the plugin.

[Arooba-git]

Right, so I'm understanding that in my code, where I'm using ${collector.name}.next(); above, the ${collector.name} resolves to a string pluginmaterial!.hovered(), but since it is given as a template argument (${}) it doesn't need TS plugin to be specially enabled. But had it been passed directly as text as in .ast`pluginmaterial!.hovered(), I would have to manually enable the TS plugin. Is the correct?

[liuxingbaoyu]

Yes.

the ${collector.name} resolves to a string pluginmaterial!.hovered()

In addition, directly using the template as a parameter, you can directly pass in the node object, which avoids parsing. Only parsing needs to explicitly enable the plugin.

[Arooba-git]

Right, because of course the only way to directly pass in the node object in a template string, is via javascript's template placeholders ${}.
Means JS's template strings, when used directly with a function name/expression (foo``), aka tagged templates, avoid/bypass reparsing anything passed in their placeholders ${}.
Is that right? :)

[liuxingbaoyu]

Yes.

[Arooba-git]

And for anyone reading this thread in future, I had actually gotten confused by the usage of the term 'placeholders' in babel-template docs. I was mixing javascript's template placeholders (${}) with babel-template's (identifier/syntactic) placeholders which are two different things 🤦‍♀️ . In my screenshot above, where the babel-template docs tell us if no placeholders are used, just strings, you can use .ast(), it was not actually referring to javascript's template placeholder ${}, but babel-template's (syntactic/identifier) placeholders: