diff --git a/docs/plugins.md b/docs/plugins.md index d32a4506a..249268da3 100644 --- a/docs/plugins.md +++ b/docs/plugins.md @@ -3,14 +3,69 @@ Scully uses a plugin system to allow users to define new ways for Scully to pre-render your app. There are three main types of plugins: +1. [Register Plugin](#register-plugin) 1. [Router Plugins](#router-plugin) -2. [Render Plugins](#render-plugin) -3. [File Handler Plugins](#file-plugin) +1. [Render Plugins](#render-plugin) +1. [File Handler Plugins](#file-plugin) See our [Recommended Plugins](recommended-plugins.md) page to find a list of available plugins. --- +## Register Plugin + +The `registerPlugin` is the method created for add new plugins to scully. This method has 4 parameters: + +- type +- name +- plugin +- validator + +### type: PluginTypes + +`type` is a reference the to the type of plugin. It could be `render`, `router` or `fileHandler`. + +### name: string + +`name` is a reference to the name of the plugin. + +### plugin: any + +`plugin` is a reference to the plugin function. + +### validator: function + +`validator` is a reference to the validations function. It should return an array of errors. + +> Cool tip: you can add color to the validator errors using the colors inside the `log.ts` file. + +##### Example + +```typescript +import {yellow} from '@scullyio/scully/utils/log'; + +// Omited code ... + +const validator = async options => { + const errors = []; + + if (options.numberOfPages && typeof options.numberOfPages !== 'number') { + errors.push( + `my-custom-pluging plugin numberOfPages should be a number, not a ${yellow( + typeof options.numberOfPages + )}` + ); + } + + return errors; +}; +``` + +### IMPORTANT + +Scully plugins are files with `.js` extension, which should be exported and used in `scully.config.js` +file using the `require()` method. + ## Router Plugins ### What is a Router Plugin? @@ -105,7 +160,9 @@ The `HandledRoute[]` gets added into the `scully-routes.json` that is generated In our previous example of an app with the route `/user/:userId` where we have five distinct userIds, here is a **router plugin** that would turn the raw route into five distinct HandledRoutes. -```typescript +```javascript +const {registerPlugin} = require('@scullyio/scully'); + function userIdPlugin(route: string, config = {}): Promise { return Promise.resolve([ {route: '/user/1'}, @@ -116,7 +173,8 @@ function userIdPlugin(route: string, config = {}): Promise { ]); } // DON'T FORGET THIS STEP -registerPlugin('router', 'userIds', userIdPlugin); +const validator = async conf => []; +registerPlugin('router', 'userIds', userIdPlugin, validator); ``` Once we have built a plugin, we can configure our `scully.config.js` to use our plugin. @@ -219,6 +277,8 @@ function exampleContentPlugin(HTML: string, route: HandledRoute): Promise []; +registerPlugin('render', 'defaultTitle', defaultTitlePlugin, validator); + +module.exports.defaultTitlePlugin = defaultTitlePlugin; ``` In this example, the HTML that the Angular app rendered is transformed to include a title (if one wasn't found). This @@ -239,11 +302,16 @@ is the primary function of a render plugin. Here is another example that would replace any instances of `:)` with a smiley emoji: ```typescript +const {registerPlugin} = require('@scullyio/scully'); + function smileEmojiPlugin(html, route) { return Promise.resolve(html.replace(/\:\)/g, '😊')); } // This registers your plugin as -registerPlugin('render', 'smiles', smileEmojiPlugin); +const validator = async conf => []; +registerPlugin('render', 'smiles', smileEmojiPlugin, validator); + +module.exports.smileEmojiPlugin = smileEmojiPlugin; ``` ### Render Plugin Examples @@ -295,6 +363,8 @@ function csvFilePlugin(raw) { } // This registers your plugin registerPlugin('fileHandler', 'csv', {handler: csvFilePlugin}); + +module.exports.csvFilePlugin = csvFilePlugin; ``` ### File Handler Plugin Examples