Merge pull request #23 from dnys1/fix/string-interpolation

fix(zap_dev): Wrap interpolated identifiers in braces

zap/test/generated/blocks/interpolation.zap

@@ -0,0 +1,10 @@
+<script>
+    @prop
+    String? val;
+
+    String interpolated = '';
+
+    $: interpolated = 'interpolated=$val, wrapped=${val}, isNull=${val == null}';
+</script>
+
+{interpolated}

zap/test/generated/blocks/interpolation_test.dart

@@ -0,0 +1,24 @@
+@Tags(['browser'])
+import 'dart:html';
+
+import 'package:test/test.dart';
+import 'package:zap/zap.dart';
+
+import 'interpolation.zap.dart';
+
+void main() {
+  test('string interpolation', () async {
+    final testbed = Element.div();
+    final component = Interpolation(ZapValue('test'))..create(testbed);
+
+    expect(testbed.text, 'interpolated=test, wrapped=test, isNull=false');
+
+    component.val = 'updated';
+    await component.tick;
+    expect(testbed.text, 'interpolated=updated, wrapped=updated, isNull=false');
+
+    component.val = null;
+    await component.tick;
+    expect(testbed.text, 'interpolated=null, wrapped=null, isNull=true');
+  });
+}

zap_dev/lib/src/generator/generator.dart

@@ -12,11 +12,10 @@ import 'package:collection/collection.dart';
 import '../resolver/component.dart';
 import '../resolver/dart.dart';
 import '../resolver/flow.dart';
-import '../resolver/resolver.dart';
-import '../resolver/reactive_dom.dart';
 import '../resolver/preparation.dart';
+import '../resolver/reactive_dom.dart';
+import '../resolver/resolver.dart';
 import '../utils/dart.dart';
-
 import 'imports.dart';
 import 'options.dart';
 import 'ssr/node_to_text.dart';
@@ -1674,6 +1673,26 @@ class _DartSourceRewriter extends GeneralizingAstVisitor<void> {
     }
   }
 
+  @override
+  void visitInterpolationExpression(InterpolationExpression node) {
+    if (node.expression case final SimpleIdentifier expression) {
+      // Interpolated variables must be wrapped in braces since the
+      // replacement identifier will have `$` in the name.
+      //
+      // For example, '$localVariable' becomes '${_$v1 /* localVariable */}'.
+      final missingBraces = node.rightBracket == null;
+      if (missingBraces) {
+        _replaceRange(node.leftBracket.end, 0, '{');
+      }
+      _patchIdentifier(expression, expression.staticElement);
+      if (missingBraces) {
+        _replaceRange(expression.end, 0, '}');
+      }
+    } else {
+      super.visitInterpolationExpression(node);
+    }
+  }
+
   @override
   void visitAssignmentExpression(AssignmentExpression node) {
     _visitCompoundAssignmentExpression(node);