Merge pull request #12 from ember-codemods/wrapper-indent

Improve template wrapper output

Author: Turbo87

lib/__tests__/__snapshots__/transform.js.snap

@@ -17,7 +17,9 @@ foo
     });
   
 ~~~~~~~~~~
-<div ...attributes>foo</div>
+<div ...attributes>
+  foo
+</div>
 =========="
 `;
 
@@ -39,7 +41,9 @@ foo
     });
   
 ~~~~~~~~~~
-<div foo={{this.foo}} bar={{this.baz}} ...attributes>foo</div>
+<div foo={{this.foo}} bar={{this.baz}} ...attributes>
+  foo
+</div>
 =========="
 `;
 
@@ -61,7 +65,9 @@ foo
     });
   
 ~~~~~~~~~~
-<div class=\\"{{if this.a \\"b\\"}} {{if this.x \\"y\\" \\"z\\"}} {{unless this.foo \\"bar\\"}}\\" ...attributes>foo</div>
+<div class=\\"{{if this.a \\"b\\"}} {{if this.x \\"y\\" \\"z\\"}} {{unless this.foo \\"bar\\"}}\\" ...attributes>
+  foo
+</div>
 =========="
 `;
 
@@ -83,7 +89,9 @@ foo
     });
   
 ~~~~~~~~~~
-<div class=\\"foo bar:baz\\" ...attributes>foo</div>
+<div class=\\"foo bar:baz\\" ...attributes>
+  foo
+</div>
 =========="
 `;
 
@@ -105,7 +113,9 @@ foo
     });
   
 ~~~~~~~~~~
-<div id=\\"qux\\" ...attributes>foo</div>
+<div id=\\"qux\\" ...attributes>
+  foo
+</div>
 =========="
 `;
 
@@ -127,7 +137,35 @@ foo
     });
   
 ~~~~~~~~~~
-<div class=\\"foo\\" ...attributes>foo</div>
+<div class=\\"foo\\" ...attributes>
+  foo
+</div>
+=========="
+`;
+
+exports[`multi-line template 1`] = `
+"==========
+export default Component.extend({});
+~~~~~~~~~~
+{{#if this.foo}}
+  FOO
+{{else}}
+  BAR
+{{/if}}
+~~~~~~~~~~
+ => tagName: div
+~~~~~~~~~~
+export default Component.extend({
+  tagName: \\"\\"
+});
+~~~~~~~~~~
+<div ...attributes>
+  {{#if this.foo}}
+    FOO
+  {{else}}
+    BAR
+  {{/if}}
+</div>
 =========="
 `;
 
@@ -149,6 +187,8 @@ foo
     });
   
 ~~~~~~~~~~
-<span ...attributes>foo</span>
+<span ...attributes>
+  foo
+</span>
 =========="
 `;

lib/__tests__/transform.js

@@ -176,3 +176,17 @@ test('throws if component is using `click()`', () => {
     `"Using \`click()\` is not supported in tagless components"`
   );
 });
+
+test('multi-line template', () => {
+  let source = `export default Component.extend({});`;
+
+  let template = `
+{{#if this.foo}}
+  FOO
+{{else}}
+  BAR
+{{/if}}
+`.trim();
+
+  expect(generateSnapshot(source, template)).toMatchSnapshot();
+});

lib/transform.js

@@ -46,6 +46,8 @@ const EVENT_HANDLER_METHODS = [
   'drop',
 ];
 
+const PLACEHOLDER = '@@@PLACEHOLDER@@@';
+
 function transformPath(componentPath) {
   let debug = (fmt, ...args) => _debug(`${componentPath}: ${fmt}`, ...args);
 
@@ -210,11 +212,11 @@ function transform(source, template, options = {}) {
   templateAST.body = [
     b.element(tagName, {
       attrs,
-      children: templateAST.body,
+      children: [b.text(`\n${PLACEHOLDER}\n`)],
     }),
   ];
 
-  let newTemplate = templateRecast.print(templateAST);
+  let newTemplate = templateRecast.print(templateAST).replace(PLACEHOLDER, indentLines(template));
 
   return { source: newSource, template: newTemplate, tagName };
 }
@@ -313,6 +315,13 @@ function guessTemplatePath(componentPath) {
   return componentPath.replace('/components/', '/templates/components/').replace(/\.js$/, '.hbs');
 }
 
+function indentLines(content) {
+  return content
+    .split('\n')
+    .map(it => `  ${it}`)
+    .join('\n');
+}
+
 module.exports = {
   transform,
   transformPath,