mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[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:
@@ -46,6 +46,8 @@ Here is how the `Navbar` component could be defined, with the `t-slot` directive
|
|||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Note that `t-slot` can only be used on a `<t>` element.
|
||||||
|
|
||||||
## Named slots
|
## Named slots
|
||||||
|
|
||||||
Default slots are very useful, but sometimes, we may need more than one slot.
|
Default slots are very useful, but sometimes, we may need more than one slot.
|
||||||
|
|||||||
@@ -798,6 +798,12 @@ function parseTSlot(node: Element, ctx: ParsingContext): AST | null {
|
|||||||
if (!node.hasAttribute("t-slot")) {
|
if (!node.hasAttribute("t-slot")) {
|
||||||
return null;
|
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")!;
|
const name = node.getAttribute("t-slot")!;
|
||||||
node.removeAttribute("t-slot");
|
node.removeAttribute("t-slot");
|
||||||
let attrs: Attrs | null = null;
|
let attrs: Attrs | null = null;
|
||||||
|
|||||||
@@ -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
|
// t-debug
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
|
|||||||
Reference in New Issue
Block a user