fix(zap_dev): Wrap interpolated identifiers in braces

[dnys1]

When component variables are interpolated in strings, the replacement identifier can cause invalidate Dart code to be generated if the identifier is not wrapped in braces already.

For example:

<script>
  String? value;
  String? interpolated;

  $: interpolated = '$value';
</script>

Here, the interpolated string currently becomes something like $_$v2 /* value */ which is invalid Dart code, when we really want ${_$v2 /* value */}.

[dnys1]

This solution feels pretty hacky. Open to better ways to handle it!

[simolus3]

I think you can handle this in visitInterpolationElement without changing _patchIdentifier by writing the braces into an empty span:

if (missingBraces) {
  _replaceRange(node.leftBracket.end, 0, '{');
}

_patchIdentifier(expression, expression.staticElement);

if (missingBraces) {
  _replaceRange(expression.end, 0, '}');
}

return;

I didn't try this so there might be an off-by-one error here, but as long as the patches are made with increasing offsets that don't overlap, this should work.

[dnys1]

Worked like a charm! Very cool system here. I was confused how that could work since after _patchIdentifier, the contents have changed. Turns out it's as simple as keeping tracking of the skew 😅 brilliant!

[simolus3]

Thanks!

[simolus3]

I think you can handle this in visitInterpolationElement without changing _patchIdentifier by writing the braces into an empty span:

if (missingBraces) {
  _replaceRange(node.leftBracket.end, 0, '{');
}

_patchIdentifier(expression, expression.staticElement);

if (missingBraces) {
  _replaceRange(expression.end, 0, '}');
}

return;

I didn't try this so there might be an off-by-one error here, but as long as the patches are made with increasing offsets that don't overlap, this should work.

[simolus3]

Looks great, thanks for the PRs!