Ability to preview template expressions on localhost

[vpanyushenko]

For those users who are creating templates with Maizzle with expressions, often the expression will get filled out on the server, when fetching a user's name or order number. When developing on localhost, it's often hard to see exactly how the final template will look, especially when there are images and loops.

I propose adding an property to the config server options which would be a path to local data that would match the templates. For example

//config.js

export default {
  server: {
++  testData: ["./src/testData/**/*.json"],
  },
  build: {
    //other build options here
    content: ["./src/templates/**/*.html"],
  }
};

This would allow us when developing locally to have a directory, of json files that can be used to match the filename of the template and fill in the data on localhost. For example, if I have confirmation.html and login.html in my templates directory, I can also have a confirmation.json and login.json in my testData directory. So now while I'm developing locally, I can quickly see how the email will look after it's filled with data on the server. All of this data, of course, would not be included in the build.

[cossssmin]

You can import the data locally and have it in the same structure as in production. If using Node 20+ you can use import:

data.json

{
    "name": "Maizzle"
}

config.js

import data from './data.json' with {type: 'json'}

/** @type {import('@maizzle/framework').Config} */
export default {
  build: {
    content: ['emails/**/*.html'],
  },
  data,
}

example.html

<p>Hello, {{ page.data.name }}</p>