componentjs/component

[Not an Issue] Components as node modules

bowd opened this issue · 0 comments

bowd commented

Hey guys,

Component is still pretty close to my heart (and we still rely on it for our build at anyroad/anyguide) so I wanted to share something with whoever's still out there. I dunno if this better lives on component/builder2 but it feels like a more general thing.

I was banging my head last night to figure out how to make our components behave like regular node_modules. Mostly because we use React and I would love to test our components with Jest but that required them to be valid node modules.

And I knew that was possible having CommonJS all around + having had this merged which allows for more semantic, path based locals.

What I ended up doing is creating another step to my build, which based on the component dependency tree, I create dummy node_modules folders inside of every local component and vendor dependency which contain symlinks to other components or vendor dependencies made in such a way that it's requires resolve correctly wether it's in the component.js build step or just firing up node.

The builder step looks like this: https://gist.github.com/bogdan-dumitru/35069f835b7b34bc1b88

So we can imagine that we have a component named views/ui/form/location_input which has a dependency on views/ui/icon and components/react @ v0.12.2. The node_modules folder for the component will have a views folder, which has a ui folder which has an icon symlink to views/ui/icon, and then it will have a react symlink to something like vendor/components/react/0.12.2. The name of the symlink will be based on the node.name of the component as defined in component.json to match the way we require it.

Here's an example of my initial testing on this: https://www.evernote.com/shard/s254/sh/d873b312-210f-4cc6-b773-0a4d05710ff4/42ec5dfbd7db3e4bdfd191b34f723975

And here's my first happy Jest test 😄 https://s3.amazonaws.com/uploads.hipchat.com/33904/562391/jCO1AOLYV8Q7Amc/Screen%20Shot%202015-01-15%20at%202.56.03%20PM.png

Was curious what you guys thing about this, but I wanted to share it in case it might be valuable for anybody.