Component Shadowing

I like the idea of letting the user override components inside a theme, but sadly I don't agree this the correct approach.

Because the developer who is using the theme must know where and how the component is named inside the structure of it. This can be seen as an implementation detail.

Also, let's say that I, owner of a theme, make a refactor of the project (move some components, change the name, remove folders, etc.), then I'm breaking all the other projects that relays on my theme :/

I expect this truth will reveal the practical limits on how theming is used. Interesting. You've probably identified a boundary which will cause a lot of grief, but is ultimately helpful.

@emasuriano I'm open to alternative approaches if you have one. As it stands, components are part of the public API of a theme and they should be considered as such when creating themes. A major refactor of the public API would be considered a major release target just like any other public API breaking change.

I've thought through other approaches and they have significant drawbacks like requiring the theme author to wrap every import explicitly or namespace collisions between themes.

Does this feature work with a deeper folder structure inside src/components? For example: My theme has a button component located in gatsby-theme-name/src/components/elements/Button.js. I'm trying to override it in user/src/components/gatsby-theme-name/elements/Button/Button.js but only seeing the theme component.

Yes it works I use an atomic design structure and it works.

One thing I haven't been able to do is import a style file from the theme to the shadowed component something like a .scss or .less file. even thought a js component can be imported from the theme.

@pgegenfurtner it looks like your path includes an extra Button folder. It should be elements/Button.js in the replacement, not elements/Button/Button.js

@digitalhydra yeah, alternate extensions not working is something I consider a bug right now. Will hopefully be able to ship the fix this week when I finish up the child theming algorithm

You're right, my fault. But even with the right path it somehow doesn't work. Do I need any special config for this? I looked trough the example repo and I should make it exactly like it.

I like this component shadowing idea. It is really important to let users be able to override only presentational parts. I like how the example has split things into templates/blog-post.js with query and components/blog-post.js for just presentation.(https://github.com/ChristopherBiscardi/gatsby-theme-examples/blob/master/themes/gatsby-theme-blog/src/templates/blog-post.js) It would be nice to have a programmatic way to force(or encourage) theme authors to separate things like this so that users can only shadow presentational component. Or at least documentation could emphasis on it. Thanks for gatsby-themes and the component shadowing!