Question: how to implement string layouts

[mohas]

Hi, being new to liquidjs and running some tests, I cannot find a way to achieve layouts using template strings instead of files:

const template = `
header
{% block content %}My default content{% endblock %}
footer`

const content = `{% block content %}My page content{% endblock %}`

// result = `header
My page content
footer`

evey example uses files. using the code below ignores the content completly:

test('render layout from string', async () => {

    const [layoutText, contentText] = await Promise.all([loadTemplateAsText('layout'), loadTemplateAsText('content_simple')])

    const layoutTemplate = engine.parse(layoutText)
    const contentTemplate = engine.parse(contentText)

    const scope = {
        content: contentTemplate
    }
    const result = await engine.render(layoutTemplate, scope)

    // Fails
    expect(result).toBe('<header>header</header>\r\n<div>\r\n    My page content\r\n</div>\r\n<footer>footer</footer>')
})  

Thank you if you have any insights to share

[harttle]

Please try this https://liquidjs.com/tutorials/render-file.html#Abstract-File-System

[jg-rp]

I like to use a Map-based template loader for such cases. Also note that block and layout tag usage in LiquidJS is different from some other template engines.

import { Liquid } from "liquidjs";

/**
 * A template loader that reads template content from a map of strings.
 *
 * @implements FS
 */
class MapFS {
  // @type {Map<string, string>}
  templates;

  constructor(iterable) {
    if (iterable !== undefined) {
      this.templates = new Map(iterable);
    } else {
      this.templates = new Map();
    }
  }

  async exists(filepath) {
    return this.templates.has(filepath);
  }

  existsSync(filepath) {
    return this.templates.has(filepath);
  }

  async readFile(filepath) {
    return this.readFileSync(filepath);
  }

  readFileSync(filepath) {
    const content = this.templates.get(filepath);
    if (content === undefined) {
      throw new Error("ENOENT");
    }
    return content;
  }

  resolve(dir, file, ext) {
    return file + ext;
  }
}

const layoutTemplate = `\
header
{% block content %}My default content{% endblock %}
{% render 'footer' %}`;

const partials = {
  some_layout: layoutTemplate,
  footer: "Some footer",
};

const liquid = new Liquid({
  fs: new MapFS(Object.entries(partials)),
  relativeReference: false,
});

const templateContext = {
  you: "world",
};

const rootTemplate = `\
{% layout "some_layout" %}
{% block content %}Hello, {{ you }}!{% endblock %}
`;

const result = liquid.parseAndRenderSync(rootTemplate, templateContext);
console.log(result);

[harttle]

@jg-rp great work, very intuitive and useful! We should try integrate this into LiquidJS.