From 6d04b62afec8825f059c7c2952e2db2dae16bfa7 Mon Sep 17 00:00:00 2001 From: Ryan Mark Date: Sat, 15 Jun 2019 17:26:40 -0700 Subject: [PATCH 1/8] adds skipPrettier, white space, self closing --- .../__testfixtures__/custom-options.config.json | 3 ++- .../__testfixtures__/custom-options.input.hbs | 17 +++++++++++++++++ .../__testfixtures__/custom-options.output.hbs | 14 ++++++++++++++ .../transforms/angle-brackets-syntax.js | 16 ++++++++++++---- 4 files changed, 45 insertions(+), 5 deletions(-) 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..1036c3eae 100644 --- a/transforms/angle-brackets/__testfixtures__/custom-options.input.hbs +++ b/transforms/angle-brackets/__testfixtures__/custom-options.input.hbs @@ -4,3 +4,20 @@ {{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}} diff --git a/transforms/angle-brackets/__testfixtures__/custom-options.output.hbs b/transforms/angle-brackets/__testfixtures__/custom-options.output.hbs index 4bc4f5108..c17ddbc6c 100644 --- a/transforms/angle-brackets/__testfixtures__/custom-options.output.hbs +++ b/transforms/angle-brackets/__testfixtures__/custom-options.output.hbs @@ -4,3 +4,17 @@ {{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 + \ No newline at end of file diff --git a/transforms/angle-brackets/transforms/angle-brackets-syntax.js b/transforms/angle-brackets/transforms/angle-brackets-syntax.js index 8949090d0..d7060bcb7 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; } } } @@ -351,7 +353,7 @@ module.exports = function(fileInfo, api, options) { let children = node.program ? node.program.body : undefined; let blockParams = node.program ? node.program.blockParams : undefined; - if(tagName === 'link-to') { + if (tagName === 'link-to') { if (node.type === 'MustacheStatement') { let params = node.params; let textParam = params.shift(); //the first param becomes the block content @@ -372,11 +374,16 @@ module.exports = function(fileInfo, api, options) { attributes = transformNodeAttributes(node); } + // console.log('selfClosing: ', node) + let selfClosing = node.type !== 'BlockStatement'; + if ( newTagName === 'LinkTo') { + selfClosing = false; + } - return b.element(newTagName, { + return b.element({ name: newTagName, selfClosing }, { attrs: attributes, children, - blockParams + blockParams, }); }; @@ -401,6 +408,7 @@ module.exports = function(fileInfo, api, options) { a.value = b.text(_EMPTY_STRING_); } }); + // console.log(node.selfClosing, node.tag); } }); @@ -411,5 +419,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" }); }; From 2eba2c8fd8acd0b984a7ca04bb86dca609e73fdf Mon Sep 17 00:00:00 2001 From: Ryan Mark Date: Sat, 15 Jun 2019 17:36:43 -0700 Subject: [PATCH 2/8] update readme --- README.md | 11 +++++++++++ .../transforms/angle-brackets-syntax.js | 1 - 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d551bc492..3a889afd4 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,17 @@ You can also disable the conversion of the built-in components `{{link-to}}`, `{ } ``` +You can also disable the final **Prettier** formatting and attempt to preserve white space by adding `skipPrettier` as follows: + +**config/anglebrackets-codemod-config.json** + +```js +{ + "helpers": [], + "skipPrettier": true +} +``` + You can execute the codemod with custom configuration by specifying a `--config` command line option as follows: ```sh diff --git a/transforms/angle-brackets/transforms/angle-brackets-syntax.js b/transforms/angle-brackets/transforms/angle-brackets-syntax.js index d7060bcb7..db2ef14ea 100755 --- a/transforms/angle-brackets/transforms/angle-brackets-syntax.js +++ b/transforms/angle-brackets/transforms/angle-brackets-syntax.js @@ -408,7 +408,6 @@ module.exports = function(fileInfo, api, options) { a.value = b.text(_EMPTY_STRING_); } }); - // console.log(node.selfClosing, node.tag); } }); From 22f0255391728e87d5c279d0412a9e471f3995e4 Mon Sep 17 00:00:00 2001 From: Ryan Mark Date: Sat, 15 Jun 2019 17:38:13 -0700 Subject: [PATCH 3/8] derp --- transforms/angle-brackets/transforms/angle-brackets-syntax.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/transforms/angle-brackets/transforms/angle-brackets-syntax.js b/transforms/angle-brackets/transforms/angle-brackets-syntax.js index db2ef14ea..a4792c1c2 100755 --- a/transforms/angle-brackets/transforms/angle-brackets-syntax.js +++ b/transforms/angle-brackets/transforms/angle-brackets-syntax.js @@ -374,7 +374,7 @@ module.exports = function(fileInfo, api, options) { attributes = transformNodeAttributes(node); } - // console.log('selfClosing: ', node) + let selfClosing = node.type !== 'BlockStatement'; if ( newTagName === 'LinkTo') { selfClosing = false; From 681cdf8b020b767ae2456ed67aa6f74cb1d0cbed Mon Sep 17 00:00:00 2001 From: Ryan Mark Date: Sat, 15 Jun 2019 17:40:59 -0700 Subject: [PATCH 4/8] simplify self closing --- .../angle-brackets/transforms/angle-brackets-syntax.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/transforms/angle-brackets/transforms/angle-brackets-syntax.js b/transforms/angle-brackets/transforms/angle-brackets-syntax.js index a4792c1c2..e9cb4ac7b 100755 --- a/transforms/angle-brackets/transforms/angle-brackets-syntax.js +++ b/transforms/angle-brackets/transforms/angle-brackets-syntax.js @@ -352,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') { + + selfClosing = false; + if (node.type === 'MustacheStatement') { let params = node.params; let textParam = params.shift(); //the first param becomes the block content @@ -375,11 +379,6 @@ module.exports = function(fileInfo, api, options) { attributes = transformNodeAttributes(node); } - let selfClosing = node.type !== 'BlockStatement'; - if ( newTagName === 'LinkTo') { - selfClosing = false; - } - return b.element({ name: newTagName, selfClosing }, { attrs: attributes, children, From 038e218e7250d7fa94edde172942e6d371733d93 Mon Sep 17 00:00:00 2001 From: Ryan Mark Date: Sat, 15 Jun 2019 17:48:03 -0700 Subject: [PATCH 5/8] skipping prettier does not mess with a component which renders some example JavaScript --- .../__testfixtures__/custom-options.input.hbs | 6 ++++++ .../__testfixtures__/custom-options.output.hbs | 8 +++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/transforms/angle-brackets/__testfixtures__/custom-options.input.hbs b/transforms/angle-brackets/__testfixtures__/custom-options.input.hbs index 1036c3eae..e54760871 100644 --- a/transforms/angle-brackets/__testfixtures__/custom-options.input.hbs +++ b/transforms/angle-brackets/__testfixtures__/custom-options.input.hbs @@ -21,3 +21,9 @@ {{#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 c17ddbc6c..50d43a025 100644 --- a/transforms/angle-brackets/__testfixtures__/custom-options.output.hbs +++ b/transforms/angle-brackets/__testfixtures__/custom-options.output.hbs @@ -17,4 +17,10 @@ 2 3 3 - \ No newline at end of file + + +someFunction({ + {{#unless installationIsAnonymous}} + console.log("hi"); + {{/unless}} +}); From 16434a728304d77f6b3c8abba63d58d11072d5db Mon Sep 17 00:00:00 2001 From: Ryan Mark Date: Sat, 15 Jun 2019 18:40:34 -0700 Subject: [PATCH 6/8] show white space preservation. --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index 3a889afd4..25e0e7d9e 100644 --- a/README.md +++ b/README.md @@ -87,6 +87,30 @@ You can also disable the final **Prettier** formatting and attempt to preserve w "skipPrettier": true } ``` +By disabling Prettier, oddly formatted `hbs` files go from + +#### 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: From 08dc688e7eed769bb8b18e4b5d590517ee3aa5b6 Mon Sep 17 00:00:00 2001 From: Ryan Mark Date: Sat, 15 Jun 2019 18:40:34 -0700 Subject: [PATCH 7/8] show white space preservation. --- README.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/README.md b/README.md index 3a889afd4..f9d578f23 100644 --- a/README.md +++ b/README.md @@ -87,6 +87,30 @@ You can also disable the final **Prettier** formatting and attempt to preserve w "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: @@ -95,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) From bc7f88e08561fcf5a0ca57b890ff20a09dd2b6ed Mon Sep 17 00:00:00 2001 From: Ryan Mark Date: Mon, 24 Jun 2019 09:05:46 -0700 Subject: [PATCH 8/8] remove white space wording --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f9d578f23..446604ce4 100644 --- a/README.md +++ b/README.md @@ -77,7 +77,7 @@ You can also disable the conversion of the built-in components `{{link-to}}`, `{ } ``` -You can also disable the final **Prettier** formatting and attempt to preserve white space by adding `skipPrettier` as follows: +You can also disable the final **Prettier** formatting by adding `skipPrettier` as follows: **config/anglebrackets-codemod-config.json**