Scully: Not able to use custom plugin

[samvloeberghs]

🐞 Bug report

Description

When defining a custom plugin and registering it, it can't be used as type, as defined in the documentation https://github.com/scullyio/scully/blob/master/docs/plugins.md

🔬Minimal Reproduction

1) Start from a new empty angular-cli project with one route, for example /about.
2) Add scully, following the docs
3) Create a new plugin voidPlugin.js in the root of the project.

function voidPlugin(html, route) {
  return Promise.resolve(html);
}
module.exports.voidPlugin = voidPlugin;

4) import and register the plugin in the scully.config.js

const { registerPlugin } = require('@scullyio/scully/bin');
const { voidPlugin } = require('./voidPlugin');

registerPlugin('render', 'void', voidPlugin);

exports.config = {
  projectRoot: "./src/app",
  routes: {
    "/about": {
      "type": "void"
    }
  }
};

💻Your Environment

Angular Version:

Angular CLI: 9.0.0-rc.7
Node: 12.14.0
OS: darwin x64

Angular: 9.0.0-rc.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.7
@angular-devkit/build-angular     0.900.0-rc.7
@angular-devkit/build-optimizer   0.900.0-rc.7
@angular-devkit/build-webpack     0.900.0-rc.7
@angular-devkit/core              9.0.0-rc.7
@angular-devkit/schematics        9.0.0-rc.7
@ngtools/webpack                  9.0.0-rc.7
@schematics/angular               9.0.0-rc.7
@schematics/update                0.900.0-rc.7
rxjs                              6.5.4
typescript                        3.6.4
webpack                           4.41.2

Scully Version:

"@scullyio/init": "0.0.9",
"@scullyio/ng-lib": "latest",
 "@scullyio/scully": "latest",

🔥 Exception or Error

> scully

The option outFolder isn't configured, using default folder "/Users/samvloeberghs/Projects/Kwerri/ng-v9-scullyio/dist/static/".
Unknown type "void" in route "/about"

I think an example repo is not really required, because it's actually just the most basic example of setting up a render plugin. But if really needed I have just pushed my test code here: https://github.com/samvloeberghs/ng-v9-scullyio

[stewones]

same in here
https://github.com/stewwan/stewan-io

• npm install
• ng build
• npm run scully

[jorgeucano]

@SanderElias is working in a fix for that

[SanderElias]

@samvloeberghs You can only list routePlugins in the types.
When you want to add a (couple) of renderPlugins, you can use the
postRenderers: ['plugins','by', 'name'] option in your config
I created a small table of contents plgin that show how this can be done in #161 (might be merged in master by now)

[samvloeberghs]

@SanderElias cool, will try it out as soon as it hits master/latest

[SanderElias]

@samvloeberghs its in master since yesterday. I did push out a new version to NPM too.

[samvloeberghs]

@SanderElias I don't think it's solved now. I had to the impression I could add a plugin that gets executed post-render. Basically I just want to run a post-render function that takes the HTML and modifies it. How can this be achieved.

If I'm not mistaken, postRenderers is part of HandledRoutebut that is part of the router plugins? Is every renderer plugin supposed to be configured on an existing routerplugin? What if I just want to do something post-render?

My use case is very simple. I have a list of routes, some are build up dynamically, like for example /news/:id but other are the typical static routes like /about. For all routes, I want to execute a plugin, after the render of each route, that takes the HTML and transforms it. First I tried as follows without success, defining it only for the /about route:

// ./plugins/testPlugin.js
const {
  registerPlugin,
  configValidator
} = require('@scullyio/scully');

async function testPlugin(html, route) {
  console.log('route tested', route);
  return Promise.resolve(html);
}

testPlugin[configValidator] = async options => {
  return [];
};

registerPlugin('render', 'test', testPlugin);

module.exports.testPlugin = testPlugin;

// scully.config.js
require('./plugins/testPlugin');

exports.config = {
  projectRoot: './src/app',
  routes: {
    '/about': {
      type: 'void',
      postRenderers: ['test'],
    }
  }
};

And I get

Unknown type "void" in route "/about"

I used type: 'void' because I saw that in the example scully.config.js this is also used: https://github.com/scullyio/scully/blob/master/scully.config.js#L94

I also tried without type: 'void', like this:

require('./plugins/testPlugin');

exports.config = {
  projectRoot: './src/app',
  routes: {
    '/about': {
      postRenderers: ['test'],
    }
  }
};

but then I get the error:

Type missing in route "/about"
Unknown type "undefined" in route "/about"

[SanderElias]

@samvloeberghs, The type field needs a route-plugin. It will not work with render plugins.
try this:

require('./plugins/testPlugin');

exports.config = {
  projectRoot: './src/app',
  routes: {
    '/about': {
      type: 'default'.
      postRenderers: ['test'],
    }
  }
}

We really need a bit more documentatin around this.

[samvloeberghs]

@SanderElias I tried this, and it doesn't work:

error:

Unknown type "default" in route "/"
Unknown type "default" in route "/about"
Unknown type "default" in route "/not-found"

// scully.config.js
require('./plugins/testPlugin');

exports.config = {
  projectRoot: './src/app',
  routes: {
    '/': {
      type: 'default',
      postRenderers: ['test'],
    },
    '/about': {
      type: 'default',
      postRenderers: ['test'],
    },
    '/not-found': {
      type: 'default',
      postRenderers: ['test'],
    }
  }
};

Apart from that, I don't want to add this postRenderer for all routes that might get discovered by scully. There should be some sort of defaultPostRenderers global to all routes?

[aaronfrost]

@SanderElias there is no plugin with default. You have it all configured, but never build it. HAHA!

[aaronfrost]

Use this plugin as type:

const {registerPlugin, configValidator} = require('@scullyio/scully');
function voidPlugin() {
  const name = `voidPlugin-${Math.ceil(Math.random() * 1000)}`;
  voidPluginFunction[configValidator] = async () => [];
  registerPlugin('router', name, voidPluginFunction);
  return name;

  function voidPluginFunction(r){
    return Promise.resolve([{route: r}]);
  }
}

Add this to your config as follows:

...
'/about' : {
  type: voidPlugin(),
  postRenderers: ['minifyHtml'],
}

I cloned your project, and did this, and it worked fine.

[SanderElias]

@samvloeberghs Turns out, I didn't activate the default plugin :-D
However, yes, there is a defaultPostRenderers, and you can add that to the generic part of your config like:

require('./plugins/testPlugin');

exports.config = {
  projectRoot: './src/app',
  defaultPostRenderers: ['test']
  routes: {
    '/': {
      type: 'default',
    },
    '/about': {
      type: 'default',
    },
    '/not-found': {
      type: 'default',
    }
  }
};

If you specify the postrenderers in a route, those will be use _instead_ of the default ones, not in addition

[samvloeberghs]

@SanderElias this is what I needed, thanks!

The route configuration is not required anymore either, as these are auto-discovered by Scully.

require('./plugins/testPlugin');

exports.config = {
  projectRoot: './src/app',
  defaultPostRenderers: ['test']
};

is enough

[SanderElias]

@samvloeberghs If this works for you, can I close the issue?