diff --git a/README.md b/README.md index d551bc492..446604ce4 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,41 @@ You can also disable the conversion of the built-in components `{{link-to}}`, `{ } ``` +You can also disable the final **Prettier** formatting by adding `skipPrettier` as follows: + +**config/anglebrackets-codemod-config.json** + +```js +{ + "helpers": [], + "skipPrettier": true +} +``` +By disabling Prettier, oddly formatted `hbs` files will remain (somewhat) unchanged: + +#### From +```hbs +{{#bs-button-group + value=buttonGroupValue + type="checkbox" + onChange=(action (mut buttonGroupValue)) as |bg|}} + {{#bg.button value=1}}1{{/bg.button}} + {{#bg.button value=2}}2{{/bg.button}} + {{#bg.button value=3}}3{{/bg.button}} + {{#bg.button value=3}}3{{/bg.button}} +{{/bs-button-group}} +``` + +#### To +```hbs + + 1 + 2 + 3 + 3 + +``` + You can execute the codemod with custom configuration by specifying a `--config` command line option as follows: ```sh @@ -84,6 +119,7 @@ $ cd my-ember-app-or-addon $ npx ember-angle-brackets-codemod angle-brackets app/templates --config ./config/anglebrackets-codemod-config.json ``` +### Getting a list of helpers To get a list of helpers in your app you can do this in the Developer Console in your browser inside of your app: ```js var componentLikeHelpers = Object.keys(require.entries) diff --git a/transforms/angle-brackets/__testfixtures__/custom-options.config.json b/transforms/angle-brackets/__testfixtures__/custom-options.config.json index 54a31b45b..021fd1531 100644 --- a/transforms/angle-brackets/__testfixtures__/custom-options.config.json +++ b/transforms/angle-brackets/__testfixtures__/custom-options.config.json @@ -1,4 +1,5 @@ { "helpers": ["some-helper1", "some-helper2", "some-helper3"], - "skipBuiltInComponents": true + "skipBuiltInComponents": true, + "skipPrettier": true } \ No newline at end of file diff --git a/transforms/angle-brackets/__testfixtures__/custom-options.input.hbs b/transforms/angle-brackets/__testfixtures__/custom-options.input.hbs index b88fcedd8..e54760871 100644 --- a/transforms/angle-brackets/__testfixtures__/custom-options.input.hbs +++ b/transforms/angle-brackets/__testfixtures__/custom-options.input.hbs @@ -4,3 +4,26 @@ {{link-to "Title" "some.route"}} {{textarea value=this.model.body}} {{input type="checkbox" name="email-opt-in" checked=this.model.emailPreference}} + +{{site-header user=this.user class=(if this.user.isAdmin "admin")}} +{{#super-select selected=this.user.country as |s|}} + {{#each this.availableCountries as |country|}} + {{#s.option value=country}}{{country.name}}{{/s.option}} + {{/each}} +{{/super-select}} + +{{#bs-button-group + value=buttonGroupValue + type="checkbox" + onChange=(action (mut buttonGroupValue)) as |bg|}} + {{#bg.button value=1}}1{{/bg.button}} + {{#bg.button value=2}}2{{/bg.button}} + {{#bg.button value=3}}3{{/bg.button}} + {{#bg.button value=3}}3{{/bg.button}} +{{/bs-button-group}} + +someFunction({ + {{#unless installationIsAnonymous}} + console.log("hi"); + {{/unless}} +}); diff --git a/transforms/angle-brackets/__testfixtures__/custom-options.output.hbs b/transforms/angle-brackets/__testfixtures__/custom-options.output.hbs index 4bc4f5108..50d43a025 100644 --- a/transforms/angle-brackets/__testfixtures__/custom-options.output.hbs +++ b/transforms/angle-brackets/__testfixtures__/custom-options.output.hbs @@ -4,3 +4,23 @@ {{link-to "Title" "some.route"}} {{textarea value=this.model.body}} {{input type="checkbox" name="email-opt-in" checked=this.model.emailPreference}} + + + + {{#each this.availableCountries as |country|}} + {{country.name}} + {{/each}} + + + + 1 + 2 + 3 + 3 + + +someFunction({ + {{#unless installationIsAnonymous}} + console.log("hi"); + {{/unless}} +}); diff --git a/transforms/angle-brackets/transforms/angle-brackets-syntax.js b/transforms/angle-brackets/transforms/angle-brackets-syntax.js index 8949090d0..e9cb4ac7b 100755 --- a/transforms/angle-brackets/transforms/angle-brackets-syntax.js +++ b/transforms/angle-brackets/transforms/angle-brackets-syntax.js @@ -9,6 +9,7 @@ class Config { constructor(options) { this.helpers = []; this.skipBuiltInComponents = false; + this.skipPrettier = false; if (options.config) { let filePath = path.join(process.cwd(), options.config); @@ -19,6 +20,7 @@ class Config { } this.skipBuiltInComponents = !!config.skipBuiltInComponents; + this.skipPrettier = !!config.skipPrettier; } } } @@ -350,8 +352,12 @@ module.exports = function(fileInfo, api, options) { let attributes; let children = node.program ? node.program.body : undefined; let blockParams = node.program ? node.program.blockParams : undefined; + let selfClosing = node.type !== 'BlockStatement'; - if(tagName === 'link-to') { + if (tagName === 'link-to') { + + selfClosing = false; + if (node.type === 'MustacheStatement') { let params = node.params; let textParam = params.shift(); //the first param becomes the block content @@ -373,10 +379,10 @@ module.exports = function(fileInfo, api, options) { attributes = transformNodeAttributes(node); } - return b.element(newTagName, { + return b.element({ name: newTagName, selfClosing }, { attrs: attributes, children, - blockParams + blockParams, }); }; @@ -411,5 +417,5 @@ module.exports = function(fileInfo, api, options) { let uglySource = glimmer.print(ast).replace(attrEqualEmptyString,""); let dataOk = uglySource.replace(dataEqualsNoValue, "$1"); - return prettier.format(dataOk, { parser: "glimmer" }); + return config.skipPrettier ? dataOk : prettier.format(dataOk, { parser: "glimmer" }); };