owl icon indicating copy to clipboard operation
owl copied to clipboard

support t-slot in "t-called" template

Open mcm-odoo opened this issue 5 years ago • 5 comments

<templates>
  <div t-name="block">
    <div>Block</div>
    <t t-slot="default"/>
  </div>
  <div t-name="App">
    <t t-call="block">
      <div>Block Content</div>
    </t>
  </div>
</templates>

This template only renders Block without the slot and does not throw any error.

mcm-odoo avatar Jul 13 '20 11:07 mcm-odoo

With js being

const { Component } = owl;

class Block extends Component {}

class App extends Component {}
App.components = { Block };

const app = new App();
app.mount(document.body);

Test 1

<templates>
  
  <div t-name="Block">
    <div>Block</div>
    <t t-slot="default" />
  </div>
  
  <div t-name="App">
    <t t-call="Block">
      <div>Block Content</div>
    </t>
  </div>
  
</templates>

Result: Print "Block", default prop seems ignored.

Test 2

<templates>
  
  <div t-name="Block">
    <div>Block</div>
    <t t-slot="coucou" />
  </div>
  
  <div t-name="App">
    <t t-call="Block">
      <t t-set-slot="coucou">
      <div>Block Content</div>
      </t>
    </t>
  </div>
  
</templates>

Result: Error: Maximum call stack size exceeded.

Test 3

<templates>
  
  <div t-name="Block">
    <div>Block</div>
    <t t-slot="default" />
  </div>
  
  <div t-name="App">
    <t t-call="Block">
      <t t-set-slot="default">
      <div>Block Content</div>
      </t>
    </t>
  </div>
  
</templates>

Result: Error: Maximum call stack size exceeded.

SimonGenin avatar Oct 13 '20 09:10 SimonGenin

@ged-odoo This one looks like something to fix, I will work on it today. Unless we need owl v2 to fix it ?

SimonGenin avatar Oct 15 '20 09:10 SimonGenin

It works with t-raw=0 instead of default slot

SimonGenin avatar Oct 15 '20 09:10 SimonGenin

<templates>
  <div t-name="Block">
    <div>Block</div>
    <t t-slot="default"/>
  </div>
  <div t-name="App">
    <Block>
      <div>Block Content</div>
    </Block>
  </div>
</templates>

and

<templates>
  <div t-name="Block">
    <div>Block</div>
    <t t-slot="coucou"/>
  </div>
  <div t-name="App">
    <Block>
      <t t-set-slot="coucou">
      <div>Block Content</div>
      </t>
    </Block>
  </div>
</templates>

work both fine.

SimonGenin avatar Oct 15 '20 09:10 SimonGenin

So the problem boils down to: Having one parent and child and calling the child with a t-call instead of its component tag. Having one component calling a template (non component) using t-slots. => Either it should work and it's a bug or we should throw an error saying slots shouldn't be used there.

SimonGenin avatar Oct 15 '20 09:10 SimonGenin