From a967cc6649caa2d1e3164934e485478ebf1d127d Mon Sep 17 00:00:00 2001 From: Luke Melia Date: Wed, 25 Sep 2024 22:46:30 -0400 Subject: [PATCH] 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 | 25 ++++++++++++++++++++++ addon/components/freestyle-source/index.ts | 6 +++++- lib/ast-transform.js | 6 +++++- 3 files changed, 35 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 59bdd719..d75c1b89 100644 --- a/README.md +++ b/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. diff --git a/addon/components/freestyle-source/index.ts b/addon/components/freestyle-source/index.ts index 59916402..7bc73e3d 100644 --- a/addon/components/freestyle-source/index.ts +++ b/addon/components/freestyle-source/index.ts @@ -61,7 +61,11 @@ export default class FreestyleSource extends Component { 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(/{/g, '{') + .replace(/}/g, '}'); if (this.args.isDynamic) { result = this.dynamafy(result); diff --git a/lib/ast-transform.js b/lib/ast-transform.js index 89d969e9..703eee46 100644 --- a/lib/ast-transform.js +++ b/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 }) {