How to use namespaced components (e.g. animated.div) in pug?

[mostrecent]

I'd like to use react-spring as animation lib and there is an option <animated.div />, check: http://react-spring.surge.sh/perf and I wasn't able to reflect this in pug so that it correctly transpiles to <animated.div />

Is it possible after all or did I just missed the right way?

[Eugene Zhlobo]

@mostrecent that is the limitation of pugjs, you have to create a variable and assign animated.div to it. For example:

import { animated } from 'react-spring' 

const AnimatedDiv = animated.div

pug`
  AnimatedDiv
`

// This will generate:
// <AnimatedDiv />

You also can use the plugin which will transform className generated by pug into property. Take a look at documentation: #limitations (and plugin).

Unfortunately, it will work if the object will start with upcase, like this:

import { animated as Animated } from 'react-spring' 

pug`
  Animated.div
`

// This will generate:
// <Animated.div />

That plugin can be easily changed to make it more natural in this case, I've just created an issue: ezhlobo/babel-plugin-transform-jsx-classname-components#5

Please, share your thoughts regarding that.

[mostrecent]

@ezhlobo thanks for your reply and I did try your other lib at ezhlobo/babel-plugin-transform-jsx-classname-components#5 before as well and I think your proposed solution (using that extra lib) might be a good, more elegant one.

Just wondering if this extra lib should be built into this main lib where you could turn it on and setup via webpack/babel options. However, heading over to the other's lib's issues...

[mostrecent]

Just wondering if this extra lib should be built into this main lib

Thought again about my idea and I think that both libs should be separated like it is right now. It's cleaner.