Update AST transform to replace curly braces

- This change encodes curly braces to { and } and converts them back at runtime for display
- This is needed because when the AST transform is used within a V2 addon, the AST transform must eliminate HBS-style curly brace usage or the value cannot be written into the @source argument (causes build errors).
- This commit also adds documentation on how to configure the AST transform to be used in a V2 addon

README.md

@@ -113,6 +113,31 @@ You should include `ember-freestyle` in your `devDependencies` so that apps
 using your addon will not include Ember Freestyle CSS and JavaScript in their
 production builds.
 
+### In V2 addons
+
+You will need to configure babel to run ember-freestyle's AST Transform in order to capture
+source code from Freestyle::Usage example blocks. For example:
+
+```js
+// babel.config.mjs
+import FreestyleTransform from 'ember-freestyle/lib/ast-transform.js';
+
+export default {
+  plugins: [
+    // ...
+    [
+      'babel-plugin-ember-template-compilation',
+      {
+        targetFormat: 'hbs',
+        transforms: [FreestyleTransform],
+      },
+    ],
+    // ...
+  ],
+};
+
+```
+
 ## Contributing
 
 See the [Contributing](CONTRIBUTING.md) guide for details.

addon/components/freestyle-source/index.ts

@@ -61,7 +61,11 @@ export default class FreestyleSource extends Component<Signature> {
     if (!this.args.source) {
       return '';
     }
-    let result = this.args.source.replace(/^(\s*\n)*/, '').replace(/\s*$/, '');
+    let result = this.args.source
+      .replace(/^(\s*\n)*/, '')
+      .replace(/\s*$/, '')
+      .replace(/&#123;/g, '{')
+      .replace(/&#125;/g, '}');
 
     if (this.args.isDynamic) {
       result = this.dynamafy(result);

lib/ast-transform.js

@@ -48,6 +48,10 @@ function cleanupNamedBlocksPolyfillSyntax(sourceString) {
   return sourceString;
 }
 
+function escapeCurlyBraces(s) {
+  return s.replace(/\{/g, '{').replace(/\}/g, '}');
+}
+
 function extractSource(nodes, contents) {
   // nodes should be a contiguous collection of ast nodes
   let startNode = nodes[0];
@@ -57,7 +61,7 @@ function extractSource(nodes, contents) {
   let lines = contents.split('\n').slice(start.line - 1, end.line);
   lines[0] = new Array(start.column).join(' ') + lines[0].slice(start.column);
   lines[lines.length - 1] = lines[lines.length - 1].slice(0, end.column);
-  return stripIndent(lines.join('\n'));
+  return escapeCurlyBraces(stripIndent(lines.join('\n')));
 }
 
 module.exports = function ({ contents, syntax }) {