[FIX] compiler: throw if using t-slot on a htmlelement tag

Before this commit, the tagName of a `t-slot` directive was ignored. So,
<t t-slot="owl">...</t>  and <div t-slot="owl">...</div> were basically
equivalent.

This is not really acceptable, since it most likely hides a developer
error. So, the question is what to do about it? There are two obvious
solutions:

- either make the `t-slot` directive behave as t-esc: the above example
would then be equivalent to <div><t t-slot="owl">...</t></div>
- or throw an error.

However, the first solution seems to be ambiguous when using a component
with slot props. How should the following code be interpreted?
   <SomeComponent a="a" b="b" t-slot="owl"/>
Should the 'a' and 'b' props be considered props for the component or
for the slot?

I guess we could make an exception for components, but it seems more
complicated than what it should be. Because of that, it seems simpler to
just throw an error.

closes #1354
This commit is contained in:
Géry Debongnie
2023-03-05 09:04:42 +01:00
parent cdad48d3a6
commit 79ea50aab9
3 changed files with 14 additions and 0 deletions
+2
View File
@@ -46,6 +46,8 @@ Here is how the `Navbar` component could be defined, with the `t-slot` directive
</div>
```
Note that `t-slot` can only be used on a `<t>` element.
## Named slots
Default slots are very useful, but sometimes, we may need more than one slot.
+6
View File
@@ -798,6 +798,12 @@ function parseTSlot(node: Element, ctx: ParsingContext): AST | null {
if (!node.hasAttribute("t-slot")) {
return null;
}
if (node.tagName !== "t") {
throw new OwlError(
`Directive 't-slot' can only be used on <t> nodes (used on a <${node.tagName}>)`
);
}
const name = node.getAttribute("t-slot")!;
node.removeAttribute("t-slot");
let attrs: Attrs | null = null;
+6
View File
@@ -1686,6 +1686,12 @@ describe("qweb parser", () => {
});
});
test("t-slot on a div tag should throw", async () => {
expect(() => parse(`<div t-slot="name"/>`)).toThrowError(
"Directive 't-slot' can only be used on <t> nodes (used on a <div>)"
);
});
// ---------------------------------------------------------------------------
// t-debug
// ---------------------------------------------------------------------------