Monkeypatch plugin for Eleventy
npm install @henrycatalinismith/11tyshim
src="https://github.com/henrycatalinismith/11tyshim/raw/trunk/11tyshim.svg"
height="64"
/>
Eleventy monkeypatch plugin
alt="Build status"
/>
Need to monkeypatch Eleventy to listen to lifecycle events for your plugin?
Need access to eleventyInstance so you can read config variables or reload
the dev server? Tired of copypasting around that same monkeypatch() function
everyone else is using? This is the plugin you're looking for!
``
yarn add -D @henrycatalinismith/11tyshim
`javascript
const { shimPlugin } = require("@henrycatalinismith/11tyshim")
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(shimPlugin, {
finish: (eleventyInstance) => {
console.log("11ty build complete!")
},
serve: (eleventyInstance) => {
console.log("11ty dev server started!")
},
})
}
`
Pass a write function to the plugin and it'll run at the start of an Eleventy--serve
build. This function runs for both one-off Eleventy builds and the dev
server.
It receives the eleventyInstance as an argument.
`javascript
const { shimPlugin } = require("@henrycatalinismith/11tyshim")
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(shimPlugin, {
write: (eleventyInstance) => {
console.log("11ty build starting!")
},
})
}
`
Pass a finish function to the plugin and it'll run just before an Eleventy
build finishes. This function only runs in one-off builds of Eleventy sites,
not in the dev server.
It receives the eleventyInstance as an argument.
`javascript
const { shimPlugin } = require("@henrycatalinismith/11tyshim")
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(shimPlugin, {
finish: (eleventyInstance) => {
console.log("11ty build complete!")
console.log(site written to ${eleventyInstance.config.dir.output})`
},
})
}
Pass a serve function to the plugin and it'll run just before an Eleventy dev
server starts up. This function only runs in the Eleventy server, never during
one-off builds. Most plugin authors who monkeypatch this method do so to set up
development tools which watch files, rebuild them when they change, and then
reload the Eleventy server.
It receives the eleventyInstance as an argument.
`javascript
const { shimPlugin } = require("@henrycatalinismith/11tyshim")
const chokidar = require("chokidar")
const fs = require("fs")
const sass = require("sass")
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(shimPlugin, {
serve: (eleventyInstance) => {
console.log("11ty dev server started!")
chokidar.watch("style.scss").on("all", (event, path) => {
const { css } = sass.renderSync({ file: "style.scss" })
fs.writeFileSync(
${eleventyInstance.outputDir}/style.css,`
css
)
eleventyInstance.eleventyServe.reload()
})
},
})
}
Pass verbose: true to the plugin and it'll output a whole bunch of11tyshim`.
information about what it's doing. This is mostly useful for debugging. Please
enable this this option if you're reporting a bug in
* [Tips][Contributing]
* [Code of Conduct]
[MIT]
[Contributing]: https://github.com/henrycatalinismith/11tyshim/blob/trunk/contributing.md
[Code of Conduct]: https://github.com/henrycatalinismith/11tyshim/blob/trunk/code_of_conduct.md
[MIT]: https://github.com/henrycatalinismith/11tyshim/blob/trunk/license