Programmatic templating features?

[jessegavin]

It would be helpful for my use cases if this DSL supported programmatic templating features like variable definitions, expressions, and possibly control flow.

About 90% of the time in my work with SVGs, the properties of the elements need to be dynamic.

I normally use Vue for things like this, but I can see the appeal of the mirrow syntax, especially with regard to interactivity/animation.

I am wondering if this sort of thing is under consideration

[osa-mannella]

@jessegavin Thanks for the issue, this is definitely something I have been considering if there was ample interest, at the moment when using Mirrow and I want a more dynamic nature I will use a script { } block for runtime mutation.

I could absolutely see the appeal of conditionals in Mirrow, that said my main fear would be re-inventing the wheel with respect to reactive state while ensuring the most compatible across any workflow. Thanks again for the feedback!

[jessegavin]

I totally hear you about not wanting to re-invent the wheel.

Thinking a bit about your Framework adapter feature, I wonder whether you could create a simple (maybe?) way for certain values to be defined as variables. Something like...

vars {
  width: 150
  height: 150
  stroke: #333
  hoverStroke: #0070f3
}

svg {
  size: ($width, $height)

  rect {
    at: (20, 20)
    size: (100px, 100px)  // px string now validated
    radius: (8, 8)
    stroke: $stroke
    strokeWidth: 2
    id: "box"
  }

  @hover {
    #box { stroke: $hoverStroke; strokeWidth: 3 }
  }
}

Then the framework adapter would wire those up as props, using the values defined as defaults.

This could be beneficial for people who don't even use a framework adapter. When they use the same values many times in an SVG, this could allow them to change those values quickly.

Just a thought.

[jessegavin]

I submitted a pull request for this feature. I mostly used Claude Code to implement, so the quality may not be up to snuff.

By all means feel free to close and not implement. Or make use of anything that seems worthy.