-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: improve documentation for plugin authors #4272
Changes from 10 commits
ce9b870
c8e65ef
30ad745
3ae8f92
f2c6236
eaa76ae
6d22a0b
7603426
fd6a68c
d5a7118
6a203ea
bab8c3d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
--- | ||
title: Plugin Authoring | ||
--- | ||
|
||
One of the best ways to add functionality to Gatsby is through our plugin system. Gatsby is designed to be extensible, which means plugins are able to modify and extend just about everything Gatsby does. | ||
|
||
Of the many possibilities, plugins can: | ||
|
||
- add external data or content (e.g. your CMS, static files, a REST API) to your Gatsby GraphQL data | ||
- transform data from other formats (e.g. YAML, CSV) to JSON objects | ||
- add third-party services (e.g. Google Analytics, Instagram) to your site | ||
- anything you can dream up! | ||
|
||
## Core Concepts | ||
|
||
- Each Gatsby plugin can be installed as an npm package or as a [local plugin](#local-plugins) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Capitalize NPM There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Their official branding appears to keep it lowercase: https://www.npmjs.com/ 😕 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. How about "Each Gatsby plugin an be created as an NPM package or as a..." It seems odd to say you're "installing" a local plugin which you'd rarely do. |
||
- A `package.json` is required | ||
- Plugin implement the Gatsby APIs for [Node](/docs/node-apis/), [server-side rendering](/docs/ssr-apis/), and the [browser](/docs/browser-apis/) | ||
|
||
## Plugin naming conventions | ||
|
||
There are four standard plugin naming conventions for Gatsby: | ||
|
||
- **`gatsby-source-*`** — a source plugin loads data from a given source (e.g. WordPress, MongoDB, the file system). Use this plugin type if you are connecting a new source of data to Gatsby. | ||
- Example: [`gatsby-source-contentful`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful) | ||
- Docs: [create a source plugin](/docs/create-source-plugin/) | ||
- **`gatsby-transformer-*`** — a transformer plugin converts data from one format (e.g. CSV, YAML) to a JavaScript object. Use this naming convention if your plugin will be transforming data from one format to another. | ||
- Example: [`gatsby-transformer-yaml`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-yaml) | ||
- **`gatsby-[plugin-name]-*`** — if a plugin is a plugin for another plugin 😅, it should be prefixed with the name of the plugin it extends (e.g. if it adds emoji to the output of `gatsby-transformer-remark`, call it `gatsby-remark-add-emoji`). Use this naming convention whenever your plugin will be included as a plugin in the `options` object of another plugin. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm guessing plugin creators will get this, and possibly I'm just the one who is confused. Because it sounds like if you just keep adding something to the end of all applicable prefixes, wouldn't it be gatsby-transformer-remark-add-emoji? I mean, that's insanely long, but these instructions would have made me think that was correct without the helpful example. Does that make sense? |
||
- Example: [`gatsby-remark-images`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-images) | ||
- **`gatsby-plugin-*`** — this is the most general plugin type. Use this naming convention if your plugin doesn’t meet the requirements of any other plugin types. | ||
- Example: [`gatsby-plugin-sharp`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp) | ||
|
||
## What files does Gatsby look for in a plugin? | ||
|
||
All files are optional unless specifically marked as required. | ||
|
||
- `package.json` — [required] this can be an empty object (`{}`) for local plugins | ||
- `name` is used to identify the plugin when it mutates Gatsby’s GraphQL data structure | ||
- if `name` isn’t set, the folder name for the plugin is used | ||
- `version` is used to manage the cache — if it changes, the cache is cleared | ||
- if `version` isn’t set, an MD5 hash of the `gatsby-*` file contents is used to invalidate the cache | ||
- omitting the `version` field is recommended for local plugins | ||
- `gatsby-browser.js` — usage details are in the [browser API reference](/docs/browser-apis/) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is it worth being explicit that these three files are optional? Similar to the [required] note on |
||
- `gatsby-node.js` — usage details are in the [Node API reference](/docs/node-apis/) | ||
- `gatsby-ssr.js` — usage details are in the [SSR API reference](/docs/ssr-apis/) | ||
|
||
## Local plugins | ||
|
||
If a plugin is only relevant to your specific use-case, or if you’re developing a plugin and want a simpler workflow, a locally defined plugin is a convenient way to create and manage your plugin code. | ||
|
||
Place the code in the `plugins` folder in the root of your project like this: | ||
|
||
``` | ||
plugins | ||
└── my-own-plugin | ||
└── package.json | ||
``` | ||
|
||
**NOTE:** You still need to add the plugin to your `gatsby-config.js`. There is no auto-detection of local plugins. | ||
|
||
Like all `gatsby-*` files, the code is not being processed by Babel. If you want | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. *is not processed Kill "being" |
||
to use JavaScript syntax which isn't supported by your version of Node.js, you | ||
can place the files in a `src` subfolder and build them to the plugin folder | ||
root. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🤦♂️ Thanks!