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>

[vpanyushenko]

What you are describing statically replaces the name with the data at build time, what I'm asking for is to leave the template there, I just want a preview during local development with data, but I want it built with the templates that will be replaced on the server.

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,
++server: {
++ data
++}
}

example.html

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

Data is moved to the server because it's not part of the build system. I guess it's possible to achieve this also with two different config files like config.js and config.production.js and remove the build from the prod one - but the semantics are wrong.

But this is still not ergonomic. Overtime when you have a lot of templates, a single data source is annoying to use. There may be conflicting properties. So now the user is either setting up a bunch of custom logic to get the correct data in there.

By having an option for from kind of data directory would make this much easier. Sendgrid does something similar when previewing templates in their web builder.