[Question][Plugins] Loading assets on demand?

[ahmedelgabri]

I wrote gatsby-plugin-klipse but I'd love to load the scripts & style files on demand, only if the page requires them, so I wonder what is the best way to do this? or if there is another plugin that is already doing this so I can have a look?

[KyleAMathews]

Here's one way I came up with in 30 seconds so use accordingly :-)

1. Add a new field to MarkdownRemark that returns a boolean saying if there is or isn't a code block in the markdown content
2. Don't auto-load the scripts/styles — instead, expose a module you can import (e.g. gatsby-plugin-klipse/load-client-resources)

3. Then a Gatsby template using klipse would query if there's a code field or not and if there is, it would run the load-client-resources function which would obviously be idempotent.

[ahmedelgabri]

But how would this work alongside gatsby-remark-prism for example, which overrides the node type https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-prismjs/src/index.js#L33-L40?

[KyleAMathews]

Put this plugin before prism so it runs first.

[ahmedelgabri]

I was hoping for a more robust way, but I guess I'll do that. I hope people will read the README.md then :)

[KyleAMathews]

Well feel free to come up with your own way :-)

[ahmedelgabri]

The problem is not my specific use-case, it's the fact that plugins can override nodes that other plugins can depend on. Which can be a hassle to debug & even use by users, I understand that this is not an easy issue but maybe something to consider as an improvement in the future, if possible.

[KyleAMathews]

Yes it's a poor design by Remark. Gatsby disallows plugins from mutating nodes for example for precisely this reason.

[ahmedelgabri]

I have a couple of more questions if you don't mind :)

1. Add a new field to MarkdownRemark that returns a boolean saying if there is or isn't a code block in the markdown content

This means I need to the plugin to be part of remark plugins because I'll need to manipulate the markdown AST right? Or there is another way to check for code blocks?

2. Don't auto-load the scripts/styles — instead, expose a module you can import (e.g. gatsby-plugin-klipse/load-client-resources)
3. Then a Gatsby template using klipse would query if there's a code field or not and if there is, it would run the load-client-resources function which would obviously be idempotent.

Not sure how can I load the assets from a plugin outside of gatsby-ssr.js which is what I'm currently doing using onRenderBody.

As for point 3, I assume this needs to be done on the user side, or can it be done inside the plugin still?

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!