How to reuse existing template literay when updating code in 'do action'

[jazimabbas]

Is there any way to pass the dynamic expression e.g.

<Action 
  do={() => {
     const newCode = ``;
     code.update`async function animate() {
       // New code here ...
       ${newCode}
     }`;
  }}
/>

I don't wanna repeat the same code again and again. I want to reuse the existing code because I have many lines of code. So how can we achieve this ? Any thoughts on this ?

[mattcroat]

I thought about it but turns out it's more complicated because tagged templates accept strings and expressions as arguments:

function update(strings, ...expressions) {
  // ...
}

So we could just concatenate everything but in this example where you have expressions inside:

async function animate() {
  ${newCode}
 }

The output would be this because expressions are added after the strings:

async function animate() {

 }

 // new code...

You could use a function but I would have to think about it more.

[mattcroat]

The strings and expressions array seem to match so we could merge them together. 🤔

[mattcroat]

Yeah it seems to work but the formatting needs work.

[jazimabbas]

I think we should make it as a normal function and call it instead passing template strings. If we do so, user has to do code formatting by himself.

[mattcroat]

This is what I meant by using a function:

<script>
  const template = () => `
    async function animate() {
      ${expression}
    }
  `
</script>

I prefer the tagged template experience and you only have to check for expressions and merge them plus the formatting should be respected by the autoIndent option:

https://github.com/user-attachments/assets/638c536a-d822-4fed-8ab1-866106e1a31c

I'm working on other improvements so I can add them together and update the docs.

[jazimabbas]

Sounds good. Looking forward to it. BTW, thanks for quick reply.

[mattcroat]

Closed https://github.com/animotionjs/animotion/commit/27982ad42e107a6d84083b93e79fdc4a9e1a4ea5.