An experimental plugin to help with component shadowing discovery by annotating React components with the source file and the shadow target.
To test this plugin, install it as a local plugin.
- Clone this repo to a
plugins
directory in the website’s root directory.
site
├── content
├── plugins
│ └── gatsby-plugin-theme-helpers <-------
├── gatsby-config.js
└── gatsby-node.js
- Enable the plugin in
gatsby-config.js
module.exports = {
siteMetadata: {
title: `Gatsby`,
},
plugins: [`gatsby-plugin-theme-helpers`],
}
- Run
gatsby develop
Inspect your site using Devtools.
The plugin will add data-source
and data-shadow
attributes to your components to make it easy to figure out the source of a component and the name of the shadow file to create.