Maizzle is amazing! Just wondering how to preview emails in the dev ui without any data. (btw. there is no word in the docs about how to add data to the mails, e.g. by use of props)
Minimal example of an email template:
<script setup lang="ts">
defineProps<{
name: string;
}>();
</script>
<template>
<Html>
<Head />
<Body>
<Container>
<Text>{{ $t('hello') }} {{ name }}!</Text>
</Container>
</Body>
</Html>
</template>Now my backend (pure Nitro v3 project) would call:
const result = await render(template, { name: 'Henry Henryson' });Which works fine, BUT the dev UI will produce errors because name is undefined. Using withDefaults() is not an option as this may lead to embarrassing errors when props are forgotten.
Proposal
Create a compiler macro that only affects the dev ui. Something like:
<script setup lang="ts">
defineProps<{
name: string;
}>();
defineMaizzleMock({
name: 'Henry Henryson',
});
</script>
<template>
...
</template>Or possibly create another wrapper to keep type safety, but that would result in a double wrapper when using withDefaults():
defineMaizzleMock(
withDefaults(
defineProps<{
name: string;
something?: boolean;
}>(),
{
// Defaults
something: true,
},
),
{
// Mock, doesnt require optional props
name: 'Henry Henryson',
},
);
Maizzle is amazing! Just wondering how to preview emails in the dev ui without any data. (btw. there is no word in the docs about how to add data to the mails, e.g. by use of props)
Minimal example of an email template:
Now my backend (pure Nitro v3 project) would call:
Which works fine, BUT the dev UI will produce errors because
nameis undefined. UsingwithDefaults()is not an option as this may lead to embarrassing errors when props are forgotten.Proposal
Create a compiler macro that only affects the dev ui. Something like:
Or possibly create another wrapper to keep type safety, but that would result in a double wrapper when using
withDefaults():