How to customize interpolation rendering in Vue 3?

[rick-hup]

React Example

In React, components can handle children rendering directly:

// React with motion
export default function Counter() {
  const count = useMotionValue(0)
  const rounded = useTransform(() => Math.round(count.get()))
  useEffect(() => {
  const controls = animate(count, 100, { duration: 5 })
  return () => controls.stop()
  }, [])
  return <motion.pre>{rounded}</motion.pre>
  // motion.pre can handle how children are rendered
}

Current Vue Behavior

In Vue 3, interpolation is always compiled to _toDisplayString:

<template>
  <div>{{ someValue }}</div>
</template>
<!-- Compiled to -->
function render() {
  return toDisplayString(someValue)
}

Question

Is it possible to achieve similar behavior in Vue where components can control how interpolated content is rendered?

For example, I'd like to do:

<template>
   <motion-pre>{{ count }}</motion-pre>
   <!-- Let motion-pre handle the rendering -->
</template>

Any suggestions or insights would be appreciated!

[pdsuwwz]

I guess you might be wanting a more abstract AST feature to refine the rendering of each pre node. A lib like hast-util-to-jsx-runtime, unified can help you implement custom rendering in Vue 3 by converting HAST to JSX. You can try exploring it:

https://github.com/unifiedjs/unified

https://github.com/syntax-tree/hast-util-to-jsx-runtime

[rick-hup]

Thanks! I'm trying to prevent the motionValue object from being stringified. Want motion-vue to use the motionValue object directly for rendering. Looks like we'll need to handle this through props for now.

[pdsuwwz]

Provide you with an idea as a reference:

1. You can try first to get the interpolation through useSlots with slots?.default?.(),
2. Then use AST techniques to specify the rendering method of slots?.default?.().

Also, I searched and found a code related to handling slots and pre. I'm not sure if it's the effect you're looking for, hope it helps you:
https://github.com/Deuscx/vue-markdown/blob/main/src/Markdown.tsx#L137

[rick-hup]

Thanks! That'd work for an app, but too hacky for a library. Need a more Vue-native approach.

[pdsuwwz]

Yep, unfortunately, Vue3 seems to have no relevant API... but you can seek help and support from the Vue Official team. All I can think of now is to do some hacking, which is a bit troublesome :)

[Tim-Veestraeten]

The official Vue docs contain an example for an animated number: https://vuejs.org/guide/extras/animation#animating-with-watchers. It doesn't use custom rendering techniques, instead it passes a reactive object to an animation library. Does that cover your use case?