Component Shadowing
November 17, 2018 at 7:30pmComponent Shadowing
November 17, 2018 at 7:30pmCheck out the Component Shadowing PR here: https://github.com/gatsbyjs/gatsby/pull/9992
Component Shadowing solves the use case of "I'm using the gatsby-theme-blog theme but I want the BlogPost (or Navigation, or Sidebar, etc) to render different markup/styling/etc". This is done by creating a replacement component in the current site, which will be injected in place of the theme's component.
More detailed information is available in the PR.
December 28, 2018 at 10:18am
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 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.
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.
January 15, 2019 at 3:24pm
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.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.
it looks like your path includes an extra
Button
folder. It should be elements/Button.js
in the replacement, not elements/Button/Button.js
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
January 16, 2019 at 7:39am
it looks like your path includes an extra
Button
folder. It should be elements/Button.js
in the replacement, not elements/Button/Button.js
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.
January 25, 2019 at 5:07pm
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!