Skip to content
Open
Changes from 1 commit
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
24 changes: 17 additions & 7 deletions text/0000-partial-template.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,6 @@ export default class Example extends LightningElement {

## Motivation
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can see other motivations:

  • component inheritance. Typically, a base component can have some variables fragments in its template, which can be overridden by an inherited component. A good example is a complex commerce product detail component where you only want to change how the price is displayed.
  • Repeaters. You can easily create a 'repeat' component that takes a template as a parameter and iterate through it.


In investigating performance issues in components that are used hundreds of times on a
page it was noted that creating reusable child components; while organizationally nice,
were not as performant as inlining the HTML into the template;

In other instances it was noted that large conditonal blocks of HTML could be more organized
into seperate template files.

Expand Down Expand Up @@ -63,7 +59,7 @@ get dynamicTemplate() {
Why should we *not* do this? Please consider:

- Static analysis. Analyzing the template can give us a lot of information, but with something
like this, it makes it harder
like this, it makes it more difficult.
- Conditionally swapping out partial templates could be performantly bad in themselves negating
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm curious to understand what optimizations we are thinking about here, and how bad this can be on the performance of business apps. Do you have more details?

the benfit if we're not able to optimize for this.
- Recursion good/bad.
Expand All @@ -72,10 +68,24 @@ Why should we *not* do this? Please consider:

## Alternatives

The other design choice would be to compile time import via an include syntax.
Partials imported via the `template` tag and `lwc:partial` attribute.

- Introduce `lwc:partial="./file.html"` for compiled time content.
- Scoped `{variables}` within templates passed via attributes.
- Question: Would `lwc:partial={templateUrl}` not work? What about `lwc:partial={template}` via
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it should work fine I believe, but @diervo will have to look at this.

an `import`.

```
<template lwc:include="./template.html"></template>
// foo.html
<template><p>Value: {value}</p></template>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there are more details missing here, what you can pass into a template tag are attributes, what you can use in {something} are attributes, basically:

<template lwc:partial="./foo" some-value={myBeforeValue}></template>

In which case, you will use:

<template><p>Value: {someValue}</p></template>


// component.html
<template>
<h1>Before</h1>
<template lwc:partial="./foo" value={myBeforeValue}></template>
<h2>After</h1>
<template lwc:partial="./foo" value={myAfterValue}></template>
</template>
```

This syntax greatly cuts down on what would be possible and introduces verbose
Expand Down