How to use handlebar syntax as config value for production build?

[comatory]

I want to use Mailchimp's HandlebarJS support and use Maizzle to pregenerate my HTML templates for it.
Let's say I have code like this:

<a href="{{ data.url }}"

During development my config.js has the entry:

module.exports = {
   data: {
      url: 'somedummy.url.com'

I would expect to be able to use in my config.production.js

module.exports = {
  data: {
    url: '{{ data.production.url }}'
  }
}

So my code would expand to literally to:

<a href="{{ data.production.url }}">

It's quite difficult to generate templates with Maizzle that also contains handlebar syntax.
Is ther some ability to include HandlebarJS syntax and not transform it? I tried different tricks like escaping it (even without putting it to config.production.js):

\{{{{ data.production.url }}}}

But that doesn't help. Thanks for any suggestions.

[comatory]

It would be great to have some directive that would tell Maizzle to treat HandlebarJS expressions literally.
The only thing that worked for me was (where name equaled to data.production.url):

            <raw>
              {{
            </raw>
            {{ name }}
            <raw>
              }}
            </raw>

This is not feasible when trying to replace HTML attributes. Perhaps there's some trick I don't know about.

[cossssmin]

The way config files work in Maizzle is that a production config will be merged on top of the dev one, so you don't need to specify values that won't change (see docs).

Can you show me exactly how you'd wish to write it in Maizzle and what it would output when compiled?

[comatory]

Let's say I use some other service that actually renders the template, maybe url link. For development purposes I want to see a sensible value for url so I define

// config.js
module.exports = {
  data: {
    url: 'https://xyz.co'
  }
}

That is nice and I can use this in my templates:

<a href="{{ data.url }}">....

Which renders to:

<a href="https://xyz.co">...

Now the service I'm using has syntax for Handlebars as well. So the production output should be the literal output of the same code as above, or perhaps I'll be using some different object that is passed via API so maybe this is more suitable:

<a href="{{ myserviceprovider.someData.nested.url }}">...

☝️ I do not wish for this to be replaced for production output, I literally need "{{myserviceprovider.someData.nested.url}}" as a string.

With the way Maizzle works I'm unable to achieve this because

• dev config might add some value when building for prod OR
• since my config.production.js doesn't contain the value, it will be undefined

Like I mentioned above, using <raw> works but only for text, not if I wish to use it as value for HTML attribute like my link example.

I realize that my problem is that both Maizzle and my provider's template system both use HandlebarJS.
I wish there would be some inline symbol such as /{{ {{ ... }} }} which would just insert it as literal string.
I also realize I can pick some string format (for example: **/**{{ my.literal.string.including.braces}}**/** and then manually process the HTML file and replace it with whatever I need but it's another process where things might go wrong.

[cossssmin]

Got it, thanks for the detailed explanation.

This works fine in the latest version (4.2.2):

// config.js
module.exports = {
  url: 'https://example.com',
}

// config..production.js
module.exports = {
  url: '{{ variable }}',
}

<!-- src/templates/example.html -->
<div data-url="{{ page.url }}">
  {{ page.url }}
</div>

Results

Local development with npm run dev:

<div data-url="https://example.com">
  https://example.com
</div>

Building for production with npm run build:

<div data-url="{{ variable }}">
  {{ variable }}
</div>

[comatory]

I tried the steps above and I don't end up with {{ variable }} literal string in my template, I actually tried that before already.
It will still get evaluated. It ends up being undefined so the template has text "undefined" in production (same for the data-url attribute).

My workflow is:

1. Create template on my local computer using Maizzle
2. Build for prod on my local computer
3. Take the template and put it into the provider which then again transforms it (and replaces {{ ... }} with values provided via API).

[cossssmin]

Please provide a repo that reproduces the issue, I'm unable to reproduce this on my end.

[comatory]

OK I think I know what the issue is. It kind of seems like a bug.

Your approach described in previous comment works fine as long as the code isn't rendered inside a component. In this case in production build it still evaluates to undefined.

// config.js
module.exports = {
  // ...
  data: {
    exampleUrl: 'http://xyz.co',
  },
}

// config.production.js
module.exports = {
  // ...
  data: {
    exampleUrl: '{{ variable }}',
  },
  // ...
}

// transactional.html
<!-- snip -->
<component src="src/components/link-row.html">
  <a href="{{ page.data.exampleUrl }}">
    Link to {{ page.data.exampleUrl }}
  </a>
</component>
<!-- snip -->

// src/components/link-row.html
<tr>
  <td class="p-4">
    <content></content>
  </td>
</tr>

If I move the <a> outside of <component> it renders fine in production build.

I'm a bit lazy to create repository for this but I'm attaching the source code in zip file:

master.zip

See for yourself, maybe I misunderstood how components are supposed to work.
Thanks.

[cossssmin]

You might need to escape it again in the component like @{{ var}}.

Unfortunately that’s the way things work, at least for now, because the way the engine works is that it first compiles the layout/template and then the component, leading to a ‘double’ evaluation in the component in such cases.

This might change in the future as there is hope with a new PostHTML (the parser we use) plugin that might unify these.

[comatory]

OK can confirm that by prepending @ it works:

      <component src="src/components/link-row.html">
        <a href="@{{ page.data.exampleUrl }}">
          Link to @{{ page.data.exampleUrl }}
        </a>
      </component>

[csalmeida]

Thanks for working this out, helpful for Supabase and Postmark templates as well. 🙏

[Crateros]

This works! I needed to ensure that the double curly bracket syntax was not interpolated at build time since our notifications provider relies on liquid template syntax being present in the template when we upload it! Thank you 🙏

[cossssmin]

Also, remember that if you use the variable inside a class or id attribute, you need to add the backend option to removeUnusedCSS otherwise it strips it as it considers it a class string:

https://maizzle.com/docs/transformers/remove-unused-css#backend

And there's also the way we treat special characters in class names:

https://maizzle.com/docs/transformers/safe-class-names

For this one I suggest defining it in your production config so it doesn't remove { and }:

module.exports = {
  safeClassNames: {
    '{': '{',
    '}': '}',
  },
}

But again, this safeClassNames would only be needed if you're using that variable inside a class attribute.

[cossssmin]

We'll remove { and } from the default safeClassNames replacements strategy in the next release, so that class="{{ var }}" will just work and will not be compiled to class=" var " as it currently is.

[lando-danziger]

I am having a problem that seems related to this somehow - for Braze liquid - in one banner I needed to leave a shortcode for the text color so it could be assigned from content taken from contentful.

In the braze config I specified
bannerContentVoucherTextColor: "{{post_banner_content.voucherTextColor | default: 'white'}}",

Maizzle 3 was fine with it - but v4 is not liking it.

reason: 'Unknown word',
source: 'div { color: {{ page.bannerContentVoucherTextColor }}; padding-left: 12px; padding-right: 12px; padding-top: 8px; padding-bottom: 8px; }',

It gets compiled into the style with the other properties from Tailwind but gives this error - I am going to work on it some more - try try and get clear what is happening.