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

Correctly handle <:inverse> named block #1296

Merged
merged 2 commits into from Apr 20, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/@glimmer/compiler/lib/passes/2-encoding/content.ts
Expand Up @@ -180,7 +180,11 @@ export class ContentEncoder {
}

NamedBlock({ name, body, scope }: mir.NamedBlock): WireFormat.Core.NamedBlock {
return [name.chars, [CONTENT.list(body), scope.slots]];
let nameChars = name.chars;
if (nameChars === 'inverse') {
nameChars = 'else';
}
return [nameChars, [CONTENT.list(body), scope.slots]];
}

If({ condition, block, inverse }: mir.If): WireFormat.Statements.If {
Expand Down
Expand Up @@ -268,6 +268,23 @@ export class EmberishComponentTests extends RenderTest {
this.assertStableRerender();
}

@test({ kind: 'curly' })
'inverse named block'() {
class FooBar extends EmberishCurlyComponent {
[index: string]: unknown;

constructor() {
super();
}
}
this.registerComponent('Curly', 'FooBar', 'Hello{{yield "my" to="inverse"}}world!', FooBar);

this.render(`<FooBar><:inverse as |value|> {{value}} </:inverse></FooBar>`);

this.assertComponent('Hello my world!');
this.assertStableRerender();
}

@test({ kind: 'curly' })
'invoking wrapped layout via angle brackets - invocation attributes merges classes'() {
class FooBar extends EmberishCurlyComponent {
Expand Down
Expand Up @@ -35,6 +35,24 @@ class NamedBlocksSyntaxErrors extends RenderTest {
}, syntaxErrorFor('Component had two named blocks with the same name, `<:foo>`. Only one block with a given name may be passed', '<Foo><:foo></:foo><:foo></:foo></Foo>', 'test-module', 1, 0));
}

@test
'Throws an error if both inverse and else named blocks are passed, inverse first'() {
this.assert.throws(() => {
preprocess('<Foo><:inverse></:inverse><:else></:else></Foo>', {
meta: { moduleName: 'test-module' },
});
}, syntaxErrorFor('Component has both <:else> and <:inverse> block. <:inverse> is an alias for <:else>', '<Foo><:inverse></:inverse><:else></:else></Foo>', 'test-module', 1, 0));
}

@test
'Throws an error if both inverse and else named blocks are passed, else first'() {
this.assert.throws(() => {
preprocess('<Foo><:else></:else><:inverse></:inverse></Foo>', {
meta: { moduleName: 'test-module' },
});
}, syntaxErrorFor('Component has both <:else> and <:inverse> block. <:inverse> is an alias for <:else>', '<Foo><:else></:else><:inverse></:inverse></Foo>', 'test-module', 1, 0));
}

@test
'Throws an error if there is content outside of the blocks'() {
this.assert.throws(() => {
Expand Down
10 changes: 10 additions & 0 deletions packages/@glimmer/syntax/lib/v2-a/normalize.ts
Expand Up @@ -906,6 +906,16 @@ class ElementChildren extends Children {
);
}

if (
(name === 'inverse' && seenNames.has('else')) ||
(name === 'else' && seenNames.has('inverse'))
) {
throw generateSyntaxError(
`Component has both <:else> and <:inverse> block. <:inverse> is an alias for <:else>`,
this.loc
);
}

seenNames.add(name);
}

Expand Down