Ignore mustache interpolation in brick source file/files

[Loi Tran]

Description

Add the ability to ignore mustache {{}} interpolation. There may be cases in which a brick uses a framework which itself has mustache syntax and we want to preserve the {{}} that's inside of the brick.

Requirements

• Ability to label a file or {{}} as ignored/preserved ignore mustache.
• Generated brick that doesn't parse/interpolate the labeled/preserved {{}} with cli vars

Additional Context

I have a brick file which contains a vue component.

<template>
  <div class="flex justify-center bg-red-100">
    <div class="mr-16 text-center">
      <h1>Undone</h1>
      <div>
        {{ countDone }}
      </div>
    </div>
    <div class="mr-16 text-center">
      <h1>Done</h1>
      <div>
        {{ countUndone }}
      </div>
    </div>
  </div>
</template>

<script setup>
const { countDone, countUndone } = useTodos()
</script>

Vue uses mustache syntax to inject variables into it's components/templates. When I generate my brick I end up with this.

<template>
  <div class="flex justify-center bg-red-100">
    <div class="mr-16 text-center">
      <h1>Undone</h1>
      <div>

      </div>
    </div>
    <div class="mr-16 text-center">
      <h1>Done</h1>
      <div>
      
      </div>
    </div>
  </div>
</template>

<script setup>
const { countDone, countUndone } = useTodos()
</script>

Not sure best way to do this. Could one of the following work?

• {{! }}
• {{@ }}
• {{- }}

I tried {{{}}} but it didn't work. Thanks so much for your suppport.

[Loi Tran]

I can preserve the mustaches using this syntax, {{& }}.

<template>
  <div class="flex justify-center bg-red-100">
    <div class="mr-16 text-center">
      <h1>Undone</h1>
      <div>{{& countUndone }}</div>
    </div>
    <div class="mr-16 text-center">
      <h1>Done</h1>
      <div>{{& countDone }}</div>
    </div>
  </div>
</template>

<script setup>
const { countDone, countUndone } = useTodos()
</script>

But the variables have to be defined inside of brick.yaml.

vars:
  countDone:
    type: string
    default: '{{ countDone }}'
  countUndone:
    type: string
    default: '{{ countUndone }}'

Is there a way to define vars outside of brick.yaml? With this work around the user is prompted even though they shouldn't be, these variables aren't specific to the project/user.

Thanks for your help. I poked around documentation and didn't see it.

[Felix Angelov]

@PrimeTimeTran you can use the mustacheCase lambda to preserve {{ }} brackets in your rendered template. Hope that helps 👍