Support whitespace control (~)

[GavinJoyce]

The following input:

<div>
  {{~both~}}
</div>
<div>
  {{~left}}
</div>
<div>
  {{right~}}
</div>

results in the incorrect output:

<div>
  {{both}}
</div>
<div>
  {{left}}
</div>
<div>
  {{right}}
</div>

we should leave ~s in place

[tylerturdenpants]

You give me work, I’ll give you work!

[GavinJoyce]

It looks like the presence of ~s isn't included in the AST:

I wonder if we can use the location information to lookup the source and detect if there are preceding or trailing characters?

[rwjblue]

Ya, we can either use the source info to introspect for the ~ or we can make glimmer-vm include them in the generated AST. I'd vaguely prefer the latter.

Should be straight forward to add I think, see here:

https://github.com/glimmerjs/glimmer-vm/blob/157ffdb705699c8a03c7a4199af1779d2eea1b1f/packages/%40glimmer/syntax/lib/parser/handlebars-node-visitors.ts#L100

That location (and the BlockStatement one) receive the result of the handlebars parser, which has rightStripped / leftStripped boolean flags.

[GavinJoyce]

While we await this issue being resolved, I'm skipping files that contain a ~ character in https://github.com/rajasegar/ember-angle-brackets-codemod/pull/61

[rwjblue]

Just wanted to mention glimmerjs/glimmer-vm#951, I think its probably good to land but was hoping to get a conceptual review by folks first.

If no movement there in a few days, ping me again 😛 (I'm forgetful)...

[rwjblue]

The fix in glimmerjs/glimmer-vm#951 has landed (which auto-closed this issue), reopening to track updating here to account for the changes.

[tylerturdenpants]

There is a test in the 2.0 release that shows this is fixed:

test('whitespace-control', () => {
  let input = `
    <div>
      {{~both~}}
    </div>
    <div>
      {{~left}}
    </div>
    <div>
      {{right~}}
    </div>
  `;

  expect(runTest('whitespace-control.hbs', input)).toMatchInlineSnapshot(`
    "
        <div>
          {{~both~}}
        </div>
        <div>
          {{~left}}
        </div>
        <div>
          {{right~}}
        </div>
      "
  `);
});

[tylerturdenpants]

Sorry, spoke to soon, re-opening this issue

[tylerturdenpants]

I have opened this issue:
ember-template-lint/ember-template-recast#155

And this failing test:
ember-template-lint/ember-template-recast#156

[rwjblue]

Just released ember-template-recast@3.2.8 which fixes the issue mentioned above. The primary changes happened in glimmerjs/glimmer-vm#983 and handlebars-lang/handlebars.js#1584.

This lib will need to update to the latest ember-template-recast to get those fixes.