Bug: Expression Ignoring syntax `@{{...}}` don't work

[obiwan00]

• Maizzle Version: 4.7.6
• Node.js Version: 18.18.2

Expression Ignoring syntax @{{...}} doesn't properly work with config build.templates.source is an array.

HTML file content for testing:

@{{test_value}}

Expected result:

{{test_value}}

Actual result:

undefined

config.js:

module.exports = {
  build: {
    fail: 'verbose',
    templates: {
      source: [
        'src/templates', // ❌ignoring syntax doesn't work 
        'src/templates2', // ❌ignoring syntax doesn't work 
        'src/templates3', // ✅ ignoring syntax does work only for the last template in the `build.templates.source` config array.
      ],
      destination: {
        path: 'build_local',
      },
      assets: {
        source: 'src/images',
        destination: 'images',
      },
    },
  },
}

Thank you for your work.

[cossssmin]

Hi, thanks for the report. Where is the ignored expression placed - in a layout, a template, or a component file?

[obiwan00]

I have just checked. The issue occurs in layout, template, and components.

[cossssmin]

There might be double-compilation happening, does @@{{ test }} work instead?

[obiwan00]

Using @@{{ test }} doesn't fix the issue properly

module.exports = {
  build: {
    fail: 'verbose',
    templates: {
      source: [
        'src/templates', // ❌still not working, it will require using  `@@@{{ test }}` to start working
        'src/templates2', // ✅ works with `@@{{ test }}`
        'src/templates3', // ❌ `@@{{ test }}` leads to output: `@{{ test }}`
      ],

[cossssmin]

OK, thanks for confirming. Will look into it, not yet sure what can be done about it.

[obiwan00]

Thank you.

If this can't be resolved, I may use another syntax for Maizzle interpolation, like [[ ... ]]. Then using {{ ... }} won't cause the issue. https://maizzle.com/docs/expressions#change-delimiters

[cossssmin]

Checked in v5 which is under development and looks to be working as expected.

In v5 template sources will use globs, just like the Tailwind config:

[obiwan00]

Great. Do you have an approximate release date for v5?

[cossssmin]

Not yet... Trying to have it ready by the end of March when Maizzle turns 5 years old, but there's so much to cover (esm, types, docs, tests...) that realistically speaking I'll only have a beta ready by then.

[obiwan00]

Ok, thank you. Good luck.

[cossssmin]

Check v4.8.1, you might not need to ignore expressions that contain undefined vars :)

Something like this will be output as-is, as long as unsub is not defined:

<a href="{{ unsub }}">Unsubscribe</a> from my emails.

Done with the missingLocal config, it's not set to {local} by default.

Docs: https://maizzle.com/docs/configuration/expressions#missinglocal

[obiwan00]

Thank you for the updates.

I found out that if I use the build.templates array with only one source in each template config, this issue with @{{...}} does not reproduce.

[cossssmin]

Had to revert this in v4.8.2 as it was causing issues with existing components, mainly because && (logical AND) doesn't work as expected in node:vm, so this was creating broken code.

But you can enable it manually, i.e.:

module.exports = {
  build: {
    posthtml: {
      options: {
        missingLocal: '{local}'
      }
    }
  }
}

And then make sure to use simple ternaries instead of logical AND everywhere; for example replace stuff like this that we have in the Divider or Spacer components:

- {{ spaceY && `margin-top: ${spaceY}; margin-bottom: ${spaceY}` }};
+ {{ spaceY ? `margin-top: ${spaceY}; margin-bottom: ${spaceY}` : '' }};

We'll bring it back in Maizzle 5 when we'll update the Starter components too 👍

[obiwan00]

Ok, thank you. Have a nice day)