gatsby-themes / General

Component Shadowing

Component Shadowing

gatsby-themes / General · November 17, 2018 at 7:30pm
Check 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 :/

like-fill
1
  • reply
  • like

December 28, 2018 at 3:08pm

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.

  • reply
  • like

December 28, 2018 at 6:34pm

@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.

  • reply
  • like

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.

  • reply
  • like

January 15, 2019 at 6:17pm

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

  • reply
  • like

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.

  • reply
  • like

@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

  • reply
  • like

@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

  • reply
  • like

January 16, 2019 at 7:39am

@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

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.

  • reply
  • like

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!

Edited
  • reply
  • like

Log in or sign up to chat