.tmpl.ts does not reload included parts from import #483

boeckMt · 2023-09-06T13:22:12Z

Version

Platform

Windows

What steps will reproduce the bug?

When using plain ES modules (.tmpl.ts) as templates, reloading in the browser does not work for imported sub-templates.

e.g.

// default.tmpl.ts

import { PageData } from "lume/core.ts";
import headTmpl from "../_components/head.tmpl.ts";
import bodyTmpl from "../_components/body.tmpl.ts";

export default (data: PageData) => {
  return /*html*/ `<html>
  ${headTmpl(data)}
  <body>
    ${bodyTmpl(data)}
  </body>
</html>`;
};

May related to: #178

How often does it reproduce? Is there a required condition?

No response

What is the expected behavior?

No response

What do you see instead?

No changes will be shown if anything is changed in a subtemplate.

Additional information

A current workaround might be to define all subtemplates in the same file. However, this prevents reuse in some situations.

e.g.

// default.tmpl.ts
import { PageData } from "lume/core.ts";

const bodyTmpl = (data: PageData) => {
  return /*html*/ `<div>
    ${data.content}
   </div>`;
};

const headTmpl = (data: PageData) => {
  return /*html*/ `<head>
  <title>${data.title}</title>
  ...
</head>`;
};

export default (data: PageData) => {
  return /*html*/ `<html>
  ${headTmpl(data)}
  <body>
    ${bodyTmpl(data)}
  </body>
</html>`;
};

oscarotero · 2023-09-06T14:38:20Z

This is not a bug, but is how Deno works.
Any module loaded with import ... is cached by Deno and there's no way to refresh the module after any change.

This is why Lume exposes the comp variable:

// default.tmpl.ts

import { PageData } from "lume/core.ts";

export default (data: PageData) => {
  const { comp } = data;

  return /*html*/ `<html>
  ${comp.head(data)}
  <body>
    ${comp.body(data)}
  </body>
</html>`;
};

More info: https://lume.land/docs/core/components/

boeckMt · 2023-09-07T16:07:31Z

Thanks for the information, at first it did not work because I used the same extension for the components as for the templates.

_components/head.tmpl.ts";
_components/body.tmpl.ts";

now using

_components/head.ts";
_components/body.ts";

It works like a charm.

boeckMt added the bug Something isn't working label Sep 6, 2023

boeckMt closed this as completed Sep 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

.tmpl.ts does not reload included parts from import #483

.tmpl.ts does not reload included parts from import #483

boeckMt commented Sep 6, 2023 •

edited

Loading

oscarotero commented Sep 6, 2023

boeckMt commented Sep 7, 2023

.tmpl.ts does not reload included parts from import #483

.tmpl.ts does not reload included parts from import #483

Comments

boeckMt commented Sep 6, 2023 • edited Loading

Version

Platform

What steps will reproduce the bug?

How often does it reproduce? Is there a required condition?

What is the expected behavior?

What do you see instead?

Additional information

oscarotero commented Sep 6, 2023

boeckMt commented Sep 7, 2023

boeckMt commented Sep 6, 2023 •

edited

Loading