Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Mar 9, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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' }
);

Original file line number Diff line number Diff line change
@@ -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);
Original file line number Diff line number Diff line change
@@ -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"' },
});

Original file line number Diff line number Diff line change
@@ -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}}
`
);

Original file line number Diff line number Diff line change
@@ -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',
35 changes: 12 additions & 23 deletions packages/@glimmer-workspace/integration-tests/test/updating-test.ts
Original file line number Diff line number Diff line change
@@ -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: [],
});

4 changes: 2 additions & 2 deletions packages/@glimmer/compiler/lib/builder/builder.ts
Original file line number Diff line number Diff line change
@@ -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': {
Loading
Oops, something went wrong.
Loading
Oops, something went wrong.