react-webpack-generators / generator-react-webpack

Yeoman generator for ReactJS and Webpack
http://newtriks.com/2013/12/31/automating-react-with-yeoman-and-grunt/
MIT License
2.88k stars 355 forks source link

Providing sub-generator for container components #250

Closed sthzg closed 8 years ago

sthzg commented 8 years ago

What is your opinion on adding a sub-generator that creates container components to the 4.x-gen?

(1)$ yo react-webpack:container /my/namespace/foobar
# => adds FoobarContainer in src/components/my/namespace

(2)$ yo react-webpack:container /my/namespace/foobar  --createcomponent
# => same as (1) + adds Foobar in src/components/my/namespace
# => imports Foobar in FoobarContainer and adds it to the container's render method

(3)$ yo react-webpack:container /my/namespace/foobar  --createcomponent --stateless
# => same as (2), but with Foobar being a stateless function

(4)$ yo react-webpack:container /my/namespace/foobar  --createcomponent=Main
# => same as (2), but creates a component with a different name as the container

I find it useful and lately try to bundle internal state and business logic exclusively in container components (or, if using Flux, registering to stores inside containers).

I don't have a strong opinion on FoobarContainer being created inside src/components, though I usually prefer having everything inside one folder, as it makes it easier to refactor components to a separate package later.

Update: viewed from a different angle, a container in terms of (1) is really only a component that doesn't get styles applied (no style file, no cssmodule()), so this could probably be achieved with the --nostyle flag as proposed in https://github.com/newtriks/generator-react-webpack/issues/243). It's mostly by providing (2), (3), and (4) that this subgen would gain value.

stylesuxx commented 8 years ago

My sub generator does containers => https://github.com/stylesuxx/generator-react-webpack-redux/tree/master/generators/container It is a bit redux specific, since I am connecting a container to action dispatcher and reducer,...

I decided to put them into a separate directory under src. Also by default I render the Main Component.

I like the Idea of generating a component with the container - this is something I was thinking about adding to my generator.

weblogixx commented 8 years ago

Hi,

I am not completely sure about this. I also plan to add such a container feature for the alt version (using alt-container as a base). However, I do not know if it makes sense for regular projects (as you could also add one "regular" component and one stateless to archive the same goal).

However I will implement the nostyle flag as it makes sense for many basic components.

sthzg commented 8 years ago

I agree, with the nostyle flag there is little left to do (1. importing the container and 2. modifying render). I thought about passing the component creation down to the component subgen and then just modify the container component by means of some AST-parsing (which would have been the core task of the container subgen), but I also understand the argument that it may add too little benefit. Feel free to close the issue.

weblogixx commented 8 years ago

Hi @sthzg,

thank you for the feedback, will do so and just implement the nostyle switch. Feel free to submit a pr with container logic if you really need it.

sthzg commented 8 years ago

@weblogixx thanks for the nostyle switch! That's awesome.

I will try to write the container subgen as a reference implementation for this idea https://github.com/sthzg/generator-subgenext (don't know how it will work out yet). Would it be okay if I used contrib-subgen-react-webpack-container as a package name?