lit until rendering function source

Question

I am facing a weird problem, I am using lit until to wait for a promise to return the template, however the the until's function code is rendered instead, For ex, I have ,

render() {
    return html`
      <div class="small-tool-card">
        ${this.renderProductLogo(product)}
        <div class="text-container">
          ${this.renderProductTitle(product)}
          ${until(
            this.renderTryLink(product),
            html`
              loading...
            `
          )}
        </div>
      </div>
    `;
  }

and instead of "loading..." or the output of renderTryLink(), which returns a promise that resolves to html`` , I see the following code being rendered,

(part) => { let state = _state.get(part); if (state === undefined) { state = { lastRenderedIndex: _infinity, values: [], }; _state.set(part, state); } const previousValues

any help will be appreciated. Thanks.

score 2 · Answer 1 · answered Apr 19 '22 at 12:10

changing

import { until } from 'lit-html/directives/until.js';

to

import { until } from 'lit/directives/until.js';

solved this. I believe by specifically importing from lit-html, we were missing other directives. Note that the example code on lit needs to be fixed as well.

lit until rendering function source

1 Answers1