Merge pull request #1574 from glimmerjs/rm-with

[CLEANUP] Drop support for `{{#with}}` keyword

Author: chancancode

packages/@glimmer-workspace/integration-tests/lib/suites/components.ts

@@ -268,7 +268,7 @@ export class GlimmerishComponents extends RenderTest {
   })
   'invoking dynamic component (local) via angle brackets'() {
     this.registerComponent('Glimmer', 'Foo', 'hello world!');
-    this.render(`{{#with (component 'Foo') as |Other|}}<Other />{{/with}}`);
+    this.render(`{{#let (component 'Foo') as |Other|}}<Other />{{/let}}`);
 
     this.assertHTML(`hello world!`);
     this.assertStableRerender();
@@ -280,7 +280,7 @@ export class GlimmerishComponents extends RenderTest {
   'invoking dynamic component (local path) via angle brackets'() {
     this.registerHelper('hash', (_positional, named) => named);
     this.registerComponent('Glimmer', 'Foo', 'hello world!');
-    this.render(`{{#with (hash Foo=(component 'Foo')) as |Other|}}<Other.Foo />{{/with}}`);
+    this.render(`{{#let (hash Foo=(component 'Foo')) as |Other|}}<Other.Foo />{{/let}}`);
 
     this.assertHTML(`hello world!`);
     this.assertStableRerender();
@@ -291,7 +291,7 @@ export class GlimmerishComponents extends RenderTest {
   })
   'invoking dynamic component (local) via angle brackets (ill-advised "htmlish element name" but supported)'() {
     this.registerComponent('Glimmer', 'Foo', 'hello world!');
-    this.render(`{{#with (component 'Foo') as |div|}}<div />{{/with}}`);
+    this.render(`{{#let (component 'Foo') as |div|}}<div />{{/let}}`);
 
     this.assertHTML(`hello world!`);
     this.assertStableRerender();
@@ -302,7 +302,7 @@ export class GlimmerishComponents extends RenderTest {
   })
   'invoking dynamic component (local) via angle brackets supports attributes'() {
     this.registerComponent('Glimmer', 'Foo', '<div ...attributes>hello world!</div>');
-    this.render(`{{#with (component 'Foo') as |Other|}}<Other data-test="foo" />{{/with}}`);
+    this.render(`{{#let (component 'Foo') as |Other|}}<Other data-test="foo" />{{/let}}`);
 
     this.assertHTML(`<div data-test="foo">hello world!</div>`);
     this.assertStableRerender();
@@ -313,7 +313,7 @@ export class GlimmerishComponents extends RenderTest {
   })
   'invoking dynamic component (local) via angle brackets supports args'() {
     this.registerComponent('Glimmer', 'Foo', 'hello {{@name}}!');
-    this.render(`{{#with (component 'Foo') as |Other|}}<Other @name="world" />{{/with}}`);
+    this.render(`{{#let (component 'Foo') as |Other|}}<Other @name="world" />{{/let}}`);
 
     this.assertHTML(`hello world!`);
     this.assertStableRerender();
@@ -324,7 +324,7 @@ export class GlimmerishComponents extends RenderTest {
   })
   'invoking dynamic component (local) via angle brackets supports passing a block'() {
     this.registerComponent('Glimmer', 'Foo', 'hello {{yield}}!');
-    this.render(`{{#with (component 'Foo') as |Other|}}<Other>world</Other>{{/with}}`);
+    this.render(`{{#let (component 'Foo') as |Other|}}<Other>world</Other>{{/let}}`);
 
     this.assertHTML(`hello world!`);
     this.assertStableRerender();
@@ -351,7 +351,7 @@ export class GlimmerishComponents extends RenderTest {
       Foo
     );
     this.render(
-      `{{#with (component 'Foo') as |Other|}}<Other @staticNamedArg="static" data-test1={{this.outer}} data-test2="static" @dynamicNamedArg={{this.outer}}>template</Other>{{/with}}`,
+      `{{#let (component 'Foo') as |Other|}}<Other @staticNamedArg="static" data-test1={{this.outer}} data-test2="static" @dynamicNamedArg={{this.outer}}>template</Other>{{/let}}`,
       { outer: 'outer' }
     );
 

packages/@glimmer-workspace/integration-tests/lib/suites/debugger.ts

@@ -75,7 +75,7 @@ export class DebuggerSuite extends RenderTest {
     });
 
     this.render(
-      '{{#with this.foo as |bar|}}{{#if this.a.b}}true{{debugger}}{{else}}false{{debugger}}{{/if}}{{/with}}',
+      '{{#let this.foo as |bar|}}{{#if this.a.b}}true{{debugger}}{{else}}false{{debugger}}{{/if}}{{/let}}',
       expectedContext
     );
     this.assert.strictEqual(callbackExecuted, 1);

packages/@glimmer-workspace/integration-tests/lib/suites/scope.ts

@@ -9,11 +9,11 @@ export class ScopeSuite extends RenderTest {
   'correct scope - conflicting local names'() {
     this.render({
       layout: stripTight`
-        {{#with @a as |item|}}{{@a}}: {{item}},
-          {{#with @b as |item|}} {{@b}}: {{item}},
-            {{#with @c as |item|}} {{@c}}: {{item}}{{/with}}
-          {{/with}}
-        {{/with}}`,
+        {{#let @a as |item|}}{{@a}}: {{item}},
+          {{#let @b as |item|}} {{@b}}: {{item}},
+            {{#let @c as |item|}} {{@c}}: {{item}}{{/let}}
+          {{/let}}
+        {{/let}}`,
       args: { a: '"A"', b: '"B"', c: '"C"' },
     });
 
@@ -25,7 +25,7 @@ export class ScopeSuite extends RenderTest {
   'correct scope - conflicting block param and attr names'() {
     this.render({
       layout:
-        'Outer: {{@conflict}} {{#with @item as |conflict|}}Inner: {{@conflict}} Block: {{conflict}}{{/with}}',
+        'Outer: {{@conflict}} {{#let @item as |conflict|}}Inner: {{@conflict}} Block: {{conflict}}{{/let}}',
       args: { item: '"from block"', conflict: '"from attr"' },
     });
 

packages/@glimmer-workspace/integration-tests/test/ember-component-test.ts

@@ -372,14 +372,14 @@ class CurlyScopeTest extends CurlyTest {
       stripTight`
         <div>
           [Outside: {{this.zomg}}]
-          {{#with this.zomg as |lol|}}
+          {{#let this.zomg as |lol|}}
             [Inside: {{this.zomg}}]
             [Inside: {{lol}}]
             <FooBar @foo={{this.zomg}}>
               [Block: {{this.zomg}}]
               [Block: {{lol}}]
             </FooBar>
-          {{/with}}
+          {{/let}}
         </div>`,
       { zomg: 'zomg' }
     );
@@ -419,14 +419,14 @@ class CurlyScopeTest extends CurlyTest {
       stripTight`
         <div>
           [Outside: {{this.zomg}}]
-          {{#with this.zomg as |lol|}}
+          {{#let this.zomg as |lol|}}
             [Inside: {{this.zomg}}]
             [Inside: {{lol}}]
             {{#foo-bar foo=this.zomg}}
               [Block: {{this.zomg}}]
               [Block: {{lol}}]
             {{/foo-bar}}
-          {{/with}}
+          {{/let}}
         </div>`,
       { zomg: 'zomg' }
     );
@@ -991,9 +991,9 @@ class CurlyClosureComponentsTest extends CurlyTest {
 
     this.render(
       stripTight`
-        {{#with (hash comp=(component 'foo-bar')) as |my|}}
+        {{#let (hash comp=(component 'foo-bar')) as |my|}}
           {{#component my.comp arg1="World!"}}Test1{{/component}} Test2
-        {{/with}}
+        {{/let}}
       `
     );
 
@@ -1007,9 +1007,9 @@ class CurlyClosureComponentsTest extends CurlyTest {
 
     this.render(
       stripTight`
-        {{#with (hash comp=(component 'foo-bar')) as |my|}}
+        {{#let (hash comp=(component 'foo-bar')) as |my|}}
           {{#component my.comp}}World!{{/component}} Test
-        {{/with}}
+        {{/let}}
       `
     );
 
@@ -1023,9 +1023,9 @@ class CurlyClosureComponentsTest extends CurlyTest {
 
     this.render(
       stripTight`
-        {{#with (hash comp=(component 'foo-bar')) as |my|}}
+        {{#let (hash comp=(component 'foo-bar')) as |my|}}
           {{component my.comp arg1="World!"}} Test
-        {{/with}}
+        {{/let}}
       `
     );
 
@@ -1039,9 +1039,9 @@ class CurlyClosureComponentsTest extends CurlyTest {
 
     this.render(
       stripTight`
-        {{#with (hash comp=(component 'foo-bar')) as |my|}}
+        {{#let (hash comp=(component 'foo-bar')) as |my|}}
           {{component my.comp}} World!
-        {{/with}}
+        {{/let}}
       `
     );
 
@@ -1131,9 +1131,9 @@ class CurlyClosureComponentsTest extends CurlyTest {
 
     this.render(
       stripTight`
-        {{#with (hash comp=(component 'foo-bar')) as |my|}}
+        {{#let (hash comp=(component 'foo-bar')) as |my|}}
           {{my.comp}} World!
-        {{/with}}
+        {{/let}}
       `
     );
 
@@ -1190,11 +1190,11 @@ class CurlyClosureComponentsTest extends CurlyTest {
 
     this.render(
       stripTight`
-        {{#with (component "foo-bar" "outer 1" "outer 2" a="outer a" b="outer b" c="outer c" e="outer e") as |outer|}}
-          {{#with (component outer "inner 1" a="inner a" d="inner d" e="inner e") as |inner|}}
+        {{#let (component "foo-bar" "outer 1" "outer 2" a="outer a" b="outer b" c="outer c" e="outer e") as |outer|}}
+          {{#let (component outer "inner 1" a="inner a" d="inner d" e="inner e") as |inner|}}
             {{#component inner "invocation 1" "invocation 2" a="invocation a" b="invocation b"}}---{{/component}}
-          {{/with}}
-        {{/with}}
+          {{/let}}
+        {{/let}}
       `
     );
 

packages/@glimmer-workspace/integration-tests/test/helpers/array-test.ts

@@ -6,11 +6,11 @@ class ArrayTest extends RenderTest {
   @test
   'returns an array'() {
     this.render(strip`
-    {{#with (array "Sergio") as |people|}}
+    {{#let (array "Sergio") as |people|}}
       {{#each people as |personName|}}
         {{personName}}
       {{/each}}
-    {{/with}}`);
+    {{/let}}`);
 
     this.assertHTML('Sergio');
 
@@ -20,11 +20,11 @@ class ArrayTest extends RenderTest {
   @test
   'can have more than one value'() {
     this.render(strip`
-    {{#with (array "Sergio" "Robert") as |people|}}
+    {{#let (array "Sergio" "Robert") as |people|}}
       {{#each people as |personName|}}
         {{personName}},
       {{/each}}
-    {{/with}}`);
+    {{/let}}`);
 
     this.assertHTML('Sergio,Robert,');
 
@@ -34,11 +34,11 @@ class ArrayTest extends RenderTest {
   @test
   'binds values when variables are used'() {
     this.render(
-      strip`{{#with (array this.personOne) as |people|}}
+      strip`{{#let (array this.personOne) as |people|}}
             {{#each people as |personName|}}
               {{personName}}
             {{/each}}
-          {{/with}}`,
+          {{/let}}`,
       {
         personOne: 'Tom',
       }
@@ -58,11 +58,11 @@ class ArrayTest extends RenderTest {
   @test
   'binds multiple values when variables are used'() {
     this.render(
-      strip`{{#with (array this.personOne this.personTwo) as |people|}}
+      strip`{{#let (array this.personOne this.personTwo) as |people|}}
             {{#each people as |personName|}}
               {{personName}},
             {{/each}}
-          {{/with}}`,
+          {{/let}}`,
       {
         personOne: 'Tom',
         personTwo: 'Yehuda',

packages/@glimmer-workspace/integration-tests/test/updating-test.ts

@@ -560,17 +560,6 @@ class UpdatingTest extends RenderTest {
     this.testStatefulHelper(assert, options);
   }
 
-  @test
-  'helpers passed as arguments to {{#with}} are not torn down when switching between blocks'() {
-    let options = {
-      template: '{{#with (stateful-foo) as |unused|}}Yes{{/with}}',
-      truthyValue: {},
-      falsyValue: null,
-    };
-
-    this.testStatefulHelper(assert, options);
-  }
-
   @test
   'helpers passed as arguments to {{#each}} are not torn down when switching between blocks'() {
     let options = {
@@ -900,7 +889,7 @@ class UpdatingTest extends RenderTest {
 
     const person = { name: new Name('Godfrey', 'Chan') };
 
-    this.render('<div>{{#with this.person.name.first as |f|}}{{f}}{{/with}}</div>', {
+    this.render('<div>{{#let this.person.name.first as |f|}}{{f}}{{/let}}</div>', {
       person,
     });
 
@@ -943,7 +932,7 @@ class UpdatingTest extends RenderTest {
 
         -----
 
-        {{#with this.value as |foo|}}
+        {{#let this.value as |foo|}}
           foo: "{{foo}}";
           bar: "{{bar}}";
           value: "{{this.value}}";
@@ -953,26 +942,26 @@ class UpdatingTest extends RenderTest {
 
           -----
 
-          {{#with foo as |bar|}}
+          {{#let foo as |bar|}}
             foo: "{{foo}}";
             bar: "{{bar}}";
             value: "{{this.value}}";
             echo foo: "{{echo foo}}";
             echo bar: "{{echo bar}}";
             echo value: "{{echo this.value}}";
-          {{/with}}
-        {{/with}}
+          {{/let}}
+        {{/let}}
 
         -----
 
-        {{#with this.value as |bar|}}
+        {{#let this.value as |bar|}}
           foo: "{{foo}}";
           bar: "{{bar}}";
           value: "{{this.value}}";
           echo foo: "{{echo this.foo}}";
           echo bar: "{{echo bar}}";
           echo value: "{{echo this.value}}";
-        {{/with}}
+        {{/let}}
       </div>
     `;
 
@@ -1108,7 +1097,7 @@ class UpdatingTest extends RenderTest {
   @test
   'block arguments (ensure balanced push/pop)'() {
     let person = { name: { first: 'Godfrey', last: 'Chan' } };
-    this.render('<div>{{#with this.person.name.first as |f|}}{{f}}{{/with}}{{this.f}}</div>', {
+    this.render('<div>{{#let this.person.name.first as |f|}}{{f}}{{/let}}{{this.f}}</div>', {
       person,
       f: 'Outer',
     });
@@ -1128,9 +1117,9 @@ class UpdatingTest extends RenderTest {
     this.render(
       stripTight`
         <div>
-          [{{#with this.person as |name|}}{{this.name}}{{/with}}]
-          [{{#with this.person as |name|}}{{#with this.name as |test|}}{{test}}{{/with}}{{/with}}]
-          [{{#with this.person as |name|}}{{#with (noop this.name) as |test|}}{{test}}{{/with}}{{/with}}]
+          [{{#let this.person as |name|}}{{this.name}}{{/let}}]
+          [{{#let this.person as |name|}}{{#let this.name as |test|}}{{test}}{{/let}}{{/let}}]
+          [{{#let this.person as |name|}}{{#let (noop this.name) as |test|}}{{test}}{{/let}}{{/let}}]
         </div>
       `,
       { person: 'Yehuda', name: 'Godfrey' }
@@ -1148,7 +1137,7 @@ class UpdatingTest extends RenderTest {
 
   @test
   'The with helper should consider an empty array truthy'() {
-    this.render('<div>{{#with this.condition as |c|}}{{c.length}}{{/with}}</div>', {
+    this.render('<div>{{#let this.condition as |c|}}{{c.length}}{{/let}}</div>', {
       condition: [],
     });
 

packages/@glimmer/compiler/lib/builder/builder.ts

@@ -341,8 +341,8 @@ function buildKeyword(
     : null;
 
   switch (name) {
-    case 'with':
-      return [Op.With, expect(params, 'with requires params')[0], block, inverse];
+    case 'let':
+      return [Op.Let, expect(params, 'let requires params'), block];
     case 'if':
       return [Op.If, expect(params, 'if requires params')[0], block, inverse];
     case 'each': {